@quidgest/chatbot 0.5.9 → 0.6.1

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

@@ -196,4 +196,152 @@ 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
+	})
+
+	it('renders cancel execution button when showCancelExecution is true', () => {
+		const wrapper = mount(ChatBotMessageButtons, {
+			props: {
+				...props,
+				showCancelExecution: true,
+				isLastMessage: true
+			}
+		})
+
+		const cancelExecutionButton = wrapper.find('.q-chatbot__cancel-execution-button')
+
+		expect(cancelExecutionButton.exists()).toBe(true)
+		expect(cancelExecutionButton.text()).toBe('Cancel')
+	})
+
+	it('disables cancel execution button when not the last message', () => {
+		const wrapper = mount(ChatBotMessageButtons, {
+			props: {
+				...props,
+				showCancelExecution: true,
+				isLastMessage: false
+			}
+		})
+
+		const cancelExecutionButton = wrapper.find('.q-chatbot__cancel-execution-button')
+		expect(cancelExecutionButton.exists()).toBe(true)
+		expect(cancelExecutionButton.attributes('disabled')).toBeDefined()
+	})
+
+	it('does not render cancel execution button when showCancelExecution is false', () => {
+		const wrapper = mount(ChatBotMessageButtons, {
+			props: {
+				...props,
+				showCancelExecution: false,
+				isLastMessage: true
+			}
+		})
+
+		const cancelExecutionButton = wrapper.find('.q-chatbot__cancel-execution-button')
+		expect(cancelExecutionButton.exists()).toBe(false)
+	})
+
+	it('emits cancel-execution event when cancel execution button is clicked', async () => {
+		const wrapper = mount(ChatBotMessageButtons, {
+			props: {
+				...props,
+				showCancelExecution: true,
+				isLastMessage: true
+			}
+		})
+
+		const cancelExecutionButton = wrapper.find('.q-chatbot__cancel-execution-button')
+		await cancelExecutionButton.trigger('click')
+
+		expect(wrapper.emitted()['cancel-execution']).toBeTruthy()
+	})
+
+	it('does not emit cancel-execution if the button has already been clicked', async () => {
+		const wrapper = mount(ChatBotMessageButtons, {
+			props: {
+				...props,
+				showCancelExecution: true,
+				isLastMessage: true
+			}
+		})
+
+		const cancelExecutionButton = wrapper.find('.q-chatbot__cancel-execution-button')
+		await cancelExecutionButton.trigger('click')
+		await cancelExecutionButton.trigger('click') // Click again
+
+		expect(wrapper.emitted()['cancel-execution']).toBeTruthy()
+		expect(wrapper.emitted()['cancel-execution'].length).toBe(1) // Should only be emitted once
+	})
 })

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

