@quidgest/chatbot 0.0.3 → 0.0.5

package/src/components/CBMessage.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+    import { computed } from 'vue'
+    import ChatBotIcon from '@/assets/chatbot.png'
+    import { QLineLoader } from '@quidgest/ui'
+
+    export interface CBMessageProps {
+        /*
+         * Sender of the message
+         */
+        sender?: 'bot' | 'user'
+
+        /*
+         * Message to be displayed
+         */
+        message?: string
+
+        /*
+         * Date of when the message was sent
+         */
+        date?: Date
+
+        /*
+         * If the message is loading
+         */
+        loading?: boolean
+    }
+
+    const props = withDefaults(defineProps<CBMessageProps>(), {
+        sender: 'user',
+        date: () => new Date()
+    })
+
+    const senderName = computed(() => {
+        return props.sender === 'bot' ? 'GenioBot' : 'You'
+    })
+
+    const getLocaleDate = computed(() => {
+        return props.date.toLocaleString()
+    })
+
+    const messageHeader = computed(() => {
+        return `${senderName.value} ${getLocaleDate.value}`
+    })
+</script>
+
+<template>
+    <div class="q-chatbot__message-container">
+
+        <!-- Chatbot Image -->
+        <img
+            v-if="props.sender === 'bot'"
+            :src="ChatBotIcon"
+            alt="Chatbot"
+            class="q-chatbot__profile" />
+    
+        <div class="q-chatbot__message-wrapper">
+            <!-- Message header -->
+            <div
+                v-if="!loading"
+                class="q-chatbot__sender">
+                {{ messageHeader }}
+            </div>
+
+            <!-- Message body -->
+            <div class="q-chatbot__message">
+                <QLineLoader v-if="loading" />    
+                <template v-else>
+                    <div
+                        class="q-chatbot__text"
+                        v-if="props.sender == 'bot'"
+                        v-html="props.message"></div>
+                    <div
+                        class="q-chatbot__text"
+                        v-else>
+                        {{ props.message }}
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>

package/src/components/ChatBot.vue

@@ -3,6 +3,8 @@
     import type { Ref } from 'vue'
     import Axios from 'axios'
     import type { AxiosResponse } from 'axios'
+    import { CBMessage } from '@/components'
+
     import {
         QButton,
         QTextField,        
@@ -11,13 +13,13 @@
     } from '@quidgest/ui'
 
     import type { ResourceStrings } from '@/types/texts.type'
-    import type { ChatBotMessage } from '@/types/message.type'    
-    import ChatBotIcon from '@/assets/chatbot.png'
+    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 userPrompt: Ref<string> = ref('')
     let isChatDisabled: boolean = false
     let isLoading: boolean = false
     
@@ -40,6 +42,11 @@
          * Genio username
          */
         username: string
+
+        /**
+         * Project aplication path
+         */
+        projectPath: string
     }
 
     const props = withDefaults(defineProps<ChatBotProps>(), {
@@ -62,16 +69,13 @@
         nextTick(scrollChatToBottom)
     })
 
-    const sortedMessages = computed(() => {
-        return messages.value.toSorted((a: ChatBotMessage, b: ChatBotMessage) => {
-            const diff = new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
-            return diff !== 0 ? diff : a.sender === 'user' ? -1 : 1
-        })
-    })
-
     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', {
@@ -80,32 +84,59 @@
         })
         .then((response: AxiosResponse) => {
             if (response.status != 200 || !response.data.success) {
-                isChatDisabled = true
+                setDisabledState(true)
                 addChatMessage(props.texts.loginError)
                 return console.log(
                     `Unsuccessful login, endpoint gave status ${response.status}`
                 )
             }
 
-            sendInitialMessage()
+            loadChatData()
         })
         .catch((error: Error) => {
-            if (error) {
-                isChatDisabled = true
+            setDisabledState(true)
+            addChatMessage(props.texts.loginError)
+            console.log(
+                'The following error ocurred while trying to login: \n' +
+                    error
+            )
+        })
+    }
+
+    function loadChatData() {
+        Axios.post(props.apiEndpoint + '/prompt/load', {
+            username: props.username,
+            project: props.projectPath
+        })
+        .then((response: AxiosResponse) => {
+            if (response.status != 200 || !response.data.success) {
+                setDisabledState(true)
                 addChatMessage(props.texts.loginError)
-                console.log(
-                    'The following error ocurred while trying to login: \n' +
-                        error
+                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)
+            console.log(
+                'The following error ocurred while trying to login: \n' +
+                    error
+            )
         })
     }
 
     function addChatMessage(message: string, sender: 'bot' | 'user' = 'bot') {
         messages.value.push({
             id: nextMessageId++,
-            text: message,
-            timestamp: new Date(),
+            message,
+            date: new Date(),
             sender: sender
         })
     }
@@ -125,9 +156,7 @@
         msgHistoryStack = []
         userPrompt.value = ''
         isLoading = false
-        isChatDisabled = false
-
-        sendInitialMessage()
+        setDisabledState(false)
     }
 
     function scrollChatToBottom() {
@@ -161,13 +190,13 @@
 
             //Save current prompt (even if modified) & update input
             msgHistoryStack.push(userPrompt.value)
-            userPrompt.value = lastMsgObj.text
+            userPrompt.value = lastMsgObj.message
 
             //Set the cursor to the end of text
             nextTick(() =>
                 setCursorPosition(
                     promptInput.value as HTMLInputElement,
-                    lastMsgObj.text.length
+                    lastMsgObj.message.length
                 )
             )
         } else if (event.key == 'ArrowDown') {
@@ -206,7 +235,7 @@
         //Send message request
         let params = {
             message: prompt,
-            project: 'GenIO',
+            project: props.projectPath,
             user: props.username
         }
 
@@ -222,16 +251,16 @@
 
                 if (status != 200) return
 
-                if (msg) msg.text = chunk
+                if (msg) msg.message = chunk
             }
         })
         .then(({ data }) => {
-            if (msg) msg.text = data
+            if (msg) msg.message = data
         })
         .catch((error) => {
             addChatMessage(props.texts.botIsSick)
 
-            isChatDisabled = true
+            setDisabledState(true)
             console.log(error)
         })
         .finally(() => {
@@ -239,21 +268,50 @@
         })
     }
 
