@quidgest/chatbot 0.0.7 → 0.0.8

package/dist/style.css

@@ -1 +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:#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}}
+.q-chatbot{width:100%;padding:1rem;display:flex;flex-direction:column;height:100%}.q-chatbot input{line-height:1.5rem}.q-chatbot .q-input-group .i-text__field{border-radius:0;flex:1}.q-chatbot__content{background-color:#fff;border:1px solid #eaebec;height:100%;width:100%;display:flex;gap:.75rem;flex-direction:column;overflow:hidden}.q-chatbot__footer-container{padding:.8rem}.q-chatbot__send-container{padding-bottom:.25rem;display:flex;justify-content:flex-end}.q-chatbot__send-container .q-chatbot__send{border-radius:1rem}.q-chatbot__footer{position:sticky;padding:0 .5rem;border:1px solid #eaebec;border-radius:.25rem;bottom:0;width:100%;display:flex;flex-direction:column;gap:.25rem}.q-chatbot__footer .q-chatbot__input{min-height:50px;max-height:100px;border-bottom:1px solid #eaebec;overflow-y:auto}.q-chatbot__footer .q-text-area{max-height:100%;overflow-y:auto}.q-chatbot__footer .q-text-area .q-field__control{border:none}.q-chatbot__messages-container{display:flex;flex-direction:column;flex-grow:1;padding:0 1rem 2rem;gap:1.5rem;overflow-y: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.7",
+    "version": "0.0.8",
     "type": "module",
     "license": "UNLICENSED",
     "main": "dist/index.cjs",
@@ -32,8 +32,7 @@
         "lint:fix": "eslint . --fix && prettier --write --list-different src"
     },
     "dependencies": {
-        "axios": "^1.6.7",
-        "vue": "^3.3.11"
+        "axios": "^1.6.7"
     },
     "devDependencies": {
         "@types/node": "^20.11.13",
@@ -49,6 +48,7 @@
         "vue-tsc": "^1.8.25"
     },
     "peerDependencies": {
-        "@quidgest/ui": "^0.14.1"
+        "@quidgest/ui": "^0.14.17",
+        "vue": "3.5.13"
     }
 }

package/src/assets/styles/styles.scss

@@ -2,6 +2,9 @@
     width: 100%;
     height: 100%;
     padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 
     input {
         line-height: 1.5rem;
@@ -12,10 +15,6 @@
         flex: 1;
     }
 
-    &__input {
-        flex: 1;
-    }
-
     &__content {
         background-color: white;
         border: 1px solid #eaebec;
@@ -24,14 +23,59 @@
         display: flex;
         flex-direction: column;
         gap: 0.75rem;
+        flex-direction: column;
+        overflow: hidden;
     }
 
+
+    &__footer-container {
+        padding: 0.8rem;
+    }
+
+    &__send-container {
+        padding-bottom: .25rem;
+        display: flex;
+        justify-content: flex-end;
+
+        & .q-chatbot__send {
+            border-radius: 1rem;
+        }
+    }
+    
+    &__footer {
+        position: sticky;
+        padding: 0 .5rem;
+        border: 1px solid #eaebec;
+        border-radius: .25rem;
+        bottom: 0;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: .25rem;
+    
+        & .q-chatbot__input {
+          min-height: 50px;
+          max-height: 100px;
+          border-bottom: 1px solid #eaebec;
+          overflow-y: auto;
+        }
+    
+        & .q-text-area {
+            max-height: 100%;
+            overflow-y: auto;
+            
+            & .q-field__control {
+                border: none;
+            }
+        }
+      }
     &__messages-container {
         display: flex;
         flex-direction: column;
+        flex-grow: 1;
         padding: 0 1rem 2rem 1rem;
         gap: 1.5rem;
-        overflow: auto;
+        overflow-y: auto;
     }
 
     &__messages-wrapper {

package/src/components/ChatBot.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
     import {
         onMounted,
+        useTemplateRef,
         nextTick,
-        computed,
         ref,
         watch,
         defineOptions
@@ -14,9 +14,9 @@
 
     import {
         QButton,
-        QTextField,
-        QInputGroup,
-        QIcon
+        QTextArea,
+        QIcon,
+        QLabel
     } from '@quidgest/ui/components'
 
     import type { ResourceStrings } from '@/types/texts.type'
@@ -26,15 +26,13 @@
     } 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 = {
         /**
@@ -68,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:
@@ -82,10 +80,6 @@
         initChat()
     })
 
-    const userMessages = computed(() => {
-        return messages.value.filter((m: ChatBotMessage) => m.sender === 'user')
-    })
-
     function setDisabledState(state: boolean) {
         isChatDisabled = state
     }
@@ -173,7 +167,6 @@
 
     function resetChat() {
         messages.value = []
-        msgHistoryStack = []
         userPrompt.value = ''
         isLoading.value = false
         setDisabledState(false)
@@ -183,46 +176,6 @@
         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 ||
@@ -278,11 +231,6 @@
             })
     }
 
-    function setCursorPosition(elem: HTMLInputElement, pos: number) {
-        elem.focus()
-        elem.setSelectionRange(pos, pos)
-    }
-
     function clearChat() {
         Axios.post(props.apiEndpoint + '/prompt/clear', {
             username: props.username,
@@ -357,31 +305,34 @@
             </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>