@quidgest/chatbot 0.0.6 → 0.0.8

package/src/components/ChatBot.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
-    import { onMounted, nextTick, computed, ref, watch, defineOptions } from 'vue'
+    import {
+        onMounted,
+        useTemplateRef,
+        nextTick,
+        ref,
+        watch,
+        defineOptions
+    } from 'vue'
     import type { Ref } from 'vue'
     import Axios from 'axios'
     import type { AxiosResponse } from 'axios'
@@ -7,31 +14,31 @@
 
     import {
         QButton,
-        QTextField,        
-        QInputGroup,
-        QIcon
+        QTextArea,
+        QIcon,
+        QLabel
     } 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
-    
+
     // refs
-    const scrollElement = ref<HTMLElement | null>(null)
-    const promptInput = ref<HTMLInputElement | null>(null)
+    const scrollElement = useTemplateRef('scrollElement')
 
     export type ChatBotProps = {
         /**
          * API Enpoint URL
          */
-        apiEndpoint?: string,
+        apiEndpoint?: string
 
         /**
          * Static resource texts used by ChatBot
@@ -59,7 +66,7 @@
         texts: () => ({
             chatbotTitle: 'ChatBot',
             qButtonTitle: 'Send message',
-            placeholderMessage: 'Type your message here...',
+            inputLabel: 'What can I help with?',
             initialMessage:
                 "Howdy! I am GenioBot 👋, Quidgest's personal AI assistant! How can I help you?",
             loginError:
@@ -73,38 +80,34 @@
         initChat()
     })
 
-    const userMessages = computed(() => {
-        return messages.value.filter((m: ChatBotMessage) => m.sender === 'user')
-    })
-
     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() {
@@ -112,28 +115,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') {
@@ -159,58 +167,15 @@
 
     function resetChat() {
         messages.value = []
-        msgHistoryStack = []
         userPrompt.value = ''
         isLoading.value = false
         setDisabledState(false)
     }
 
     function scrollToBottom() {
-       scrollElement.value?.scrollIntoView({ behavior: 'smooth' })
+        scrollElement.value?.scrollIntoView({ behavior: 'smooth' })
     }
 
-    function handleKey(event: KeyboardEvent) {
-        if(promptInput.value == null) return;
-
-        if (event.key == 'ArrowUp') {
-            //No user messages, no need to continue
-            if (userMessages.value.length == 0) return
-
-            //Get next message to read
-            let lastMsgObj =
-                userMessages.value[
-                    userMessages.value.length -
-                        1 -
-                        msgHistoryStack.length
-                ]
-
-            //No more messages to go through
-            if (!lastMsgObj) return
-
-            //Save current prompt (even if modified) & update input
-            msgHistoryStack.push(userPrompt.value)
-            userPrompt.value = lastMsgObj.message
-
-            //Set the cursor to the end of text
-            nextTick(() =>
-                setCursorPosition(
-                    promptInput.value as HTMLInputElement,
-                    lastMsgObj.message.length
-                )
-            )
-        } else if (event.key == 'ArrowDown') {
-            let previousHistoryText = msgHistoryStack.pop()
-
-            if (!previousHistoryText) {
-                //No more prompts in the stack
-                userPrompt.value = ''
-                return
-            }
-
-            userPrompt.value = previousHistoryText
-        }
-    }
-    
     function sendMessage() {
         if (
             userPrompt.value.trim().length == 0 ||
@@ -243,8 +208,7 @@
             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
@@ -253,74 +217,69 @@
                 scrollToBottom()
             }
         })
-        .then(({ data }) => {
-            if (msg) msg.message = data
-        })
-        .catch((error) => {
-            addChatMessage(props.texts.botIsSick)
-
-            setDisabledState(true)
-            console.log(error)
-        })
-        .finally(() => {
-            isLoading.value = false
-        })
-    }
+            .then(({ data }) => {
+                if (msg) msg.message = data
+            })
+            .catch((error) => {
+                addChatMessage(props.texts.botIsSick)
 
-    function setCursorPosition(elem: HTMLInputElement, pos: number) {
-        elem.focus()
-        elem.setSelectionRange(pos, pos)
+                setDisabledState(true)
+                console.log(error)
+            })
+            .finally(() => {
+                isLoading.value = false
+            })
     }
 
-    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
-            class="q-chatbot__content">
-
+        <div class="q-chatbot__content">
             <!-- Chat tools -->
             <div class="q-chatbot__tools">
                 <QButton
@@ -338,36 +297,42 @@
                     v-for="message in messages"
                     :key="message.id"
                     :class="getMessageClasses(message.sender)">
-                    <CBMessage v-bind="message" :date-format="props.dateFormat" :loading="isLoading && !message.message" />                
+                    <CBMessage
+                        v-bind="message"
+                        :date-format="props.dateFormat"
+                        :loading="isLoading && !message.message" />
                 </div>
             </div>
 
             <div ref="scrollElement"></div>
+            
+            <div class="q-chatbot__footer-container">
+                <label> {{ props.texts.inputLabel }} </label>
+                <div class="q-chatbot__footer">
+                    <div class="q-chatbot__input">
+                        <QTextArea
+                            v-model="userPrompt"
+                            size="block"
+                            autosize
+                            resize="none"
+                            :rows="2"
+                            :disabled="isChatDisabled"
+                            @keyup.enter="sendMessage" />
+                    </div>
+                    <div class="q-chatbot__send-container">
+                        <QButton
+                            :title="props.texts.qButtonTitle"
+                            b-style="primary"
+                            class="q-chatbot__send"
+                            :disabled="isChatDisabled || isLoading"
+                            :loading="isLoading"
+                            @click="sendMessage">
+                            <QIcon icon="send" />
+                        </QButton>
+                    </div>
+                </div>
+            </div>
         </div>
 
-        <QInputGroup
-            size="block"
-            :disabled="isChatDisabled">
-            <QTextField
-                ref="promptInput"
-                v-model="userPrompt"
-                class="q-chatbot__input"
-                :placeholder="props.texts.placeholderMessage"
-                :disabled="isChatDisabled"
-                @keyup.enter="sendMessage"
-                @keydown="handleKey" />
-
-            <template #append>
-                <QButton
-                    :title="props.texts.qButtonTitle"
-                    b-style="primary"
-                    class="q-chatbot__send"
-                    :disabled="isChatDisabled || isLoading"
-                    :loading="isLoading"
-                    @click="sendMessage">
-                    <QIcon icon="send" />
-                </QButton>
-            </template>
-        </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
-}
+}