@linktr.ee/messaging-react 3.6.1 → 3.7.0-rc-1783304153

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-G4pnfm4m.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-BPfehHDD.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.1",
+  "version": "3.7.0-rc-1783304153",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -12,6 +12,11 @@
       "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"
   },
   "license": "UNLICENSED",
@@ -38,7 +43,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "^2.2.0",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1783304153",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/providers/MessagingProvider.test.tsx

@@ -258,4 +258,34 @@ describe('MessagingProvider', () => {
     await waitFor(() => expect(connectUser).toHaveBeenCalledTimes(2))
     expect(connectUser).toHaveBeenLastCalledWith(authedUser)
   })
+
+  it('uses an injected client directly and never connects a service', async () => {
+    const { connectUser, disconnectUser } = setupServiceMock()
+    const injectedClient = {
+      userID: 'injected-user',
+    } as unknown as StreamChat
+    const states: unknown[] = []
+
+    render(
+      <MessagingProvider client={injectedClient} user={null}>
+        <Probe onState={(s) => states.push(s)} />
+      </MessagingProvider>
+    )
+
+    // Injected client is reported connected immediately, and its instance is
+    // surfaced on the context.
+    await waitFor(() => {
+      const last = states[states.length - 1] as {
+        isConnected: boolean
+        hasClient: boolean
+      }
+      expect(last.isConnected).toBe(true)
+      expect(last.hasClient).toBe(true)
+    })
+
+    // The caller owns the injected client's lifecycle — the provider must not
+    // spin up a StreamChatService or connect/disconnect it.
+    expect(connectUser).not.toHaveBeenCalled()
+    expect(disconnectUser).not.toHaveBeenCalled()
+  })
 })

package/src/providers/MessagingProvider.tsx

@@ -52,6 +52,7 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
   apiKey,
   capabilities = {},
   debug = false,
+  client: injectedClient,
 }) => {
   // Create debug logger that respects the debug prop
   const debugLog = useCallback(
@@ -137,10 +138,18 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
   // not the process-wide StreamChat.getInstance, which is shared across keys and
   // provider instances.
   const clientRef = useRef<{ apiKey: string; client: StreamChat } | null>(null)
-  if (apiKey && clientRef.current?.apiKey !== apiKey) {
+  if (!injectedClient && apiKey && clientRef.current?.apiKey !== apiKey) {
     clientRef.current = { apiKey, client: new StreamChat(apiKey) }
   }
-  const chatClient = apiKey ? (clientRef.current?.client ?? null) : null
+  // An injected client takes precedence and short-circuits the apiKey-derived
+  // client, the service, and the connect/disconnect lifecycle below — the
+  // caller owns that instance (offline/dev via `createMockMessagingClient`, or
+  // a test). Otherwise fall back to the apiKey-derived client as before.
+  const chatClient = injectedClient
+    ? injectedClient
+    : apiKey
+      ? (clientRef.current?.client ?? null)
+      : null
 
   // Create the service once per client lifetime (apiKey). Keyed on `chatClient`
   // — NOT on serviceConfig/debug — so those changing does not spin up a second
@@ -152,6 +161,12 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
     const currentRender = renderCountRef.current
     const currentConfig = serviceConfigRef.current
 
+    // An injected client owns its own connection — never create a service or
+    // connect for it.
+    if (injectedClient) {
+      return
+    }
+
     if (!apiKey || !chatClient || !currentConfig) {
       debugLog('⚠️ SERVICE INIT SKIPPED', {
         renderCount: currentRender,
@@ -182,7 +197,7 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
     // No disconnect on cleanup here — disconnection is owned by the
     // client-cleanup effect below, keyed on `chatClient` (apiKey) and unmount.
     // eslint-disable-next-line react-hooks/exhaustive-deps -- serviceConfig/debug/debugLog are read via refs by design (see above); recreating on them would re-adopt the live client
-  }, [apiKey, chatClient])
+  }, [apiKey, chatClient, injectedClient])
 
   // Track if we've already connected this user with this service to prevent duplicate connections
   const connectedUserRef = useRef<{
@@ -324,8 +339,11 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
 
     return {
       service,
-      client,
-      isConnected,
+      // An injected client is already connected and owns its lifecycle, so
+      // surface it directly and report connected — the apiKey path's `client`
+      // state (set by connectUser) is never populated in that mode.
+      client: injectedClient ?? client,
+      isConnected: injectedClient ? true : isConnected,
       isLoading,
       error,
       capabilities,
@@ -335,6 +353,7 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
   }, [
     service,
     client,
+    injectedClient,
     isConnected,
     isLoading,
     error,

package/src/testing/createMockMessagingClient.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import { MessagingShell } from '../components/MessagingShell'
+import { MessagingProvider } from '../providers/MessagingProvider'
+
+import { createMockMessagingClient } from './createMockMessagingClient'
+
+/**
+ * Exercises the real MessagingProvider → MessagingShell → ChannelView stack
+ * against an injected mock client (the `dev:mock-messaging` path). Use this to
+ * visually verify send-echo, which the unit tests can't cover because they stub
+ * stream-chat-react.
+ */
+const meta: Meta = {
+  title: 'testing/createMockMessagingClient',
+  parameters: { layout: 'fullscreen' },
+}
+export default meta
+
+const currentUser = { id: 'viewer-1', name: 'You' }
+const participant = {
+  id: 'creator-1',
+  name: 'Ava Creator',
+  image: 'https://i.pravatar.cc/150?img=5',
+}
+
+const Template: StoryFn = () => {
+  const [mock] = React.useState(() =>
+    createMockMessagingClient({
+      currentUser,
+      participant,
+      messages: [
+        {
+          id: 'w1',
+          from: 'them',
+          text: 'Welcome! Thanks for reaching out 👋',
+          metadata: { custom_type: 'MESSAGE_WELCOME' },
+        },
+        {
+          id: 'l1',
+          from: 'them',
+          text: 'Check out my latest drop:',
+          attachments: [
+            {
+              type: 'image',
+              og_scrape_url: 'https://tr.ee/example',
+              title: 'My latest drop',
+              text: 'Limited edition',
+              image_url: 'https://picsum.photos/seed/mockdrop/560/360',
+            },
+          ],
+        },
+        { id: 'm1', from: 'me', text: 'Love it — just grabbed one!' },
+      ],
+      onSend: (text) => `Thanks for saying "${text}"! 🎉`,
+    })
+  )
+
+  return (
+    <MessagingProvider client={mock.client} user={null}>
+      <div className="h-screen w-full bg-[#FBFAF9]">
+        <MessagingShell initialParticipantFilter={mock.participantFilterId} />
+      </div>
+    </MessagingProvider>
+  )
+}
+
+export const Default: StoryFn = Template.bind({})
+Default.parameters = {
+  docs: {
+    description: {
+      story:
+        'Seeded direct conversation rendered through the real shell. Type a message and send it — the mock echoes a canned reply (send-echo).',
+    },
+  },
+}