@quidgest/chatbot 0.5.8 → 0.6.0

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:#2d2d2d;color:#fff;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}.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.8",
+    "version": "0.6.0",
     "type": "module",
     "license": "UNLICENSED",
     "main": "dist/index.cjs",

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,10 @@
 						:api-endpoint="props.apiEndpoint"
 						:session-i-d="message.sessionID"
 						:fields="message.fields"
+						:is-last-message="index === messages.length - 1"
 						@regenerate="onFieldRegenerate"
-						@apply-fields="applyFields" />
+						@apply-fields="applyFields"
+						@send-message="sendMessage" />
 				</div>
 			</div>
 		</div>

package/src/components/ChatBotMessage/ChatBotMessage.vue

@@ -63,9 +63,12 @@
 			:show-buttons="isBotMessageAndNotDefault"
 			:loading="props.loading"
 			:date-format="props.dateFormat"
+			:is-execution-plan="isExecutionPlan"
+			:is-last-message="props.isLastMessage"
 			@copy-response="copyResponse"
 			@submit-feedback="onSubmitFeedback"
-			@apply-all="applyAllFields" />
+			@apply-all="applyAllFields"
+			@approve-proceed-plan="onApproveProceedPlan" />
 	</div>
 </template>
 
@@ -93,12 +96,14 @@
 		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
 	}>()
 
 	const texts = useTexts()
@@ -128,6 +133,19 @@
 		return ext ?? ''
 	})
 
+	const isExecutionPlan = computed(() => {
+		return (
+			props.sender === 'bot' &&
+			!props.isWelcomeMessage &&
+			!!props.message &&
+			props.message.toLowerCase().includes('**execution plan**')
+		)
+	})
+
+	function onApproveProceedPlan() {
+		emit('send-message', texts.approveProceedPlan)
+	}
+
 	function copyResponse() {
 		if (!props.message) return
 

package/src/components/ChatBotMessage/ChatBotMessageButtons.vue

@@ -46,14 +46,27 @@
 			</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-group>
 	</div>
@@ -76,6 +89,7 @@
 		(e: 'submit-feedback', feedback: number, comment: string): void
 		(e: 'copy-response'): void
 		(e: 'apply-all'): void
+		(e: 'approve-proceed-plan'): void
 	}>()
 	const texts = useTexts()
 	const { getLastMessage } = useChatMessages()
@@ -84,10 +98,16 @@
 	const feedbackComment = ref('')
 	const currentFeedback = ref<number | null>(null)
 	const blockApplyAll = ref(false)
+	const blockApproveProceed = ref(false)
+
 	const blockApplyAllButton = computed(() => {
 		return props.loading || blockApplyAll.value
 	})
 
+	const blockApproveProceedButton = computed(() => {
+		return props.loading || blockApproveProceed.value || !props.isLastMessage
+	})
+
 	const date = props.date || new Date()
 
 	const lastMessage = getLastMessage()
@@ -98,6 +118,10 @@
 		return lastMessage.fields && lastMessage.fields.length > 1
 	})
 
