vue-parley 4.6.0 → 4.7.0

package/README.md

@@ -21,7 +21,6 @@ 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)
@@ -120,7 +119,8 @@ To build a different layout, use the exported building blocks instead: `ChatList
 
 ### Photos and videos
 
-"Photo or video" in the attachment menu sends one message of type `image` holding the whole album, up to 10 items, in the order they were picked:
+The attachment menu offers Photo, Video and File. Photos and videos (and "Add more" mixes the two) go out as one message of type `image` holding the whole album, up to 10 items, in the order they were picked:
+
 
 ```ts
 {
@@ -135,8 +135,11 @@ To build a different layout, use the exported building blocks instead: `ChatList
 
 `sendMessage` should upload every `media` item and return, and later fetch, the message with `media` pointing at the stored files. Hosts that only handle photos can keep reading and returning `imageUrl`: the bubble and viewer fall back to it, but videos in the album are then lost. `messageMedia(message)` gives a message's album either way. Tapping an item opens the full-screen viewer, where photos zoom and pan and videos play with their own controls.
 
+Videos are always compressed in the browser before they are handed to `sendMessage`: re-encoded with WebCodecs (through [mediabunny](https://mediabunny.dev), loaded on first use) to MP4 at most 1280 px on the long side and 30 fps. Send closes the dialog at once; the message's bubble shows "Compressing… N%", then "Uploading… N%" from your `onProgress`. Albums compress one after another. A video under 1 MB, one the browser can't encode, or one that would lose a track or shrink by less than 10% goes out as picked. In the message `sendMessage` receives, a compressed video's `media` url is a `blob:` url of its own holding the `video/mp4` copy (the bubble keeps showing the picked original); read it during `sendMessage`, as it is released once the send succeeds, and kept for a retry when it fails. "File" sends anything as is, videos included.
+
 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.
@@ -175,18 +178,6 @@ 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.
@@ -235,7 +226,6 @@ 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). |
 

package/dist/chat.css

@@ -203,7 +203,9 @@
     --color-chat-surface: var(--color-surface-variant);
     --color-chat-surface-3: var(--color-surface-variant-3);
     --color-chat-on-background: var(--color-on-surface);
+    --color-chat-on-surface: var(--color-on-surface-variant);
     --color-chat-primary: var(--color-primary);
+    --color-chat-secondary: var(--color-secondary-600);
     --color-chat-outline-variant: var(--color-outline-variant);
     --color-chat-warning: var(--color-warning);
     --color-chat-error: var(--color-error);
@@ -802,11 +804,6 @@
     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);
@@ -1087,10 +1084,6 @@
     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);
   }
@@ -1187,6 +1180,10 @@
     width: calc(var(--spacing) * 60.5);
   }
 
+  :where(.vue-chat, .vue-chat *).w-64 {
+    width: calc(var(--spacing) * 64);
+  }
+
   :where(.vue-chat, .vue-chat *).w-70 {
     width: calc(var(--spacing) * 70);
   }
@@ -1239,6 +1236,10 @@
     max-width: 60%;
   }
 
+  :where(.vue-chat, .vue-chat *).max-w-\[calc\(100vw-2rem\)\] {
+    max-width: calc(100vw - 2rem);
+  }
+
   :where(.vue-chat, .vue-chat *).max-w-dvw {
     max-width: 100dvw;
   }
@@ -1492,6 +1493,10 @@
     justify-content: flex-start;
   }
 
+  :where(.vue-chat, .vue-chat *).justify-start\! {
+    justify-content: flex-start !important;
+  }
+
   :where(.vue-chat, .vue-chat *).gap-0\.5\! {
     gap: calc(var(--spacing) * .5) !important;
   }
@@ -1524,10 +1529,6 @@
     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);
   }
@@ -1989,6 +1990,26 @@
     }
   }
 
+  :where(.vue-chat, .vue-chat *).bg-chat-primary\/12 {
+    background-color: var(--color-chat-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-chat-primary\/12 {
+      background-color: color-mix(in oklab, var(--color-chat-primary) 12%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-chat-secondary\/14 {
+    background-color: #2ac48424;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-chat-secondary\/14 {
+      background-color: color-mix(in oklab, var(--color-chat-secondary) 14%, transparent);
+    }
+  }
+
   :where(.vue-chat, .vue-chat *).bg-chat-success\/10 {
     background-color: #2ac4841a;
   }
@@ -2003,6 +2024,10 @@
     background-color: var(--color-chat-surface);
   }
 
+  :where(.vue-chat, .vue-chat *).bg-chat-surface-3 {
+    background-color: var(--color-chat-surface-3);
+  }
+
   :where(.vue-chat, .vue-chat *).bg-chat-surface\/0 {
     background-color: #0000;
   }
@@ -2033,10 +2058,6 @@
     }
   }
 
-  :where(.vue-chat, .vue-chat *).bg-current {
-    background-color: currentColor;
-  }
-
   :where(.vue-chat, .vue-chat *).bg-error {
     background-color: var(--color-error);
   }
@@ -2416,10 +2437,6 @@
     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);
   }
@@ -2452,6 +2469,10 @@
     padding-block: calc(var(--spacing) * 1.5);
   }
 
+  :where(.vue-chat, .vue-chat *).py-1\.5\! {
+    padding-block: calc(var(--spacing) * 1.5) !important;
+  }
+
   :where(.vue-chat, .vue-chat *).py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
@@ -2668,6 +2689,11 @@
     font-size: 12px !important;
   }
 
+  :where(.vue-chat, .vue-chat *).leading-4 {
+    --tw-leading: calc(var(--spacing) * 4);
+    line-height: calc(var(--spacing) * 4);
+  }
+
   :where(.vue-chat, .vue-chat *).leading-5 {
     --tw-leading: calc(var(--spacing) * 5);
     line-height: calc(var(--spacing) * 5);
@@ -2786,6 +2812,10 @@
     }
   }
 
+  :where(.vue-chat, .vue-chat *).text-chat-on-surface {
+    color: var(--color-chat-on-surface);
+  }
+
   :where(.vue-chat, .vue-chat *).text-chat-primary {
     color: var(--color-chat-primary);
   }
@@ -2794,6 +2824,10 @@
     color: var(--color-chat-primary) !important;
   }
 
+  :where(.vue-chat, .vue-chat *).text-chat-secondary {
+    color: var(--color-chat-secondary);
+  }
+
   :where(.vue-chat, .vue-chat *).text-chat-success {
     color: var(--color-chat-success);
   }
@@ -2885,10 +2919,6 @@
     opacity: .6;
   }
 
-  :where(.vue-chat, .vue-chat *).opacity-75 {
-    opacity: .75;
-  }
-
   :where(.vue-chat, .vue-chat *).opacity-100 {
     opacity: 1;
   }

package/dist/chunks/{Call-DR7geRXf.cjs → Call-3S9Gy7oj.cjs}

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
-const index = require("./index-Dg8cFrSc.cjs");
+const index = require("./index-BDGJSPbp.cjs");
 const core = require("@vueuse/core");
 const Avatar = require("primevue/avatar");
 const Button = require("primevue/button");
@@ -1152,4 +1152,4 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   }
 });
 exports.default = _sfc_main;
-//# sourceMappingURL=Call-DR7geRXf.cjs.map
+//# sourceMappingURL=Call-3S9Gy7oj.cjs.map