@quidgest/chatbot 0.5.1 → 0.5.3-dev.0

package/src/components/ChatBotMessage/types.ts

@@ -1,70 +1,70 @@
 import { ChatBotMessageSender, FieldData } from '@/components/ChatBot/types'
 
 export type ChatBotMessageProps = {
-    /*
-     * Sender of the message
-     */
-    sender?: ChatBotMessageSender
+	/*
+	 * Sender of the message
+	 */
+	sender?: ChatBotMessageSender
 
-    /*
-     * Message to be displayed
-     */
-    message?: string
+	/*
+	 * Message to be displayed
+	 */
+	message?: string
 
-    /*
-     * Date of when the message was sent
-     */
-    date?: Date
+	/*
+	 * Date of when the message was sent
+	 */
+	date?: Date
 
-    /*
-     * If the message is loading
-     */
-    loading?: boolean
+	/*
+	 * If the message is loading
+	 */
+	loading?: boolean
 
-    /**
-     * Project locale
-     */
-    dateFormat: string
+	/**
+	 * Project locale
+	 */
+	dateFormat: string
 
-    /**
-     * Image preview URL
-     */
-    imagePreviewUrl?: string
+	/**
+	 * Image preview URL
+	 */
+	imagePreviewUrl?: string
 
-    /**
-     * Default api endpoint
-     */
-    apiEndpoint: string
+	/**
+	 * Default api endpoint
+	 */
+	apiEndpoint: string
 
-    /**
-     * Session ID
-     */
-    sessionID?: string
+	/**
+	 * Session ID
+	 */
+	sessionID?: string
 
-    /**
-     * User image
-     */
-    userImage: string
+	/**
+	 * User image
+	 */
+	userImage: string
 
-    /**
-     * Chatbot image
-     */
-    chatbotImage: string
+	/**
+	 * Chatbot image
+	 */
+	chatbotImage: string
 
-    /**
-     * Flag to mark welcome messages
-     */
-    isWelcomeMessage?: boolean
+	/**
+	 * Flag to mark welcome messages
+	 */
+	isWelcomeMessage?: boolean
 
-    /**
-     * Additional fields for the message
-     */
-    fields?: FieldData[]
+	/**
+	 * Additional fields for the message
+	 */
+	fields?: FieldData[]
 }
 
 export type ChatBotMessageButtonsProps = {
-    loading: boolean
-    showButtons: boolean
-    dateFormat: string
-    date?: Date
+	loading: boolean
+	showButtons: boolean
+	dateFormat: string
+	date?: Date
 }

package/src/components/ChatToolBar/ChatToolBar.vue

@@ -1,82 +1,87 @@
 <template>
-    <div class="q-chatbot__tools">
-        <div class="q-chatbot__tools__select">
-            <q-select
-                v-if="hasAgents"
-                v-model="selectedChat"
-                size="medium"
-                :items="availableChats"
-                @update:model-value="changeChat" />
-        </div>
+	<div class="q-chatbot__tools">
+		<div class="q-chatbot__tools__select">
+			<q-select
+				v-if="hasAgents"
+				v-model="selectedChat"
+				inline
+				class="q-chatbot__tools-select-input"
+				size="medium"
+				:items="availableChats"
+				@update:model-value="changeChat" />
+		</div>
 
-        <q-button
-            :title="clearChat"
-            :disabled="props.disabled"
-            borderless
-            @click="clear">
-            <q-icon icon="bin" />
-        </q-button>
-    </div>
+		<q-button
+			:title="clearChat"
+			:disabled="props.disabled"
+			class="q-chatbot__tools-clear"
+			borderless
+			@click="clear">
+			<q-icon icon="bin" />
+		</q-button>
+	</div>
 </template>
 
 <script setup lang="ts">
-    import { useTexts } from '@/composables/useTexts'
-    import { ChatToolBarProps } from './types'
-    import { computed, ref, watch } from 'vue'
+	import { QButton, QIcon } from '@quidgest/ui/components'
 
-    const { clearChat } = useTexts()
+	import { useTexts } from '@/composables/useTexts'
+	import { ChatToolBarProps } from './types'
+	import { computed, ref, watch } from 'vue'
 