+	const showApprovePlan = computed(() => {
+		return props.isExecutionPlan
+	})
+
 	const commentButtons = [
 		{
 			id: 'confirm-btn',
@@ -170,6 +194,13 @@
 		emit('apply-all')
 	}
 
+	function onApproveProceedPlan() {
+		if (blockApproveProceed.value) return
+		blockApproveProceed.value = true
+
+		emit('approve-proceed-plan')
+	}
+
 	function submitFeedback() {
 		if (!currentFeedback.value) return
 

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

@@ -196,4 +196,78 @@ describe('ChatBotMessageButtons', () => {
 		// The date should be in the current locale format
 		expect(dateElement.text()).toBe(expectedFormat)
 	})
+
+	it('renders approve plan button for execution plan messages', () => {
+		const wrapper = mount(ChatBotMessageButtons, {
+			props: {
+				...props,
+				isExecutionPlan: true,
+				isLastMessage: true
+			}
+		})
+
+		const approveProceedButton = wrapper.find('.q-chatbot__approve-proceed-plan-button')
+
+		expect(approveProceedButton.exists()).toBe(true)
+		expect(approveProceedButton.text()).toBe('Approve & proceed')
+	})
+
+	it('disables approve plan button when not the last message', () => {
+		const wrapper = mount(ChatBotMessageButtons, {
+			props: {
+				...props,
+				isExecutionPlan: true,
+				isLastMessage: false
+			}
+		})
+
+		const approveProceedButton = wrapper.find('.q-chatbot__approve-proceed-plan-button')
+		expect(approveProceedButton.exists()).toBe(true)
+		expect(approveProceedButton.attributes('disabled')).toBeDefined()
+	})
+
+	it('does not render approve plan button when not an execution plan', () => {
+		const wrapper = mount(ChatBotMessageButtons, {
+			props: {
+				...props,
+				isExecutionPlan: false,
+				isLastMessage: true
+			}
+		})
+
+		const approveProceedButton = wrapper.find('.q-chatbot__approve-proceed-plan-button')
+		expect(approveProceedButton.exists()).toBe(false)
+	})
+
+	it('emits approve-proceed-plan event when approve button is clicked', async () => {
+		const wrapper = mount(ChatBotMessageButtons, {
+			props: {
+				...props,
+				isExecutionPlan: true,
+				isLastMessage: true
+			}
+		})
+
+		const approveProceedButton = wrapper.find('.q-chatbot__approve-proceed-plan-button')
+		await approveProceedButton.trigger('click')
+
+		expect(wrapper.emitted()['approve-proceed-plan']).toBeTruthy()
+	})
+
+	it('does not emit approve-proceed-plan if the button has already been clicked', async () => {
+		const wrapper = mount(ChatBotMessageButtons, {
+			props: {
+				...props,
+				isExecutionPlan: true,
+				isLastMessage: true
+			}
+		})
+
+		const approveProceedButton = wrapper.find('.q-chatbot__approve-proceed-plan-button')
+		await approveProceedButton.trigger('click')
+		await approveProceedButton.trigger('click') // Click again
+
+		expect(wrapper.emitted()['approve-proceed-plan']).toBeTruthy()
+		expect(wrapper.emitted()['approve-proceed-plan'].length).toBe(1) // Should only be emitted once
+	})
 })

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

@@ -28,6 +28,7 @@ exports[`ChatBotMessage > renders the component with default props 1`] = `
         <!--v-if--><span class="q-button__content"><span data-test="copy-content"></span> </span>
       </button>
       <!--v-if-->
+      <!--v-if-->
     </div>
   </div>
   <div class="q-chatbot__sender">11:47</div>

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

@@ -19,6 +19,7 @@ exports[`ChatBotMessageButtons > renders correctly with default props 1`] = `
       <!--v-if--><span class="q-button__content"><span data-test="copy-content"></span> </span>
     </button>
     <!--v-if-->
+    <!--v-if-->
   </div>
 </div>
 <div class="q-chatbot__sender">11:47</div>"

package/src/components/ChatBotMessage/types.ts

