@quidgest/chatbot 0.0.6 → 0.0.7

package/dist/style.css

@@ -1,93 +1 @@
-.q-chatbot {
-  width: 100%;
-  height: 100%;
-  padding: 1rem;
-}
-.q-chatbot input {
-  line-height: 1.5rem;
-}
-.q-chatbot .q-input-group .i-text__field {
-  border-radius: 0;
-  flex: 1;
-}
-.q-chatbot__input {
-  flex: 1;
-}
-.q-chatbot__content {
-  background-color: white;
-  border: 1px solid #eaebec;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  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;
-  max-width: 100%;
-  gap: 0.2rem;
-}
-.q-chatbot__messages-wrapper_right {
-  justify-content: flex-end;
-}
-.q-chatbot__tools {
-  display: flex;
-  flex-direction: row;
-  justify-content: end;
-  max-width: 100%;
-}
-.q-chatbot__message-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
-}
-.q-chatbot__message-container {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 0.5rem;
-}
-.q-chatbot__messages-wrapper_right {
-  justify-content: flex-end;
-}
-.q-chatbot__profile {
-  border-radius: 50%;
-  height: 2rem;
-  width: 2rem;
-}
-.q-chatbot__message {
-  min-width: 4rem;
-  display: flex;
-  align-items: center;
-  padding: 0.3rem 0.5rem;
-  background-color: #eaebec;
-  white-space: normal;
-  min-height: 2rem;
-}
-.q-chatbot__messages-wrapper_right .q-chatbot__message {
-  background-color: rgba(1, 139, 210, 0.2);
-}
-.q-chatbot__sender {
-  white-space: nowrap;
-  color: #7c858d;
-  font-size: 0.7rem;
-}
-
-@keyframes dotPulse {
-  0% {
-    opacity: 0.5;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.5;
-  }
-}
+.q-chatbot{width:100%;height:100%;padding:1rem}.q-chatbot input{line-height:1.5rem}.q-chatbot .q-input-group .i-text__field{border-radius:0;flex:1}.q-chatbot__input{flex:1}.q-chatbot__content{background-color:#fff;border:1px solid #eaebec;height:100%;width:100%;display:flex;flex-direction:column;gap:.75rem}.q-chatbot__messages-container{display:flex;flex-direction:column;padding:0 1rem 2rem;gap:1.5rem;overflow:auto}.q-chatbot__messages-wrapper{display:flex;max-width:100%;gap:.2rem}.q-chatbot__tools{display:flex;flex-direction:row;justify-content:end;max-width:100%}.q-chatbot__message-wrapper{display:flex;flex-direction:column;gap:.2rem}.q-chatbot__message-container{display:flex;flex-direction:row;align-items:center;gap:.5rem}.q-chatbot__messages-wrapper_right{justify-content:flex-end}.q-chatbot__profile{border-radius:50%;height:2rem;width:2rem}.q-chatbot__message{min-width:4rem;display:flex;align-items:center;padding:.3rem .5rem;background-color:#eaebec;white-space:normal;min-height:2rem}.q-chatbot__messages-wrapper_right .q-chatbot__message{background-color:#018bd233}.q-chatbot__sender{white-space:nowrap;color:#7c858d;font-size:.7rem}@keyframes dotPulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@quidgest/chatbot",
     "private": false,
-    "version": "0.0.6",
+    "version": "0.0.7",
     "type": "module",
     "license": "UNLICENSED",
     "main": "dist/index.cjs",
@@ -24,10 +24,12 @@
         "src"
     ],
     "scripts": {
-        "build": "yarn build-lib",
-        "build-lib": "rimraf ./dist && vue-tsc --noEmit && vite build",
+        "build": "rimraf ./dist && vite build",
         "build-types": "vue-tsc --emitDeclarationOnly --declaration -p tsconfig.json",
-        "lint": "eslint 'src/**/*.{ts,vue}'"
+        "lint": "pnpm lint:eslint && pnpm lint:prettier",
+        "lint:eslint": "eslint .",
+        "lint:prettier": "prettier src --check",
+        "lint:fix": "eslint . --fix && prettier --write --list-different src"
     },
     "dependencies": {
         "axios": "^1.6.7",
@@ -36,15 +38,17 @@
     "devDependencies": {
         "@types/node": "^20.11.13",
         "@vitejs/plugin-vue": "^4.5.2",
+        "eslint": "^9.8.0",
+        "eslint-plugin-prettier": "^5.2.1",
+        "prettier": "^3.3.3",
         "rimraf": "^5.0.5",
         "sass": "^1.70.0",
         "typescript": "^5.2.2",
         "vite": "^5.0.8",
         "vite-plugin-dts": "^3.7.3",
-        "vue-tsc": "^1.8.25",
-        "cross-env": "5.0.5"
+        "vue-tsc": "^1.8.25"
     },
     "peerDependencies": {
-        "@quidgest/ui": "^0.13.1"        
+        "@quidgest/ui": "^0.14.1"
     }
 }

