@ethora/chat-component 26.9.6 → 26.10.1

package/dist/components/RoomComponents/styled/StyledRoomComponents.d.ts

@@ -1,9 +1,16 @@
 import { default as React } from 'react';
+export declare const PREVIEW_NAME_PX = 16;
+export declare const PREVIEW_LINE_PX = 18;
+export declare const PREVIEW_BLOCK_MIN_PX: number;
 export declare const LastRoomMessageContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const LastRoomMessageName: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const LastRoomMessageName: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const LastRoomMessageText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-/** Thumbnail/icon + label for a media preview, flowing in the same line. */
-export declare const LastRoomMessageMedia: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+/** Line 2 when it carries an icon or thumbnail next to its label. */
+export declare const LastRoomMessageLine: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+/** Thumbnail/icon + label for a media preview, on the message line. */
+export declare const LastRoomMessageMedia: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: React.Ref<HTMLDivElement>;
+}, never>> & string;
 export declare const NewMessageMarker: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const LastMessageImg: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
 export declare const ShadeWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/VideoCalls/VideoCallSession.d.ts

@@ -20,6 +20,19 @@ interface VideoCallSessionProps {
     onConnected?: () => void;
     onError?: (message: string) => void;
     onHangup: () => void;
+    /** Request end-to-end encryption of the media for this call. */
+    e2ee?: boolean;
+    /** The shared media key (base64), delivered over OMEMO. May arrive late. */
+    e2eeKey?: string | null;
+    /** Host-supplied factory for the LiveKit E2EE worker (see VideoCallsConfig). */
+    e2eeWorkerFactory?: () => Worker;
+    /**
+     * A remote participant just joined the LiveKit room. The key owner uses this
+     * to re-send the E2EE media key over OMEMO: the newcomer is online now, so a
+     * peer who missed the ephemeral key at call start (e.g. woken by push) still
+     * receives it. See VideoCallOverlay.
+     */
+    onParticipantJoined?: () => void;
 }
 export declare const VideoCallSession: React.FC<VideoCallSessionProps>;
 export {};

package/dist/components/styled/FileCard.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+export interface FileCardProps {
+    /** Full file name; the card truncates it with an ellipsis. */
+    name: string;
+    /** Short parts shown under the name, joined with a middle dot. */
+    meta: Array<string | undefined>;
+    icon: React.ReactNode;
+    tone?: 'pdf' | 'neutral';
+    compact?: boolean;
+    onOpen: () => void;
+    title?: string;
+    'aria-label'?: string;
+}
+/**
+ * A file that is not an image or video: a tile with the type glyph, the name
+ * with an ellipsis, a small meta line and a download affordance. One click
+ * opens the file in the preview modal.
+ */
+declare const FileCard: React.ForwardRefExoticComponent<FileCardProps & React.RefAttributes<HTMLButtonElement>>;
+export default FileCard;

package/dist/components/styled/MediaSurface.d.ts

@@ -0,0 +1,50 @@
+import { default as React } from 'react';
+/** Frosted circle with a play triangle, centred on a video. */
+export declare const PlayBadge: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const DurationChip: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+/** Small "GIF" pill, bottom-left, on an animated picture. */
+export declare const GifChip: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export interface MediaSurfaceProps {
+    kind: 'image' | 'video';
+    /** Full-resolution URL. Empty while an outgoing upload has no URL yet. */
+    src: string;
+    /** Low-resolution preview, shown blurred until `src` has loaded. */
+    previewSrc?: string;
+    alt: string;
+    /** `fill` covers its positioned parent (album tile); `solo` sizes itself. */
+    variant: 'fill' | 'solo';
+    /** Natural size recorded on the attachment, when the storage kept it. */
+    dims?: {
+        width?: unknown;
+        height?: unknown;
+    };
+    /** Duration in seconds, shown as a chip on videos. */
+    duration?: string;
+    /** Outgoing upload: shimmer while the URL is pending. */
+    pending?: boolean;
+    /** CSS border-radius for the stage (per corner for album tiles). */
+    radius?: string;
+    /** Solo only: opens the preview. Omit for tiles, which own the click. */
+    onOpen?: () => void;
+    /** The opener exists but cannot act yet (no file URL): keeps the element tree stable. */
+    openDisabled?: boolean;
+    /** Clickable item: zoom cursor and hover zoom. Defaults to `Boolean(onOpen)`. */
+    interactive?: boolean;
+    /** Blur and dim the picture, used behind the "+N" count. */
+    blurred?: boolean;
+    /** MIME type of the file; `image/gif` makes the picture animate in place. */
+    mimetype?: string;
+    /** Show the play badge and duration chip on videos. Defaults to true. */
+    chrome?: boolean;
+    /** Sender's own picture (blob URL): shown sharp and at once, ahead of `src`. */
+    localSrc?: string;
+    /** 0 to 100 download progress of `src`, when known; otherwise a quiet sweep. */
+    loadProgress?: number;
+}
+/**
+ * The in-bubble picture of one media file: a shimmer while it loads, the
+ * preview blurred until the full file is decoded, a 180ms fade to the real
+ * image, and a self-contained unavailable state when it cannot be shown.
+ */
+declare const MediaSurface: React.FC<MediaSurfaceProps>;
+export default MediaSurface;

