@quidgest/chatbot 0.4.0 → 0.5.0

package/dist/style.css

@@ -1 +1 @@
-.q-chatbot{width:100%;padding:1rem;display:flex;flex-direction:column;height:100%}.q-chatbot input{line-height:1.5rem}.q-chatbot .q-input-group .i-text__field{border-radius:0;flex:1}.q-chatbot__text p{margin:0}.q-chatbot__content{background-color:#fff;border:1px solid #eaebec;height:100%;width:100%;display:flex;gap:.75rem;flex-direction:column;overflow:hidden}.q-chatbot__footer-container{padding:.8rem}.q-chatbot__input-wrapper{display:flex;flex-direction:column;position:relative}.q-chatbot__image-preview{display:inline-flex;align-items:center;position:relative;margin-top:.5rem;width:fit-content}.q-chatbot__image-preview img{width:60px;height:60px;object-fit:cover;border-radius:4px;margin-right:.25rem;border:1px solid #eaebec;overflow:hidden}.q-chatbot__image-preview img:hover+.q-chatbot__remove-image,.q-chatbot__image-preview img:focus+.q-chatbot__remove-image{opacity:1;pointer-events:auto}.q-chatbot__image-preview img:focus{outline:solid rgb(var(--q-theme-info-rgb)/50%)}.q-chatbot .q-button.q-chatbot__remove-image{position:absolute;top:-5px;right:-5px;background-color:#00000080;color:#fff;border-radius:50%;padding:5px;font-size:12px;border:none;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.q-chatbot .q-button.q-chatbot__remove-image:hover,.q-chatbot .q-button.q-chatbot__remove-image:focus{opacity:1;pointer-events:auto}.q-chatbot__send-container{padding-bottom:.25rem;display:flex;justify-content:space-between;width:100%}.q-chatbot__send-container .q-chatbot__send,.q-chatbot__send-container .q-chatbot__upload{border-radius:1rem}.q-chatbot__send-container .spacer{flex-grow:1}.q-chatbot__footer{position:sticky;padding:0 .5rem;border:1px solid #eaebec;border-radius:.25rem;bottom:0;width:100%;display:flex;flex-direction:column;gap:.25rem}.q-chatbot__footer-disabled{background-color:rgb(var(--q-theme-neutral-light-rgb)/.25);cursor:not-allowed}.q-chatbot__footer.drag-over{border:2px dashed rgb(var(--q-theme-primary-rgb)/.25);background-color:#018bd20d}.q-chatbot__footer .q-chatbot__input{min-height:50px;max-height:100px;border-bottom:1px solid #eaebec;overflow-y:auto}.q-chatbot__footer .q-text-area{max-height:100%;overflow-y:auto}.q-chatbot__footer .q-text-area .q-field__control{border:none}.q-chatbot__upload-container{display:flex;justify-content:flex-start;padding:.25rem 0}.q-chatbot__upload-container .q-chatbot__upload{border-radius:1rem}.q-chatbot__messages-container{display:flex;flex-direction:column;flex-grow:1;padding:0 1rem 2rem;gap:1.5rem;overflow-y:auto}.q-chatbot__messages-wrapper{display:flex;max-width:100%;gap:.2rem}.q-chatbot__tools{display:flex;flex-direction:row;justify-content:end;max-width:100%}.q-chatbot__message-wrapper{display:flex;flex-direction:column;gap:.2rem}.q-chatbot__message-container{display:flex;flex-direction:column;gap:.25rem}.q-chatbot__messages-wrapper_right{justify-content:flex-end}.q-chatbot__messages-wrapper_right .q-chatbot__message-container{align-items:flex-end}.q-chatbot__messages-wrapper_right .q-chatbot__message-wrapper{display:flex;align-items:flex-end}.q-chatbot__profile.q-icon__img{border-radius:50%;height:2rem;width:2rem}.q-chatbot__message{display:flex;align-items:center;padding:.3rem .5rem;background-color:#eaebec;width:fit-content;white-space:normal;min-height:2rem;word-wrap:break-word;word-break:break-word;border-radius:0 .5rem .5rem}.q-chatbot__messages-wrapper_right .q-chatbot__message{background-color:#018bd233;border-radius:.5rem 0 .5rem .5rem}.q-chatbot__sender{white-space:nowrap;color:#7c858d;font-size:.7rem}.q-chatbot__retry-button{align-items:center;display:flex}.q-chatbot__dialog-title{margin:.5rem 0}#comment-dialog .q-dialog__header,.hidden-input{display:none}.pulsing-dots{display:flex;align-items:center;justify-content:center;gap:.1rem}.dot{font-size:20px;line-height:1;animation:pulse 1s infinite;color:var(--q-theme-primary)}@keyframes pulse{0%,to{transform:scale(.8);opacity:.6}50%{transform:scale(1);opacity:1}}
+.markdown-renderer pre,.markdown-renderer code{white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;overflow-x:auto}.markdown-renderer pre{position:relative;background-color:#f5f5f5;border:1px solid #e0e0e0;border-radius:6px;padding:.75rem 1rem;font-size:.875rem}.markdown-renderer code{padding:.2rem .4rem;border-radius:4px;font-size:.875rem}.q-field-preview{position:relative;display:flex;flex-direction:column;margin:1rem .25rem}.q-field-preview__toolbar{z-index:1;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:.1rem .2rem}.q-field-preview__content{position:relative;background-color:#f5f5f5;border:1px solid #e0e0e0;border-radius:6px;padding:.75rem 1rem;font-size:.875rem}.q-field-preview__footer{display:flex;flex-direction:row;margin-top:.25rem}.q-field-preview:first-child{margin:0 1rem .25rem .25rem}.pulsing-dots{display:flex;align-items:center;justify-content:center;flex-direction:row;gap:.25rem}.generating-text{font-size:.9rem;color:var(--q-theme-primary)}.dots-container{display:flex;align-items:center;gap:.1rem}.dot{font-size:16px;line-height:1;animation:pulse 1s infinite;color:var(--q-theme-primary)}@keyframes pulse{0%,to{transform:scale(.8);opacity:.6}50%{transform:scale(1);opacity:1}}.q-chatbot{width:100%;display:flex;flex-direction:column;height:100%}.q-chatbot input{line-height:1.5rem}.q-chatbot .q-input-group .i-text__field{border-radius:0;flex:1}.q-chatbot__text p{margin:0}.q-chatbot__content{background-color:#fff;border:1px solid #eaebec;height:100%;width:100%;display:flex;gap:.75rem;flex-direction:column;overflow:hidden}.q-chatbot__footer-container{padding:.8rem 0 0}.q-chatbot__input-wrapper{display:flex;flex-direction:column;position:relative}.q-chatbot__image-preview{display:inline-flex;align-items:center;position:relative;margin-top:.5rem;width:fit-content}.q-chatbot__image-preview img{width:60px;height:60px;object-fit:cover;border-radius:4px;margin-right:.25rem;border:1px solid #eaebec;overflow:hidden}.q-chatbot__image-preview img:hover+.q-chatbot__remove-image,.q-chatbot__image-preview img:focus+.q-chatbot__remove-image{opacity:1;pointer-events:auto}.q-chatbot__image-preview img:focus{outline:solid rgb(var(--q-theme-info-rgb)/50%)}.q-chatbot .q-button.q-chatbot__remove-image{position:absolute;top:-5px;right:-5px;background-color:#00000080;color:#fff;border-radius:50%;padding:5px;font-size:12px;border:none;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.q-chatbot .q-button.q-chatbot__remove-image:hover,.q-chatbot .q-button.q-chatbot__remove-image:focus{opacity:1;pointer-events:auto}.q-chatbot__send-container{padding-bottom:.25rem;display:flex;justify-content:space-between;width:100%}.q-chatbot__send-container .q-chatbot__send,.q-chatbot__send-container .q-chatbot__upload{border-radius:1rem}.q-chatbot__send-container .spacer{flex-grow:1}.q-chatbot__footer{position:sticky;padding:0 .5rem;border:1px solid #eaebec;border-radius:.25rem;bottom:0;width:100%;display:flex;flex-direction:column;gap:.25rem}.q-chatbot__footer-disabled{background-color:rgb(var(--q-theme-neutral-light-rgb)/.25);cursor:not-allowed}.q-chatbot__footer.drag-over{border:2px dashed rgb(var(--q-theme-primary-rgb)/.25);background-color:#018bd20d}.q-chatbot__footer .q-chatbot__input{min-height:50px;max-height:100px;border-bottom:1px solid #eaebec;overflow-y:auto}.q-chatbot__footer .q-text-area{max-height:100%;overflow-y:auto}.q-chatbot__footer .q-text-area .q-field__control{border:none}.q-chatbot__upload-container{display:flex;justify-content:flex-start;padding:.25rem 0}.q-chatbot__upload-container .q-chatbot__upload{border-radius:1rem}.q-chatbot__messages-container{display:flex;flex-direction:column;flex-grow:1;padding:0 1rem 2rem;gap:1.5rem;overflow-y:auto}.q-chatbot__messages-wrapper{display:flex;max-width:100%;gap:.2rem}.q-chatbot__tools{display:flex;flex-direction:row;justify-content:space-between;max-width:100%;padding:.25rem .5rem}.q-chatbot__message-wrapper{display:flex;flex-direction:column;gap:.2rem}.q-chatbot__message-container{display:flex;flex-direction:column;gap:.25rem}.q-chatbot__messages-wrapper_right{justify-content:flex-end}.q-chatbot__messages-wrapper_right .q-chatbot__message-container{align-items:flex-end}.q-chatbot__messages-wrapper_right .q-chatbot__message-wrapper{display:flex;align-items:flex-end}.q-chatbot__profile.q-icon__img{border-radius:50%;height:2rem;width:2rem}.q-chatbot__message{padding:.3rem .5rem;background-color:#eaebec;width:fit-content;min-height:2rem;white-space:normal;border-radius:0 .5rem .5rem}.q-chatbot__messages-wrapper_right .q-chatbot__message{background-color:#018bd233;border-radius:.5rem 0 .5rem .5rem;white-space:normal}.q-chatbot__sender{white-space:nowrap;color:#7c858d;font-size:.7rem}.q-chatbot__retry-button{align-items:center;display:flex}.q-chatbot__dialog-title{margin:.5rem 0}.hidden-input{display:none}

package/dist/utils/helper.d.ts

@@ -0,0 +1 @@
+export declare function parseFieldValue(type: string, text: string): string | number | boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@quidgest/chatbot",
     "private": false,
-    "version": "0.4.0",
+    "version": "0.5.0",
     "type": "module",
     "license": "UNLICENSED",
     "main": "dist/index.cjs",
@@ -32,9 +32,9 @@
         "lint:fix": "eslint . --fix && prettier --write --list-different src"
     },
     "dependencies": {
-        "axios": "^1.7.0",
-        "uuid": "^11.1.0",
-        "vue-markdown-render": "^2.2.1"
+        "axios": "^1.9.0",
+        "markdown-it": "^14.1.0",
+        "uuid": "^11.1.0"
     },
     "devDependencies": {
         "@types/markdown-it": "^14.1.2",
@@ -51,7 +51,7 @@
         "vue-tsc": "^1.8.27"
     },
     "peerDependencies": {
-        "@quidgest/ui": "^0.16.0",
+        "@quidgest/ui": "0.16.11",
         "vue": "^3.5.13"
     }
 }

