@quidgest/chatbot 0.5.3-dev.0 → 0.5.3

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

@@ -0,0 +1,256 @@
+// 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: [
+					{
+						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 = [
+			{
+				type: 'text',
+				text: 'Sample Field',
+				name: 'This is a sample field value'
+			},
+			{
+				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 {
+				name: field.name,
+				text: parseFieldValue(field.type, field.text)
+			}
+		})
+
+		expect(wrapper.emitted('apply-fields')).toBeTruthy()
+		expect(wrapper.emitted('apply-fields')?.[0]).toEqual([fieldsToApply])
+	})
+
+	it('emits apply-fieldd when a single field is applied', async () => {
+		const testFields = [
+			{
+				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 = [
+			{
+				name: testFields[0].name,
+				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__/ChatBotMessageButtons.spec.ts

@@ -85,8 +85,8 @@ describe('ChatBotMessageButtons', () => {
 		const message = addChatMessage('Test message 1', 'bot')
 
 		message.fields = [
-			{ name: 'field1', text: 'value1', type: 'text', id: '1' },
-			{ name: 'field2', text: 'value2', type: 'text', id: '2' }
+			{ name: 'field1', text: 'value1', type: 'text' },
+			{ name: 'field2', text: 'value2', type: 'text' }
 		]
 
 		const wrapper = mount(ChatBotMessageButtons, {
@@ -104,8 +104,8 @@ describe('ChatBotMessageButtons', () => {
 		const message = addChatMessage('Test message 1', 'bot')
 
 		message.fields = [
-			{ name: 'field1', text: 'value1', type: 'text', id: '1' },
-			{ name: 'field2', text: 'value2', type: 'text', id: '2' }
+			{ name: 'field1', text: 'value1', type: 'text' },
+			{ name: 'field2', text: 'value2', type: 'text' }
 		]
 
 		const wrapper = mount(ChatBotMessageButtons, {

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/ChatToolBar/ChatToolBar.vue

@@ -4,7 +4,6 @@
 			<q-select
 				v-if="hasAgents"
 				v-model="selectedChat"
-				inline
 				class="q-chatbot__tools-select-input"
 				size="medium"
 				:items="availableChats"
@@ -23,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-	import { QButton, QIcon } from '@quidgest/ui/components'
+	import { QButton, QSelect, QIcon } from '@quidgest/ui/components'
 
 	import { useTexts } from '@/composables/useTexts'
 	import { ChatToolBarProps } from './types'

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

@@ -7,7 +7,6 @@ import { mount } from '@vue/test-utils'
 
 // Types
 import type { ChatToolBarProps } from '../'
-import { nextTick } from 'vue'
 
 describe('ChatToolBar', () => {
 	const props: ChatToolBarProps = {
@@ -54,25 +53,24 @@ describe('ChatToolBar', () => {
 		const wrapper = mount(ChatToolBar, {
 			props: {
 				...props,
-				availableAgents: [{ key: 'agent1', value: 'Agent 1', formId: 'key' }],
-				selectedAgentKey: ''
+				availableAgents: [
+					{ key: 'agent1', value: 'Agent 1', formId: 'key' },
+					{ key: 'agent2', value: 'Agent 2', formId: 'key' }
+				],
+				selectedAgentKey: 'agent1'
 			}
 		})
 
-		const select = wrapper.find('.q-field__control')
-		await select.trigger('click')
-
-		const overlay = wrapper.find('.q-overlay__content')
-
-		const item = overlay.find('.q-list-item')
-		await item.trigger('click')
+		const select = wrapper.findComponent({ name: 'QSelect' })
+		// Simulate selecting a new agent
+		await select.vm.$emit('update:modelValue', 'agent2')
 
 		expect(wrapper.emitted()['change-chat']).toBeTruthy()
-		expect(wrapper.emitted()['change-chat'][0]).toEqual([
+		expect(wrapper.emitted()['change-chat']?.[0]).toEqual([
 			{
-				key: 'agent1',
+				key: 'agent2',
 				formId: 'key',
-				value: 'Agent 1'
+				value: 'Agent 2'
 			}
 		])
 	})
@@ -88,21 +86,9 @@ describe('ChatToolBar', () => {
 				selectedAgentKey: 'agent1'
 			}
 		})
-
-		const select = wrapper.find('.q-field__control')
-		await select.trigger('click')
-
-		const overlay = wrapper.find('.q-overlay__content')
-
-		// Manually add a fake item that does not exist in the options
-		const fakeItem = document.createElement('div')
-		fakeItem.setAttribute('data-key', 'agent3')
-		overlay.element.appendChild(fakeItem)
-
-		await nextTick()
-		const item = overlay.find('[data-key="agent3"]')
-		await item.trigger('click')
-
+		const select = wrapper.findComponent({ name: 'QSelect' })
+		// Simulate selecting a new agent
+		await select.vm.$emit('update:modelValue', 'agent3')
 		expect(wrapper.emitted()['change-chat']).toBeFalsy()
 	})
 
@@ -117,18 +103,12 @@ describe('ChatToolBar', () => {
 				selectedAgentKey: 'agent1'
 			}
 		})
-		const select = wrapper.find('.q-field__control')
-		await select.trigger('click')
-
-		const overlay = wrapper.find('.q-overlay__content')
-		const items = overlay.findAll('.q-list-item')
-
-		// Default options is always the last one
-		const defaultOption = items[items.length - 1]
-		await defaultOption.trigger('click')
+		const select = wrapper.findComponent({ name: 'QSelect' })
+		// Simulate selecting a new agent
+		await select.vm.$emit('update:modelValue', '')
 
 		expect(wrapper.emitted()['change-chat']).toBeTruthy()
-		expect(wrapper.emitted()['change-chat'][0]).toEqual([
+		expect(wrapper.emitted()['change-chat']?.[0]).toEqual([
 			{
 				key: '',
 				formId: ''

package/src/components/FieldPreview/FieldPreview.vue

@@ -5,24 +5,23 @@
 				{{ texts.suggestionsForField }} <b>{{ props.name }}</b>
 			</span>
 		</div>
-		<div :class="classes">
+		<div class="q-field-preview__content">
 			<component
 				:is="previewComponent"
 				v-bind="previewComponentProps" />
 		</div>
 		<div class="q-field-preview__footer">
 			<q-button-group borderless>
+				<!-- <q-button
+                    :title="texts.regenerateResponse"
+                    :disabled="props.disabled"
+                    borderless
+                    @click="console.log('Regenerate response')">
+                    <q-icon icon="reset" />
+                </q-button> -->
 				<q-button
-					:title="texts.regenerateResponse"
-					:disabled="blockRegenerateButton"
-					:readonly="blockRegenerateButton"
-					borderless
-					@click="regenerate">
-					<q-icon icon="reset" />
-				</q-button>
-				<q-button
-					:label="texts.apply"
 					data-testid="apply-button"
+					:label="texts.apply"
 					:disabled="blockApplyButton"
 					:readonly="blockApplyButton"
 					@click="emitApply">
@@ -44,19 +43,13 @@
 	const props = defineProps<FieldPreviewProps>()
 	const emit = defineEmits<{
 		(e: 'apply', text: unknown): void
-		(e: 'regenerate', name: string): void
 	}>()
 	const texts = useTexts()
 	const blockApply = ref(props.applied)
-	const blockRegenerate = ref(false)
 	const blockApplyButton = computed(() => {
 		return props.disabled || blockApply.value
 	})
 
-	const blockRegenerateButton = computed(() => {
-		return props.disabled || blockRegenerate.value
-	})
-
 	const previewComponent = computed(() => {
 		if (props.type === 'text' || props.type === 'multiline_text') return MarkdownRender
 
@@ -72,14 +65,6 @@
 		return componentProps
 	})
 
-	const classes = computed(() => {
-		const classes = ['q-field-preview__content']
-
-		if (previewComponent.value !== MarkdownRender) classes.push('preserve-whitespace')
-
-		return classes
-	})
-
 	function emitApply() {
 		if (blockApply.value) return
 		blockApply.value = true
@@ -88,11 +73,4 @@
 
 		emit('apply', text)
 	}
-
-	function regenerate() {
-		if (blockRegenerate.value) return
-		blockRegenerate.value = true
-
-		emit('regenerate', props.name)
-	}
 </script>

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

@@ -2,18 +2,24 @@
 
 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>
     </div>
   </div>
   <div class="q-field-preview__footer">
-    <div class="q-button-group" role="group"><button type="button" class="q-button q-button--outlined q-button--primary q-button--borderless" title="Regenerate response">
-        <!--v-if--><span class="q-button__content"><span data-test="reset"></span> </span>
-      </button><button type="button" class="q-button q-button--outlined q-button--primary q-button--borderless" data-testid="apply-button">
+    <div class="q-button-group" role="group">
+      <!-- <q-button
+                    :title="texts.regenerateResponse"
+                    :disabled="props.disabled"
+                    borderless
+                    @click="console.log('Regenerate response')">
+                    <q-icon icon="reset" />
+                </q-button> --><button type="button" class="q-button q-button--outlined q-button--primary q-button--borderless" data-testid="apply-button">
         <!--v-if--><span class="q-button__content"><span data-test="apply"></span> Apply</span>
-      </button></div>
+      </button>
+    </div>
   </div>
 </div>"
 `;

package/src/components/FieldPreview/field-preview.scss

@@ -20,10 +20,6 @@
     border-radius: 6px;
     padding: 0.75rem 1rem;
     font-size: 0.875rem;
-
-    &.preserve-whitespace {
-      white-space: pre-wrap;
-    }
   }
 
   &__footer {

package/src/components/MarkdownRender/MarkdownRender.vue

@@ -15,7 +15,6 @@
 	const md = ref(
 		new MarkdownIt({
 			html: true,
-			breaks: true,
 			...(props.options ?? {})
 		})
 	)

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

@@ -4,8 +4,7 @@ import { useChatMessages } from '../useChatMessages'
 // Utils
 import { describe, it, expect, beforeEach } from 'vitest'
 
-const { addChatMessage, clearMessages, getMessages, getLastMessage, deleteMessageById } =
-	useChatMessages()
+const { addChatMessage, clearMessages, getMessages, getLastMessage } = useChatMessages()
 
 beforeEach(() => {
 	// Reset chat messages before each test
@@ -49,16 +48,4 @@ describe('useChatMessages', () => {
 		expect(messages).toEqual([])
 		expect(messages.length).toBe(0)
 	})
-
-	it('should delete a message by ID', () => {
-		const msg1 = addChatMessage('First message', 'bot')
-		const msg2 = addChatMessage('Second message', 'user')
-
-		expect(getMessages().length).toBe(2)
-		deleteMessageById(msg1.id)
-
-		const messages = getMessages()
-		expect(messages.length).toBe(1)
-		expect(messages[0].id).toBe(msg2.id)
-	})
 })