@linktr.ee/messaging-react 1.25.1 → 1.26.1-rc-1776055454

package/dist/index-Dj9rqWcU.js

@@ -0,0 +1,69 @@
+var o = Object.defineProperty;
+var g = (n, a, c) => a in n ? o(n, a, { enumerable: !0, configurable: !0, writable: !0, value: c }) : n[a] = c;
+var l = (n, a, c) => g(n, typeof a != "symbol" ? a + "" : a, c);
+function R(n) {
+  return class extends n {
+    constructor() {
+      super(...arguments);
+      l(this, "_playedRanges", []);
+      l(this, "_currentPlayedRange", null);
+      l(this, "_RANGE_EPSILON", 0.5);
+      l(this, "_seeking", !1);
+    }
+    connectedCallback() {
+      super.connectedCallback && super.connectedCallback(), this.addEventListener("play", () => this.onPlaybackStart({ time: this.currentTime })), this.addEventListener("pause", () => this.onPlaybackStop({ time: this.currentTime })), this.addEventListener("ended", () => this.onPlaybackStop({ time: this.currentTime })), this.addEventListener("seeking", () => this.onSeeking()), this.addEventListener("seeked", () => this.onSeeked({ time: this.currentTime }));
+    }
+    onPlaybackStart(e = {}) {
+      this._seeking = !1;
+      const { time: t } = e, s = typeof t == "number" ? t : this.currentTime;
+      this._currentPlayedRange || (this._currentPlayedRange = { start: s, end: s });
+    }
+    onSeeking() {
+      this._seeking = !0, this._commitCurrentRange();
+    }
+    onSeeked(e = {}) {
+      this._seeking = !1;
+      const { time: t } = e, s = typeof t == "number" ? t : this.currentTime;
+      this._currentPlayedRange = { start: s, end: s };
+    }
+    onPlaybackStop(e = {}) {
+      const { time: t } = e, s = typeof t == "number" ? t : this.currentTime;
+      this._commitCurrentRange(s);
+    }
+    _commitCurrentRange(e) {
+      if (!this._currentPlayedRange) return;
+      typeof e == "number" && (this._currentPlayedRange.end = e);
+      const { start: t, end: s } = this._currentPlayedRange;
+      this._currentPlayedRange = null, this.addPlayedRange(t, s);
+    }
+    addPlayedRange(e, t) {
+      if (e >= t) return;
+      const s = this._RANGE_EPSILON, h = [...this._playedRanges, { start: e, end: t }];
+      h.sort((i, r) => i.start - r.start);
+      const d = [];
+      for (const i of h) {
+        if (!d.length) {
+          d.push({ ...i });
+          continue;
+        }
+        const r = d[d.length - 1];
+        i.start <= r.end + s ? (r.start = Math.min(r.start, i.start), r.end = Math.max(r.end, i.end)) : d.push({ ...i });
+      }
+      this._playedRanges = d;
+    }
+    get played() {
+      const e = this.currentTime;
+      return !this.paused && !this._currentPlayedRange && typeof e == "number" && (this._currentPlayedRange = { start: e, end: e }), this._currentPlayedRange && typeof e == "number" && (e > this._currentPlayedRange.end && (this._currentPlayedRange.end = e), this.addPlayedRange(this._currentPlayedRange.start, this._currentPlayedRange.end)), this._playedRanges.length ? u(this._playedRanges.map((t) => [t.start, t.end])) : u([[0, 0]]);
+    }
+  };
+}
+function u(n) {
+  return Object.defineProperties(n, {
+    start: { value: (a) => n[a][0] },
+    end: { value: (a) => n[a][1] }
+  }), n;
+}
+export {
+  R as M
+};
+//# sourceMappingURL=index-Dj9rqWcU.js.map

