@quidgest/chatbot 0.5.1 → 0.5.3

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

@@ -0,0 +1,199 @@
+// Components
+import { ChatBotMessageButtons } from '..'
+
+// Utils
+import { describe, expect, it, beforeEach, vi, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { useChatMessages } from '@/composables/useChatMessages'
+
+// Types
+import type { ChatBotMessageButtonsProps } from '..'
+
+describe('ChatBotMessageButtons', () => {
+	const fixedDate = new Date('2025-01-01T11:47:00')
+	const { addChatMessage, clearMessages } = useChatMessages()
+
+	beforeEach(() => {
+		clearMessages()
+
+		vi.useFakeTimers()
+		vi.setSystemTime(fixedDate)
+	})
+
+	afterEach(() => {
+		vi.useRealTimers()
+	})
+
+	const props: ChatBotMessageButtonsProps = {
+		loading: false,
+		showButtons: true,
+		dateFormat: 'MM/DD/YYYY',
+		date: fixedDate
+	}
+
+	it('renders correctly with default props', () => {
+		const wrapper = mount(ChatBotMessageButtons, { props })
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('does not render buttons when showButtons is false', () => {
+		const wrapper = mount(ChatBotMessageButtons, {
+			props: { ...props, showButtons: false }
+		})
+
+		const buttons = wrapper.find('.q-chatbot__feedback-buttons')
+		expect(buttons.exists()).toBe(false)
+	})
+
+	it('sets loading state correctly to all buttons', () => {
+		const wrapper = mount(ChatBotMessageButtons, {
+			props: { ...props, loading: true }
+		})
+
+		const buttons = wrapper.findAll('q.-chatbot__feedback-buttons button')
+
+		buttons.forEach((button) => {
+			expect(button.attributes('disabled')).toBeDefined()
+		})
+	})
+
+	it('sets the hour date on the bottom of the component', () => {
+		const testDate = new Date('2024-01-01T12:00:00Z')
+		const wrapper = mount(ChatBotMessageButtons, {
+			props: {
+				...props,
+				date: testDate
+			}
+		})
+
+		const dateElement = wrapper.find('.q-chatbot__sender')
+		expect(dateElement.text()).toBe('12:00')
+	})
+
+	it('emits the copy event when copy button is clicked', async () => {
+		const wrapper = mount(ChatBotMessageButtons, { props })
+		const copyButton = wrapper.find('.q-chatbot__copy-button')
+
+		await copyButton.trigger('click')
+
+		expect(wrapper.emitted()['copy-response']).toBeTruthy()
+	})
+
+	it('emits the apply-all event when apply all button is clicked', async () => {
+		// Add one message with fields to enable the button
+		const message = addChatMessage('Test message 1', 'bot')
+
+		message.fields = [
+			{ name: 'field1', text: 'value1', type: 'text' },
+			{ name: 'field2', text: 'value2', type: 'text' }
+		]
+
+		const wrapper = mount(ChatBotMessageButtons, {
+			props: { ...props, showButtons: true }
+		})
+
+		const applyAllButton = wrapper.find('.q-chatbot__apply-all-button')
+		await applyAllButton.trigger('click')
+
+		expect(wrapper.emitted()['apply-all']).toBeTruthy()
+	})
+
+	it('does not emit apply-all if the button has already been clicked', async () => {
+		// Add one message with fields to enable the button
+		const message = addChatMessage('Test message 1', 'bot')
+
+		message.fields = [
+			{ name: 'field1', text: 'value1', type: 'text' },
+			{ name: 'field2', text: 'value2', type: 'text' }
+		]
+
+		const wrapper = mount(ChatBotMessageButtons, {
+			props: { ...props, showButtons: true }
+		})
+
+		const applyAllButton = wrapper.find('.q-chatbot__apply-all-button')
+		await applyAllButton.trigger('click')
+		await applyAllButton.trigger('click') // Click again
+
+		expect(wrapper.emitted()['apply-all']).toBeTruthy()
+		expect(wrapper.emitted()['apply-all'].length).toBe(1) // Should only be emitted once
+	})
+
+	it('does not render apply all button if there is no message, and the message does not have fields', () => {
+		const wrapper = mount(ChatBotMessageButtons, {
+			props: { ...props, showButtons: true }
+		})
+
+		const applyAllButton = wrapper.find('.q-chatbot__apply-all-button')
+		expect(applyAllButton.exists()).toBe(false)
+	})
+
+	it('opens the dialog when clicking the thumbs up button', async () => {
+		const wrapper = mount(ChatBotMessageButtons, {
+			props: { ...props, showButtons: true }
+		})
+		const goodResponseButton = wrapper.find('.q-chatbot__good-response-button')
+		await goodResponseButton.trigger('click')
+
+		const dialog = wrapper.findComponent({ name: 'QDialog' })
+		expect(dialog.exists()).toBe(true)
+	})
+
+	it('opens the dialog when clicking the thumbs down button', async () => {
+		const wrapper = mount(ChatBotMessageButtons, {
+			props: { ...props, showButtons: true }
+		})
+		const badResponseButton = wrapper.find('.q-chatbot__bad-response-button')
+		await badResponseButton.trigger('click')
+
+		const dialog = wrapper.findComponent({ name: 'QDialog' })
+		expect(dialog.exists()).toBe(true)
+	})
+
+	it('emits submit-feedback event with comment when submitting feedback', async () => {
+		const wrapper = mount(ChatBotMessageButtons, {
+			props: { ...props, showButtons: true }
+		})
+		const goodResponseButton = wrapper.find('.q-chatbot__good-response-button')
+		await goodResponseButton.trigger('click')
+
+		const dialog = wrapper.findComponent({ name: 'QDialog' })
+		expect(dialog.exists()).toBe(true)
+
+		const commentInput = dialog.find('input')
+		expect(commentInput.exists()).toBe(true)
+		await commentInput.setValue('Great response!')
+
+		const overlay = wrapper.find('.q-overlay__content')
+		const submitButton = overlay.find('.q-chatbot__dialog-confirm-button')
+
+		expect(submitButton.exists()).toBe(true)
+		await submitButton.trigger('click')
+		expect(wrapper.emitted()['submit-feedback']).toBeTruthy()
+		expect(wrapper.emitted()['submit-feedback'][0]).toEqual([1, 'Great response!'])
+	})
+
+	it('uses a default date if no date prop is provided', () => {
+		const wrapper = mount(ChatBotMessageButtons, {
+			props: { ...props, date: undefined }
+		})
+
+		const dateElement = wrapper.find('.q-chatbot__sender')
+
+		// The default date is the current date, so we just check if it renders something
+		expect(dateElement.text().length).toBeGreaterThan(0)
+	})
+
+	it('uses the current data format if no dateFormat prop is provided', () => {
+		const wrapper = mount(ChatBotMessageButtons, {
+			props: { ...props, dateFormat: '' }
+		})
+
+		const dateElement = wrapper.find('.q-chatbot__sender')
+		const expectedFormat = fixedDate.toLocaleString()
+
+		// The date should be in the current locale format
+		expect(dateElement.text()).toBe(expectedFormat)
+	})
+})

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/__tests__/__snapshots__/ChatBotMessageButtons.spec.ts.snap

@@ -0,0 +1,25 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ChatBotMessageButtons > renders correctly with default props 1`] = `
+"<!--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>"
+`;

package/src/components/ChatBotMessage/types.ts

@@ -1,70 +1,71 @@
-import { ChatBotMessageSender, FieldData } from '@/components/ChatBot/types'
+import type { ChatBotMessageSender, FieldData } from '@/components/ChatBot/types'
+import type { ChatBotFile } from '../ChatBotInput'
 
 export type ChatBotMessageProps = {
-    /*
-     * Sender of the message
-     */
-    sender?: ChatBotMessageSender
+	/*
+	 * Sender of the message
+	 */
+	sender?: ChatBotMessageSender
 
-    /*
-     * Message to be displayed
-     */
-    message?: string
+	/*
+	 * Message to be displayed
+	 */
+	message?: string
 
-    /*
-     * Date of when the message was sent
-     */
-    date?: Date
+	/*
+	 * Date of when the message was sent
+	 */
+	date?: Date
 
-    /*
-     * If the message is loading
-     */
-    loading?: boolean
+	/*
+	 * If the message is loading
+	 */
+	loading?: boolean
 
-    /**
-     * Project locale
-     */
-    dateFormat: string
+	/**
+	 * Project locale
+	 */
+	dateFormat: string
 
-    /**
-     * Image preview URL
-     */
-    imagePreviewUrl?: string
+	/**
+	 * File Preview
+	 */
+	file?: ChatBotFile
 
-    /**
-     * Default api endpoint
-     */
-    apiEndpoint: string
+	/**
+	 * Default api endpoint
+	 */
+	apiEndpoint: string
 
-    /**
-     * Session ID
-     */
-    sessionID?: string
+	/**
+	 * Session ID
+	 */
+	sessionID?: string
 
-    /**
-     * User image
-     */
-    userImage: string
+	/**
+	 * User image
+	 */
+	userImage: string
 
-    /**
-     * Chatbot image
-     */
-    chatbotImage: string
+	/**
+	 * Chatbot image
+	 */
+	chatbotImage: string
 
-    /**
-     * Flag to mark welcome messages
-     */
-    isWelcomeMessage?: boolean
+	/**
+	 * Flag to mark welcome messages
+	 */
+	isWelcomeMessage?: boolean
 
-    /**
-     * Additional fields for the message
-     */
-    fields?: FieldData[]
+	/**
+	 * Additional fields for the message
+	 */
+	fields?: FieldData[]
 }
 
 export type ChatBotMessageButtonsProps = {
-    loading: boolean
-    showButtons: boolean
-    dateFormat: string
-    date?: Date
+	loading: boolean
+	showButtons: boolean
+	dateFormat: string
+	date?: Date
 }

package/src/components/ChatToolBar/ChatToolBar.vue

@@ -1,82 +1,86 @@
 <template>
-    <div class="q-chatbot__tools">
-        <div class="q-chatbot__tools__select">
-            <q-select
-                v-if="hasAgents"
-                v-model="selectedChat"
-                size="medium"
-                :items="availableChats"
-                @update:model-value="changeChat" />
-        </div>
+	<div class="q-chatbot__tools">
+		<div class="q-chatbot__tools__select">
+			<q-select
+				v-if="hasAgents"
+				v-model="selectedChat"
+				class="q-chatbot__tools-select-input"
+				size="medium"
+				:items="availableChats"
+				@update:model-value="changeChat" />
+		</div>
 
-        <q-button
-            :title="clearChat"
-            :disabled="props.disabled"
-            borderless
-            @click="clear">
-            <q-icon icon="bin" />
-        </q-button>
-    </div>
+		<q-button
+			:title="clearChat"
+			:disabled="props.disabled"
+			class="q-chatbot__tools-clear"
+			borderless
+			@click="clear">
+			<q-icon icon="bin" />
+		</q-button>
+	</div>
 </template>
 
 <script setup lang="ts">
-    import { useTexts } from '@/composables/useTexts'
-    import { ChatToolBarProps } from './types'
-    import { computed, ref, watch } from 'vue'
+	import { QButton, QSelect, QIcon } from '@quidgest/ui/components'
 
-    const { clearChat } = useTexts()
+	import { useTexts } from '@/composables/useTexts'
+	import { ChatToolBarProps } from './types'
+	import { computed, ref, watch } from 'vue'
 
-    const defaultChat = {
-        key: '',
-        value: 'Default Chat',
-        formId: ''
-    }
+	const props = withDefaults(defineProps<ChatToolBarProps>(), {
+		availableAgents: () => []
+	})
 
-    const props = withDefaults(defineProps<ChatToolBarProps>(), {
-        availableAgents: () => []
-    })
+	const emit = defineEmits<{
+		(e: 'clear'): void
+		(e: 'change-chat', value: { key: string; formId: string }): void
+	}>()
 
-    const emit = defineEmits<{
-        (e: 'clear'): void
-        (e: 'change-chat', value: { key: string; formId: string }): void
-    }>()
+	const { clearChat } = useTexts()
 
-    const hasAgents = computed(() => {
-        return props.availableAgents && props.availableAgents.length > 0
-    })
+	const defaultChat = {
+		key: '',
+		value: 'Default Chat',
+		formId: ''
+	}
 
-    const selectedChat = ref(props.selectedAgentKey || defaultChat.key)
-    watch(
-        () => props.selectedAgentKey,
-        (newValue) => {
-            selectedChat.value = newValue || defaultChat.key
-        }
-    )
+	const hasAgents = computed(() => {
+		return props.availableAgents && props.availableAgents.length > 0
+	})
 
-    const availableChats = computed(() => {
-        const chats = props.availableAgents?.map((agent) => ({
-            key: agent.key,
-            value: agent.value,
-            formId: agent.formId
-        }))
+	const selectedChat = ref(props.selectedAgentKey || defaultChat.key)
+	watch(
+		() => props.selectedAgentKey,
+		(newValue) => {
+			selectedChat.value = newValue || defaultChat.key
+		}
+	)
 
-        chats?.push(defaultChat)
-        return chats || [defaultChat]
-    })
+	const availableChats = computed(() => {
+		const chats = props.availableAgents?.map((agent) => ({
+			key: agent.key,
+			value: agent.value,
+			formId: agent.formId
+		}))
 
-    function clear() {
-        emit('clear')
-    }
+		chats?.push(defaultChat)
+		return chats || [defaultChat]
+	})
 
-    function changeChat(value: string) {
-        const item = availableChats.value.find((chat) => chat.key === value)
-        if (!item) return
+	function clear() {
+		emit('clear')
+	}
 
-        if (item.key === defaultChat.key) {
-            emit('change-chat', { key: '', formId: '' })
-            return
-        }
+	function changeChat(value: string) {
+		const item = availableChats.value.find((chat) => chat.key === value)
+		if (!item) return
 
-        emit('change-chat', item)
-    }
+		if (item.key === defaultChat.key) {
+			emit('change-chat', { key: '', formId: '' })
+			return
+		}
+
+		emit('change-chat', item)
+	}
 </script>

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

@@ -0,0 +1,118 @@
+// Components
+import { ChatToolBar } from '..'
+
+// Utils
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+// Types
+import type { ChatToolBarProps } from '../'
+
+describe('ChatToolBar', () => {
+	const props: ChatToolBarProps = {
+		disabled: false,
+		availableAgents: [],
+		selectedAgentKey: ''
+	}
+
+	it('should render the component', () => {
+		const wrapper = mount(ChatToolBar, { props })
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('should emit clear event when clear button is clicked', async () => {
+		const wrapper = mount(ChatToolBar, { props })
+		const button = wrapper.find('.q-chatbot__tools-clear')
+
+		await button.trigger('click')
+		expect(wrapper.emitted()['clear']).toBeTruthy()
+	})
+
+	it('should disable the clear button when disabled prop is true', () => {
+		const wrapper = mount(ChatToolBar, { props: { ...props, disabled: true } })
+		const button = wrapper.find<HTMLButtonElement>('.q-chatbot__tools-clear')
+		expect(button.element.disabled).toBe(true)
+	})
+
+	it('should not render the select when no agents are provided', () => {
+		const wrapper = mount(ChatToolBar, { props })
+		expect(wrapper.find('.q-chatbot__tools-select-input').exists()).toBe(false)
+	})
+
+	it('should render the select when agents are provided', () => {
+		const wrapper = mount(ChatToolBar, {
+			props: {
+				...props,
+				availableAgents: [{ key: 'agent1', value: 'Agent 1', formId: 'key' }]
+			}
+		})
+		expect(wrapper.find('.q-chatbot__tools-select-input').exists()).toBe(true)
+	})
+
+	it('should emit change-agent event when a new agent is selected', async () => {
+		const wrapper = mount(ChatToolBar, {
+			props: {
+				...props,
+				availableAgents: [
+					{ key: 'agent1', value: 'Agent 1', formId: 'key' },
+					{ key: 'agent2', value: 'Agent 2', formId: 'key' }
+				],
+				selectedAgentKey: 'agent1'
+			}
+		})
+
+		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([
+			{
+				key: 'agent2',
+				formId: 'key',
+				value: 'Agent 2'
+			}
+		])
+	})
+
+	it('should not emit change-agent if it receive a non-existing agent key', async () => {
+		const wrapper = mount(ChatToolBar, {
+			props: {
+				...props,
+				availableAgents: [
+					{ key: 'agent1', value: 'Agent 1', formId: 'key' },
+					{ key: 'agent2', value: 'Agent 2', formId: 'key' }
+				],
+				selectedAgentKey: 'agent1'
+			}
+		})
+		const select = wrapper.findComponent({ name: 'QSelect' })
+		// Simulate selecting a new agent
+		await select.vm.$emit('update:modelValue', 'agent3')
+		expect(wrapper.emitted()['change-chat']).toBeFalsy()
+	})
+
+	it('shoudld emit change-agent when selecting the default option', async () => {
+		const wrapper = mount(ChatToolBar, {
+			props: {
+				...props,
+				availableAgents: [
+					{ key: 'agent1', value: 'Agent 1', formId: 'key' },
+					{ key: 'agent2', value: 'Agent 2', formId: 'key' }
+				],
+				selectedAgentKey: 'agent1'
+			}
+		})
+		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([
+			{
+				key: '',
+				formId: ''
+			}
+		])
+	})
+})

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

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ChatToolBar > should render the component 1`] = `
+"<div class="q-chatbot__tools">
+  <div class="q-chatbot__tools__select">
+    <!--v-if-->
+  </div><button type="button" class="q-button q-button--outlined q-button--primary q-button--borderless q-chatbot__tools-clear" title="Clear chat">
+    <!--v-if--><span class="q-button__content"><span data-test="bin"></span> </span>
+  </button>
+</div>"
+`;