package/src/assets/styles/styles.scss

@@ -22,7 +22,7 @@
         height: 100%;
         width: 100%;
         display: flex;
-        flex-direction: column;        
+        flex-direction: column;
         gap: 0.75rem;
     }
 
@@ -38,10 +38,10 @@
         display: flex;
         max-width: 100%;
         gap: 0.2rem;
-       
-       &_right {
-          justify-content: flex-end;
-       }
+
+        &_right {
+            justify-content: flex-end;
+        }
     }
 
     &__tools {
@@ -53,7 +53,7 @@
 
     &__message-wrapper {
         display: flex;
-        flex-direction: column;        
+        flex-direction: column;
         gap: 0.2rem;
     }
 

package/src/components/CBMessage.vue

@@ -40,7 +40,7 @@
     })
 
     const getLocaleDate = computed(() => {
-        if(!props.dateFormat) return props.date.toLocaleString()
+        if (!props.dateFormat) return props.date.toLocaleString()
 
         return formatDate(props.date, props.dateFormat)
     })
@@ -69,14 +69,13 @@
 
 <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
@@ -87,7 +86,7 @@
 
             <!-- Message body -->
             <div class="q-chatbot__message">
-                <QLineLoader v-if="loading" />    
+                <QLineLoader v-if="loading" />
                 <template v-else>
                     <div
                         class="q-chatbot__text"
@@ -102,4 +101,4 @@
             </div>
         </div>
     </div>
-</template>
+</template>

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,14 +14,16 @@
 
     import {
         QButton,
-        QTextField,        
+        QTextField,
         QInputGroup,
         QIcon
     } 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[] = []
@@ -22,7 +31,7 @@
     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)
@@ -31,7 +40,7 @@
         /**
          * API Enpoint URL
          */
-        apiEndpoint?: string,
+        apiEndpoint?: string
 
         /**
          * Static resource texts used by ChatBot
@@ -80,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() {
@@ -112,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') {
@@ -166,11 +180,11 @@
     }
 
     function scrollToBottom() {
-       scrollElement.value?.scrollIntoView({ behavior: 'smooth' })
+        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
@@ -179,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
@@ -210,7 +222,7 @@
             userPrompt.value = previousHistoryText
         }
     }
-    
+
     function sendMessage() {
         if (
             userPrompt.value.trim().length == 0 ||
@@ -243,8 +255,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,18 +264,18 @@
                 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.value = false
-        })
+                setDisabledState(true)
+                console.log(error)
+            })
+            .finally(() => {
+                isLoading.value = false
+            })
     }
 
     function setCursorPosition(elem: HTMLInputElement, pos: number) {
@@ -272,55 +283,55 @@
         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
-            class="q-chatbot__content">
-
+        <div class="q-chatbot__content">
             <!-- Chat tools -->
             <div class="q-chatbot__tools">
                 <QButton
@@ -338,7 +349,10 @@
                     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>
 

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
-}
+}