@quidgest/chatbot 0.4.0 → 0.5.0

package/src/components/ChatToolBar/index.ts

@@ -0,0 +1,5 @@
+import ChatToolBar from './ChatToolBar.vue'
+import type { ChatToolBarProps } from './types'
+
+export { ChatToolBar }
+export type { ChatToolBarProps }

package/src/components/ChatToolBar/types.ts

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

package/src/components/FieldPreview/FieldPreview.vue

@@ -0,0 +1,78 @@
+<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>
+</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'
+
+    const texts = useTexts()
+    const props = defineProps<FieldPreviewProps>()
+    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
+
+        return 'div'
+    })
+
+    const previewComponentProps = computed(() => {
+        const componentProps: Record<string, unknown> = {}
+
+        if (previewComponent.value === MarkdownRender)
+            componentProps.source = props.text
+        else componentProps.innerHTML = props.text
+
+        return componentProps
+    })
+
+    const emits = defineEmits<{
+        (e: 'apply', text: unknown): void
+    }>()
+
+    function emitApply() {
+        if (blockApply.value) return
+        blockApply.value = true
+
+        const text = parseFieldValue(props.type, props.text)
+
+        emits('apply', text)
+    }
+</script>

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

@@ -0,0 +1,34 @@
+.q-field-preview {
+    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;
+    }
+
+    &__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;
+    }
+}
+
+.q-field-preview:first-child {
+    margin: 0 1rem 0.25rem 0.25rem;
+}

package/src/components/FieldPreview/index.ts

@@ -0,0 +1,5 @@
+import FieldPreview from './FieldPreview.vue'
+import type { FieldPreviewProps } from './types'
+
+export { FieldPreview }
+export type { FieldPreviewProps }

package/src/components/FieldPreview/types.ts

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

package/src/components/MarkdownRender/MarkdownRender.vue

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

package/src/components/MarkdownRender/index.ts

@@ -0,0 +1,5 @@
+import MarkdownRender from './MarkdownRender.vue'
+import type { MarkdownRenderProps } from './types'
+
+export { MarkdownRender }
+export type { MarkdownRenderProps }

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

@@ -0,0 +1,24 @@
+.markdown-renderer {
+    pre,
+    code {
+        white-space: pre-wrap;
+        word-break: break-word;
+        overflow-wrap: break-word;
+        overflow-x: auto;
+    }
+
+    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;
+    }
+}

package/src/components/MarkdownRender/types.ts

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

package/src/components/PulseDots/PulseDots.vue

@@ -0,0 +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>
+</template>
+
+<script setup lang="ts">
+    import { useTexts } from '@/composables/useTexts'
+
+    const dots = [1, 2, 3]
+
+    const texts = useTexts()
+</script>

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

@@ -0,0 +1,37 @@
+.pulsing-dots {
+    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);
+}
+
+.dots-container {
+    display: flex;
+    align-items: center;
+    gap: 0.1rem;
+}
+
+.dot {
+    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;
+    }
+}

package/src/composables/useChatApi.ts

@@ -0,0 +1,156 @@
+// Utils
+import axios from 'axios'
+import { ref } from 'vue'
+
+// Types
+import type { AxiosRequestConfig, AxiosResponse } from 'axios'
+import { ChatBotMessageContent } from '@/components/ChatBot/types'
+import { useSSE } from './useSSE'
+
+type RequestResponse<T> = {
+    data: T | null
+    error: Error | null
+}
+
+export function useChatApi(apiEndpoint: string) {
+    const isLoading = ref(false)
+    const lastError = ref<Error | null>(null)
+
+    async function baseRequest<T>(
+        config: AxiosRequestConfig
+    ): Promise<RequestResponse<T>> {
+        isLoading.value = true
+        lastError.value = null
+
+        try {
+            const response: AxiosResponse<T> = await axios({
+                ...config,
+                baseURL: apiEndpoint
+            })
+            return { data: response.data, error: null }
+        } catch (error: any) {
+            lastError.value = error
+            console.error('Error in API request:', error)
+            return { data: null, error }
+        } finally {
+            isLoading.value = false
+        }
+    }
+
+    async function getChatData(
+        username: string,
+        project: string,
+        agentID: string,
+        formId: string
+    ) {
+        return await baseRequest<{
+            success: boolean
+            history: ChatBotMessageContent[]
+        }>({
+            method: 'POST',
+            url: `/prompt/load`,
+            data: {
+                username,
+                project,
+                agentID,
+                formId
+            }
+        })
+    }
+
+    async function clearChatData(
+        username: string,
+        project: string,
+        agentID: string,
+        formId: string
+    ) {
+        return await baseRequest<{ success: boolean }>({
+            method: 'POST',
+            url: `/prompt/clear`,
+            data: {
+                username,
+                project,
+                agentID,
+                formId
+            }
+        })
+    }
+
+    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',
+            url: `/prompt/feedback`,
+            data: {
+                messageSessionID: sessionID,
+                feedbackValue: feedback,
+                feedbackComment: comment
+            }
+        })
+    }
+
+    return {
+        isLoading,
+        lastError,
+        getChatData,
+        clearChatData,
+        getFieldSuggestionData,
+        sendPrompt,
+        handleFeedback
+    }
+}

package/src/composables/useChatMessages.ts