package/src/assets/chatbot_profile.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 126.25 110.36"><defs><radialGradient id="radial-gradient" cx="45.24" cy="38.05" fx="45.24" fy="38.05" r="59.09" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#31319e"/><stop offset=".19" stop-color="#2e2e97"/><stop offset=".45" stop-color="#292985"/><stop offset=".75" stop-color="#202067"/><stop offset="1" stop-color="#17174a"/></radialGradient><linearGradient id="linear-gradient" x1="82.65" y1="50.41" x2="82.65" y2="77.5" gradientUnits="userSpaceOnUse"><stop offset=".02" stop-color="#66ebfe"/><stop offset=".96" stop-color="#00bfdb"/></linearGradient><linearGradient id="linear-gradient-2" x1="44.6" y1="50.01" x2="44.6" y2="77.1" xlink:href="#linear-gradient"/></defs><g isolation="isolate"><g id="Layer_1"><path d="M126.2,61.4c-.2-3.69-2.61-17.39-5.92-22.09-2.42-3.44-5.89-4.03-7.96-4.38-.13-.02-.27-.05-.41-.07-.16-.28-.32-.58-.45-.81-.63-1.14-1.03-1.87-1.44-2.44-6.96-9.88-14.91-16.51-24.85-20.69-.25-2.29-.84-5.24-3.37-7.44-2.93-2.55-7.58-2.9-11.68-3.21-.93-.07-1.82-.14-2.4-.22l-.33-.05h-8.61l-.36.05c-.65.1-1.61.17-2.63.24-3.75.27-8.01.57-10.98,2.85-2.94,2.26-3.58,5.55-3.79,7.84-9.71,3.94-17.86,10.71-24.85,20.62-.4.57-.81,1.3-1.43,2.44-.13.23-.29.53-.45.81-.14.02-.28.05-.4.07-2.07.35-5.54.94-7.96,4.39-2.25,3.19-3.84,9.89-4.58,13.59-.6,2.97-1.9,10.3-1.08,14.26.79,3.78,3.66,5.6,5.37,6.68.12.08.26.16.39.25,1.65,10.03,6.98,18.56,15.52,24.77,9.23,6.72,20.2,9.43,27.78,10.52,4.49.65,9.15.97,13.85.97,9.67,0,23.77-1.39,36-8.02,11.58-6.27,18.81-16,21.04-28.24,4.52-2.76,6.36-5.67,5.98-12.71Z" fill="#17174a"/><path d="M67.15,4.69c2.98.42,9.31.31,11.62,2.31,1.99,1.73,1.65,4.82,2.06,7.22,10.77,3.89,18.73,10.59,25.39,20.04.64.91,2.13,3.95,2.58,4.33,1.71,1.46,5.54.35,7.67,3.37,2.29,3.25,4.83,15.41,5.06,19.59.31,5.82-.76,6.9-5.58,9.44-3.28,26.16-29.7,34.5-52.68,34.5-4.6,0-9.06-.33-13.17-.93-18.13-2.61-37.11-12.11-39.51-33.08-1.7-1.92-4.96-2.54-5.55-5.39-.95-4.56,2.21-20.32,4.89-24.14,2.13-3.02,5.96-1.91,7.67-3.37.46-.39,1.94-3.42,2.58-4.33,6.54-9.28,14.55-16.22,25.21-19.87.85-.87-.3-5.45,2.43-7.55,2.52-1.94,8.35-1.69,11.42-2.16h7.91" fill="#fff"/><path d="M121.86,61.51c-.22-4.2-2.78-16.43-5.07-19.7-1.77-2.51-4.71-2.18-6.64-2.83.1,1.18.16,2.37.16,3.57,0,26.85-25.96,48.61-57.98,48.61-15.83,0-30.17-5.32-40.63-13.94,4.91,17.1,22.06,25.14,38.51,27.52,4.12.59,8.6.93,13.21.93,23.06,0,49.57-8.38,52.85-34.68,4.83-2.56,5.91-3.63,5.6-9.49Z" fill="#d0d7e2" mix-blend-mode="multiply" opacity=".4"/><path d="M62.91,97.68c5.82,0,11.67-.53,16.72-1.56,13.1-2.67,22.09-8.06,26.72-16.03,4.43-7.63,4.75-17.33.96-28.84-4.28-13-13.22-22.77-24.7-27.89-.13,4.51-3.84,8.16-8.38,8.16h-20.89c-4.61,0-8.39-3.78-8.39-8.39v-.14c-5.36,2.25-10.29,5.49-14.5,9.61-8.23,8.06-13.16,19.02-13.9,30.84-.59,9.44,2.67,17.53,9.43,23.42,6.27,5.46,15.68,9.02,27.2,10.3,3.13.35,6.43.52,9.73.52" fill="url(#radial-gradient)"/><rect x="74.34" y="50.41" width="16.62" height="27.09" rx="4.06" ry="4.06" fill="url(#linear-gradient)"/><rect x="36.29" y="50.01" width="16.62" height="27.09" rx="4.06" ry="4.06" fill="url(#linear-gradient-2)"/></g></g></svg>