-    const defaultChat = {
-        key: '',
-        value: 'Default Chat',
-        formId: ''
-    }
+	const props = withDefaults(defineProps<ChatToolBarProps>(), {
+		availableAgents: () => []
+	})
 
-    const props = withDefaults(defineProps<ChatToolBarProps>(), {
-        availableAgents: () => []
-    })
+	const emit = defineEmits<{
+		(e: 'clear'): void
+		(e: 'change-chat', value: { key: string; formId: string }): void
+	}>()
 
-    const emit = defineEmits<{
-        (e: 'clear'): void
-        (e: 'change-chat', value: { key: string; formId: string }): void
-    }>()
+	const { clearChat } = useTexts()
 
-    const hasAgents = computed(() => {
-        return props.availableAgents && props.availableAgents.length > 0
-    })
+	const defaultChat = {
+		key: '',
+		value: 'Default Chat',
+		formId: ''
+	}
 
-    const selectedChat = ref(props.selectedAgentKey || defaultChat.key)
-    watch(
-        () => props.selectedAgentKey,
-        (newValue) => {
-            selectedChat.value = newValue || defaultChat.key
-        }
-    )
+	const hasAgents = computed(() => {
+		return props.availableAgents && props.availableAgents.length > 0
+	})
 
-    const availableChats = computed(() => {
-        const chats = props.availableAgents?.map((agent) => ({
-            key: agent.key,
-            value: agent.value,
-            formId: agent.formId
-        }))
+	const selectedChat = ref(props.selectedAgentKey || defaultChat.key)
+	watch(
+		() => props.selectedAgentKey,
+		(newValue) => {
+			selectedChat.value = newValue || defaultChat.key
+		}
+	)
 
-        chats?.push(defaultChat)
-        return chats || [defaultChat]
-    })
+	const availableChats = computed(() => {
+		const chats = props.availableAgents?.map((agent) => ({
+			key: agent.key,
+			value: agent.value,
+			formId: agent.formId
+		}))
 
-    function clear() {
-        emit('clear')
-    }
+		chats?.push(defaultChat)
+		return chats || [defaultChat]
+	})
 
-    function changeChat(value: string) {
-        const item = availableChats.value.find((chat) => chat.key === value)
-        if (!item) return
+	function clear() {
+		emit('clear')
+	}
 
-        if (item.key === defaultChat.key) {
-            emit('change-chat', { key: '', formId: '' })
-            return
-        }
+	function changeChat(value: string) {
+		const item = availableChats.value.find((chat) => chat.key === value)
+		if (!item) return
 
-        emit('change-chat', item)
-    }
+		if (item.key === defaultChat.key) {
+			emit('change-chat', { key: '', formId: '' })
+			return
+		}
+
+		emit('change-chat', item)
+	}
 </script>

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

