@quidgest/chatbot 0.5.3 → 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__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}
+.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",
+    "version": "0.5.4",
     "type": "module",
     "license": "UNLICENSED",
     "main": "dist/index.cjs",
@@ -67,7 +67,7 @@
         "vue-tsc": "^1.8.27"
     },
     "peerDependencies": {
-        "@quidgest/ui": "0.16.12",
+        "@quidgest/ui": "0.16.19",
         "vue": "3.5.17"
     },
     "engines": {

package/src/components/ChatBot/ChatBot.vue

@@ -26,6 +26,7 @@
 						:api-endpoint="props.apiEndpoint"
 						:session-i-d="message.sessionID"
 						:fields="message.fields"
+						@regenerate="onFieldRegenerate"
 						@apply-fields="applyFields" />
 				</div>
 			</div>
@@ -47,7 +48,7 @@
 	import { ChatBotInput } from '@/components/ChatBotInput'
 
 	// Utils
-	import { onMounted, nextTick, ref, watch, computed, onBeforeMount } from 'vue'
+	import { onMounted, ref, watch, computed, onBeforeMount } from 'vue'
 	import { v4 as uuidv4 } from 'uuid'
 
 	// Types
@@ -86,6 +87,7 @@
 
 	const emit = defineEmits<{
 		(e: 'apply-fields', fields: AppliedFieldData[]): void
+		(e: 'direct-agent-chat', agentId: string, prompt: string): void
 	}>()
 
 	const isChatDisabled = ref(true)
@@ -97,9 +99,11 @@
 
 	// Composables
 	const texts = useTexts()
-	const { isLoading, clearChatData, getChatData, getFieldSuggestionData, sendPrompt } =
-		useChatApi(props.apiEndpoint)
-	const { messages, addChatMessage, clearMessages, getLastMessage } = useChatMessages()
+	const { isLoading, clearChatData, getChatData, getJobResultData, sendPrompt } = useChatApi(
+		props.apiEndpoint
+	)
+	const { messages, addChatMessage, clearMessages, getLastMessage, deleteMessageById } =
+		useChatMessages()
 
 	const isDisabled = computed(() => {
 		return isChatDisabled.value || isLoading.value
@@ -167,14 +171,6 @@
 		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
@@ -192,9 +188,6 @@
 		}
 
 		addChatMessage(prompt, 'user', file)
-		nextTick(() => {
-			if (autoScrollEnabled.value) scrollToBottom()
-		})
 		setChatPrompt(prompt, file?.fileData)
 	}
 
@@ -208,43 +201,43 @@
 
 		// Add an empty bot message to trigger bouncing dots animation
 		addChatMessage('', 'bot')
-		nextTick(() => {
-			if (autoScrollEnabled.value) scrollToBottom()
-		})
 
 		const msg = getLastMessage()
 		if (!msg) return
 
-		await getFieldSuggestionData(
+		await getJobResultData(
 			jobId,
 			(chunk: string) => {
 				msg.message += chunk
 				if (!msg.fields) msg.fields = []
 
-				const lastField = msg.fields[msg.fields.length - 1]
-				lastField.text = msg.message
-
-				if (autoScrollEnabled.value) scrollToBottom()
+				if (msg.fields.length > 0) {
+					const lastField = msg.fields[msg.fields.length - 1]
+					lastField.text = msg.message
+				}
 			},
 			(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, file?: File) {
 		// Add an empty bot message marked as streaming to trigger bouncing dots animation
-		addChatMessage('', 'bot')
-		const msg = getLastMessage()
-		if (!msg) return
-
-		const currentSessionID = msg?.sessionID || uuidv4()
+		const currentSessionID = uuidv4()
 
 		const formData = new FormData()
 		if (file) {
@@ -256,19 +249,26 @@
 		formData.append('user', props.username)
 		formData.append('sessionID', currentSessionID)
 
-		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)
-			}
-		)
+		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)
+				}
+			)
+		}
 	}
 
 	async function clearChat() {
@@ -295,11 +295,12 @@
 		return classes
 	}
 
