diff --git a/package-lock.json b/package-lock.json index df69e2d..ed76bc7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index a92c340..3247ea5 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/ChatMessage.vue b/src/components/ChatMessage.vue index e49328b..e6b989c 100644 --- a/src/components/ChatMessage.vue +++ b/src/components/ChatMessage.vue @@ -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 {
-
+
+
+ +
+
+ +
+
{{ toolCall.toolCall.name }}
diff --git a/src/stores/chat.ts b/src/stores/chat.ts index 7994769..e5ab086 100644 --- a/src/stores/chat.ts +++ b/src/stores/chat.ts @@ -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