@quidgest/chatbot 0.5.0 → 0.5.3-dev.0

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,19 @@
+// 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"><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>
+  </div>
+</div>"
+`;

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

@@ -1,34 +1,38 @@
 .q-field-preview {
-    position: relative;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  margin: 1rem 0.25rem;
+
+  &__toolbar {
+    z-index: 1;
     display: flex;
-    flex-direction: column;
-    margin: 1rem 0.25rem;
+    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;
+    &.preserve-whitespace {
+      white-space: pre-wrap;
     }
+  }
 
-    &__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,26 @@
 <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,
+			breaks: 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>"
+`;

package/src/components/PulseDots/pulse-dots.scss

@@ -1,37 +1,38 @@
 .pulsing-dots {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: row;
-    gap: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  gap: 0.25rem;
 }
 
 .generating-text {
-    font-size: 0.9rem;
-    color: var(--q-theme-primary);
+  font-size: 0.9rem;
+  color: var(--q-theme-primary);
 }
 
 .dots-container {
-    display: flex;
-    align-items: center;
-    gap: 0.1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.1rem;
 }
 
 .dot {
-    font-size: 16px;
-    line-height: 1;
-    animation: pulse 1s infinite;
-    color: var(--q-theme-primary);
+  font-size: 16px;
+  line-height: 1;
+  animation: pulse 1s infinite;
+  color: var(--q-theme-primary);
 }
 
 @keyframes pulse {
-    0%,
-    100% {
-        transform: scale(0.8);
-        opacity: 0.6;
-    }
-    50% {
-        transform: scale(1);
-        opacity: 1;
-    }
+  0%,
+  100% {
+    transform: scale(0.8);
+    opacity: 0.6;
+  }
+
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
 }

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

@@ -0,0 +1,64 @@
+// Composable
+import { useChatMessages } from '../useChatMessages'
+
+// Utils
+import { describe, it, expect, beforeEach } from 'vitest'
+
+const { addChatMessage, clearMessages, getMessages, getLastMessage, deleteMessageById } =
+	useChatMessages()
+
+beforeEach(() => {
+	// Reset chat messages before each test
+	clearMessages()
+})
+
+describe('useChatMessages', () => {
+	it('should add a chat message', () => {
+		addChatMessage('Hello, world!', 'user')
+
+		const messages = getMessages()
+		expect(messages.length).toBe(1)
+		expect(messages[0].message).toBe('Hello, world!')
+		expect(messages[0].sender).toBe('user')
+	})
+
+	it('should set default sender to bot', () => {
+		addChatMessage('Hello, world!')
+		const message = getLastMessage()
+
+		expect(message).toBeDefined()
+		expect(message?.sender).toBe('bot')
+		expect(message?.message).toBe('Hello, world!')
+	})
+
+	it('should get the last message', () => {
+		addChatMessage('First message', 'bot')
+		addChatMessage('Second message', 'user')
+
+		const lastMessage = getLastMessage()
+		expect(lastMessage).toBeDefined()
+		expect(lastMessage?.message).toBe('Second message')
+		expect(lastMessage?.sender).toBe('user')
+	})
+
+	it('should clear all messages', () => {
+		addChatMessage('Hello, world!', 'user')
+		clearMessages()
+
+		const messages = getMessages()
+		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)
+	})
+})