@linktr.ee/messaging-react 3.6.2 → 3.7.0-rc-1783305846

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CPCX_7gP.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BgzqZorr.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -1237,8 +1237,20 @@ export declare const MessagingProvider: default_2.FC<MessagingProviderProps>;
 export declare interface MessagingProviderProps {
     children: React.ReactNode;
     user: MessagingUser | null;
-    serviceConfig: Omit<StreamChatServiceConfig, 'apiKey'>;
-    apiKey: string;
+    /**
+     * An already-constructed Stream client. When provided it takes precedence
+     * over `apiKey`: the provider renders `<Chat>` against this exact instance
+     * and does NOT create a StreamChatService or call `connectUser` — the caller
+     * owns the client's connection lifecycle. This is the seam for offline/dev
+     * (`createMockMessagingClient` from `@linktr.ee/messaging-react/testing`) and
+     * for tests, so consumers render the real UI instead of forking it.
+     * `apiKey`/`serviceConfig` are ignored while `client` is set.
+     */
+    client?: StreamChat;
+    /** Required unless `client` is provided. */
+    serviceConfig?: Omit<StreamChatServiceConfig, 'apiKey'>;
+    /** Required unless `client` is provided. */
+    apiKey?: string;
     capabilities?: MessagingCapabilities;
     debug?: boolean;
 }

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as d, m as p, n as v, o as C, p as A, q as k, s as F, t as P, u as b, v as f, w as x, x as y, y as S, z as q, B as z, D as B, E as D, G as E } from "./index-bPlX3Oo5.js";
+import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as d, m as p, n as v, o as C, p as A, q as k, s as F, t as P, u as b, v as f, w as x, x as y, y as S, z as q, B as z, D as B, E as D, G as E } from "./index-2HMjfjM-.js";
 export {
   e as ActionButton,
   t as Avatar,

package/dist/testing.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const M=require("stream-chat"),w=600;function b({currentUser:e,participant:a,messages:u=[],channelId:h="mock-dm",onSend:d}){const s=new M.StreamChat("mock-api-key",{allowServerSideConnect:!0});s.connectUser=async()=>({me:e}),s.disconnectUser=async()=>{},s.userID=e.id,s.user=e;const m=`messaging:${h}`,l=(t,c)=>{const r=t.from==="me"?e:a,n=new Date(Date.now()-(u.length-c)*6e4).toISOString();return{id:t.id??`mock-msg-${c}`,text:t.text??"",type:"regular",html:t.text?`<p>${t.text}</p>`:"",user:r,attachments:t.attachments??[],latest_reactions:[],own_reactions:[],reaction_counts:{},reaction_scores:{},reply_count:0,status:"received",cid:m,created_at:n,updated_at:n,mentioned_users:[],...t.metadata?{metadata:t.metadata}:{}}},i=u.map(l),f={[e.id]:{user:{...e,is_account:!1},user_id:e.id,role:"owner",is_account:!1},[a.id]:{user:{...a,is_account:!0},user_id:a.id,role:"member",is_account:!0}},o=s.channel("messaging",h,{members:[e.id,a.id]});o.watch=async()=>(o.state.messages=i,o.state.members=f,{channel:{members:[e.id,a.id]},members:[],messages:i,watchers:[],pinned_messages:[],duration:"0ms"});const y=t=>{o.state.addMessageSorted(t),s.dispatchEvent({type:"message.new",cid:m,message:t,user:t.user??void 0})};let _=0;return o.sendMessage=async t=>{const c=typeof t=="string"?t:(t==null?void 0:t.text)??"",r={...l({text:c,from:"me",id:`mock-sent-${_++}`},i.length),...typeof t=="object"?t:{},user:e,cid:m};y(r);const n=d==null?void 0:d(c);if(n){const g=typeof n=="string"?n:n.text,p=typeof n=="string"?void 0:n.attachments;setTimeout(()=>{y(l({text:g,from:"them",attachments:p,id:`mock-reply-${_}`},i.length))},w)}return{message:r}},s.queryChannels=async()=>[o],o.watch(),{client:s,channel:o,participantFilterId:a.id}}exports.createMockMessagingClient=b;
+//# sourceMappingURL=testing.cjs.map

package/dist/testing.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"testing.cjs","sources":["../src/testing/createMockMessagingClient.ts"],"sourcesContent":["import type {\n  Channel,\n  MessageResponse,\n  QueryChannelAPIResponse,\n  SendMessageAPIResponse,\n} from 'stream-chat'\nimport { StreamChat } from 'stream-chat'\n\n/** A participant in the mock conversation. */\nexport interface MockMessagingUser {\n  id: string\n  name?: string\n  image?: string\n}\n\n/**\n * A seed message, authored from the viewer's perspective. `from: 'me'` is the\n * connected user (the viewer); `from: 'them'` is the other participant.\n */\nexport interface MockMessage {\n  id?: string\n  text?: string\n  from: 'me' | 'them'\n  /** Stream attachment payloads, rendered by the toolkit's attachment gate. */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  attachments?: any[]\n  /** e.g. `{ custom_type: 'MESSAGE_WELCOME' }`. */\n  metadata?: Record<string, unknown>\n}\n\nexport interface CreateMockMessagingClientOptions {\n  /** The connected/viewing user. */\n  currentUser: MockMessagingUser\n  /** The other party in the direct conversation (e.g. the creator/linker). */\n  participant: MockMessagingUser\n  /** Seed conversation, oldest-first. */\n  messages?: MockMessage[]\n  /** Channel id; defaults to `mock-dm`. */\n  channelId?: string\n  /**\n   * Optional canned reply. Called after the viewer sends a message; return the\n   * reply text (or a partial message) to have `participant` echo a response, or\n   * a falsy value for no reply. Drives the \"send echo\" in `dev:mock-messaging`.\n   */\n  onSend?: (\n    text: string\n  ) => string | { text?: string; attachments?: unknown[] } | null | undefined\n}\n\nexport interface MockMessagingClient {\n  /** Pass to `<MessagingProvider client={...}>`. */\n  client: StreamChat\n  /** The seeded direct-conversation channel. */\n  channel: Channel\n  /** Pass to `<MessagingShell initialParticipantFilter={...}>`. */\n  participantFilterId: string\n}\n\nconst REPLY_DELAY_MS = 600\n\n/**\n * Builds an offline Stream client seeded with a single direct conversation, so\n * consumers can render the **real** messaging UI (MessagingProvider →\n * MessagingShell → ChannelView) without a Stream backend — for `dev:mock-*`\n * surfaces and Storybook. It is a real `StreamChat` whose network calls\n * (`connectUser`, `queryChannels`, `channel.watch`, `channel.sendMessage`) are\n * replaced with in-memory behaviour driven by Stream's own channel-state\n * machinery, so rendering fidelity matches production.\n *\n * Ships from `@linktr.ee/messaging-react/testing` and must never be imported by\n * production code.\n */\nexport function createMockMessagingClient({\n  currentUser,\n  participant,\n  messages = [],\n  channelId = 'mock-dm',\n  onSend,\n}: CreateMockMessagingClientOptions): MockMessagingClient {\n  const client = new StreamChat('mock-api-key', {\n    allowServerSideConnect: true,\n  })\n\n  // Mark connected without opening a WebSocket. `MessagingProvider` renders\n  // `<Chat client={client}>` directly for an injected client, so it never\n  // calls connectUser itself.\n  client.connectUser = async () => ({ me: currentUser }) as never\n  client.disconnectUser = async () => undefined\n  client.userID = currentUser.id\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  client.user = currentUser as any\n\n  const cid = `messaging:${channelId}`\n\n  const toStreamMessage = (\n    message: MockMessage,\n    index: number\n  ): MessageResponse => {\n    const author = message.from === 'me' ? currentUser : participant\n    // Stagger timestamps oldest-first so the list orders naturally.\n    const createdAt = new Date(\n      Date.now() - (messages.length - index) * 60_000\n    ).toISOString()\n    return {\n      id: message.id ?? `mock-msg-${index}`,\n      text: message.text ?? '',\n      type: 'regular',\n      html: message.text ? `<p>${message.text}</p>` : '',\n      user: author,\n      attachments: message.attachments ?? [],\n      latest_reactions: [],\n      own_reactions: [],\n      reaction_counts: {},\n      reaction_scores: {},\n      reply_count: 0,\n      status: 'received',\n      cid,\n      created_at: createdAt,\n      updated_at: createdAt,\n      mentioned_users: [],\n      ...(message.metadata ? { metadata: message.metadata } : {}),\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any\n  }\n\n  const seededMessages = messages.map(toStreamMessage)\n\n  const memberState = {\n    [currentUser.id]: {\n      user: { ...currentUser, is_account: false },\n      user_id: currentUser.id,\n      role: 'owner',\n      is_account: false,\n    },\n    [participant.id]: {\n      user: { ...participant, is_account: true },\n      user_id: participant.id,\n      role: 'member',\n      is_account: true,\n    },\n  }\n\n  const channel = client.channel('messaging', channelId, {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    members: [currentUser.id, participant.id] as any,\n  })\n\n  // Seed state locally instead of fetching. Mirrors the proven ChannelView\n  // story mock: override `watch` to populate `state` and return a canned\n  // QueryChannelAPIResponse.\n  channel.watch = async () => {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    channel.state.messages = seededMessages as unknown as any[]\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    channel.state.members = memberState as unknown as any\n    return {\n      channel: { members: [currentUser.id, participant.id] },\n      members: [],\n      messages: seededMessages,\n      watchers: [],\n      pinned_messages: [],\n      duration: '0ms',\n    } as unknown as QueryChannelAPIResponse\n  }\n\n  const appendMessage = (message: MessageResponse) => {\n    // addMessageSorted is Stream's own state mutation (dedupes by id), so the\n    // toolkit re-renders through the real channel-state path.\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    channel.state.addMessageSorted(message as any)\n    client.dispatchEvent({\n      type: 'message.new',\n      cid,\n      message,\n      user: message.user ?? undefined,\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any)\n  }\n\n  let sentCount = 0\n  channel.sendMessage = async (message) => {\n    const text =\n      typeof message === 'string'\n        ? message\n        : ((message as { text?: string })?.text ?? '')\n    const sent = {\n      ...toStreamMessage({ text, from: 'me', id: `mock-sent-${sentCount++}` }, seededMessages.length),\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      ...(typeof message === 'object' ? (message as any) : {}),\n      user: currentUser,\n      cid,\n    } as MessageResponse\n\n    // stream-chat-react adds the outgoing message optimistically; addMessageSorted\n    // dedupes by id, so confirming here is safe and idempotent.\n    appendMessage(sent)\n\n    const reply = onSend?.(text)\n    if (reply) {\n      const replyText = typeof reply === 'string' ? reply : reply.text\n      const replyAttachments =\n        typeof reply === 'string' ? undefined : reply.attachments\n      setTimeout(() => {\n        appendMessage(\n          toStreamMessage(\n            {\n              text: replyText,\n              from: 'them',\n              // eslint-disable-next-line @typescript-eslint/no-explicit-any\n              attachments: replyAttachments as any,\n              id: `mock-reply-${sentCount}`,\n            },\n            seededMessages.length\n          )\n        )\n      }, REPLY_DELAY_MS)\n    }\n\n    return { message: sent } as unknown as SendMessageAPIResponse\n  }\n\n  // MessagingShell finds the direct conversation via queryChannels; always\n  // return the one seeded channel regardless of the filter.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  client.queryChannels = async () => [channel] as any\n\n  // Initialise state up-front so first render already has the conversation.\n  void channel.watch()\n\n  return { client, channel, participantFilterId: participant.id }\n}\n"],"names":["REPLY_DELAY_MS","createMockMessagingClient","currentUser","participant","messages","channelId","onSend","client","StreamChat","cid","toStreamMessage","message","index","author","createdAt","seededMessages","memberState","channel","appendMessage","sentCount","text","sent","reply","replyText","replyAttachments"],"mappings":"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"}

