@quidgest/chatbot 0.5.1 → 0.5.3

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,76 @@
 <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
+	<div class="q-field-preview">
+		<div class="q-field-preview__toolbar">
+			<span>
+				{{ texts.suggestionsForField }} <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>
+				<q-button
+					data-testid="apply-button"
+					:label="texts.apply"
+					: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
+	}>()
+	const texts = useTexts()
+	const blockApply = ref(props.applied)
+	const blockApplyButton = computed(() => {
+		return props.disabled || blockApply.value
+	})
 
-    const previewComponent = computed(() => {
-        if (props.type === 'text' || props.type === 'multiline_text')
-            return MarkdownRender
+	const previewComponent = computed(() => {
+		if (props.type === 'text' || props.type === 'multiline_text') return MarkdownRender
 
-        return 'div'
-    })
+		return 'div'
+	})
 
-    const previewComponentProps = computed(() => {
-        const componentProps: Record<string, unknown> = {}
+	const previewComponentProps = computed(() => {
+		const componentProps: Record<string, unknown> = {}
 
-        if (previewComponent.value === MarkdownRender)
-            componentProps.source = props.text
-        else componentProps.innerHTML = props.text
+		if (previewComponent.value === MarkdownRender) componentProps.source = props.text
+		else componentProps.innerHTML = props.text
 
-        return componentProps
-    })
+		return componentProps
+	})
 
-    const emits = defineEmits<{
-        (e: 'apply', text: unknown): void
-    }>()
+	function emitApply() {
+		if (blockApply.value) return
+		blockApply.value = true
 
-    function emitApply() {
-        if (blockApply.value) return
-        blockApply.value = true
+		const text = parseFieldValue(props.type, props.text)
 
-        const text = parseFieldValue(props.type, props.text)
-
-        emits('apply', text)
-    }
+		emit('apply', text)
+	}
 </script>

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