package/src/assets/styles/styles.scss

@@ -1,7 +1,10 @@
+@import '../../components/MarkdownRender/markdown-render.scss';
+@import '../../components/FieldPreview/field-preview.scss';
+@import '../../components/PulseDots/pulse-dots.scss';
+
 .q-chatbot {
     width: 100%;
     height: 100%;
-    padding: 1rem;
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -34,7 +37,7 @@
     }
 
     &__footer-container {
-        padding: 0.8rem;
+        padding: .8rem 0 0 0;
     }
 
     &__input-wrapper {
@@ -61,7 +64,6 @@
 
             &:hover,
             &:focus {
-      
                 & + .q-chatbot__remove-image {
                     opacity: 1;
                     pointer-events: auto;
@@ -184,8 +186,9 @@
     &__tools {
         display: flex;
         flex-direction: row;
-        justify-content: end;
+        justify-content: space-between;
         max-width: 100%;
+        padding: 0.25rem 0.5rem;
     }
 
     &__message-wrapper {
@@ -220,21 +223,18 @@
     }
 
     &__message {
-        display: flex;
-        align-items: center;
         padding: 0.3rem 0.5rem;
         background-color: #eaebec;
         width: fit-content;
-        white-space: normal;
         min-height: 2rem;
-        word-wrap: break-word;
-        word-break: break-word;
+        white-space: normal;
         border-radius: 0 0.5rem 0.5rem 0.5rem;
     }
 
     &__messages-wrapper_right .q-chatbot__message {
         background-color: rgba(#018bd2, 20%);
         border-radius: 0.5rem 0 0.5rem 0.5rem;
+        white-space: normal;
     }
 
     &__sender {
@@ -248,43 +248,11 @@
         display: flex;
     }
 
-    &__dialog-title{
+    &__dialog-title {
         margin: 0.5rem 0;
     }
 }
 
-#comment-dialog {
-    .q-dialog__header {
-        display: none;
-    }
-}
-
 .hidden-input {
     display: none;
 }
-
-.pulsing-dots {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.1rem;
-}
-
-.dot {
-    font-size: 20px;
-    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/components/ChatBot/ChatBot.vue

@@ -0,0 +1,375 @@
+<template>
+    <div class="q-chatbot">
+        <div class="q-chatbot__content">
+            <chat-tool-bar
+                :disabled="isDisabled"
+                :available-agents="props.availableAgents"
+                :selected-agent-key="currentAgentId"
+                @clear="clearChat"
+                @change-chat="changeChat" />
+
+            <div
+                ref="messagesContainer"
+                class="q-chatbot__messages-container"
+                @scroll="handleScroll">
+                <div
+                    v-for="message in messages"
+                    :key="message.id"
+                    :class="getMessageClasses(message.sender)">
+                    <chat-bot-message
+                        v-bind="message"
+                        :date-format="props.dateFormat"
+                        :user-image="props.userImage"
+                        :chatbot-image="props.chatbotImage"
+                        :loading="isLoading && !message.message"
+                        :imagePreviewUrl="message.imagePreviewUrl"
+                        :apiEndpoint="props.apiEndpoint"
+                        :sessionID="message.sessionID"
+                        :fields="message.fields"
+                        @apply-fields="applyFields" />
+                </div>
+            </div>
+        </div>
+
+        <div class="q-chatbot__footer-container">
+            <chat-bot-input
+                :disabled="isDisabled"
+                :loading="isLoading"
+                @send-message="sendMessage" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+    // Components
+    import { ChatBotMessage } from '@/components/ChatBotMessage'
+    import { ChatToolBar } from '@/components/ChatToolBar'
+    import { ChatBotInput } from '@/components/ChatBotInput'
+
+    // Utils
+    import {
+        onMounted,
+        nextTick,
+        ref,
+        watch,
+        computed,
+        onBeforeMount
+    } from 'vue'
+    import { v4 as uuidv4 } from 'uuid'
+
+    // Types
+    import type {
+        ChatBotProps,
+        ChatBotMessageContent,
+        ChatBotMessageSender,
+        FieldData,
+        AppliedFieldData
+    } from './types'
+    import type { ChatBotImage } from '../ChatBotInput'
+
+    // Assets
+    import ChatBotIcon from '@/assets/chatbot_profile.svg'
+    import UserIcon from '@/assets/user_avatar.png'
+
+    // Composables
+    import { useTexts } from '@/composables/useTexts'
+    import { useChatApi } from '@/composables/useChatApi'
+    import { useChatMessages } from '@/composables/useChatMessages'
+
+    const emits = defineEmits<{
+        (e: 'apply-fields', fields: AppliedFieldData[]): void
+    }>()
+
+    const props = withDefaults(defineProps<ChatBotProps>(), {
+        apiEndpoint: 'http://localhost:3000',
+        userImage: UserIcon,
+        chatbotImage: ChatBotIcon,
+        userPrompt: '',
+        availableAgents: () => [],
+        agentData: () => {
+            return {
+                id: '',
+                formId: '',
+                jobId: ''
+            }
+        }
+    })
+
+    const isChatDisabled = ref(true)
+    const messagesContainer = ref<HTMLElement | null>(null)
+    const autoScrollEnabled = ref(true)
+
+    const currentAgentId = ref(props.agentData.id)
+    const currentFormId = ref(props.agentData.formId)
+
+    // Composables
+    const texts = useTexts()
+    const {
+        isLoading,
+        clearChatData,
+        getChatData,
+        getFieldSuggestionData,
+        sendPrompt
+    } = useChatApi(props.apiEndpoint)
+    const { messages, addChatMessage, clearMessages, getLastMessage } =
+        useChatMessages()
+
+    const isDisabled = computed(() => {
+        return isChatDisabled.value || isLoading.value
+    })
+
+    onBeforeMount(() => {
+        messagesContainer.value?.removeEventListener('scroll', handleScroll)
+    })
+
+    onMounted(() => {
+        initChat()
+    })
+
+    function setDisabledState(state: boolean) {
+        isChatDisabled.value = state
+    }
+
+    async function initChat() {
+        try {
+            await loadChatData()
+        } catch (error) {
+            addChatMessage(texts.loginError)
+            console.error('Error logging in: ' + error)
+        }
+    }
+
+    async function loadChatData() {
+        setDisabledState(true)
+        const { data, error } = await getChatData(
+            props.username,
+            props.projectPath,
+            currentAgentId.value,
+            currentFormId.value
+        )
+
+        if (error || !data || !data.success) {
+            setDisabledState(true)
+            addChatMessage(texts.botIsSick)
+            console.log('Error loading chat data: ' + error)
+            return
+        }
+
+        setDisabledState(false)
+        sendInitialMessage()
+
+        data.history.forEach(async (message: ChatBotMessageContent) => {
+            const imgUrl = message.imageUrl
+                ? props.controllerEndpoint + message.imageUrl
+                : undefined
+
+            addChatMessage(
+                message.content,
+                message.type === 'ai' ? 'bot' : 'user',
+                imgUrl,
+                message.sessionID
+            )
+        })
+    }
+
+    function sendInitialMessage() {
+        const message = texts.initialMessage
+        addChatMessage(message, 'bot', null, undefined, true)
+    }
+
+    function resetChat() {
+        // Only reset UI state here, message state is handled by composable
+        clearMessages()
+        setDisabledState(false)
+        autoScrollEnabled.value = true
+    }
+
+    function scrollToBottom() {
+        nextTick(() => {
+            if (messagesContainer.value) {
+                messagesContainer.value.scrollTop =
+                    messagesContainer.value.scrollHeight
+            }
+        })
+    }
+
+    function handleScroll() {
+        if (messagesContainer.value) {
+            const threshold = 20 // px threshold from the bottom
+            const { scrollTop, clientHeight, scrollHeight } =
+                messagesContainer.value
+            autoScrollEnabled.value =
+                scrollTop + clientHeight >= scrollHeight - threshold
+        }
+    }
+
+    async function sendMessage(prompt: string, image?: ChatBotImage) {
+        if (messagesContainer.value) {
+            messagesContainer.value.scrollTo({
+                top: messagesContainer.value.scrollHeight,
+                behavior: 'smooth'
+            })
+        }
+
+        addChatMessage(prompt, 'user', image?.previewUrl)
+        nextTick(() => {
+            if (autoScrollEnabled.value) scrollToBottom()
+        })
+        setChatPrompt(prompt, image?.file)
+    }
+
+    async function getAgentJob(jobId: string) {
+        if (messagesContainer.value) {
+            messagesContainer.value.scrollTo({
+                top: messagesContainer.value.scrollHeight,
+                behavior: 'smooth'
+            })
+        }
+
+        // Add an empty bot message to trigger bouncing dots animation
+        addChatMessage('', 'bot')
+        nextTick(() => {
+            if (autoScrollEnabled.value) scrollToBottom()
+        })
+
+        const msg = getLastMessage()
+        if (!msg) return
+
+        await getFieldSuggestionData(
+            jobId,
+            (chunk: string) => {
+                msg.message += chunk
+                if (!msg.fields) msg.fields = []
+
+                const lastField = msg.fields[msg.fields.length - 1]
+                lastField.text = msg.message
+
+                if (autoScrollEnabled.value) scrollToBottom()
+            },
+            (metadata: Record<string, unknown>) => {
+                msg.message = ''
+                const data = metadata as FieldData
+                msg.fields?.push({
+                    type: data.type,
+                    name: data.name,
+                    text: data.text
+                })
+            }
+        )
+    }
+
+    async function setChatPrompt(prompt: string, image?: File) {
+        // Add an empty bot message marked as streaming to trigger bouncing dots animation
+        addChatMessage('', 'bot')
+        const msg = getLastMessage()
+        if (!msg) return
+
+        const currentSessionID = msg?.sessionID || uuidv4()
+
+        const formData = new FormData()
+        if (image) {
+            formData.append('image', image)
+        }
+
+        formData.append('message', prompt)
+        formData.append('project', props.projectPath)
+        formData.append('user', props.username)
+        formData.append('sessionID', currentSessionID)
+        formData.append('agentID', currentAgentId.value)
+        formData.append('formId', currentFormId.value)
+
+        await sendPrompt(
+            formData,
+            (chunk) => {
+                if (msg) msg.message += chunk
+
+                if (autoScrollEnabled.value) scrollToBottom()
+            },
+            (error) => {
+                setDisabledState(true)
+                addChatMessage(texts.botIsSick)
+                console.error('Error sending message: ' + error)
+            }
+        )
+    }
+
+    async function clearChat() {
+        const { data, error } = await clearChatData(
+            props.username,
+            props.projectPath,
+            currentAgentId.value,
+            currentFormId.value
+        )
+        if (error || !data || !data.success) {
+            setDisabledState(true)
+            addChatMessage(texts.loginError)
+            console.log('Error clearing chat: ' + error)
+            return
+        }
+
+        resetChat()
+        sendInitialMessage()
+    }
+
+    function getMessageClasses(sender: ChatBotMessageSender) {
+        const classes: string[] = ['q-chatbot__messages-wrapper']
+        if (sender === 'user') classes.push('q-chatbot__messages-wrapper_right')
+        return classes
+    }
+
+    function changeChat(chat: { formId: string; key: string }) {
+        ;(currentAgentId.value = chat.key), (currentFormId.value = chat.formId)
+        resetChat()
+        loadChatData()
+    }
+
+    function applyFields(fields: AppliedFieldData[]) {
+        if (!fields || fields.length === 0) return
+
+        emits('apply-fields', fields)
+    }
+
+    watch(
+        () => props.availableAgents,
+        (newValue, oldValue) => {
+            if (newValue.length === 0 && oldValue.length > 0) {
+                currentAgentId.value = ''
+                currentFormId.value = ''
+                resetChat()
+                initChat()
+            }
+        }
+    )
+
+    watch(
+        () => props.agentData,
+        async (newValue, oldValue) => {
+            if (isDisabled.value) return;
+
+            if (props.agentData?.id !== oldValue?.id) {
+                currentAgentId.value = newValue?.id || ''
+                currentFormId.value = newValue?.formId || ''
+                resetChat()
+                await initChat()
+            }
+
+            if (
+                newValue?.id !== '' &&
+                newValue &&
+                newValue.jobId !== oldValue.jobId
+            )
+                await getAgentJob(newValue.jobId)
+        }
+    )
+
+    watch(
+        () => [props.agentData.id, props.agentData.formId],
+        ([newId, newFormId]) => {
+            currentAgentId.value = newId
+            currentFormId.value = newFormId
+        },
+        { immediate: true }
+    )
+
+    defineOptions({ name: 'ChatBot' })
+</script>

package/src/components/ChatBot/types.ts

@@ -0,0 +1,55 @@
+export type ChatBotProps = {
+    apiEndpoint?: string
+    controllerEndpoint?: string
+    username: string
+    projectPath: string
+    userImage?: string
+    chatbotImage?: string
+    dateFormat: string
+    agentData?: AgentData
+    availableAgents?: AvailableAgents[]
+}
+
+export type AvailableAgents = {
+    key: string
+    value: string
+    formId: string
+}
+
+export type AgentData = {
+    id: string
+    jobId: string
+    formId: string
+}
+
+export type FieldData = {
+    name: string
+    type: string
+    text: string
+    applied?: boolean
+}
+
+export type AppliedFieldData = {
+    name: string
+    text: unknown
+}
+
+export type ChatMessage = {
+    id: number
+    message: string
+    date: Date
+    sender: ChatBotMessageSender
+    sessionID: string
+    imagePreviewUrl?: string
+    isWelcomeMessage?: boolean
+    fields?: FieldData[]
+}
+
+export type ChatBotMessageContent = {
+    content: string
+    type: string
+    sessionID: string
+    imageUrl?: string
+}
+
+export type ChatBotMessageSender = 'bot' | 'user'