@quidgest/chatbot 0.5.9 → 0.6.1

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__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}.markdown-renderer__execution-plan-content{background-color:var(--gray-dark);color:var(--q-theme-on-neutral-dark);padding:.75rem 1rem;border-radius:6px;margin-top:.5rem}.markdown-renderer__execution-plan-content ul,.markdown-renderer__execution-plan-content ol{margin:0;padding-left:1.5rem}.markdown-renderer__execution-plan-content p{margin:0}.markdown-renderer__execution-plan-content hr{border-color:var(--q-theme-on-neutral-dark)}.markdown-renderer__execution-progress-content{padding:.75rem 1rem;border-radius:6px;margin-top:.5rem}.markdown-renderer__execution-progress-content ul,.markdown-renderer__execution-progress-content ol{margin:0;padding-left:1.5rem}.markdown-renderer__execution-progress-content p{margin:0}.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.9",
+    "version": "0.6.1",
     "type": "module",
     "license": "UNLICENSED",
     "main": "dist/index.cjs",
@@ -25,6 +25,7 @@
     ],
     "scripts": {
         "build": "rimraf ./dist && vite build",
+        "dev": "vite build --watch",
         "build-types": "vue-tsc --emitDeclarationOnly --declaration -p tsconfig.json",
         "format": "prettier --check --cache .",
         "format:fix": "prettier --write --cache .",

package/src/assets/styles/styles.scss

@@ -1,7 +1,7 @@
-@import '../../components/MarkdownRender/markdown-render';
-@import '../../components/FieldPreview/field-preview';
-@import '../../components/PulseDots/pulse-dots';
-@import '../styles/preview-file';
+@use '../../components/MarkdownRender/markdown-render';
+@use '../../components/FieldPreview/field-preview';
+@use '../../components/PulseDots/pulse-dots';
+@use '../styles/preview-file';
 
 .q-chatbot {
   width: 100%;

package/src/components/ChatBot/ChatBot.vue

@@ -13,7 +13,7 @@
 				class="q-chatbot__messages-container"
 				@scroll="handleScroll">
 				<div
-					v-for="message in messages"
+					v-for="(message, index) in messages"
 					:key="message.id"
 					:class="getMessageClasses(message.sender)">
 					<chat-bot-message
@@ -26,8 +26,14 @@
 						:api-endpoint="props.apiEndpoint"
 						:session-i-d="message.sessionID"
 						:fields="message.fields"
+						:is-last-message="index === messages.length - 1"
+						:is-streaming="isLoading"
+						:show-cancel-execution="shouldShowCancelExecution(message.message)"
+						:cancel-execution-disabled="isCancelExecutionDisabled(message.message)"
 						@regenerate="onFieldRegenerate"
-						@apply-fields="applyFields" />
+						@apply-fields="applyFields"
+						@send-message="sendMessage"
+						@cancel-execution="onCancelExecution" />
 				</div>
 			</div>
 		</div>
@@ -48,7 +54,7 @@
 	import { ChatBotInput } from '@/components/ChatBotInput'
 
 	// Utils
-	import { onMounted, ref, watch, computed, onBeforeMount } from 'vue'
+	import { onMounted, ref, watch, computed, onBeforeMount, reactive } from 'vue'
 	import { v4 as uuidv4 } from 'uuid'
 
 	// Types
@@ -56,6 +62,7 @@
 		ChatBotProps,
 		ChatBotMessageContent,
 		ChatBotMessageSender,
+		ChatMessage,
 		FieldData,
 		AppliedFieldData
 	} from './types'
@@ -99,9 +106,8 @@
 
 	// Composables
 	const texts = useTexts()
-	const { isLoading, clearChatData, getChatData, getJobResultData, sendPrompt } = useChatApi(
-		props.apiEndpoint
-	)
+	const { isLoading, clearChatData, getChatData, getJobResultData, sendPrompt, cancelExecution } =
+		useChatApi(props.apiEndpoint)
 	const { messages, addChatMessage, clearMessages, getLastMessage, deleteMessageById } =
 		useChatMessages()
 
@@ -109,6 +115,105 @@
 		return isChatDisabled.value || isLoading.value
 	})
 
