@quidgest/chatbot 0.5.0 → 0.5.3-dev.0

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__/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', id: '1' },
+			{ name: 'field2', text: 'value2', type: 'text', id: '2' }
+		]
+
+		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', id: '1' },
+			{ name: 'field2', text: 'value2', type: 'text', id: '2' }
+		]
+
+		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__/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>"
+`;