@quidgest/chatbot 0.5.7 → 0.5.9

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@quidgest/chatbot",
     "private": false,
-    "version": "0.5.7",
+    "version": "0.5.9",
     "type": "module",
     "license": "UNLICENSED",
     "main": "dist/index.cjs",

package/src/components/ChatBot/ChatBot.vue

@@ -256,11 +256,55 @@
 			const msg = getLastMessage()
 			if (!msg) return
 
+			const pending = new Map<string, { html: string; startedAt: number }>()
+			const MIN_VISIBLE_MS = 1000
+
 			await sendPrompt(
 				formData,
 				(chunk) => {
 					if (msg) msg.message += chunk
 				},
+				(payload) => {
+					if (!msg || !payload) return
+					const { event: kind, data } = payload
+					if (!data || !data.id) return
+
+					const appendToolMessage = (html: string) => {
+						if (msg.message && !msg.message.endsWith('\n\n')) msg.message += '\n\n'
+						msg.message += `${html}\n\n`
+					}
+
+					const applyReplace = (start: { html: string; startedAt: number }) => {
+						msg.message = msg.message.replace(start.html, data.html)
+						pending.delete(data.id)
+					}
+
+					switch (kind) {
+						case 'tool_start': {
+							pending.set(data.id, { html: data.html, startedAt: Date.now() })
+							appendToolMessage(data.html)
+							break
+						}
+
+						case 'tool_end': {
+							const start = pending.get(data.id)
+
+							if (start) {
+								const elapsed = Date.now() - start.startedAt
+								const wait = Math.max(0, MIN_VISIBLE_MS - elapsed)
+								if (wait > 0) setTimeout(() => applyReplace(start), wait)
+								else applyReplace(start)
+							} else {
+								appendToolMessage(data.html)
+							}
+							break
+						}
+
+						default:
+							// Ignore unknown events
+							break
+					}
+				},
 				(error) => {
 					setDisabledState(true)
 					addChatMessage(texts.botIsSick)

package/src/composables/__tests__/useSSE.spec.ts

@@ -129,4 +129,100 @@ describe('useSSE', () => {
 		expect(consoleWarnSpy).toHaveBeenCalledWith('Unknown event type: unknown_event')
 		consoleWarnSpy.mockRestore()
 	})
+
+	// Tests for handling events split across chunks (bug reproduction)
+	describe('Events split across multiple chunks', () => {
+		it('should handle event split in the middle of data field', async () => {
+			// Simulate network splitting an event across two chunks
+			const stream = createMockStream(['event: message\ndata: {"val', 'ue":"hello"}\n\n'])
+			mockedAxios.mockResolvedValue({ data: stream })
+
+			await useSSE({ url: '/sse' }, handlers)
+
+			expect(handlers.onMessage).toHaveBeenCalledWith('hello')
+			expect(handlers.onDone).toHaveBeenCalled()
+		})
+
+		it('should handle multiple events split across multiple chunks', async () => {
+			// Simulate the real scenario from the bug report
+			const stream = createMockStream([
+				'event: message\ndata: {"value":"The"}\n\nevent: message\ndata: {"val',
+				'ue":" capital"}\n\nevent: message\ndata: {"value":" of"}\n\n',
+				'event: message\ndata: {"value":" France"}\n\n'
+			])
+			mockedAxios.mockResolvedValue({ data: stream })
+
+			await useSSE({ url: '/sse' }, handlers)
+
+			// Should receive all 4 messages
+			expect(handlers.onMessage).toHaveBeenCalledTimes(4)
+			expect(handlers.onMessage).toHaveBeenNthCalledWith(1, 'The')
+			expect(handlers.onMessage).toHaveBeenNthCalledWith(2, ' capital')
+			expect(handlers.onMessage).toHaveBeenNthCalledWith(3, ' of')
+			expect(handlers.onMessage).toHaveBeenNthCalledWith(4, ' France')
+			expect(handlers.onDone).toHaveBeenCalled()
+		})
+
+		it('should handle event split between event name and data', async () => {
+			const stream = createMockStream([
+				'event: message\n',
+				'data: {"value":"split event"}\n\n'
+			])
+			mockedAxios.mockResolvedValue({ data: stream })
+
+			await useSSE({ url: '/sse' }, handlers)
+
+			expect(handlers.onMessage).toHaveBeenCalledWith('split event')
+			expect(handlers.onDone).toHaveBeenCalled()
+		})
+
+		it('should handle event split right after event separator', async () => {
+			const stream = createMockStream([
+				'event: message\ndata: {"value":"first"}\n\n',
+				'event: message\ndata: {"value":"second"}\n\n'
+			])
+			mockedAxios.mockResolvedValue({ data: stream })
+
+			await useSSE({ url: '/sse' }, handlers)
+
+			expect(handlers.onMessage).toHaveBeenCalledTimes(2)
+			expect(handlers.onMessage).toHaveBeenNthCalledWith(1, 'first')
+			expect(handlers.onMessage).toHaveBeenNthCalledWith(2, 'second')
+			expect(handlers.onDone).toHaveBeenCalled()
+		})
+
+		it('should handle complex JSON split across chunks', async () => {
+			const stream = createMockStream([
+				'event: field_metadata\ndata: {"foo":"bar","nested":{"key',
+				'":"value"}}\n\n'
+			])
+			mockedAxios.mockResolvedValue({ data: stream })
+
+			await useSSE({ url: '/sse' }, handlers)
+
+			expect(handlers.onFieldMetadata).toHaveBeenCalledWith({
+				foo: 'bar',
+				nested: { key: 'value' }
+			})
+			expect(handlers.onDone).toHaveBeenCalled()
+		})
+
+		it('should handle event split in very small chunks', async () => {
+			// Extreme case: each character in a separate chunk
+			const stream = createMockStream([
+				'event: ',
+				'message\n',
+				'data: ',
+				'{"value":',
+				'"test"}',
+				'\n\n'
+			])
+			mockedAxios.mockResolvedValue({ data: stream })
+
+			await useSSE({ url: '/sse' }, handlers)
+
+			expect(handlers.onMessage).toHaveBeenCalledWith('test')
+			expect(handlers.onDone).toHaveBeenCalled()
+		})
+	})
 })