+	// Marker constants for tool calling status
+	const TOOL_CALLING_MARKER = /<span data-type="tool-calling">.*?<\/span>/
+	const EXECUTION_PROGRESS_MARKER = '<span data-type="execution-progress">'
+
+	interface ExecutionState {
+		active: boolean
+		sessionId: string
+		cancelling: boolean
+		cancelled: boolean
+		callingTools: boolean
+	}
+
+	const execution = reactive<ExecutionState>({
+		active: false,
+		sessionId: '',
+		cancelling: false,
+		cancelled: false,
+		callingTools: false
+	})
+
+	function shouldShowCancelExecution(messageContent: string) {
+		return messageContent.includes('data-type="execution-progress"')
+	}
+
+	function isCancelExecutionDisabled(messageContent: string) {
+		return (
+			!shouldShowCancelExecution(messageContent) ||
+			execution.cancelling ||
+			execution.cancelled ||
+			!execution.active ||
+			!execution.callingTools
+		)
+	}
+
+	async function onCancelExecution() {
+		if (!execution.sessionId || execution.cancelling) return
+		execution.cancelling = true
+
+		const msg = getLastMessage()
+		if (msg) {
+			const cancelMarker = `<span data-type="tool-calling">Cancelling</span>`
+			if (TOOL_CALLING_MARKER.test(msg.message)) {
+				msg.message = msg.message.replace(TOOL_CALLING_MARKER, cancelMarker)
+			}
+		}
+
+		try {
+			await cancelExecution(execution.sessionId)
+			execution.cancelled = true
+		} catch (error) {
+			console.error('Error cancelling execution: ', error)
+		} finally {
+			execution.cancelling = false
+		}
+	}
+
+	function startExecution(sessionId: string) {
+		execution.active = true
+		execution.sessionId = sessionId
+		execution.cancelling = false
+		execution.cancelled = false
+	}
+
+	function finishExecution() {
+		execution.active = false
+		execution.sessionId = ''
+		execution.cancelling = false
+	}
+
+	function updateToolStatus(msg: ChatMessage, html: string) {
+		// Clean HTML (remove <br> tags)
+		const cleanHtml = html.replace(/<br\s*\/?>/gi, '')
+		const marker = `<span data-type="tool-calling">${cleanHtml}</span>`
+
+		// Replace existing marker or insert before execution progress
+		if (TOOL_CALLING_MARKER.test(msg.message)) {
+			msg.message = msg.message.replace(TOOL_CALLING_MARKER, marker)
+		} else {
+			const progressIndex = msg.message.indexOf(EXECUTION_PROGRESS_MARKER)
+			if (progressIndex !== -1) {
+				msg.message =
+					msg.message.slice(0, progressIndex) + marker + msg.message.slice(progressIndex)
+			} else {
+				msg.message = marker + msg.message
+			}
+		}
+	}
+
+	function appendToolCompletion(msg: ChatMessage, html: string) {
+		if (!msg.message.endsWith('<br>')) {
+			msg.message += '<br>'
+		}
+		msg.message += `${html}<br>`
+	}
+
+	function removeToolMarker(msg: ChatMessage) {
+		msg.message = msg.message.replace(TOOL_CALLING_MARKER, '')
+	}
+
 	onBeforeMount(() => {
 		messagesContainer.value?.removeEventListener('scroll', handleScroll)
 	})
@@ -169,6 +274,7 @@
 		clearMessages()
 		setDisabledState(false)
 		autoScrollEnabled.value = true