package/dist/testing.d.ts

@@ -0,0 +1,116 @@
+import { Channel } from 'stream-chat';
+import { StreamChat } from 'stream-chat';
+
+/**
+ * Builds an offline Stream client seeded with a single direct conversation, so
+ * consumers can render the **real** messaging UI (MessagingProvider →
+ * MessagingShell → ChannelView) without a Stream backend — for `dev:mock-*`
+ * surfaces and Storybook. It is a real `StreamChat` whose network calls
+ * (`connectUser`, `queryChannels`, `channel.watch`, `channel.sendMessage`) are
+ * replaced with in-memory behaviour driven by Stream's own channel-state
+ * machinery, so rendering fidelity matches production.
+ *
+ * Ships from `@linktr.ee/messaging-react/testing` and must never be imported by
+ * production code.
+ */
+export declare function createMockMessagingClient({ currentUser, participant, messages, channelId, onSend, }: CreateMockMessagingClientOptions): MockMessagingClient;
+
+export declare interface CreateMockMessagingClientOptions {
+    /** The connected/viewing user. */
+    currentUser: MockMessagingUser;
+    /** The other party in the direct conversation (e.g. the creator/linker). */
+    participant: MockMessagingUser;
+    /** Seed conversation, oldest-first. */
+    messages?: MockMessage[];
+    /** Channel id; defaults to `mock-dm`. */
+    channelId?: string;
+    /**
+     * Optional canned reply. Called after the viewer sends a message; return the
+     * reply text (or a partial message) to have `participant` echo a response, or
+     * a falsy value for no reply. Drives the "send echo" in `dev:mock-messaging`.
+     */
+    onSend?: (text: string) => string | {
+        text?: string;
+        attachments?: unknown[];
+    } | null | undefined;
+}
+
+/**
+ * A seed message, authored from the viewer's perspective. `from: 'me'` is the
+ * connected user (the viewer); `from: 'them'` is the other participant.
+ */
+export declare interface MockMessage {
+    id?: string;
+    text?: string;
+    from: 'me' | 'them';
+    /** Stream attachment payloads, rendered by the toolkit's attachment gate. */
+    attachments?: any[];
+    /** e.g. `{ custom_type: 'MESSAGE_WELCOME' }`. */
+    metadata?: Record<string, unknown>;
+}
+
+export declare interface MockMessagingClient {
+    /** Pass to `<MessagingProvider client={...}>`. */
+    client: StreamChat;
+    /** The seeded direct-conversation channel. */
+    channel: Channel;
+    /** Pass to `<MessagingShell initialParticipantFilter={...}>`. */
+    participantFilterId: string;
+}
+
+/** A participant in the mock conversation. */
+export declare interface MockMessagingUser {
+    id: string;
+    name?: string;
+    image?: string;
+}
+
+export { }
+
+
+declare module 'stream-chat' {
+    interface CustomAttachmentData {
+        action?: OfficialCtaActionPayload;
+    }
+    interface CustomChannelData {
+        /**
+         * Whether the channel has at least one visitor-originated message.
+         * Legacy channels may omit this field.
+         */
+        has_visitor_message?: boolean;
+        /**
+         * Priority score assigned by backend classification for spotlighting.
+         */
+        priority_score?: number;
+        /**
+         * Indicates a paid message is pending creator reply.
+         */
+        pending_earn_message_reply?: boolean;
+        /**
+         * Indicates DM agent has deferred and creator follow-up is needed.
+         */
+        agent_deferred?: boolean;
+        /**
+         * Whether DM agent auto-replies are paused for this channel.
+         */
+        chatbot_paused?: boolean;
+    }
+    interface CustomMessageData {
+        /**
+         * When true, hides the date timestamp in system messages.
+         * Used by CustomSystemMessage component.
+         */
+        hide_date?: boolean;
+        /**
+         * Message metadata from backend.
+         * Contains type and payment information.
+         */
+        metadata?: MessageMetadata;
+        /**
+         * DM Agent-specific system message type.
+         * Used as a fallback when metadata.custom_type is not available.
+         */
+        dm_agent_system_type?: DmAgentSystemType;
+    }
+}
+

