vue-parley 4.7.0 → 4.9.0

package/README.md

@@ -2,8 +2,6 @@
 
 A drop-in Vue 3 chat and video-call UI. You supply the backend through a few handler objects; the package brings the screens, the state (Pinia stores), the translations and the styles.
 
-Formerly `@yonus_amire01/chat`. To switch, replace that name with `vue-parley` in `package.json` and in imports; nothing else changed.
-
 - Contact list with search, filters and infinite scroll
 - Virtualised message list with text, image, file, voice and video messages, replies, edits, deletes, drafts and retries on failed sends
 - Voice and video calls with screen sharing over plain browser WebRTC
@@ -21,6 +19,7 @@ Formerly `@yonus_amire01/chat`. To switch, replace that name with `vue-parley` i
   - [Photos and videos](#photos-and-videos)
   - [Read receipts](#read-receipts)
   - [Calls outside the chat page](#calls-outside-the-chat-page)
+  - [Joining a call in progress](#joining-a-call-in-progress)
   - [Fake backend](#fake-backend)
 - [What `createChat()` does](#what-createchat-does)
 - [Exports](#exports)
@@ -111,10 +110,20 @@ Render the chat inside `<ClientOnly>`: its handlers are only installed in the br
 | Slot               | Where                                              | Slot props                      |
 | ------------------ | -------------------------------------------------- | ------------------------------- |
 | `empty`            | Replaces the "no conversation selected" placeholder | none                            |
-| `header-actions`   | Conversation header, beside the call button        | `{ contact }`                   |
+| `header-actions`   | Conversation header, beside the call button        | `{ contact, compact }`          |
 | `conversation-top` | Between the header and the messages                | `{ conversationId, contact }`   |
 | `above-input`      | Above the input, while the conversation is active  | `{ conversationId, contact }`   |
 
+The header folds by its own width (under 640px), not the screen's, since the list and the contact panel take from it. Folded, it keeps the voice call (or Join) and moves the video call into its "more options" menu, and `compact` is true. A host then hides its `header-actions` buttons; the menu lists the `headerOptions` prop in their place (`MenuOption[]`; `icon` is a Phosphor name or any component, `command` runs on select). The header is also a size container named `chat-header`, so host buttons can drop their labels with container queries (`@3xl/chat-header:inline`).
+
+```vue
+<ChatPage :header-options="[{ key: 'members', label: 'Members', icon: UsersIcon, command: openMembers }]">
+  <template #header-actions="{ compact }">
+    <MembersButton v-if="!compact" />
+  </template>
+</ChatPage>
+```
+
 To build a different layout, use the exported building blocks instead: `ChatList`, `ChatConversation`, `ChatHeader`, `ChatMessages`, `ChatInput` and `ChatBubble`. They read the same stores, so they work together once `createChat()` is installed.
 
 ### Photos and videos
@@ -178,6 +187,18 @@ Calls use the browser's WebRTC API directly (no `simple-peer`, no Node polyfills
 
 Call handlers also accept `iceTransportPolicy` (default `"relay"`; `"all"` allows direct connections without TURN) and `debug` (logs signalling to the console).
 
+### Joining a call in progress
+
+When others are in a call on a conversation, its header shows **Join** in place of the call buttons. It joins with the camera on only if the call was started as a video call. Everyone in a call publishes a `presence` message when they join and every 15 seconds after. A call counts as running until its last participant hangs up or goes 45 seconds without being heard from. A closed tab sends no hangup, so that timeout is what ends its call.
+
+The call's own subscriber only hears the conversation it is on, so the host has to pass along what it hears on all of them. Hand every call message (`signal`, `join`, `track_type`, `call`, `hangup`, `presence`) from every conversation's channel to the store:
+
+```ts
+callStore.observeCall(message, conversationId);
+```
+
+`conversationId` can be left out for messages that carry `payload.channel`. Messages from the signed-in user are ignored. A host that never calls `observeCall` keeps the start-call buttons.
+
 ### Fake backend
 
 `vue-parley/fakes` is an in-memory implementation of every handler, for demos, playgrounds and tests. It is a separate entry, so apps that don't import it don't ship it.
@@ -226,6 +247,7 @@ Every component and directive the chat uses is imported by the component itself,
 | `BIcon`, `BEmojiPicker`, `BVirtualVerticalList` | A Phosphor icon by name, the emoji picker and the virtualised list the chat uses. Every other control is a PrimeVue component. |
 | `useChatStore`, `useMessagesStore`, `useMediaStore`, `useProfileStore`, `useCallStore` | The Pinia stores. |
 | `messageMedia(message)` | A message's photo and video album: its `media`, or its `imageUrl` as photos. |
+| `resetChat()` | Forgets everything the chat loaded for the signed-in user (conversations, threads, drafts, shared media, the downloaded-file cache) and ends a running call. Call it on sign-out or an account switch, before the next user's chat mounts; the handlers stay. Each store also has its own `reset()` (`clearCache()` on the media store). |
 | Types | Handler interfaces, `Contact`, `Message`, `MediaItem`, `SignalData`, `ChatOptions`, `ChatUser` and the rest of `app/types`. |
 | `vue-parley/fakes` | `createFakeBackend`, `createBroadcastCallHandlers`, `demoData`, `e2eData`: see [Fake backend](#fake-backend). |
 
@@ -320,4 +342,4 @@ e2e/              Playwright tests and harness
 
 [MIT](LICENSE)
 
-Repository: [github.com/yonus-a/vue-chat](https://github.com/yonus-a/vue-chat)
+Repository: [github.com/SaeedP11/vue-parley](https://github.com/SaeedP11/vue-parley)

package/dist/chat.css

@@ -403,6 +403,10 @@
 @layer components;
 
 @layer utilities {
+  :where(.vue-chat, .vue-chat *).\@container\/chat-header {
+    container: chat-header / inline-size;
+  }
+
   :where(.vue-chat, .vue-chat *).\!pointer-events-none {
     pointer-events: none !important;
   }
@@ -804,6 +808,11 @@
     aspect-ratio: var(--aspect-video);
   }
 
+  :where(.vue-chat, .vue-chat *).size-2 {
+    width: calc(var(--spacing) * 2);
+    height: calc(var(--spacing) * 2);
+  }
+
   :where(.vue-chat, .vue-chat *).size-2\.5 {
     width: calc(var(--spacing) * 2.5);
     height: calc(var(--spacing) * 2.5);
@@ -1084,6 +1093,10 @@
     min-height: calc(var(--spacing) * 9);
   }
 
+  :where(.vue-chat, .vue-chat *).min-h-10 {
+    min-height: calc(var(--spacing) * 10);
+  }
+
   :where(.vue-chat, .vue-chat *).min-h-11 {
     min-height: calc(var(--spacing) * 11);
   }
@@ -1184,6 +1197,10 @@
     width: calc(var(--spacing) * 64);
   }
 
+  :where(.vue-chat, .vue-chat *).w-64\! {
+    width: calc(var(--spacing) * 64) !important;
+  }
+
   :where(.vue-chat, .vue-chat *).w-70 {
     width: calc(var(--spacing) * 70);
   }
@@ -1236,6 +1253,10 @@
     max-width: 60%;
   }
 
+  :where(.vue-chat, .vue-chat *).max-w-\[calc\(100vw-1\.5rem\)\]\! {
+    max-width: calc(100vw - 1.5rem) !important;
+  }
+
   :where(.vue-chat, .vue-chat *).max-w-\[calc\(100vw-2rem\)\] {
     max-width: calc(100vw - 2rem);
   }
@@ -1304,6 +1325,10 @@
     transform-origin: 0 0;
   }
 
+  :where(.vue-chat, .vue-chat *).origin-top-right {
+    transform-origin: 100% 0;
+  }
+
   :where(.vue-chat, .vue-chat *).-translate-1\/2 {
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
@@ -1529,6 +1554,10 @@
     column-gap: calc(var(--spacing) * 2);
   }
 
+  :where(.vue-chat, .vue-chat *).gap-x-2\! {
+    column-gap: calc(var(--spacing) * 2) !important;
+  }
+
   :where(.vue-chat, .vue-chat *).gap-x-2\.5 {
     column-gap: calc(var(--spacing) * 2.5);
   }
@@ -1563,6 +1592,10 @@
     row-gap: calc(var(--spacing) * .5);
   }
 
+  :where(.vue-chat, .vue-chat *).gap-y-0\.5\! {
+    row-gap: calc(var(--spacing) * .5) !important;
+  }
+
   :where(.vue-chat, .vue-chat *).gap-y-1 {
     row-gap: var(--spacing);
   }
@@ -1794,6 +1827,16 @@
     }
   }
 
+  :where(.vue-chat, .vue-chat *).border-chat-outline-variant\/70\! {
+    border-color: #f0f0f0b3 !important;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).border-chat-outline-variant\/70\! {
+      border-color: color-mix(in oklab, var(--color-chat-outline-variant) 70%, transparent) !important;
+    }
+  }
+
   :where(.vue-chat, .vue-chat *).border-chat-primary {
     border-color: var(--color-chat-primary);
   }
@@ -2058,6 +2101,10 @@
     }
   }
 
+  :where(.vue-chat, .vue-chat *).bg-current {
+    background-color: currentColor;
+  }
+
   :where(.vue-chat, .vue-chat *).bg-error {
     background-color: var(--color-error);
   }
@@ -2437,6 +2484,10 @@
     padding-inline: calc(var(--spacing) * 3.5);
   }
 
