@quidgest/chatbot 0.0.5 → 0.0.7

package/src/components/ChatBot.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
-    import { onMounted, nextTick, computed, ref, watch, defineOptions } from 'vue'
+    import {
+        onMounted,
+        nextTick,
+        computed,
+        ref,
+        watch,
+        defineOptions
+    } from 'vue'
     import type { Ref } from 'vue'
     import Axios from 'axios'
     import type { AxiosResponse } from 'axios'
@@ -7,31 +14,33 @@
 
     import {
         QButton,
-        QTextField,        
+        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 = {
         /**
          * API Enpoint URL
          */
-        apiEndpoint?: string,
+        apiEndpoint?: string
 
         /**
          * Static resource texts used by ChatBot
@@ -47,6 +56,11 @@
          * Project aplication path
          */
         projectPath: string
+
+        /**
+         * Project locale
+         */
+        dateFormat?: string
     }
 
     const props = withDefaults(defineProps<ChatBotProps>(), {
@@ -66,7 +80,6 @@
 
     onMounted(() => {
         initChat()
-        nextTick(scrollChatToBottom)
     })
 
     const userMessages = computed(() => {
@@ -76,31 +89,31 @@
     function setDisabledState(state: boolean) {
         isChatDisabled = state
     }
-    
+
     function initChat() {
         Axios.post(props.apiEndpoint + '/auth/login', {
             username: props.username,
             password: 'test'
         })
-        .then((response: AxiosResponse) => {
-            if (response.status != 200 || !response.data.success) {
+            .then((response: AxiosResponse) => {
+                if (response.status != 200 || !response.data.success) {
+                    setDisabledState(true)
+                    addChatMessage(props.texts.loginError)
+                    return console.log(
+                        `Unsuccessful login, endpoint gave status ${response.status}`
+                    )
+                }
+
+                loadChatData()
+            })
+            .catch((error: Error) => {
                 setDisabledState(true)
                 addChatMessage(props.texts.loginError)
-                return console.log(
-                    `Unsuccessful login, endpoint gave status ${response.status}`
+                console.log(
+                    'The following error ocurred while trying to login: \n' +
+                        error
                 )
-            }
-
-            loadChatData()
-        })
-        .catch((error: Error) => {
-            setDisabledState(true)
-            addChatMessage(props.texts.loginError)
-            console.log(
-                'The following error ocurred while trying to login: \n' +
-                    error
-            )
-        })
+            })
     }
 
     function loadChatData() {
@@ -108,28 +121,33 @@
             username: props.username,
             project: props.projectPath
         })
-        .then((response: AxiosResponse) => {
-            if (response.status != 200 || !response.data.success) {
+            .then((response: AxiosResponse) => {
+                if (response.status != 200 || !response.data.success) {
+                    setDisabledState(true)
+                    addChatMessage(props.texts.loginError)
+                    return console.log(
+                        `Unsuccessful load, endpoint gave status ${response.status}`
+                    )
+                }
+
+                sendInitialMessage()
+                response.data.history.forEach(
+                    (message: ChatBotMessageContent) => {
+                        addChatMessage(
+                            message.content,
+                            message.type === 'ai' ? 'bot' : 'user'
+                        )
+                    }
+                )
+            })
+            .catch((error: Error) => {
                 setDisabledState(true)
                 addChatMessage(props.texts.loginError)
-                return console.log(
-                    `Unsuccessful load, endpoint gave status ${response.status}`
+                console.log(
+                    'The following error ocurred while trying to login: \n' +
+                        error
                 )
-            }
-            
-            sendInitialMessage()
-            response.data.history.forEach((message: ChatBotMessageContent) => {
-                addChatMessage(message.content, message.type === "ai" ? "bot" : "user")
             })
-        })
-        .catch((error: Error) => {
-            setDisabledState(true)
-            addChatMessage(props.texts.loginError)
-            console.log(
-                'The following error ocurred while trying to login: \n' +
-                    error
-            )
-        })
     }
 
     function addChatMessage(message: string, sender: 'bot' | 'user' = 'bot') {
@@ -139,6 +157,8 @@
             date: new Date(),
             sender: sender
         })
+
+        nextTick(scrollToBottom)
     }
 
     function getLastMessage() {
@@ -155,23 +175,16 @@
         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) {
-        if(promptInput.value == null) return;
+        if (promptInput.value == null) return
 
         if (event.key == 'ArrowUp') {
             //No user messages, no need to continue
@@ -180,9 +193,7 @@
             //Get next message to read
             let lastMsgObj =
                 userMessages.value[
-                    userMessages.value.length -
-                        1 -
-                        msgHistoryStack.length
+                    userMessages.value.length - 1 - msgHistoryStack.length
                 ]
 
             //No more messages to go through
@@ -211,18 +222,17 @@
             userPrompt.value = previousHistoryText
         }
     }
-    
+
     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,33 +249,33 @@
             user: props.username
         }
 
-        isLoading = true
+        isLoading.value = true
         Axios({
             url: props.apiEndpoint + '/prompt/message',
             method: 'POST',
             data: params,
             onDownloadProgress: (progressEvent) => {
-                const chunk =
-                    progressEvent.event?.currentTarget.response
+                const chunk = progressEvent.event?.currentTarget.response
                 const status = progressEvent.event?.currentTarget.status
 
                 if (status != 200) return
 
                 if (msg) msg.message = chunk
+                scrollToBottom()
             }
         })
-        .then(({ data }) => {
-            if (msg) msg.message = data
-        })
-        .catch((error) => {
-            addChatMessage(props.texts.botIsSick)
+            .then(({ data }) => {
+                if (msg) msg.message = data
+            })
+            .catch((error) => {
+                addChatMessage(props.texts.botIsSick)
 
-            setDisabledState(true)
-            console.log(error)
-        })
-        .finally(() => {
-            isLoading = false
-        })
+                setDisabledState(true)
+                console.log(error)
+            })
+            .finally(() => {
+                isLoading.value = false
+            })
     }
 
     function setCursorPosition(elem: HTMLInputElement, pos: number) {
@@ -273,67 +283,65 @@
         elem.setSelectionRange(pos, pos)
     }
 
-    function clearChat() {        
+    function clearChat() {
         Axios.post(props.apiEndpoint + '/prompt/clear', {
             username: props.username,
             project: props.projectPath
         })
-        .then((response: AxiosResponse) => {
-            if (response.status != 200 || !response.data.success) {
+            .then((response: AxiosResponse) => {
+                if (response.status != 200 || !response.data.success) {
+                    setDisabledState(true)
+                    addChatMessage(props.texts.loginError)
+                    return console.log(
+                        `Unsuccessful login, endpoint gave status ${response.status}`
+                    )
+                }
+
+                resetChat()
+                sendInitialMessage()
+            })
+            .catch((error: Error) => {
                 setDisabledState(true)
                 addChatMessage(props.texts.loginError)
-                return console.log(
-                    `Unsuccessful login, endpoint gave status ${response.status}`
+                console.log(
+                    'The following error ocurred while trying to communicate with the endpoint: \n' +
+                        error
                 )
-            }
-
-            resetChat()
-            sendInitialMessage()
-        })
-        .catch((error: Error) => {
-            setDisabledState(true)
-            addChatMessage(props.texts.loginError)
-            console.log(
-                'The following error ocurred while trying to communicate with the endpoint: \n' +
-                    error
-            )
-        })
+            })
     }
 
     function getMessageClasses(sender: 'user' | 'bot') {
         const classes: string[] = ['q-chatbot__messages-wrapper']
 
-        if(sender == 'user')
-            classes.push('q-chatbot__messages-wrapper_right')
+        if (sender == 'user') classes.push('q-chatbot__messages-wrapper_right')
 
         return classes
     }
 
-    watch(() => props.apiEndpoint, () => {
-        resetChat()
-        initChat()
-    })
+    watch(
+        () => props.apiEndpoint,
+        () => {
+            resetChat()
+            initChat()
+        }
+    )
 
     defineOptions({ name: 'ChatBot' })
 </script>
 
 <template>
     <div class="q-chatbot">
-        <div
-            ref="messagesContainer"
-            class="q-chatbot__content">
-
+        <div 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">
@@ -341,15 +349,20 @@
                     v-for="message in messages"
                     :key="message.id"
                     :class="getMessageClasses(message.sender)">
-                    <CBMessage v-bind="message" :loading="isLoading && !message.message" />                
+                    <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 +372,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>

package/src/components/index.ts

@@ -1,7 +1,4 @@
-import CBMessage from "./CBMessage.vue"
-import type { CBMessageProps } from "./CBMessage.vue"
+import CBMessage from './CBMessage.vue'
+import type { CBMessageProps } from './CBMessage.vue'
 
-export {
-    CBMessage,
-    CBMessageProps
-}
+export { CBMessage, CBMessageProps }

package/src/types/message.type.ts

@@ -1,11 +1,11 @@
 export type ChatBotMessage = {
-    id: number,
-    message: string,
-    date: Date,
+    id: number
+    message: string
+    date: Date
     sender: 'bot' | 'user'
 }
 
 export type ChatBotMessageContent = {
-    content: string,
+    content: string
     type: string
-}
+}

package/src/types/texts.type.ts

@@ -1,3 +1,3 @@
 export type ResourceStrings = {
     [key: string]: string
-}
+}