@quidgest/chatbot 0.5.1 → 0.5.3

package/src/components/PulseDots/pulse-dots.scss

@@ -1,37 +1,38 @@
 .pulsing-dots {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: row;
-    gap: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  gap: 0.25rem;
 }
 
 .generating-text {
-    font-size: 0.9rem;
-    color: var(--q-theme-primary);
+  font-size: 0.9rem;
+  color: var(--q-theme-primary);
 }
 
 .dots-container {
-    display: flex;
-    align-items: center;
-    gap: 0.1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.1rem;
 }
 
 .dot {
-    font-size: 16px;
-    line-height: 1;
-    animation: pulse 1s infinite;
-    color: var(--q-theme-primary);
+  font-size: 16px;
+  line-height: 1;
+  animation: pulse 1s infinite;
+  color: var(--q-theme-primary);
 }
 
 @keyframes pulse {
-    0%,
-    100% {
-        transform: scale(0.8);
-        opacity: 0.6;
-    }
-    50% {
-        transform: scale(1);
-        opacity: 1;
-    }
+  0%,
+  100% {
+    transform: scale(0.8);
+    opacity: 0.6;
+  }
+
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
 }

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

@@ -0,0 +1,51 @@
+// Composable
+import { useChatMessages } from '../useChatMessages'
+
+// Utils
+import { describe, it, expect, beforeEach } from 'vitest'
+
+const { addChatMessage, clearMessages, getMessages, getLastMessage } = useChatMessages()
+
+beforeEach(() => {
+	// Reset chat messages before each test
+	clearMessages()
+})
+
+describe('useChatMessages', () => {
+	it('should add a chat message', () => {
+		addChatMessage('Hello, world!', 'user')
+
+		const messages = getMessages()
+		expect(messages.length).toBe(1)
+		expect(messages[0].message).toBe('Hello, world!')
+		expect(messages[0].sender).toBe('user')
+	})
+
+	it('should set default sender to bot', () => {
+		addChatMessage('Hello, world!')
+		const message = getLastMessage()
+
+		expect(message).toBeDefined()
+		expect(message?.sender).toBe('bot')
+		expect(message?.message).toBe('Hello, world!')
+	})
+
+	it('should get the last message', () => {
+		addChatMessage('First message', 'bot')
+		addChatMessage('Second message', 'user')
+
+		const lastMessage = getLastMessage()
+		expect(lastMessage).toBeDefined()
+		expect(lastMessage?.message).toBe('Second message')
+		expect(lastMessage?.sender).toBe('user')
+	})
+
+	it('should clear all messages', () => {
+		addChatMessage('Hello, world!', 'user')
+		clearMessages()
+
+		const messages = getMessages()
+		expect(messages).toEqual([])
+		expect(messages.length).toBe(0)
+	})
+})

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