@@ -0,0 +1,72 @@
+// Componets
+import { FieldPreview } from '..'
+
+// Utils
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+
+// Types
+import type { FieldPreviewProps } from '..'
+
+describe('FieldPreview', () => {
+	const props: FieldPreviewProps = {
+		name: 'Test Field',
+		text: 'Hello, World!',
+		type: 'text',
+		disabled: false,
+		applied: false
+	}
+
+	it('renders correctly with default props', () => {
+		const wrapper = mount(FieldPreview, {
+			props: { ...props }
+		})
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('renders the correct componentd for text fields', async () => {
+		const wrapper = mount(FieldPreview, {
+			props: { ...props }
+		})
+
+		expect(wrapper.find('.markdown-renderer').exists()).toBe(true)
+	})
+
+	it('renders the correct componentd for multiline_text fields', async () => {
+		const wrapper = mount(FieldPreview, {
+			props: { ...props, type: 'multiline_text' }
+		})
+		expect(wrapper.find('.markdown-renderer').exists()).toBe(true)
+	})
+
+	it('renders the correct default component for unknown field types', async () => {
+		const wrapper = mount(FieldPreview, {
+			props: { ...props, type: 'boolean' }
+		})
+
+		const textElement = wrapper.find('.q-field-preview__content div')
+		expect(textElement.exists()).toBe(true)
+	})
+
+	it('emits the right event on apply buttons is clicked', async () => {
+		const wrapper = mount(FieldPreview, {
+			props: { ...props }
+		})
+
+		const applyButton = wrapper.find('[data-testid="apply-button"]')
+		await applyButton.trigger('click')
+
+		expect(wrapper.emitted()['apply']).toBeTruthy()
+	})
+
+	it('does not emit the apply event when the button is disabled', async () => {
+		const wrapper = mount(FieldPreview, {
+			props: { ...props, applied: true }
+		})
+
+		const applyButton = wrapper.find('[data-testid="apply-button"]')
+		await applyButton.trigger('click')
+
+		expect(wrapper.emitted()['apply']).toBeFalsy()
+	})
+})

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

@@ -0,0 +1,25 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`FieldPreview > renders correctly with default props 1`] = `
+"<div class="q-field-preview">
+  <div class="q-field-preview__toolbar"><span>Suggestions for field: <b>Test Field</b></span></div>
+  <div class="q-field-preview__content">
+    <div class="markdown-renderer">
+      <p>Hello, World!</p>
+    </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">
+        <!--v-if--><span class="q-button__content"><span data-test="apply"></span> Apply</span>
+      </button>
+    </div>
+  </div>
+</div>"
+`;

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

@@ -1,34 +1,34 @@
 .q-field-preview {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    margin: 1rem 0.25rem;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  margin: 1rem 0.25rem;
 
-    &__toolbar {
-        z-index: 1;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0.1rem 0.2rem;
-    }
+  &__toolbar {
+    z-index: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.1rem 0.2rem;
+  }
 
-    &__content {
-        position: relative;
-        background-color: #f5f5f5;
-        border: 1px solid #e0e0e0;
-        border-radius: 6px;
-        padding: 0.75rem 1rem;
-        font-size: 0.875rem;
-    }
+  &__content {
+    position: relative;
+    background-color: #f5f5f5;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    padding: 0.75rem 1rem;
+    font-size: 0.875rem;
+  }
 
-    &__footer {
-        display: flex;
-        flex-direction: row;
-        margin-top: 0.25rem;
-    }
+  &__footer {
+    display: flex;
+    flex-direction: row;
+    margin-top: 0.25rem;
+  }
 }
 
 .q-field-preview:first-child {
-    margin: 0 1rem 0.25rem 0.25rem;
+  margin: 0 1rem 0.25rem 0.25rem;
 }

package/src/components/FieldPreview/types.ts

@@ -1,7 +1,7 @@
 export type FieldPreviewProps = {
-    name: string
-    text: string
-    type: string
-    disabled?: boolean
-    applied?: boolean
+	name: string
+	text: string
+	type: string
+	disabled?: boolean
+	applied?: boolean
 }

package/src/components/MarkdownRender/MarkdownRender.vue

@@ -1,25 +1,25 @@
 <template>
-    <div
-        class="markdown-renderer"
-        v-html="renderedContent"></div>
+	<div
+		class="markdown-renderer"
+		v-html="renderedContent"></div>
 </template>
 
 <script setup lang="ts">
-    import { ref, computed } from 'vue'
-    import type { MarkdownRenderProps } from './types'
+	import { ref, computed } from 'vue'
+	import type { MarkdownRenderProps } from './types'
 
-    import MarkdownIt from 'markdown-it'
+	import MarkdownIt from 'markdown-it'
 
-    const props = defineProps<MarkdownRenderProps>()
+	const props = defineProps<MarkdownRenderProps>()
 
-    const md = ref(
-        new MarkdownIt({
-            html: true,
-            ...(props.options ?? {})
-        })
-    )
+	const md = ref(
+		new MarkdownIt({
+			html: true,
+			...(props.options ?? {})
+		})
+	)
 
-    if (props.plugins) props.plugins.forEach((plugin) => md.value.use(plugin))
+	if (props.plugins) props.plugins.forEach((plugin) => md.value.use(plugin))
 
-    const renderedContent = computed(() => md.value.render(props.source))
+	const renderedContent = computed(() => md.value.render(props.source))
 </script>

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

@@ -0,0 +1,68 @@
+// Components
+import { MarkdownRender } from '..'
+
+// Utils
+import { mount } from '@vue/test-utils'
+import { describe, it, expect, vi } from 'vitest'
+
+// Types
+import type MarkdownIt from 'markdown-it'
+
+// Mock a simple markdown-it plugin
+const mockPlugin = vi.fn((md: MarkdownIt) => {
+	md.core.ruler.push('test:rule', (state) => {
+		state.tokens.push({
+			type: 'test_token',
+			content: 'test',
+			tag: '',
+			attrs: null,
+			map: null,
+			nesting: 0,
+			level: 0,
+			children: null,
+			markup: '',
+			info: '',
+			meta: undefined,
+			block: false,
+			hidden: false,
+			attrIndex: function () {
+				throw new Error()
+			},
+			attrPush: function () {
+				throw new Error()
+			},
+			attrSet: function () {
+				throw new Error()
+			},
+			attrGet: function (): string | null {
+				throw new Error()
+			},
+			attrJoin: function () {
+				throw new Error()
+			}
+		})
+	})
+})
+
+describe('MarkdownRender', () => {
+	it('renders correctly with default props', () => {
+		const wrapper = mount(MarkdownRender, {
+			props: {
+				source: '# Hello World\nThis is a **markdown** test.'
+			}
+		})
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('renders correctly with custom markdown-it plugins', () => {
+		const wrapper = mount(MarkdownRender, {
+			props: {
+				source: '',
+				plugins: [mockPlugin]
+			}
+		})
+
+		expect(mockPlugin).toHaveBeenCalled()
+		expect(wrapper.props('plugins')).toHaveLength(1)
+	})
+})

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

@@ -0,0 +1,8 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MarkdownRender > renders correctly with default props 1`] = `
+"<div class="markdown-renderer">
+  <h1>Hello World</h1>
+  <p>This is a <strong>markdown</strong> test.</p>
+</div>"
+`;

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

@@ -1,24 +1,23 @@
 .markdown-renderer {
-    pre,
-    code {
-        white-space: pre-wrap;
-        word-break: break-word;
-        overflow-wrap: break-word;
-        overflow-x: auto;
-    }
+  pre,
+  code {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    overflow-x: auto;
+  }
 
-    pre {
-        position: relative;
-        background-color: #f5f5f5;
-        border: 1px solid #e0e0e0;
-        border-radius: 6px;
-        padding: 0.75rem 1rem;
-        font-size: 0.875rem;
-    }
+  pre {
+    position: relative;
+    background-color: #f5f5f5;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    padding: 0.75rem 1rem;
+    font-size: 0.875rem;
+  }
 
-    code {
-        padding: 0.2rem 0.4rem;
-        border-radius: 4px;
-        font-size: 0.875rem;
-    }
+  code {
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    font-size: 0.875rem;
+  }
 }

package/src/components/MarkdownRender/types.ts

@@ -1,7 +1,7 @@
 import type { Options, PluginSimple } from 'markdown-it'
 
 export interface MarkdownRenderProps {
-    source: string
-    options?: Options
-    plugins?: PluginSimple[]
+	source: string
+	options?: Options
+	plugins?: PluginSimple[]
 }

package/src/components/PulseDots/PulseDots.vue

@@ -1,24 +1,24 @@
 <template>
-    <div class="pulsing-dots">
-        <span class="generating-text">
-            {{ texts.generatingResponse }}
-        </span>
-        <div class="dots-container">
-            <span
-                v-for="(_, index) in dots"
-                :key="index"
-                class="dot"
-                :style="{ animationDelay: index * 0.2 + 's' }">
-                &bull;
-            </span>
-        </div>
-    </div>
+	<div class="pulsing-dots">
+		<span class="generating-text">
+			{{ texts.generatingResponse }}
+		</span>
+		<div class="dots-container">
+			<span
+				v-for="(_, index) in dots"
+				:key="index"
+				class="dot"
+				:style="{ animationDelay: index * 0.2 + 's' }">
+				&bull;
+			</span>
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
-    import { useTexts } from '@/composables/useTexts'
+	import { useTexts } from '@/composables/useTexts'
 
-    const dots = [1, 2, 3]
+	const dots = [1, 2, 3]
 
-    const texts = useTexts()
+	const texts = useTexts()
 </script>

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

@@ -0,0 +1,35 @@
+// Components
+import PulseDots from '../PulseDots.vue'
+
+// Utils
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import { useTexts } from '@/composables/useTexts'
+
+describe('PulseDots', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(PulseDots)
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('renders the correct number of dots', () => {
+		const wrapper = mount(PulseDots)
+		const dots = wrapper.findAll('.dot')
+		expect(dots.length).toBe(3)
+	})
+
+	it('uses the correct generating text', () => {
+		const { generatingResponse } = useTexts()
+		const wrapper = mount(PulseDots)
+		expect(wrapper.text()).toContain(generatingResponse)
+	})
+
+	it('applies correct animation delays to dots', () => {
+		const wrapper = mount(PulseDots)
+		const dots = wrapper.findAll('.dot')
+
+		dots.forEach((dot, index) => {
+			expect(dot.attributes('style')).toContain(`animation-delay: ${index * 0.2}s`)
+		})
+	})
+})

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

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`PulseDots > renders correctly 1`] = `
+"<div class="pulsing-dots"><span class="generating-text">Generating</span>
+  <div class="dots-container"><span class="dot" style="animation-delay: 0s;"> • </span><span class="dot" style="animation-delay: 0.2s;"> • </span><span class="dot" style="animation-delay: 0.4s;"> • </span></div>
+</div>"
+`;

package/src/components/PulseDots/__tests__/__snapshots__/pulse-dots.spec.ts.snap

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`PulseDots > renders correctly 1`] = `
+"<div class="pulsing-dots"><span class="generating-text">Generating</span>
+  <div class="dots-container"><span class="dot" style="animation-delay: 0s;"> • </span><span class="dot" style="animation-delay: 0.2s;"> • </span><span class="dot" style="animation-delay: 0.4s;"> • </span></div>
+</div>"
+`;