@@ -0,0 +1,138 @@
+// Components
+import { ChatToolBar } from '..'
+
+// Utils
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+// Types
+import type { ChatToolBarProps } from '../'
+import { nextTick } from 'vue'
+
+describe('ChatToolBar', () => {
+	const props: ChatToolBarProps = {
+		disabled: false,
+		availableAgents: [],
+		selectedAgentKey: ''
+	}
+
+	it('should render the component', () => {
+		const wrapper = mount(ChatToolBar, { props })
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('should emit clear event when clear button is clicked', async () => {
+		const wrapper = mount(ChatToolBar, { props })
+		const button = wrapper.find('.q-chatbot__tools-clear')
+
+		await button.trigger('click')
+		expect(wrapper.emitted()['clear']).toBeTruthy()
+	})
+
+	it('should disable the clear button when disabled prop is true', () => {
+		const wrapper = mount(ChatToolBar, { props: { ...props, disabled: true } })
+		const button = wrapper.find<HTMLButtonElement>('.q-chatbot__tools-clear')
+		expect(button.element.disabled).toBe(true)
+	})
+
+	it('should not render the select when no agents are provided', () => {
+		const wrapper = mount(ChatToolBar, { props })
+		expect(wrapper.find('.q-chatbot__tools-select-input').exists()).toBe(false)
+	})
+
+	it('should render the select when agents are provided', () => {
+		const wrapper = mount(ChatToolBar, {
+			props: {
+				...props,
+				availableAgents: [{ key: 'agent1', value: 'Agent 1', formId: 'key' }]
+			}
+		})
+		expect(wrapper.find('.q-chatbot__tools-select-input').exists()).toBe(true)
+	})
+
+	it('should emit change-agent event when a new agent is selected', async () => {
+		const wrapper = mount(ChatToolBar, {
+			props: {
+				...props,
+				availableAgents: [{ key: 'agent1', value: 'Agent 1', formId: 'key' }],
+				selectedAgentKey: ''
+			}
+		})
+
+		const select = wrapper.find('.q-field__control')
+		await select.trigger('click')
+
+		const overlay = wrapper.find('.q-overlay__content')
+
+		const item = overlay.find('.q-list-item')
+		await item.trigger('click')
+
+		expect(wrapper.emitted()['change-chat']).toBeTruthy()
+		expect(wrapper.emitted()['change-chat'][0]).toEqual([
+			{
+				key: 'agent1',
+				formId: 'key',
+				value: 'Agent 1'
+			}
+		])
+	})
+
+	it('should not emit change-agent if it receive a non-existing agent key', async () => {
+		const wrapper = mount(ChatToolBar, {
+			props: {
+				...props,
+				availableAgents: [
+					{ key: 'agent1', value: 'Agent 1', formId: 'key' },
+					{ key: 'agent2', value: 'Agent 2', formId: 'key' }
+				],
+				selectedAgentKey: 'agent1'
+			}
+		})
+
+		const select = wrapper.find('.q-field__control')
+		await select.trigger('click')
+
+		const overlay = wrapper.find('.q-overlay__content')
+
+		// Manually add a fake item that does not exist in the options
+		const fakeItem = document.createElement('div')
+		fakeItem.setAttribute('data-key', 'agent3')
+		overlay.element.appendChild(fakeItem)
+
+		await nextTick()
+		const item = overlay.find('[data-key="agent3"]')
+		await item.trigger('click')
+
+		expect(wrapper.emitted()['change-chat']).toBeFalsy()
+	})
+
+	it('shoudld emit change-agent when selecting the default option', async () => {
+		const wrapper = mount(ChatToolBar, {
+			props: {
+				...props,
+				availableAgents: [
+					{ key: 'agent1', value: 'Agent 1', formId: 'key' },
+					{ key: 'agent2', value: 'Agent 2', formId: 'key' }
+				],
+				selectedAgentKey: 'agent1'
+			}
+		})
+		const select = wrapper.find('.q-field__control')
+		await select.trigger('click')
+
+		const overlay = wrapper.find('.q-overlay__content')
+		const items = overlay.findAll('.q-list-item')
+
+		// Default options is always the last one
+		const defaultOption = items[items.length - 1]
+		await defaultOption.trigger('click')
+
+		expect(wrapper.emitted()['change-chat']).toBeTruthy()
+		expect(wrapper.emitted()['change-chat'][0]).toEqual([
+			{
+				key: '',
+				formId: ''
+			}
+		])
+	})
+})

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

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ChatToolBar > should render the component 1`] = `
+"<div class="q-chatbot__tools">
+  <div class="q-chatbot__tools__select">
+    <!--v-if-->
+  </div><button type="button" class="q-button q-button--outlined q-button--primary q-button--borderless q-chatbot__tools-clear" title="Clear chat">
+    <!--v-if--><span class="q-button__content"><span data-test="bin"></span> </span>
+  </button>
+</div>"
+`;

package/src/components/ChatToolBar/types.ts

@@ -1,18 +1,18 @@
 import { AvailableAgents } from '../ChatBot/types'
 
 export type ChatToolBarProps = {
-    /**
-     * If true, the toolbar will be disabled and not clickable.
-     */
-    disabled?: boolean
+	/**
+	 * If true, the toolbar will be disabled and not clickable.
+	 */
+	disabled?: boolean
 
-    /**
-     * Availabe Agents to select from.
-     */
-    availableAgents?: AvailableAgents[]
+	/**
+	 * Availabe Agents to select from.
+	 */
+	availableAgents?: AvailableAgents[]
 
-    /**
-     * The currently selected agent.
-     */
-    selectedAgentKey?: string
+	/**
+	 * The currently selected agent.
+	 */
+	selectedAgentKey?: string
 }

package/src/components/FieldPreview/FieldPreview.vue

@@ -1,78 +1,98 @@
 <template>
-    <div class="q-field-preview">
-        <div class="q-field-preview__toolbar">
-            <span>
-                Suggestions for field: <b>{{ props.name }}</b>
-            </span>
-        </div>
-        <div class="q-field-preview__content">
-            <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
-                    :label="texts.apply"
-                    :disabled="blockApplyButton"
-                    :readonly="blockApplyButton"
-                    @click="emitApply">
-                    <q-icon icon="apply" />
-                </q-button>
-            </q-button-group>
-        </div>
-    </div>
+	<div class="q-field-preview">
+		<div class="q-field-preview__toolbar">
+			<span>
+				{{ texts.suggestionsForField }} <b>{{ props.name }}</b>
+			</span>
+		</div>
+		<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="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">
+					<q-icon icon="apply" />
+				</q-button>
+			</q-button-group>
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
-    import { QButton, QIcon, QButtonGroup } from '@quidgest/ui/components'
-    import MarkdownRender from '../MarkdownRender/MarkdownRender.vue'
-    import { FieldPreviewProps } from './types'
-    import { useTexts } from '@/composables/useTexts'
-    import { computed, ref } from 'vue'
-    import { parseFieldValue } from '@/utils/helper'
+	import { QButton, QIcon, QButtonGroup } from '@quidgest/ui/components'
+	import { MarkdownRender } from '@/components/MarkdownRender'
+	import { FieldPreviewProps } from './types'
+	import { useTexts } from '@/composables/useTexts'
+	import { computed, ref } from 'vue'
+	import { parseFieldValue } from '@/utils/parseFieldValue'
 
-    const texts = useTexts()
-    const props = defineProps<FieldPreviewProps>()
-    const blockApply = ref(props.applied)
-    const blockApplyButton = computed(() => {
-        return props.disabled || blockApply.value
-    })
+	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 previewComponent = computed(() => {
-        if (props.type === 'text' || props.type === 'multiline_text')
-            return MarkdownRender
+	const blockRegenerateButton = computed(() => {
+		return props.disabled || blockRegenerate.value
+	})
 
-        return 'div'
-    })
+	const previewComponent = computed(() => {
+		if (props.type === 'text' || props.type === 'multiline_text') return MarkdownRender
 
-    const previewComponentProps = computed(() => {
-        const componentProps: Record<string, unknown> = {}
+		return 'div'
+	})
 
-        if (previewComponent.value === MarkdownRender)
-            componentProps.source = props.text
-        else componentProps.innerHTML = props.text
+	const previewComponentProps = computed(() => {
+		const componentProps: Record<string, unknown> = {}
 
-        return componentProps
-    })
+		if (previewComponent.value === MarkdownRender) componentProps.source = props.text
+		else componentProps.innerHTML = props.text
 
-    const emits = defineEmits<{
-        (e: 'apply', text: unknown): void
-    }>()
+		return componentProps
+	})
 
-    function emitApply() {
-        if (blockApply.value) return
-        blockApply.value = true
+	const classes = computed(() => {
+		const classes = ['q-field-preview__content']
 
-        const text = parseFieldValue(props.type, props.text)
+		if (previewComponent.value !== MarkdownRender) classes.push('preserve-whitespace')
 
-        emits('apply', text)
-    }
+		return classes
+	})
+
+	function emitApply() {
+		if (blockApply.value) return
+		blockApply.value = true
+
+		const text = parseFieldValue(props.type, props.text)
+
+		emit('apply', text)
+	}
+
+	function regenerate() {
+		if (blockRegenerate.value) return
+		blockRegenerate.value = true
+
+		emit('regenerate', props.name)
+	}
 </script>