@quidgest/chatbot 0.0.5 → 0.0.7

package/dist/style.css

@@ -1,96 +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 .clear-btn {
-  color: red;
-}
-.q-chatbot__content {
-  background-color: white;
-  border: 1px solid #eaebec;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  gap: 1.5rem;
-}
-.q-chatbot__messages-container {
-  display: flex;
-  flex-direction: column;
-  padding: 0 1rem 2rem 1rem;
-  gap: 1.5rem;
-}
-.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.5",
+    "version": "0.0.7",
     "type": "module",
     "license": "UNLICENSED",
     "main": "dist/index.cjs",
@@ -24,19 +24,23 @@
         "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",
-        "vue": "^3.3.11",
-        "cross-env": "5.0.5"
+        "vue": "^3.3.11"
     },
     "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",
@@ -45,6 +49,6 @@
         "vue-tsc": "^1.8.25"
     },
     "peerDependencies": {
-        "@quidgest/ui": "0.9.7"
+        "@quidgest/ui": "^0.14.1"
     }
 }

package/src/assets/styles/styles.scss

@@ -16,10 +16,6 @@
         flex: 1;
     }
 
-    .clear-btn {
-        color: red;
-    }
-
     &__content {
         background-color: white;
         border: 1px solid #eaebec;
@@ -27,8 +23,7 @@
         width: 100%;
         display: flex;
         flex-direction: column;
-        overflow: auto;
-        gap: 1.5rem;
+        gap: 0.75rem;
     }
 
     &__messages-container {
@@ -36,16 +31,17 @@
         flex-direction: column;
         padding: 0 1rem 2rem 1rem;
         gap: 1.5rem;
+        overflow: auto;
     }
 
     &__messages-wrapper {
         display: flex;
         max-width: 100%;
         gap: 0.2rem;
-       
-       &_right {
-          justify-content: flex-end;
-       }
+
+        &_right {
+            justify-content: flex-end;
+        }
     }
 
     &__tools {
@@ -57,7 +53,7 @@
 
     &__message-wrapper {
         display: flex;
-        flex-direction: column;        
+        flex-direction: column;
         gap: 0.2rem;
     }
 

package/src/components/CBMessage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
     import { computed } from 'vue'
     import ChatBotIcon from '@/assets/chatbot.png'
-    import { QLineLoader } from '@quidgest/ui'
+    import { QLineLoader } from '@quidgest/ui/components'
 
     export interface CBMessageProps {
         /*
@@ -23,6 +23,11 @@
          * If the message is loading
          */
         loading?: boolean
+
+        /**
+         * Project locale
+         */
+        dateFormat?: string
     }
 
     const props = withDefaults(defineProps<CBMessageProps>(), {
@@ -35,24 +40,42 @@
     })
 
     const getLocaleDate = computed(() => {
-        return props.date.toLocaleString()
+        if (!props.dateFormat) return props.date.toLocaleString()
+
+        return formatDate(props.date, props.dateFormat)
     })
 
     const messageHeader = computed(() => {
         return `${senderName.value} ${getLocaleDate.value}`
     })
+
+    function formatDate(date: Date, format: string) {
+        const day = date.getDate().toString().padStart(2, '0')
+        const month = (date.getMonth() + 1).toString().padStart(2, '0')
+        const year = date.getFullYear().toString().padStart(2, '0')
+        const hours = date.getHours().toString().padStart(2, '0')
+        const minutes = date.getMinutes().toString().padStart(2, '0')
+        const seconds = date.getSeconds().toString().padStart(2, '0')
+
+        return format
+            .replace('dd', day)
+            .replace('MM', month)
+            .replace('yyyy', year)
+            .replace('HH', hours)
+            .replace('mm', minutes)
+            .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
@@ -63,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"
@@ -78,4 +101,4 @@
             </div>
         </div>
     </div>
-</template>
+</template>