@@ -0,0 +1,132 @@
+// Composables
+import { useSSE } from '../useSSE'
+
+// Utils
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import axios from 'axios'
+
+// Types
+import type { SSEvents } from '../useSSE'
+
+// Mocks
+vi.mock('axios')
+const mockedAxios = vi.mocked(axios)
+
+// Utility to create a mock ReadableStream
+function createMockStream(chunks: string[]) {
+	return new ReadableStream({
+		start(controller) {
+			for (const chunk of chunks) {
+				controller.enqueue(new TextEncoder().encode(chunk))
+			}
+			controller.close()
+		}
+	})
+}
+
+describe('useSSE', () => {
+	let handlers: SSEvents = {}
+
+	beforeEach(() => {
+		vi.clearAllMocks()
+		handlers = {
+			onMessage: vi.fn(),
+			onError: vi.fn(),
+			onFieldMetadata: vi.fn(),
+			onDone: vi.fn()
+		}
+	})
+
+	it('should handle a message event', async () => {
+		const stream = createMockStream(['event: message\ndata: {"value":"hello"}\n\n'])
+		mockedAxios.mockResolvedValue({ data: stream })
+
+		await useSSE({ url: '/sse' }, handlers)
+
+		expect(handlers.onMessage).toHaveBeenCalledWith('hello')
+		expect(handlers.onDone).toHaveBeenCalled()
+	})
+
+	it('should handle an error event', async () => {
+		const stream = createMockStream([
+			'event: error\ndata: {"value":"Something went wrong"}\n\n'
+		])
+		mockedAxios.mockResolvedValue({ data: stream })
+
+		await useSSE({ url: '/sse' }, handlers)
+
+		expect(handlers.onError).toHaveBeenCalled()
+
+		// We need to cast to access the mock calls
+		const onErrorHandler = handlers.onError as ReturnType<typeof vi.fn>
+		const errorArg = onErrorHandler.mock.calls[0][0]
+
+		expect(errorArg).toBeInstanceOf(Error)
+		expect(errorArg.message).toBe('Something went wrong')
+	})
+
+	it('should handle field metadata event', async () => {
+		const metadata = { foo: 'bar' }
+		const stream = createMockStream([
+			`event: field_metadata\ndata: ${JSON.stringify(metadata)}\n\n`
+		])
+		mockedAxios.mockResolvedValue({ data: stream })
+		await useSSE({ url: '/sse' }, handlers)
+
+		expect(handlers.onFieldMetadata).toHaveBeenCalledWith(metadata)
+		expect(handlers.onDone).toHaveBeenCalled()
+	})
+
+	it('should handle a done event', async () => {
+		const stream = createMockStream(['event: done\ndata: {}\n\n'])
+		mockedAxios.mockResolvedValue({ data: stream })
+
+		await useSSE({ url: '/sse' }, handlers)
+
+		expect(handlers.onDone).toHaveBeenCalled()
+	})
+
+	it('should call onError on invalid JSON', async () => {
+		const stream = createMockStream(['event: message\ndata: {invalid json}\n\n'])
+		mockedAxios.mockResolvedValue({ data: stream })
+
+		// Suppress console.error for this test
+		const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+		await useSSE({ url: '/sse' }, handlers)
+
+		expect(handlers.onError).toHaveBeenCalled()
+		const onErrorHandler = handlers.onError as ReturnType<typeof vi.fn>
+		const errorArg = onErrorHandler.mock.calls[0][0]
+
+		expect(errorArg).toBeInstanceOf(Error)
+		consoleErrorSpy.mockRestore()
+	})
+
+	it('should default to message event if name is missing', async () => {
+		const stream = createMockStream(['data: {"value":"default event"}\n\n'])
+		mockedAxios.mockResolvedValue({ data: stream })
+
+		await useSSE({ url: '/sse' }, handlers)
+
+		expect(handlers.onMessage).toHaveBeenCalledWith('default event')
+		expect(handlers.onDone).toHaveBeenCalled()
+	})
+
+	it('should throw an error for non-stream response', async () => {
+		mockedAxios.mockResolvedValue({ data: null })
+		const fn = useSSE({ url: '/sse' }, handlers)
+		await expect(fn).rejects.toThrow('Invalid stream response')
+	})
+
+	it('should warn on unknown event type', async () => {
+		const stream = createMockStream(['event: unknown_event\ndata: {"value":"something"}\n\n'])
+		mockedAxios.mockResolvedValue({ data: stream })
+
+		const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+		await useSSE({ url: '/sse' }, handlers)
+
+		expect(consoleWarnSpy).toHaveBeenCalledWith('Unknown event type: unknown_event')
+		consoleWarnSpy.mockRestore()
+	})
+})

package/src/composables/useChatApi.ts

