@quidgest/chatbot 0.5.1 → 0.5.3

package/src/components/ChatBot/types.ts

@@ -1,55 +1,57 @@
+import { ChatBotFile } from '../ChatBotInput'
+
 export type ChatBotProps = {
-    apiEndpoint?: string
-    controllerEndpoint?: string
-    username: string
-    projectPath: string
-    userImage?: string
-    chatbotImage?: string
-    dateFormat: string
-    agentData?: AgentData
-    availableAgents?: AvailableAgents[]
+	apiEndpoint?: string
+	controllerEndpoint?: string
+	username: string
+	projectPath: string
+	userImage?: string
+	chatbotImage?: string
+	dateFormat: string
+	agentData?: AgentData
+	availableAgents?: AvailableAgents[]
 }
 
 export type AvailableAgents = {
-    key: string
-    value: string
-    formId: string
+	key: string
+	value: string
+	formId: string
 }
 
 export type AgentData = {
-    id: string
-    jobId: string
-    formId: string
+	id: string
+	jobId: string
+	formId: string
 }
 
 export type FieldData = {
-    name: string
-    type: string
-    text: string
-    applied?: boolean
+	name: string
+	type: string
+	text: string
+	applied?: boolean
 }
 
 export type AppliedFieldData = {
-    name: string
-    text: unknown
+	name: string
+	text: unknown
 }
 
 export type ChatMessage = {
-    id: number
-    message: string
-    date: Date
-    sender: ChatBotMessageSender
-    sessionID: string
-    imagePreviewUrl?: string
-    isWelcomeMessage?: boolean
-    fields?: FieldData[]
+	id: number
+	message: string
+	date: Date
+	sender: ChatBotMessageSender
+	sessionID: string
+	file?: ChatBotFile
+	isWelcomeMessage?: boolean
+	fields?: FieldData[]
 }
 
 export type ChatBotMessageContent = {
-    content: string
-    type: string
-    sessionID: string
-    imageUrl?: string
+	content: string
+	type: string
+	sessionID: string
+	imageUrl?: string
 }
 
 export type ChatBotMessageSender = 'bot' | 'user'

package/src/components/ChatBotInput/ChatBotInput.vue

@@ -1,195 +1,193 @@
 <template>
-    <q-label :label="texts.inputLabel" />
-    <div
-        class="q-chatbot__footer"
-        @dragover.prevent="onDragOver"
-        @dragleave.prevent="onDragLeave"
-        @drop.prevent="onDrop"
-        :class="chatBotFooterClasses">
-        <div class="q-chatbot__input-wrapper">
-            <div
-                v-if="imagePreviewUrl"
-                class="q-chatbot__image-preview">
-                <img
-                    :src="imagePreviewUrl"
-                    tabindex="0"
-                    alt="Image preview" />
-                <q-button
-                    class="q-chatbot__remove-image"
-                    tabindex="0"
-                    flat
-                    round
-                    @click="removeImage">
-                    <q-icon icon="bin" />
-                </q-button>
-            </div>
-            <div class="q-chatbot__input">
-                <q-text-area
-                    v-model="userPrompt"
-                    size="block"
-                    autosize
-                    resize="none"
-                    :rows="2"
-                    :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"
-                type="file"
-                ref="imageInput"
-                @change="handleImageUpload"
-                :accept="acceptedImageTypes"
-                class="hidden-input" />
-
-            <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>
+	<q-label :label="texts.inputLabel" />
+	<div
+		class="q-chatbot__footer"
+		:class="chatBotFooterClasses"
+		@dragover.prevent="onDragOver"
+		@dragleave.prevent="onDragLeave"
+		@drop.prevent="onDrop">
+		<div class="q-chatbot__input-wrapper">
+			<div
+				v-if="selectedFile"
+				class="q-chatbot__file-preview">
+				<img
+					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-file"
+					tabindex="0"
+					flat
+					round
+					@click="removeFile">
+					<q-icon icon="remove" />
+				</q-button>
+			</div>
+			<div class="q-chatbot__input">
+				<q-text-area
+					v-model="userPrompt"
+					size="block"
+					autosize
+					resize="none"
+					:rows="2"
+					:disabled="props.disabled"
+					@keyup.enter="sendMessage" />
+			</div>
+			<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>
 
 <script setup lang="ts">
