Hugging Face's logo

Spaces:
pvanand
/
code-chat-api
Sleeping

App Files Community
pvanand commited on
Commit
78425d0
·
verified ·
1 Parent(s): 4100b1a

Update static/chatui/index.html

Browse files
Files changed (1) hide show
  1. static/chatui/index.html +357 -356
static/chatui/index.html CHANGED
@@ -1,357 +1,358 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Agent Chat Interface</title>
7
- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
8
- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
9
- <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
10
- <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
11
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
12
- <style>
13
- .chat-message {
14
- transition: opacity 0.3s ease, transform 0.3s ease;
15
- }
16
- .chat-message-enter {
17
- opacity: 0;
18
- transform: translateY(10px);
19
- }
20
- .chat-message-enter-active {
21
- opacity: 1;
22
- transform: translateY(0);
23
- }
24
- .tool-section {
25
- transition: max-height 0.3s ease, opacity 0.3s ease;
26
- }
27
- .tool-section.collapsed {
28
- max-height: 0;
29
- opacity: 0;
30
- overflow: hidden;
31
- }
32
- .tool-section.expanded {
33
- max-height: 1000px;
34
- opacity: 1;
35
- }
36
- pre code {
37
- display: block;
38
- background: #f5f5f5;
39
- padding: 1rem;
40
- border-radius: 0.5rem;
41
- overflow-x: auto;
42
- }
43
- </style>
44
- </head>
45
- <body class="bg-gray-50 font-inter">
46
- <div id="app" class="min-h-screen flex flex-col">
47
- <div class="max-w-4xl mx-auto p-4 flex-1 flex flex-col w-full">
48
- <!-- Chat Messages -->
49
- <div class="bg-white rounded-lg shadow-lg p-6 mb-4 flex-1 overflow-y-auto w-full">
50
- <div v-for="(message, index) in messages" :key="index" class="chat-message mb-4">
51
- <!-- User Message -->
52
- <div v-if="message.role === 'user'" class="flex justify-end">
53
- <div class="bg-blue-500 text-white rounded-lg py-2 px-4 max-w-[80%] shadow-sm">
54
- {{ message.content }}
55
- </div>
56
- </div>
57
-
58
- <!-- Assistant Message -->
59
- <div v-else class="flex flex-col space-y-2">
60
- <!-- Regular Message -->
61
- <div v-if="message.content" class="bg-gray-100 rounded-lg py-2 px-4 max-w-[80%] shadow-sm">
62
- <div v-html="formatMarkdown(message.content)"></div>
63
- </div>
64
-
65
- <!-- Tool Execution -->
66
- <div v-if="message.tool_data" class="border border-gray-200 rounded-lg p-4 max-w-[80%] shadow-sm">
67
- <div class="flex items-center justify-between cursor-pointer"
68
- @click="toggleTool(index)">
69
- <h3 class="font-semibold text-gray-700">
70
- Tool: {{ message.tool_data.tool }}
71
- </h3>
72
- <span class="text-gray-500">
73
- {{ isToolExpanded(index) ? '▼' : '▶' }}
74
- </span>
75
- </div>
76
-
77
- <div :class="['tool-section', isToolExpanded(index) ? 'expanded' : 'collapsed']">
78
- <!-- Tool Input -->
79
- <div v-if="message.tool_data.input" class="mt-2">
80
- <div class="text-sm text-gray-600">Input:</div>
81
- <pre v-if="message.tool_data.tool === 'execute_python'"><code>{{ message.tool_data.input.code }}</code></pre>
82
- <pre v-else class="bg-gray-50 p-2 rounded mt-1 text-sm overflow-x-auto">{{ JSON.stringify(message.tool_data.input, null, 2) }}</pre>
83
- </div>
84
-
85
- <!-- Tool Output -->
86
- <div v-if="message.tool_data.output" class="mt-2">
87
- <div class="text-sm text-gray-600">Output:</div>
88
- <div v-if="message.tool_data.output.artifacts" class="space-y-4">
89
- <div v-for="(artifact, artifactIndex) in message.tool_data.output.artifacts"
90
- :key="artifact.artifact_id"
91
- class="mt-4">
92
- <!-- Image Artifact -->
93
- <img v-if="artifact.artifact_type.startsWith('image/')"
94
- :src="artifact.imageData ? `data:${artifact.artifact_type};base64,${artifact.imageData}` : ''"
95
- class="max-w-full h-auto rounded shadow-sm"
96
- :alt="artifact.artifact_id">
97
-
98
- <!-- Plotly Artifact -->
99
- <div v-else-if="artifact.artifact_type === 'application/vnd.plotly.v1+json'"
100
- :id="'plot-' + index + '-' + artifactIndex"
101
- class="w-full h-96">
102
- </div>
103
-
104
- <!-- HTML Artifact -->
105
- <div v-else-if="artifact.artifact_type === 'text/html'"
106
- class="border rounded p-2 bg-gray-50 shadow-sm"
107
- v-html="artifact.content">
108
- </div>
109
- </div>
110
- </div>
111
- <pre v-if="message.tool_data.output.text"
112
- class="bg-gray-50 p-2 rounded mt-1 text-sm overflow-x-auto shadow-sm">{{ message.tool_data.output.text }}</pre>
113
- </div>
114
- </div>
115
- </div>
116
- </div>
117
- </div>
118
- </div>
119
-
120
- <!-- Input Area -->
121
- <div class="flex space-x-4">
122
- <input v-model="userInput"
123
- @keyup.enter="sendMessage"
124
- type="text"
125
- class="flex-1 rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
126
- placeholder="Type your message...">
127
- <button @click="sendMessage"
128
- class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm">
129
- Send
130
- </button>
131
- </div>
132
- </div>
133
- </div>
134
-
135
- <script>
136
- const { createApp } = Vue
137
-
138
- createApp({
139
- data() {
140
- return {
141
- messages: [],
142
- userInput: '',
143
- expandedTools: new Set(),
144
- currentAssistantMessage: '',
145
- session_token: crypto.randomUUID()
146
- }
147
- },
148
- methods: {
149
- formatMarkdown(text) {
150
- return marked.parse(text)
151
- },
152
- toggleTool(index) {
153
- if (this.expandedTools.has(index)) {
154
- this.expandedTools.delete(index)
155
- } else {
156
- this.expandedTools.add(index)
157
- // Re-render Plotly charts when expanding, only if they haven't been rendered
158
- this.$nextTick(() => {
159
- const message = this.messages[index]
160
- if (message?.tool_data?.output?.artifacts) {
161
- const needsRendering = message.tool_data.output.artifacts.some(artifact => {
162
- if (artifact.artifact_type === 'application/vnd.plotly.v1+json') {
163
- const elementId = `plot-${index}-${message.tool_data.output.artifacts.indexOf(artifact)}`
164
- const element = document.getElementById(elementId)
165
- return element && !element._fullData
166
- }
167
- return false
168
- })
169
- if (needsRendering) {
170
- this.renderPlotlyCharts(index)
171
- }
172
- }
173
- })
174
- }
175
- },
176
- isToolExpanded(index) {
177
- return this.expandedTools.has(index)
178
- },
179
- async fetchArtifact(artifactId) {
180
- try {
181
- const response = await fetch(`https://pvanand-code-execution-files-v4.hf.space/artifacts/${artifactId}`)
182
- if (!response.ok) throw new Error('Failed to fetch artifact')
183
- const data = await response.json()
184
- return data
185
- } catch (error) {
186
- console.error('Error fetching artifact:', error)
187
- return null
188
- }
189
- },
190
- renderPlotlyCharts(messageIndex) {
191
- const message = this.messages[messageIndex]
192
- if (!message?.tool_data?.output?.artifacts) return
193
-
194
- message.tool_data.output.artifacts.forEach((artifact, artifactIndex) => {
195
- if (artifact.artifact_type === 'application/vnd.plotly.v1+json' && artifact.plotData) {
196
- const elementId = `plot-${messageIndex}-${artifactIndex}`
197
- const element = document.getElementById(elementId)
198
- if (element) {
199
- // Check if a plot already exists in this element
200
- if (element._fullData) {
201
- // Update existing plot
202
- Plotly.react(elementId, artifact.plotData)
203
- } else {
204
- // Create new plot
205
- Plotly.newPlot(elementId, artifact.plotData)
206
- }
207
- }
208
- }
209
- })
210
- },
211
- async handleToolEnd(eventData) {
212
- // Create a new message for each tool output
213
- const newMessage = {
214
- role: 'assistant',
215
- tool_data: {
216
- tool: eventData.tool,
217
- output: {
218
- text: eventData.output.text,
219
- artifacts: []
220
- }
221
- }
222
- }
223
-
224
- if (eventData.output?.artifacts) {
225
- for (const artifact of eventData.output.artifacts) {
226
- const data = await this.fetchArtifact(artifact.artifact_id)
227
-
228
- if (artifact.artifact_type.startsWith('image/')) {
229
- artifact.imageData = data.data
230
- }
231
- else if (artifact.artifact_type === 'application/vnd.plotly.v1+json') {
232
- artifact.plotData = JSON.parse(data.data)
233
- }
234
- else if (artifact.artifact_type === 'text/html') {
235
- artifact.content = data.data
236
- }
237
- newMessage.tool_data.output.artifacts.push(artifact)
238
- }
239
- }
240
-
241
- this.messages.push(newMessage)
242
- // Expand the tool section automatically
243
- this.expandedTools.add(this.messages.length - 1)
244
- // Render Plotly charts after the DOM updates
245
- this.$nextTick(() => {
246
- this.renderPlotlyCharts(this.messages.length - 1)
247
- })
248
- },
249
- async sendMessage() {
250
- if (!this.userInput.trim()) return
251
-
252
- // Add user message
253
- this.messages.push({
254
- role: 'user',
255
- content: this.userInput
256
- })
257
-
258
- const data = {
259
- message: this.userInput,
260
- thread_id: this.session_token
261
- }
262
-
263
- this.userInput = ''
264
- this.currentAssistantMessage = ''
265
-
266
- try {
267
- const response = await fetch('https://pvanand-code-chat-api.hf.space/chat', {
268
- method: 'POST',
269
- headers: {
270
- 'Content-Type': 'application/json',
271
- 'Accept': 'text/event-stream'
272
- },
273
- body: JSON.stringify(data)
274
- })
275
-
276
- const reader = response.body.getReader()
277
-
278
- while (true) {
279
- const { done, value } = await reader.read()
280
- if (done) break
281
-
282
- const chunk = new TextDecoder().decode(value)
283
- const lines = chunk.split('\n')
284
-
285
- for (const line of lines) {
286
- if (!line.startsWith('data: ')) continue
287
-
288
- try {
289
- const eventData = JSON.parse(line.substring(6))
290
-
291
- switch (eventData.type) {
292
- case 'token':
293
- this.handleToken(eventData)
294
- break
295
- case 'tool_start':
296
- this.handleToolStart(eventData)
297
- break
298
- case 'tool_end':
299
- await this.handleToolEnd(eventData)
300
- break
301
- }
302
- } catch (e) {
303
- console.error('Error parsing event:', e)
304
- }
305
- }
306
- }
307
- } catch (error) {
308
- console.error('Error:', error)
309
- }
310
- },
311
- handleToken(eventData) {
312
- this.currentAssistantMessage += eventData.content
313
- this.updateAssistantMessage(this.currentAssistantMessage)
314
- },
315
- handleToolStart(eventData) {
316
- // Only create a new message if it's a new tool execution
317
- if (!this.messages.length ||
318
- this.messages[this.messages.length - 1].role !== 'assistant' ||
319
- this.messages[this.messages.length - 1].tool_data?.output) {
320
- this.messages.push({
321
- role: 'assistant',
322
- tool_data: {
323
- tool: eventData.tool,
324
- input: eventData.input
325
- }
326
- })
327
- }
328
- },
329
- updateAssistantMessage(content) {
330
- const lastMessage = this.messages[this.messages.length - 1]
331
- if (lastMessage?.role === 'assistant' && !lastMessage.tool_data) {
332
- lastMessage.content = content
333
- } else {
334
- this.messages.push({
335
- role: 'assistant',
336
- content: content
337
- })
338
- }
339
- }
340
- },
341
- beforeUnmount() {
342
- // Clean up all Plotly charts when component is destroyed
343
- this.messages.forEach((message, index) => {
344
- if (message?.tool_data?.output?.artifacts) {
345
- message.tool_data.output.artifacts.forEach((artifact, artifactIndex) => {
346
- if (artifact.artifact_type === 'application/vnd.plotly.v1+json') {
347
- const elementId = `plot-${index}-${artifactIndex}`
348
- Plotly.purge(elementId)
349
- }
350
- })
351
- }
352
- })
353
- }
354
- }).mount('#app')
355
- </script>
356
- </body>
 