-    function getSenderName(sender: 'bot' | 'user') {
-        return sender === 'bot' ? 'GenioBot' : 'You'
+    function setCursorPosition(elem: HTMLInputElement, pos: number) {
+        elem.focus()
+        elem.setSelectionRange(pos, pos)
     }
 
-    function getConvertedTime(date: Date) {
-        return date.toLocaleString()
+    function clearChat() {        
+        Axios.post(props.apiEndpoint + '/prompt/clear', {
+            username: props.username,
+            project: props.projectPath
+        })
+        .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)
+            console.log(
+                'The following error ocurred while trying to communicate with the endpoint: \n' +
+                    error
+            )
+        })
     }
 
-    function setCursorPosition(elem: HTMLInputElement, pos: number) {
-        elem.focus()
-        elem.setSelectionRange(pos, pos)
+    function getMessageClasses(sender: 'user' | 'bot') {
+        const classes: string[] = ['q-chatbot__messages-wrapper']
+
+        if(sender == 'user')
+            classes.push('q-chatbot__messages-wrapper_right')
+
+        return classes
     }
 
     watch(() => props.apiEndpoint, () => {
         resetChat()
+        initChat()
     })
 
     defineOptions({ name: 'ChatBot' })
@@ -261,63 +319,29 @@
 
 <template>
     <div class="q-chatbot">
-        <div class="c-sidebar__subtitle">
-            <span>{{ props.texts.chatbotTitle }}</span>
-        </div>
-
         <div
-            class="q-chatbot__content"
-            ref="messagesContainer">
-            <div
-                v-for="message in sortedMessages"
-                :key="message.id"
-                :class="[
-                    'q-chatbot__message-wrapper',
-                    {
-                        'q-chatbot__message-wrapper_right':
-                            message.sender == 'user'
-                    }
-                ]">
-                <img
-                    v-if="message.sender == 'bot'"
-                    :src="ChatBotIcon"
-                    alt=""
-                    class="q-chatbot__profile" />
-
-                <div class="q-chatbot__message">
-                    <div
-                        v-if="isLoading && !message.text"
-                        class="q-chatbot__message-loading">
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                    </div>
-
-                    <template v-else>
-                        <div
-                            class="q-chatbot__sender"
-                            v-if="message.text && message.sender == 'bot'">
-                            {{
-                                getSenderName(message.sender) +
-                                ' ' +
-                                getConvertedTime(message.timestamp)
-                            }}
-                        </div>
-                        <div
-                            class="q-chatbot__timestamp"
-                            v-if="message.text && message.sender == 'user'">
-                            {{ getConvertedTime(message.timestamp) }}
-                        </div>
-                        <div
-                            class="q-chatbot__text"
-                            v-if="message.sender == 'bot'"
-                            v-html="message.text"></div>
-                        <div
-                            class="q-chatbot__text"
-                            v-else>
-                            {{ message.text }}
-                        </div>
-                    </template>
+            ref="messagesContainer"
+            class="q-chatbot__content">
+
+            <!-- Chat tools -->
+            <div class="q-chatbot__tools">
+                <q-button
+                    :title="props.texts.qButtonTitle"
+                    b-style="plain"
+                    class="clear-btn"
+                    :disabled="isChatDisabled"
+                    borderless
+                    @click="clearChat">
+                    <q-icon icon="bin" />
+                </q-button>
+            </div>
+
+            <div class="q-chatbot__messages-container">
+                <div
+                    v-for="message in messages"
+                    :key="message.id"
+                    :class="getMessageClasses(message.sender)">
+                    <CBMessage v-bind="message" :loading="isLoading && !message.message" />                
                 </div>
             </div>
         </div>

package/src/components/index.ts

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

package/src/types/message.type.ts

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