@quidgest/chatbot 0.0.4 → 0.0.6

package/dist/style.css

@@ -13,9 +13,6 @@
 .q-chatbot__input {
   flex: 1;
 }
-.q-chatbot .clear-btn {
-  color: red;
-}
 .q-chatbot__content {
   background-color: white;
   border: 1px solid #eaebec;
@@ -23,14 +20,14 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  overflow: auto;
-  gap: 1.5rem;
+  gap: 0.75rem;
 }
 .q-chatbot__messages-container {
   display: flex;
   flex-direction: column;
   padding: 0 1rem 2rem 1rem;
   gap: 1.5rem;
+  overflow: auto;
 }
 .q-chatbot__messages-wrapper {
   display: flex;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@quidgest/chatbot",
     "private": false,
-    "version": "0.0.4",
+    "version": "0.0.6",
     "type": "module",
     "license": "UNLICENSED",
     "main": "dist/index.cjs",
@@ -31,8 +31,7 @@
     },
     "dependencies": {
         "axios": "^1.6.7",
-        "vue": "^3.3.11",
-        "cross-env": "5.0.5"
+        "vue": "^3.3.11"
     },
     "devDependencies": {
         "@types/node": "^20.11.13",
@@ -42,9 +41,10 @@
         "typescript": "^5.2.2",
         "vite": "^5.0.8",
         "vite-plugin-dts": "^3.7.3",
-        "vue-tsc": "^1.8.25"
+        "vue-tsc": "^1.8.25",
+        "cross-env": "5.0.5"
     },
     "peerDependencies": {
-        "@quidgest/ui": "0.9.7"
+        "@quidgest/ui": "^0.13.1"        
     }
 }

package/src/assets/styles/styles.scss

@@ -16,19 +16,14 @@
         flex: 1;
     }
 
-    .clear-btn {
-        color: red;
-    }
-
     &__content {
         background-color: white;
         border: 1px solid #eaebec;
         height: 100%;
         width: 100%;
         display: flex;
-        flex-direction: column;
-        overflow: auto;
-        gap: 1.5rem;
+        flex-direction: column;        
+        gap: 0.75rem;
     }
 
     &__messages-container {
@@ -36,6 +31,7 @@
         flex-direction: column;
         padding: 0 1rem 2rem 1rem;
         gap: 1.5rem;
+        overflow: auto;
     }
 
     &__messages-wrapper {

package/src/components/CBMessage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
     import { computed } from 'vue'
     import ChatBotIcon from '@/assets/chatbot.png'
-    import { QLineLoader } from '@quidgest/ui'
+    import { QLineLoader } from '@quidgest/ui/components'
 
     export interface CBMessageProps {
         /*
@@ -23,6 +23,11 @@
          * If the message is loading
          */
         loading?: boolean
+
+        /**
+         * Project locale
+         */
+        dateFormat?: string
     }
 
     const props = withDefaults(defineProps<CBMessageProps>(), {
@@ -35,12 +40,31 @@
     })
 
     const getLocaleDate = computed(() => {
-        return props.date.toLocaleString()
+        if(!props.dateFormat) return props.date.toLocaleString()
+
+        return formatDate(props.date, props.dateFormat)
     })
 
     const messageHeader = computed(() => {
         return `${senderName.value} ${getLocaleDate.value}`
     })
+
+    function formatDate(date: Date, format: string) {
+        const day = date.getDate().toString().padStart(2, '0')
+        const month = (date.getMonth() + 1).toString().padStart(2, '0')
+        const year = date.getFullYear().toString().padStart(2, '0')
+        const hours = date.getHours().toString().padStart(2, '0')
+        const minutes = date.getMinutes().toString().padStart(2, '0')
+        const seconds = date.getSeconds().toString().padStart(2, '0')
+
+        return format
+            .replace('dd', day)
+            .replace('MM', month)
+            .replace('yyyy', year)
+            .replace('HH', hours)
+            .replace('mm', minutes)
+            .replace('ss', seconds)
+    }
 </script>
 
 <template>

package/src/components/ChatBot.vue

@@ -10,21 +10,21 @@
         QTextField,        
         QInputGroup,
         QIcon
-    } from '@quidgest/ui'
+    } from '@quidgest/ui/components'
 
     import type { ResourceStrings } from '@/types/texts.type'
-    import type { ChatBotMessage, ChatBotMessageContent } from '@/types/message.type'    
+    import type { ChatBotMessage, ChatBotMessageContent } from '@/types/message.type'
     
 
     let messages: Ref<ChatBotMessage[]> = ref([])
     let msgHistoryStack: string[] = []
     let nextMessageId: number = 1
     let userPrompt: Ref<string> = ref('')