package/dist/testing.js

@@ -0,0 +1,107 @@
+import { StreamChat as x } from "stream-chat";
+const M = 600;
+function g({
+  currentUser: e,
+  participant: c,
+  messages: u = [],
+  channelId: h = "mock-dm",
+  onSend: r
+}) {
+  const n = new x("mock-api-key", {
+    allowServerSideConnect: !0
+  });
+  n.connectUser = async () => ({ me: e }), n.disconnectUser = async () => {
+  }, n.userID = e.id, n.user = e;
+  const m = `messaging:${h}`, l = (t, a) => {
+    const d = t.from === "me" ? e : c, o = new Date(
+      Date.now() - (u.length - a) * 6e4
+    ).toISOString();
+    return {
+      id: t.id ?? `mock-msg-${a}`,
+      text: t.text ?? "",
+      type: "regular",
+      html: t.text ? `<p>${t.text}</p>` : "",
+      user: d,
+      attachments: t.attachments ?? [],
+      latest_reactions: [],
+      own_reactions: [],
+      reaction_counts: {},
+      reaction_scores: {},
+      reply_count: 0,
+      status: "received",
+      cid: m,
+      created_at: o,
+      updated_at: o,
+      mentioned_users: [],
+      ...t.metadata ? { metadata: t.metadata } : {}
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    };
+  }, i = u.map(l), f = {
+    [e.id]: {
+      user: { ...e, is_account: !1 },
+      user_id: e.id,
+      role: "owner",
+      is_account: !1
+    },
+    [c.id]: {
+      user: { ...c, is_account: !0 },
+      user_id: c.id,
+      role: "member",
+      is_account: !0
+    }
+  }, s = n.channel("messaging", h, {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    members: [e.id, c.id]
+  });
+  s.watch = async () => (s.state.messages = i, s.state.members = f, {
+    channel: { members: [e.id, c.id] },
+    members: [],
+    messages: i,
+    watchers: [],
+    pinned_messages: [],
+    duration: "0ms"
+  });
+  const y = (t) => {
+    s.state.addMessageSorted(t), n.dispatchEvent({
+      type: "message.new",
+      cid: m,
+      message: t,
+      user: t.user ?? void 0
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    });
+  };
+  let _ = 0;
+  return s.sendMessage = async (t) => {
+    const a = typeof t == "string" ? t : (t == null ? void 0 : t.text) ?? "", d = {
+      ...l({ text: a, from: "me", id: `mock-sent-${_++}` }, i.length),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ...typeof t == "object" ? t : {},
+      user: e,
+      cid: m
+    };
+    y(d);
+    const o = r == null ? void 0 : r(a);
+    if (o) {
+      const p = typeof o == "string" ? o : o.text, w = typeof o == "string" ? void 0 : o.attachments;
+      setTimeout(() => {
+        y(
+          l(
+            {
+              text: p,
+              from: "them",
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              attachments: w,
+              id: `mock-reply-${_}`
+            },
+            i.length
+          )
+        );
+      }, M);
+    }
+    return { message: d };
+  }, n.queryChannels = async () => [s], s.watch(), { client: n, channel: s, participantFilterId: c.id };
+}
+export {
+  g as createMockMessagingClient
+};
+//# sourceMappingURL=testing.js.map