@@ -61,6 +61,11 @@ export type ChatBotMessageProps = {
 	 * Additional fields for the message
 	 */
 	fields?: FieldData[]
+
+	/**
+	 * Flag to indicate if this is the last message
+	 */
+	isLastMessage?: boolean
 }
 
 export type ChatBotMessageButtonsProps = {
@@ -68,4 +73,6 @@ export type ChatBotMessageButtonsProps = {
 	showButtons: boolean
 	dateFormat: string
 	date?: Date
+	isExecutionPlan?: boolean
+	isLastMessage?: boolean
 }

package/src/components/MarkdownRender/MarkdownRender.vue

@@ -1,7 +1,17 @@
 <template>
 	<div
+		v-if="!isExecutionPlan"
 		class="markdown-renderer"
 		v-html="renderedContent"></div>
+	<div
+		v-else
+		class="markdown-renderer">
+		<div v-html="executionPlanTitle"></div>
+		<div
+			v-if="executionPlanContent"
+			class="markdown-renderer__execution-plan-content"
+			v-html="executionPlanContent"></div>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -23,4 +33,31 @@
 	if (props.plugins) props.plugins.forEach((plugin) => md.value.use(plugin))
 
 	const renderedContent = computed(() => md.value.render(props.source))
+
+	const isExecutionPlan = computed(() => {
+		return props.source.toLowerCase().includes('**execution plan**')
+	})
+
+	const executionPlanTitle = computed(() => {
+		if (!isExecutionPlan.value) return ''
+
+		const lines = props.source.split('\n')
+		const titleLine = lines.find((line) => line.toLowerCase().includes('**execution plan**'))
+
+		return titleLine ? md.value.render(titleLine) : ''
+	})
+
+	const executionPlanContent = computed(() => {
+		if (!isExecutionPlan.value) return ''
+
+		const lines = props.source.split('\n')
+		const titleIndex = lines.findIndex((line) =>
+			line.toLowerCase().includes('**execution plan**')
+		)
+
+		if (titleIndex === -1) return ''
+
+		const contentLines = lines.slice(titleIndex + 1).join('\n')
+		return md.value.render(contentLines)
+	})
 </script>

package/src/components/MarkdownRender/markdown-render.scss

@@ -20,4 +20,22 @@
     border-radius: 4px;
     font-size: 0.875rem;
   }
+
+  &__execution-plan-content {
+    background-color: #2d2d2d;
+    color: white;
+    padding: 0.75rem 1rem;
+    border-radius: 6px;
+    margin-top: 0.5rem;
+
+    ul,
+    ol {
+      margin: 0;
+      padding-left: 1.5rem;
+    }
+
+    p {
+      margin: 0;
+    }
+  }
 }

package/src/composables/__tests__/useSSE.spec.ts

@@ -129,4 +129,100 @@ describe('useSSE', () => {
 		expect(consoleWarnSpy).toHaveBeenCalledWith('Unknown event type: unknown_event')
 		consoleWarnSpy.mockRestore()
 	})
