@quidgest/chatbot 0.5.1 → 0.5.3

package/src/components/ChatBotMessage/ChatBotMessageButtons.vue

@@ -1,169 +1,184 @@
 <template>
-    <q-dialog
-        v-model="showDialog"
-        :buttons="commentButtons">
-        <template #body>
-            <div class="q-chatbot__dialog-title">
-                {{ texts.commentDialogTitle }}
-            </div>
-            <q-text-field
-                v-model="feedbackComment"
-                :maxLength="150"
-                size="large"
-                :placeholder="texts.commentPlaceholder" />
-        </template>
-    </q-dialog>
-
-    <div
-        v-if="showButtons"
-        class="q-chatbot__feedback-buttons">
-        <q-button-group>
-            <q-button
-                :title="texts.goodResponse"
-                borderless
-                :disabled="props.loading"
-                @click="openFeedbackDialog(1)">
-                <q-icon icon="thumb-up" />
-            </q-button>
-            <q-button
-                :title="texts.badResponse"
-                borderless
-                :disabled="props.loading"
-                @click="openFeedbackDialog(0)">
-                <q-icon icon="thumb-down" />
-            </q-button>
-            <q-button
-                :title="texts.copyResponse"
-                borderless
-                :disabled="props.loading"
-                @click="copyResponse">
-                <q-icon icon="copy-content" />
-            </q-button>
-            <q-button
-                v-if="showApplyAll"
-                :title="texts.applyAll"
-                borderless
-                :disabled="blockApplyAllButton"
-                :readonly="blockApplyAllButton"
-                @click="onApplyAll">
-                <q-icon icon="apply-all" />
-            </q-button>
-        </q-button-group>
-    </div>
-    <div class="q-chatbot__sender">
-        {{ messageDate }}
-    </div>
+	<q-dialog
+		v-model="showDialog"
+		inline
+		:buttons="commentButtons">
+		<template #body>
+			<div class="q-chatbot__dialog-title">
+				{{ texts.commentDialogTitle }}
+			</div>
+			<q-text-field
+				v-model="feedbackComment"
+				class="q-chatbot__dialog-comment-input"
+				:max-length="150"
+				size="large"
+				:placeholder="texts.commentPlaceholder" />
+		</template>
+	</q-dialog>
+
+	<div
+		v-if="showButtons"
+		class="q-chatbot__feedback-buttons">
+		<q-button-group>
+			<q-button
+				:title="texts.goodResponse"
+				class="q-chatbot__good-response-button"
+				borderless
+				:disabled="props.loading"
+				@click="handleGoodResponseClick">
+				<q-icon icon="thumb-up" />
+			</q-button>
+			<q-button
+				:title="texts.badResponse"
+				class="q-chatbot__bad-response-button"
+				borderless
+				:disabled="props.loading"
+				@click="handleBadResponseClick">
+				<q-icon icon="thumb-down" />
+			</q-button>
+			<q-button
+				:title="texts.copyResponse"
+				class="q-chatbot__copy-button"
+				borderless
+				:disabled="props.loading"
+				@click="copyResponse">
+				<q-icon icon="copy-content" />
+			</q-button>
+			<q-button
+				v-if="showApplyAll"
+				:title="texts.applyAll"
+				class="q-chatbot__apply-all-button"
+				borderless
+				:disabled="blockApplyAllButton"
+				:readonly="blockApplyAllButton"
+				@click="onApplyAll">
+				<q-icon icon="apply-all" />
+			</q-button>
+		</q-button-group>
+	</div>
+	<div class="q-chatbot__sender">
+		{{ messageDate }}
+	</div>
 </template>
 
 <script setup lang="ts">
