@quidgest/chatbot 0.5.3-dev.0 → 0.5.3

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__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.3",
     "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",
@@ -66,7 +67,7 @@
         "vue-tsc": "^1.8.27"
     },
     "peerDependencies": {
-        "@quidgest/ui": "0.16.19",
+        "@quidgest/ui": "0.16.12",
         "vue": "3.5.17"
     },
     "engines": {

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,11 +22,10 @@
 						: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"
-						@regenerate="onFieldRegenerate"
 						@apply-fields="applyFields" />
 				</div>
 			</div>
@@ -48,7 +47,7 @@
 	import { ChatBotInput } from '@/components/ChatBotInput'
 
 	// Utils
-	import { onMounted, ref, watch, computed, onBeforeMount } from 'vue'
+	import { onMounted, nextTick, ref, watch, computed, onBeforeMount } from 'vue'
 	import { v4 as uuidv4 } from 'uuid'
 
 	// Types
@@ -59,7 +58,7 @@
 		FieldData,
 		AppliedFieldData
 	} from './types'
-	import type { ChatBotImage } from '../ChatBotInput'
+	import type { ChatBotFile } from '../ChatBotInput'
 
 	// Assets
 	import ChatBotIcon from '@/assets/chatbot_profile.svg'
@@ -87,7 +86,6 @@
 
 	const emit = defineEmits<{
 		(e: 'apply-fields', fields: AppliedFieldData[]): void
-		(e: 'direct-agent-chat', agentId: string, prompt: string): void
 	}>()
 
 	const isChatDisabled = ref(true)
@@ -99,11 +97,9 @@
 
 	// Composables
 	const texts = useTexts()