+		finishExecution()
 	}
 
 	function handleScroll() {
@@ -238,6 +344,7 @@
 	async function setChatPrompt(prompt: string, file?: File) {
 		// Add an empty bot message marked as streaming to trigger bouncing dots animation
 		const currentSessionID = uuidv4()
+		const isExecution = prompt.trim().toLowerCase() === texts.approveProceedPlan.toLowerCase()
 
 		const formData = new FormData()
 		if (file) {
@@ -256,62 +363,53 @@
 			const msg = getLastMessage()
 			if (!msg) return
 
-			const pending = new Map<string, { html: string; startedAt: number }>()
-			const MIN_VISIBLE_MS = 1000
-
-			await sendPrompt(
-				formData,
-				(chunk) => {
-					if (msg) msg.message += chunk
-				},
-				(payload) => {
-					if (!msg || !payload) return
-					const { event: kind, data } = payload
-					if (!data || !data.id) return
-
-					const appendToolMessage = (html: string) => {
-						if (msg.message && !msg.message.endsWith('\n\n')) msg.message += '\n\n'
-						msg.message += `${html}\n\n`
-					}
+			if (isExecution) startExecution(currentSessionID)
 
-					const applyReplace = (start: { html: string; startedAt: number }) => {
-						msg.message = msg.message.replace(start.html, data.html)
-						pending.delete(data.id)
-					}
+			let lastContentType: 'text' | 'tools' | null = null
 
-					switch (kind) {
-						case 'tool_start': {
-							pending.set(data.id, { html: data.html, startedAt: Date.now() })
-							appendToolMessage(data.html)
-							break
-						}
+			try {
+				await sendPrompt(
+					formData,
+					(chunk) => {
+						if (!msg) return
 
-						case 'tool_end': {
-							const start = pending.get(data.id)
-
-							if (start) {
-								const elapsed = Date.now() - start.startedAt
-								const wait = Math.max(0, MIN_VISIBLE_MS - elapsed)
-								if (wait > 0) setTimeout(() => applyReplace(start), wait)
-								else applyReplace(start)
-							} else {
-								appendToolMessage(data.html)
-							}
-							break
+						// Detect transition from tools to text (any text chunk after tools)
+						if (lastContentType === 'tools' && chunk.trim()) {
+							removeToolMarker(msg)
+							lastContentType = 'text'
+							execution.callingTools = false
 						}
 
-						default:
-							// Ignore unknown events
-							break
+						msg.message += chunk
+					},
+					(payload) => {
+						if (!payload?.data?.html) return
+
+						if (payload.event === 'tool_start') {
+							updateToolStatus(msg, payload.data.html)
+							lastContentType = 'tools'
+							execution.callingTools = true
+						} else if (payload.event === 'tool_end') {
+							appendToolCompletion(msg, payload.data.html)
+							// Stay in 'tools' state - more tools might come
+						}
+					},
+					(error) => {
+						setDisabledState(true)
+						addChatMessage(texts.botIsSick)
+						console.error('Error sending message: ' + error)
+						deleteMessageById(msg.id)
+						if (isExecution) finishExecution()
+					},
+					() => {
+						removeToolMarker(msg)
+						if (isExecution) finishExecution()
 					}
-				},
-				(error) => {
-					setDisabledState(true)
-					addChatMessage(texts.botIsSick)
-					console.error('Error sending message: ' + error)
-					deleteMessageById(msg.id)
-				}
-			)
+				)
+			} catch (error) {
+				if (isExecution) finishExecution()
+				console.error('Error sending prompt: ', error)
+			}
 		}
 	}
 
@@ -387,5 +485,18 @@
 		{ deep: true }
 	)
 
+	// Auto-scroll when messages update during streaming
+	watch(
+		() => messages.value,
+		async () => {
+			if (autoScrollEnabled.value && messagesContainer.value) {
+				// Wait for DOM to update before scrolling
+				await new Promise((resolve) => setTimeout(resolve, 0))
+				messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
+			}
+		},
+		{ deep: true, flush: 'post' }
+	)
+
 	defineOptions({ name: 'ChatBot' })
 </script>

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

@@ -25,6 +25,7 @@ vi.mock('@/composables/useChatApi', () => {
 			clearChatData: vi.fn().mockResolvedValue({ data: { success: true }, error: null }),
 			getJobResultData: vi.fn(),
 			sendPrompt: vi.fn(),
+			cancelExecution: vi.fn(),
 			handleFeedback: vi.fn()
 		}))
 	}