-    import { computed, ref } from 'vue'
-    import { QDialog } from '@quidgest/ui/components'
-    import type { ChatBotMessageButtonsProps } from './'
-
-    // Composables
-    import { useTexts } from '@/composables/useTexts'
-    import { useChatMessages } from '@/composables/useChatMessages'
-
-    const texts = useTexts()
-    const { getLastMessage } = useChatMessages()
-
-    const props = defineProps<ChatBotMessageButtonsProps>()
-    const showDialog = ref(false)
-    const feedbackComment = ref('')
-    const currentFeedback = ref<number | null>(null)
-    const blockApplyAll = ref(false)
-    const blockApplyAllButton = computed(() => {
-        return props.loading || blockApplyAll.value
-    })
-
-    const date = props.date || new Date()
-
-    const emits = defineEmits<{
-        (e: 'submit-feedback', feedback: number, comment: string): void
-        (e: 'copy-response'): void
-        (e: 'apply-all'): void
-    }>()
-
-    const lastMessage = getLastMessage()
-
-    const showApplyAll = computed(() => {
-        if (!lastMessage) return false
-
-        return lastMessage.fields && lastMessage.fields.length > 1
-    })
-
-    const commentButtons = [
-        {
-            id: 'confirm-btn',
-            action: submitFeedback,
-            props: {
-                label: texts.submitButton
-            },
-            icon: {
-                icon: 'submit'
-            }
-        },
-        {
-            id: 'cancel-btn',
-            props: {
-                label: texts.cancelButton
-            },
-            icon: {
-                icon: 'cancel'
-            }
-        }
-    ]
-
-    const getLocaleDate = computed(() => {
-        if (!props.dateFormat) return date.toLocaleString()
-
-        return formatDate(date, 'HH:mm')
-    })
-
-    const messageDate = computed(() => {
-        return `${getLocaleDate.value}`
-    })
-
-    function formatDate(date: Date, format: string) {
-        const day = date.getDate().toString().padStart(2, '0')
-        const month = (date.getMonth() + 1).toString().padStart(2, '0')
-        const year = date.getFullYear().toString().padStart(2, '0')
-        const hours = date.getHours().toString().padStart(2, '0')
-        const minutes = date.getMinutes().toString().padStart(2, '0')
-        const seconds = date.getSeconds().toString().padStart(2, '0')
-
-        return format
-            .replace('dd', day)
-            .replace('MM', month)
-            .replace('yyyy', year)
-            .replace('HH', hours)
-            .replace('mm', minutes)
-            .replace('ss', seconds)
-    }
-
-    function openFeedbackDialog(feedback: number) {
-        showDialog.value = true
-        feedbackComment.value = ''
-        currentFeedback.value = feedback
-    }
-
-    function onApplyAll() {
-        if (blockApplyAll.value) return
-        blockApplyAll.value = true
-
-        emits('apply-all')
-    }
-
-    function submitFeedback() {
-        if (currentFeedback.value === null) return
-
-        emits('submit-feedback', currentFeedback.value, feedbackComment.value)
-        showDialog.value = false
-        feedbackComment.value = ''
-        currentFeedback.value = null
-    }
-
-    function copyResponse() {
-        emits('copy-response')
-    }
+	import { computed, ref } from 'vue'
+	import { QDialog, QButtonGroup, QButton, QTextField, QIcon } from '@quidgest/ui/components'
+	import type { ChatBotMessageButtonsProps } from './'
+
+	// Composables
+	import { useTexts } from '@/composables/useTexts'
+	import { useChatMessages } from '@/composables/useChatMessages'
+
+	const props = defineProps<ChatBotMessageButtonsProps>()
+	const emit = defineEmits<{
+		(e: 'submit-feedback', feedback: number, comment: string): void
+		(e: 'copy-response'): void
+		(e: 'apply-all'): void
+	}>()
+	const texts = useTexts()
+	const { getLastMessage } = useChatMessages()
+
+	const showDialog = ref(false)
+	const feedbackComment = ref('')
+	const currentFeedback = ref<number | null>(null)
+	const blockApplyAll = ref(false)
+	const blockApplyAllButton = computed(() => {
+		return props.loading || blockApplyAll.value
+	})
+
+	const date = props.date || new Date()
+
+	const lastMessage = getLastMessage()
+
+	const showApplyAll = computed(() => {
+		if (!lastMessage) return false
+
+		return lastMessage.fields && lastMessage.fields.length > 1
+	})
+
+	const commentButtons = [
+		{
+			id: 'confirm-btn',
+			action: submitFeedback,
+			props: {
+				label: texts.submitButton,
+				class: 'q-chatbot__dialog-confirm-button'
+			},
+			icon: {
+				icon: 'submit'
+			}
+		},
+		{
+			id: 'cancel-btn',
+			props: {
+				label: texts.cancelButton,
+				class: 'q-chatbot__dialog-cancel-button'
+			},
+			icon: {
+				icon: 'cancel'
+			}
+		}
+	]
+
+	const getLocaleDate = computed(() => {
+		if (!props.dateFormat) return date.toLocaleString()
+
+		return formatDate(date, 'HH:mm')
+	})
+
+	const messageDate = computed(() => {
+		return `${getLocaleDate.value}`
+	})
+
+	function formatDate(date: Date, format: string) {
+		const day = date.getDate().toString().padStart(2, '0')
+		const month = (date.getMonth() + 1).toString().padStart(2, '0')
+		const year = date.getFullYear().toString().padStart(2, '0')
+		const hours = date.getHours().toString().padStart(2, '0')
+		const minutes = date.getMinutes().toString().padStart(2, '0')
+		const seconds = date.getSeconds().toString().padStart(2, '0')
+
+		return format
+			.replace('dd', day)
+			.replace('MM', month)
+			.replace('yyyy', year)
+			.replace('HH', hours)
+			.replace('mm', minutes)
+			.replace('ss', seconds)
+	}
+
+	function openFeedbackDialog(feedback: number) {
+		showDialog.value = true
+		feedbackComment.value = ''
+		currentFeedback.value = feedback
+	}
+
+	function handleBadResponseClick() {
+		openFeedbackDialog(0)
+	}
+
+	function handleGoodResponseClick() {
+		openFeedbackDialog(1)
+	}
+
+	function onApplyAll() {
+		if (blockApplyAll.value) return
+		blockApplyAll.value = true
+
+		emit('apply-all')
+	}
+
+	function submitFeedback() {
+		if (!currentFeedback.value) return
+
+		emit('submit-feedback', currentFeedback.value, feedbackComment.value)
+		showDialog.value = false
+		feedbackComment.value = ''
+		currentFeedback.value = null
+	}
+
+	function copyResponse() {
+		emit('copy-response')
+	}
 </script>

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')
+	})
+})