artin/API-Explorer-II
1
0
Fork 0
mirror of https://github.com/OpenBankProject/API-Explorer-II.git synced 2026-02-06 10:47:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

add status indicators to tool messages

Browse Source
This commit is contained in:
Nemo Godebski-Pedersen 2025-03-26 09:36:58 +00:00
parent 6cf3f797b2
commit 74a0deaac8
4 changed files with 26 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
package-lock.json generated
View File

@ -57,6 +57,7 @@
"@types/markdown-it": "^14.1.1",
"@types/node": "^20.5.7",
"@types/oauth": "^0.9.6",
"@types/prismjs": "^1.26.5",
"@vitejs/plugin-vue": "^4.6.2",
"@vitejs/plugin-vue-jsx": "^3.1.0",
"@vue/eslint-config-prettier": "^9.0.0",
@ -3029,6 +3030,12 @@
"@types/node": "*"
}
},
"node_modules/@types/prismjs": {
"version": "1.26.5",
"resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.5.tgz",
"integrity": "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==",
"dev": true
},
"node_modules/@types/retry": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",

1
package.json
View File

@ -69,6 +69,7 @@
"@types/markdown-it": "^14.1.1",
"@types/node": "^20.5.7",
"@types/oauth": "^0.9.6",
"@types/prismjs": "^1.26.5",
"@vitejs/plugin-vue": "^4.6.2",
"@vitejs/plugin-vue-jsx": "^3.1.0",
"@vue/eslint-config-prettier": "^9.0.0",

11
src/components/ChatMessage.vue
View File

@ -21,7 +21,7 @@ import 'prismjs/components/prism-markup';
import 'prismjs/components/prism-http';
import 'prismjs/themes/prism-okaidia.css';
import { Warning } from '@element-plus/icons-vue'
import { Warning, RefreshRight, Check } from '@element-plus/icons-vue'
export default {
props: {
@ -78,7 +78,14 @@ export default {
<div v-if="message.toolCalls?.length !== 0" class="tool-calls-container">
<div v-for="toolCall in message.toolCalls" class="tool-call">
<div class="tool-message-container">
<div class="status" v-bind:class="toolCall.status"></div>
<div class="status" v-bind:class="toolCall.status">
<div v-if="toolCall.status === 'pending'">
<el-icon class="is-loading" color="#20cbeb"><RefreshRight /></el-icon>
</div>
<div v-else-if="toolCall.status === 'success'">
<el-icon color="#00ff18"><Check /></el-icon>
</div>
</div>
<div class="name">{{ toolCall.toolCall.name }}</div>
</div>

12
src/stores/chat.ts
View File

@ -234,10 +234,16 @@ export const useChat = defineStore('chat', {
for (const line of lines) {
if (line.startsWith('data: ') && line !== 'data: [DONE]') {
try {
const jsonStr = line.substring(6); // Remove 'data: '
const data = JSON.parse(jsonStr);
const content: RawOpeyMessage = data.content;
let data;
const jsonStr = line.substring(6); // Remove 'data: '
try {
data = JSON.parse(jsonStr);
} catch (e) {
console.error(`Failed to parse JSON: ${jsonStr}`);
throw new Error(`Failed to parse JSON stream data: ${jsonStr}`);
}
const content: RawOpeyMessage = data.content;
// This is where we process different types of messages from Opey by their 'type' field