@quidgest/chatbot 0.5.3-dev.0 → 0.5.3

package/src/components/ChatBotInput/ChatBotInput.vue

@@ -8,19 +8,30 @@
 		@drop.prevent="onDrop">
 		<div class="q-chatbot__input-wrapper">
 			<div
-				v-if="imagePreviewUrl"
-				class="q-chatbot__image-preview">
+				v-if="selectedFile"
+				class="q-chatbot__file-preview">
 				<img
-					:src="imagePreviewUrl"
+					v-if="isImageFile"
+					class="q-chatbot__image-preview"
+					:src="filePreviewUrl"
 					tabindex="0"
 					:alt="texts.imagePreview" />
+				<div
+					v-else
+					class="q-chatbot__file-preview"
+					tabindex="0">
+					<q-icon
+						icon="file"
+						class="q-chatbot__file-icon" />
+					<span class="q-chatbot__file-name">{{ selectedFile.name }}</span>
+				</div>
 				<q-button
-					class="q-chatbot__remove-image"
+					class="q-chatbot__remove-file"
 					tabindex="0"
 					flat
 					round
-					@click="removeImage">
-					<q-icon icon="bin" />
+					@click="removeFile">
+					<q-icon icon="remove" />
 				</q-button>
 			</div>
 			<div class="q-chatbot__input">
@@ -33,34 +44,34 @@
 					:disabled="props.disabled"
 					@keyup.enter="sendMessage" />
 			</div>
-		</div>
-		<div class="q-chatbot__send-container">
-			<q-button
-				:title="texts.imageUpload"
-				class="q-chatbot__upload"
-				:disabled="props.disabled || props.loading || hasSelectedImage"
-				@click="triggerImageUpload">
-				<q-icon icon="upload" />
-			</q-button>
-
-			<!-- Hidden file input -->
-			<input
-				id="image-upload"
-				ref="imageInput"
-				type="file"
-				:accept="acceptedImageTypes"
-				class="hidden-input"
-				@change="handleImageUpload" />
-
-			<q-button
-				:title="texts.sendMessage"
-				variant="bold"
-				class="q-chatbot__send"
-				:disabled="isSendButtonDisabled"
-				:readonly="isSendButtonDisabled"
-				@click="sendMessage">
-				<q-icon icon="send" />
-			</q-button>
+			<div class="q-chatbot__send-container">
+				<q-button
+					:title="texts.imageUpload"
+					class="q-chatbot__upload"
+					:disabled="props.disabled || props.loading || !!selectedFile"
+					@click="triggerImageUpload">
+					<q-icon icon="upload" />
+				</q-button>
+
+				<!-- Hidden file input -->
+				<input
+					id="file-upload"
+					ref="fileInput"
+					type="file"
+					:accept="acceptedFileTypes"
+					class="hidden-input"
+					@change="handleFileUpload" />
+
+				<q-button
+					:title="texts.sendMessage"
+					variant="bold"
+					class="q-chatbot__send"
+					:disabled="isSendButtonDisabled"
+					:readonly="isSendButtonDisabled"
+					@click="sendMessage">
+					<q-icon icon="send" />
+				</q-button>
+			</div>
 		</div>
 	</div>
 </template>
@@ -76,22 +87,28 @@
 	import { ref, computed } from 'vue'
 
 	// Types
-	import { ChatBotInputProps, ChatBotImage } from './types'
+	import type { ChatBotInputProps, ChatBotFile } from './'
 
 	const props = defineProps<ChatBotInputProps>()
 
 	const emit = defineEmits<{
-		(e: 'send-message', prompt: string, image?: ChatBotImage): void
+		'send-message': [prompt: string, file?: ChatBotFile]
 	}>()
 
 	const texts = useTexts()
 
-	const imageInput = ref<HTMLInputElement | null>(null)
-	const imagePreviewUrl = ref<string>('')
-	const acceptedImageTypes = computed(() => '.png, .jpeg, .jpg, .svg, .webp')
-	const hasSelectedImage = ref<boolean>(false)
-
+	const fileInput = ref<HTMLInputElement | null>(null)
+	const selectedFile = ref<File | null>(null)
+	const filePreviewUrl = ref<string>('')
 	const isDragging = ref(false)
