@ozdao/martyrs 0.2.427 → 0.2.429

package/dist/martyrs/src/modules/chats/components/pages/ChatPage.vue.cjs

@@ -4,6 +4,7 @@ const vue = require("vue");
 const ChatWindow = require("../sections/ChatWindow.vue.cjs");
 const chat_store = require("../../store/chat.store.cjs");
 ;/* empty css                */
+const _hoisted_1 = { class: "chat-main" };
 const _sfc_main = {
   __name: "ChatPage",
   props: {
@@ -11,6 +12,10 @@ const _sfc_main = {
       type: String,
       required: true
     },
+    user: {
+      type: String,
+      required: true
+    },
     chatID: {
       type: String,
       required: true
@@ -20,11 +25,16 @@ const _sfc_main = {
     const props = __props;
     vue.onMounted(async () => {
       chat_store.default.methods.setUsername(props.username || "user");
-      await chat_store.default.methods.connectWebSocket();
-      chat_store.default.methods.setCurrentChat(props.chatID);
+      await chat_store.default.methods.connectWebSocket(props.user);
+      await chat_store.default.methods.setCurrentChat(props.chatID);
+    });
+    vue.onUnmounted(() => {
+      chat_store.default.methods.disconnectChat();
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(ChatWindow.default);
+      return vue.openBlock(), vue.createElementBlock("main", _hoisted_1, [
+        vue.createVNode(ChatWindow.default)
+      ]);
     };
   }
 };

package/dist/martyrs/src/modules/chats/components/pages/ChatPage.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatPage.vue.cjs","sources":["../../../../../../../src/modules/chats/components/pages/ChatPage.vue"],"sourcesContent":["<template>\n  <!-- <div class=\"chat-page h-max-20r\"> -->\n    <!-- <aside class=\"chat-list\"> -->\n      <!-- Примерный список чатов. Должен быть дополнен реальной логикой -->\n      <!-- <div v-for=\"chat in chats\" :key=\"chat.id\" @click=\"selectChat(chat.id)\">\n        Чат {{ chat.name }}\n      </div> -->\n    <!-- </aside> -->\n    <!-- <main class=\"chat-main\"> -->\n      <ChatWindow />\n    <!-- </main> -->\n  <!-- </div> -->\n</template>\n\n<script setup>\nimport { ref, onMounted } from 'vue';\nimport ChatWindow from '../sections/ChatWindow.vue';\nimport chatStore from '../../store/chat.store.js';\n\nconst props = defineProps({\n  username: {\n    type: String,\n    required: true\n  },\n  chatID: {\n    type: String,\n    required: true\n  },\n})\n\n// const chats = ref([\n//   // Примерный список. В реальном приложении, список чатов должен загружаться с сервера.\n//   { id: 'chat1', name: 'Чат 1' },\n//   { id: 'chat2', name: 'Чат 2' }\n// ]);\n\nconst selectChat = (chatId) => {\n  chatStore.methods.setCurrentChat(chatId);\n};\n\nonMounted(async() => {\n  chatStore.methods.setUsername(props.username || 'user'); // Установка имени пользователя\n  await chatStore.methods.connectWebSocket(); // Подключение к WebSocket\n  chatStore.methods.setCurrentChat(props.chatID);\n});\n</script>\n\n<style>\n/* Стили остаются без изменений */\n</style>\n"],"names":["onMounted","chatStore"],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA,UAAM,QAAQ;AAqBdA,QAAAA,UAAU,YAAW;AACnBC,iBAAS,QAAC,QAAQ,YAAY,MAAM,YAAY,MAAM;AACtD,YAAMA,WAAS,QAAC,QAAQ;AACxBA,iBAAAA,QAAU,QAAQ,eAAe,MAAM,MAAM;AAAA,IAC/C,CAAC;;;;;;;"}
+{"version":3,"file":"ChatPage.vue.cjs","sources":["../../../../../../../src/modules/chats/components/pages/ChatPage.vue"],"sourcesContent":["<template>\n  <main class=\"chat-main\">\n    <ChatWindow />\n  </main>\n</template>\n\n<script setup>\nimport { ref, onMounted, onUnmounted } from 'vue';\nimport ChatWindow from '../sections/ChatWindow.vue';\nimport chatStore from '../../store/chat.store.js';\n\nconst props = defineProps({\n  username: {\n    type: String,\n    required: true\n  },\n  user: {\n    type: String,\n    required: true\n  },\n  chatID: {\n    type: String,\n    required: true\n  },\n});\n\nconst selectChat = (chatId) => {\n  chatStore.methods.setCurrentChat(chatId);\n};\n\nonMounted(async () => {\n  chatStore.methods.setUsername(props.username || 'user'); // Установка имени пользователя\n  await chatStore.methods.connectWebSocket(props.user); // Подключение к WebSocket\n  await chatStore.methods.setCurrentChat(props.chatID);\n});\n\nonUnmounted(() => {\n  // Clean up when the component is unmounted (e.g., navigating away)\n  chatStore.methods.disconnectChat();\n});\n</script>\n\n<style>\n/* Стили остаются без изменений */\n</style>"],"names":["onMounted","chatStore","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAWA,UAAM,QAAQ;AAmBdA,QAAAA,UAAU,YAAY;AACpBC,iBAAS,QAAC,QAAQ,YAAY,MAAM,YAAY,MAAM;AACtD,YAAMA,WAAS,QAAC,QAAQ,iBAAiB,MAAM,IAAI;AACnD,YAAMA,WAAS,QAAC,QAAQ,eAAe,MAAM,MAAM;AAAA,IACrD,CAAC;AAEDC,QAAAA,YAAY,MAAM;AAEhBD,iBAAS,QAAC,QAAQ,eAAgB;AAAA,IACpC,CAAC;;;;;;;;;"}

package/dist/martyrs/src/modules/chats/components/pages/ChatPage.vue.js

@@ -1,7 +1,8 @@
-import { onMounted, createBlock, openBlock } from "vue";
+import { onMounted, onUnmounted, createElementBlock, openBlock, createVNode } from "vue";
 import _sfc_main$1 from "../sections/ChatWindow.vue.js";
 import chatStore from "../../store/chat.store.js";
 /* empty css              */
+const _hoisted_1 = { class: "chat-main" };
 const _sfc_main = {
   __name: "ChatPage",
   props: {
@@ -9,6 +10,10 @@ const _sfc_main = {
       type: String,
       required: true
     },
+    user: {
+      type: String,
+      required: true
+    },
     chatID: {
       type: String,
       required: true
@@ -18,11 +23,16 @@ const _sfc_main = {
     const props = __props;
     onMounted(async () => {
       chatStore.methods.setUsername(props.username || "user");
-      await chatStore.methods.connectWebSocket();
-      chatStore.methods.setCurrentChat(props.chatID);
+      await chatStore.methods.connectWebSocket(props.user);
+      await chatStore.methods.setCurrentChat(props.chatID);
+    });
+    onUnmounted(() => {
+      chatStore.methods.disconnectChat();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$1);
+      return openBlock(), createElementBlock("main", _hoisted_1, [
+        createVNode(_sfc_main$1)
+      ]);
     };
   }
 };

package/dist/martyrs/src/modules/chats/components/pages/ChatPage.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatPage.vue.js","sources":["../../../../../../../src/modules/chats/components/pages/ChatPage.vue"],"sourcesContent":["<template>\n  <!-- <div class=\"chat-page h-max-20r\"> -->\n    <!-- <aside class=\"chat-list\"> -->\n      <!-- Примерный список чатов. Должен быть дополнен реальной логикой -->\n      <!-- <div v-for=\"chat in chats\" :key=\"chat.id\" @click=\"selectChat(chat.id)\">\n        Чат {{ chat.name }}\n      </div> -->\n    <!-- </aside> -->\n    <!-- <main class=\"chat-main\"> -->\n      <ChatWindow />\n    <!-- </main> -->\n  <!-- </div> -->\n</template>\n\n<script setup>\nimport { ref, onMounted } from 'vue';\nimport ChatWindow from '../sections/ChatWindow.vue';\nimport chatStore from '../../store/chat.store.js';\n\nconst props = defineProps({\n  username: {\n    type: String,\n    required: true\n  },\n  chatID: {\n    type: String,\n    required: true\n  },\n})\n\n// const chats = ref([\n//   // Примерный список. В реальном приложении, список чатов должен загружаться с сервера.\n//   { id: 'chat1', name: 'Чат 1' },\n//   { id: 'chat2', name: 'Чат 2' }\n// ]);\n\nconst selectChat = (chatId) => {\n  chatStore.methods.setCurrentChat(chatId);\n};\n\nonMounted(async() => {\n  chatStore.methods.setUsername(props.username || 'user'); // Установка имени пользователя\n  await chatStore.methods.connectWebSocket(); // Подключение к WebSocket\n  chatStore.methods.setCurrentChat(props.chatID);\n});\n</script>\n\n<style>\n/* Стили остаются без изменений */\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAmBA,UAAM,QAAQ;AAqBd,cAAU,YAAW;AACnB,gBAAU,QAAQ,YAAY,MAAM,YAAY,MAAM;AACtD,YAAM,UAAU,QAAQ;AACxB,gBAAU,QAAQ,eAAe,MAAM,MAAM;AAAA,IAC/C,CAAC;;;;;;"}
+{"version":3,"file":"ChatPage.vue.js","sources":["../../../../../../../src/modules/chats/components/pages/ChatPage.vue"],"sourcesContent":["<template>\n  <main class=\"chat-main\">\n    <ChatWindow />\n  </main>\n</template>\n\n<script setup>\nimport { ref, onMounted, onUnmounted } from 'vue';\nimport ChatWindow from '../sections/ChatWindow.vue';\nimport chatStore from '../../store/chat.store.js';\n\nconst props = defineProps({\n  username: {\n    type: String,\n    required: true\n  },\n  user: {\n    type: String,\n    required: true\n  },\n  chatID: {\n    type: String,\n    required: true\n  },\n});\n\nconst selectChat = (chatId) => {\n  chatStore.methods.setCurrentChat(chatId);\n};\n\nonMounted(async () => {\n  chatStore.methods.setUsername(props.username || 'user'); // Установка имени пользователя\n  await chatStore.methods.connectWebSocket(props.user); // Подключение к WebSocket\n  await chatStore.methods.setCurrentChat(props.chatID);\n});\n\nonUnmounted(() => {\n  // Clean up when the component is unmounted (e.g., navigating away)\n  chatStore.methods.disconnectChat();\n});\n</script>\n\n<style>\n/* Стили остаются без изменений */\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWA,UAAM,QAAQ;AAmBd,cAAU,YAAY;AACpB,gBAAU,QAAQ,YAAY,MAAM,YAAY,MAAM;AACtD,YAAM,UAAU,QAAQ,iBAAiB,MAAM,IAAI;AACnD,YAAM,UAAU,QAAQ,eAAe,MAAM,MAAM;AAAA,IACrD,CAAC;AAED,gBAAY,MAAM;AAEhB,gBAAU,QAAQ,eAAgB;AAAA,IACpC,CAAC;;;;;;;;"}

package/dist/martyrs/src/modules/chats/components/sections/ChatWindow.vue.cjs

@@ -19,7 +19,12 @@ const _sfc_main = {
     const newMessage = vue.ref("");
     const allMessages = vue.ref(null);
     const messages = vue.computed(() => chat_store.default.state.messages);
-    const sendMessage = () => {
+    const scrollToBottom = () => {
+      if (allMessages.value) {
+        allMessages.value.scrollTop = allMessages.value.scrollHeight;
+      }
+    };
+    const sendMessage = async () => {
       if (newMessage.value) {
         const message = {
           text: newMessage.value,
@@ -27,13 +32,25 @@ const _sfc_main = {
           chatId: chat_store.default.state.currentChatId
         };
         chat_store.default.methods.addMessage(message);
-        console.log(allMessages.value.lastElementChild.offsetHeight);
-        allMessages.value.scrollTop = allMessages.value.lastElementChild.offsetHeight;
         newMessage.value = "";
+        await vue.nextTick();
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        scrollToBottom();
       }
     };
-    vue.watch(chat_store.default.state.messages, () => {
-      allMessages.value.scrollTop = allMessages.value.lastElementChild.offsetHeight;
+    vue.onMounted(() => {
+      vue.nextTick(() => {
+        if (allMessages.value) {
+          allMessages.value.scrollTop = allMessages.value.scrollHeight;
+        }
+      });
+    });
+    vue.watch(messages, () => {
+      vue.nextTick(() => {
+        if (allMessages.value) {
+          allMessages.value.scrollTop = allMessages.value.scrollHeight;
+        }
+      });
     }, { deep: true });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
@@ -56,7 +73,8 @@ const _sfc_main = {
                   key: 1,
                   name: "list",
                   tag: "ul",
-                  class: "w-100 o-hidden"
+                  class: "w-100 o-hidden",
+                  onAfterEnter: scrollToBottom
                 }, {
                   default: vue.withCtx(() => [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(messages.value, (message) => {

package/dist/martyrs/src/modules/chats/components/sections/ChatWindow.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatWindow.vue.cjs","sources":["../../../../../../../src/modules/chats/components/sections/ChatWindow.vue"],"sourcesContent":["<template>\n  <div class=\"bg-white radius-semi bg-white o-hidden pos-relative\">\n    \n      <div ref=\"allMessages\"  class=\"chat-messages o-scroll h-max-20r\">\n        <div  class=\"pos-relative h-min-20r flex-justify-end flex flex-column br-b br-solid br-black-transp-10\">\n          <transition  name=\"scaleIn\" mode=\"out-in\">\n            <div v-if=\"messages.length < 1\"  class=\"flex-center pd-small t-center w-100 h-100 flex-column flex pos-absolute\">\n              <PlaceholderChat class=\"radius-100 mn-b-thin\"/>\n              <h4 class='mn-b-thin'>Here you can view your chat history</h4>\n              <p>Feel free to ask if you have any questions.</p>\n            </div>\n\n            <TransitionGroup v-else  name=\"list\" tag=\"ul\" class=\"w-100 o-hidden\">\n              <ChatMessage\n                v-for=\"message in messages\"\n                :key=\"message._id\"\n                :message=\"message\"\n              />\n\n            </TransitionGroup>\n           </transition>\n          \n        </div>\n      </div>\n\n      \n      <div class=\"flex-nowrap flex-v-center flex bg-white w-100 radius-big pd-small\">\n        <IconAdd\n          class=\"mn-r-thin t-transp i-regular\"\n        />\n        <input class=\"\" placeholder=\"Enter your message\" type=\"text\" v-model=\"newMessage\" @keyup.enter=\"sendMessage\" />\n      </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, watch } from 'vue';\n\nimport IconAdd from '@martyrs/src/modules/icons/navigation/IconAdd.vue'\nimport PlaceholderChat from '@martyrs/src/modules/icons/placeholders/PlaceholderChat.vue'\n\nimport ChatMessage from '../blocks/ChatMessage.vue';\nimport chatStore from '../../store/chat.store.js';\n\nconst newMessage = ref('');\nconst allMessages = ref(null)\n\n// Вычисляемые свойства\nconst messages = computed(() => chatStore.state.messages);\n\n// Функция для отправки сообщения\nconst sendMessage = () => {\n  if (newMessage.value) {\n    const message = {\n      text: newMessage.value,\n      username: chatStore.state.username,\n      chatId: chatStore.state.currentChatId\n    };\n\n    chatStore.methods.addMessage(message);\n    console.log(allMessages.value.lastElementChild.offsetHeight)\n    allMessages.value.scrollTop = allMessages.value.lastElementChild.offsetHeight\n    \n    newMessage.value = '';\n  }\n};\n\n// // При добавлении нового сообщения автоматически прокручиваем вниз\nwatch(chatStore.state.messages, () => {\n  allMessages.value.scrollTop = allMessages.value.lastElementChild.offsetHeight\n}, {deep: true});\n\n</script>\n\n<style>\n.list-enter-active,\n.list-leave-active {\n  transition: all 0.5s ease;\n}\n.list-enter-from,\n.list-leave-to {\n  opacity: 0;\n  transform: translateX(30px);\n}\n</style>\n"],"names":["ref","computed","chatStore","watch"],"mappings":";;;;;;;;;;;;;;;;;;AA4CA,UAAM,aAAaA,IAAG,IAAC,EAAE;AACzB,UAAM,cAAcA,IAAG,IAAC,IAAI;AAG5B,UAAM,WAAWC,IAAAA,SAAS,MAAMC,mBAAU,MAAM,QAAQ;AAGxD,UAAM,cAAc,MAAM;AACxB,UAAI,WAAW,OAAO;AACpB,cAAM,UAAU;AAAA,UACd,MAAM,WAAW;AAAA,UACjB,UAAUA,WAAAA,QAAU,MAAM;AAAA,UAC1B,QAAQA,WAAS,QAAC,MAAM;AAAA,QACzB;AAEDA,2BAAU,QAAQ,WAAW,OAAO;AACpC,gBAAQ,IAAI,YAAY,MAAM,iBAAiB,YAAY;AAC3D,oBAAY,MAAM,YAAY,YAAY,MAAM,iBAAiB;AAEjE,mBAAW,QAAQ;AAAA,MACvB;AAAA,IACA;AAGAC,QAAAA,MAAMD,WAAS,QAAC,MAAM,UAAU,MAAM;AACpC,kBAAY,MAAM,YAAY,YAAY,MAAM,iBAAiB;AAAA,IACnE,GAAG,EAAC,MAAM,KAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ChatWindow.vue.cjs","sources":["../../../../../../../src/modules/chats/components/sections/ChatWindow.vue"],"sourcesContent":["<template>\n  <div class=\"bg-white radius-semi bg-white o-hidden pos-relative\">\n    <div ref=\"allMessages\" class=\"chat-messages o-scroll h-max-20r\">\n      <div class=\"pos-relative h-min-20r flex-justify-end flex flex-column br-b br-solid br-black-transp-10\">\n        <transition name=\"scaleIn\" mode=\"out-in\">\n          <div v-if=\"messages.length < 1\" class=\"flex-center pd-small t-center w-100 h-100 flex-column flex pos-absolute\">\n            <PlaceholderChat class=\"radius-100 mn-b-thin\"/>\n            <h4 class='mn-b-thin'>Here you can view your chat history</h4>\n            <p>Feel free to ask if you have any questions.</p>\n          </div>\n\n          <TransitionGroup v-else name=\"list\" tag=\"ul\" class=\"w-100 o-hidden\" @after-enter=\"scrollToBottom\">\n            <ChatMessage\n              v-for=\"message in messages\"\n              :key=\"message._id\"\n              :message=\"message\"\n            />\n          </TransitionGroup>\n        </transition>\n      </div>\n    </div>\n\n    <div class=\"flex-nowrap flex-v-center flex bg-white w-100 radius-big pd-small\">\n      <IconAdd class=\"mn-r-thin t-transp i-regular\" />\n      <input class=\"\" placeholder=\"Enter your message\" type=\"text\" v-model=\"newMessage\" @keyup.enter=\"sendMessage\" />\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, watch, onMounted, nextTick } from 'vue';\n\nimport IconAdd from '@martyrs/src/modules/icons/navigation/IconAdd.vue'\nimport PlaceholderChat from '@martyrs/src/modules/icons/placeholders/PlaceholderChat.vue'\n\nimport ChatMessage from '../blocks/ChatMessage.vue';\nimport chatStore from '../../store/chat.store.js';\n\nconst newMessage = ref('');\nconst allMessages = ref(null);\n\n// Вычисляемые свойства\nconst messages = computed(() => chatStore.state.messages);\n\n// Функция прокрутки вниз\nconst scrollToBottom = () => {\n  if (allMessages.value) {\n    allMessages.value.scrollTop = allMessages.value.scrollHeight;\n  }\n};\n\n// Функция для отправки сообщения\nconst sendMessage = async () => {\n  if (newMessage.value) {\n    const message = {\n      text: newMessage.value,\n      username: chatStore.state.username,\n      chatId: chatStore.state.currentChatId\n    };\n\n    chatStore.methods.addMessage(message);\n    newMessage.value = '';\n\n    // Ждем, пока все анимации и рендеринг завершатся\n    await nextTick();\n    await new Promise(resolve => setTimeout(resolve, 100)); // Небольшая задержка для анимаций\n    scrollToBottom();\n  }\n};\n\n// Прокрутка вниз при монтировании\nonMounted(() => {\n  nextTick(() => {\n    if (allMessages.value) {\n      allMessages.value.scrollTop = allMessages.value.scrollHeight;\n    }\n  });\n});\n\n// Прокрутка вниз при изменении сообщений\nwatch(messages, () => {\n  nextTick(() => {\n    if (allMessages.value) {\n      allMessages.value.scrollTop = allMessages.value.scrollHeight;\n    }\n  });\n}, { deep: true });\n\n// Обработчик после завершения анимации входа нового элемента\n</script>\n\n<style>\n.list-enter-active,\n.list-leave-active {\n  transition: all 0.5s ease;\n}\n.list-enter-from,\n.list-leave-to {\n  opacity: 0;\n  transform: translateX(30px);\n}\n</style>"],"names":["ref","computed","chatStore","nextTick","onMounted","watch"],"mappings":";;;;;;;;;;;;;;;;;;AAsCA,UAAM,aAAaA,IAAG,IAAC,EAAE;AACzB,UAAM,cAAcA,IAAG,IAAC,IAAI;AAG5B,UAAM,WAAWC,IAAAA,SAAS,MAAMC,mBAAU,MAAM,QAAQ;AAGxD,UAAM,iBAAiB,MAAM;AAC3B,UAAI,YAAY,OAAO;AACrB,oBAAY,MAAM,YAAY,YAAY,MAAM;AAAA,MACpD;AAAA,IACA;AAGA,UAAM,cAAc,YAAY;AAC9B,UAAI,WAAW,OAAO;AACpB,cAAM,UAAU;AAAA,UACd,MAAM,WAAW;AAAA,UACjB,UAAUA,WAAAA,QAAU,MAAM;AAAA,UAC1B,QAAQA,WAAS,QAAC,MAAM;AAAA,QACzB;AAEDA,2BAAU,QAAQ,WAAW,OAAO;AACpC,mBAAW,QAAQ;AAGnB,cAAMC,aAAU;AAChB,cAAM,IAAI,QAAQ,aAAW,WAAW,SAAS,GAAG,CAAC;AACrD,uBAAgB;AAAA,MACpB;AAAA,IACA;AAGAC,QAAAA,UAAU,MAAM;AACdD,UAAAA,SAAS,MAAM;AACb,YAAI,YAAY,OAAO;AACrB,sBAAY,MAAM,YAAY,YAAY,MAAM;AAAA,QACtD;AAAA,MACA,CAAG;AAAA,IACH,CAAC;AAGDE,QAAK,MAAC,UAAU,MAAM;AACpBF,UAAAA,SAAS,MAAM;AACb,YAAI,YAAY,OAAO;AACrB,sBAAY,MAAM,YAAY,YAAY,MAAM;AAAA,QACtD;AAAA,MACA,CAAG;AAAA,IACH,GAAG,EAAE,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/chats/components/sections/ChatWindow.vue.js

@@ -1,4 +1,4 @@
-import { ref, computed, watch, createElementBlock, openBlock, createElementVNode, createVNode, Transition, withCtx, createBlock, TransitionGroup, Fragment, renderList, withDirectives, withKeys, vModelText } from "vue";
+import { ref, computed, onMounted, nextTick, watch, createElementBlock, openBlock, createElementVNode, createVNode, Transition, withCtx, createBlock, TransitionGroup, Fragment, renderList, withDirectives, withKeys, vModelText } from "vue";
 import _sfc_main$1 from "../../../icons/navigation/IconAdd.vue.js";
 import PlaceholderChat from "../../../icons/placeholders/PlaceholderChat.vue.js";
 import ChatMessage from "../blocks/ChatMessage.vue.js";
@@ -17,7 +17,12 @@ const _sfc_main = {
     const newMessage = ref("");
     const allMessages = ref(null);
     const messages = computed(() => chatStore.state.messages);
-    const sendMessage = () => {
+    const scrollToBottom = () => {
+      if (allMessages.value) {
+        allMessages.value.scrollTop = allMessages.value.scrollHeight;
+      }
+    };
+    const sendMessage = async () => {
       if (newMessage.value) {
         const message = {
           text: newMessage.value,
@@ -25,13 +30,25 @@ const _sfc_main = {
           chatId: chatStore.state.currentChatId
         };
         chatStore.methods.addMessage(message);
-        console.log(allMessages.value.lastElementChild.offsetHeight);
-        allMessages.value.scrollTop = allMessages.value.lastElementChild.offsetHeight;
         newMessage.value = "";
+        await nextTick();
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        scrollToBottom();
       }
     };
-    watch(chatStore.state.messages, () => {
-      allMessages.value.scrollTop = allMessages.value.lastElementChild.offsetHeight;
+    onMounted(() => {
+      nextTick(() => {
+        if (allMessages.value) {
+          allMessages.value.scrollTop = allMessages.value.scrollHeight;
+        }
+      });
+    });
+    watch(messages, () => {
+      nextTick(() => {
+        if (allMessages.value) {
+          allMessages.value.scrollTop = allMessages.value.scrollHeight;
+        }
+      });
     }, { deep: true });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
@@ -54,7 +71,8 @@ const _sfc_main = {
                   key: 1,
                   name: "list",
                   tag: "ul",
-                  class: "w-100 o-hidden"
+                  class: "w-100 o-hidden",
+                  onAfterEnter: scrollToBottom
                 }, {
                   default: withCtx(() => [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(messages.value, (message) => {

package/dist/martyrs/src/modules/chats/components/sections/ChatWindow.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatWindow.vue.js","sources":["../../../../../../../src/modules/chats/components/sections/ChatWindow.vue"],"sourcesContent":["<template>\n  <div class=\"bg-white radius-semi bg-white o-hidden pos-relative\">\n    \n      <div ref=\"allMessages\"  class=\"chat-messages o-scroll h-max-20r\">\n        <div  class=\"pos-relative h-min-20r flex-justify-end flex flex-column br-b br-solid br-black-transp-10\">\n          <transition  name=\"scaleIn\" mode=\"out-in\">\n            <div v-if=\"messages.length < 1\"  class=\"flex-center pd-small t-center w-100 h-100 flex-column flex pos-absolute\">\n              <PlaceholderChat class=\"radius-100 mn-b-thin\"/>\n              <h4 class='mn-b-thin'>Here you can view your chat history</h4>\n              <p>Feel free to ask if you have any questions.</p>\n            </div>\n\n            <TransitionGroup v-else  name=\"list\" tag=\"ul\" class=\"w-100 o-hidden\">\n              <ChatMessage\n                v-for=\"message in messages\"\n                :key=\"message._id\"\n                :message=\"message\"\n              />\n\n            </TransitionGroup>\n           </transition>\n          \n        </div>\n      </div>\n\n      \n      <div class=\"flex-nowrap flex-v-center flex bg-white w-100 radius-big pd-small\">\n        <IconAdd\n          class=\"mn-r-thin t-transp i-regular\"\n        />\n        <input class=\"\" placeholder=\"Enter your message\" type=\"text\" v-model=\"newMessage\" @keyup.enter=\"sendMessage\" />\n      </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, watch } from 'vue';\n\nimport IconAdd from '@martyrs/src/modules/icons/navigation/IconAdd.vue'\nimport PlaceholderChat from '@martyrs/src/modules/icons/placeholders/PlaceholderChat.vue'\n\nimport ChatMessage from '../blocks/ChatMessage.vue';\nimport chatStore from '../../store/chat.store.js';\n\nconst newMessage = ref('');\nconst allMessages = ref(null)\n\n// Вычисляемые свойства\nconst messages = computed(() => chatStore.state.messages);\n\n// Функция для отправки сообщения\nconst sendMessage = () => {\n  if (newMessage.value) {\n    const message = {\n      text: newMessage.value,\n      username: chatStore.state.username,\n      chatId: chatStore.state.currentChatId\n    };\n\n    chatStore.methods.addMessage(message);\n    console.log(allMessages.value.lastElementChild.offsetHeight)\n    allMessages.value.scrollTop = allMessages.value.lastElementChild.offsetHeight\n    \n    newMessage.value = '';\n  }\n};\n\n// // При добавлении нового сообщения автоматически прокручиваем вниз\nwatch(chatStore.state.messages, () => {\n  allMessages.value.scrollTop = allMessages.value.lastElementChild.offsetHeight\n}, {deep: true});\n\n</script>\n\n<style>\n.list-enter-active,\n.list-leave-active {\n  transition: all 0.5s ease;\n}\n.list-enter-from,\n.list-leave-to {\n  opacity: 0;\n  transform: translateX(30px);\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA4CA,UAAM,aAAa,IAAI,EAAE;AACzB,UAAM,cAAc,IAAI,IAAI;AAG5B,UAAM,WAAW,SAAS,MAAM,UAAU,MAAM,QAAQ;AAGxD,UAAM,cAAc,MAAM;AACxB,UAAI,WAAW,OAAO;AACpB,cAAM,UAAU;AAAA,UACd,MAAM,WAAW;AAAA,UACjB,UAAU,UAAU,MAAM;AAAA,UAC1B,QAAQ,UAAU,MAAM;AAAA,QACzB;AAED,kBAAU,QAAQ,WAAW,OAAO;AACpC,gBAAQ,IAAI,YAAY,MAAM,iBAAiB,YAAY;AAC3D,oBAAY,MAAM,YAAY,YAAY,MAAM,iBAAiB;AAEjE,mBAAW,QAAQ;AAAA,MACvB;AAAA,IACA;AAGA,UAAM,UAAU,MAAM,UAAU,MAAM;AACpC,kBAAY,MAAM,YAAY,YAAY,MAAM,iBAAiB;AAAA,IACnE,GAAG,EAAC,MAAM,KAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ChatWindow.vue.js","sources":["../../../../../../../src/modules/chats/components/sections/ChatWindow.vue"],"sourcesContent":["<template>\n  <div class=\"bg-white radius-semi bg-white o-hidden pos-relative\">\n    <div ref=\"allMessages\" class=\"chat-messages o-scroll h-max-20r\">\n      <div class=\"pos-relative h-min-20r flex-justify-end flex flex-column br-b br-solid br-black-transp-10\">\n        <transition name=\"scaleIn\" mode=\"out-in\">\n          <div v-if=\"messages.length < 1\" class=\"flex-center pd-small t-center w-100 h-100 flex-column flex pos-absolute\">\n            <PlaceholderChat class=\"radius-100 mn-b-thin\"/>\n            <h4 class='mn-b-thin'>Here you can view your chat history</h4>\n            <p>Feel free to ask if you have any questions.</p>\n          </div>\n\n          <TransitionGroup v-else name=\"list\" tag=\"ul\" class=\"w-100 o-hidden\" @after-enter=\"scrollToBottom\">\n            <ChatMessage\n              v-for=\"message in messages\"\n              :key=\"message._id\"\n              :message=\"message\"\n            />\n          </TransitionGroup>\n        </transition>\n      </div>\n    </div>\n\n    <div class=\"flex-nowrap flex-v-center flex bg-white w-100 radius-big pd-small\">\n      <IconAdd class=\"mn-r-thin t-transp i-regular\" />\n      <input class=\"\" placeholder=\"Enter your message\" type=\"text\" v-model=\"newMessage\" @keyup.enter=\"sendMessage\" />\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, watch, onMounted, nextTick } from 'vue';\n\nimport IconAdd from '@martyrs/src/modules/icons/navigation/IconAdd.vue'\nimport PlaceholderChat from '@martyrs/src/modules/icons/placeholders/PlaceholderChat.vue'\n\nimport ChatMessage from '../blocks/ChatMessage.vue';\nimport chatStore from '../../store/chat.store.js';\n\nconst newMessage = ref('');\nconst allMessages = ref(null);\n\n// Вычисляемые свойства\nconst messages = computed(() => chatStore.state.messages);\n\n// Функция прокрутки вниз\nconst scrollToBottom = () => {\n  if (allMessages.value) {\n    allMessages.value.scrollTop = allMessages.value.scrollHeight;\n  }\n};\n\n// Функция для отправки сообщения\nconst sendMessage = async () => {\n  if (newMessage.value) {\n    const message = {\n      text: newMessage.value,\n      username: chatStore.state.username,\n      chatId: chatStore.state.currentChatId\n    };\n\n    chatStore.methods.addMessage(message);\n    newMessage.value = '';\n\n    // Ждем, пока все анимации и рендеринг завершатся\n    await nextTick();\n    await new Promise(resolve => setTimeout(resolve, 100)); // Небольшая задержка для анимаций\n    scrollToBottom();\n  }\n};\n\n// Прокрутка вниз при монтировании\nonMounted(() => {\n  nextTick(() => {\n    if (allMessages.value) {\n      allMessages.value.scrollTop = allMessages.value.scrollHeight;\n    }\n  });\n});\n\n// Прокрутка вниз при изменении сообщений\nwatch(messages, () => {\n  nextTick(() => {\n    if (allMessages.value) {\n      allMessages.value.scrollTop = allMessages.value.scrollHeight;\n    }\n  });\n}, { deep: true });\n\n// Обработчик после завершения анимации входа нового элемента\n</script>\n\n<style>\n.list-enter-active,\n.list-leave-active {\n  transition: all 0.5s ease;\n}\n.list-enter-from,\n.list-leave-to {\n  opacity: 0;\n  transform: translateX(30px);\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAsCA,UAAM,aAAa,IAAI,EAAE;AACzB,UAAM,cAAc,IAAI,IAAI;AAG5B,UAAM,WAAW,SAAS,MAAM,UAAU,MAAM,QAAQ;AAGxD,UAAM,iBAAiB,MAAM;AAC3B,UAAI,YAAY,OAAO;AACrB,oBAAY,MAAM,YAAY,YAAY,MAAM;AAAA,MACpD;AAAA,IACA;AAGA,UAAM,cAAc,YAAY;AAC9B,UAAI,WAAW,OAAO;AACpB,cAAM,UAAU;AAAA,UACd,MAAM,WAAW;AAAA,UACjB,UAAU,UAAU,MAAM;AAAA,UAC1B,QAAQ,UAAU,MAAM;AAAA,QACzB;AAED,kBAAU,QAAQ,WAAW,OAAO;AACpC,mBAAW,QAAQ;AAGnB,cAAM,SAAU;AAChB,cAAM,IAAI,QAAQ,aAAW,WAAW,SAAS,GAAG,CAAC;AACrD,uBAAgB;AAAA,MACpB;AAAA,IACA;AAGA,cAAU,MAAM;AACd,eAAS,MAAM;AACb,YAAI,YAAY,OAAO;AACrB,sBAAY,MAAM,YAAY,YAAY,MAAM;AAAA,QACtD;AAAA,MACA,CAAG;AAAA,IACH,CAAC;AAGD,UAAM,UAAU,MAAM;AACpB,eAAS,MAAM;AACb,YAAI,YAAY,OAAO;AACrB,sBAAY,MAAM,YAAY,YAAY,MAAM;AAAA,QACtD;AAAA,MACA,CAAG;AAAA,IACH,GAAG,EAAE,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/chats/store/chat.store.cjs

@@ -8,13 +8,12 @@ const state = vue.reactive({
   username: null
 });
 const methods = {
-  async connectWebSocket() {
-    console.log("process env");
-    console.log(process.env.WSS_URL);
+  async connectWebSocket(user) {
     try {
-      const userId = window.__user_id || null;
-      await globals_websocket.default.connect(userId);
-      globals_websocket.default.addEventListener("message", (data) => {
+      console.log("connect", user);
+      await globals_websocket.default.connect(user);
+      globals_websocket.default.removeModuleListeners("chat");
+      const listenerId = globals_websocket.default.addEventListener("message", (data) => {
         if (data.chatId === state.currentChatId) {
           state.messages.push(data);
         }
@@ -29,8 +28,8 @@ const methods = {
     console.log(process.env.API_URL);
     state.messages = messages;
   },
-  addMessage(message) {
-    globals_websocket.default.send(message);
+  async addMessage(message) {
+    await globals_websocket.default.send(message);
   },
   async setCurrentChat(chatId) {
     state.currentChatId = chatId;

package/dist/martyrs/src/modules/chats/store/chat.store.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"chat.store.cjs","sources":["../../../../../../src/modules/chats/store/chat.store.js"],"sourcesContent":["import { reactive, readonly } from 'vue';\nimport globalWebSocket from '@martyrs/src/modules/globals/views/classes/globals.websocket.js';\n\nconst state = reactive({\n  messages: [],\n  currentChatId: null,\n  username: null\n});\n\nconst methods = {\n  async connectWebSocket() {\n    console.log('process env')\n    console.log(process.env.WSS_URL)\n\n    // Use the global WebSocket instance\n    try {\n      // Get userId from auth store or another source if available\n      const userId = window.__user_id || null;\n      \n      // Connect to the global WebSocket\n      await globalWebSocket.connect(userId);\n      \n      // Register chat message event listener\n      globalWebSocket.addEventListener('message', (data) => {\n        if (data.chatId === state.currentChatId) {\n          state.messages.push(data);\n        }\n      }, { module: 'chat' });\n      \n      return globalWebSocket;\n    } catch (error) {\n      console.error('Failed to connect to WebSocket:', error);\n      throw error;\n    }\n  },\n  \n  setMessages(messages) {\n    console.log(process.env.API_URL)\n    state.messages = messages;\n  },\n  \n  addMessage(message) {\n    globalWebSocket.send(message);\n  },\n  \n  async setCurrentChat(chatId) {\n    state.currentChatId = chatId;\n    state.messages = []; // Clear current messages when changing chat\n\n    // Send join chat message through the WebSocket\n    globalWebSocket.send({ type: 'joinChat', chatId });\n\n    // Fetch chat history\n    const response = await fetch(`/messages/${chatId}`);\n    const messages = await response.json();\n\n    methods.setMessages(messages);\n  },\n  \n  setUsername(username) {\n    state.username = username;\n  },\n  \n  disconnectChat() {\n    // Remove chat-specific listeners when leaving chat page\n    globalWebSocket.removeModuleListeners('chat');\n  }\n};\n\nexport default {\n  state: readonly(state),\n  methods\n};"],"names":["reactive","globalWebSocket","readonly"],"mappings":";;;;AAGA,MAAM,QAAQA,IAAAA,SAAS;AAAA,EACrB,UAAU,CAAE;AAAA,EACZ,eAAe;AAAA,EACf,UAAU;AACZ,CAAC;AAED,MAAM,UAAU;AAAA,EACd,MAAM,mBAAmB;AACvB,YAAQ,IAAI,aAAa;AACzB,YAAQ,IAAI,QAAQ,IAAI,OAAO;AAG/B,QAAI;AAEF,YAAM,SAAS,OAAO,aAAa;AAGnC,YAAMC,kBAAe,QAAC,QAAQ,MAAM;AAGpCA,wBAAAA,QAAgB,iBAAiB,WAAW,CAAC,SAAS;AACpD,YAAI,KAAK,WAAW,MAAM,eAAe;AACvC,gBAAM,SAAS,KAAK,IAAI;AAAA,QAClC;AAAA,MACA,GAAS,EAAE,QAAQ,QAAQ;AAErB,aAAOA,kBAAe;AAAA,IACvB,SAAQ,OAAO;AACd,cAAQ,MAAM,mCAAmC,KAAK;AACtD,YAAM;AAAA,IACZ;AAAA,EACG;AAAA,EAED,YAAY,UAAU;AACpB,YAAQ,IAAI,QAAQ,IAAI,OAAO;AAC/B,UAAM,WAAW;AAAA,EAClB;AAAA,EAED,WAAW,SAAS;AAClBA,sBAAe,QAAC,KAAK,OAAO;AAAA,EAC7B;AAAA,EAED,MAAM,eAAe,QAAQ;AAC3B,UAAM,gBAAgB;AACtB,UAAM,WAAW;AAGjBA,sBAAAA,QAAgB,KAAK,EAAE,MAAM,YAAY,OAAM,CAAE;AAGjD,UAAM,WAAW,MAAM,MAAM,aAAa,MAAM,EAAE;AAClD,UAAM,WAAW,MAAM,SAAS,KAAM;AAEtC,YAAQ,YAAY,QAAQ;AAAA,EAC7B;AAAA,EAED,YAAY,UAAU;AACpB,UAAM,WAAW;AAAA,EAClB;AAAA,EAED,iBAAiB;AAEfA,sBAAe,QAAC,sBAAsB,MAAM;AAAA,EAChD;AACA;AAEA,MAAe,YAAA;AAAA,EACb,OAAOC,IAAQ,SAAC,KAAK;AAAA,EACrB;AACF;;"}
+{"version":3,"file":"chat.store.cjs","sources":["../../../../../../src/modules/chats/store/chat.store.js"],"sourcesContent":["import { reactive, readonly } from 'vue';\nimport globalWebSocket from '@martyrs/src/modules/globals/views/classes/globals.websocket.js';\n\nconst state = reactive({\n  messages: [],\n  currentChatId: null,\n  username: null\n});\n\nconst methods = {\n  async connectWebSocket(user) {\n    // Use the global WebSocket instance\n    try {\n      console.log('connect', user);\n      await globalWebSocket.connect(user);\n\n      // Remove any existing 'message' listeners for the 'chat' module to avoid duplicates\n      globalWebSocket.removeModuleListeners('chat');\n\n      // Register chat message event listener\n      const listenerId = globalWebSocket.addEventListener('message', (data) => {\n        if (data.chatId === state.currentChatId) {\n          state.messages.push(data);\n        }\n      }, { module: 'chat' });\n\n      return globalWebSocket;\n    } catch (error) {\n      console.error('Failed to connect to WebSocket:', error);\n      throw error;\n    }\n  },\n\n  setMessages(messages) {\n    console.log(process.env.API_URL);\n    state.messages = messages;\n  },\n\n  async addMessage(message) {\n    await globalWebSocket.send(message);\n  },\n\n  async setCurrentChat(chatId) {\n    state.currentChatId = chatId;\n    state.messages = []; // Clear current messages when changing chat\n\n    // Send join chat message through the WebSocket\n    globalWebSocket.send({ type: 'joinChat', chatId });\n\n    // Fetch chat history\n    const response = await fetch(`/messages/${chatId}`);\n    const messages = await response.json();\n\n    methods.setMessages(messages);\n  },\n\n  setUsername(username) {\n    state.username = username;\n  },\n\n  disconnectChat() {\n    // Remove all chat-specific listeners when leaving chat page\n    globalWebSocket.removeModuleListeners('chat');\n    // Optionally disconnect the WebSocket if no longer needed\n    // globalWebSocket.disconnect(); // Uncomment if you want to fully disconnect\n  }\n};\n\nexport default {\n  state: readonly(state),\n  methods\n};"],"names":["reactive","globalWebSocket","readonly"],"mappings":";;;;AAGA,MAAM,QAAQA,IAAAA,SAAS;AAAA,EACrB,UAAU,CAAE;AAAA,EACZ,eAAe;AAAA,EACf,UAAU;AACZ,CAAC;AAED,MAAM,UAAU;AAAA,EACd,MAAM,iBAAiB,MAAM;AAE3B,QAAI;AACF,cAAQ,IAAI,WAAW,IAAI;AAC3B,YAAMC,kBAAe,QAAC,QAAQ,IAAI;AAGlCA,wBAAe,QAAC,sBAAsB,MAAM;AAG5C,YAAM,aAAaA,kBAAe,QAAC,iBAAiB,WAAW,CAAC,SAAS;AACvE,YAAI,KAAK,WAAW,MAAM,eAAe;AACvC,gBAAM,SAAS,KAAK,IAAI;AAAA,QAClC;AAAA,MACA,GAAS,EAAE,QAAQ,QAAQ;AAErB,aAAOA,kBAAe;AAAA,IACvB,SAAQ,OAAO;AACd,cAAQ,MAAM,mCAAmC,KAAK;AACtD,YAAM;AAAA,IACZ;AAAA,EACG;AAAA,EAED,YAAY,UAAU;AACpB,YAAQ,IAAI,QAAQ,IAAI,OAAO;AAC/B,UAAM,WAAW;AAAA,EAClB;AAAA,EAED,MAAM,WAAW,SAAS;AACxB,UAAMA,kBAAe,QAAC,KAAK,OAAO;AAAA,EACnC;AAAA,EAED,MAAM,eAAe,QAAQ;AAC3B,UAAM,gBAAgB;AACtB,UAAM,WAAW;AAGjBA,sBAAAA,QAAgB,KAAK,EAAE,MAAM,YAAY,OAAM,CAAE;AAGjD,UAAM,WAAW,MAAM,MAAM,aAAa,MAAM,EAAE;AAClD,UAAM,WAAW,MAAM,SAAS,KAAM;AAEtC,YAAQ,YAAY,QAAQ;AAAA,EAC7B;AAAA,EAED,YAAY,UAAU;AACpB,UAAM,WAAW;AAAA,EAClB;AAAA,EAED,iBAAiB;AAEfA,sBAAe,QAAC,sBAAsB,MAAM;AAAA,EAGhD;AACA;AAEA,MAAe,YAAA;AAAA,EACb,OAAOC,IAAQ,SAAC,KAAK;AAAA,EACrB;AACF;;"}

package/dist/martyrs/src/modules/chats/store/chat.store.js

@@ -6,13 +6,12 @@ const state = reactive({
   username: null
 });
 const methods = {
-  async connectWebSocket() {
-    console.log("process env");
-    console.log(process.env.WSS_URL);
+  async connectWebSocket(user) {
     try {
-      const userId = window.__user_id || null;
-      await globalWebSocket.connect(userId);
-      globalWebSocket.addEventListener("message", (data) => {
+      console.log("connect", user);
+      await globalWebSocket.connect(user);
+      globalWebSocket.removeModuleListeners("chat");
+      const listenerId = globalWebSocket.addEventListener("message", (data) => {
         if (data.chatId === state.currentChatId) {
           state.messages.push(data);
         }
@@ -27,8 +26,8 @@ const methods = {
     console.log(process.env.API_URL);
     state.messages = messages;
   },
-  addMessage(message) {
-    globalWebSocket.send(message);
+  async addMessage(message) {
+    await globalWebSocket.send(message);
   },
   async setCurrentChat(chatId) {
     state.currentChatId = chatId;

package/dist/martyrs/src/modules/chats/store/chat.store.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat.store.js","sources":["../../../../../../src/modules/chats/store/chat.store.js"],"sourcesContent":["import { reactive, readonly } from 'vue';\nimport globalWebSocket from '@martyrs/src/modules/globals/views/classes/globals.websocket.js';\n\nconst state = reactive({\n  messages: [],\n  currentChatId: null,\n  username: null\n});\n\nconst methods = {\n  async connectWebSocket() {\n    console.log('process env')\n    console.log(process.env.WSS_URL)\n\n    // Use the global WebSocket instance\n    try {\n      // Get userId from auth store or another source if available\n      const userId = window.__user_id || null;\n      \n      // Connect to the global WebSocket\n      await globalWebSocket.connect(userId);\n      \n      // Register chat message event listener\n      globalWebSocket.addEventListener('message', (data) => {\n        if (data.chatId === state.currentChatId) {\n          state.messages.push(data);\n        }\n      }, { module: 'chat' });\n      \n      return globalWebSocket;\n    } catch (error) {\n      console.error('Failed to connect to WebSocket:', error);\n      throw error;\n    }\n  },\n  \n  setMessages(messages) {\n    console.log(process.env.API_URL)\n    state.messages = messages;\n  },\n  \n  addMessage(message) {\n    globalWebSocket.send(message);\n  },\n  \n  async setCurrentChat(chatId) {\n    state.currentChatId = chatId;\n    state.messages = []; // Clear current messages when changing chat\n\n    // Send join chat message through the WebSocket\n    globalWebSocket.send({ type: 'joinChat', chatId });\n\n    // Fetch chat history\n    const response = await fetch(`/messages/${chatId}`);\n    const messages = await response.json();\n\n    methods.setMessages(messages);\n  },\n  \n  setUsername(username) {\n    state.username = username;\n  },\n  \n  disconnectChat() {\n    // Remove chat-specific listeners when leaving chat page\n    globalWebSocket.removeModuleListeners('chat');\n  }\n};\n\nexport default {\n  state: readonly(state),\n  methods\n};"],"names":[],"mappings":";;AAGA,MAAM,QAAQ,SAAS;AAAA,EACrB,UAAU,CAAE;AAAA,EACZ,eAAe;AAAA,EACf,UAAU;AACZ,CAAC;AAED,MAAM,UAAU;AAAA,EACd,MAAM,mBAAmB;AACvB,YAAQ,IAAI,aAAa;AACzB,YAAQ,IAAI,QAAQ,IAAI,OAAO;AAG/B,QAAI;AAEF,YAAM,SAAS,OAAO,aAAa;AAGnC,YAAM,gBAAgB,QAAQ,MAAM;AAGpC,sBAAgB,iBAAiB,WAAW,CAAC,SAAS;AACpD,YAAI,KAAK,WAAW,MAAM,eAAe;AACvC,gBAAM,SAAS,KAAK,IAAI;AAAA,QAClC;AAAA,MACA,GAAS,EAAE,QAAQ,QAAQ;AAErB,aAAO;AAAA,IACR,SAAQ,OAAO;AACd,cAAQ,MAAM,mCAAmC,KAAK;AACtD,YAAM;AAAA,IACZ;AAAA,EACG;AAAA,EAED,YAAY,UAAU;AACpB,YAAQ,IAAI,QAAQ,IAAI,OAAO;AAC/B,UAAM,WAAW;AAAA,EAClB;AAAA,EAED,WAAW,SAAS;AAClB,oBAAgB,KAAK,OAAO;AAAA,EAC7B;AAAA,EAED,MAAM,eAAe,QAAQ;AAC3B,UAAM,gBAAgB;AACtB,UAAM,WAAW;AAGjB,oBAAgB,KAAK,EAAE,MAAM,YAAY,OAAM,CAAE;AAGjD,UAAM,WAAW,MAAM,MAAM,aAAa,MAAM,EAAE;AAClD,UAAM,WAAW,MAAM,SAAS,KAAM;AAEtC,YAAQ,YAAY,QAAQ;AAAA,EAC7B;AAAA,EAED,YAAY,UAAU;AACpB,UAAM,WAAW;AAAA,EAClB;AAAA,EAED,iBAAiB;AAEf,oBAAgB,sBAAsB,MAAM;AAAA,EAChD;AACA;AAEA,MAAe,YAAA;AAAA,EACb,OAAO,SAAS,KAAK;AAAA,EACrB;AACF;"}
+{"version":3,"file":"chat.store.js","sources":["../../../../../../src/modules/chats/store/chat.store.js"],"sourcesContent":["import { reactive, readonly } from 'vue';\nimport globalWebSocket from '@martyrs/src/modules/globals/views/classes/globals.websocket.js';\n\nconst state = reactive({\n  messages: [],\n  currentChatId: null,\n  username: null\n});\n\nconst methods = {\n  async connectWebSocket(user) {\n    // Use the global WebSocket instance\n    try {\n      console.log('connect', user);\n      await globalWebSocket.connect(user);\n\n      // Remove any existing 'message' listeners for the 'chat' module to avoid duplicates\n      globalWebSocket.removeModuleListeners('chat');\n\n      // Register chat message event listener\n      const listenerId = globalWebSocket.addEventListener('message', (data) => {\n        if (data.chatId === state.currentChatId) {\n          state.messages.push(data);\n        }\n      }, { module: 'chat' });\n\n      return globalWebSocket;\n    } catch (error) {\n      console.error('Failed to connect to WebSocket:', error);\n      throw error;\n    }\n  },\n\n  setMessages(messages) {\n    console.log(process.env.API_URL);\n    state.messages = messages;\n  },\n\n  async addMessage(message) {\n    await globalWebSocket.send(message);\n  },\n\n  async setCurrentChat(chatId) {\n    state.currentChatId = chatId;\n    state.messages = []; // Clear current messages when changing chat\n\n    // Send join chat message through the WebSocket\n    globalWebSocket.send({ type: 'joinChat', chatId });\n\n    // Fetch chat history\n    const response = await fetch(`/messages/${chatId}`);\n    const messages = await response.json();\n\n    methods.setMessages(messages);\n  },\n\n  setUsername(username) {\n    state.username = username;\n  },\n\n  disconnectChat() {\n    // Remove all chat-specific listeners when leaving chat page\n    globalWebSocket.removeModuleListeners('chat');\n    // Optionally disconnect the WebSocket if no longer needed\n    // globalWebSocket.disconnect(); // Uncomment if you want to fully disconnect\n  }\n};\n\nexport default {\n  state: readonly(state),\n  methods\n};"],"names":[],"mappings":";;AAGA,MAAM,QAAQ,SAAS;AAAA,EACrB,UAAU,CAAE;AAAA,EACZ,eAAe;AAAA,EACf,UAAU;AACZ,CAAC;AAED,MAAM,UAAU;AAAA,EACd,MAAM,iBAAiB,MAAM;AAE3B,QAAI;AACF,cAAQ,IAAI,WAAW,IAAI;AAC3B,YAAM,gBAAgB,QAAQ,IAAI;AAGlC,sBAAgB,sBAAsB,MAAM;AAG5C,YAAM,aAAa,gBAAgB,iBAAiB,WAAW,CAAC,SAAS;AACvE,YAAI,KAAK,WAAW,MAAM,eAAe;AACvC,gBAAM,SAAS,KAAK,IAAI;AAAA,QAClC;AAAA,MACA,GAAS,EAAE,QAAQ,QAAQ;AAErB,aAAO;AAAA,IACR,SAAQ,OAAO;AACd,cAAQ,MAAM,mCAAmC,KAAK;AACtD,YAAM;AAAA,IACZ;AAAA,EACG;AAAA,EAED,YAAY,UAAU;AACpB,YAAQ,IAAI,QAAQ,IAAI,OAAO;AAC/B,UAAM,WAAW;AAAA,EAClB;AAAA,EAED,MAAM,WAAW,SAAS;AACxB,UAAM,gBAAgB,KAAK,OAAO;AAAA,EACnC;AAAA,EAED,MAAM,eAAe,QAAQ;AAC3B,UAAM,gBAAgB;AACtB,UAAM,WAAW;AAGjB,oBAAgB,KAAK,EAAE,MAAM,YAAY,OAAM,CAAE;AAGjD,UAAM,WAAW,MAAM,MAAM,aAAa,MAAM,EAAE;AAClD,UAAM,WAAW,MAAM,SAAS,KAAM;AAEtC,YAAQ,YAAY,QAAQ;AAAA,EAC7B;AAAA,EAED,YAAY,UAAU;AACpB,UAAM,WAAW;AAAA,EAClB;AAAA,EAED,iBAAiB;AAEf,oBAAgB,sBAAsB,MAAM;AAAA,EAGhD;AACA;AAEA,MAAe,YAAA;AAAA,EACb,OAAO,SAAS,KAAK;AAAA,EACrB;AACF;"}

package/dist/martyrs/src/modules/community/components/blocks/CardBlogpost.vue.cjs

@@ -4,7 +4,7 @@ const vue = require("vue");
 const CardHeader = require("../../../globals/views/components/blocks/CardHeader.vue.cjs");
 const FooterBlogpost = require("./FooterBlogpost.vue.cjs");
 const Text = require("../../../../components/Text/Text.vue.cjs");
-;/* empty css                                       */
+;/* empty css                                        */
 const vueRouter = require("vue-router");
 const _hoisted_1 = { class: "pos-relative flex-column flex" };
 const _hoisted_2 = { class: "pd-t-zero pd-b-zero pd-medium" };

package/dist/martyrs/src/modules/community/components/blocks/CardBlogpost.vue.js

@@ -2,7 +2,7 @@ import { computed, createElementBlock, openBlock, createVNode, createElementVNod
 import _sfc_main$1 from "../../../globals/views/components/blocks/CardHeader.vue.js";
 import _sfc_main$3 from "./FooterBlogpost.vue.js";
 import _sfc_main$2 from "../../../../components/Text/Text.vue.js";
-/* empty css                                     */
+/* empty css                                      */
 import { useRouter } from "vue-router";
 const _hoisted_1 = { class: "pos-relative flex-column flex" };
 const _hoisted_2 = { class: "pd-t-zero pd-b-zero pd-medium" };

package/dist/martyrs/src/modules/community/components/pages/BlogPost.vue.cjs

@@ -9,10 +9,10 @@ const SkeletonBlogpost = require("../../../icons/skeletons/SkeletonBlogpost.vue.
 const vueRouter = require("vue-router");
 require("vue-i18n");
 ;/* empty css                                          */
-;/* empty css                                        */
+;/* empty css                                       */
 ;/* empty css                                          */
 require("../../../rents/views/store/rents.store.cjs");
-;/* empty css                                       */
+;/* empty css                                        */
 const auth = require("../../../auth/views/store/auth.cjs");
 require("../../../organizations/store/memberships.cjs");
 require("../../../organizations/store/organizations.cjs");

package/dist/martyrs/src/modules/community/components/pages/BlogPost.vue.js

@@ -7,10 +7,10 @@ import SkeletonBlogpost from "../../../icons/skeletons/SkeletonBlogpost.vue.js";
 import { useRoute } from "vue-router";
 import "vue-i18n";
 /* empty css                                        */
-/* empty css                                      */
+/* empty css                                     */
 /* empty css                                        */
 import "../../../rents/views/store/rents.store.js";
-/* empty css                                     */
+/* empty css                                      */
 import { state as state$1 } from "../../../auth/views/store/auth.js";
 import "../../../organizations/store/memberships.js";
 import "../../../organizations/store/organizations.js";

package/dist/martyrs/src/modules/community/components/pages/CreateBlogPost.vue.cjs

@@ -4,7 +4,7 @@ const vue = require("vue");
 require("isomorphic-dompurify");
 ;/* empty css                                                      */
 const Constructor = require("../../../constructor/components/sections/Constructor.vue.cjs");
-const Popup = require("../../../../components/Popup/Popup.vue.cjs");
+const Popup = require("../../../../components/Popup/Popup.vue2.cjs");
 require("../../../../../../_virtual/index.cjs");
 ;/* empty css                                               */
 ;/* empty css                                                     */

package/dist/martyrs/src/modules/community/components/pages/CreateBlogPost.vue.js

@@ -2,7 +2,7 @@ import { ref, onMounted, computed, createElementBlock, openBlock, createElementV
 import "isomorphic-dompurify";
 /* empty css                                                    */
 import _sfc_main$1 from "../../../constructor/components/sections/Constructor.vue.js";
-import _sfc_main$2 from "../../../../components/Popup/Popup.vue.js";
+import _sfc_main$2 from "../../../../components/Popup/Popup.vue2.js";
 import "../../../../../../_virtual/index.js";
 /* empty css                                             */
 /* empty css                                                   */

package/dist/martyrs/src/modules/community/components/sections/HotPosts.vue.cjs

@@ -2,7 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 ;/* empty css                                         */
-;/* empty css                                             */
+;/* empty css                                              */
 ;/* empty css                                           */
 ;/* empty css                                      */
 const Slider = require("../../../../components/Slider/Slider.vue.cjs");

package/dist/martyrs/src/modules/community/components/sections/HotPosts.vue.js

@@ -1,6 +1,6 @@
 import { createBlock, openBlock, withCtx } from "vue";
 /* empty css                                       */
-/* empty css                                           */
+/* empty css                                            */
 /* empty css                                         */
 /* empty css                                    */
 import Slider from "../../../../components/Slider/Slider.vue.js";

package/dist/martyrs/src/modules/events/components/blocks/CardEvent.vue.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
-;/* empty css                                       */
+;/* empty css                                        */
 const IconEdit = require("../../../icons/navigation/IconEdit.vue.cjs");
 const CardHeader = require("../../../globals/views/components/blocks/CardHeader.vue.cjs");
 require("../../../community/store/reactions.cjs");

package/dist/martyrs/src/modules/events/components/blocks/CardEvent.vue.js

@@ -1,5 +1,5 @@
 import { ref, computed, createElementBlock, openBlock, normalizeClass, createVNode, createCommentVNode, createElementVNode, createBlock, renderSlot, withModifiers, toDisplayString, Fragment, renderList } from "vue";
-/* empty css                                     */
+/* empty css                                      */
 import _sfc_main$2 from "../../../icons/navigation/IconEdit.vue.js";
 import _sfc_main$1 from "../../../globals/views/components/blocks/CardHeader.vue.js";
 import "../../../community/store/reactions.js";

package/dist/martyrs/src/modules/events/components/pages/EditEvent.vue.cjs

@@ -7,11 +7,11 @@ const Constructor = require("../../../constructor/components/sections/Constructo
 const vueDatepicker = require("../../../../../../node_modules/@vuepic/vue-datepicker/dist/vue-datepicker.cjs");
 ;/* empty css                                                                    */
 const Block = require("../../../../components/Block/Block.vue.cjs");
-const Popup = require("../../../../components/Popup/Popup.vue.cjs");
+const Popup = require("../../../../components/Popup/Popup.vue2.cjs");
 const Field = require("../../../../components/Field/Field.vue.cjs");
 const BlockTags = require("../../../../components/FieldTags/BlockTags.vue.cjs");
 const Checkbox = require("../../../../components/Checkbox/Checkbox.vue.cjs");
-;/* empty css                                                   */
+;/* empty css                                                    */
 require("axios");
 const UploadImage = require("../../../../components/UploadImage/UploadImage.vue.cjs");
 ;/* empty css                                         */

package/dist/martyrs/src/modules/events/components/pages/EditEvent.vue.js

@@ -5,11 +5,11 @@ import _sfc_main$4 from "../../../constructor/components/sections/Constructor.vu
 import Qn from "../../../../../../node_modules/@vuepic/vue-datepicker/dist/vue-datepicker.js";
 /* empty css                                                                  */
 import _sfc_main$2 from "../../../../components/Block/Block.vue.js";
-import _sfc_main$5 from "../../../../components/Popup/Popup.vue.js";
+import _sfc_main$5 from "../../../../components/Popup/Popup.vue2.js";
 import Field from "../../../../components/Field/Field.vue.js";
 import _sfc_main$6 from "../../../../components/FieldTags/BlockTags.vue.js";
 import _sfc_main$9 from "../../../../components/Checkbox/Checkbox.vue.js";
-/* empty css                                                 */
+/* empty css                                                  */
 import "axios";
 import _sfc_main$1 from "../../../../components/UploadImage/UploadImage.vue.js";
 /* empty css                                       */

package/dist/martyrs/src/modules/events/components/pages/EditEventTickets.vue.cjs

@@ -3,7 +3,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const vue = require("vue");
 const Feed = require("../../../../components/Feed/Feed.vue.cjs");
 const Block = require("../../../../components/Block/Block.vue.cjs");
-const Popup = require("../../../../components/Popup/Popup.vue.cjs");
+const Popup = require("../../../../components/Popup/Popup.vue2.cjs");
 const Field = require("../../../../components/Field/Field.vue.cjs");
 const Button = require("../../../../components/Button/Button.vue.cjs");
 const ButtonCheck = require("../elements/ButtonCheck.vue.cjs");

package/dist/martyrs/src/modules/events/components/pages/EditEventTickets.vue.js

@@ -1,7 +1,7 @@
 import { ref, onMounted, createElementBlock, createCommentVNode, unref, openBlock, createElementVNode, createVNode, withCtx, Fragment, renderList, createTextVNode, createBlock, toDisplayString } from "vue";
 import _sfc_main$7 from "../../../../components/Feed/Feed.vue.js";
 import _sfc_main$3 from "../../../../components/Block/Block.vue.js";
-import _sfc_main$2 from "../../../../components/Popup/Popup.vue.js";
+import _sfc_main$2 from "../../../../components/Popup/Popup.vue2.js";
 import Field from "../../../../components/Field/Field.vue.js";
 import _sfc_main$6 from "../../../../components/Button/Button.vue.js";
 import _sfc_main$1 from "../elements/ButtonCheck.vue.js";

package/dist/martyrs/src/modules/events/components/pages/Event.vue.cjs

@@ -2,7 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 ;/* empty css                                         */
-;/* empty css                                       */
+;/* empty css                                        */
 const Viewer = require("../../../constructor/components/sections/Viewer.vue.cjs");
 const Countdown = require("../../../../components/Countdown/Countdown.vue.cjs");
 const HeroEvent = require("../sections/HeroEvent.vue.cjs");

package/dist/martyrs/src/modules/events/components/pages/Event.vue.js

@@ -1,6 +1,6 @@
 import { ref, onMounted, createElementBlock, openBlock, createVNode, TransitionGroup, withCtx, createCommentVNode, createBlock, Fragment, renderList, unref, createElementVNode, toDisplayString, createTextVNode, withModifiers } from "vue";
 /* empty css                                       */
-/* empty css                                     */
+/* empty css                                      */
 import _sfc_main$2 from "../../../constructor/components/sections/Viewer.vue.js";
 import _sfc_main$4 from "../../../../components/Countdown/Countdown.vue.js";
 import HeroEvent from "../sections/HeroEvent.vue.js";

package/dist/martyrs/src/modules/events/components/pages/Events.vue.cjs

@@ -5,7 +5,7 @@ const vueRouter = require("vue-router");
 require("vue-i18n");
 ;/* empty css                                                   */
 const Feed = require("../../../../components/Feed/Feed.vue.cjs");
-const Popup = require("../../../../components/Popup/Popup.vue.cjs");
+const Popup = require("../../../../components/Popup/Popup.vue2.cjs");
 const DatePicker = require("../../../../components/DatePicker/DatePicker.vue.cjs");
 const CitySelection = require("../../../globals/views/components/partials/CitySelection.vue.cjs");
 const FeaturedEvents = require("../sections/FeaturedEvents.vue.cjs");

package/dist/martyrs/src/modules/events/components/pages/Events.vue.js

@@ -3,7 +3,7 @@ import { useRoute, useRouter } from "vue-router";
 import "vue-i18n";
 /* empty css                                                 */
 import _sfc_main$6 from "../../../../components/Feed/Feed.vue.js";
-import _sfc_main$2 from "../../../../components/Popup/Popup.vue.js";
+import _sfc_main$2 from "../../../../components/Popup/Popup.vue2.js";
 import _sfc_main$1 from "../../../../components/DatePicker/DatePicker.vue.js";
 import _sfc_main$3 from "../../../globals/views/components/partials/CitySelection.vue.js";
 import _sfc_main$5 from "../sections/FeaturedEvents.vue.js";

package/dist/martyrs/src/modules/events/components/sections/EventsHot.vue.cjs

@@ -2,7 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 ;/* empty css                                         */
-;/* empty css                                             */
+;/* empty css                                              */
 ;/* empty css                                           */
 ;/* empty css                                      */
 const Slider = require("../../../../components/Slider/Slider.vue.cjs");

package/dist/martyrs/src/modules/events/components/sections/EventsHot.vue.js

@@ -1,6 +1,6 @@
 import { resolveComponent, createBlock, openBlock, withCtx, createVNode, createElementVNode, createElementBlock, createCommentVNode, toDisplayString } from "vue";
 /* empty css                                       */
-/* empty css                                           */
+/* empty css                                            */
 /* empty css                                         */
 /* empty css                                    */
 import Slider from "../../../../components/Slider/Slider.vue.js";