357
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Agent Chat Interface</title>
7
+ <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
8
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
9
+ <link href="https://cdn.jsdelivr.net/npm/@tailwindcss/typography/dist/typography.min.css" rel="stylesheet">
10
+ <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
11
+ <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
12
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
13
+ <style>
14
+ .chat-message {
15
+ transition: opacity 0.3s ease, transform 0.3s ease;
16
+ }
17
+ .chat-message-enter {
18
+ opacity: 0;
19
+ transform: translateY(10px);
20
+ }
21
+ .chat-message-enter-active {
22
+ opacity: 1;
23
+ transform: translateY(0);
24
+ }
25
+ .tool-section {
26
+ transition: max-height 0.3s ease, opacity 0.3s ease;
27
+ }
28
+ .tool-section.collapsed {
29
+ max-height: 0;
30
+ opacity: 0;
31
+ overflow: hidden;
32
+ }
33
+ .tool-section.expanded {
34
+ max-height: 1000px;
35
+ opacity: 1;
36
+ }
37
+ pre code {
38
+ display: block;
39
+ background: #f5f5f5;
40
+ padding: 1rem;
41
+ border-radius: 0.5rem;
42
+ overflow-x: auto;
43
+ }
44
+ </style>
45
+ </head>
46
+ <body class="bg-gray-50 font-inter">
47
+ <div id="app" class="min-h-screen flex flex-col">
48
+ <div class="max-w-4xl mx-auto p-4 flex-1 flex flex-col w-full">
49
+ <!-- Chat Messages -->
50
+ <div class="bg-white rounded-lg shadow-lg p-6 mb-4 flex-1 overflow-y-auto w-full">
51
+ <div v-for="(message, index) in messages" :key="index" class="chat-message mb-4">
52
+ <!-- User Message -->
53
+ <div v-if="message.role === 'user'" class="flex justify-end">
54
+ <div class="bg-blue-500 text-white rounded-lg py-2 px-4 max-w-[80%] shadow-sm">
55
+ {{ message.content }}
56
+ </div>
57
+ </div>
58
+
59
+ <!-- Assistant Message -->
60
+ <div v-else class="flex flex-col space-y-2">
61
+ <!-- Regular Message -->
62
+ <div v-if="message.content" class="bg-gray-100 rounded-lg py-2 px-4 max-w-[80%] shadow-sm prose">
63
+ <div v-html="formatMarkdown(message.content)"></div>
64
+ </div>
65
+
66
+ <!-- Tool Execution -->
67
+ <div v-if="message.tool_data" class="border border-gray-200 rounded-lg p-4 max-w-[80%] shadow-sm">
68
+ <div class="flex items-center justify-between cursor-pointer"
69
+ @click="toggleTool(index)">
70
+ <h3 class="font-semibold text-gray-700">
71
+ Tool: {{ message.tool_data.tool }}
72
+ </h3>
73
+ <span class="text-gray-500">
74
+ {{ isToolExpanded(index) ? '▼' : '▶' }}
75
+ </span>
76
+ </div>
77
+
78
+ <div :class="['tool-section', isToolExpanded(index) ? 'expanded' : 'collapsed']">
79
+ <!-- Tool Input -->
80
+ <div v-if="message.tool_data.input" class="mt-2">
81
+ <div class="text-sm text-gray-600">Input:</div>
82
+ <pre v-if="message.tool_data.tool === 'execute_python'"><code>{{ message.tool_data.input.code }}</code></pre>
83
+ <pre v-else class="bg-gray-50 p-2 rounded mt-1 text-sm overflow-x-auto">{{ JSON.stringify(message.tool_data.input, null, 2) }}</pre>
84
+ </div>
85
+
86
+ <!-- Tool Output -->
87
+ <div v-if="message.tool_data.output" class="mt-2">
88
+ <div class="text-sm text-gray-600">Output:</div>
89
+ <div v-if="message.tool_data.output.artifacts" class="space-y-4">
90
+ <div v-for="(artifact, artifactIndex) in message.tool_data.output.artifacts"
91
+ :key="artifact.artifact_id"
92
+ class="mt-4">
93
+ <!-- Image Artifact -->
94
+ <img v-if="artifact.artifact_type.startsWith('image/')"
95
+ :src="artifact.imageData ? `data:${artifact.artifact_type};base64,${artifact.imageData}` : ''"
96
+ class="max-w-full h-auto rounded shadow-sm"
97
+ :alt="artifact.artifact_id">
98
+
99
+ <!-- Plotly Artifact -->
100
+ <div v-else-if="artifact.artifact_type === 'application/vnd.plotly.v1+json'"
101
+ :id="'plot-' + index + '-' + artifactIndex"
102
+ class="w-full h-96">
103
+ </div>
104
+
105
+ <!-- HTML Artifact -->
106
+ <div v-else-if="artifact.artifact_type === 'text/html'"
107
+ class="border rounded p-2 bg-gray-50 shadow-sm"
108
+ v-html="artifact.content">
109
+ </div>
110
+ </div>
111
+ </div>
112
+ <pre v-if="message.tool_data.output.text"
113
+ class="bg-gray-50 p-2 rounded mt-1 text-sm overflow-x-auto shadow-sm">{{ message.tool_data.output.text }}</pre>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Input Area -->
122
+ <div class="flex space-x-4">
123
+ <input v-model="userInput"
124
+ @keyup.enter="sendMessage"
125
+ type="text"
126
+ class="flex-1 rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
127
+ placeholder="Type your message...">
128
+ <button @click="sendMessage"
129
+ class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm">
130
+ Send
131
+ </button>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <script>
137
+ const { createApp } = Vue
138
+
139
+ createApp({
140
+ data() {
141
+ return {
142
+ messages: [],
143
+ userInput: '',
144
+ expandedTools: new Set(),
145
+ currentAssistantMessage: '',
146
+ session_token: crypto.randomUUID()
147
+ }
148
+ },
149
+ methods: {
150
+ formatMarkdown(text) {
151
+ return marked.parse(text)
152
+ },
153
+ toggleTool(index) {
154
+ if (this.expandedTools.has(index)) {
155
+ this.expandedTools.delete(index)
156
+ } else {
157
+ this.expandedTools.add(index)
158
+ // Re-render Plotly charts when expanding, only if they haven't been rendered
159
+ this.$nextTick(() => {
160
+ const message = this.messages[index]
161
+ if (message?.tool_data?.output?.artifacts) {
162
+ const needsRendering = message.tool_data.output.artifacts.some(artifact => {
163
+ if (artifact.artifact_type === 'application/vnd.plotly.v1+json') {
164
+ const elementId = `plot-${index}-${message.tool_data.output.artifacts.indexOf(artifact)}`
165
+ const element = document.getElementById(elementId)
166
+ return element && !element._fullData
167
+ }
168
+ return false
169
+ })
170
+ if (needsRendering) {
171
+ this.renderPlotlyCharts(index)
172
+ }
173
+ }
174
+ })
175
+ }
176
+ },
177
+ isToolExpanded(index) {
178
+ return this.expandedTools.has(index)
179
+ },
180
+ async fetchArtifact(artifactId) {
181
+ try {
182
+ const response = await fetch(`https://pvanand-code-execution-files-v4.hf.space/artifacts/${artifactId}`)
183
+ if (!response.ok) throw new Error('Failed to fetch artifact')
184
+ const data = await response.json()
185
+ return data
186
+ } catch (error) {
187
+ console.error('Error fetching artifact:', error)
188
+ return null
189
+ }
190
+ },
191
+ renderPlotlyCharts(messageIndex) {
192
+ const message = this.messages[messageIndex]
193
+ if (!message?.tool_data?.output?.artifacts) return
194
+
195
+ message.tool_data.output.artifacts.forEach((artifact, artifactIndex) => {
196
+ if (artifact.artifact_type === 'application/vnd.plotly.v1+json' && artifact.plotData) {
197
+ const elementId = `plot-${messageIndex}-${artifactIndex}`
198
+ const element = document.getElementById(elementId)
199
+ if (element) {
200
+ // Check if a plot already exists in this element
201
+ if (element._fullData) {
202
+ // Update existing plot
203
+ Plotly.react(elementId, artifact.plotData)
204
+ } else {
205
+ // Create new plot
206
+ Plotly.newPlot(elementId, artifact.plotData)
207
+ }
208
+ }
209
+ }
210
+ })
211
+ },
212
+ async handleToolEnd(eventData) {
213
+ // Create a new message for each tool output
214
+ const newMessage = {
215
+ role: 'assistant',
216
+ tool_data: {
217
+ tool: eventData.tool,
218
+ output: {
219
+ text: eventData.output.text,
220
+ artifacts: []
221
+ }
222
+ }
223
+ }
224
+
225
+ if (eventData.output?.artifacts) {
226
+ for (const artifact of eventData.output.artifacts) {
227
+ const data = await this.fetchArtifact(artifact.artifact_id)
228
+
229
+ if (artifact.artifact_type.startsWith('image/')) {
230
+ artifact.imageData = data.data
231
+ }
232
+ else if (artifact.artifact_type === 'application/vnd.plotly.v1+json') {
233
+ artifact.plotData = JSON.parse(data.data)
234
+ }
235
+ else if (artifact.artifact_type === 'text/html') {
236
+ artifact.content = data.data
237
+ }
238
+ newMessage.tool_data.output.artifacts.push(artifact)
239
+ }
240
+ }
241
+
242
+ this.messages.push(newMessage)
243
+ // Expand the tool section automatically
244
+ this.expandedTools.add(this.messages.length - 1)
245
+ // Render Plotly charts after the DOM updates
246
+ this.$nextTick(() => {
247
+ this.renderPlotlyCharts(this.messages.length - 1)
248
+ })
249
+ },
250
+ async sendMessage() {
251
+ if (!this.userInput.trim()) return
252
+
253
+ // Add user message
254
+ this.messages.push({
255
+ role: 'user',
256
+ content: this.userInput
257
+ })
258
+
259
+ const data = {
260
+ message: this.userInput,
261
+ thread_id: this.session_token
262
+ }
263
+
264
+ this.userInput = ''
265
+ this.currentAssistantMessage = ''
266
+
267
+ try {
268
+ const response = await fetch('https://pvanand-code-chat-api.hf.space/chat', {
269
+ method: 'POST',
270
+ headers: {
271
+ 'Content-Type': 'application/json',
272
+ 'Accept': 'text/event-stream'
273
+ },
274
+ body: JSON.stringify(data)
275
+ })
276
+
277
+ const reader = response.body.getReader()
278
+
279
+ while (true) {
280
+ const { done, value } = await reader.read()
281
+ if (done) break
282
+
283
+ const chunk = new TextDecoder().decode(value)
284
+ const lines = chunk.split('\n')
285
+
286
+ for (const line of lines) {
287
+ if (!line.startsWith('data: ')) continue
288
+
289
+ try {
290
+ const eventData = JSON.parse(line.substring(6))
291
+
292
+ switch (eventData.type) {
293
+ case 'token':
294
+ this.handleToken(eventData)
295
+ break
296
+ case 'tool_start':
297
+ this.handleToolStart(eventData)
298
+ break
299
+ case 'tool_end':
300
+ await this.handleToolEnd(eventData)
301
+ break
302
+ }
303
+ } catch (e) {
304
+ console.error('Error parsing event:', e)
305
+ }
306
+ }
307
+ }
308
+ } catch (error) {
309
+ console.error('Error:', error)
310
+ }
311
+ },
312
+ handleToken(eventData) {
313
+ this.currentAssistantMessage += eventData.content
314
+ this.updateAssistantMessage(this.currentAssistantMessage)
315
+ },
316
+ handleToolStart(eventData) {
317
+ // Only create a new message if it's a new tool execution
318
+ if (!this.messages.length ||
319
+ this.messages[this.messages.length - 1].role !== 'assistant' ||
320
+ this.messages[this.messages.length - 1].tool_data?.output) {
321
+ this.messages.push({
322
+ role: 'assistant',
323
+ tool_data: {
324
+ tool: eventData.tool,
325
+ input: eventData.input
326
+ }
327
+ })
328
+ }
329
+ },
330
+ updateAssistantMessage(content) {
331
+ const lastMessage = this.messages[this.messages.length - 1]
332
+ if (lastMessage?.role === 'assistant' && !lastMessage.tool_data) {
333
+ lastMessage.content = content
334
+ } else {
335
+ this.messages.push({
336
+ role: 'assistant',
337
+ content: content
338
+ })
339
+ }
340
+ }
341
+ },
342
+ beforeUnmount() {
343
+ // Clean up all Plotly charts when component is destroyed
344
+ this.messages.forEach((message, index) => {
345
+ if (message?.tool_data?.output?.artifacts) {
346
+ message.tool_data.output.artifacts.forEach((artifact, artifactIndex) => {
347
+ if (artifact.artifact_type === 'application/vnd.plotly.v1+json') {
348
+ const elementId = `plot-${index}-${artifactIndex}`
349
+ Plotly.purge(elementId)
350
+ }
351
+ })
352
+ }
353
+ })
354
+ }
355
+ }).mount('#app')
356
+ </script>
357
+ </body>
358
  </html>