+    let isLoading: Ref<boolean> = ref(false)
     let isChatDisabled: boolean = false
-    let isLoading: boolean = false
     
     // refs
-    const messagesContainer = ref<HTMLElement | null>(null)
+    const scrollElement = ref<HTMLElement | null>(null)
     const promptInput = ref<HTMLInputElement | null>(null)
 
     export type ChatBotProps = {
@@ -47,6 +47,11 @@
          * Project aplication path
          */
         projectPath: string
+
+        /**
+         * Project locale
+         */
+        dateFormat?: string
     }
 
     const props = withDefaults(defineProps<ChatBotProps>(), {
@@ -66,7 +71,6 @@
 
     onMounted(() => {
         initChat()
-        nextTick(scrollChatToBottom)
     })
 
     const userMessages = computed(() => {
@@ -139,6 +143,8 @@
             date: new Date(),
             sender: sender
         })
+
+        nextTick(scrollToBottom)
     }
 
     function getLastMessage() {
@@ -155,19 +161,12 @@
         messages.value = []
         msgHistoryStack = []
         userPrompt.value = ''
-        isLoading = false
+        isLoading.value = false
         setDisabledState(false)
     }
 
-    function scrollChatToBottom() {
-        if(messagesContainer.value == null) return;
-        
-        const element = messagesContainer.value
-        setTimeout(
-            () =>
-                (element.scrollIntoView(false)),
-            100
-        )
+    function scrollToBottom() {
+       scrollElement.value?.scrollIntoView({ behavior: 'smooth' })
     }
 
     function handleKey(event: KeyboardEvent) {
@@ -215,14 +214,13 @@
     function sendMessage() {
         if (
             userPrompt.value.trim().length == 0 ||
-            isLoading ||
+            isLoading.value ||
             isChatDisabled
         )
             return
 
         addChatMessage(userPrompt.value, 'user')
 
-        scrollChatToBottom()
         setChatPrompt(userPrompt.value)
 
         userPrompt.value = '' //Clear user input
@@ -239,7 +237,7 @@
             user: props.username
         }
 
-        isLoading = true
+        isLoading.value = true
         Axios({
             url: props.apiEndpoint + '/prompt/message',
             method: 'POST',
@@ -252,6 +250,7 @@
                 if (status != 200) return
 
                 if (msg) msg.message = chunk
+                scrollToBottom()
             }
         })
         .then(({ data }) => {
@@ -264,7 +263,7 @@
             console.log(error)
         })
         .finally(() => {
-            isLoading = false
+            isLoading.value = false
         })
     }
 
@@ -320,36 +319,36 @@
 <template>
     <div class="q-chatbot">
         <div
-            ref="messagesContainer"
             class="q-chatbot__content">
 
             <!-- Chat tools -->
             <div class="q-chatbot__tools">
-                <q-button
+                <QButton
                     :title="props.texts.qButtonTitle"
-                    b-style="plain"
-                    class="clear-btn"
+                    b-style="secondary"
                     :disabled="isChatDisabled"
                     borderless
                     @click="clearChat">
-                    <q-icon icon="bin" />
-                </q-button>
+                    <QIcon icon="bin" />
+                </QButton>
             </div>
 
             <div class="q-chatbot__messages-container">
                 <div
                     v-for="message in messages"
                     :key="message.id"
-                    :class="getMessageClasses">
-                    <CBMessage v-bind="message" :loading="isLoading && !message.message" />                
+                    :class="getMessageClasses(message.sender)">
+                    <CBMessage v-bind="message" :date-format="props.dateFormat" :loading="isLoading && !message.message" />                
                 </div>
             </div>
+
+            <div ref="scrollElement"></div>
         </div>
 
-        <q-input-group
+        <QInputGroup
             size="block"
             :disabled="isChatDisabled">
-            <q-text-field
+            <QTextField
                 ref="promptInput"
                 v-model="userPrompt"
                 class="q-chatbot__input"
@@ -359,15 +358,16 @@
                 @keydown="handleKey" />
 
             <template #append>
-                <q-button
+                <QButton
                     :title="props.texts.qButtonTitle"
                     b-style="primary"
                     class="q-chatbot__send"
-                    :disabled="isChatDisabled"
+                    :disabled="isChatDisabled || isLoading"
+                    :loading="isLoading"
                     @click="sendMessage">
-                    <q-icon icon="send" />
-                </q-button>
+                    <QIcon icon="send" />
+                </QButton>
             </template>
-        </q-input-group>
+        </QInputGroup>
     </div>
 </template>