+  :where(.vue-chat, .vue-chat *).px-3\.5\! {
+    padding-inline: calc(var(--spacing) * 3.5) !important;
+  }
+
   :where(.vue-chat, .vue-chat *).px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
@@ -2919,6 +2970,10 @@
     opacity: .6;
   }
 
+  :where(.vue-chat, .vue-chat *).opacity-75 {
+    opacity: .75;
+  }
+
   :where(.vue-chat, .vue-chat *).opacity-100 {
     opacity: 1;
   }
@@ -3547,6 +3602,12 @@
     }
   }
 
+  @container chat-header (min-width: 48rem) {
+    :where(.vue-chat, .vue-chat *).\@3xl\/chat-header\:inline {
+      display: inline;
+    }
+  }
+
   :where(.vue-chat, .vue-chat *).ltr\:-scale-x-100:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
     --tw-scale-x: calc(100% * -1);
     scale: var(--tw-scale-x) var(--tw-scale-y);
@@ -3577,6 +3638,10 @@
     left: auto !important;
   }
 
+  :where(.vue-chat, .vue-chat *).rtl\:origin-top-left:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    transform-origin: 0 0;
+  }
+
   :where(.vue-chat, .vue-chat *).rtl\:origin-top-right:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
     transform-origin: 100% 0;
   }
