@quidgest/chatbot 0.5.3-dev.0 → 0.5.4

package/src/components/ChatBotInput/__tests__/ChatBotInput.spec.ts

@@ -7,13 +7,6 @@ import { describe, expect, it, vi } from 'vitest'
 
 // Types
 import type { ChatBotInputProps } from '..'
-import type { ComponentPublicInstance } from 'vue'
-
-type ChatBotInputVm = ComponentPublicInstance<{
-	imageInput: HTMLInputElement | null
-	imagePreviewUrl: string
-	hasSelectedImage: boolean
-}>
 
 describe('ChatBotInput', () => {
 	const props: ChatBotInputProps = {
@@ -81,7 +74,7 @@ describe('ChatBotInput', () => {
 		await footer.trigger('drop')
 
 		expect(wrapper.find('img').exists()).toBe(false)
-		expect(wrapper.find('.q-chatbot__image-preview').exists()).toBe(false)
+		expect(wrapper.find('.q-chatbot__file-preview').exists()).toBe(false)
 	})
 
 	it('prevents drop if theres is no files', async () => {
@@ -95,7 +88,7 @@ describe('ChatBotInput', () => {
 		})
 
 		expect(wrapper.find('img').exists()).toBe(false)
-		expect(wrapper.find('.q-chatbot__image-preview').exists()).toBe(false)
+		expect(wrapper.find('.q-chatbot__file-preview').exists()).toBe(false)
 	})
 
 	it('accepts image files on drop', async () => {
@@ -113,32 +106,7 @@ describe('ChatBotInput', () => {
 		})
 
 		expect(wrapper.find('img').exists()).toBe(true)
-		expect(wrapper.find('.q-chatbot__image-preview').exists()).toBe(true)
-	})
-
-	it('does not drop image if hidden input does not exist', async () => {
-		const wrapper = mount(ChatBotInput, {
-			props: { ...props }
-		})
-
-		const footer = wrapper.find('.q-chatbot__footer')
-		const file = new File(['dummy content'], 'example.png', { type: 'image/png' })
-
-		// Manually set imageInput to null to simulate the missing input
-		// In reality, this should not happen as the input is always rendered but hidden
-		const vm = wrapper.vm as ChatBotInputVm
-		vm.imageInput = null
-
-		// Trigger the drop event
-		await footer.trigger('drop', {
-			dataTransfer: {
-				files: [file]
-			}
-		})
-
-		// Assert that no image preview is created
-		expect(wrapper.find('img').exists()).toBe(false)
-		expect(wrapper.find('.q-chatbot__image-preview').exists()).toBe(false)
+		expect(wrapper.find('.q-chatbot__file-preview').exists()).toBe(true)
 	})
 
 	it('does not send empty prompts', async () => {
@@ -222,7 +190,7 @@ describe('ChatBotInput', () => {
 		expect(wrapper.emitted()['send-message'][0]).toEqual([
 			'Hello',
 			{
-				file: file,
+				fileData: file,
 				previewUrl: expect.stringContaining('blob:')
 			}
 		])
@@ -244,14 +212,14 @@ describe('ChatBotInput', () => {
 		})
 
 		expect(wrapper.find('img').exists()).toBe(true)
-		expect(wrapper.find('.q-chatbot__image-preview').exists()).toBe(true)
+		expect(wrapper.find('.q-chatbot__file-preview').exists()).toBe(true)
 
 		// Simulate clicking the remove image button
-		const removeButton = wrapper.find('.q-chatbot__remove-image')
+		const removeButton = wrapper.find('.q-chatbot__remove-file')
 		await removeButton.trigger('click')
 
 		expect(wrapper.find('img').exists()).toBe(false)
-		expect(wrapper.find('.q-chatbot__image-preview').exists()).toBe(false)
+		expect(wrapper.find('.q-chatbot__file-preview').exists()).toBe(false)
 	})
 
 	it('triggers click on the hidden input when upload button is clicked', async () => {
@@ -260,7 +228,7 @@ describe('ChatBotInput', () => {
 		})
 
 		const uploadButton = wrapper.find('.q-chatbot__upload')
-		const fileInput = wrapper.find<HTMLInputElement>('#image-upload')
+		const fileInput = wrapper.find<HTMLInputElement>('#file-upload')
 
 		// Mock the click method on the file input
 		const clickMock = vi.fn()
@@ -276,7 +244,7 @@ describe('ChatBotInput', () => {
 		const wrapper = mount(ChatBotInput, {
 			props: { ...props }
 		})
-		const fileInput = wrapper.find<HTMLInputElement>('#image-upload')
+		const fileInput = wrapper.find<HTMLInputElement>('#file-upload')
 		const file = new File(['dummy content'], 'example.png', { type: 'image/png' })
 
 		// Simulate selecting a file
@@ -287,6 +255,25 @@ describe('ChatBotInput', () => {
 		await fileInput.trigger('change')
 
 		expect(wrapper.find('img').exists()).toBe(true)
-		expect(wrapper.find('.q-chatbot__image-preview').exists()).toBe(true)
+		expect(wrapper.find('.q-chatbot__file-preview').exists()).toBe(true)
+	})
+
+	it('renders a document preview for non-image files', async () => {
+		const wrapper = mount(ChatBotInput, {
+			props: { ...props }
+		})
+		const fileInput = wrapper.find<HTMLInputElement>('#file-upload')
+		const file = new File(['dummy content'], 'example.pdf', { type: 'application/pdf' })
+
+		// Simulate selecting a file
+		const dataTransfer = new DataTransfer()
+		dataTransfer.items.add(file)
+		fileInput.element.files = dataTransfer.files
+
+		await fileInput.trigger('change')
+
+		expect(wrapper.find('img').exists()).toBe(false)
+		expect(wrapper.find('.q-chatbot__file-name').exists()).toBe(true)
+		expect(wrapper.find('.q-chatbot__file-name').text()).toBe(file.name)
 	})
 })

package/src/components/ChatBotInput/__tests__/__snapshots__/ChatBotInput.spec.ts.snap

@@ -15,11 +15,11 @@ exports[`ChatBotInput > renders correctly with default props 1`] = `
         <!--v-if-->
       </div>
     </div>
+    <div class="q-chatbot__send-container"><button type="button" class="q-button q-button--outlined q-button--primary q-chatbot__upload" title="Upload Image">
+        <!--v-if--><span class="q-button__content"><span data-test="upload"></span> </span>
+      </button><!-- Hidden file input --><input id="file-upload" type="file" accept=".png,.jpeg,.jpg,.svg,.webp,.pdf,.doc,.docx" class="hidden-input"><button type="button" class="q-button q-button--bold q-button--primary q-chatbot__send" disabled="" title="Send message" readonly="">
+        <!--v-if--><span class="q-button__content"><span data-test="send"></span> </span>
+      </button></div>
   </div>
-  <div class="q-chatbot__send-container"><button type="button" class="q-button q-button--outlined q-button--primary q-chatbot__upload" title="Upload Image">
-      <!--v-if--><span class="q-button__content"><span data-test="upload"></span> </span>
-    </button><!-- Hidden file input --><input id="image-upload" type="file" accept=".png, .jpeg, .jpg, .svg, .webp" class="hidden-input"><button type="button" class="q-button q-button--bold q-button--primary q-chatbot__send" disabled="" title="Send message" readonly="">
-      <!--v-if--><span class="q-button__content"><span data-test="send"></span> </span>
-    </button></div>
 </div>"
 `;

package/src/components/ChatBotInput/index.ts

@@ -1,5 +1,5 @@
 import ChatBotInput from './ChatBotInput.vue'
-import type { ChatBotInputProps, ChatBotImage } from './types'
+import type { ChatBotInputProps, ChatBotFile } from './types'
 
 export { ChatBotInput }
-export type { ChatBotInputProps, ChatBotImage }
+export type { ChatBotInputProps, ChatBotFile }

package/src/components/ChatBotInput/types.ts

@@ -20,14 +20,14 @@ export type ChatBotInputProps = {
 	agentId?: string
 }
 
-export type ChatBotImage = {
+export type ChatBotFile = {
 	/**
-	 * The image URL
+	 * The preview URL for the file (if it's an image)
 	 */
-	previewUrl: string
+	previewUrl?: string
 
 	/**
 	 * The file object
 	 */
-	file: File
+	fileData: File
 }

package/src/components/ChatBotMessage/ChatBotMessage.vue

@@ -8,12 +8,29 @@
 
 		<div class="q-chatbot__message-wrapper">
 			<div
-				v-if="props.imagePreviewUrl && props.imagePreviewUrl.length > 0"
+				v-if="isImageFile"
 				class="q-chatbot__image-preview">
 				<img
-					:src="props.imagePreviewUrl"
+					:src="props.file?.previewUrl"
 					:alt="texts.imagePreview" />
 			</div>
+			<div
+				v-else-if="props.file?.fileData && !isImageFile"
+				class="q-chatbot__file-preview-container">
+				<div class="q-chatbot__file-icon-container">
+					<q-icon
+						icon="file"
+						class="q-chatbot__file-icon" />
+				</div>
+				<div class="q-chatbot__file-info">
+					<span class="q-chatbot__file-name">
+						{{ props.file?.fileData.name }}
+					</span>
+					<span class="q-chatbot__file-extension">
+						{{ fileExtension }}
+					</span>
+				</div>
+			</div>
 			<div class="q-chatbot__message">
 				<pulse-dots v-if="loading" />
 				<template v-else-if="props.sender === 'bot' && props.fields.length > 0">
@@ -35,7 +52,7 @@
 						:source="props.message || ''" />
 					<div
 						v-else
-						class="q-chatbot__text">
+						class="q-chatbot__text q-chatbot__user-text">
 						{{ props.message }}
 					</div>
 				</template>
@@ -96,10 +113,21 @@
 		)
 	})
 
+	const isImageFile = computed(() => {
+		return props.file?.fileData.type.startsWith('image/') ?? false
+	})
+
 	const messageImage = computed(() =>
 		props.sender === 'bot' ? props.chatbotImage : props.userImage
 	)
 
+	const fileExtension = computed(() => {
+		if (!props.file?.fileData) return ''
+		const ext = props.file.fileData.name.split('.').pop()?.toUpperCase()
+
+		return ext ?? ''
+	})
+
 	function copyResponse() {
 		if (!props.message) return
 

package/src/components/ChatBotMessage/ChatBotMessageButtons.vue

@@ -51,6 +51,7 @@
 				borderless
 				:disabled="blockApplyAllButton"
 				:readonly="blockApplyAllButton"
+				:label="texts.applyAll"
 				@click="onApplyAll">
 				<q-icon icon="apply-all" />
 			</q-button>

package/src/components/ChatBotMessage/__tests__/ChatBotMessage.spec.ts

@@ -0,0 +1,260 @@
+// Components
+import { ChatBotMessage, ChatBotMessageButtons } from '..'
+import PulseDots from '@/components/PulseDots/PulseDots.vue'
+import { FieldPreview } from '@/components/FieldPreview/'
+import { MarkdownRender } from '@/components/MarkdownRender/'
+
+// Utils
+import { mount } from '@vue/test-utils'
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { parseFieldValue } from '@/utils/parseFieldValue'
+
+// Types
+import type { ChatBotMessageProps } from '..'
+
+// Composable
+import { useChatMessages } from '@/composables/useChatMessages'
+import { ChatBotFile } from '@/components/ChatBotInput'
+
+describe('ChatBotMessage', () => {
+	const fixedDate = new Date('2025-01-01T11:47:00')
+	const { clearMessages, addChatMessage } = useChatMessages()
+
+	beforeEach(() => {
+		vi.useFakeTimers()
+		vi.setSystemTime(fixedDate)
+
+		navigator.clipboard.writeText('')
+
+		clearMessages()
+	})
+
+	afterEach(() => {
+		vi.useRealTimers()
+	})
+
+	const props: ChatBotMessageProps = {
+		sender: 'bot',
+		message: 'Hello, this is a test message.',
+		date: fixedDate,
+		loading: false,
+		dateFormat: 'HH:mm',
+		apiEndpoint: 'https://api.example.com/chat',
+		fields: [],
+		userImage: '',
+		chatbotImage: '',
+		file: undefined
+	}
+
+	it('renders the component with default props', () => {
+		const wrapper = mount(ChatBotMessage, { props })
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('renders the image preview when imagePreviewUrl is provided', () => {
+		const file: ChatBotFile = {
+			fileData: new File(['dummy content'], 'example.png', { type: 'image/png' }),
+			previewUrl: 'tottaly-legit-image.png'
+		}
+		const wrapper = mount(ChatBotMessage, {
+			props: { ...props, file }
+		})
+
+		const img = wrapper.find('.q-chatbot__image-preview img')
+		expect(img.exists()).toBe(true)
+		expect(img.attributes('src')).toBe('tottaly-legit-image.png')
+	})
+
+	it('shows loading state when loading is true', () => {
+		const wrapper = mount(ChatBotMessage, {
+			props: { ...props, loading: true }
+		})
+
+		const pulseDots = wrapper.findComponent(PulseDots)
+		expect(pulseDots.exists()).toBe(true)
+	})
+
+	it('renders the field preview component when fields are provided and the sender is bot', () => {
+		const wrapper = mount(ChatBotMessage, {
+			props: {
+				...props,
+				sender: 'bot',
+				fields: [
+					{
+						id: 'field-1',
+						type: 'text',
+						text: 'Sample Field',
+						name: 'This is a sample field value'
+					}
+				]
+			}
+		})
+
+		const fieldPreview = wrapper.findComponent(FieldPreview)
+		expect(fieldPreview.exists()).toBe(true)
+	})
+
+	it('renders a normal when no fields are provided and the sender is user', () => {
+		const wrapper = mount(ChatBotMessage, {
+			props: { ...props, sender: 'user' }
+		})
+
+		const fieldPreview = wrapper.findComponent(FieldPreview)
+		expect(fieldPreview.exists()).toBe(false)
+
+		const markdownRender = wrapper.findComponent(MarkdownRender)
+		expect(markdownRender.exists()).toBe(false)
+
+		const messageDiv = wrapper.find('.q-chatbot__user-text')
+		expect(messageDiv.exists()).toBe(true)
+		expect(messageDiv.text()).toBe(props.message)
+	})
+
+	it('renders markdown-render when no fields are provided', () => {
+		const wrapper = mount(ChatBotMessage, { props })
+
+		const markdownRender = wrapper.findComponent(MarkdownRender)
+		expect(markdownRender.exists()).toBe(true)
+	})
+
+	it('adds the text to the clipboard when copy event is emmited', async () => {
+		const wrapper = mount(ChatBotMessage, { props })
+
+		const messageButtons = wrapper.findComponent(ChatBotMessageButtons)
+		const copyButton = messageButtons.find('.q-chatbot__copy-button')
+
+		await copyButton.trigger('click')
+		const clipboardText = await navigator.clipboard.readText()
+
+		expect(navigator.clipboard).toBeDefined()
+		expect(clipboardText).toBe(props.message)
+	})
+
+	it('does not add the text to the clipboard if message is empty', async () => {
+		const wrapper = mount(ChatBotMessage, { props: { ...props, message: '' } })
+		const messageButtons = wrapper.findComponent(ChatBotMessageButtons)
+		const copyButton = messageButtons.find('.q-chatbot__copy-button')
+
+		await copyButton.trigger('click')
+		const clipboardText = await navigator.clipboard.readText()
+
+		expect(navigator.clipboard).toBeDefined()
+		expect(clipboardText).toBe('')
+	})
+
+	it('catchs errors when trying to copy to clipboard', async () => {
+		const wrapper = mount(ChatBotMessage, { props })
+		const messageButtons = wrapper.findComponent(ChatBotMessageButtons)
+		const copyButton = messageButtons.find('.q-chatbot__copy-button')
+
+		vi.spyOn(navigator.clipboard, 'writeText').mockRejectedValueOnce(
+			new Error('Clipboard error')
+		)
+		// Suppress console.error for this test
+		const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+		await copyButton.trigger('click')
+		const clipboardText = await navigator.clipboard.readText()
+
+		expect(navigator.clipboard).toBeDefined()
+		expect(clipboardText).toBe('')
+		consoleErrorSpy.mockRestore()
+	})
+
+	it('emits apply-fields event with fields when apply all button is clicked', async () => {
+		const testFields = [
+			{
+				id: 'field-1',
+				type: 'text',
+				text: 'Sample Field',
+				name: 'This is a sample field value'
+			},
+			{
+				id: 'field-2',
+				type: 'number',
+				text: 'Number Field',
+				name: '42'
+			}
+		]
+		addChatMessage('Test message 1', 'bot').fields = testFields
+
+		const wrapper = mount(ChatBotMessage, {
+			props: { ...props, sender: 'bot', fields: testFields }
+		})
+
+		const messageButtons = wrapper.findComponent(ChatBotMessageButtons)
+		const applyAllButton = messageButtons.find('.q-chatbot__apply-all-button')
+
+		expect(applyAllButton.exists()).toBe(true)
+		await applyAllButton.trigger('click')
+
+		const fieldsToApply = testFields.map((field) => {
+			return {
+				id: field.id,
+				text: parseFieldValue(field.type, field.text)
+			}
+		})
+
+		expect(wrapper.emitted('apply-fields')).toBeTruthy()
+		expect(wrapper.emitted('apply-fields')?.[0]).toEqual([fieldsToApply])
+	})
+
+	it('emits apply-field when a single field is applied', async () => {
+		const testFields = [
+			{
+				id: 'field-1',
+				type: 'text',
+				text: 'Sample Field',
+				name: 'This is a sample field value'
+			}
+		]
+
+		addChatMessage('Test message 1', 'bot').fields = testFields
+
+		const wrapper = mount(ChatBotMessage, {
+			props: { ...props, sender: 'bot', fields: testFields }
+		})
+		const fieldPreview = wrapper.findComponent(FieldPreview)
+		expect(fieldPreview.exists()).toBe(true)
+
+		const applyButton = fieldPreview.find("[data-testid='apply-button']")
+		expect(applyButton.exists()).toBe(true)
+
+		await applyButton.trigger('click')
+
+		const fieldToApply = [
+			{
+				id: testFields[0].id,
+				text: parseFieldValue(testFields[0].type, testFields[0].text)
+			}
+		]
+
+		expect(wrapper.emitted('apply-fields')).toBeTruthy()
+		expect(wrapper.emitted('apply-fields')?.[0]).toEqual([fieldToApply])
+	})
+
+	it('renders a different preview when the file is not an image', async () => {
+		const file: ChatBotFile = {
+			fileData: new File(['dummy content'], 'example.pdf', { type: 'application/pdf' }),
+			previewUrl: ''
+		}
+
+		const wrapper = mount(ChatBotMessage, {
+			props: { ...props, file }
+		})
+
+		const img = wrapper.find('.q-chatbot__image-preview img')
+		expect(img.exists()).toBe(false)
+
+		const filePreview = wrapper.find('.q-chatbot__file-preview-container')
+		expect(filePreview.exists()).toBe(true)
+
+		const fileName = wrapper.find('.q-chatbot__file-name')
+		expect(fileName.exists()).toBe(true)
+		expect(fileName.text()).toBe(file.fileData.name)
+
+		const fileExtension = wrapper.find('.q-chatbot__file-extension')
+		expect(fileExtension.exists()).toBe(true)
+		expect(fileExtension.text()).toBe('PDF')
+	})
+})

package/src/components/ChatBotMessage/__tests__/__snapshots__/ChatBotMessage.spec.ts.snap

@@ -0,0 +1,35 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ChatBotMessage > renders the component with default props 1`] = `
+"<div class="q-chatbot__message-container"><span data-test="" type="img" alt="Sender Image" class="q-chatbot__profile"></span>
+  <div class="q-chatbot__message-wrapper">
+    <!--v-if-->
+    <div class="q-chatbot__message">
+      <div class="markdown-renderer q-chatbot__text">
+        <p>Hello, this is a test message.</p>
+      </div>
+    </div>
+  </div>
+  <!--teleport start-->
+  <transition-stub name="fade" appear="true" persisted="false" css="true">
+    <!--v-if-->
+  </transition-stub>
+  <transition-stub name="fade" appear="true" persisted="false" css="true">
+    <!--v-if-->
+  </transition-stub>
+  <!--teleport end-->
+  <!--v-if-->
+  <div class="q-chatbot__feedback-buttons">
+    <div class="q-button-group" role="group"><button type="button" class="q-button q-button--outlined q-button--primary q-button--borderless q-chatbot__good-response-button" title="Good response">
+        <!--v-if--><span class="q-button__content"><span data-test="thumb-up"></span> </span>
+      </button><button type="button" class="q-button q-button--outlined q-button--primary q-button--borderless q-chatbot__bad-response-button" title="Bad response">
+        <!--v-if--><span class="q-button__content"><span data-test="thumb-down"></span> </span>
+      </button><button type="button" class="q-button q-button--outlined q-button--primary q-button--borderless q-chatbot__copy-button" title="Copy response">
+        <!--v-if--><span class="q-button__content"><span data-test="copy-content"></span> </span>
+      </button>
+      <!--v-if-->
+    </div>
+  </div>
+  <div class="q-chatbot__sender">11:47</div>
+</div>"
+`;

package/src/components/ChatBotMessage/types.ts

@@ -1,4 +1,5 @@
-import { ChatBotMessageSender, FieldData } from '@/components/ChatBot/types'
+import type { ChatBotMessageSender, FieldData } from '@/components/ChatBot/types'
+import type { ChatBotFile } from '../ChatBotInput'
 
 export type ChatBotMessageProps = {
 	/*
@@ -27,9 +28,9 @@ export type ChatBotMessageProps = {
 	dateFormat: string
 
 	/**
-	 * Image preview URL
+	 * File Preview
 	 */
-	imagePreviewUrl?: string
+	file?: ChatBotFile
 
 	/**
 	 * Default api endpoint

package/src/components/FieldPreview/__tests__/__snapshots__/FieldPreview.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`FieldPreview > renders correctly with default props 1`] = `
 "<div class="q-field-preview">
-  <div class="q-field-preview__toolbar"><span>Suggestions for field <b>Test Field</b></span></div>
+  <div class="q-field-preview__toolbar"><span>Suggestions for field: <b>Test Field</b></span></div>
   <div class="q-field-preview__content">
     <div class="markdown-renderer">
       <p>Hello, World!</p>

package/src/composables/useChatMessages.ts

@@ -3,6 +3,7 @@ import { v4 as uuidv4 } from 'uuid'
 
 import type { Ref } from 'vue'
 import type { ChatMessage, ChatBotMessageSender } from '@/components/ChatBot/types'
+import type { ChatBotFile } from '@/components/ChatBotInput'
 
 const messages: Ref<ChatMessage[]> = ref([])
 const nextMessageId = ref(1)
@@ -11,7 +12,7 @@ export function useChatMessages() {
 	function addChatMessage(
 		message: string,
 		sender?: ChatBotMessageSender,
-		imagePreviewUrl?: string | null,
+		file?: ChatBotFile,
 		sessionID?: string,
 		isWelcomeMessage?: boolean
 	) {
@@ -21,7 +22,7 @@ export function useChatMessages() {
 			date: new Date(),
 			sender: sender || 'bot',
 			sessionID: sessionID || uuidv4(),
-			imagePreviewUrl: imagePreviewUrl || undefined,
+			file: file,
 			isWelcomeMessage,
 			fields: []
 		}

package/src/composables/useTexts.ts

@@ -30,6 +30,7 @@ export function useTexts() {
 		regenerateResponsePrompt: 'Regenerate a new response for field {0}',
 		regenerateResponse: 'Regenerate response',
 		generatingResponse: 'Generating',
-		suggestionsForField: 'Suggestions for field'
+		suggestionsForField: 'Suggestions for field:',
+		fileUpload: 'Upload File'
 	}
 }