vue-wiguet-chatweb 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-wiguet-chatweb",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "files": [
     "dist",
@@ -35,8 +35,7 @@
     "socket.io-client": "^4.7.2",
     "vite-plugin-dts": "^3.4.0",
     "vue": "^3.3.4",
-    "vue-rabbit-frontend": "^0.0.15",
-    "vuex": "^4.1.0"
+    "vue-rabbit-frontend": "^0.0.15"
   },
   "devDependencies": {
     "@types/node": "^20.4.6",

package/src/components/Chat.vue

@@ -14,8 +14,8 @@
               <button type="submit">
                     <IconUser/>
               </button>
-              <div class="jl-inputgroup">
-                  <input v-model="message" class="jl2-input" required/>
+              <div class="jl-inputgroup-chat">
+                  <input v-model="message" class="jl2-input-chat" required/>
                   <button type="submit">
                     <IconSend/>
                   </button>
@@ -29,20 +29,21 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue';
 import ChatMessage from './ChatMessage.vue';
-import { useStore } from 'vuex';
+//import { useStore } from 'vuex';
 import { RabbitMQService } from 'vue-rabbit-frontend'
 import IconClose from './IconClose.vue'
 import IconSend from './IconSend.vue'
 import IconUser from './IconUser.vue'
-
+import {syncVirtualHostCentral,sendMessageByAppAndPhone,messagesByAppAndPhone} from '../store'
 ///STORE
-const store = useStore()
+//const store = useStore()
 //DATA
 const app = ref('webchat')
-const deviceSelect = ref('76177719')
+// const deviceSelect = ref('76177719')
 const rabbitMQServiceListen:any = ref(null);
 const message:any = ref(null);
 const messages:any = ref([]);
+const virtualHost:any = ref({virtualhost:''});
 
 const props = defineProps({
   toggleChat:{ type: Function, required: true },
@@ -57,22 +58,44 @@ const removeNumPrefix = (num:string) => {
     return num;
 }
 
+const messagesContainer = ref<HTMLElement | null>(null);
+
+const scrollToBottom = () => {
+  if (messagesContainer.value) {
+    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
+  }
+};
+
 const submitMessage = async (event:any) => {
   event.preventDefault();
-  const {virtualHost} = store.state
-  await store.dispatch('sendMessageByAppAndPhone',{
+  //const {virtualHost} = store.state
+  const {virtualhost} = virtualHost.value
+  // await store.dispatch('sendMessageByAppAndPhone',{
+  //   token:props.tokenAuth,
+  //   data:{
+  //     virtualHost:virtualHost.value,
+  //     queue:`widget_chat_${sessionStorage.getItem('tabBrowser')}`,//`${selectDetailtChat.value.app}_${queueUniqueUser.value}`,
+  //     device:'00000000',
+  //     phone:removeNumPrefix(deviceSelect.value),
+  //     app:app.value,
+  //     message: message.value,
+  //     widget:true
+  //   }
+  // })
+  await sendMessageByAppAndPhone({
     token:props.tokenAuth,
     data:{
-      virtualHost:virtualHost,
+      virtualHost:virtualhost,
       queue:`widget_chat_${sessionStorage.getItem('tabBrowser')}`,//`${selectDetailtChat.value.app}_${queueUniqueUser.value}`,
       device:'00000000',
-      phone:removeNumPrefix(deviceSelect.value),
+      phone:removeNumPrefix(props.phoneUser),
       app:app.value,
       message: message.value,
       widget:true
     }
   })
   message.value = null
+  scrollToBottom()
 }
 
 
@@ -80,8 +103,16 @@ const getMessagesByApp = async (param:{resetConnection:boolean}) => {
   if(param.resetConnection)
       disconnectMsRabbit();
   connectMsRabbit();
-  const messagesParse = [];
-  await store.dispatch('messagesByAppAndPhone', {
+  // const messagesParse = [];
+  // await store.dispatch('messagesByAppAndPhone', {
+  //   token:props.tokenAuth,
+  //   data:{
+  //     phone:props.phoneUser,
+  //     app:app.value,
+  //     device:null
+  //   }
+  // });
+  const getMessages = await messagesByAppAndPhone({
     token:props.tokenAuth,
     data:{
       phone:props.phoneUser,
@@ -89,23 +120,29 @@ const getMessagesByApp = async (param:{resetConnection:boolean}) => {
       device:null
     }
   });
-  const messagesData = store.getters.get_messages_chat;
+  //const messagesData = store.getters.get_messages_chat;
+  const messagesData = getMessages
+  console.log(messagesData)
   if (messagesData) {
-    for (const msg of messagesData) {
-      messagesParse.push(...msg.messages);
-    }
-    messages.value = messagesParse;
+    
+    messages.value = messagesData;
+  
+    // for (const msg of messagesData) {
+    //   messagesParse.push(...msg.messages);
+    // }
+    // messages.value = messagesParse;
   }
 };
 
 const connectMsRabbit = (app:any = 'webchat') => {
-  const {virtualHost} = store.state
+  //const {virtualHost} = store.state
+  const {virtualhost} = virtualHost.value
   let data = sessionStorage.getItem('tabBrowser');
   if(!data){
       let tab = Date.now();
       sessionStorage.setItem('tabBrowser', `${tab}`)
   }
-  rabbitMQServiceListen.value = new RabbitMQService(`${virtualHost}`,`widget_chat_${sessionStorage.getItem('tabBrowser')}`);
+  rabbitMQServiceListen.value = new RabbitMQService(`${virtualhost}`,`widget_chat_${sessionStorage.getItem('tabBrowser')}`);
   rabbitMQServiceListen.value.connect();
   rabbitMQServiceListen.value.subscribe(async () => {
     await getMessagesByApp({resetConnection:false});
@@ -121,14 +158,21 @@ const disconnectMsRabbit = () => {
 onMounted(async () => {
   await getMessagesByApp({resetConnection:false})
   const virtualHostUniqueUser = `WIDGET_CHAT_${props.phoneUser}`
-  await store.dispatch('syncVirtualHostCentral',{
+  // await store.dispatch('syncVirtualHostCentral',{
+  //   token:props.tokenAuth,
+  //   data:{
+  //     virtualHost:virtualHostUniqueUser
+  //   }
+  // })
+  virtualHost.value = await syncVirtualHostCentral({
     token:props.tokenAuth,
     data:{
       virtualHost:virtualHostUniqueUser
     }
   })
+  console.log(virtualHost.value)
   connectMsRabbit()
-  
+  scrollToBottom()
 });
 </script>
 

package/src/components/ChatMessage.vue

@@ -4,16 +4,16 @@
     <div class="bubble" :class="self ? 'left' : 'right'">
         <div :class="self ? 'content-left' : 'content-right'">
             <div class="message">
-              {{ message.dataMessage }}
+              {{ message.messages.dataMessage }}
             </div>
             <div class="detail-message flex justify-content-between">
-                <span class="mr-5" v-if="message.user?.nombreCompleto">
-                  {{ textCapitalize(message.user.nombreCompleto) }}
+                <span class="mr-5" v-if="message.messages.user?.nombreCompleto">
+                  {{ textCapitalize(message.messages.user.nombreCompleto) }}
                 </span>
                 <span class="mr-5" v-else>
                 </span>
                 <span>
-                  {{ formatTimeAPDate(message.createdAt) }}
+                  {{ formatTimeAPDate(message.messages.createdAt) }}
                 </span>
             </div>
         </div>
@@ -29,7 +29,7 @@ const props = defineProps({
 });
 
 const self = computed(() => {
-  return props.message.responseOrigin;
+  return props.message.messages.responseOrigin;
 });
 
 </script>