+
+	const acceptedFileTypes = computed(() => '.png,.jpeg,.jpg,.svg,.webp,.pdf,.doc,.docx')
+	const isImageFile = computed(() => {
+		if (!selectedFile.value) return false
+
+		return selectedFile.value.type.startsWith('image/') ?? false
+	})
+
 	const userPrompt = ref(props.userPrompt ?? '')
 
 	const isSendButtonDisabled = computed(() => {
@@ -108,7 +125,7 @@
 	const chatBotFooterClasses = computed(() => {
 		return {
 			'q-chatbot__footer-disabled': props.disabled,
-			'drag-over': isDragging.value && !hasSelectedImage.value
+			'drag-over': isDragging.value && !selectedFile.value
 		}
 	})
 
@@ -121,22 +138,19 @@
 		event.preventDefault()
 		isDragging.value = false
 
-		if (props.disabled || hasSelectedImage.value) return
+		if (props.disabled || selectedFile.value) return
 
 		const files = event.dataTransfer?.files
 		if (!files) return
+		handleFileSelection(files[0])
+	}
 
-		const file = files[0]
+	function handleFileSelection(file: File) {
+		selectedFile.value = file
 		if (file.type.startsWith('image/')) {
-			if (!imageInput.value) return
-
-			// Create a new FileList-like object
-			const dataTransfer = new DataTransfer()
-			dataTransfer.items.add(file)
-			imageInput.value.files = dataTransfer.files
-
-			imagePreviewUrl.value = URL.createObjectURL(file)
-			hasSelectedImage.value = true
+			filePreviewUrl.value = URL.createObjectURL(file)
+		} else {
+			filePreviewUrl.value = ''
 		}
 	}
 
@@ -144,43 +158,36 @@
 		if (userPrompt.value.trim() === '' || props.loading || props.disabled) return
 
 		// Check if an image is selected
-		if (imageInput.value && imageInput.value.files && imageInput.value.files.length > 0) {
-			const file = imageInput.value.files[0]
-
-			const fileData: ChatBotImage = {
-				file: file,
-				previewUrl: imagePreviewUrl.value
+		if (selectedFile.value) {
+			const fileData: ChatBotFile = {
+				fileData: selectedFile.value,
+				previewUrl: filePreviewUrl.value ?? ''
 			}
 
 			emit('send-message', userPrompt.value, fileData)
-			removeImage()
+			removeFile()
 		} else emit('send-message', userPrompt.value)
 
 		userPrompt.value = ''
 	}
 
-	function removeImage() {
-		imagePreviewUrl.value = ''
+	function removeFile() {
+		selectedFile.value = null
+		filePreviewUrl.value = ''
 
-		if (imageInput.value) {
-			imageInput.value.value = ''
-			imageInput.value.files = null
+		if (fileInput.value) {
+			fileInput.value.value = ''
+			fileInput.value.files = null
 		}
-		hasSelectedImage.value = false
 	}
 
 	function triggerImageUpload() {
-		imageInput.value?.click()
+		fileInput.value?.click()
 	}
 
-	function handleImageUpload(event: Event) {
-		// Store the selected image in imageInput
+	function handleFileUpload(event: Event) {
 		const target = event.target as HTMLInputElement
-		imageInput.value = target
 
-		if (target.files && target.files[0]) {
-			imagePreviewUrl.value = URL.createObjectURL(target.files[0])
-			hasSelectedImage.value = true
-		}
+		if (target.files?.[0]) handleFileSelection(target.files[0])
 	}
 </script>

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

@@ -7,13 +7,6 @@ import { describe, expect, it, vi } from 'vitest'
 
 // Types
 import type { ChatBotInputProps } from '..'
-import type { ComponentPublicInstance } from 'vue'
-
-type ChatBotInputVm = ComponentPublicInstance<{
-	imageInput: HTMLInputElement | null
-	imagePreviewUrl: string
-	hasSelectedImage: boolean
-}>
 
 describe('ChatBotInput', () => {
 	const props: ChatBotInputProps = {
@@ -81,7 +74,7 @@ describe('ChatBotInput', () => {
 		await footer.trigger('drop')
 
 		expect(wrapper.find('img').exists()).toBe(false)
-		expect(wrapper.find('.q-chatbot__image-preview').exists()).toBe(false)
+		expect(wrapper.find('.q-chatbot__file-preview').exists()).toBe(false)
 	})
 
 	it('prevents drop if theres is no files', async () => {
@@ -95,7 +88,7 @@ describe('ChatBotInput', () => {
 		})
 
 		expect(wrapper.find('img').exists()).toBe(false)
-		expect(wrapper.find('.q-chatbot__image-preview').exists()).toBe(false)
+		expect(wrapper.find('.q-chatbot__file-preview').exists()).toBe(false)
 	})
 
 	it('accepts image files on drop', async () => {
@@ -113,32 +106,7 @@ describe('ChatBotInput', () => {
 		})
 
 		expect(wrapper.find('img').exists()).toBe(true)
-		expect(wrapper.find('.q-chatbot__image-preview').exists()).toBe(true)
-	})
-
-	it('does not drop image if hidden input does not exist', 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' })
-
-		// Manually set imageInput to null to simulate the missing input
-		// In reality, this should not happen as the input is always rendered but hidden
-		const vm = wrapper.vm as ChatBotInputVm
-		vm.imageInput = null
-
-		// Trigger the drop event
-		await footer.trigger('drop', {
-			dataTransfer: {
-				files: [file]
-			}
-		})
-
-		// Assert that no image preview is created
-		expect(wrapper.find('img').exists()).toBe(false)
-		expect(wrapper.find('.q-chatbot__image-preview').exists()).toBe(false)
+		expect(wrapper.find('.q-chatbot__file-preview').exists()).toBe(true)
 	})
 
 	it('does not send empty prompts', async () => {
@@ -222,7 +190,7 @@ describe('ChatBotInput', () => {
 		expect(wrapper.emitted()['send-message'][0]).toEqual([
 			'Hello',
 			{
-				file: file,
+				fileData: file,
 				previewUrl: expect.stringContaining('blob:')
 			}
 		])
@@ -244,14 +212,14 @@ describe('ChatBotInput', () => {
 		})
 
 		expect(wrapper.find('img').exists()).toBe(true)
-		expect(wrapper.find('.q-chatbot__image-preview').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-image')
+		const removeButton = wrapper.find('.q-chatbot__remove-file')
 		await removeButton.trigger('click')
 
 		expect(wrapper.find('img').exists()).toBe(false)
-		expect(wrapper.find('.q-chatbot__image-preview').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 () => {
@@ -260,7 +228,7 @@ describe('ChatBotInput', () => {
 		})
 
 		const uploadButton = wrapper.find('.q-chatbot__upload')
-		const fileInput = wrapper.find<HTMLInputElement>('#image-upload')
+		const fileInput = wrapper.find<HTMLInputElement>('#file-upload')
 
 		// Mock the click method on the file input
 		const clickMock = vi.fn()
@@ -276,7 +244,7 @@ describe('ChatBotInput', () => {
 		const wrapper = mount(ChatBotInput, {
 			props: { ...props }
 		})
-		const fileInput = wrapper.find<HTMLInputElement>('#image-upload')
+		const fileInput = wrapper.find<HTMLInputElement>('#file-upload')
 		const file = new File(['dummy content'], 'example.png', { type: 'image/png' })
 
 		// Simulate selecting a file
@@ -287,6 +255,25 @@ describe('ChatBotInput', () => {
 		await fileInput.trigger('change')
 
 		expect(wrapper.find('img').exists()).toBe(true)
-		expect(wrapper.find('.q-chatbot__image-preview').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

@@ -15,11 +15,11 @@ exports[`ChatBotInput > renders correctly with default props 1`] = `
         <!--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 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="image-upload" type="file" accept=".png, .jpeg, .jpg, .svg, .webp" 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>"
 `;

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

@@ -20,14 +20,14 @@ export type ChatBotInputProps = {
 	agentId?: string
 }
 
-export type ChatBotImage = {
+export type ChatBotFile = {
 	/**
-	 * The image URL
+	 * The preview URL for the file (if it's an image)
 	 */
-	previewUrl: string
+	previewUrl?: string
 
 	/**
 	 * The file object
 	 */
-	file: File
+	fileData: File
 }

package/src/components/ChatBotMessage/ChatBotMessage.vue

@@ -8,12 +8,29 @@
 
 		<div class="q-chatbot__message-wrapper">
 			<div
-				v-if="props.imagePreviewUrl && props.imagePreviewUrl.length > 0"
+				v-if="isImageFile"
 				class="q-chatbot__image-preview">
 				<img
-					:src="props.imagePreviewUrl"
+					: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">
@@ -25,7 +42,6 @@
 						:name="field.name"
 						:type="field.type"
 						:disabled="loading"
-						@regenerate="() => emit('regenerate', field.name)"
 						@apply="(text) => applyField(text, field)" />
 				</template>
 				<template v-else>
@@ -35,7 +51,7 @@
 						:source="props.message || ''" />
 					<div
 						v-else
-						class="q-chatbot__text">
+						class="q-chatbot__text q-chatbot__user-text">
 						{{ props.message }}
 					</div>
 				</template>
@@ -58,8 +74,8 @@
 	import { QIcon } from '@quidgest/ui/components'
 
 	// Types
+	import type { ChatBotMessageProps } from './'
 	import { AppliedFieldData, FieldData } from '../ChatBot/types'
-	import type { ChatBotMessageProps } from './types'
 
 	// Composables
 	import { useTexts } from '@/composables/useTexts'
@@ -81,7 +97,6 @@
 
 	const emit = defineEmits<{
 		(e: 'apply-fields', fields: AppliedFieldData[]): void
-		(e: 'regenerate', fieldName: string): void
 	}>()
 
 	const texts = useTexts()
@@ -96,10 +111,21 @@
 		)
 	})
 
+	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
 
@@ -114,7 +140,7 @@
 	}
 
 	function applyField(text: unknown, field: FieldData) {
-		emit('apply-fields', [{ id: field.id, text }])
+		emit('apply-fields', [{ name: field.name, text }])
 	}
 
 	function applyAllFields() {
@@ -122,7 +148,7 @@
 
 		const fieldsToApply = props.fields.map((field) => {
 			return {
-				id: field.id,
+				name: field.name,
 				text: parseFieldValue(field.type, field.text)
 			}
 		})