vue-parley 4.1.1 → 4.3.0

package/README.md

@@ -19,6 +19,7 @@ Formerly `@yonus_amire01/chat`. To switch, replace that name with `vue-parley` i
   - [Nuxt 3 / 4](#nuxt-3--4)
   - [Customising the page](#customising-the-page)
   - [Photos and videos](#photos-and-videos)
+  - [Read receipts](#read-receipts)
   - [Calls outside the chat page](#calls-outside-the-chat-page)
   - [Fake backend](#fake-backend)
 - [What `createChat()` does](#what-createchat-does)
@@ -135,6 +136,25 @@ To build a different layout, use the exported building blocks instead: `ChatList
 
 A round video note recorded in the chat is different: it is `type: "video"` with `videoUrl`, and plays in its bubble.
 
+### Read receipts
+
+Your own messages show one tick when sent and two once someone has read them (`isRead`). With a `fetchReaders` handler, the message menu also says **who** read one of your messages: the reader and when in a one-to-one chat, or "Seen by N" opening the list of readers in a group.
+
+```ts
+const messages: MessagesHandlers = {
+  // …
+  // The conversation is open and read up to lastMessageId (when a message is loaded). Called when
+  // it opens, and again as messages from others arrive while it is on screen.
+  async markRead(conversationId, lastMessageId) {},
+  // The other participants who have read one of the viewer's own messages.
+  async fetchReaders(message): Promise<MessageReader[]> {
+    return [{ id: "u2", name: "Sara", lastName: "Ahmadi", imageUrl: "", readAt: new Date() }];
+  },
+};
+```
+
+`readAt` is when the reader last caught up on the conversation, which a host tracking a per-member "read up to" pointer may only know for the newest message they reached. When a read receipt arrives in real time, call `useMessagesStore().markSeenUpTo(conversationId, messageId)` with the newest loaded message the reader has reached: your messages up to it turn read.
+
 ### Calls outside the chat page
 
 A call belongs to the call store, not to a component, so it keeps running when the chat page unmounts. To keep it **on screen** while the user navigates, render the call view once near the app root and turn off the chat page's own:

package/dist/chat.css

@@ -505,10 +505,6 @@
     top: calc(var(--spacing) * 4);
   }
 
-  :where(.vue-chat, .vue-chat *).top-12 {
-    top: calc(var(--spacing) * 12);
-  }
-
   :where(.vue-chat, .vue-chat *).right-0 {
     right: 0;
   }
@@ -951,6 +947,10 @@
     max-height: calc(var(--spacing) * 60);
   }
 
+  :where(.vue-chat, .vue-chat *).max-h-72\! {
+    max-height: calc(var(--spacing) * 72) !important;
+  }
+
   :where(.vue-chat, .vue-chat *).max-h-109 {
     max-height: calc(var(--spacing) * 109);
   }
@@ -1163,6 +1163,10 @@
     min-width: calc(var(--spacing) * 20);
   }
 
+  :where(.vue-chat, .vue-chat *).min-w-64\! {
+    min-width: calc(var(--spacing) * 64) !important;
+  }
+
   :where(.vue-chat, .vue-chat *).flex-1 {
     flex: 1;
   }
@@ -1354,6 +1358,10 @@
     flex-direction: row !important;
   }
 
+  :where(.vue-chat, .vue-chat *).flex-row-reverse {
+    flex-direction: row-reverse;
+  }
+
   :where(.vue-chat, .vue-chat *).flex-wrap {
     flex-wrap: wrap;
   }
@@ -1430,6 +1438,10 @@
     column-gap: calc(var(--spacing) * 2.5);
   }
 
+  :where(.vue-chat, .vue-chat *).gap-x-2\.5\! {
+    column-gap: calc(var(--spacing) * 2.5) !important;
+  }
+
   :where(.vue-chat, .vue-chat *).gap-x-3 {
     column-gap: calc(var(--spacing) * 3);
   }
@@ -1456,6 +1468,12 @@
     margin-inline-end: calc(calc(var(--spacing) * -1) * calc(1 - var(--tw-space-x-reverse)));
   }
 
+  :where(.vue-chat, .vue-chat *):where(.-space-x-2 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   :where(.vue-chat, .vue-chat *).gap-y-0\.5 {
     row-gap: calc(var(--spacing) * .5);
   }
@@ -1518,6 +1536,10 @@
     overflow-y: auto;
   }
 
+  :where(.vue-chat, .vue-chat *).overflow-y-auto\! {
+    overflow-y: auto !important;
+  }
+
   :where(.vue-chat, .vue-chat *).\!rounded {
     border-radius: .25rem !important;
   }
@@ -1566,33 +1588,33 @@
     border-radius: var(--radius-xl) !important;
   }
 
-  :where(.vue-chat, .vue-chat *).rounded-ss-md {
-    border-start-start-radius: var(--radius-md);
+  :where(.vue-chat, .vue-chat *).rounded-tl-md {
+    border-top-left-radius: var(--radius-md);
   }
 
-  :where(.vue-chat, .vue-chat *).rounded-se-md {
-    border-start-end-radius: var(--radius-md);
+  :where(.vue-chat, .vue-chat *).rounded-tr-md {
+    border-top-right-radius: var(--radius-md);
   }
 
-  :where(.vue-chat, .vue-chat *).rounded-ee-md {
-    border-end-end-radius: var(--radius-md);
+  :where(.vue-chat, .vue-chat *).rounded-b-none\! {
+    border-bottom-right-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
   }
 
-  :where(.vue-chat, .vue-chat *).rounded-ee-xs {
-    border-end-end-radius: var(--radius-xs);
+  :where(.vue-chat, .vue-chat *).rounded-br-md {
+    border-bottom-right-radius: var(--radius-md);
   }
 
-  :where(.vue-chat, .vue-chat *).rounded-es-md {
-    border-end-start-radius: var(--radius-md);
+  :where(.vue-chat, .vue-chat *).rounded-br-xs {
+    border-bottom-right-radius: var(--radius-xs);
   }
 
-  :where(.vue-chat, .vue-chat *).rounded-es-xs {
-    border-end-start-radius: var(--radius-xs);
+  :where(.vue-chat, .vue-chat *).rounded-bl-md {
+    border-bottom-left-radius: var(--radius-md);
   }
 
-  :where(.vue-chat, .vue-chat *).rounded-b-none\! {
-    border-bottom-right-radius: 0 !important;
-    border-bottom-left-radius: 0 !important;
+  :where(.vue-chat, .vue-chat *).rounded-bl-xs {
+    border-bottom-left-radius: var(--radius-xs);
   }
 
   :where(.vue-chat, .vue-chat *).border {
@@ -1600,6 +1622,11 @@
     border-width: 1px;
   }
 
+  :where(.vue-chat, .vue-chat *).border\! {
+    border-style: var(--tw-border-style) !important;
+    border-width: 1px !important;
+  }
+
   :where(.vue-chat, .vue-chat *).border-0\! {
     border-style: var(--tw-border-style) !important;
     border-width: 0 !important;
@@ -1791,6 +1818,16 @@
     }
   }
 
+  :where(.vue-chat, .vue-chat *).bg-chat-background\/95\! {
+    background-color: #fffffff2 !important;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-chat-background\/95\! {
+      background-color: color-mix(in oklab, var(--color-chat-background) 95%, transparent) !important;
+    }
+  }
+
   :where(.vue-chat, .vue-chat *).bg-chat-bubble {
     background-color: var(--color-chat-bubble);
   }
@@ -1977,6 +2014,16 @@
     }
   }
 
+  :where(.vue-chat, .vue-chat *).bg-white\/15 {
+    background-color: #ffffff26;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-white\/15 {
+      background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
+    }
+  }
+
   :where(.vue-chat, .vue-chat *).bg-linear-to-b {
     --tw-gradient-position: to bottom;
   }
@@ -2009,10 +2056,6 @@
     background-image: var(--background-image-diamond-error);
   }
 
-  :where(.vue-chat, .vue-chat *).bg-diamond-primary-secondary {
-    background-image: var(--background-image-diamond-primary-secondary);
-  }
-
   :where(.vue-chat, .vue-chat *).bg-gradient-primary-secondary {
     background-image: var(--background-image-gradient-primary-secondary);
   }
@@ -2728,6 +2771,10 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  :where(.vue-chat, .vue-chat *).ring-chat-background {
+    --tw-ring-color: var(--color-chat-background);
+  }
+
   :where(.vue-chat, .vue-chat *).ring-white {
     --tw-ring-color: var(--color-white);
   }
@@ -2908,6 +2955,10 @@
     user-select: text;
   }
 
+  :where(.vue-chat, .vue-chat *).\[unicode-bidi\:plaintext\] {
+    unicode-bidi: plaintext;
+  }
+
   :where(.vue-chat, .vue-chat *).\[vue-chat\:call\] {
     vue-chat: call;
   }
@@ -3229,10 +3280,30 @@
     rotate: 0deg;
   }
 
+  :where(.vue-chat, .vue-chat *).rtl\:rotate-180:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    rotate: 180deg;
+  }
+
+  :where(.vue-chat, .vue-chat *).rtl\:flex-row:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    flex-direction: row;
+  }
+
   :where(.vue-chat, .vue-chat *).rtl\:flex-row\!:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
     flex-direction: row !important;
   }
 
+  :where(.vue-chat, .vue-chat *).rtl\:justify-end:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    justify-content: flex-end;
+  }
+
+  :where(.vue-chat, .vue-chat *).rtl\:justify-start:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    justify-content: flex-start;
+  }
+
+  :where(.vue-chat, .vue-chat *):where(.rtl\:space-x-reverse:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > :not(:last-child)) {
+    --tw-space-x-reverse: 1;
+  }
+
   :where(.vue-chat, .vue-chat *).rtl\:border-l:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
@@ -3760,15 +3831,15 @@
 }
 
 /* Styles remain exactly the same */
-:where(.vue-chat, .vue-chat *).flip-vertical[data-v-9b959d0c] {
+:where(.vue-chat, .vue-chat *).flip-vertical[data-v-cb7cc93f] {
   transform: scaleY(-1);
   will-change: transform;
 }
-:where(.vue-chat, .vue-chat *)[data-index][data-v-9b959d0c] {
+:where(.vue-chat, .vue-chat *)[data-index][data-v-cb7cc93f] {
   will-change: transform;
   backface-visibility: hidden;
 }
-@keyframes slide-in-right-9b959d0c {
+@keyframes slide-in-right-cb7cc93f {
 0% {
     opacity: 0;
     transform: scaleY(-1) translateX(30px);
@@ -3778,7 +3849,7 @@
     transform: scaleY(-1) translateX(0);
 }
 }
-@keyframes slide-in-left-9b959d0c {
+@keyframes slide-in-left-cb7cc93f {
 0% {
     opacity: 0;
     transform: scaleY(-1) translateX(-30px);
@@ -3788,23 +3859,23 @@
     transform: scaleY(-1) translateX(0);
 }
 }
-:where(.vue-chat, .vue-chat *).animate-slide-right[data-v-9b959d0c] {
-  animation: slide-in-right-9b959d0c 300ms ease-out forwards;
+:where(.vue-chat, .vue-chat *).animate-slide-right[data-v-cb7cc93f] {
+  animation: slide-in-right-cb7cc93f 300ms ease-out forwards;
   will-change: transform, opacity;
 }
-:where(.vue-chat, .vue-chat *).animate-slide-left[data-v-9b959d0c] {
-  animation: slide-in-left-9b959d0c 300ms ease-out forwards;
+:where(.vue-chat, .vue-chat *).animate-slide-left[data-v-cb7cc93f] {
+  animation: slide-in-left-cb7cc93f 300ms ease-out forwards;
   will-change: transform, opacity;
 }
-:where(.vue-chat, .vue-chat *)#list[data-v-9b959d0c] {
+:where(.vue-chat, .vue-chat *)#list[data-v-cb7cc93f] {
   will-change: padding-top;
 }
-:where(.vue-chat, .vue-chat *).animate-request-in[data-v-9b959d0c] {
-  animation: request-in-9b959d0c 0.4s ease-out forwards;
+:where(.vue-chat, .vue-chat *).animate-request-in[data-v-cb7cc93f] {
+  animation: request-in-cb7cc93f 0.4s ease-out forwards;
   overflow: hidden;
   transform: scaleY(-1);
 }
-@keyframes request-in-9b959d0c {
+@keyframes request-in-cb7cc93f {
 0% {
     opacity: 0;
     max-height: 0;

package/dist/chunks/{Call-BeGdr-d7.cjs → Call-CDT92h1x.cjs}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./index-B17prQrp.cjs");
+const index = require("./index-efTNVoBF.cjs");
 const vue = require("vue");
 const core = require("@vueuse/core");
 const Button = require("primevue/button");
@@ -175,35 +175,35 @@ function useCall() {
     remoteParents: ui.remoteParents
   };
 }
-const _hoisted_1 = { class: "relative h-full w-full" };
-const _hoisted_2 = { class: "absolute top-3 right-3 left-3 z-10 flex items-center justify-between" };
-const _hoisted_3 = { class: "flex items-center gap-x-2 rounded-full bg-black/40 px-3 py-1.5 backdrop-blur-sm" };
-const _hoisted_4 = { class: "text-label-sm text-white/90 select-none" };
-const _hoisted_5 = { class: "absolute right-3 bottom-3 left-3 z-10 flex items-center justify-between" };
-const _hoisted_6 = { class: "flex items-center gap-2" };
-const _hoisted_7 = {
+const _hoisted_1 = ["dir"];
+const _hoisted_2 = { class: "relative h-full w-full" };
+const _hoisted_3 = { class: "absolute top-3 right-3 left-3 z-10 flex items-center justify-between" };
+const _hoisted_4 = { class: "flex items-center gap-x-2 rounded-full bg-black/40 px-3 py-1.5 backdrop-blur-sm" };
+const _hoisted_5 = { class: "text-label-sm text-white/90 select-none" };
+const _hoisted_6 = { class: "absolute right-3 bottom-3 left-3 z-10 flex items-center justify-between" };
+const _hoisted_7 = { class: "flex items-center gap-2" };
+const _hoisted_8 = {
   key: 0,
   class: "flex gap-1"
 };
-const _hoisted_8 = {
+const _hoisted_9 = {
   key: 0,
   class: "flex h-7 w-7 items-center justify-center rounded-full bg-diamond-error"
 };
-const _hoisted_9 = {
+const _hoisted_10 = {
   key: 1,
   class: "flex h-7 w-7 items-center justify-center rounded-full bg-diamond-error"
 };
-const _hoisted_10 = {
-  "data-testid": "call-view",
-  class: "vue-chat fixed inset-0 z-[60] flex h-full w-full flex-col bg-diamond-black"
+const _hoisted_11 = ["dir"];
+const _hoisted_12 = { class: "flex items-center gap-x-4" };
+const _hoisted_13 = { class: "hidden select-none text-label-lg text-white md:block" };
+const _hoisted_14 = { class: "flex items-center gap-x-2 text-white text-body-sm" };
+const _hoisted_15 = { "data-testid": "call-participants" };
+const _hoisted_16 = { class: "flex items-center gap-x-4.5" };
+const _hoisted_17 = {
+  dir: "ltr",
+  class: "flex h-6 items-center justify-center rounded-full bg-white/15 px-2.5 text-body-sm text-white tabular-nums select-none"
 };
-const _hoisted_11 = { class: "flex items-center gap-x-4" };
-const _hoisted_12 = { class: "hidden select-none text-label-lg text-white md:block" };
-const _hoisted_13 = { class: "flex items-center gap-x-2 text-white text-body-sm" };
-const _hoisted_14 = { "data-testid": "call-participants" };
-const _hoisted_15 = { class: "flex items-center gap-x-4.5" };
-const _hoisted_16 = { class: "flex h-6 items-center justify-center rounded-full bg-diamond-error px-2 text-white select-none" };
-const _hoisted_17 = { class: "text-body-sm" };
 const _hoisted_18 = { class: "grid h-full min-h-0 w-full min-w-0 grid-cols-1 gap-4 md:grid-cols-[repeat(auto-fit,minmax(300px,1fr))]" };
 const _hoisted_19 = { class: "absolute bottom-3 left-3 z-20 flex items-center gap-x-2" };
 const _hoisted_20 = { class: "rounded bg-black-500 px-2 py-1 text-label-sm text-white select-none" };
@@ -230,6 +230,7 @@ const _hoisted_34 = { class: "text-label-md" };
 const PIP_WIDTH = 280;
 const PIP_HEIGHT = 160;
 const PADDING = 16;
+const PIP_INSET_Y = 96;
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "Call",
   setup(__props) {
@@ -237,8 +238,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const minimizedRef = vue.ref(null);
     const bodyRef = vue.ref(null);
     const cameraPickerOpen = vue.ref(false);
-    const { t, locale } = index.useLocalI18n(index.chat);
+    const { t } = index.useLocalI18n(index.chat);
     const { dir } = index.useDirection();
+    const chatStore = index.useChatStore();
+    const callTitle = vue.computed(() => {
+      const contact = callStore.channelId ? chatStore.getContactById(callStore.channelId) : null;
+      const name = contact ? `${contact.name} ${contact.lastName ?? ""}`.trim() : "";
+      return name || t("chat.call.title");
+    });
     const {
       toggleVideoPause,
       toggleRemote,
@@ -350,7 +357,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const { x, y, isDragging } = core.useDraggable(minimizedRef, {
       initialValue: {
         x: typeof window !== "undefined" ? window.innerWidth - PIP_WIDTH - PADDING : PADDING,
-        y: typeof window !== "undefined" ? window.innerHeight - PIP_HEIGHT - PADDING : PADDING
+        y: PIP_INSET_Y
       },
       // غیرفعال کردن درگ در صورتی که کامپوننت مینیمایز نباشد
       disabled: vue.computed(() => !callStore.isMinimized)
@@ -358,10 +365,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     vue.watch(isDragging, (dragging) => {
       if (!dragging && callStore.isMinimized) {
         const maxX = windowWidth.value - PIP_WIDTH - PADDING;
-        const maxY = windowHeight.value - PIP_HEIGHT - PADDING;
-        dir.value === "rtl";
+        const maxY = windowHeight.value - PIP_HEIGHT - PIP_INSET_Y;
         const targetX = x.value < windowWidth.value / 2 ? PADDING : maxX;
-        const targetY = y.value < windowHeight.value / 2 ? PADDING : maxY;
+        const targetY = y.value < windowHeight.value / 2 ? PIP_INSET_Y : maxY;
         x.value = targetX;
         y.value = targetY;
       }
@@ -373,7 +379,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           vue.nextTick(() => {
             const isRtl = dir.value === "rtl";
             x.value = isRtl ? PADDING : windowWidth.value - PIP_WIDTH - PADDING;
-            y.value = windowHeight.value - PIP_HEIGHT - PADDING;
+            y.value = PIP_INSET_Y;
           });
         }
       },
@@ -399,7 +405,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           ref: minimizedRef,
           "data-testid": "call-pip",
           style: vue.normalizeStyle(clampedStyle.value),
-          class: vue.normalizeClass(["vue-chat fixed w-70 h-40 bg-black-600 rounded-2xl shadow-floating z-9999 overflow-hidden border border-white/10 flex flex-col items-center justify-center cursor-move touch-none", [!vue.unref(isDragging) ? "transition-all duration-300 ease-out" : ""]])
+          dir: vue.unref(dir),
+          class: vue.normalizeClass(["vue-chat font-chat-family fixed w-70 h-40 bg-black-600 rounded-2xl shadow-floating z-9999 overflow-hidden border border-white/10 flex flex-col items-center justify-center cursor-move touch-none", [!vue.unref(isDragging) ? "transition-all duration-300 ease-out" : ""]])
         }, [
           vue.createElementVNode("video", {
             ref_key: "pipVideoRef",
@@ -411,14 +418,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           }, null, 512),
           _cache[18] || (_cache[18] = vue.createElementVNode("div", { class: "pointer-events-none absolute inset-0 bg-gradient-to-br from-blue-500/5 via-purple-500/5 to-pink-500/5 opacity-0 transition-opacity duration-500 group-hover:opacity-100" }, null, -1)),
           _cache[19] || (_cache[19] = vue.createElementVNode("div", { class: "pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-black/20" }, null, -1)),
-          vue.createElementVNode("div", _hoisted_1, [
-            vue.createElementVNode("div", _hoisted_2, [
-              vue.createElementVNode("div", _hoisted_3, [
+          vue.createElementVNode("div", _hoisted_2, [
+            vue.createElementVNode("div", _hoisted_3, [
+              vue.createElementVNode("div", _hoisted_4, [
                 _cache[16] || (_cache[16] = vue.createElementVNode("div", { class: "relative" }, [
                   vue.createElementVNode("div", { class: "h-2.5 w-2.5 animate-pulse rounded-full bg-diamond-error" }),
                   vue.createElementVNode("div", { class: "absolute inset-0 h-2.5 w-2.5 animate-ping rounded-full bg-diamond-error/30" })
                 ], -1)),
-                vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(vue.unref(t)("Call active")), 1),
+                vue.createElementVNode("span", _hoisted_5, vue.toDisplayString(vue.unref(t)("chat.call.active")), 1),
                 _cache[17] || (_cache[17] = vue.createElementVNode("div", { class: "flex -space-x-1" }, [
                   vue.createElementVNode("div", {
                     class: "h-1.5 w-1.5 animate-pulse rounded-full bg-green-400",
@@ -446,8 +453,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 onClick: vue.withModifiers(vue.unref(endCall), ["stop"])
               }, null, 8, ["label", "onClick"])
             ]),
-            vue.createElementVNode("div", _hoisted_5, [
-              vue.createElementVNode("div", _hoisted_6, [
+            vue.createElementVNode("div", _hoisted_6, [
+              vue.createElementVNode("div", _hoisted_7, [
                 vue.createVNode(vue.unref(Button), {
                   label: String(vue.unref(participantCount)),
                   "aria-label": vue.unref(t)("chat.call.controls.nextParticipant"),
@@ -468,14 +475,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   ]),
                   _: 1
                 }, 8, ["label", "aria-label", "disabled"]),
-                !vue.unref(isAudioOn) || !vue.unref(isVideoOn) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
-                  !vue.unref(isAudioOn) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
+                !vue.unref(isAudioOn) || !vue.unref(isVideoOn) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
+                  !vue.unref(isAudioOn) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, [
                     vue.createVNode(_component_BIcon, {
                       icon: "PhMicrophoneSlash",
                       class: "h-3 w-3 fill-white"
                     })
                   ])) : vue.createCommentVNode("", true),
-                  !vue.unref(isVideoOn) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, [
+                  !vue.unref(isVideoOn) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, [
                     vue.createVNode(_component_BIcon, {
                       icon: "PhVideoCameraSlash",
                       class: "h-3 w-3 fill-white"
@@ -496,8 +503,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               }, null, 8, ["label"])
             ])
           ])
-        ], 6)) : vue.createCommentVNode("", true),
-        vue.withDirectives(vue.createElementVNode("div", _hoisted_10, [
+        ], 14, _hoisted_1)) : vue.createCommentVNode("", true),
+        vue.withDirectives(vue.createElementVNode("div", {
+          "data-testid": "call-view",
+          dir: vue.unref(dir),
+          class: "vue-chat font-chat-family fixed inset-0 z-[60] flex h-full w-full flex-col bg-diamond-black"
+        }, [
           !vue.unref(callStore).isMinimized ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
             class: vue.normalizeClass(["flex h-16 items-center justify-between px-4 transition-all duration-300 sm:h-20", vue.unref(showControls) ? "opacity-100" : "opacity-0"]),
@@ -506,24 +517,18 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             onMousemove: _cache[5] || (_cache[5] = //@ts-ignore
             (...args) => vue.unref(resetControlsTimeout) && vue.unref(resetControlsTimeout)(...args))
           }, [
-            vue.createElementVNode("div", _hoisted_11, [
-              vue.createElementVNode("div", _hoisted_12, vue.toDisplayString(vue.unref(t)("Behayand Meeting")), 1),
-              vue.createElementVNode("div", _hoisted_13, [
+            vue.createElementVNode("div", _hoisted_12, [
+              vue.createElementVNode("div", _hoisted_13, vue.toDisplayString(callTitle.value), 1),
+              vue.createElementVNode("div", _hoisted_14, [
                 vue.createVNode(_component_BIcon, {
                   icon: "PhUsers",
                   class: "h-4 w-4 fill-white"
                 }),
-                vue.createElementVNode("span", _hoisted_14, vue.toDisplayString(vue.unref(participantCount)) + " " + vue.toDisplayString(vue.unref(participantCount) > 1 ? vue.unref(t)("participants") : vue.unref(t)("participant")), 1)
+                vue.createElementVNode("span", _hoisted_15, vue.toDisplayString(vue.unref(t)("chat.call.participants", vue.unref(participantCount))), 1)
               ])
             ]),
-            vue.createElementVNode("div", _hoisted_15, [
-              vue.createElementVNode("div", _hoisted_16, [
-                vue.createElementVNode("div", _hoisted_17, vue.toDisplayString((/* @__PURE__ */ new Date()).toLocaleTimeString(vue.unref(locale), {
-                  hour: "2-digit",
-                  minute: "2-digit",
-                  hour12: true
-                })), 1)
-              ]),
+            vue.createElementVNode("div", _hoisted_16, [
+              vue.createElementVNode("div", _hoisted_17, vue.toDisplayString(vue.unref(index.formatDuration)(vue.unref(callStore).elapsedTime)), 1),
               vue.createVNode(index._sfc_main, vue.mergeProps({
                 icon: "PhCaretDown",
                 label: vue.unref(t)("chat.call.controls.minimize")
@@ -552,7 +557,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   class: "absolute inset-0 z-0 h-full w-full object-cover"
                 }, null, 512),
                 vue.createElementVNode("div", _hoisted_19, [
-                  vue.createElementVNode("div", _hoisted_20, vue.toDisplayString(vue.unref(t)("Your Presentation")), 1),
+                  vue.createElementVNode("div", _hoisted_20, vue.toDisplayString(vue.unref(t)("chat.call.yourPresentation")), 1),
                   vue.createElementVNode("div", _hoisted_21, [
                     vue.createVNode(_component_BIcon, {
                       icon: "PhMonitor",
@@ -639,7 +644,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     class: "absolute inset-0 z-0 h-full w-full object-cover"
                   }, null, 512),
                   vue.createElementVNode("div", _hoisted_24, [
-                    vue.createElementVNode("div", _hoisted_25, vue.toDisplayString(vue.unref(t)("Presentation of")) + " " + vue.toDisplayString(stream.name.slice(0, 15)), 1),
+                    vue.createElementVNode("div", _hoisted_25, vue.toDisplayString(vue.unref(t)("chat.call.presentationOf", { name: stream.name.slice(0, 15) })), 1),
                     vue.createElementVNode("div", _hoisted_26, [
                       vue.createVNode(_component_BIcon, {
                         icon: "PhMonitor",
@@ -691,7 +696,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 }, null, 512),
                 _cache[20] || (_cache[20] = vue.createElementVNode("div", { class: "pointer-events-none absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" }, null, -1)),
                 vue.createElementVNode("div", _hoisted_27, [
-                  vue.createElementVNode("div", _hoisted_28, vue.toDisplayString(vue.unref(t)("You")), 1),
+                  vue.createElementVNode("div", _hoisted_28, vue.toDisplayString(vue.unref(t)("chat.call.you")), 1),
                   !vue.unref(isAudioOn) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_29, [
                     vue.createVNode(_component_BIcon, {
                       icon: "PhMicrophoneSlash",
@@ -718,9 +723,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 !vue.unref(isVideoOn) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_30, [
                   vue.createElementVNode("div", _hoisted_31, [
                     vue.createElementVNode("div", _hoisted_32, [
-                      vue.createElementVNode("span", _hoisted_33, vue.toDisplayString(vue.unref(t)("You")), 1)
+                      vue.createElementVNode("span", _hoisted_33, vue.toDisplayString(vue.unref(t)("chat.call.you")), 1)
                     ]),
-                    vue.createElementVNode("p", _hoisted_34, vue.toDisplayString(vue.unref(t)("Camera is off")), 1)
+                    vue.createElementVNode("p", _hoisted_34, vue.toDisplayString(vue.unref(t)("chat.call.cameraIsOff")), 1)
                   ])
                 ])) : vue.createCommentVNode("", true)
               ], 2)) : vue.createCommentVNode("", true)
@@ -807,7 +812,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               onClick: vue.unref(endCall)
             }, null, 8, ["label", "onClick"])
           ], 34)) : vue.createCommentVNode("", true)
-        ], 512), [
+        ], 8, _hoisted_11), [
           [vue.vShow, vue.unref(callStore).isActive && !vue.unref(callStore).isMinimized]
         ])
       ], 64);
@@ -815,4 +820,4 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   }
 });
 exports.default = _sfc_main;
-//# sourceMappingURL=Call-BeGdr-d7.cjs.map
+//# sourceMappingURL=Call-CDT92h1x.cjs.map