-	const { isLoading, clearChatData, getChatData, getJobResultData, sendPrompt } = useChatApi(
-		props.apiEndpoint
-	)
-	const { messages, addChatMessage, clearMessages, getLastMessage, deleteMessageById } =
-		useChatMessages()
+	const { isLoading, clearChatData, getChatData, getFieldSuggestionData, sendPrompt } =
+		useChatApi(props.apiEndpoint)
+	const { messages, addChatMessage, clearMessages, getLastMessage } = useChatMessages()
 
 	const isDisabled = computed(() => {
 		return isChatDisabled.value || isLoading.value
@@ -150,14 +146,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 +157,7 @@
 
 	function sendInitialMessage() {
 		const message = texts.initialMessage
-		addChatMessage(message, 'bot', null, undefined, true)
+		addChatMessage(message, 'bot', undefined, undefined, true)
 	}
 
 	function resetChat() {
@@ -175,6 +167,14 @@
 		autoScrollEnabled.value = true
 	}
 
+	function scrollToBottom() {
+		nextTick(() => {
+			if (messagesContainer.value) {
+				messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
+			}
+		})
+	}
+
 	function handleScroll() {
 		if (messagesContainer.value) {
 			const threshold = 20 // px threshold from the bottom
@@ -183,7 +183,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 +191,11 @@
 			})
 		}
 
-		addChatMessage(prompt, 'user', image?.previewUrl)
-		setChatPrompt(prompt, image?.file)
+		addChatMessage(prompt, 'user', file)
+		nextTick(() => {
+			if (autoScrollEnabled.value) scrollToBottom()
+		})
+		setChatPrompt(prompt, file?.fileData)
 	}
 
 	async function getAgentJob(jobId: string) {
@@ -205,47 +208,47 @@
 
 		// Add an empty bot message to trigger bouncing dots animation
 		addChatMessage('', 'bot')
+		nextTick(() => {
+			if (autoScrollEnabled.value) scrollToBottom()
+		})
 
 		const msg = getLastMessage()
 		if (!msg) return
 
-		await getJobResultData(
+		await getFieldSuggestionData(
 			jobId,
 			(chunk: string) => {
 				msg.message += chunk
 				if (!msg.fields) msg.fields = []
 
-				if (msg.fields.length > 0) {
-					const lastField = msg.fields[msg.fields.length - 1]
-					lastField.text = msg.message
-				}
+				const lastField = msg.fields[msg.fields.length - 1]
+				lastField.text = msg.message
+
+				if (autoScrollEnabled.value) scrollToBottom()
 			},
 			(metadata: Record<string, unknown>) => {
 				msg.message = ''
 				const data = metadata as FieldData
 				msg.fields?.push({
-					id: data.id,
 					type: data.type,
 					name: data.name,
 					text: data.text
 				})
-			},
-			(error: Error) => {
-				setDisabledState(true)
-				addChatMessage(texts.botIsSick)
-				console.error('Error getting job result: ' + error)
-				deleteMessageById(msg.id)
 			}
 		)
 	}
 
-	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()
+		addChatMessage('', 'bot')
+		const msg = getLastMessage()
+		if (!msg) return
+
+		const currentSessionID = msg?.sessionID || uuidv4()
 
 		const formData = new FormData()
-		if (image) {
-			formData.append('image', image)
+		if (file) {
+			formData.append('file', file)
 		}
 
 		formData.append('message', prompt)
@@ -253,26 +256,19 @@
 		formData.append('user', props.username)
 		formData.append('sessionID', currentSessionID)
 
-		if (currentAgentId.value !== '') {
-			emit('direct-agent-chat', currentAgentId.value, prompt)
-		} else {
-			addChatMessage('', 'bot')
-			const msg = getLastMessage()
-			if (!msg) return
-
-			await sendPrompt(
-				formData,
-				(chunk) => {
-					if (msg) msg.message += chunk
-				},
-				(error) => {
-					setDisabledState(true)
-					addChatMessage(texts.botIsSick)
-					console.error('Error sending message: ' + error)
-					deleteMessageById(msg.id)
-				}
-			)
-		}
+		await sendPrompt(
+			formData,
+			(chunk) => {
+				if (msg) msg.message += chunk
+
+				if (autoScrollEnabled.value) scrollToBottom()
+			},
+			(error) => {
+				setDisabledState(true)
+				addChatMessage(texts.botIsSick)
+				console.error('Error sending message: ' + error)
+			}
+		)
 	}
 
 	async function clearChat() {
@@ -299,12 +295,11 @@
 		return classes
 	}
 
-	async function changeChat(chat: { formId: string; key: string }) {
+	function changeChat(chat: { formId: string; key: string }) {
 		currentAgentId.value = chat.key
 		currentFormId.value = chat.formId
-
 		resetChat()
-		await initChat()
+		loadChatData()
 	}
 
 	function applyFields(fields: AppliedFieldData[]) {
@@ -313,11 +308,6 @@
 		emit('apply-fields', fields)
 	}
 
-	function onFieldRegenerate(name: string) {
-		const prompt = texts.regenerateResponsePrompt.replace('{0}', name)
-		emit('direct-agent-chat', currentAgentId.value, prompt)
-	}
-
 	watch(
 		() => props.availableAgents,
 		(newValue, oldValue) => {
@@ -332,19 +322,28 @@
 
 	watch(
 		() => props.agentData,
-		async (newData, oldData) => {
+		async (newValue, oldValue) => {
 			if (isDisabled.value) return
 
-			const newJobId = newData.jobId
-			const oldJobId = oldData.jobId
+			if (props.agentData?.id !== oldValue?.id) {
+				currentAgentId.value = newValue?.id || ''
+				currentFormId.value = newValue?.formId || ''
+				resetChat()
+				await initChat()
+			}
 
-			const jobChanged = newJobId !== oldJobId
-			const agentChanged = newData.id !== currentAgentId.value
-			if (agentChanged) await changeChat({ formId: newData.formId, key: newData.id })
+			if (newValue?.id !== '' && newValue && newValue.jobId !== oldValue.jobId)
+				await getAgentJob(newValue.jobId)
+		}
+	)
 
-			if (newJobId && jobChanged) await getAgentJob(newJobId)
+	watch(
+		() => [props.agentData.id, props.agentData.formId],
+		([newId, newFormId]) => {
+			currentAgentId.value = newId
+			currentFormId.value = newFormId
 		},
-		{ deep: true }
+		{ immediate: true }
 	)
 
 	defineOptions({ name: 'ChatBot' })

package/src/components/ChatBot/types.ts

@@ -1,3 +1,5 @@
+import { ChatBotFile } from '../ChatBotInput'
+
 export type ChatBotProps = {
 	apiEndpoint?: string
 	controllerEndpoint?: string
@@ -23,7 +25,6 @@ export type AgentData = {
 }
 
 export type FieldData = {
-	id: string
 	name: string
 	type: string
 	text: string
@@ -31,7 +32,7 @@ export type FieldData = {
 }
 
 export type AppliedFieldData = {
-	id: string
+	name: string
 	text: unknown
 }
 
@@ -41,7 +42,7 @@ export type ChatMessage = {
 	date: Date
 	sender: ChatBotMessageSender
 	sessionID: string
-	imagePreviewUrl?: string
+	file?: ChatBotFile
 	isWelcomeMessage?: boolean
 	fields?: FieldData[]
 }