@quidgest/chatbot 0.5.3 → 0.5.4

package/src/components/FieldPreview/FieldPreview.vue

@@ -5,23 +5,24 @@
 				{{ texts.suggestionsForField }} <b>{{ props.name }}</b>
 			</span>
 		</div>
-		<div class="q-field-preview__content">
+		<div :class="classes">
 			<component
 				:is="previewComponent"
 				v-bind="previewComponentProps" />
 		</div>
 		<div class="q-field-preview__footer">
 			<q-button-group borderless>
-				<!-- <q-button
-                    :title="texts.regenerateResponse"
-                    :disabled="props.disabled"
-                    borderless
-                    @click="console.log('Regenerate response')">
-                    <q-icon icon="reset" />
-                </q-button> -->
 				<q-button
-					data-testid="apply-button"
+					:title="texts.regenerateResponse"
+					:disabled="blockRegenerateButton"
+					:readonly="blockRegenerateButton"
+					borderless
+					@click="regenerate">
+					<q-icon icon="reset" />
+				</q-button>
+				<q-button
 					:label="texts.apply"
+					data-testid="apply-button"
 					:disabled="blockApplyButton"
 					:readonly="blockApplyButton"
 					@click="emitApply">
@@ -43,13 +44,19 @@
 	const props = defineProps<FieldPreviewProps>()
 	const emit = defineEmits<{
 		(e: 'apply', text: unknown): void
+		(e: 'regenerate', name: string): void
 	}>()
 	const texts = useTexts()
 	const blockApply = ref(props.applied)
+	const blockRegenerate = ref(false)
 	const blockApplyButton = computed(() => {
 		return props.disabled || blockApply.value
 	})
 
+	const blockRegenerateButton = computed(() => {
+		return props.disabled || blockRegenerate.value
+	})
+
 	const previewComponent = computed(() => {
 		if (props.type === 'text' || props.type === 'multiline_text') return MarkdownRender
 
@@ -65,6 +72,14 @@
 		return componentProps
 	})
 
+	const classes = computed(() => {
+		const classes = ['q-field-preview__content']
+
+		if (previewComponent.value !== MarkdownRender) classes.push('preserve-whitespace')
+
+		return classes
+	})
+
 	function emitApply() {
 		if (blockApply.value) return
 		blockApply.value = true
@@ -73,4 +88,11 @@
 
 		emit('apply', text)
 	}
+
+	function regenerate() {
+		if (blockRegenerate.value) return
+		blockRegenerate.value = true
+
+		emit('regenerate', props.name)
+	}
 </script>

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

@@ -9,17 +9,11 @@ exports[`FieldPreview > renders correctly with default props 1`] = `
     </div>
   </div>
   <div class="q-field-preview__footer">
-    <div class="q-button-group" role="group">
-      <!-- <q-button
-                    :title="texts.regenerateResponse"
-                    :disabled="props.disabled"
-                    borderless
-                    @click="console.log('Regenerate response')">
-                    <q-icon icon="reset" />
-                </q-button> --><button type="button" class="q-button q-button--outlined q-button--primary q-button--borderless" data-testid="apply-button">
+    <div class="q-button-group" role="group"><button type="button" class="q-button q-button--outlined q-button--primary q-button--borderless" title="Regenerate response">
+        <!--v-if--><span class="q-button__content"><span data-test="reset"></span> </span>
+      </button><button type="button" class="q-button q-button--outlined q-button--primary q-button--borderless" data-testid="apply-button">
         <!--v-if--><span class="q-button__content"><span data-test="apply"></span> Apply</span>
-      </button>
-    </div>
+      </button></div>
   </div>
 </div>"
 `;

package/src/components/FieldPreview/field-preview.scss

@@ -20,6 +20,10 @@
     border-radius: 6px;
     padding: 0.75rem 1rem;
     font-size: 0.875rem;
+
+    &.preserve-whitespace {
+      white-space: pre-wrap;
+    }
   }
 
   &__footer {

package/src/components/MarkdownRender/MarkdownRender.vue

@@ -15,6 +15,7 @@
 	const md = ref(
 		new MarkdownIt({
 			html: true,
+			breaks: true,
 			...(props.options ?? {})
 		})
 	)

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

@@ -4,7 +4,8 @@ import { useChatMessages } from '../useChatMessages'
 // Utils
 import { describe, it, expect, beforeEach } from 'vitest'
 
-const { addChatMessage, clearMessages, getMessages, getLastMessage } = useChatMessages()
+const { addChatMessage, clearMessages, getMessages, getLastMessage, deleteMessageById } =
+	useChatMessages()
 
 beforeEach(() => {
 	// Reset chat messages before each test
@@ -48,4 +49,16 @@ describe('useChatMessages', () => {
 		expect(messages).toEqual([])
 		expect(messages.length).toBe(0)
 	})
+
+	it('should delete a message by ID', () => {
+		const msg1 = addChatMessage('First message', 'bot')
+		const msg2 = addChatMessage('Second message', 'user')
+
+		expect(getMessages().length).toBe(2)
+		deleteMessageById(msg1.id)
+
+		const messages = getMessages()
+		expect(messages.length).toBe(1)
+		expect(messages[0].id).toBe(msg2.id)
+	})
 })

package/src/composables/useChatApi.ts

@@ -56,6 +56,62 @@ export function useChatApi(apiEndpoint: string) {
 		})
 	}
 