@@ -4162,15 +4227,15 @@
 }
 
 /* Styles remain exactly the same */
-:where(.vue-chat, .vue-chat *).flip-vertical[data-v-cb7cc93f] {
+:where(.vue-chat, .vue-chat *).flip-vertical[data-v-c38cc418] {
   transform: scaleY(-1);
   will-change: transform;
 }
-:where(.vue-chat, .vue-chat *)[data-index][data-v-cb7cc93f] {
+:where(.vue-chat, .vue-chat *)[data-index][data-v-c38cc418] {
   will-change: transform;
   backface-visibility: hidden;
 }
-@keyframes slide-in-right-cb7cc93f {
+@keyframes slide-in-right-c38cc418 {
 0% {
     opacity: 0;
     transform: scaleY(-1) translateX(30px);
@@ -4180,7 +4245,7 @@
     transform: scaleY(-1) translateX(0);
 }
 }
-@keyframes slide-in-left-cb7cc93f {
+@keyframes slide-in-left-c38cc418 {
 0% {
     opacity: 0;
     transform: scaleY(-1) translateX(-30px);
@@ -4190,23 +4255,23 @@
     transform: scaleY(-1) translateX(0);
 }
 }
-:where(.vue-chat, .vue-chat *).animate-slide-right[data-v-cb7cc93f] {
-  animation: slide-in-right-cb7cc93f 300ms ease-out forwards;
+:where(.vue-chat, .vue-chat *).animate-slide-right[data-v-c38cc418] {
+  animation: slide-in-right-c38cc418 300ms ease-out forwards;
   will-change: transform, opacity;
 }
-:where(.vue-chat, .vue-chat *).animate-slide-left[data-v-cb7cc93f] {
-  animation: slide-in-left-cb7cc93f 300ms ease-out forwards;
+:where(.vue-chat, .vue-chat *).animate-slide-left[data-v-c38cc418] {
+  animation: slide-in-left-c38cc418 300ms ease-out forwards;
   will-change: transform, opacity;
 }
-:where(.vue-chat, .vue-chat *)#list[data-v-cb7cc93f] {
+:where(.vue-chat, .vue-chat *)#list[data-v-c38cc418] {
   will-change: padding-top;
 }
-:where(.vue-chat, .vue-chat *).animate-request-in[data-v-cb7cc93f] {
-  animation: request-in-cb7cc93f 0.4s ease-out forwards;
+:where(.vue-chat, .vue-chat *).animate-request-in[data-v-c38cc418] {
+  animation: request-in-c38cc418 0.4s ease-out forwards;
   overflow: hidden;
   transform: scaleY(-1);
 }
-@keyframes request-in-cb7cc93f {
+@keyframes request-in-c38cc418 {
 0% {
     opacity: 0;
     max-height: 0;

package/dist/chunks/{Call-CnnA8BfZ.mjs → Call-DY7-rM16.mjs}

@@ -1,5 +1,5 @@
 import { ref, onMounted, onUnmounted, watch, nextTick, reactive, onBeforeUnmount, defineComponent, openBlock, createElementBlock, createBlock, unref, mergeProps, withCtx, createVNode, normalizeClass, computed, Fragment, normalizeStyle, createElementVNode, toDisplayString, withModifiers, createCommentVNode, withDirectives, vShow, renderList } from "vue";
-import { u as useCallStore, a as useLocalI18n, c as chat, b as useDirection, d as useChatStore, f as formatDuration } from "./index-BSRFIpFg.mjs";
+import { u as useCallStore, a as useLocalI18n, c as chat, b as useDirection, d as useChatStore, f as formatDuration } from "./index-BoigqzSL.mjs";
 import { useEventListener, useWindowSize, useDraggable } from "@vueuse/core";
 import Avatar from "primevue/avatar";
 import Button from "primevue/button";
@@ -1152,4 +1152,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   _sfc_main as default
 };
-//# sourceMappingURL=Call-CnnA8BfZ.mjs.map
+//# sourceMappingURL=Call-DY7-rM16.mjs.map