@@ -49,4 +50,23 @@ describe('ChatBot', () => {
 
 		expect(wrapper.text()).toContain(initialMessage)
 	})
+
+	it('shows cancel button for execution-progress messages', () => {
+		const wrapper = mount(ChatBot, { props })
+		const messageContent = '<div data-type="execution-progress">Executing...</div>'
+
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		expect((wrapper.vm as any).shouldShowCancelExecution(messageContent)).toBe(true)
+	})
+
+	it('disables cancel button when execution is being cancelled', () => {
+		const wrapper = mount(ChatBot, { props })
+		const messageContent = '<div data-type="execution-progress">Executing...</div>'
+
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		;(wrapper.vm as any).execution.cancelling = true
+
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		expect((wrapper.vm as any).isCancelExecutionDisabled(messageContent)).toBe(true)
+	})
 })

package/src/components/ChatBotMessage/ChatBotMessage.vue

@@ -49,7 +49,7 @@
 					<markdown-render
 						v-if="props.sender === 'bot'"
 						class="q-chatbot__text"
-						:source="props.message || ''" />
+						:source="messageWithoutToolCalling || ''" />
 					<div
 						v-else
 						class="q-chatbot__text q-chatbot__user-text">
@@ -57,15 +57,29 @@
 					</div>
 				</template>
 			</div>
+			<div
+				v-if="toolCallingText"
+				class="q-chatbot__message">
+				<pulse-dots
+					class="q-chatbot__text"
+					:text="toolCallingText" />
+			</div>
 		</div>
 
 		<chat-bot-message-buttons
 			:show-buttons="isBotMessageAndNotDefault"
 			:loading="props.loading"
 			:date-format="props.dateFormat"
+			:is-last-message="props.isLastMessage"
+			:is-execution-plan="isExecutionPlan"
+			:is-streaming="props.isStreaming"
+			:show-cancel-execution="props.showCancelExecution"
+			:cancel-execution-disabled="props.cancelExecutionDisabled"
 			@copy-response="copyResponse"
 			@submit-feedback="onSubmitFeedback"
-			@apply-all="applyAllFields" />
+			@apply-all="applyAllFields"
+			@approve-proceed-plan="onApproveProceedPlan"
+			@cancel-execution="onCancelExecution" />
 	</div>
 </template>
 
@@ -93,12 +107,15 @@
 		sender: 'user',
 		userImage: undefined,
 		date: () => new Date(),
-		fields: () => []
+		fields: () => [],
+		isLastMessage: false
 	})
 
 	const emit = defineEmits<{
 		(e: 'apply-fields', fields: AppliedFieldData[]): void
 		(e: 'regenerate', fieldName: string): void
+		(e: 'send-message', prompt: string): void
+		(e: 'cancel-execution'): void
 	}>()
 
 	const texts = useTexts()
@@ -121,6 +138,15 @@
 		props.sender === 'bot' ? props.chatbotImage : props.userImage
 	)
 
+	const toolCallingText = computed(() => {
+		const match = props.message?.match(/<span data-type="tool-calling">(.*?)<\/span>/)
+		return match ? match[1] : ''
+	})
+
+	const messageWithoutToolCalling = computed(
+		() => props.message?.replace(/<span data-type="tool-calling">.*?<\/span>/, '') ?? ''
+	)
+
 	const fileExtension = computed(() => {
 		if (!props.file?.fileData) return ''
 		const ext = props.file.fileData.name.split('.').pop()?.toUpperCase()
@@ -128,6 +154,18 @@
 		return ext ?? ''
 	})
 