-	function changeChat(chat: { formId: string; key: string }) {
+	async function changeChat(chat: { formId: string; key: string }) {
 		currentAgentId.value = chat.key
 		currentFormId.value = chat.formId
+
 		resetChat()
-		loadChatData()
+		await initChat()
 	}
 
 	function applyFields(fields: AppliedFieldData[]) {
@@ -308,6 +309,11 @@
 		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) => {
@@ -322,28 +328,19 @@
 
 	watch(
 		() => props.agentData,
-		async (newValue, oldValue) => {
+		async (newData, oldData) => {
 			if (isDisabled.value) return
 
-			if (props.agentData?.id !== oldValue?.id) {
-				currentAgentId.value = newValue?.id || ''
-				currentFormId.value = newValue?.formId || ''
-				resetChat()
-				await initChat()
-			}
+			const newJobId = newData.jobId
+			const oldJobId = oldData.jobId
 
-			if (newValue?.id !== '' && newValue && newValue.jobId !== oldValue.jobId)
-				await getAgentJob(newValue.jobId)
-		}
-	)
+			const jobChanged = newJobId !== oldJobId
+			const agentChanged = newData.id !== currentAgentId.value
+			if (agentChanged) await changeChat({ formId: newData.formId, key: newData.id })
 
-	watch(
-		() => [props.agentData.id, props.agentData.formId],
-		([newId, newFormId]) => {
-			currentAgentId.value = newId
-			currentFormId.value = newFormId
+			if (newJobId && jobChanged) await getAgentJob(newJobId)
 		},
-		{ immediate: true }
+		{ deep: true }
 	)
 
 	defineOptions({ name: 'ChatBot' })

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

@@ -25,6 +25,7 @@ export type AgentData = {
 }
 
 export type FieldData = {
+	id: string
 	name: string
 	type: string
 	text: string
@@ -32,7 +33,7 @@ export type FieldData = {
 }
 
 export type AppliedFieldData = {
-	name: string
+	id: string
 	text: unknown
 }
 

package/src/components/ChatBotMessage/ChatBotMessage.vue

@@ -42,6 +42,7 @@
 						:name="field.name"
 						:type="field.type"
 						:disabled="loading"
+						@regenerate="() => emit('regenerate', field.name)"
 						@apply="(text) => applyField(text, field)" />
 				</template>
 				<template v-else>
@@ -74,8 +75,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'
@@ -97,6 +98,7 @@
 
 	const emit = defineEmits<{
 		(e: 'apply-fields', fields: AppliedFieldData[]): void
+		(e: 'regenerate', fieldName: string): void
 	}>()
 
 	const texts = useTexts()
@@ -140,7 +142,7 @@
 	}
 
 	function applyField(text: unknown, field: FieldData) {
-		emit('apply-fields', [{ name: field.name, text }])
+		emit('apply-fields', [{ id: field.id, text }])
 	}
 
 	function applyAllFields() {
@@ -148,7 +150,7 @@
 
 		const fieldsToApply = props.fields.map((field) => {
 			return {
-				name: field.name,
+				id: field.id,
 				text: parseFieldValue(field.type, field.text)
 			}
 		})

package/src/components/ChatBotMessage/ChatBotMessageButtons.vue

@@ -51,6 +51,7 @@
 				borderless
 				:disabled="blockApplyAllButton"
 				:readonly="blockApplyAllButton"
+				:label="texts.applyAll"
 				@click="onApplyAll">
 				<q-icon icon="apply-all" />
 			</q-button>

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

@@ -81,6 +81,7 @@ describe('ChatBotMessage', () => {
 				sender: 'bot',
 				fields: [
 					{
+						id: 'field-1',
 						type: 'text',
 						text: 'Sample Field',
 						name: 'This is a sample field value'
@@ -163,11 +164,13 @@ describe('ChatBotMessage', () => {
 	it('emits apply-fields event with fields when apply all button is clicked', async () => {
 		const testFields = [
 			{
+				id: 'field-1',
 				type: 'text',
 				text: 'Sample Field',
 				name: 'This is a sample field value'
 			},
 			{
+				id: 'field-2',
 				type: 'number',
 				text: 'Number Field',
 				name: '42'
@@ -187,7 +190,7 @@ describe('ChatBotMessage', () => {
 
 		const fieldsToApply = testFields.map((field) => {
 			return {
-				name: field.name,
+				id: field.id,
 				text: parseFieldValue(field.type, field.text)
 			}
 		})
@@ -196,9 +199,10 @@ describe('ChatBotMessage', () => {
 		expect(wrapper.emitted('apply-fields')?.[0]).toEqual([fieldsToApply])
 	})
 
-	it('emits apply-fieldd when a single field is applied', async () => {
+	it('emits apply-field when a single field is applied', async () => {
 		const testFields = [
 			{
+				id: 'field-1',
 				type: 'text',
 				text: 'Sample Field',
 				name: 'This is a sample field value'
@@ -220,7 +224,7 @@ describe('ChatBotMessage', () => {
 
 		const fieldToApply = [
 			{
-				name: testFields[0].name,
+				id: testFields[0].id,
 				text: parseFieldValue(testFields[0].type, testFields[0].text)
 			}
 		]

package/src/components/ChatBotMessage/__tests__/ChatBotMessageButtons.spec.ts

@@ -85,8 +85,8 @@ describe('ChatBotMessageButtons', () => {
 		const message = addChatMessage('Test message 1', 'bot')
 
 		message.fields = [
-			{ name: 'field1', text: 'value1', type: 'text' },
-			{ name: 'field2', text: 'value2', type: 'text' }
+			{ name: 'field1', text: 'value1', type: 'text', id: '1' },
+			{ name: 'field2', text: 'value2', type: 'text', id: '2' }
 		]
 
 		const wrapper = mount(ChatBotMessageButtons, {
@@ -104,8 +104,8 @@ describe('ChatBotMessageButtons', () => {
 		const message = addChatMessage('Test message 1', 'bot')
 
 		message.fields = [
-			{ name: 'field1', text: 'value1', type: 'text' },
-			{ name: 'field2', text: 'value2', type: 'text' }
+			{ name: 'field1', text: 'value1', type: 'text', id: '1' },
+			{ name: 'field2', text: 'value2', type: 'text', id: '2' }
 		]
 
 		const wrapper = mount(ChatBotMessageButtons, {

package/src/components/ChatToolBar/ChatToolBar.vue

@@ -4,6 +4,7 @@
 			<q-select
 				v-if="hasAgents"
 				v-model="selectedChat"
+				inline
 				class="q-chatbot__tools-select-input"
 				size="medium"
 				:items="availableChats"
@@ -22,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-	import { QButton, QSelect, QIcon } from '@quidgest/ui/components'
+	import { QButton, QIcon } from '@quidgest/ui/components'
 
 	import { useTexts } from '@/composables/useTexts'
 	import { ChatToolBarProps } from './types'

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

@@ -7,6 +7,7 @@ import { mount } from '@vue/test-utils'
 
 // Types
 import type { ChatToolBarProps } from '../'
+import { nextTick } from 'vue'
 
 describe('ChatToolBar', () => {
 	const props: ChatToolBarProps = {
@@ -53,24 +54,25 @@ describe('ChatToolBar', () => {
 		const wrapper = mount(ChatToolBar, {
 			props: {
 				...props,
-				availableAgents: [
-					{ key: 'agent1', value: 'Agent 1', formId: 'key' },
-					{ key: 'agent2', value: 'Agent 2', formId: 'key' }
-				],
-				selectedAgentKey: 'agent1'
+				availableAgents: [{ key: 'agent1', value: 'Agent 1', formId: 'key' }],
+				selectedAgentKey: ''
 			}
 		})
 
-		const select = wrapper.findComponent({ name: 'QSelect' })
-		// Simulate selecting a new agent
-		await select.vm.$emit('update:modelValue', 'agent2')
+		const select = wrapper.find('.q-field__control')
+		await select.trigger('click')
+
+		const overlay = wrapper.find('.q-overlay__content')
+
+		const item = overlay.find('.q-list-item')
+		await item.trigger('click')
 
 		expect(wrapper.emitted()['change-chat']).toBeTruthy()
-		expect(wrapper.emitted()['change-chat']?.[0]).toEqual([
+		expect(wrapper.emitted()['change-chat'][0]).toEqual([
 			{
-				key: 'agent2',
+				key: 'agent1',
 				formId: 'key',
-				value: 'Agent 2'
+				value: 'Agent 1'
 			}
 		])
 	})
@@ -86,9 +88,21 @@ describe('ChatToolBar', () => {
 				selectedAgentKey: 'agent1'
 			}
 		})
-		const select = wrapper.findComponent({ name: 'QSelect' })
-		// Simulate selecting a new agent
-		await select.vm.$emit('update:modelValue', 'agent3')
+
+		const select = wrapper.find('.q-field__control')
+		await select.trigger('click')
+
+		const overlay = wrapper.find('.q-overlay__content')
+
+		// Manually add a fake item that does not exist in the options
+		const fakeItem = document.createElement('div')
+		fakeItem.setAttribute('data-key', 'agent3')
+		overlay.element.appendChild(fakeItem)
+
+		await nextTick()
+		const item = overlay.find('[data-key="agent3"]')
+		await item.trigger('click')
+
 		expect(wrapper.emitted()['change-chat']).toBeFalsy()
 	})
 
@@ -103,12 +117,18 @@ describe('ChatToolBar', () => {
 				selectedAgentKey: 'agent1'
 			}
 		})
-		const select = wrapper.findComponent({ name: 'QSelect' })
-		// Simulate selecting a new agent
-		await select.vm.$emit('update:modelValue', '')
+		const select = wrapper.find('.q-field__control')
+		await select.trigger('click')
+
+		const overlay = wrapper.find('.q-overlay__content')
+		const items = overlay.findAll('.q-list-item')
+
+		// Default options is always the last one
+		const defaultOption = items[items.length - 1]
+		await defaultOption.trigger('click')
 
 		expect(wrapper.emitted()['change-chat']).toBeTruthy()
-		expect(wrapper.emitted()['change-chat']?.[0]).toEqual([
+		expect(wrapper.emitted()['change-chat'][0]).toEqual([
 			{
 				key: '',
 				formId: ''