-    // Components
-    import { QLabel } from '@quidgest/ui/components'
-
-    // Composables
-    import { useTexts } from '@/composables/useTexts'
-
-    // Utils
-    import { ref, computed } from 'vue'
-
-    // Types
-    import { ChatBotInputProps, ChatBotImage } from './types'
-
-    const texts = useTexts()
-
-    const props = defineProps<ChatBotInputProps>()
-
-    const imageInput = ref<HTMLInputElement | null>(null)
-    const imagePreviewUrl = ref<string>('')
-    const acceptedImageTypes = computed(() => '.png, .jpeg, .jpg, .svg, .webp')
-    const hasSelectedImage = ref<boolean>(false)
-
-    const isDragging = ref(false)
-    const userPrompt = ref(props.userPrompt ?? '')
-
-    const emits = defineEmits<{
-        (e: 'sendMessage', prompt: string, image?: ChatBotImage): void
-    }>()
-
-    const isSendButtonDisabled = computed(() => {
-        return (
-            props.disabled ||
-            props.loading ||
-            userPrompt.value.trim().length === 0
-        )
-    })
-
-    function onDragOver(event: DragEvent) {
-        event.preventDefault()
-        if (!props.disabled) {
-            isDragging.value = true
-        }
-    }
-
-    const chatBotFooterClasses = computed(() => {
-        return {
-            'q-chatbot__footer-disabled': props.disabled,
-            'drag-over': isDragging.value && !hasSelectedImage.value
-        }
-    })
-
-    function onDragLeave(event: DragEvent) {
-        event.preventDefault()
-        isDragging.value = false
-    }
-
-    function onDrop(event: DragEvent) {
-        event.preventDefault()
-        isDragging.value = false
-
-        if (props.disabled || hasSelectedImage.value) return
-
-        const files = event.dataTransfer?.files
-        if (!files) return
-
-        const file = files[0]
-        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
-        }
-    }
-
-    function sendMessage() {
-        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
-            }
-
-            emits('sendMessage', userPrompt.value, fileData)
-            removeImage()
-        } else emits('sendMessage', userPrompt.value)
-
-        userPrompt.value = ''
-    }
-
-    function removeImage() {
-        imagePreviewUrl.value = ''
-
-        if (imageInput.value) {
-            imageInput.value.value = ''
-            imageInput.value.files = null
-        }
-        hasSelectedImage.value = false
-    }
-
-    function triggerImageUpload() {
-        imageInput.value?.click()
-    }
-
-    function handleImageUpload(event: Event) {
-        // Store the selected image in imageInput
-        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
-        }
-    }
+	// Components
+	import { QLabel, QButton, QTextArea, QIcon } from '@quidgest/ui/components'
+
+	// Composables
+	import { useTexts } from '@/composables/useTexts'
+
+	// Utils
+	import { ref, computed } from 'vue'
+
+	// Types
+	import type { ChatBotInputProps, ChatBotFile } from './'
+
+	const props = defineProps<ChatBotInputProps>()
+
+	const emit = defineEmits<{
+		'send-message': [prompt: string, file?: ChatBotFile]
+	}>()
+
+	const texts = useTexts()
+
+	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(() => {
+		return props.disabled || props.loading || userPrompt.value.trim().length === 0
+	})
+
+	function onDragOver(event: DragEvent) {
+		event.preventDefault()
+		if (!props.disabled) {
+			isDragging.value = true
+		}
+	}
+
+	const chatBotFooterClasses = computed(() => {
+		return {
+			'q-chatbot__footer-disabled': props.disabled,
+			'drag-over': isDragging.value && !selectedFile.value
+		}
+	})
+
+	function onDragLeave(event: DragEvent) {
+		event.preventDefault()
+		isDragging.value = false
+	}
+
+	function onDrop(event: DragEvent) {
+		event.preventDefault()
+		isDragging.value = false
+
+		if (props.disabled || selectedFile.value) return
+
+		const files = event.dataTransfer?.files
+		if (!files) return
+		handleFileSelection(files[0])
+	}
+
+	function handleFileSelection(file: File) {
+		selectedFile.value = file
+		if (file.type.startsWith('image/')) {
+			filePreviewUrl.value = URL.createObjectURL(file)
+		} else {
+			filePreviewUrl.value = ''
+		}
+	}
+
+	function sendMessage() {
+		if (userPrompt.value.trim() === '' || props.loading || props.disabled) return
+
+		// Check if an image is selected
+		if (selectedFile.value) {
+			const fileData: ChatBotFile = {
+				fileData: selectedFile.value,
+				previewUrl: filePreviewUrl.value ?? ''
+			}
+
+			emit('send-message', userPrompt.value, fileData)
+			removeFile()
+		} else emit('send-message', userPrompt.value)
+
+		userPrompt.value = ''
+	}
+
+	function removeFile() {
+		selectedFile.value = null
+		filePreviewUrl.value = ''
+
+		if (fileInput.value) {
+			fileInput.value.value = ''
+			fileInput.value.files = null
+		}
+	}
+
+	function triggerImageUpload() {
+		fileInput.value?.click()
+	}
+
+	function handleFileUpload(event: Event) {
+		const target = event.target as HTMLInputElement
+
+		if (target.files?.[0]) handleFileSelection(target.files[0])
+	}
 </script>