package/src/composables/useChatApi.ts

@@ -59,6 +59,7 @@ export function useChatApi(apiEndpoint: string) {
 	async function sendPrompt(
 		formData: FormData,
 		onChunk: (chunk: string) => void,
+		onStatus?: (payload: { event: string; data: { id: string; html: string } }) => void,
 		onError?: (error: Error) => void
 	) {
 		isLoading.value = true
@@ -73,6 +74,9 @@ export function useChatApi(apiEndpoint: string) {
 					onMessage: (data) => {
 						onChunk(data)
 					},
+					onToolStatus: (payload) => {
+						onStatus?.(payload)
+					},
 					onDone: () => (isLoading.value = false)
 				}
 			)

package/src/composables/useSSE.ts

@@ -2,6 +2,7 @@ import axios, { AxiosRequestConfig } from 'axios'
 
 export type SSEvents = {
 	onMessage?: (message: string) => void
+	onToolStatus?: (payload: { event: string; data: { id: string; html: string } }) => void
 	onError?: (error: Error) => void
 	onFieldMetadata?: (metadata: Record<string, unknown>) => void
 	onDone?: () => void
@@ -29,6 +30,7 @@ export async function useSSE(config: AxiosRequestConfig, handlers: SSEvents) {
 
 	const reader = stream.getReader()
 	const decoder = new TextDecoder()
+	let buffer = '' // Buffer to accumulate incomplete events across chunks
 
 	while (true) {
 		const { done, value } = await reader.read()
@@ -38,7 +40,12 @@ export async function useSSE(config: AxiosRequestConfig, handlers: SSEvents) {
 		}
 
 		const chunk = decoder.decode(value, { stream: true })
-		const events = chunk.split(/\n\n+/)
+		buffer += chunk // Append chunk to buffer
+		const events = buffer.split(/\n\n+/)
+
+		// Keep the last element in buffer (might be incomplete)
+		// Process all complete events (all except the last one)
+		buffer = events.pop() || ''
 
 		for (const eventBlock of events) {
 			const lines = eventBlock.trim().split('\n')
@@ -64,6 +71,11 @@ export async function useSSE(config: AxiosRequestConfig, handlers: SSEvents) {
 					case 'message':
 						handlers.onMessage?.(parsedData.value)
 						break
+					case 'tool-status':
+						handlers.onToolStatus?.(
+							parsedData as { event: string; data: { id: string; html: string } }
+						)
+						break
 					case 'error':
 						handlers.onError?.(new Error(parsedData.value))
 						break