vue-wiguet-chatweb 0.0.13 → 0.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-wiguet-chatweb",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "type": "module",
   "files": [
     "dist",

package/src/components/Chat.vue

@@ -25,7 +25,13 @@
             <IconUser />
           </button> -->
           <div class="jl-inputgroup-chat">
-            <input v-model="message" class="jl2-input-chat" required />
+            <textarea
+              v-model="message"
+              class="jl2-input-chat"
+              required
+              ref="textArea"
+              @input="() => autoAdjustHeight()"
+            />
             <button type="submit" class="pointer btn-primary">
               <IconSend style="width: 20px; height: 20px" />
             </button>
@@ -50,7 +56,11 @@ import {
 import IconClose from "./IconClose.vue";
 import IconSend from "./IconSend.vue";
 // import IconUser from "./IconUser.vue";
-import { getMessagesApi, sendMessageApi } from "../store/index";
+import {
+  getMessagesApi,
+  sendMessageApi,
+  setVistoToTrueApi,
+} from "../store/index";
 import { getInformationApi } from "../store";
 import MessageList from "./MessageList.vue";
 import Loader from "./Loader.vue";
@@ -59,6 +69,7 @@ import { searchFromLast } from "../resources/functions.helpers";
 //DATA
 const rabbitMQServiceListen: any = ref(null);
 const message = ref("");
+const notViewed = ref(0);
 
 const messagesData = ref<{ data: Message[]; canLoadMoreMessages: boolean }>({
   data: [],
@@ -73,6 +84,7 @@ const emit = defineEmits([
   "show-confirm",
   "new-message",
   "clear-new-messages",
+  "not-viewed-total",
 ]);
 
 const props = defineProps({
@@ -100,6 +112,7 @@ watch(
   async (current) => {
     if (current) {
       emit("clear-new-messages");
+      scrollToBottom();
       if (!virtualHost.value || !appChatId.value) {
         const resp = await getInformationApi(props.tokenAuth);
         const data = resp.response.data;
@@ -107,8 +120,8 @@ watch(
         appChatId.value = data.appChat.id;
         connectMsRabbit();
       }
-      if (messagesData.value.data.length === 0) {
-        getMessages();
+      if (notViewed.value > 0) {
+        setVistoToTrueApi(appChatId.value, props.tokenAuth);
       }
     }
   }
@@ -119,6 +132,9 @@ onMounted(async () => {
     const data = resp.response.data;
     virtualHost.value = data.virtualHost;
     appChatId.value = data.appChat.id;
+    emit("not-viewed-total", data.appChat.totalNoVistosCliente);
+    notViewed.value = data.appChat.totalNoVistosCliente;
+    getMessages();
     connectMsRabbit();
   }
 });
@@ -260,7 +276,11 @@ const connectMsRabbit = (app: any = "webchat") => {
       !val.message.esCliente
     ) {
       messagesData.value.data.push(val.message);
+      if (props.visible === true) {
+        setVistoToTrueApi(appChatId.value, props.tokenAuth);
+      }
       if (props.visible === false) {
+        notViewed.value = notViewed.value + 1;
         emit("new-message");
       }
     }
@@ -288,6 +308,19 @@ const mantainElementsOnViewport = (scrollHeightBeforeAdd: number) => {
     }
   });
 };
+
+const textArea = ref<HTMLTextAreaElement>();
+
+function autoAdjustHeight() {
+  if (!textArea.value) return;
+  // Reset the height to default to get the scroll height
+  textArea.value.style.height = "auto";
+  // Set the new height based on the scroll height
+  textArea.value.style.height =
+    textArea.value.scrollHeight === 54
+      ? textArea.value.scrollHeight - 12 + "px"
+      : textArea.value.scrollHeight + "px";
+}
 </script>
 
 <style scoped>

package/src/components/MessageList.vue

@@ -117,6 +117,7 @@ watch(
       padding-box;
   /* background: linear-gradient(135deg, #FE6D00, #1384C5) border-box; */
   color: #fff;
+  height: 100%;
 }
 
 .left {
@@ -147,6 +148,7 @@ watch(
 
 .message-text {
   margin-bottom: 10px;
+  overflow-wrap: break-word;
 }
 .detail-message {
   font-size: 10px;
@@ -159,7 +161,6 @@ watch(
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-bottom: 0.5rem;
 }
 
 .message {
@@ -201,11 +202,17 @@ watch(
 .btn-container {
   display: flex;
   align-items: center;
+  position: absolute;
+  left: -40px;
+  top: 50%;
+  transform: translateY(-50%);
 }
 
 .message-container {
   min-width: 80%;
   max-width: 80%;
+  position: relative;
+  margin-bottom: 0.5rem;
 }
 
 .messages-container-list {

package/src/components/Widget.vue

@@ -25,6 +25,7 @@
         @show-confirm="(data) => emit('show-confirm', data)"
         @clear-new-messages="newMessages = 0"
         @new-message="() => newMessages++"
+        @not-viewed-total="(val) => (newMessages = val)"
       />
     </div>
   </div>
@@ -81,5 +82,6 @@ defineProps({
   border-radius: 50%;
   right: -2px;
   top: -4px;
+  z-index: 2;
 }
 </style>