+	async function sendPrompt(
+		formData: FormData,
+		onChunk: (chunk: string) => void,
+		onError?: (error: Error) => void
+	) {
+		isLoading.value = true
+		try {
+			return await useSSE(
+				{
+					method: 'POST',
+					url: `${apiEndpoint}/prompt/submit`,
+					data: formData
+				},
+				{
+					onMessage: (data) => {
+						onChunk(data)
+					},
+					onDone: () => (isLoading.value = false)
+				}
+			)
+		} catch (error) {
+			isLoading.value = false
+			onError?.(error as Error)
+			console.error('Error in sendPrompt:', error)
+			throw error
+		}
+	}
+
+	async function getJobResultData(
+		jobId: string,
+		onChunk: (chunk: string) => void,
+		onMetaData: (metadata: Record<string, unknown>) => void,
+		onRequestError?: (error: Error) => void
+	) {
+		isLoading.value = true
+		try {
+			return await useSSE(
+				{
+					method: 'POST',
+					url: `${apiEndpoint}/get-job-result`,
+					data: {
+						jobId
+					}
+				},
+				{
+					onMessage: (data) => onChunk(data),
+					onFieldMetadata: (metadata) => onMetaData(metadata),
+					onDone: () => (isLoading.value = false)
+				}
+			)
+		} catch (error) {
+			lastError.value = error as Error
+			onRequestError?.(error as Error)
+			isLoading.value = false
+		}
+	}
 	async function clearChatData(
 		username: string,
 		project: string,
@@ -74,58 +130,6 @@ export function useChatApi(apiEndpoint: string) {
 		})
 	}
 
-	async function sendPrompt(
-		formData: FormData,
-		onChunk: (chunk: string) => void,
-		onError?: (error: Error) => void
-	) {
-		isLoading.value = true
-		return await useSSE(
-			{
-				method: 'POST',
-				url: `${apiEndpoint}/prompt/submit`,
-				data: formData
-			},
-			{
-				onMessage: (data) => {
-					onChunk(data)
-				},
-				onError: (error) => {
-					lastError.value = error
-					onError?.(error)
-					console.error('Error in sendPrompt:', error)
-				},
-				onDone: () => (isLoading.value = false)
-			}
-		)
-	}
-
-	async function getFieldSuggestionData(
-		jobId: string,
-		onChunk: (chunk: string) => void,
-		onMetaData: (metadata: Record<string, unknown>) => void
-	) {
-		isLoading.value = true
-		return await useSSE(
-			{
-				method: 'POST',
-				url: `${apiEndpoint}/get-job-result`,
-				data: {
-					jobId
-				}
-			},
-			{
-				onMessage: (data) => onChunk(data),
-				onFieldMetadata: (metadata) => onMetaData(metadata),
-				onError: (error) => {
-					lastError.value = error
-					console.error('Error in getFieldSuggestionData:', error)
-				},
-				onDone: () => (isLoading.value = false)
-			}
-		)
-	}
-
 	async function handleFeedback(feedback: number, comment: string, sessionID: string) {
 		return await baseRequest<{ success: boolean }>({
 			method: 'POST',
@@ -143,7 +147,7 @@ export function useChatApi(apiEndpoint: string) {
 		lastError,
 		getChatData,
 		clearChatData,
-		getFieldSuggestionData,
+		getJobResultData,
 		sendPrompt,
 		handleFeedback
 	}

package/src/composables/useChatMessages.ts

@@ -41,6 +41,10 @@ export function useChatMessages() {
 		nextMessageId.value = 1
 	}
 
+	function deleteMessageById(messageId: number) {
+		messages.value = messages.value.filter((m) => m.id !== messageId)
+	}
+
 	function getMessages() {
 		return messages.value
 	}
@@ -51,6 +55,7 @@ export function useChatMessages() {
 		addChatMessage,
 		getLastMessage,
 		clearMessages,
-		getMessages
+		getMessages,
+		deleteMessageById
 	}
 }

package/src/composables/useTexts.ts

@@ -1,3 +1,6 @@
+/**
+ * TODO: Implement localization
+ */
 export function useTexts() {
 	return {
 		copy: 'Copy',
@@ -24,6 +27,7 @@ export function useTexts() {
 		cancelButton: 'Cancel',
 		senderImage: 'Sender Image',
 		imagePreview: 'Image preview',
+		regenerateResponsePrompt: 'Regenerate a new response for field {0}',
 		regenerateResponse: 'Regenerate response',
 		generatingResponse: 'Generating',
 		suggestionsForField: 'Suggestions for field:',

package/src/test/setup.ts

@@ -2,6 +2,7 @@ import { vi } from 'vitest'
 import { config } from '@vue/test-utils'
 
 import { createFramework } from '@quidgest/ui/framework'
+import { QSelect } from '@quidgest/ui/components'
 
 vi.mock('@quidgest/ui/components', async (importOriginal) => {
 	const original = await importOriginal<typeof import('@quidgest/ui/components')>()
@@ -34,3 +35,7 @@ config.global.plugins = [
 		}
 	}
 ]
+
+config.global.components = {
+	QSelect
+}