@quidgest/chatbot 0.0.2 → 0.0.4

package/src/assets/styles/styles.scss

@@ -16,25 +16,59 @@
         flex: 1;
     }
 
+    .clear-btn {
+        color: red;
+    }
+
     &__content {
         background-color: white;
         border: 1px solid #eaebec;
         height: 100%;
         width: 100%;
-        padding: 2rem 1rem;
         display: flex;
         flex-direction: column;
         overflow: auto;
         gap: 1.5rem;
     }
 
-    &__message-wrapper {
+    &__messages-container {
+        display: flex;
+        flex-direction: column;
+        padding: 0 1rem 2rem 1rem;
+        gap: 1.5rem;
+    }
+
+    &__messages-wrapper {
         display: flex;
         max-width: 100%;
         gap: 0.2rem;
+       
+       &_right {
+          justify-content: flex-end;
+       }
+    }
+
+    &__tools {
+        display: flex;
+        flex-direction: row;
+        justify-content: end;
+        max-width: 100%;
+    }
+
+    &__message-wrapper {
+        display: flex;
+        flex-direction: column;        
+        gap: 0.2rem;
+    }
+
+    &__message-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 0.5rem;
     }
 
-    &__message-wrapper_right {
+    &__messages-wrapper_right {
         justify-content: flex-end;
     }
 
@@ -45,63 +79,23 @@
     }
 
     &__message {
-        position: relative;
-        margin: 0rem 0.5rem;
-        max-width: 75%;
+        min-width: 4rem;
         display: flex;
         align-items: center;
         padding: 0.3rem 0.5rem;
         background-color: #eaebec;
         white-space: normal;
+        min-height: 2rem;
     }
 
-    &__message-wrapper_right .q-chatbot__message {
+    &__messages-wrapper_right .q-chatbot__message {
         background-color: rgba(#018bd2, 20%);
     }
 
     &__sender {
         white-space: nowrap;
-        position: absolute;
         color: #7c858d;
         font-size: 0.7rem;
-        left: 0;
-        top: -1rem;
-    }
-
-    &__timestamp {
-        white-space: nowrap;
-        position: absolute;
-        color: #7c858d;
-        font-size: 0.7rem;
-        right: 0;
-        top: -1rem;
-    }
-
-    &__message-loading {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 0.3rem;
-
-        div {
-            background-color: rgba(#018bd2, 20%);
-            border-radius: 50%;
-            width: 0.5rem;
-            height: 0.5rem;
-            animation: dotPulse 1.5s infinite;
-
-            &:nth-child(1) {
-                animation-delay: 0s;
-            }
-
-            &:nth-child(2) {
-                animation-delay: 0.5s;
-            }
-
-            &:nth-child(3) {
-                animation-delay: 1s;
-            }
-        }
     }
 }
 

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,66 +69,74 @@
         nextTick(scrollChatToBottom)
     })
 
-    const getParsedEndpoint = computed(() => {
-		try {
-            let url = new URL(props.apiEndpoint).href
-
-            if (url.charAt(url.length - 1) == '/') {
-                url = url.slice(0, -1)
-            }
-            return url
-        } catch (ex) {
-            addChatMessage(props.texts.botIsSick)
-
-            isChatDisabled = true
-            throw Error('Could not parse Endpoint URL:\n' + ex)
-        }
-	})
-
-    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(getParsedEndpoint.value + '/auth/login', {
+        Axios.post(props.apiEndpoint + '/auth/login', {
             username: props.username,
             password: 'test'
         })
         .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
         })
     }
@@ -141,9 +156,7 @@
         msgHistoryStack = []
         userPrompt.value = ''
         isLoading = false
-        isChatDisabled = false
-
-        sendInitialMessage()
+        setDisabledState(false)
     }
 
     function scrollChatToBottom() {
@@ -177,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') {
@@ -222,13 +235,13 @@
         //Send message request
         let params = {
             message: prompt,
-            project: 'GenIO',
+            project: props.projectPath,
             user: props.username
         }
 
         isLoading = true
         Axios({
-            url: getParsedEndpoint.value + '/prompt/message',
+            url: props.apiEndpoint + '/prompt/message',
             method: 'POST',
             data: params,
             onDownloadProgress: (progressEvent) => {
@@ -238,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(() => {
@@ -255,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' })
@@ -277,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">
+                    <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
 }