package/dist/components/styled/MessageImage.d.ts

@@ -4,16 +4,15 @@ interface CustomMessageImageProps {
     fileName: string;
     mimetype: string;
     locationPreview?: string;
-    /**
-     * Called only once the server itself says the file is gone (404/410),
-     * not merely when the <img> failed to load. The only known cause in
-     * practice is the file having been deleted from the Files panel without
-     * a matching message found locally to tombstone up front (see
-     * FilesPanel.tsx's handleDelete) - the caller uses this to flip the
-     * message to the normal "deleted" placeholder instead of leaving this
-     * broken-image card on screen.
-     */
-    onUnavailable?: () => void;
+    /** Natural size from the attachment, when the storage kept it. */
+    width?: number;
+    height?: number;
+    /** Sender's own blob URL, shown at once while the server copy loads. */
+    localUrl?: string;
 }
+/**
+ * A single picture in a bubble: its natural aspect ratio, sized to the
+ * pane's shared media width. A click opens the preview modal at this file.
+ */
 declare const CustomMessageImage: React.FC<CustomMessageImageProps>;
 export default CustomMessageImage;

package/dist/components/styled/SendInput.d.ts

@@ -1,12 +1,15 @@
 import { default as React } from 'react';
 import { IConfig, IMentionSpan } from '../../types/types';