+
+	// Tests for handling events split across chunks (bug reproduction)
+	describe('Events split across multiple chunks', () => {
+		it('should handle event split in the middle of data field', async () => {
+			// Simulate network splitting an event across two chunks
+			const stream = createMockStream(['event: message\ndata: {"val', 'ue":"hello"}\n\n'])
+			mockedAxios.mockResolvedValue({ data: stream })
+
+			await useSSE({ url: '/sse' }, handlers)
+
+			expect(handlers.onMessage).toHaveBeenCalledWith('hello')
+			expect(handlers.onDone).toHaveBeenCalled()
+		})
+
+		it('should handle multiple events split across multiple chunks', async () => {
+			// Simulate the real scenario from the bug report
+			const stream = createMockStream([
+				'event: message\ndata: {"value":"The"}\n\nevent: message\ndata: {"val',
+				'ue":" capital"}\n\nevent: message\ndata: {"value":" of"}\n\n',
+				'event: message\ndata: {"value":" France"}\n\n'
+			])
+			mockedAxios.mockResolvedValue({ data: stream })
+
+			await useSSE({ url: '/sse' }, handlers)
+
+			// Should receive all 4 messages
+			expect(handlers.onMessage).toHaveBeenCalledTimes(4)
+			expect(handlers.onMessage).toHaveBeenNthCalledWith(1, 'The')
+			expect(handlers.onMessage).toHaveBeenNthCalledWith(2, ' capital')
+			expect(handlers.onMessage).toHaveBeenNthCalledWith(3, ' of')
+			expect(handlers.onMessage).toHaveBeenNthCalledWith(4, ' France')
+			expect(handlers.onDone).toHaveBeenCalled()
+		})
+
+		it('should handle event split between event name and data', async () => {
+			const stream = createMockStream([
+				'event: message\n',
+				'data: {"value":"split event"}\n\n'
+			])
+			mockedAxios.mockResolvedValue({ data: stream })
+
+			await useSSE({ url: '/sse' }, handlers)
+
+			expect(handlers.onMessage).toHaveBeenCalledWith('split event')
+			expect(handlers.onDone).toHaveBeenCalled()
+		})
+
+		it('should handle event split right after event separator', async () => {
+			const stream = createMockStream([
+				'event: message\ndata: {"value":"first"}\n\n',
+				'event: message\ndata: {"value":"second"}\n\n'
+			])
+			mockedAxios.mockResolvedValue({ data: stream })
+
+			await useSSE({ url: '/sse' }, handlers)
+
+			expect(handlers.onMessage).toHaveBeenCalledTimes(2)
+			expect(handlers.onMessage).toHaveBeenNthCalledWith(1, 'first')
+			expect(handlers.onMessage).toHaveBeenNthCalledWith(2, 'second')
+			expect(handlers.onDone).toHaveBeenCalled()
+		})
+
+		it('should handle complex JSON split across chunks', async () => {
+			const stream = createMockStream([
+				'event: field_metadata\ndata: {"foo":"bar","nested":{"key',
+				'":"value"}}\n\n'
+			])
+			mockedAxios.mockResolvedValue({ data: stream })
+
+			await useSSE({ url: '/sse' }, handlers)
+
+			expect(handlers.onFieldMetadata).toHaveBeenCalledWith({
+				foo: 'bar',
+				nested: { key: 'value' }
+			})
+			expect(handlers.onDone).toHaveBeenCalled()
+		})
+
+		it('should handle event split in very small chunks', async () => {
+			// Extreme case: each character in a separate chunk
+			const stream = createMockStream([
+				'event: ',
+				'message\n',
+				'data: ',
+				'{"value":',
+				'"test"}',
+				'\n\n'
+			])
+			mockedAxios.mockResolvedValue({ data: stream })
+
+			await useSSE({ url: '/sse' }, handlers)
+
+			expect(handlers.onMessage).toHaveBeenCalledWith('test')
+			expect(handlers.onDone).toHaveBeenCalled()
+		})
+	})
 })

package/src/composables/useSSE.ts

@@ -30,6 +30,7 @@ export async function useSSE(config: AxiosRequestConfig, handlers: SSEvents) {
 
 	const reader = stream.getReader()
 	const decoder = new TextDecoder()
+	let buffer = '' // Buffer to accumulate incomplete events across chunks
 
 	while (true) {
 		const { done, value } = await reader.read()
@@ -39,7 +40,12 @@ export async function useSSE(config: AxiosRequestConfig, handlers: SSEvents) {
 		}
 
 		const chunk = decoder.decode(value, { stream: true })
-		const events = chunk.split(/\n\n+/)
+		buffer += chunk // Append chunk to buffer
+		const events = buffer.split(/\n\n+/)
+
+		// Keep the last element in buffer (might be incomplete)
+		// Process all complete events (all except the last one)
+		buffer = events.pop() || ''
 
 		for (const eventBlock of events) {
 			const lines = eventBlock.trim().split('\n')

package/src/composables/useTexts.ts

@@ -31,6 +31,8 @@ export function useTexts() {
 		regenerateResponse: 'Regenerate response',
 		generatingResponse: 'Generating',
 		suggestionsForField: 'Suggestions for field:',
-		fileUpload: 'Upload File'
+		fileUpload: 'Upload File',
+		approveProceed: 'Approve & proceed',
+		approveProceedPlan: 'Approve & proceed with plan'
 	}
 }