@quidgest/chatbot 0.5.1 → 0.5.3

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

@@ -0,0 +1,279 @@
+// Components
+import { ChatBotInput } from '..'
+
+// Utils
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+
+// Types
+import type { ChatBotInputProps } from '..'
+
+describe('ChatBotInput', () => {
+	const props: ChatBotInputProps = {
+		disabled: false,
+		loading: false,
+		userPrompt: '',
+		agentId: 'test-agent-id'
+	}
+
+	it('renders correctly with default props', () => {
+		const wrapper = mount(ChatBotInput, {
+			props: { ...props }
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('adds the right class when disabled', async () => {
+		const wrapper = mount(ChatBotInput, {
+			props: { ...props, disabled: true }
+		})
+
+		const footer = wrapper.find('.q-chatbot__footer')
+		expect(footer.classes()).toContain('q-chatbot__footer-disabled')
+	})
+
+	it('adds the dragover class when a file is being dragged over', async () => {
+		const wrapper = mount(ChatBotInput, {
+			props: { ...props }
+		})
+
+		const footer = wrapper.find('.q-chatbot__footer')
+		await footer.trigger('dragover')
+		expect(footer.classes()).toContain('drag-over')
+	})
+
+	it('uses provided userPrompt from props', () => {
+		const wrapper = mount(ChatBotInput, {
+			props: { ...props, userPrompt: 'Hello, World!' }
+		})
+
+		const textarea = wrapper.find<HTMLTextAreaElement>('.q-chatbot__input textarea')
+		expect(textarea.element.value).toBe('Hello, World!')
+	})
+
+	it('removes the dragover class when dragleave is triggered', async () => {
+		const wrapper = mount(ChatBotInput, {
+			props: { ...props }
+		})
+
+		const footer = wrapper.find('.q-chatbot__footer')
+		await footer.trigger('dragover')
+		expect(footer.classes()).toContain('drag-over')
+
+		await footer.trigger('dragleave')
+		expect(footer.classes()).not.toContain('drag-over')
+	})
+
+	it('prevents drop if input is disabled', async () => {
+		const wrapper = mount(ChatBotInput, {
+			props: { ...props, disabled: true }
+		})
+
+		const footer = wrapper.find('.q-chatbot__footer')
+		await footer.trigger('drop')
+
+		expect(wrapper.find('img').exists()).toBe(false)
+		expect(wrapper.find('.q-chatbot__file-preview').exists()).toBe(false)
+	})
+
+	it('prevents drop if theres is no files', async () => {
+		const wrapper = mount(ChatBotInput, {
+			props: { ...props }
+		})
+
+		const footer = wrapper.find('.q-chatbot__footer')
+		await footer.trigger('drop', {
+			dataTransfer: {}
+		})
+
+		expect(wrapper.find('img').exists()).toBe(false)
+		expect(wrapper.find('.q-chatbot__file-preview').exists()).toBe(false)
+	})
+
+	it('accepts image files on drop', 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' })
+
+		await footer.trigger('drop', {
+			dataTransfer: {
+				files: [file]
+			}
+		})
+
+		expect(wrapper.find('img').exists()).toBe(true)
+		expect(wrapper.find('.q-chatbot__file-preview').exists()).toBe(true)
+	})
+
+	it('does not send empty prompts', async () => {
+		const wrapper = mount(ChatBotInput, {
+			props: { ...props, userPrompt: '' }
+		})
+
+		const sendButton = wrapper.find('.q-chatbot__send')
+		await sendButton.trigger('click')
+
+		expect(wrapper.emitted()['send-message']).toBeFalsy()
+	})
+
+	it('does not send prompts when loading', async () => {
+		const wrapper = mount(ChatBotInput, {
+			props: { ...props, userPrompt: 'Hello', loading: true }
+		})
+
+		const sendButton = wrapper.find('.q-chatbot__send')
+		await sendButton.trigger('click')
+
+		expect(wrapper.emitted()['send-message']).toBeFalsy()
+	})
+
+	it('does not send prompts when disabled', async () => {
+		const wrapper = mount(ChatBotInput, {
+			props: { ...props, userPrompt: 'Hello', disabled: true }
+		})
+
+		const sendButton = wrapper.find('.q-chatbot__send')
+		await sendButton.trigger('click')
+
+		expect(wrapper.emitted()['send-message']).toBeFalsy()
+	})
+
+	it('sends the prompt when the send button is clicked', async () => {
+		const wrapper = mount(ChatBotInput, {
+			props: { ...props, userPrompt: 'Hello' }
+		})
+
+		const sendButton = wrapper.find('.q-chatbot__send')
+		await sendButton.trigger('click')
+
+		expect(wrapper.emitted()['send-message']).toBeTruthy()
+		expect(wrapper.emitted()['send-message'][0]).toEqual(['Hello'])
+	})
+
+	it('sends the prompt when Enter key is pressed', async () => {
+		const wrapper = mount(ChatBotInput, {
+			props: { ...props, userPrompt: 'Hello' }
+		})
+
+		const textArea = wrapper.find('textarea')
+		await textArea.trigger('keyup.enter')
+
+		expect(wrapper.emitted()['send-message']).toBeTruthy()
+		expect(wrapper.emitted()['send-message'][0]).toEqual(['Hello'])
+	})
+
+	it('sends a prompt with image attached', async () => {
+		const wrapper = mount(ChatBotInput, {
+			props: { ...props, userPrompt: 'Hello' }
+		})
+
+		const file = new File(['dummy content'], 'example.png', { type: 'image/png' })
+		const dataTransfer = new DataTransfer()
+		dataTransfer.items.add(file)
+
+		// Simulate the drop event
+		const footer = wrapper.find('.q-chatbot__footer')
+		await footer.trigger('drop', {
+			dataTransfer
+		})
+
+		// Simulate clicking the send button
+		const sendButton = wrapper.find('.q-chatbot__send')
+		await sendButton.trigger('click')
+
+		// Assert that the event was emitted with the correct payload
+		expect(wrapper.emitted()['send-message']).toBeTruthy()
+		expect(wrapper.emitted()['send-message'][0]).toEqual([
+			'Hello',
+			{
+				fileData: file,
+				previewUrl: expect.stringContaining('blob:')
+			}
+		])
+	})
+
+	it('removes the selected image when the remove button is clicked', async () => {
+		const wrapper = mount(ChatBotInput, {
+			props: { ...props, userPrompt: 'Hello' }
+		})
+
+		const file = new File(['dummy content'], 'example.png', { type: 'image/png' })
+		const dataTransfer = new DataTransfer()
+		dataTransfer.items.add(file)
+
+		// Simulate the drop event
+		const footer = wrapper.find('.q-chatbot__footer')
+		await footer.trigger('drop', {
+			dataTransfer
+		})
+
+		expect(wrapper.find('img').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-file')
+		await removeButton.trigger('click')
+
+		expect(wrapper.find('img').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 () => {
+		const wrapper = mount(ChatBotInput, {
+			props: { ...props }
+		})
+
+		const uploadButton = wrapper.find('.q-chatbot__upload')
+		const fileInput = wrapper.find<HTMLInputElement>('#file-upload')
+
+		// Mock the click method on the file input
+		const clickMock = vi.fn()
+		fileInput.element.click = clickMock
+
+		// Trigger the upload button click
+		await uploadButton.trigger('click')
+
+		expect(clickMock).toHaveBeenCalled()
+	})
+
+	it('handles image upload via the hidden input', async () => {
+		const wrapper = mount(ChatBotInput, {
+			props: { ...props }
+		})
+		const fileInput = wrapper.find<HTMLInputElement>('#file-upload')
+		const file = new File(['dummy content'], 'example.png', { type: 'image/png' })
+
+		// 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(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

@@ -0,0 +1,25 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ChatBotInput > renders correctly with default props 1`] = `
+"<div class="q-label"><label>What can I help with?</label></div>
+<div class="q-chatbot__footer">
+  <div class="q-chatbot__input-wrapper">
+    <!--v-if-->
+    <div class="q-chatbot__input">
+      <div class="q-field q-field--block q-text-area">
+        <!--v-if-->
+        <div class="q-field__control">
+          <!--v-if--><textarea id="uid-1" class="q-text-area__input" rows="2" resize="none" wrap="soft"></textarea>
+          <!--v-if-->
+        </div>
+        <!--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>"
+`;

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

@@ -1,33 +1,33 @@
 export type ChatBotInputProps = {
-    /**
-     * If the footer is disabled or not
-     */
-    disabled?: boolean
+	/**
+	 * If the footer is disabled or not
+	 */
+	disabled?: boolean
 
-    /**
-     * If the footer is loading or not
-     */
-    loading?: boolean
+	/**
+	 * If the footer is loading or not
+	 */
+	loading?: boolean
 
-    /**
-     * The message to be sent
-     */
-    userPrompt?: string
+	/**
+	 * The message to be sent
+	 */
+	userPrompt?: string
 
-    /**
-     * The agent to be used
-     */
-    agentId?: string
+	/**
+	 * The agent to be used
+	 */
+	agentId?: string
 }
 
-export type ChatBotImage = {
-    /**
-     * The image URL
-     */
-    previewUrl: string
+export type ChatBotFile = {
+	/**
+	 * The preview URL for the file (if it's an image)
+	 */
+	previewUrl?: string
 
-    /**
-     * The file object
-     */
-    file: File
+	/**
+	 * The file object
+	 */
+	fileData: File
 }

package/src/components/ChatBotMessage/ChatBotMessage.vue

@@ -1,139 +1,164 @@
 <template>
-    <div class="q-chatbot__message-container">
-        <q-icon
-            type="img"
-            :icon="messageImage"
-            :alt="texts.senderImage"
-            class="q-chatbot__profile" />
-
-        <div class="q-chatbot__message-wrapper">
-            <div
-                v-if="props.imagePreviewUrl && props.imagePreviewUrl.length > 0"
-                class="q-chatbot__image-preview">
-                <img
-                    :src="props.imagePreviewUrl"
-                    :alt="texts.imagePreview" />
-            </div>
-            <div class="q-chatbot__message">
-                <pulse-dots v-if="loading" />
-                <template
-                    v-else-if="
-                        props.sender === 'bot' && props.fields.length > 0
-                    ">
-                    <field-preview
-                        v-for="(field, index) in props.fields"
-                        class="q-chatbot__text"
-                        :key="index"
-                        :text="field.text || ''"
-                        :name="field.name"
-                        :type="field.type"
-                        :disabled="loading"
-                        @apply="(text) => applyField(text, field)" />
-                </template>
-                <template v-else>
-                    <markdown-render
-                        v-if="props.sender === 'bot'"
-                        class="q-chatbot__text"
-                        :source="props.message || ''" />
-                    <div
-                        v-else
-                        class="q-chatbot__text">
-                        {{ props.message }}
-                    </div>
-                </template>
-            </div>
-        </div>
-
-        <chat-bot-message-buttons
-            :showButtons="isBotMessageAndNotDefault"
-            :loading="props.loading"
-            :date-format="props.dateFormat"
-            @copy-response="copyResponse"
-            @submit-feedback="onSubmitFeedback"
-            @apply-all="applyAllFields" />
-    </div>
+	<div class="q-chatbot__message-container">
+		<q-icon
+			type="img"
+			:icon="messageImage"
+			:alt="texts.senderImage"
+			class="q-chatbot__profile" />
+
+		<div class="q-chatbot__message-wrapper">
+			<div
+				v-if="isImageFile"
+				class="q-chatbot__image-preview">
+				<img
+					: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">
+					<field-preview
+						v-for="(field, index) in props.fields"
+						:key="index"
+						class="q-chatbot__text"
+						:text="field.text || ''"
+						:name="field.name"
+						:type="field.type"
+						:disabled="loading"
+						@apply="(text) => applyField(text, field)" />
+				</template>
+				<template v-else>
+					<markdown-render
+						v-if="props.sender === 'bot'"
+						class="q-chatbot__text"
+						:source="props.message || ''" />
+					<div
+						v-else
+						class="q-chatbot__text q-chatbot__user-text">
+						{{ props.message }}
+					</div>
+				</template>
+			</div>
+		</div>
+
+		<chat-bot-message-buttons
+			:show-buttons="isBotMessageAndNotDefault"
+			:loading="props.loading"
+			:date-format="props.dateFormat"
+			@copy-response="copyResponse"
+			@submit-feedback="onSubmitFeedback"
+			@apply-all="applyAllFields" />
+	</div>
 </template>
 
 <script setup lang="ts">
-    // Utils
-    import { computed } from 'vue'
-    import { QIcon } from '@quidgest/ui/components'
-
-    // Types
-    import type { ChatBotMessageProps } from './'
-    import { AppliedFieldData, FieldData } from '../ChatBot/types'
-
-    // Composables
-    import { useTexts } from '@/composables/useTexts'
-    import { useChatApi } from '@/composables/useChatApi'
-
-    // Components
-    import { MarkdownRender } from '../MarkdownRender'
-    import { FieldPreview } from '../FieldPreview'
-    import { ChatBotMessageButtons } from './'
-    import PulseDots from '@/components/PulseDots/PulseDots.vue'
-    import { parseFieldValue } from '@/utils/helper'
-
-    const emits = defineEmits<{
-        (e: 'apply-fields', fields: AppliedFieldData[]): void
-    }>()
-
-    const texts = useTexts()
-
-    const props = withDefaults(defineProps<ChatBotMessageProps>(), {
-        sender: 'user',
-        userImage: undefined,
-        date: () => new Date(),
-        fields: () => []
-    })
-
-    const { handleFeedback } = useChatApi(props.apiEndpoint)
-
-    const isBotMessageAndNotDefault = computed(() => {
-        return (
-            props.sender === 'bot' &&
-            !Object.values(texts || {}).includes(props.message || '') &&
-            !props.isWelcomeMessage
-        )
-    })
-
-    const messageImage = computed(() =>
-        props.sender === 'bot' ? props.chatbotImage : props.userImage
-    )
-
-    function copyResponse() {
-        if (!props.message) return
-
-        navigator.clipboard
-            .writeText(props.message)
-            .then(() => {
-                console.log('Response copied to clipboard')
-            })
-            .catch((err) => {
-                console.error('Failed to copy response: ', err)
-            })
-    }
-
-    function applyField(text: unknown, field: FieldData) {
-        emits('apply-fields', [{ name: field.name, text }])
-    }
-
-    function applyAllFields() {
-        if (!props.fields || props.fields.length === 0) return
-
-        const fieldsToApply = props.fields.map((field) => {
-            return {
-                name: field.name,
-                text: parseFieldValue(field.type, field.text)
-            }
-        })
-
-        emits('apply-fields', fieldsToApply)
-    }
-
-    function onSubmitFeedback(feedback: number, comment: string) {
-        if (feedback === null || comment === null || !props.sessionID) return
-
-        handleFeedback(feedback, comment, props.sessionID)
-    }
+	// Utils
+	import { computed } from 'vue'
+	import { QIcon } from '@quidgest/ui/components'
+
+	// Types
+	import type { ChatBotMessageProps } from './'
+	import { AppliedFieldData, FieldData } from '../ChatBot/types'
+
+	// Composables
+	import { useTexts } from '@/composables/useTexts'
+	import { useChatApi } from '@/composables/useChatApi'
+
+	// Components
+	import { MarkdownRender } from '@/components/MarkdownRender'
+	import { FieldPreview } from '../FieldPreview'
+	import { ChatBotMessageButtons } from './'
+	import PulseDots from '@/components/PulseDots/PulseDots.vue'
+	import { parseFieldValue } from '@/utils/parseFieldValue'
+
+	const props = withDefaults(defineProps<ChatBotMessageProps>(), {
+		sender: 'user',
+		userImage: undefined,
+		date: () => new Date(),
+		fields: () => []
+	})
+
+	const emit = defineEmits<{
+		(e: 'apply-fields', fields: AppliedFieldData[]): void
+	}>()
+
+	const texts = useTexts()
+
+	const { handleFeedback } = useChatApi(props.apiEndpoint)
+
+	const isBotMessageAndNotDefault = computed(() => {
+		return (
+			props.sender === 'bot' &&
+			!Object.values(texts || {}).includes(props.message || '') &&
+			!props.isWelcomeMessage
+		)
+	})
+
+	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
+
+		navigator.clipboard
+			.writeText(props.message)
+			.then(() => {
+				console.log('Response copied to clipboard')
+			})
+			.catch((err) => {
+				console.error('Failed to copy response: ', err)
+			})
+	}
+
+	function applyField(text: unknown, field: FieldData) {
+		emit('apply-fields', [{ name: field.name, text }])
+	}
+
+	function applyAllFields() {
+		if (!props.fields || props.fields.length === 0) return
+
+		const fieldsToApply = props.fields.map((field) => {
+			return {
+				name: field.name,
+				text: parseFieldValue(field.type, field.text)
+			}
+		})
+
+		emit('apply-fields', fieldsToApply)
+	}
+
+	function onSubmitFeedback(feedback: number, comment: string) {
+		if (feedback === null || comment === null || !props.sessionID) return
+
+		handleFeedback(feedback, comment, props.sessionID)
+	}
 </script>