@@ -8,149 +8,143 @@ import { ChatBotMessageContent } from '@/components/ChatBot/types'
 import { useSSE } from './useSSE'
 
 type RequestResponse<T> = {
-    data: T | null
-    error: Error | null
+	data: T | null
+	error: Error | null
 }
 
 export function useChatApi(apiEndpoint: string) {
-    const isLoading = ref(false)
-    const lastError = ref<Error | null>(null)
+	const isLoading = ref(false)
+	const lastError = ref<Error | null>(null)
 
-    async function baseRequest<T>(
-        config: AxiosRequestConfig
-    ): Promise<RequestResponse<T>> {
-        isLoading.value = true
-        lastError.value = null
+	async function baseRequest<T>(config: AxiosRequestConfig): Promise<RequestResponse<T>> {
+		isLoading.value = true
+		lastError.value = null
 
-        try {
-            const response: AxiosResponse<T> = await axios({
-                ...config,
-                baseURL: apiEndpoint
-            })
-            return { data: response.data, error: null }
-        } catch (error: any) {
-            lastError.value = error
-            console.error('Error in API request:', error)
-            return { data: null, error }
-        } finally {
-            isLoading.value = false
-        }
-    }
+		try {
+			const response: AxiosResponse<T> = await axios({
+				...config,
+				baseURL: apiEndpoint
+			})
+			return { data: response.data, error: null }
+		} catch (error: unknown) {
+			if (error instanceof Error) {
+				lastError.value = error
+				console.error('Error in API request:', error)
+				return { data: null, error }
+			}
+		} finally {
+			isLoading.value = false
+		}
 
-    async function getChatData(
-        username: string,
-        project: string,
-        agentID: string,
-        formId: string
-    ) {
-        return await baseRequest<{
-            success: boolean
-            history: ChatBotMessageContent[]
-        }>({
-            method: 'POST',
-            url: `/prompt/load`,
-            data: {
-                username,
-                project,
-                agentID,
-                formId
-            }
-        })
-    }
+		// This should never be reached, but TypeScript needs it
+		return { data: null, error: new Error('Unknown error occurred in baseRequest') }
+	}
 
-    async function clearChatData(
-        username: string,
-        project: string,
-        agentID: string,
-        formId: string
-    ) {
-        return await baseRequest<{ success: boolean }>({
-            method: 'POST',
-            url: `/prompt/clear`,
-            data: {
-                username,
-                project,
-                agentID,
-                formId
-            }
-        })
-    }
+	async function getChatData(username: string, project: string, agentID: string, formId: string) {
+		return await baseRequest<{
+			success: boolean
+			history: ChatBotMessageContent[]
+		}>({
+			method: 'POST',
+			url: `/prompt/load`,
+			data: {
+				username,
+				project,
+				agentID,
+				formId
+			}
+		})
+	}
 
-    async function sendPrompt(
-        formData: FormData,
-        onChunk: (chunk: string) => void,
-        onError?: (error: Error) => void
-    ) {
-        isLoading.value = true
-        return await useSSE(
-            {
-                method: 'POST',
-                url: `${apiEndpoint}/prompt/submit`,
-                data: formData
-            },
-            {
-                onMessage: (data) => {
-                    onChunk(data)
-                },
-                onError: (error) => {
-                    lastError.value = error
-                    onError?.(error)
-                    console.error('Error in sendPrompt:', error)
-                },
-                onDone: () => (isLoading.value = false)
-            }
-        )
-    }
+	async function clearChatData(
+		username: string,
+		project: string,
+		agentID: string,
+		formId: string
+	) {
+		return await baseRequest<{ success: boolean }>({
+			method: 'POST',
+			url: `/prompt/clear`,
+			data: {
+				username,
+				project,
+				agentID,
+				formId
+			}
+		})
+	}
 
-    async function getFieldSuggestionData(
-        jobId: string,
-        onChunk: (chunk: string) => void,
-        onMetaData: (metadata: Record<string, unknown>) => void
-    ) {
-        isLoading.value = true
-        return await useSSE(
-            {
-                method: 'POST',
-                url: `${apiEndpoint}/get-job-result`,
-                data: {
-                    jobId
-                }
-            },
-            {
-                onMessage: (data) => onChunk(data),
-                onFieldMetadata: (metadata) => onMetaData(metadata),
-                onError: (error) => {
-                    lastError.value = error
-                    console.error('Error in getFieldSuggestionData:', error)
-                },
-                onDone: () => (isLoading.value = false)
-            }
-        )
-    }
+	async function sendPrompt(
+		formData: FormData,
+		onChunk: (chunk: string) => void,
+		onError?: (error: Error) => void
+	) {
+		isLoading.value = true
+		return await useSSE(
+			{
+				method: 'POST',
+				url: `${apiEndpoint}/prompt/submit`,
+				data: formData
+			},
+			{
+				onMessage: (data) => {
+					onChunk(data)
+				},
+				onError: (error) => {
+					lastError.value = error
+					onError?.(error)
+					console.error('Error in sendPrompt:', error)
+				},
+				onDone: () => (isLoading.value = false)
+			}
+		)
+	}
 
-    async function handleFeedback(
-        feedback: number,
-        comment: string,
-        sessionID: string
-    ) {
-        return await baseRequest<{ success: boolean }>({
-            method: 'POST',
-            url: `/prompt/feedback`,
-            data: {
-                messageSessionID: sessionID,
-                feedbackValue: feedback,
-                feedbackComment: comment
-            }
-        })
-    }
+	async function getFieldSuggestionData(
+		jobId: string,
+		onChunk: (chunk: string) => void,
+		onMetaData: (metadata: Record<string, unknown>) => void
+	) {
+		isLoading.value = true
+		return await useSSE(
+			{
+				method: 'POST',
+				url: `${apiEndpoint}/get-job-result`,
+				data: {
+					jobId
+				}
+			},
+			{
+				onMessage: (data) => onChunk(data),
+				onFieldMetadata: (metadata) => onMetaData(metadata),
+				onError: (error) => {
+					lastError.value = error
+					console.error('Error in getFieldSuggestionData:', error)
+				},
+				onDone: () => (isLoading.value = false)
+			}
+		)
+	}
 
-    return {
-        isLoading,
-        lastError,
-        getChatData,
-        clearChatData,
-        getFieldSuggestionData,
-        sendPrompt,
-        handleFeedback
-    }
+	async function handleFeedback(feedback: number, comment: string, sessionID: string) {
+		return await baseRequest<{ success: boolean }>({
+			method: 'POST',
+			url: `/prompt/feedback`,
+			data: {
+				messageSessionID: sessionID,
+				feedbackValue: feedback,
+				feedbackComment: comment
+			}
+		})
+	}
+
+	return {
+		isLoading,
+		lastError,
+		getChatData,
+		clearChatData,
+		getFieldSuggestionData,
+		sendPrompt,
+		handleFeedback
+	}
 }