+	const isExecutionPlan = computed(() => {
+		return props.message?.includes('data-type="execution-plan"') ?? false
+	})
+
+	function onApproveProceedPlan() {
+		emit('send-message', texts.approveProceedPlan)
+	}
+
+	function onCancelExecution() {
+		emit('cancel-execution')
+	}
+
 	function copyResponse() {
 		if (!props.message) return
 

package/src/components/ChatBotMessage/ChatBotMessageButtons.vue

@@ -46,14 +46,38 @@
 			</q-button>
 			<q-button
 				v-if="showApplyAll"
-				:title="texts.applyAll"
+				:title="blockApplyAllButton ? undefined : texts.applyAll"
 				class="q-chatbot__apply-all-button"
+				variant="bold"
 				borderless
 				:disabled="blockApplyAllButton"
 				:readonly="blockApplyAllButton"
 				:label="texts.applyAll"
 				@click="onApplyAll">
-				<q-icon icon="apply-all" />
+				<q-icon icon="apply" />
+			</q-button>
+			<q-button
+				v-if="showApprovePlan"
+				:title="blockApproveProceedButton ? undefined : texts.approveProceed"
+				class="q-chatbot__approve-proceed-plan-button"
+				variant="bold"
+				borderless
+				:disabled="blockApproveProceedButton"
+				:readonly="blockApproveProceedButton"
+				:label="texts.approveProceed"
+				@click="onApproveProceedPlan">
+				<q-icon icon="apply" />
+			</q-button>
+			<q-button
+				v-if="showCancelExecutionButton"
+				:title="blockCancelExecutionButton ? undefined : texts.cancelButton"
+				class="q-chatbot__cancel-execution-button"
+				borderless
+				:disabled="blockCancelExecutionButton"
+				:readonly="blockCancelExecutionButton"
+				:label="texts.cancelButton"
+				@click="onCancelExecution">
+				<q-icon icon="cancel" />
 			</q-button>
 		</q-button-group>
 	</div>
@@ -76,6 +100,8 @@
 		(e: 'submit-feedback', feedback: number, comment: string): void
 		(e: 'copy-response'): void
 		(e: 'apply-all'): void
+		(e: 'approve-proceed-plan'): void
+		(e: 'cancel-execution'): void
 	}>()
 	const texts = useTexts()
 	const { getLastMessage } = useChatMessages()
@@ -84,10 +110,28 @@
 	const feedbackComment = ref('')
 	const currentFeedback = ref<number | null>(null)
 	const blockApplyAll = ref(false)
+	const blockApproveProceed = ref(false)
+	const blockCancelExecution = ref(false)
+
 	const blockApplyAllButton = computed(() => {
 		return props.loading || blockApplyAll.value
 	})
 
+	const blockApproveProceedButton = computed(() => {
+		return (
+			blockApproveProceed.value || !props.isLastMessage || props.loading || props.isStreaming
+		)
+	})
+
+	const blockCancelExecutionButton = computed(() => {
+		return (
+			blockCancelExecution.value ||
+			props.cancelExecutionDisabled ||
+			!props.isLastMessage ||
+			props.loading
+		)
+	})
+
 	const date = props.date || new Date()
 
 	const lastMessage = getLastMessage()
@@ -98,6 +142,14 @@
 		return lastMessage.fields && lastMessage.fields.length > 1
 	})
 
+	const showApprovePlan = computed(() => {
+		return props.isExecutionPlan
+	})
+
+	const showCancelExecutionButton = computed(() => {
+		return props.showCancelExecution
+	})
+
 	const commentButtons = [
 		{
 			id: 'confirm-btn',
@@ -170,6 +222,20 @@
 		emit('apply-all')
 	}
 
+	function onApproveProceedPlan() {
+		if (blockApproveProceed.value) return
+		blockApproveProceed.value = true
+
+		emit('approve-proceed-plan')
+	}
+
+	function onCancelExecution() {
+		if (blockCancelExecution.value) return
+		blockCancelExecution.value = true
+
+		emit('cancel-execution')
+	}
+
 	function submitFeedback() {
 		if (!currentFeedback.value) return