package/dist/index-Dj9rqWcU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-Dj9rqWcU.js","sources":["../../../node_modules/media-played-ranges-mixin/dist/index.js"],"sourcesContent":["function MediaPlayedRangesMixin(Base) {\n  return class MediaPlayedRanges extends Base {\n    _playedRanges = [];\n    _currentPlayedRange = null;\n    _RANGE_EPSILON = 0.5;\n    _seeking = false;\n    connectedCallback() {\n      if (super.connectedCallback) super.connectedCallback();\n      this.addEventListener(\"play\", () => this.onPlaybackStart({ time: this.currentTime }));\n      this.addEventListener(\"pause\", () => this.onPlaybackStop({ time: this.currentTime }));\n      this.addEventListener(\"ended\", () => this.onPlaybackStop({ time: this.currentTime }));\n      this.addEventListener(\"seeking\", () => this.onSeeking());\n      this.addEventListener(\"seeked\", () => this.onSeeked({ time: this.currentTime }));\n    }\n    onPlaybackStart(param = {}) {\n      this._seeking = false;\n      const { time } = param;\n      const t = typeof time === \"number\" ? time : this.currentTime;\n      if (!this._currentPlayedRange) {\n        this._currentPlayedRange = { start: t, end: t };\n      }\n    }\n    onSeeking() {\n      this._seeking = true;\n      this._commitCurrentRange();\n    }\n    onSeeked(param = {}) {\n      this._seeking = false;\n      const { time } = param;\n      const t = typeof time === \"number\" ? time : this.currentTime;\n      this._currentPlayedRange = { start: t, end: t };\n    }\n    onPlaybackStop(param = {}) {\n      const { time } = param;\n      const t = typeof time === \"number\" ? time : this.currentTime;\n      this._commitCurrentRange(t);\n    }\n    _commitCurrentRange(time) {\n      if (!this._currentPlayedRange) return;\n      if (typeof time === \"number\") {\n        this._currentPlayedRange.end = time;\n      }\n      const { start, end } = this._currentPlayedRange;\n      this._currentPlayedRange = null;\n      this.addPlayedRange(start, end);\n    }\n    addPlayedRange(start, end) {\n      if (start >= end) return;\n      const EPS = this._RANGE_EPSILON;\n      const allRanges = [...this._playedRanges, { start, end }];\n      allRanges.sort((a, b) => a.start - b.start);\n      const merged = [];\n      for (const range of allRanges) {\n        if (!merged.length) {\n          merged.push({ ...range });\n          continue;\n        }\n        const last = merged[merged.length - 1];\n        if (range.start <= last.end + EPS) {\n          last.start = Math.min(last.start, range.start);\n          last.end = Math.max(last.end, range.end);\n        } else {\n          merged.push({ ...range });\n        }\n      }\n      this._playedRanges = merged;\n    }\n    get played() {\n      const time = this.currentTime;\n      if (!this.paused && !this._currentPlayedRange && typeof time === \"number\") {\n        this._currentPlayedRange = { start: time, end: time };\n      }\n      if (this._currentPlayedRange && typeof time === \"number\") {\n        if (time > this._currentPlayedRange.end) {\n          this._currentPlayedRange.end = time;\n        }\n        this.addPlayedRange(this._currentPlayedRange.start, this._currentPlayedRange.end);\n      }\n      if (!this._playedRanges.length) {\n        return createTimeRangesObj([[0, 0]]);\n      }\n      return createTimeRangesObj(this._playedRanges.map((r) => [r.start, r.end]));\n    }\n  };\n}\nfunction createTimeRangesObj(ranges) {\n  Object.defineProperties(ranges, {\n    start: { value: (i) => ranges[i][0] },\n    end: { value: (i) => ranges[i][1] }\n  });\n  return ranges;\n}\nexport {\n  MediaPlayedRangesMixin\n};\n"],"names":["MediaPlayedRangesMixin","Base","__publicField","param","time","t","start","end","EPS","allRanges","a","b","merged","range","last","createTimeRangesObj","r","ranges","i"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/index.d.ts

@@ -20,6 +20,8 @@ export declare interface ActionButtonProps extends default_2.ButtonHTMLAttribute
 
 declare type AgeSafetySystemType = 'SYSTEM_AGE_SAFETY_BLOCKED';
 
+export declare type AttachmentSourceType = 'image' | 'audio' | 'video' | 'document';
+
 /**
  * Avatar component that displays a user image or colored initial fallback
  */
@@ -77,6 +79,20 @@ export declare interface ChannelListProps {
      * channel belongs in the current list before inserting it.
      */
     onAddedToChannel?: ChannelListProps_2['onAddedToChannel'];
+    /**
+     * Client-side filter applied before rendering the channel list.
+     * Websocket events can add channels to the list that bypass server-side
+     * query filters. Use this to enforce visibility rules that can't be
+     * automatically derived from the filters prop (e.g. $or conditions).
+     *
+     * @example
+     * // Hide channels where the visitor hasn't sent a message yet,
+     * // but keep legacy channels that predate the has_visitor_message field
+     * channelRenderFilterFn={(channels) =>
+     *   channels.filter(ch => ch.data?.has_visitor_message !== false)
+     * }
+     */
+    channelRenderFilterFn?: (channels: Channel[]) => Channel[];
     /**
      * Sort order for the channel list query.
      * Defaults to `{ last_message_at: -1 }` (most recent first).
@@ -95,7 +111,7 @@ export declare const ChannelView: default_2.NamedExoticComponent<ChannelViewProp
  * Props that MessagingShell passes through to ChannelView.
  * ChannelViewProps is the source of truth for these props.
  */
-declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onDeleteConversationClick' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'messageMetadata' | 'onMessageSent' | 'showStarButton' | 'chatbotVotingEnabled' | 'renderChannelBanner' | 'customProfileContent' | 'customChannelActions' | 'renderMessage'>;
+declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onDeleteConversationClick' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'messageMetadata' | 'onMessageSent' | 'showStarButton' | 'chatbotVotingEnabled' | 'renderChannelBanner' | 'customProfileContent' | 'customChannelActions' | 'renderMessage' | 'onAttachmentUnlock' | 'onAttachmentDownload'>;
 
 /**
  * ChannelView component props
@@ -200,6 +216,17 @@ export declare interface ChannelViewProps {
      * )}
      */
     renderMessage?: (messageNode: React.ReactElement, message: LocalMessage) => React.ReactNode;
+    /**
+     * Called when the visitor clicks Unlock on a locked attachment message.
+     * Receives the message and channel. Show checkout, confirm payment, fetch
+     * the unlocked URL. `attachment_source` must NOT be stored on the Stream message metadata.
+     * The card shows a loading state for the full duration of the promise.
+     */
+    onAttachmentUnlock?: (message: LocalMessage, channel: Channel) => Promise<string>;
+    /**
+     * Called when the visitor clicks Download on an unlocked attachment message.
+     */
+    onAttachmentDownload?: (message: LocalMessage, channel: Channel) => void;
 }
 
 declare type DmAgentSystemType = 'SYSTEM_DM_AGENT_PAUSED' | 'SYSTEM_DM_AGENT_RESUMED';
@@ -239,18 +266,50 @@ export declare interface FaqListProps {
  */
 export declare const formatRelativeTime: (date: Date) => string;
 
-declare type MessageCustomType = 'MESSAGE_TIP' | 'MESSAGE_PAID' | 'MESSAGE_CHATBOT' | AgeSafetySystemType | DmAgentSystemType;
+/** Check if a message is a locked attachment */
+export declare const isAttachmentMessage: (message: LocalMessage) => boolean;
+
+export declare const LockedAttachmentCard: default_2.FC<LockedAttachmentCardProps>;
+
+export declare interface LockedAttachmentCardProps {
+    title: string;
+    amountText?: string;
+    thumbnail?: string;
+    /**
+     * The unlocked media URL. When undefined the card is in locked state.
+     * Typically undefined while the source is being fetched post-purchase.
+     */
+    source?: string;
+    /** MIME type of the attachment (e.g. 'video/mp4', 'audio/mpeg', 'image/jpeg', 'application/pdf'). Determines the icon and player behaviour. */
+    mimeType: string;
+    detail?: string;
+    /**
+     * Called when the visitor clicks Unlock.
+     * Omit to hide the Unlock button (e.g. creator-side views).
+     */
+    onUnlock?: () => void;
+    /** Called when the visitor clicks Download on an unlocked card. */
+    onDownload?: () => void;
+    /** Shows a loading spinner on the unlock button while the source is being fetched. */
+    loading?: boolean;
+    /**
+     * Payment has been completed but the source URL hasn't been resolved yet.
+     * Shows a "Preparing…" state instead of the lock overlay.
+     */
+    isPurchased?: boolean;
+}
+
+declare type MessageCustomType = 'MESSAGE_TIP' | 'MESSAGE_PAID' | 'MESSAGE_CHATBOT' | 'MESSAGE_ATTACHMENT' | AgeSafetySystemType | DmAgentSystemType;
 
-/**
- * Message metadata for paid messaging and chatbot flows.
- * Used to identify message types and payment status.
- */
 export declare interface MessageMetadata {
     custom_type?: MessageCustomType;
-    amount_text?: string;
-    payment_status?: string;
-    payment_intent_id?: string;
     listing_id?: string;
+    amount_text?: string;
+    payment_status?: PaymentStatus;
+    attachment_title?: string;
+    attachment_mime_type?: string;
+    attachment_thumbnail?: string;
+    attachment_detail?: string;
 }
 
 export declare const MessageVoteButtons: default_2.FC<MessageVoteButtonsProps>;
@@ -346,6 +405,17 @@ export declare interface MessagingShellProps extends ChannelViewPassthroughProps
      * Filters for channel list. Passed through to StreamChat ChannelList.
      */
     filters?: ChannelFilters;
+    /**
+     * Client-side filter applied before rendering the channel list.
+     * Websocket events can add channels to the list that bypass server-side
+     * query filters. Use this to enforce visibility rules client-side.
+     *
+     * @example
+     * channelRenderFilterFn={(channels) =>
+     *   channels.filter(ch => ch.data?.has_visitor_message !== false)
+     * }
+     */
+    channelRenderFilterFn?: (channels: Channel[]) => Channel[];
     /**
      * Custom empty state indicator component to render when the channel list is empty.
      * Useful for showing a custom empty state indicator when the channel list is empty.
@@ -406,6 +476,12 @@ export declare interface ParticipantSource {
     loading?: boolean;
 }
 
+/**
+ * Message metadata for paid messaging and chatbot flows.
+ * Used to identify message types and payment status.
+ */
+declare type PaymentStatus = 'pending' | 'paid' | 'failed' | 'refunded';
+
 /**
  * Hook that wraps Stream Chat reactions to provide toggle-style
  * upvote/downvote behavior on a message.