@quidgest/chatbot 0.0.7 → 0.0.9

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-disabled{background-color:rgb(var(--q-theme-neutral-light-rgb)/.25);cursor:not-allowed}.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:column;gap:.25rem}.q-chatbot__messages-wrapper_right{justify-content:flex-end}.q-chatbot__messages-wrapper_right .q-chatbot__message-container{align-items:flex-end}.q-chatbot__messages-wrapper_right .q-chatbot__message-wrapper{display:flex;align-items:flex-end}.q-chatbot__profile.q-icon__img{border-radius:50%;height:2rem;width:2rem}.q-chatbot__message{display:flex;align-items:center;padding:.3rem .5rem;background-color:#eaebec;width:fit-content;white-space:normal;min-height:2rem;word-wrap:break-word;word-break:break-word;border-radius:0 .5rem .5rem}.q-chatbot__messages-wrapper_right .q-chatbot__message{background-color:#018bd233;border-radius:.5rem 0 .5rem .5rem}.q-chatbot__sender{white-space:nowrap;color:#7c858d;font-size:.7rem}.pulsing-dots{display:flex;align-items:center;justify-content:center;gap:.1rem}.dot{font-size:20px;line-height:1;animation:pulse 1s infinite;color:var(--q-theme-primary)}@keyframes pulse{0%,to{transform:scale(.8);opacity:.6}50%{transform:scale(1);opacity:1}}

package/dist/types/chatbot.type.d.ts

@@ -0,0 +1,13 @@
+import { ResourceStrings } from './texts.type';
+
+export type ChatBotProps = {
+    apiEndpoint?: string;
+    texts?: ResourceStrings;
+    username: string;
+    projectPath: string;
+    userImage?: string;
+    chatbotImage?: string;
+    dateFormat?: string;
+    mode?: ChatBotMode;
+};
+export type ChatBotMode = 'chat' | 'agent';

package/dist/types/message.type.d.ts

@@ -2,9 +2,10 @@ export type ChatBotMessage = {
     id: number;
     message: string;
     date: Date;
-    sender: 'bot' | 'user';
+    sender: ChatBotMessageSender;
 };
 export type ChatBotMessageContent = {
     content: string;
     type: string;
 };
+export type ChatBotMessageSender = 'bot' | 'user';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@quidgest/chatbot",
     "private": false,
-    "version": "0.0.7",
+    "version": "0.0.9",
     "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.19",
+        "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,64 @@
         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;
+
+        &-disabled {
+            background-color: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
+            cursor: not-allowed;
+        }
+    
+        & .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 {
@@ -59,33 +108,45 @@
 
     &__message-container {
         display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 0.5rem;
+        flex-direction: column;
+        gap: 0.25rem;
     }
 
     &__messages-wrapper_right {
         justify-content: flex-end;
+
+        .q-chatbot__message-container {
+            align-items: flex-end;
+        }
+
+        .q-chatbot__message-wrapper {
+            display: flex;
+            align-items: flex-end;
+        }
     }
 
-    &__profile {
+    &__profile.q-icon__img {
         border-radius: 50%;
         height: 2rem;
         width: 2rem;
     }
 
     &__message {
-        min-width: 4rem;
         display: flex;
         align-items: center;
         padding: 0.3rem 0.5rem;
         background-color: #eaebec;
+        width: fit-content;
         white-space: normal;
         min-height: 2rem;
+        word-wrap: break-word;
+        word-break: break-word;
+        border-radius: 0 0.5rem 0.5rem .5rem;
     }
 
     &__messages-wrapper_right .q-chatbot__message {
         background-color: rgba(#018bd2, 20%);
+        border-radius: 0.5rem 0 0.5rem .5rem;
     }
 
     &__sender {
@@ -95,14 +156,27 @@
     }
 }
 
-@keyframes dotPulse {
-    0% {
-        opacity: 0.5;
+.pulsing-dots {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.1rem;
+}
+
+.dot {
+  font-size: 20px;
+  line-height: 1;
+  animation: pulse 1s infinite;
+  color: var(--q-theme-primary);
+}
+
+@keyframes pulse {
+    0%, 100% {
+      transform: scale(0.8);
+      opacity: 0.6;
     }
     50% {
-        opacity: 1;
+      transform: scale(1);
+      opacity: 1;
     }
-    100% {
-        opacity: 0.5;
-    }
-}
+}

package/src/components/CBMessage.vue

@@ -1,13 +1,45 @@
+<template>
+    <div class="q-chatbot__message-container">
+        <!-- Chatbot Image -->
+        <q-icon
+            type="img"
+            :icon="messageImage"
+            alt="Sender Image"
+            class="q-chatbot__profile" />
+
+        <div class="q-chatbot__message-wrapper">            
+            <!-- Message body -->
+            <div class="q-chatbot__message">
+                <!-- When loading is true, show bouncing dots animation -->
+                <pulse-dots 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 
+                class="q-chatbot__sender">
+                {{ messageDate }}
+            </div>
+        </div>
+    </div>
+</template>
+
 <script setup lang="ts">
     import { computed } from 'vue'
-    import ChatBotIcon from '@/assets/chatbot.png'
-    import { QLineLoader } from '@quidgest/ui/components'
-
+    import { QIcon } from '@quidgest/ui/components'
+    import PulseDots from '@/components/PulseDots.vue'
+    import type { ChatBotMessageSender } from '@/types/message.type'
     export interface CBMessageProps {
         /*
          * Sender of the message
          */
-        sender?: 'bot' | 'user'
+        sender?: ChatBotMessageSender
 
         /*
          * Message to be displayed
@@ -27,11 +59,22 @@
         /**
          * Project locale
          */
-        dateFormat?: string
+        dateFormat?: string,
+
+        /**
+         * User image
+         */
+        userImage: string
+
+        /**
+         * Chatbot image
+         */
+        chatbotImage: string
     }
 
     const props = withDefaults(defineProps<CBMessageProps>(), {
         sender: 'user',
+        userImage: undefined,
         date: () => new Date()
     })
 
@@ -45,10 +88,12 @@
         return formatDate(props.date, props.dateFormat)
     })
 
-    const messageHeader = computed(() => {
+    const messageDate = computed(() => {
         return `${senderName.value} ${getLocaleDate.value}`
     })
 
+    const messageImage = computed(() => props.sender === 'bot' ? props.chatbotImage : props.userImage);
+
     function formatDate(date: Date, format: string) {
         const day = date.getDate().toString().padStart(2, '0')
         const month = (date.getMonth() + 1).toString().padStart(2, '0')
@@ -66,39 +111,3 @@
             .replace('ss', seconds)
     }
 </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>