@quidgest/chatbot 0.5.7 → 0.5.8

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@quidgest/chatbot",
     "private": false,
-    "version": "0.5.7",
+    "version": "0.5.8",
     "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/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
@@ -64,6 +65,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