package/src/composables/useChatMessages.ts

@@ -2,57 +2,55 @@ import { ref } from 'vue'
 import { v4 as uuidv4 } from 'uuid'
 
 import type { Ref } from 'vue'
-import type {
-    ChatMessage,
-    ChatBotMessageSender
-} from '@/components/ChatBot/types'
+import type { ChatMessage, ChatBotMessageSender } from '@/components/ChatBot/types'
+import type { ChatBotFile } from '@/components/ChatBotInput'
 
 const messages: Ref<ChatMessage[]> = ref([])
 const nextMessageId = ref(1)
 
 export function useChatMessages() {
-    function addChatMessage(
-        message: string,
-        sender?: ChatBotMessageSender,
-        imagePreviewUrl?: string | null,
-        sessionID?: string,
-        isWelcomeMessage?: boolean
-    ) {
-        const newMessage: ChatMessage = {
-            id: nextMessageId.value++,
-            message,
-            date: new Date(),
-            sender: sender || 'bot',
-            sessionID: sessionID || uuidv4(),
-            imagePreviewUrl: imagePreviewUrl || undefined,
-            isWelcomeMessage,
-            fields: []
-        }
-
-        messages.value.push(newMessage)
-    }
-
-    function getLastMessage() {
-        return messages.value.find(
-            (m: ChatMessage) => m.id === nextMessageId.value - 1
-        )
-    }
-
-    function clearMessages() {
-        messages.value = []
-        nextMessageId.value = 1
-    }
-
-    function getMessages() {
-        return messages.value
-    }
-
-    return {
-        messages,
-        nextMessageId,
-        addChatMessage,
-        getLastMessage,
-        clearMessages,
-        getMessages
-    }
+	function addChatMessage(
+		message: string,
+		sender?: ChatBotMessageSender,
+		file?: ChatBotFile,
+		sessionID?: string,
+		isWelcomeMessage?: boolean
+	) {
+		const newMessage: ChatMessage = {
+			id: nextMessageId.value++,
+			message,
+			date: new Date(),
+			sender: sender || 'bot',
+			sessionID: sessionID || uuidv4(),
+			file: file,
+			isWelcomeMessage,
+			fields: []
+		}
+
+		messages.value.push(newMessage)
+
+		return newMessage
+	}
+
+	function getLastMessage() {
+		return messages.value.find((m: ChatMessage) => m.id === nextMessageId.value - 1)
+	}
+
+	function clearMessages() {
+		messages.value = []
+		nextMessageId.value = 1
+	}
+
+	function getMessages() {
+		return messages.value
+	}
+
+	return {
+		messages,
+		nextMessageId,
+		addChatMessage,
+		getLastMessage,
+		clearMessages,
+		getMessages
+	}
 }