@quidgest/chatbot 0.5.3-dev.0 → 0.5.4

package/dist/style.css

@@ -1 +1 @@
-.markdown-renderer pre,.markdown-renderer code{white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:auto}.markdown-renderer pre{position:relative;background-color:#f5f5f5;border:1px solid #e0e0e0;border-radius:6px;padding:.75rem 1rem;font-size:.875rem}.markdown-renderer code{padding:.2rem .4rem;border-radius:4px;font-size:.875rem}.q-field-preview{position:relative;display:flex;flex-direction:column;margin:1rem .25rem}.q-field-preview__toolbar{z-index:1;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:.1rem .2rem}.q-field-preview__content{position:relative;background-color:#f5f5f5;border:1px solid #e0e0e0;border-radius:6px;padding:.75rem 1rem;font-size:.875rem}.q-field-preview__content.preserve-whitespace{white-space:pre-wrap}.q-field-preview__footer{display:flex;flex-direction:row;margin-top:.25rem}.q-field-preview:first-child{margin:0 1rem .25rem .25rem}.pulsing-dots{display:flex;align-items:center;justify-content:center;flex-direction:row;gap:.25rem}.generating-text{font-size:.9rem;color:var(--q-theme-primary)}.dots-container{display:flex;align-items:center;gap:.1rem}.dot{font-size:16px;line-height:1;animation:pulse 1s infinite;color:var(--q-theme-primary)}@keyframes pulse{0%,to{transform:scale(.8);opacity:.6}50%{transform:scale(1);opacity:1}}.q-chatbot{width:100%;height:100%;display:flex;flex-direction:column}.q-chatbot input{line-height:1.5rem}.q-chatbot .q-input-group .i-text__field{border-radius:0;flex:1}.q-chatbot__text p{margin:0}.q-chatbot__content{background-color:#fff;border:1px solid #eaebec;height:100%;width:100%;display:flex;flex-direction:column;gap:.75rem;overflow:hidden}.q-chatbot__footer-container{padding:.8rem 0 0}.q-chatbot__input-wrapper{display:flex;flex-direction:column;position:relative}.q-chatbot__image-preview{display:inline-flex;align-items:center;position:relative;margin-top:.5rem;width:fit-content}.q-chatbot__image-preview img{width:60px;height:60px;object-fit:cover;border-radius:4px;margin-right:.25rem;border:1px solid #eaebec;overflow:hidden}.q-chatbot__image-preview img:hover+.q-chatbot__remove-image,.q-chatbot__image-preview img:focus+.q-chatbot__remove-image{opacity:1;pointer-events:auto}.q-chatbot__image-preview img:focus{outline:solid rgb(var(--q-theme-info-rgb)/50%)}.q-chatbot .q-button.q-chatbot__remove-image{position:absolute;top:-5px;right:-5px;background-color:#00000080;color:#fff;border-radius:50%;padding:5px;font-size:12px;border:none;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.q-chatbot .q-button.q-chatbot__remove-image:hover,.q-chatbot .q-button.q-chatbot__remove-image:focus{opacity:1;pointer-events:auto}.q-chatbot__send-container{padding-bottom:.25rem;display:flex;justify-content:space-between;width:100%}.q-chatbot__send-container .q-chatbot__send,.q-chatbot__send-container .q-chatbot__upload{border-radius:1rem}.q-chatbot__send-container .spacer{flex-grow:1}.q-chatbot__footer{position:sticky;padding:0 .5rem;border:1px solid #eaebec;border-radius:.25rem;bottom:0;width:100%;display:flex;flex-direction:column;gap:.25rem}.q-chatbot__footer-disabled{background-color:rgb(var(--q-theme-neutral-light-rgb)/25%);cursor:not-allowed}.q-chatbot__footer.drag-over{border:2px dashed rgb(var(--q-theme-primary-rgb)/25%);background-color:#018bd20d}.q-chatbot__footer .q-chatbot__input{min-height:50px;max-height:100px;border-bottom:1px solid #eaebec;overflow-y:auto}.q-chatbot__footer .q-text-area{max-height:100%;overflow-y:auto}.q-chatbot__footer .q-text-area .q-field__control{border:none}.q-chatbot__upload-container{display:flex;justify-content:flex-start;padding:.25rem 0}.q-chatbot__upload-container .q-chatbot__upload{border-radius:1rem}.q-chatbot__messages-container{display:flex;flex-direction:column;flex-grow:1;padding:0 1rem 2rem;gap:1.5rem;overflow-y:auto}.q-chatbot__messages-wrapper{display:flex;max-width:100%;gap:.2rem}.q-chatbot__tools{display:flex;flex-direction:row;justify-content:space-between;max-width:100%;padding:.25rem .5rem}.q-chatbot__message-wrapper{display:flex;flex-direction:column;gap:.2rem}.q-chatbot__message-container{display:flex;flex-direction:column;gap:.25rem}.q-chatbot__messages-wrapper_right{justify-content:flex-end}.q-chatbot__messages-wrapper_right .q-chatbot__message-container{align-items:flex-end}.q-chatbot__messages-wrapper_right .q-chatbot__message-wrapper{display:flex;align-items:flex-end}.q-chatbot__profile.q-icon__img{border-radius:50%;height:2rem;width:2rem}.q-chatbot__message{padding:.3rem .5rem;background-color:#eaebec;width:fit-content;min-height:2rem;white-space:normal;border-radius:0 .5rem .5rem}.q-chatbot__messages-wrapper_right .q-chatbot__message{background-color:#018bd233;border-radius:.5rem 0 .5rem .5rem;white-space:normal}.q-chatbot__sender{white-space:nowrap;color:#7c858d;font-size:.7rem}.q-chatbot__retry-button{align-items:center;display:flex}.q-chatbot__dialog-title{margin:.5rem 0}.hidden-input{display:none}
+.markdown-renderer pre,.markdown-renderer code{white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:auto}.markdown-renderer pre{position:relative;background-color:#f5f5f5;border:1px solid #e0e0e0;border-radius:6px;padding:.75rem 1rem;font-size:.875rem}.markdown-renderer code{padding:.2rem .4rem;border-radius:4px;font-size:.875rem}.q-field-preview{position:relative;display:flex;flex-direction:column;margin:1rem .25rem}.q-field-preview__toolbar{z-index:1;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:.1rem .2rem}.q-field-preview__content{position:relative;background-color:#f5f5f5;border:1px solid #e0e0e0;border-radius:6px;padding:.75rem 1rem;font-size:.875rem}.q-field-preview__content.preserve-whitespace{white-space:pre-wrap}.q-field-preview__footer{display:flex;flex-direction:row;margin-top:.25rem}.q-field-preview:first-child{margin:0 1rem .25rem .25rem}.pulsing-dots{display:flex;align-items:center;justify-content:center;flex-direction:row;gap:.25rem}.generating-text{font-size:.9rem;color:var(--q-theme-primary)}.dots-container{display:flex;align-items:center;gap:.1rem}.dot{font-size:16px;line-height:1;animation:pulse 1s infinite;color:var(--q-theme-primary)}@keyframes pulse{0%,to{transform:scale(.8);opacity:.6}50%{transform:scale(1);opacity:1}}.q-chatbot__file-preview img,.q-chatbot__image-preview img{width:60px;height:60px;object-fit:cover;border-radius:4px;margin-right:.25rem;border:1px solid #eaebec;overflow:hidden}.q-chatbot__file-preview{display:inline-flex;align-items:center;position:relative;margin-top:.5rem;gap:.25rem;width:fit-content}.q-chatbot__file-preview img:focus{outline:solid rgb(var(--q-theme-info-rgb)/50%)}.q-chatbot__file-preview-container{display:flex;border-radius:.5rem;padding:.25rem .5rem;max-width:320px;align-items:center;justify-content:center;border:1px solid var(--q-theme-primary-light)}.q-chatbot__file-icon-container{display:flex;align-items:center;justify-content:center;border-radius:8px;width:36px;height:36px;flex-shrink:0;margin-right:10px;background:var(--q-theme-primary-light)}.q-chatbot__file-icon-container .q-icon{width:20px;height:20px}.q-chatbot__file-info{display:flex;flex-direction:column;overflow:hidden}.q-chatbot__file-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.q-chatbot__file-extension{font-size:10px}.q-chatbot{width:100%;height:100%;display:flex;flex-direction:column}.q-chatbot input{line-height:1.5rem}.q-chatbot .q-input-group .i-text__field{border-radius:0;flex:1}.q-chatbot__remove-file{position:absolute;top:-8px;right:-8px}.q-chatbot__text p{margin:0}.q-chatbot__content{background-color:#fff;border:1px solid #eaebec;height:100%;width:100%;display:flex;flex-direction:column;gap:.75rem;overflow:hidden}.q-chatbot__footer-container{padding:.8rem 0 0}.q-chatbot__input-wrapper{display:flex;flex-direction:column;position:relative}.q-chatbot .q-button.q-chatbot__remove-file{position:absolute;top:-5px;right:-5px;background-color:#00000080;color:#fff;border-radius:50%;padding:5px;font-size:10px;border:none}.q-chatbot .q-button.q-chatbot__remove-file:hover,.q-chatbot .q-button.q-chatbot__remove-file:focus{opacity:1;pointer-events:auto}.q-chatbot__send-container{padding-bottom:.25rem;display:flex;justify-content:space-between;width:100%}.q-chatbot__send-container .q-chatbot__send,.q-chatbot__send-container .q-chatbot__upload{border-radius:1rem}.q-chatbot__send-container .spacer{flex-grow:1}.q-chatbot__footer{position:sticky;padding:0 .5rem;border:1px solid #eaebec;border-radius:.25rem;bottom:0;width:100%;display:flex;flex-direction:column;gap:.25rem}.q-chatbot__footer-disabled{background-color:rgb(var(--q-theme-neutral-light-rgb)/25%);cursor:not-allowed}.q-chatbot__footer.drag-over{border:2px dashed rgb(var(--q-theme-primary-rgb)/25%);background-color:#018bd20d}.q-chatbot__footer .q-chatbot__input{min-height:50px;max-height:100px;border-bottom:1px solid #eaebec;overflow-y:auto}.q-chatbot__footer .q-text-area{max-height:100%;overflow-y:auto}.q-chatbot__footer .q-text-area .q-field__control{border:none}.q-chatbot__upload-container{display:flex;justify-content:flex-start;padding:.25rem 0}.q-chatbot__upload-container .q-chatbot__upload{border-radius:1rem}.q-chatbot__messages-container{display:flex;flex-direction:column;flex-grow:1;padding:0 1rem 2rem;gap:1.5rem;overflow-y:auto}.q-chatbot__messages-wrapper{display:flex;max-width:100%;gap:.2rem}.q-chatbot__tools{display:flex;flex-direction:row;justify-content:space-between;max-width:100%;padding:.25rem .5rem}.q-chatbot__message-wrapper{display:flex;flex-direction:column;gap:.2rem}.q-chatbot__message-container{display:flex;flex-direction:column;gap:.25rem}.q-chatbot__messages-wrapper_right{justify-content:flex-end}.q-chatbot__messages-wrapper_right .q-chatbot__message-container{align-items:flex-end}.q-chatbot__messages-wrapper_right .q-chatbot__message-wrapper{display:flex;align-items:flex-end}.q-chatbot__profile.q-icon__img{border-radius:50%;height:2rem;width:2rem}.q-chatbot__message{padding:.3rem .5rem;background-color:#eaebec;width:fit-content;min-height:2rem;white-space:normal;border-radius:0 .5rem .5rem}.q-chatbot__messages-wrapper_right .q-chatbot__message{background-color:#018bd233;border-radius:.5rem 0 .5rem .5rem;white-space:normal}.q-chatbot__sender{white-space:nowrap;color:#7c858d;font-size:.7rem}.q-chatbot__retry-button{align-items:center;display:flex}.q-chatbot__dialog-title{margin:.5rem 0}.hidden-input{display:none}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@quidgest/chatbot",
     "private": false,
-    "version": "0.5.3-dev.0",
+    "version": "0.5.4",
     "type": "module",
     "license": "UNLICENSED",
     "main": "dist/index.cjs",
@@ -57,6 +57,7 @@
         "prettier": "^3.3.3",
         "rimraf": "^5.0.10",
         "sass": "^1.77.8",
+        "semver": "^7.7.2",
         "stylelint": "^16.23.1",
         "stylelint-config-standard-scss": "^15.0.1",
         "typescript": "^5.5.4",

package/src/assets/styles/preview-file.scss

@@ -0,0 +1,70 @@
+.q-chatbot__file-preview img,
+.q-chatbot__image-preview img {
+  width: 60px;
+  height: 60px;
+  object-fit: cover;
+  border-radius: 4px;
+  margin-right: 0.25rem;
+  border: 1px solid #eaebec;
+  overflow: hidden;
+}
+
+.q-chatbot__file {
+  &-preview {
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    margin-top: 0.5rem;
+    gap: 0.25rem;
+    width: fit-content;
+
+    img:focus {
+      outline: solid rgb(var(--q-theme-info-rgb) / 50%);
+    }
+
+    &-container {
+      display: flex;
+      border-radius: 0.5rem;
+      padding: 0.25rem 0.5rem;
+      max-width: 320px;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid var(--q-theme-primary-light);
+    }
+  }
+
+  &-icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    width: 36px;
+    height: 36px;
+    flex-shrink: 0;
+    margin-right: 10px;
+    background: var(--q-theme-primary-light);
+
+    .q-icon {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  &-info {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  &-name {
+    font-size: 12px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &-extension {
+    font-size: 10px;
+  }
+}

package/src/assets/styles/styles.scss

@@ -1,6 +1,7 @@
 @import '../../components/MarkdownRender/markdown-render';
 @import '../../components/FieldPreview/field-preview';
 @import '../../components/PulseDots/pulse-dots';
+@import '../styles/preview-file';
 
 .q-chatbot {
   width: 100%;
@@ -17,6 +18,12 @@
     flex: 1;
   }
 
+  &__remove-file {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+  }
+
   &__text {
     p {
       margin: 0;
@@ -44,35 +51,7 @@
     position: relative;
   }
 
-  &__image-preview {
-    display: inline-flex;
-    align-items: center;
-    position: relative;
-    margin-top: 0.5rem;
-    width: fit-content;
-
-    img {
-      width: 60px;
-      height: 60px;
-      object-fit: cover;
-      border-radius: 4px;
-      margin-right: 0.25rem;
-      border: 1px solid #eaebec;
-      overflow: hidden;
-    }
-  }
-
-  &__image-preview img:hover + .q-chatbot__remove-image,
-  &__image-preview img:focus + .q-chatbot__remove-image {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  &__image-preview img:focus {
-    outline: solid rgb(var(--q-theme-info-rgb) / 50%);
-  }
-
-  .q-button.q-chatbot__remove-image {
+  .q-button.q-chatbot__remove-file {
     position: absolute;
     top: -5px;
     right: -5px;
@@ -80,11 +59,8 @@
     color: white;
     border-radius: 50%;
     padding: 5px;
-    font-size: 12px;
+    font-size: 10px;
     border: none;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.2s ease-in-out;
 
     &:hover,
     &:focus {

package/src/components/ChatBot/ChatBot.vue

@@ -22,7 +22,7 @@
 						:user-image="props.userImage"
 						:chatbot-image="props.chatbotImage"
 						:loading="isLoading && !message.message"
-						:image-preview-url="message.imagePreviewUrl"
+						:file="message.file"
 						:api-endpoint="props.apiEndpoint"
 						:session-i-d="message.sessionID"
 						:fields="message.fields"
@@ -59,7 +59,7 @@
 		FieldData,
 		AppliedFieldData
 	} from './types'
-	import type { ChatBotImage } from '../ChatBotInput'
+	import type { ChatBotFile } from '../ChatBotInput'
 
 	// Assets
 	import ChatBotIcon from '@/assets/chatbot_profile.svg'
@@ -150,14 +150,10 @@
 		sendInitialMessage()
 
 		data.history.forEach(async (message: ChatBotMessageContent) => {
-			const imgUrl = message.imageUrl
-				? props.controllerEndpoint + message.imageUrl
-				: undefined
-
 			addChatMessage(
 				message.content,
 				message.type === 'ai' ? 'bot' : 'user',
-				imgUrl,
+				undefined, // At this point we don't have preview URLs for past messages
 				message.sessionID
 			)
 		})
@@ -165,7 +161,7 @@
 
 	function sendInitialMessage() {
 		const message = texts.initialMessage
-		addChatMessage(message, 'bot', null, undefined, true)
+		addChatMessage(message, 'bot', undefined, undefined, true)
 	}
 
 	function resetChat() {
@@ -183,7 +179,7 @@
 		}
 	}
 
-	async function sendMessage(prompt: string, image?: ChatBotImage) {
+	async function sendMessage(prompt: string, file?: ChatBotFile) {
 		if (messagesContainer.value) {
 			messagesContainer.value.scrollTo({
 				top: messagesContainer.value.scrollHeight,
@@ -191,8 +187,8 @@
 			})
 		}
 
-		addChatMessage(prompt, 'user', image?.previewUrl)
-		setChatPrompt(prompt, image?.file)
+		addChatMessage(prompt, 'user', file)
+		setChatPrompt(prompt, file?.fileData)
 	}
 
 	async function getAgentJob(jobId: string) {
@@ -239,13 +235,13 @@
 		)
 	}
 
-	async function setChatPrompt(prompt: string, image?: File) {
+	async function setChatPrompt(prompt: string, file?: File) {
 		// Add an empty bot message marked as streaming to trigger bouncing dots animation
 		const currentSessionID = uuidv4()
 
 		const formData = new FormData()
-		if (image) {
-			formData.append('image', image)
+		if (file) {
+			formData.append('file', file)
 		}
 
 		formData.append('message', prompt)

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

@@ -0,0 +1,52 @@
+// Components
+import ChatBot from '../ChatBot.vue'
+
+// Utils
+import { mount } from '@vue/test-utils'
+import { describe, it, expect, vi } from 'vitest'
+import { ref } from 'vue'
+
+// composables
+import { useTexts } from '@/composables/useTexts'
+
+// Types
+import type { ChatBotProps } from '../types'
+
+// Mock UseChatApi composable to avoid real API calls during tests
+vi.mock('@/composables/useChatApi', () => {
+	return {
+		useChatApi: vi.fn(() => ({
+			isLoading: ref(false),
+			lastError: { value: null },
+			getChatData: vi.fn().mockResolvedValue({
+				data: { success: true, history: [] },
+				error: null
+			}),
+			clearChatData: vi.fn().mockResolvedValue({ data: { success: true }, error: null }),
+			getJobResultData: vi.fn(),
+			sendPrompt: vi.fn(),
+			handleFeedback: vi.fn()
+		}))
+	}
+})
+
+describe('ChatBot', () => {
+	const props: ChatBotProps = {
+		apiEndpoint: 'https://api.example.com/chat',
+		username: 'TestUser',
+		projectPath: 'quidgest',
+		dateFormat: 'HH:mm'
+	}
+
+	it('renders the component with default props', () => {
+		const wrapper = mount(ChatBot, { props })
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('shows the initial message after loading', () => {
+		const wrapper = mount(ChatBot, { props })
+		const { initialMessage } = useTexts()
+
+		expect(wrapper.text()).toContain(initialMessage)
+	})
+})

package/src/components/ChatBot/__tests__/__snapshots__/ChatBot.spec.ts.snap

@@ -0,0 +1,39 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ChatBot > renders the component with default props 1`] = `
+"<div class="q-chatbot">
+  <div class="q-chatbot__content">
+    <div class="q-chatbot__tools">
+      <div class="q-chatbot__tools__select">
+        <!--v-if-->
+      </div><button type="button" class="q-button q-button--outlined q-button--primary q-button--borderless q-chatbot__tools-clear" disabled="" title="Clear chat">
+        <!--v-if--><span class="q-button__content"><span data-test="bin"></span> </span>
+      </button>
+    </div>
+    <div class="q-chatbot__messages-container"></div>
+  </div>
+  <div class="q-chatbot__footer-container">
+    <div class="q-label"><label>What can I help with?</label></div>
+    <div class="q-chatbot__footer q-chatbot__footer-disabled">
+      <div class="q-chatbot__input-wrapper">
+        <!--v-if-->
+        <div class="q-chatbot__input">
+          <div class="q-field q-field--block q-field--disabled q-text-area">
+            <!--v-if-->
+            <div class="q-field__control">
+              <!--v-if--><textarea id="uid-1" class="q-text-area__input" disabled="" 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" disabled="" 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>
+  </div>
+</div>"
+`;

package/src/components/ChatBot/types.ts

@@ -1,3 +1,5 @@
+import { ChatBotFile } from '../ChatBotInput'
+
 export type ChatBotProps = {
 	apiEndpoint?: string
 	controllerEndpoint?: string
@@ -41,7 +43,7 @@ export type ChatMessage = {
 	date: Date
 	sender: ChatBotMessageSender
 	sessionID: string
-	imagePreviewUrl?: string
+	file?: ChatBotFile
 	isWelcomeMessage?: boolean
 	fields?: FieldData[]
 }

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>