+import { CaptionInput } from '../../helpers/caption';
 export interface SendInputProps {
     sendMessage: (message: string, mentions?: IMentionSpan[]) => void | Promise<void>;
     /**
      * Receives a `File[]` for picked attachments (one message, N files) and a
      * `Blob` for voice notes. Single files still arrive as a one-element array.
+     * Text typed with the files arrives as `caption` and is sent inside that
+     * same media message, so it can never land as a separate bubble.
      */
-    sendMedia: (data: File[] | File | Blob, type: string) => void | Promise<void>;
+    sendMedia: (data: File[] | File | Blob, type: string, caption?: CaptionInput) => void | boolean | Promise<void | boolean>;
     isLoading: boolean;
     editMessage?: string;
     config?: IConfig;
@@ -19,7 +22,7 @@ export interface SendInputProps {
     showPreview?: boolean;
     previewParser?: (text: string) => (string | JSX.Element)[];
     onSendMessage?: (message: string, mentions?: IMentionSpan[]) => void | Promise<void>;
-    onSendMedia?: (data: File[] | File | Blob, type: string) => void | Promise<void>;
+    onSendMedia?: (data: File[] | File | Blob, type: string, caption?: CaptionInput) => void | boolean | Promise<void | boolean>;
     placeholderText?: string;
     /** Disables the @-mention autocomplete (e.g. for a composer variant that
      * doesn't want it). Defaults to enabled. */
@@ -31,6 +34,13 @@ export interface SendInputProps {
      * live composers would otherwise overwrite each other's text.
      */
     disableDrafts?: boolean;
+    /**
+     * Take focus whenever the room list hands the composer a chat switch (a
+     * click on a room row, even one that is already open). Set on the main
+     * composer only: a second composer on the same screen must not steal focus.
+     * Mobile never requests it, so the keyboard does not pop up uninvited.
+     */
+    focusOnRoomSwitch?: boolean;
 }
 declare const SendInput: React.FC<SendInputProps>;
 export default SendInput;

package/dist/components/styled/StyledComponents.d.ts

@@ -42,21 +42,88 @@ export declare const UserName: import('styled-components/dist/types').IStyledCom
 export declare const InputContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const MessageInput: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
 export declare const SendButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+/**
+ * How far a reaction row hangs below the bubble's bottom edge, in px. The row
+ * straddles the edge, so half of it (12px) is inside the bubble and the other
+ * half is the only space the message row reserves below it.
+ */
+export declare const REACTION_HANG_PX = 12;
+/** Clear space between the lowest reaction chip and the next bubble, in px. */
+export declare const REACTION_CLEAR_PX = 4;
+/** Vertical gap below a message that is followed by the same sender, in px. */
+export declare const RUN_GAP_PX = 2;
+/** Vertical gap below the last message of a run, before the next sender, in px. */
+export declare const SENDER_GAP_PX = 8;
+/** Side gutter of a message row, so a bubble's tail is not clipped, in px. */
+export declare const MESSAGE_ROW_GUTTER_PX = 6;
 export declare const CustomMessageContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isUser: boolean;
     $reply: boolean;
-    $reaction: boolean;
+    /** The bubble carries a reaction row that hangs below its bottom edge. */
+    $reaction?: boolean;
+    /** False when the next message comes from the same sender (a run). */
+    $lastInGroup?: boolean;
+    /**
+     * How far the reaction chips hang below the bubble, in px, as measured by
+     * MessageReaction (one row is REACTION_HANG_PX). Only used with $reaction.
+     */
+    $reactionHang?: number;
 }>> & string;
+/**
+ * Visual inset between a bubble's edge and what it holds, in px. A bubble with
+ * a 1px border (anyone else's message) takes one px less of padding so the
+ * visual inset still matches.
+ *
+ * Media bubbles (pictures, videos, file cards, voice notes) use 6px on every
+ * side, the compact Telegram-style inset that the media block aligns to. Text
+ * bubbles use 8px vertical and 12px horizontal.
+ */
+export declare const MEDIA_BUBBLE_INSET_PX = 6;
+export declare const TEXT_BUBBLE_INSET_Y_PX = 8;
+export declare const TEXT_BUBBLE_INSET_X_PX = 12;
+/** Bubble corner radius; media inside it is concentric (radius minus inset). */
+export declare const BUBBLE_RADIUS_PX = 18;
+export declare const MEDIA_RADIUS_PX: number;
+/** Glass time pill over media: how far it sits inside the media edge, in px. */
+export declare const MEDIA_TIME_PILL_OFFSET_PX = 8;
+/** Padding (CSS shorthand value) that yields the visual inset, net of the border. */
+export declare const bubblePadding: (props: {
+    $isUser: boolean;
+    $deleted: boolean;
+    $media?: boolean;
+}) => string;
+/** Corner radius where a tail attaches: the bottom corner on the tail side. */
+export declare const TAIL_CORNER_RADIUS_PX = 4;
+/** Tail box: 10px wide, 12px tall, 6px of it outside the bubble edge. */
+export declare const TAIL_WIDTH_PX = 10;
+export declare const TAIL_HEIGHT_PX = 12;
 export declare const CustomMessageBubble: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isUser: boolean;
     $deleted: boolean;
+    /** The bubble carries a media block (pictures, videos, cards, voice notes). */
+    $media?: boolean;
+    /** Its only media is one solo picture or video: the bubble hugs it. */
+    $solo?: boolean;
+    /** Last of its sender's run, and not a media-only bubble: it gets the tail. */
+    $tail?: boolean;
 }>> & string;
 export declare const CustomMessageText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const CustomUserName: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     $isUser: boolean;
     $color?: string;
+    /** Inside a media bubble (6px inset): 4px more so it lines up with the caption. */
+    $media?: boolean;
+}>> & string;
+export declare const CustomMessageTimestamp: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    /** Media bubble: the row sits under the media with 0 8px 4px padding. */
+    $media?: boolean;
+    /** Text bubble: the time floats at the end of the last line of text. */
+    $inline?: boolean;
+    /** Glass pill over the media's bottom right corner (media-only bubbles). */
+    $overlay?: boolean;
+    /** Whether the bubble has its 1px border (it shifts the pill by one px). */
+    $bordered?: boolean;
 }>> & string;
-export declare const CustomMessageTimestamp: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const CustomMessagePhoto: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
 export declare const CustomMessagePhotoContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const CustomSystemMessage: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/styled/StyledInputComponents/MediaComponents.d.ts