package/dist/testing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"testing.js","sources":["../src/testing/createMockMessagingClient.ts"],"sourcesContent":["import type {\n  Channel,\n  MessageResponse,\n  QueryChannelAPIResponse,\n  SendMessageAPIResponse,\n} from 'stream-chat'\nimport { StreamChat } from 'stream-chat'\n\n/** A participant in the mock conversation. */\nexport interface MockMessagingUser {\n  id: string\n  name?: string\n  image?: string\n}\n\n/**\n * A seed message, authored from the viewer's perspective. `from: 'me'` is the\n * connected user (the viewer); `from: 'them'` is the other participant.\n */\nexport interface MockMessage {\n  id?: string\n  text?: string\n  from: 'me' | 'them'\n  /** Stream attachment payloads, rendered by the toolkit's attachment gate. */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  attachments?: any[]\n  /** e.g. `{ custom_type: 'MESSAGE_WELCOME' }`. */\n  metadata?: Record<string, unknown>\n}\n\nexport interface CreateMockMessagingClientOptions {\n  /** The connected/viewing user. */\n  currentUser: MockMessagingUser\n  /** The other party in the direct conversation (e.g. the creator/linker). */\n  participant: MockMessagingUser\n  /** Seed conversation, oldest-first. */\n  messages?: MockMessage[]\n  /** Channel id; defaults to `mock-dm`. */\n  channelId?: string\n  /**\n   * Optional canned reply. Called after the viewer sends a message; return the\n   * reply text (or a partial message) to have `participant` echo a response, or\n   * a falsy value for no reply. Drives the \"send echo\" in `dev:mock-messaging`.\n   */\n  onSend?: (\n    text: string\n  ) => string | { text?: string; attachments?: unknown[] } | null | undefined\n}\n\nexport interface MockMessagingClient {\n  /** Pass to `<MessagingProvider client={...}>`. */\n  client: StreamChat\n  /** The seeded direct-conversation channel. */\n  channel: Channel\n  /** Pass to `<MessagingShell initialParticipantFilter={...}>`. */\n  participantFilterId: string\n}\n\nconst REPLY_DELAY_MS = 600\n\n/**\n * Builds an offline Stream client seeded with a single direct conversation, so\n * consumers can render the **real** messaging UI (MessagingProvider →\n * MessagingShell → ChannelView) without a Stream backend — for `dev:mock-*`\n * surfaces and Storybook. It is a real `StreamChat` whose network calls\n * (`connectUser`, `queryChannels`, `channel.watch`, `channel.sendMessage`) are\n * replaced with in-memory behaviour driven by Stream's own channel-state\n * machinery, so rendering fidelity matches production.\n *\n * Ships from `@linktr.ee/messaging-react/testing` and must never be imported by\n * production code.\n */\nexport function createMockMessagingClient({\n  currentUser,\n  participant,\n  messages = [],\n  channelId = 'mock-dm',\n  onSend,\n}: CreateMockMessagingClientOptions): MockMessagingClient {\n  const client = new StreamChat('mock-api-key', {\n    allowServerSideConnect: true,\n  })\n\n  // Mark connected without opening a WebSocket. `MessagingProvider` renders\n  // `<Chat client={client}>` directly for an injected client, so it never\n  // calls connectUser itself.\n  client.connectUser = async () => ({ me: currentUser }) as never\n  client.disconnectUser = async () => undefined\n  client.userID = currentUser.id\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  client.user = currentUser as any\n\n  const cid = `messaging:${channelId}`\n\n  const toStreamMessage = (\n    message: MockMessage,\n    index: number\n  ): MessageResponse => {\n    const author = message.from === 'me' ? currentUser : participant\n    // Stagger timestamps oldest-first so the list orders naturally.\n    const createdAt = new Date(\n      Date.now() - (messages.length - index) * 60_000\n    ).toISOString()\n    return {\n      id: message.id ?? `mock-msg-${index}`,\n      text: message.text ?? '',\n      type: 'regular',\n      html: message.text ? `<p>${message.text}</p>` : '',\n      user: author,\n      attachments: message.attachments ?? [],\n      latest_reactions: [],\n      own_reactions: [],\n      reaction_counts: {},\n      reaction_scores: {},\n      reply_count: 0,\n      status: 'received',\n      cid,\n      created_at: createdAt,\n      updated_at: createdAt,\n      mentioned_users: [],\n      ...(message.metadata ? { metadata: message.metadata } : {}),\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any\n  }\n\n  const seededMessages = messages.map(toStreamMessage)\n\n  const memberState = {\n    [currentUser.id]: {\n      user: { ...currentUser, is_account: false },\n      user_id: currentUser.id,\n      role: 'owner',\n      is_account: false,\n    },\n    [participant.id]: {\n      user: { ...participant, is_account: true },\n      user_id: participant.id,\n      role: 'member',\n      is_account: true,\n    },\n  }\n\n  const channel = client.channel('messaging', channelId, {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    members: [currentUser.id, participant.id] as any,\n  })\n\n  // Seed state locally instead of fetching. Mirrors the proven ChannelView\n  // story mock: override `watch` to populate `state` and return a canned\n  // QueryChannelAPIResponse.\n  channel.watch = async () => {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    channel.state.messages = seededMessages as unknown as any[]\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    channel.state.members = memberState as unknown as any\n    return {\n      channel: { members: [currentUser.id, participant.id] },\n      members: [],\n      messages: seededMessages,\n      watchers: [],\n      pinned_messages: [],\n      duration: '0ms',\n    } as unknown as QueryChannelAPIResponse\n  }\n\n  const appendMessage = (message: MessageResponse) => {\n    // addMessageSorted is Stream's own state mutation (dedupes by id), so the\n    // toolkit re-renders through the real channel-state path.\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    channel.state.addMessageSorted(message as any)\n    client.dispatchEvent({\n      type: 'message.new',\n      cid,\n      message,\n      user: message.user ?? undefined,\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any)\n  }\n\n  let sentCount = 0\n  channel.sendMessage = async (message) => {\n    const text =\n      typeof message === 'string'\n        ? message\n        : ((message as { text?: string })?.text ?? '')\n    const sent = {\n      ...toStreamMessage({ text, from: 'me', id: `mock-sent-${sentCount++}` }, seededMessages.length),\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      ...(typeof message === 'object' ? (message as any) : {}),\n      user: currentUser,\n      cid,\n    } as MessageResponse\n\n    // stream-chat-react adds the outgoing message optimistically; addMessageSorted\n    // dedupes by id, so confirming here is safe and idempotent.\n    appendMessage(sent)\n\n    const reply = onSend?.(text)\n    if (reply) {\n      const replyText = typeof reply === 'string' ? reply : reply.text\n      const replyAttachments =\n        typeof reply === 'string' ? undefined : reply.attachments\n      setTimeout(() => {\n        appendMessage(\n          toStreamMessage(\n            {\n              text: replyText,\n              from: 'them',\n              // eslint-disable-next-line @typescript-eslint/no-explicit-any\n              attachments: replyAttachments as any,\n              id: `mock-reply-${sentCount}`,\n            },\n            seededMessages.length\n          )\n        )\n      }, REPLY_DELAY_MS)\n    }\n\n    return { message: sent } as unknown as SendMessageAPIResponse\n  }\n\n  // MessagingShell finds the direct conversation via queryChannels; always\n  // return the one seeded channel regardless of the filter.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  client.queryChannels = async () => [channel] as any\n\n  // Initialise state up-front so first render already has the conversation.\n  void channel.watch()\n\n  return { client, channel, participantFilterId: participant.id }\n}\n"],"names":["REPLY_DELAY_MS","createMockMessagingClient","currentUser","participant","messages","channelId","onSend","client","StreamChat","cid","toStreamMessage","message","index","author","createdAt","seededMessages","memberState","channel","appendMessage","sentCount","text","sent","reply","replyText","replyAttachments"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.6.2",
+  "version": "3.7.0-rc-1783305846",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -12,8 +12,20 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./testing": {
+      "types": "./dist/testing.d.ts",
+      "import": "./dist/testing.js",
+      "require": "./dist/testing.cjs"
+    },
     "./styles.css": "./dist/assets/index.css"
   },
