@quidgest/chatbot 0.6.0 → 0.6.1

package/src/components/MarkdownRender/MarkdownRender.vue

@@ -1,10 +1,10 @@
 <template>
 	<div
-		v-if="!isExecutionPlan"
+		v-if="!isExecutionPlan && !isExecutionProgress"
 		class="markdown-renderer"
 		v-html="renderedContent"></div>
 	<div
-		v-else
+		v-else-if="isExecutionPlan"
 		class="markdown-renderer">
 		<div v-html="executionPlanTitle"></div>
 		<div
@@ -12,6 +12,15 @@
 			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">
@@ -35,14 +44,14 @@
 	const renderedContent = computed(() => md.value.render(props.source))
 
 	const isExecutionPlan = computed(() => {
-		return props.source.toLowerCase().includes('**execution plan**')
+		return props.source.includes('data-type="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**'))
+		const lines = props.source.split(/\n|<br>/)
+		const titleLine = lines.find((line) => line.includes('data-type="execution-plan"'))
 
 		return titleLine ? md.value.render(titleLine) : ''
 	})
@@ -50,9 +59,34 @@
 	const executionPlanContent = computed(() => {
 		if (!isExecutionPlan.value) return ''
 
-		const lines = props.source.split('\n')
+		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.toLowerCase().includes('**execution plan**')
+			line.includes('data-type="execution-progress"')
 		)
 
 		if (titleIndex === -1) return ''

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

@@ -22,8 +22,28 @@
   }
 
   &__execution-plan-content {
-    background-color: #2d2d2d;
-    color: white;
+    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;

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