@@ -1,33 +1,45 @@
-export declare const MediaLoadingSkeleton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $width?: number | string;
-    $height?: number | string;
-}>> & string;
-export declare const Container: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const FullScreenImage: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
-export declare const ModalContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ButtonContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const IconButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const UnsupportedContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const BackgroundFile: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const FileInformation: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const FileName: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const FileSizeContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const FileSize: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+import { default as React } from 'react';
+/**
+ * Loading spinner rules shared by the media loading states. The spinner is
+ * a fixed-pixel circle with `flex: none`, so a flex parent (the upload scrim,
+ * a tiny album tile) cannot squash it into an oval. Whether it is drawn at
+ * all is decided by a container query on the box it sits in, see below.
+ */
+export declare const MEDIA_SPINNER_PX = 24;
+/** Boxes smaller than this (on either side) get the shimmer only, no spinner. */
+export declare const MEDIA_SPINNER_MIN_BOX_PX = 48;
+export declare const MediaLoadingSkeleton: React.FC<{
+    $width?: number;
+    $height?: number;
+}>;
+/** Standalone spinner for a loading overlay. Hidden inside boxes under the min size. */
+export declare const MediaSpinner: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const Container: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FullScreenImage: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
+export declare const ModalContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ButtonContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const IconButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const UnsupportedContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const BackgroundFile: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FileInformation: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FileName: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const FileSizeContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FileSize: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 /** Wraps every attachment of one message. Single-file messages keep the
  *  old, un-gapped look because there is nothing to separate them from. */
-export declare const AttachmentStack: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const AttachmentGrid: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const AttachmentStack: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const AttachmentGrid: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $columns: number;
 }>> & string;
-export declare const AttachmentTile: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const PdfContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+export declare const AttachmentTile: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const PdfContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $compact: boolean;
 }>> & string;
-export declare const PdfThumbnailFrame: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const PdfThumbnailFrame: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $compact: boolean;
 }>> & string;
 /** Sits on the thumbnail while pdf.js parses so the row does not pop in. */
-export declare const PdfThumbnailSkeleton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const PdfInformation: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const PdfMetaRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const PdfBadge: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const PdfThumbnailSkeleton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PdfInformation: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PdfMetaRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PdfBadge: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

package/dist/components/styled/UnsupportedType.d.ts

@@ -6,5 +6,6 @@ interface FileDownloadProps {
     size?: string;
     locationPreview?: string;
 }
+/** Generic file in a bubble, as a card. A missing preview falls back to the type glyph. */
 declare const FileDownload: React.FC<FileDownloadProps>;
 export default FileDownload;

package/dist/components/styled/VideoMessage.d.ts

@@ -1,14 +1,19 @@
 import { default as React } from 'react';
+/** Full-size player used by the preview modal. Kept here with the bubble video. */
+export declare const FullScreenVideo: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, never>> & string;
 interface CustomMessageVideoProps {
     fileName: string;
     fileURL: string;
     mimetype: string;
+    /** Length in seconds, when the attachment recorded one. */
+    duration?: string;
+    width?: number;
+    height?: number;
 }
-export declare const Container: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const FullScreenVideo: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, never>> & string;
-export declare const FixedSizeVideo: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, never>> & string;
-export declare const ModalContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ButtonContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const IconButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+/**
+ * A single video in a bubble: the first frame with a glass play button and,
+ * when known, a duration chip. A click opens the preview modal, which holds
+ * the controls.
+ */
 declare const CustomMessageVideo: React.FC<CustomMessageVideoProps>;
 export default CustomMessageVideo;

package/dist/e2ee/callKey.d.ts