@@ -0,0 +1,58 @@
+import { ref } from 'vue'
+import { v4 as uuidv4 } from 'uuid'
+
+import type { Ref } from 'vue'
+import type {
+    ChatMessage,
+    ChatBotMessageSender
+} from '@/components/ChatBot/types'
+
+const messages: Ref<ChatMessage[]> = ref([])
+const nextMessageId = ref(1)
+
+export function useChatMessages() {
+    function addChatMessage(
+        message: string,
+        sender?: ChatBotMessageSender,
+        imagePreviewUrl?: string | null,
+        sessionID?: string,
+        isWelcomeMessage?: boolean
+    ) {
+        const newMessage: ChatMessage = {
+            id: nextMessageId.value++,
+            message,
+            date: new Date(),
+            sender: sender || 'bot',
+            sessionID: sessionID || uuidv4(),
+            imagePreviewUrl: imagePreviewUrl || undefined,
+            isWelcomeMessage,
+            fields: []
+        }
+
+        messages.value.push(newMessage)
+    }
+
+    function getLastMessage() {
+        return messages.value.find(
+            (m: ChatMessage) => m.id === nextMessageId.value - 1
+        )
+    }
+
+    function clearMessages() {
+        messages.value = []
+        nextMessageId.value = 1
+    }
+
+    function getMessages() {
+        return messages.value
+    }
+
+    return {
+        messages,
+        nextMessageId,
+        addChatMessage,
+        getLastMessage,
+        clearMessages,
+        getMessages
+    }
+}

package/src/composables/useSSE.ts

@@ -0,0 +1,90 @@
+import axios, { AxiosRequestConfig } from 'axios'
+
+type SSEvents = {
+    onMessage?: (message: string) => void
+    onError?: (error: Error) => void
+    onFieldMetadata?: (metadata: Record<string, unknown>) => void
+    onDone?: () => void
+}
+
+export async function useSSE(config: AxiosRequestConfig, handlers: SSEvents) {
+    const controller = new AbortController()
+    const signal = controller.signal
+
+    const response = await axios({
+        ...config,
+        headers: {
+            Accept: 'text/event-stream'
+        },
+        responseType: 'stream',
+        signal,
+        adapter: 'fetch'
+    })
+
+    const stream = response.data
+
+    if (!stream || !(stream instanceof ReadableStream)) {
+        throw new Error('Invalid stream response')
+    }
+
+    const reader = stream.getReader()
+    const decoder = new TextDecoder()
+
+    while (true) {
+        const { done, value } = await reader.read()
+        if (done) {
+            handlers.onDone?.()
+            break
+        }
+
+        const chunk = decoder.decode(value, { stream: true })
+        const events = chunk.split(/\n\n+/)
+
+        for (const eventBlock of events) {
+            const lines = eventBlock.trim().split('\n')
+            let name = ''
+            let data = ''
+
+            for (const line of lines) {
+                if (line.startsWith('event:')) {
+                    name = line.replace('event:', '').trim()
+                } else if (line.startsWith('data:')) {
+                    data = line.replace('data:', '').trim()
+                }
+            }
+
+            if (!name || !data) continue
+
+            try {
+                const parsedData = JSON.parse(data)
+
+                switch (name) {
+                    case 'message':
+                        handlers.onMessage?.(parsedData.value)
+                        break
+                    case 'error':
+                        handlers.onError?.(new Error(parsedData.value))
+                        break
+                    case 'field_metadata':
+                        handlers.onFieldMetadata?.(parsedData)
+                        break
+                    case 'done':
+                        handlers.onDone?.()
+                        break
+                    default:
+                        console.warn(`Unknown event type: ${name}`)
+                }
+            } catch (error) {
+                handlers.onError?.(error as Error)
+                console.error('Error processing event:', error)
+                continue
+            } finally {
+                // Ensure we always clean up the reader
+                if (done) {
+                    reader.releaseLock()
+                    controller.abort()
+                }
+            }
+        }
+    }
+}

package/src/composables/useTexts.ts

@@ -0,0 +1,32 @@
+export function useTexts() {
+    return {
+        copy: 'Copy',
+        apply: 'Apply',
+        applyAll: 'Apply all',
+        chatbotTitle: 'ChatBot',
+        sendMessage: 'Send message',
+        clearChat: 'Clear chat',
+        inputLabel: 'What can I help with?',
+        imageUpload: 'Upload Image',
+        imageUploadQButton: 'Upload Image',
+        goodResponse: 'Good response',
+        badResponse: 'Bad response',
+        initialMessage:
+            "Howdy! I am GenioBot 👋, Quidgest's personal AI assistant! How can I help you?",
+        initialAgentMessage:
+            'Just a temporary message while we are working on the agent mode',
+        loginError:
+            'Uh oh, I could not authenticate with the Quidgest API endpoint 😓',
+        botIsSick:
+            '*cough cough* GenioBot is not feeling alright 🥴️🤒, looks like something failed!',
+        commentDialogTitle: 'Would you like to add a comment?',
+        commentPlaceholder: 'Type your comment here (optional)...',
+        copyResponse: 'Copy response',
+        submitButton: 'Submit',
+        cancelButton: 'Cancel',
+        senderImage: 'Sender Image',
+        imagePreview: 'Image preview',
+        regenerateResponse: 'Regenerate response',
+        generatingResponse: 'Generating'
+    }
+}

package/src/index.ts

@@ -1,4 +1,4 @@
-import ChatBot from '@/components/ChatBot.vue'
+import ChatBot from '@/components/ChatBot/ChatBot.vue'
 import '@/assets/styles/styles.scss'
 
 export default ChatBot

package/src/utils/helper.ts

@@ -0,0 +1,12 @@
+export function parseFieldValue(type: string, text: string) {
+    switch (type) {
+        case 'date':
+            return new Date(text).toLocaleDateString()
+        case 'number':
+            return parseFloat(text)
+        case 'boolean':
+            return text.toLowerCase() === 'true'
+        default:
+            return text.toString()
+    }
+}