+  "typesVersions": {
+    "*": {
+      "testing": [
+        "dist/testing.d.ts"
+      ]
+    }
+  },
   "license": "UNLICENSED",
   "files": [
     "dist",
@@ -38,7 +50,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "^2.2.0",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1783305846",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/ChannelView.stories.tsx

@@ -16,7 +16,6 @@ import { ChannelView } from './ChannelView'
 import { ChannelEmptyState } from './MessagingShell/ChannelEmptyState'
 
 type ComponentProps = React.ComponentProps<typeof ChannelView>
-const SCROLLABLE_MESSAGE_COUNT = 10
 
 const meta: Meta<ComponentProps> = {
   title: 'ChannelView',
@@ -42,9 +41,7 @@ const createMockChannel = async (
   client: StreamChat,
   hasMessages = true,
   followerStatus?: string | boolean,
-  isFrozen = false,
-  participantCustomerTag?: string,
-  hasScrollableMessages = false
+  isFrozen = false
 ) => {
   const participant = mockParticipants[0]
 
@@ -104,34 +101,6 @@ const createMockChannel = async (
           cid: 'messaging:storybook-channel-1',
           mentioned_users: [],
         },
-        ...(hasScrollableMessages
-          ? Array.from({ length: SCROLLABLE_MESSAGE_COUNT }, (_, index) => {
-              const isParticipantMessage = index % 2 === 0
-              const user = isParticipantMessage ? participant : mockUser
-              const text = isParticipantMessage
-                ? `Here is another message to show how the redesigned header floats above the thread (${index + 1}).`
-                : `Replying so the conversation has enough content to scroll under the header (${index + 1}).`
-
-              return {
-                id: `msg-extra-${index + 1}`,
-                text,
-                type: 'regular' as const,
-                created_at: minutesAgo(Math.max(1, 25 - index)),
-                updated_at: minutesAgo(Math.max(1, 25 - index)),
-                user,
-                html: `<p>${text}</p>`,
-                attachments: [],
-                latest_reactions: [],
-                own_reactions: [],
-                reaction_counts: {},
-                reaction_scores: {},
-                reply_count: 0,
-                status: 'received',
-                cid: 'messaging:storybook-channel-1',
-                mentioned_users: [],
-              }
-            })
-          : []),
       ]
     : []
 
@@ -149,11 +118,7 @@ const createMockChannel = async (
   }
 
   // Create a real channel using the client
-  const channel = client.channel(
-    'messaging',
-    'storybook-channel-1',
-    channelData
-  )
+  const channel = client.channel('messaging', 'storybook-channel-1', channelData)
 
   // Mock the watch method to return mocked data
   channel.watch = async () => {
@@ -177,7 +142,6 @@ const createMockChannel = async (
         user_id: participant.id,
         role: 'member',
         is_account: true,
-        customerTag: participantCustomerTag,
       },
     }
     return {
@@ -205,7 +169,6 @@ const createMockChannel = async (
 }
 
 type TemplateProps = ComponentProps & {
-  hasMessages?: boolean
   followerStatus?: string | boolean
   isFrozen?: boolean
   typingUser?: {
@@ -213,17 +176,12 @@ type TemplateProps = ComponentProps & {
     name?: string
     image?: string
   }
-  participantCustomerTag?: string
-  hasScrollableMessages?: boolean
 }
 
 const Template: StoryFn<TemplateProps> = (args) => {
   const {
-    hasMessages = true,
     followerStatus,
     isFrozen = false,
-    participantCustomerTag,
-    hasScrollableMessages,
     typingUser,
     ...channelViewProps
   } = args
@@ -235,28 +193,16 @@ const Template: StoryFn<TemplateProps> = (args) => {
     client.user = mockUser
     return client
   })
-
+  
   const [channel, setChannel] = React.useState<ChannelType | null>(null)
 
   useEffect(() => {
-    createMockChannel(
-      client,
-      hasMessages,
-      followerStatus,
-      isFrozen,
-      participantCustomerTag,
-      hasScrollableMessages
-    ).then((mockChannel) => {
-      setChannel(mockChannel)
-    })
-  }, [
-    client,
-    hasMessages,
-    followerStatus,
-    isFrozen,
-    participantCustomerTag,
-    hasScrollableMessages,
-  ])
+    createMockChannel(client, true, followerStatus, isFrozen).then(
+      (mockChannel) => {
+        setChannel(mockChannel)
+      }
+    )
+  }, [client, followerStatus, isFrozen])
 
   useEffect(() => {
     if (!channel || !typingUser) {
@@ -310,9 +256,6 @@ export const ParticipantIdentityTrigger: StoryFn<TemplateProps> = Template.bind(
 )
 ParticipantIdentityTrigger.args = {
   showBackButton: false,
-  showStarButton: true,
-  participantCustomerTag: 'CUSTOMER_PAID',
-  hasScrollableMessages: true,
   onParticipantNameClick: () =>
     // eslint-disable-next-line no-alert
     window.alert('Participant details clicked — open Thread content'),
@@ -321,7 +264,7 @@ ParticipantIdentityTrigger.parameters = {
   docs: {
     description: {
       story:
-        'Header with `onParticipantNameClick` set: the redesigned floating header centers the avatar and name pill, shows paid/star badges when present, and fires the callback when clicked (shows an alert here). With the prop omitted (see Default) the previous header remains in use.',
+        'Header with `onParticipantNameClick` set: the participant avatar and name render as one button with a trailing caret in both the mobile and desktop header layouts. Click the identity block to fire the callback (shows an alert here). With the prop omitted (see Default) the header remains non-interactive.',
     },
   },
 }
@@ -599,7 +542,7 @@ const EmptyTemplate: StoryFn<ComponentProps> = (args) => {
     client.user = mockUser
     return client
   })
-
+  
   const [channel, setChannel] = React.useState<ChannelType | null>(null)
 
   useEffect(() => {

package/src/components/ChannelView.test.tsx

@@ -22,9 +22,7 @@ vi.mock('stream-chat-react', () => ({
   Window: ({ children }: { children: React.ReactNode }) => (
     <div data-testid="window">{children}</div>
   ),
-  MessageList: ({ head }: { head?: React.ReactElement }) => (
-    <div data-testid="message-list">{head}</div>
-  ),
+  MessageList: () => <div data-testid="message-list" />,
   WithComponents: ({ children }: { children: React.ReactNode }) => (
     <>{children}</>
   ),
@@ -96,19 +94,15 @@ vi.mock('../hooks/useChannelStar', () => ({
 const createChannel = ({
   currentUserId = 'visitor-1',
   currentUserRole = 'owner',
-  messages = [],
   otherUser = {
     id: 'linker-1' as const,
     name: 'Linker' as string | undefined,
     username: undefined as string | undefined,
     is_account: true,
   },
-  otherMemberCustomerTag,
 }: {
   currentUserId?: 'visitor-1' | 'linker-1'
   currentUserRole?: 'owner' | 'member'
-  messages?: Channel['state']['messages']
-  otherMemberCustomerTag?: string
   otherUser?: {
     id: string
     name?: string
@@ -140,12 +134,11 @@ const createChannel = ({
             is_account:
               otherUser.is_account ?? currentUserId === 'visitor-1',
           },
-          customerTag: otherMemberCustomerTag,
           role: currentUserRole === 'owner' ? 'member' : 'owner',
         },
       },
       membership: {},
-      messages,
+      messages: [],
     },
     on: vi.fn(),
     off: vi.fn(),
@@ -210,7 +203,7 @@ describe('ChannelView', () => {
     )
   })
 
-  it('renders the redesigned header button when onParticipantNameClick is provided', () => {
+  it('renders the participant name as a button that fires onParticipantNameClick', () => {
     const onParticipantNameClick = vi.fn()
     renderWithProviders(
       <ChannelView
@@ -219,63 +212,29 @@ describe('ChannelView', () => {
       />
     )
 
-    const button = screen.getByRole('button', {
+    // Both the mobile and desktop header layouts render the button (one is
+    // hidden via CSS), so there is at least one match.
+    const buttons = screen.getAllByRole('button', {
       name: /view details for linker/i,
     })
-    expect(button).toHaveClass(
+    expect(buttons.length).toBeGreaterThanOrEqual(1)
+    expect(buttons[0]).toHaveClass(
       'appearance-none',
       'border-0',
       'bg-transparent',
-      'flex-col'
+      'rounded-[12px]',
+      'px-1',
+      'py-0.5'
     )
 
     const avatars = screen.getAllByTestId('avatar')
     expect(avatars.length).toBeGreaterThanOrEqual(1)
-    expect(avatars[0].closest('button')).toBe(button)
-    expect(screen.getByTestId('channel-actions-menu')).toBeInTheDocument()
+    expect(avatars[0].closest('button')).toBe(buttons[0])
 
-    button.click()
+    buttons[0].click()
     expect(onParticipantNameClick).toHaveBeenCalledTimes(1)
   })
 
-  it('renders redesigned header badges for paid and starred conversations', () => {
-    mockIsStarred = true
-
-    renderWithProviders(
-      <ChannelView
-        channel={createChannel({
-          otherMemberCustomerTag: 'CUSTOMER_PAID',
-        })}
-        onParticipantNameClick={vi.fn()}
-        showStarButton={true}
-      />
-    )
-
-    expect(screen.getByLabelText('Paid customer')).toBeInTheDocument()
-    expect(screen.getByLabelText('Starred conversation')).toBeInTheDocument()
-  })
-
-  it('renders the redesigned header outside MessageList head when all messages are deleted', () => {
-    renderWithProviders(
-      <ChannelView
-        channel={createChannel({
-          messages: [
-            {
-              id: 'deleted-message-1',
-              type: 'deleted',
-            } as Channel['state']['messages'][number],
-          ],
-        })}
-        onParticipantNameClick={vi.fn()}
-      />
-    )
-
-    const button = screen.getByRole('button', {
-      name: /view details for linker/i,
-    })
-    expect(button.closest('[data-testid="message-list"]')).toBeNull()
-  })
-
   it('renders the actions menu by default', () => {
     renderWithProviders(<ChannelView channel={createChannel()} />)