@@ -0,0 +1,32 @@
+import { Element } from 'ltx';
+/** Namespace of the <call-key> signal element carried inside the SCE envelope. */
+export declare const NS_CALL_E2EE = "ethora:call:e2ee:0";
+/**
+ * A fresh 256-bit media key for one call, as a base64 string. A new key per
+ * call gives forward secrecy between calls: a key recovered from one call
+ * cannot open the next. The string is fed verbatim to both peers'
+ * `ExternalE2EEKeyProvider.setKey`, which HKDFs it into the frame key.
+ */
+export declare function generateCallKey(): string;
+/** The <call-key> element that rides inside the OMEMO SCE envelope. */
+export declare function callKeyElement(callId: string, key: string): Element;
+/**
+ * Hands `key` to every member of `roomJid`, end-to-end encrypted via OMEMO so
+ * the server never sees it.
+ *
+ * Returns false (a no-op) unless E2EE is enabled for the app AND the backend
+ * marked the room `e2ee`, or when no member has published an OMEMO device yet
+ * (in which case the caller falls back to a non-E2EE call rather than
+ * failing). Returns true once the encrypted key is on its way to at least one
+ * recipient device.
+ */
+export declare function distributeCallKey(roomJid: string, callId: string, key: string): Promise<boolean>;
+/**
+ * Reads a decrypted <call-key> off a stanza the OMEMO seam has already
+ * rewritten in place (so the element sits as an ordinary child). Returns
+ * undefined when the stanza is not a call-key signal.
+ */
+export declare function parseCallKey(stanza: Element): {
+    callId: string;
+    key: string;
+} | undefined;

package/dist/e2ee/fileEnvelope.d.ts