@@ -9,6 +9,7 @@ exports[`ChatBotMessage > renders the component with default props 1`] = `
         <p>Hello, this is a test message.</p>
       </div>
     </div>
+    <!--v-if-->
   </div>
   <!--teleport start-->
   <transition-stub name="fade" appear="true" persisted="false" css="true">
@@ -28,6 +29,8 @@ 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-->
+      <!--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,8 @@ 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-->
+    <!--v-if-->
   </div>
 </div>
 <div class="q-chatbot__sender">11:47</div>"

package/src/components/ChatBotMessage/types.ts

@@ -61,6 +61,26 @@ export type ChatBotMessageProps = {
 	 * Additional fields for the message
 	 */
 	fields?: FieldData[]
+
+	/**
+	 * Flag to indicate if this is the last message
+	 */
+	isLastMessage?: boolean
+
+	/**
+	 * Flag to indicate if message is currently streaming
+	 */
+	isStreaming?: boolean
+
+	/**
+	 * Flag to show cancel execution button
+	 */
+	showCancelExecution?: boolean
+
+	/**
+	 * Flag to disable cancel execution button
+	 */
+	cancelExecutionDisabled?: boolean
 }
 
 export type ChatBotMessageButtonsProps = {
@@ -68,4 +88,9 @@ export type ChatBotMessageButtonsProps = {
 	showButtons: boolean
 	dateFormat: string
 	date?: Date
+	isLastMessage?: boolean
+	isExecutionPlan?: boolean
+	isStreaming?: boolean
+	showCancelExecution?: boolean
+	cancelExecutionDisabled?: boolean
 }

package/src/components/MarkdownRender/MarkdownRender.vue

@@ -1,7 +1,26 @@
 <template>
 	<div
+		v-if="!isExecutionPlan && !isExecutionProgress"
 		class="markdown-renderer"
 		v-html="renderedContent"></div>
+	<div
+		v-else-if="isExecutionPlan"
+		class="markdown-renderer">
+		<div v-html="executionPlanTitle"></div>
+		<div
+			v-if="executionPlanContent"
+			class="markdown-renderer__execution-plan-content"
+			v-html="executionPlanContent"></div>
+	</div>
+	<div
+		v-else-if="isExecutionProgress"
+		class="markdown-renderer">
+		<div v-html="executionProgressTitle"></div>
+		<div
+			v-if="executionProgressContent"
+			class="markdown-renderer__execution-progress-content"
+			v-html="executionProgressContent"></div>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -23,4 +42,56 @@
 	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.includes('data-type="execution-plan"')
+	})
+
+	const executionPlanTitle = computed(() => {
+		if (!isExecutionPlan.value) return ''
+
+		const lines = props.source.split(/\n|<br>/)
+		const titleLine = lines.find((line) => line.includes('data-type="execution-plan"'))
+
+		return titleLine ? md.value.render(titleLine) : ''
+	})
+
+	const executionPlanContent = computed(() => {
+		if (!isExecutionPlan.value) return ''
+
+		const lines = props.source.split(/\n|<br>/)
+		const titleIndex = lines.findIndex((line) => line.includes('data-type="execution-plan"'))
+
+		if (titleIndex === -1) return ''
+
+		const contentLines = lines.slice(titleIndex + 1).join('\n')
+		return md.value.render(contentLines)
+	})
+
+	const isExecutionProgress = computed(() => {
+		return props.source.includes('data-type="execution-progress"')
+	})
+
+	const executionProgressTitle = computed(() => {
+		if (!isExecutionProgress.value) return ''
+
+		const lines = props.source.split(/\n|<br>/)
+		const titleLine = lines.find((line) => line.includes('data-type="execution-progress"'))
+
+		return titleLine ? md.value.render(titleLine) : ''
+	})
+
+	const executionProgressContent = computed(() => {
+		if (!isExecutionProgress.value) return ''
+
+		const lines = props.source.split(/\n|<br>/)
+		const titleIndex = lines.findIndex((line) =>
+			line.includes('data-type="execution-progress"')
+		)
+
+		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,42 @@
     border-radius: 4px;
     font-size: 0.875rem;
   }
+
+  &__execution-plan-content {
+    background-color: var(--gray-dark);
+    color: var(--q-theme-on-neutral-dark);
+    padding: 0.75rem 1rem;
+    border-radius: 6px;
+    margin-top: 0.5rem;
+
+    ul,
+    ol {
+      margin: 0;
+      padding-left: 1.5rem;
+    }
+
+    p {
+      margin: 0;
+    }
+
+    hr {
+      border-color: var(--q-theme-on-neutral-dark);
+    }
+  }
+
+  &__execution-progress-content {
+    padding: 0.75rem 1rem;
+    border-radius: 6px;
+    margin-top: 0.5rem;
+
+    ul,
+    ol {
+      margin: 0;
+      padding-left: 1.5rem;
+    }
+
+    p {
+      margin: 0;
+    }
+  }
 }

package/src/components/PulseDots/PulseDots.vue

@@ -1,8 +1,8 @@
 <template>
 	<div class="pulsing-dots">
-		<span class="generating-text">
-			{{ texts.generatingResponse }}
-		</span>
+		<span
+			class="generating-text"
+			v-html="displayText"></span>
 		<div class="dots-container">
 			<span
 				v-for="(_, index) in dots"
@@ -16,9 +16,16 @@
 </template>
 
 <script setup lang="ts">
+	import { computed } from 'vue'
 	import { useTexts } from '@/composables/useTexts'
 
-	const dots = [1, 2, 3]
+	const props = defineProps<{
+		/** Text to display above the pulsing dots; if omitted, a default is used. */
+		text?: string
+	}>()
 
+	const dots = [1, 2, 3]
 	const texts = useTexts()
+
+	const displayText = computed(() => props.text || texts.generatingResponse)
 </script>

package/src/composables/useChatApi.ts

@@ -58,9 +58,10 @@ export function useChatApi(apiEndpoint: string) {
 
 	async function sendPrompt(
 		formData: FormData,
-		onChunk: (chunk: string) => void,
-		onStatus?: (payload: { event: string; data: { id: string; html: string } }) => void,
-		onError?: (error: Error) => void
+		onMessage: (chunk: string) => void,
+		onToolStatus?: (payload: { event: string; data: { id: string; html: string } }) => void,
+		onError?: (error: Error) => void,
+		onDone?: () => void
 	) {
 		isLoading.value = true
 		try {
@@ -72,12 +73,15 @@ export function useChatApi(apiEndpoint: string) {
 				},
 				{
 					onMessage: (data) => {
-						onChunk(data)
+						onMessage(data)
 					},
 					onToolStatus: (payload) => {
-						onStatus?.(payload)
+						onToolStatus?.(payload)
 					},
-					onDone: () => (isLoading.value = false)
+					onDone: () => {
+						isLoading.value = false
+						onDone?.()
+					}
 				}
 			)
 		} catch (error) {
@@ -88,9 +92,19 @@ export function useChatApi(apiEndpoint: string) {
 		}
 	}
 
+	async function cancelExecution(sessionId: string) {
+		return await baseRequest<{ success: boolean }>({
+			method: 'POST',
+			url: `/prompt/cancel-execution`,
+			data: {
+				sessionId
+			}
+		})
+	}
+
 	async function getJobResultData(
 		jobId: string,
-		onChunk: (chunk: string) => void,
+		onMessage: (chunk: string) => void,
 		onMetaData: (metadata: Record<string, unknown>) => void,
 		onRequestError?: (error: Error) => void
 	) {
@@ -105,7 +119,7 @@ export function useChatApi(apiEndpoint: string) {
 					}
 				},
 				{
-					onMessage: (data) => onChunk(data),
+					onMessage: (data) => onMessage(data),
 					onFieldMetadata: (metadata) => onMetaData(metadata),
 					onDone: () => (isLoading.value = false)
 				}
@@ -153,6 +167,7 @@ export function useChatApi(apiEndpoint: string) {
 		clearChatData,
 		getJobResultData,
 		sendPrompt,
+		cancelExecution,
 		handleFeedback
 	}
 }

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'
 	}
 }