@@ -1,3 +1,4 @@
+import { IMentionSpan } from '../types/types';
 /** What the server must not learn, and the receiver needs to render. */
 export interface FileEnvelopeMeta {
     mimetype: string;
@@ -37,12 +38,22 @@ export declare function openSealedFile(ciphertext: Uint8Array, keyMaterial: stri
     meta: FileEnvelopeMeta;
     bytes: Uint8Array;
 };
+/** What a sealed media <body> carries besides the keys. */
+export interface SealedMediaPayload {
+    keys: string[];
+    /** The text typed with the files. Sealed here, never on <data>. */
+    caption?: string;
+    captionMentions?: IMentionSpan[];
+}
 /**
- * Pull the attachment keys out of a decrypted media <body>.
+ * Pull the attachment keys (and the caption, when there is one) out of a
+ * decrypted media <body>.
  *
- * The sender put `{v:1,keys:[...]}` there instead of the usual literal
- * "media" (see sendMediaMessage). Returns undefined for anything else, so
- * an ordinary media message - or one from a build that predates sealing -
- * falls through untouched.
+ * The sender put `{v:1,keys:[...],caption?,captionMentions?}` there instead of
+ * the usual literal "media" (see sendMediaMessage). Returns undefined for
+ * anything else, so an ordinary media message - or one from a build that
+ * predates sealing - falls through untouched.
  */
+export declare function parseSealedMediaPayload(body?: string): SealedMediaPayload | undefined;
+/** The attachment keys out of a sealed media <body>; see parseSealedMediaPayload. */
 export declare function parseSealedMediaBody(body?: string): string[] | undefined;

package/dist/e2ee/omemo.d.ts

@@ -105,6 +105,24 @@ export declare class Omemo {
      * the room's echo by it.
      */
     encryptGroupMessage(roomJid: string, members: string[], content: Element[], id: string, cleartext?: Element[]): Promise<Element>;
+    /**
+     * Sends an ephemeral, end-to-end encrypted control signal to a room's
+     * members. Same OMEMO envelope as `encryptGroupMessage`, but it is NOT a
+     * chat message: no fallback <body>, no <store> hint, and MAM/carbons are
+     * asked to drop it (`no-store` / `no-permanent-store` / `no-copy`).
+     *
+     * The use case is handing a LiveKit call's media key to the other
+     * participants without the server - or anyone relaying the stanza - ever
+     * seeing it. The payload rides inside the SCE envelope exactly like a
+     * message body would, so the server observes ciphertext only.
+     *
+     * Returns true when at least one recipient device was reachable (so the
+     * caller knows the key actually went out), false when nobody in the room
+     * has published an OMEMO device yet. Unlike `encryptGroupMessage` it does
+     * not throw on an empty recipient set: a call simply falls back to plaintext
+     * media rather than failing, and the caller decides what to surface.
+     */
+    sendGroupSignal(roomJid: string, members: string[], content: Element[], id: string): Promise<boolean>;
     /**
      * Empty OMEMO message: completes a session the peer started. It targets one
      * device, so it goes straight to that member's real JID rather than through

package/dist/firebase-messaging-sw.js

@@ -151,8 +151,25 @@ async function checkAssetAvailability(url) {
   }
 }
 
+// `<appId>_<userId>` (24-hex ids, or an appId and a uuid) is a machine id,
+// never something to put in a notification title.
+const OPAQUE_ID_RE =
+  /^(?:[0-9a-f]{24}(?:_[0-9a-f]{24})?|[a-z0-9]+_(?:[0-9a-f]{24}|[0-9a-f-]{36})(?:_[0-9a-z-]+)*)$/i;
+
+function isOpaqueId(value) {
+  const text = String(value || '').trim();
+  return !!text && OPAQUE_ID_RE.test(text.split('@')[0]);
+}
+
 function pickTitle(raw = {}, data = {}, notification = {}) {
-  return notification.title || raw.title || data.title || 'New Message';
+  const title = notification.title || raw.title || data.title || '';
+  return title && !isOpaqueId(title) ? title : 'New Message';
+}
+
+// One notification per chat: a newer message in the same room replaces it.
+function roomTag(data = {}) {
+  const jid = String(data.jid || '').split('@')[0];
+  return jid ? `ethora-room-${jid}` : '';
 }
 
 function pickBody(raw = {}, data = {}, notification = {}) {
@@ -449,8 +466,8 @@ async function handlePush(raw = {}, source = 'push') {
     icon,
     badge,
     image,
-    tag: isCall ? `call:${callId || dedupKey}` : dedupKey,
-    renotify: isCall,
+    tag: isCall ? `call:${callId || dedupKey}` : roomTag(data) || dedupKey,
+    renotify: isCall || !!roomTag(data),
     requireInteraction: isCall,
     // Spread the ORIGINAL payload first so the click handler's isCallPush()
     // sees the full call fields (callId/callToken/kind/room); our routing

package/dist/{handleCopyClick-B70vLjJD.js → handleCopyClick-DGaZhy_u.js}

@@ -1,4 +1,4 @@
-import { x as e, z as t } from "./main-rJpE4hh-.js";
+import { E as e, G as t } from "./main-CUB_w8AZ.js";
 const i = e.div`
   display: flex;
   flex-direction: column;

package/dist/helpers/albumLayout.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Geometry for a multi-media album bubble. Pure data so the grid component
+ * stays a dumb renderer and the layout rules can be tested without a DOM.
+ *
+ *   1 item   full width, 4:3
+ *   2 items  side by side, square cells
+ *   3 items  one large cell on the left, two stacked on the right
+ *   4 items  2 x 2
+ *   5+ items 2 x 2 showing the first four, the last cell carries "+N"
+ */
+/** Gap between neighbouring tiles. */
+export declare const ALBUM_GAP_PX = 3;
+/** Radius of a tile corner that sits on the bubble's own corner. */
+export declare const ALBUM_OUTER_RADIUS_PX = 12;
+/** Radius of every other tile corner, the ones that face a neighbour. */
+export declare const ALBUM_INNER_RADIUS_PX = 3;
+export interface AlbumCellPlacement {
+    /** CSS `grid-column` value. */
+    column: string;
+    /** CSS `grid-row` value. */
+    row: string;
+}
+export interface AlbumLayout {
+    kind: 'full' | 'pair' | 'hero' | 'quad';
+    /** Number of tiles actually drawn. */
+    visible: number;
+    /** Items folded into the "+N" overlay on the last visible tile. */
+    hidden: number;
+    /** CSS `grid-template-columns`. */
+    columns: string;
+    /** CSS `grid-template-rows`. */
+    rows: string;
+    /** CSS `aspect-ratio` of the whole grid. */
+    aspectRatio: string;
+    /** One entry per visible tile, in order. */
+    placements: AlbumCellPlacement[];
+}
+/** Layout for `count` media tiles. Counts below 1 are treated as 1. */
+export declare const getAlbumLayout: (count: number) => AlbumLayout;
+/**
+ * Which corners of one tile lie on the bubble's outer edge. Only those get
+ * the large radius; corners that face a neighbour get the small inner one.
+ */
+export interface TileCorners {
+    topLeft: boolean;
+    topRight: boolean;
+    bottomRight: boolean;
+    bottomLeft: boolean;
+}
+/** Outer-corner flags for the tile at `position` (0-based) of `layout`. */
+export declare const getTileCorners: (layout: AlbumLayout, position: number) => TileCorners;
+/** CSS `border-radius` shorthand (TL TR BR BL) for one tile. */
+export declare const getTileBorderRadius: (layout: AlbumLayout, position: number) => string;