@linktr.ee/messaging-react 2.0.0 → 2.0.1-rc-1778656305

package/dist/index.d.ts

@@ -241,15 +241,38 @@ export declare interface ChannelViewProps {
     sendButton?: ComponentType<any>;
 }
 
-export declare interface CreatorCardProps extends LockedAttachmentBaseProps {
+export declare interface ComposerCardProps extends LockedAttachmentBaseProps {
+    /** Placeholder shown in the title slot before the composer types one. */
     placeholderTitle?: string;
+    /** Placeholder shown in the amount slot before one is configured. */
     placeholderAmountText?: string;
-    isUnlocking?: boolean;
+    /**
+     * When provided, renders a dismiss X in the thumbnail corner. Called when
+     * the composer clicks it to remove the attachment.
+     */
     onDismiss?: () => void;
+    /** Fired the first time the composer taps the thumbnail to preview. */
     onPreviewClick?: () => void;
+    /**
+     * Lazily loads the underlying source so the composer can preview the
+     * attachment they're about to send. Called the first time the thumbnail is
+     * tapped; the returned source is cached and reused on subsequent toggles.
+     */
     onFetchSource?: () => Promise<LockedAttachmentSource | void>;
+    /**
+     * When provided, renders a pencil button in the body bottom-right that the
+     * composer can use to edit the attachment metadata (e.g. open the price /
+     * gallery editor). Matches the Composer "Button" instance in Figma.
+     */
+    onEditClick?: () => void;
 }
 
+/**
+ * @deprecated Renamed to `SentCardProps`. Drafting usages (with `onDismiss`)
+ * should migrate to `ComposerCardProps`.
+ */
+export declare type CreatorCardProps = SentCardProps;
+
 export declare const CustomMessageProvider: Provider<Partial<CustomMessageRegistry>>;
 
 export declare interface CustomMessageRegistry {
@@ -301,8 +324,11 @@ export declare function getMessageDisplayText({ message, viewerLanguage, }: {
 export declare function isLinkAttachment(a: Attachment): boolean;
 
 export declare const LockedAttachment: {
-    Creator: (props: CreatorCardProps) => JSX_2.Element;
-    Visitor: (props: VisitorCardProps) => JSX_2.Element;
+    Composer: (props: ComposerCardProps) => JSX_2.Element;
+    Sent: (props: SentCardProps) => JSX_2.Element;
+    Received: (props: ReceivedCardProps) => JSX_2.Element;
+    Creator: (props: SentCardProps) => JSX_2.Element;
+    Visitor: (props: ReceivedCardProps) => JSX_2.Element;
 };
 
 declare interface LockedAttachmentBaseProps {
@@ -312,6 +338,14 @@ declare interface LockedAttachmentBaseProps {
     detail?: string;
     amountText?: string;
     paymentStatus?: PaymentStatus;
+    /**
+     * When provided with 2+ items, the card renders as a mixed-media carousel
+     * (e.g. a couple of photos + a video) instead of a single thumbnail. Each
+     * item brings its own thumbnail and optional source so that
+     * `LockedAttachment.Composer` / `.Sent` / `.Received` can all share the
+     * same carousel chrome.
+     */
+    gallery?: LockedAttachmentGalleryItem[];
 }
 
 export declare interface LockedAttachmentContextValue {
@@ -321,6 +355,15 @@ export declare interface LockedAttachmentContextValue {
     onFetchSource?: (message: LocalMessage, channel: Channel) => Promise<LockedAttachmentSource | void>;
 }
 
+export declare interface LockedAttachmentGalleryItem {
+    /** MIME type of this carousel item — drives the per-item play / lock affordance. */
+    mimeType: string;
+    /** Poster image used for both the locked (blurred) and unlocked preview state. */
+    thumbnailUrl?: string;
+    /** Underlying source (image or video URL) — shown only when unlocked. */
+    sourceUrl?: string;
+}
+
 export declare interface LockedAttachmentSource {
     /** Proxied URL used by the media player for in-app playback. */
     sourceUrl: string;
@@ -501,10 +544,48 @@ export declare interface Participant {
  */
 declare type PaymentStatus = 'pending' | 'paid' | 'failed' | 'refunded';
 
+export declare interface ReceivedCardProps extends LockedAttachmentBaseProps {
+    /**
+     * Called when the recipient clicks Unlock on an unpaid attachment.
+     * Use this to open a checkout flow. Omit to hide the Unlock button.
+     */
+    onUnlockClick?: () => void;
+    /**
+     * Called to fetch the attachment source — fired automatically when
+     * `paymentStatus` transitions to `'paid'`, or immediately on click when
+     * `paymentStatus` is already `'paid'`. Return a `LockedAttachmentSource`
+     * to unlock the card.
+     */
+    onFetchSource?: () => Promise<LockedAttachmentSource | void>;
+    /**
+     * Called when the recipient clicks Download on an unlocked card.
+     * Omit to hide the Download button.
+     */
+    onDownloadClick?: () => void;
+    /**
+     * When true, shows a loading spinner on the Unlock button.
+     * Driven by the LockedAttachmentContext (e.g. checkout in progress).
+     */
+    isUnlocking?: boolean;
+}
+
 export declare function resolveLinkAttachment(message: LocalMessage): Attachment | undefined;
 
 export declare function resolveMediaFromMessage(message: LocalMessage): MediaMessageResolved | null;
 
+export declare interface SentCardProps extends LockedAttachmentBaseProps {
+    /** Placeholder shown in the title slot when no title is set. */
+    placeholderTitle?: string;
+    /** Fired the first time the sender taps the thumbnail to preview their own attachment. */
+    onPreviewClick?: () => void;
+    /**
+     * Lazily loads the underlying source so the sender can preview the attachment.
+     * Called the first time the thumbnail is tapped; the returned source is cached
+     * and reused on subsequent toggles.
+     */
+    onFetchSource?: () => Promise<LockedAttachmentSource | void>;
+}
+
 export declare function useCustomMessage<K extends keyof CustomMessageRegistry>(key: K): CustomMessageRegistry[K];
 
 /**
@@ -528,30 +609,8 @@ declare interface UseMessageVoteResult {
  */
 export declare const useMessaging: () => MessagingContextValue;
 
-export declare interface VisitorCardProps extends LockedAttachmentBaseProps {
-    /**
-     * Called when the visitor clicks Unlock on an unpaid attachment.
-     * Use this to open a checkout flow. Omit to hide the Unlock button.
-     */
-    onUnlockClick?: () => void;
-    /**
-     * Called to fetch the attachment source — fired automatically when
-     * paymentStatus transitions to 'paid', or immediately on click when
-     * paymentStatus is already 'paid'. Return a LockedAttachmentSource to
-     * unlock the card.
-     */
-    onFetchSource?: () => Promise<LockedAttachmentSource | void>;
-    /**
-     * Called when the visitor clicks Download on an unlocked card.
-     * Omit to hide the Download button.
-     */
-    onDownloadClick?: () => void;
-    /**
-     * When true, shows loading dots on the Unlock button.
-     * Driven by the LockedAttachmentContext (e.g. checkout in progress, payment processing).
-     */
-    isUnlocking?: boolean;
-}
+/** @deprecated Renamed to `ReceivedCardProps`. */
+export declare type VisitorCardProps = ReceivedCardProps;
 
 export declare type VoteSelection = 'up' | 'down' | null;
 

package/dist/index.js

@@ -1,4 +1,4 @@
-import { b as e, c as t, C as i, d as n, e as o, f as g, F as m, g as r, L as M, M as l, h as u, i as h, j as L, k as d, l as C, m as c, n as v, r as A, o as k, u as p, p as F, q as f } from "./index-Brz9orsI.js";
+import { a as e, b as t, C as i, c as n, d as o, e as g, F as m, f as M, L as r, M as l, h as u, i as h, j as L, k as d, l as C, m as c, n as v, o as A, p as k, u as p, q as F, s as f } from "./index-B1h46F9x.js";
 export {
   e as ActionButton,
   t as Avatar,
@@ -7,8 +7,8 @@ export {
   o as ChannelView,
   g as CustomMessageProvider,
   m as FaqList,
-  r as FaqListItem,
-  M as LockedAttachment,
+  M as FaqListItem,
+  r as LockedAttachment,
   l as MediaMessage,
   u as MessageVoteButtons,
   h as MessagingProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "2.0.0",
+  "version": "2.0.1-rc-1778656305",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",

package/src/components/ChannelView.test.tsx

@@ -28,6 +28,17 @@ vi.mock('stream-chat-react', () => ({
   ),
   useMessageContext: () => ({ message: { id: 'message-1', text: 'hello' } }),
   useChannelStateContext: () => ({ channel: activeChannel }),
+  useChatContext: () => ({ client: { user: { id: 'visitor-1' } } }),
+  useTypingContext: () => ({ typing: {} }),
+  useAIState: () => ({ aiState: 'AI_STATE_IDLE' }),
+  AIStates: {
+    Error: 'AI_STATE_ERROR',
+    ExternalSources: 'AI_STATE_EXTERNAL_SOURCES',
+    Generating: 'AI_STATE_GENERATING',
+    Idle: 'AI_STATE_IDLE',
+    Stop: 'AI_STATE_STOP',
+    Thinking: 'AI_STATE_THINKING',
+  },
 }))
 
 vi.mock('../providers/MessagingProvider', () => ({

package/src/components/ChannelView.tsx

@@ -28,6 +28,7 @@ import { CustomMessage } from './CustomMessage'
 import { CustomMessageInput } from './CustomMessageInput'
 import { CustomSystemMessage } from './CustomSystemMessage'
 import CustomTypingIndicator from './CustomTypingIndicator'
+import { DmAgentEnabledContext } from './CustomTypingIndicator/DmAgentContext'
 import { ChannelEmptyState } from './MessagingShell/ChannelEmptyState'
 import { LoadingState } from './MessagingShell/LoadingState'
 
@@ -495,38 +496,40 @@ export const ChannelView = React.memo<ChannelViewProps>(
           className
         )}
       >
-        <Channel
-          channel={channel}
-          MessageSystem={CustomSystemMessage}
-          EmptyStateIndicator={CustomChannelEmptyState}
-          LoadingIndicator={LoadingState}
-          DateSeparator={CustomDateSeparator}
-          TypingIndicator={CustomTypingIndicator}
-          doSendMessageRequest={doSendMessageRequest}
-          {...(sendButton ? { SendButton: sendButton } : {})}
-        >
-          <ChannelViewInner
-            onBack={onBack}
-            showBackButton={showBackButton}
-            renderMessageInputActions={renderMessageInputActions}
-            renderConversationFooter={renderConversationFooter}
-            onLeaveConversation={onLeaveConversation}
-            onBlockParticipant={onBlockParticipant}
-            CustomChannelEmptyState={CustomChannelEmptyState}
-            showDeleteConversation={showDeleteConversation}
-            onDeleteConversationClick={onDeleteConversationClick}
-            onBlockParticipantClick={onBlockParticipantClick}
-            onReportParticipantClick={onReportParticipantClick}
-            showStarButton={showStarButton}
-            dmAgentEnabled={dmAgentEnabled}
-            chatbotVotingEnabled={chatbotVotingEnabled}
-            renderChannelBanner={renderChannelBanner}
-            customProfileContent={customProfileContent}
-            customChannelActions={customChannelActions}
-            renderMessage={renderMessage}
-            viewerLanguage={viewerLanguage}
-          />
-        </Channel>
+        <DmAgentEnabledContext.Provider value={dmAgentEnabled ?? false}>
+          <Channel
+            channel={channel}
+            MessageSystem={CustomSystemMessage}
+            EmptyStateIndicator={CustomChannelEmptyState}
+            LoadingIndicator={LoadingState}
+            DateSeparator={CustomDateSeparator}
+            TypingIndicator={CustomTypingIndicator}
+            doSendMessageRequest={doSendMessageRequest}
+            {...(sendButton ? { SendButton: sendButton } : {})}
+          >
+            <ChannelViewInner
+              onBack={onBack}
+              showBackButton={showBackButton}
+              renderMessageInputActions={renderMessageInputActions}
+              renderConversationFooter={renderConversationFooter}
+              onLeaveConversation={onLeaveConversation}
+              onBlockParticipant={onBlockParticipant}
+              CustomChannelEmptyState={CustomChannelEmptyState}
+              showDeleteConversation={showDeleteConversation}
+              onDeleteConversationClick={onDeleteConversationClick}
+              onBlockParticipantClick={onBlockParticipantClick}
+              onReportParticipantClick={onReportParticipantClick}
+              showStarButton={showStarButton}
+              dmAgentEnabled={dmAgentEnabled}
+              chatbotVotingEnabled={chatbotVotingEnabled}
+              renderChannelBanner={renderChannelBanner}
+              customProfileContent={customProfileContent}
+              customChannelActions={customChannelActions}
+              renderMessage={renderMessage}
+              viewerLanguage={viewerLanguage}
+            />
+          </Channel>
+        </DmAgentEnabledContext.Provider>
       </div>
     )
   }

package/src/components/CustomMessage/index.tsx

@@ -227,21 +227,20 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
           {isAttachment ? (
             <div className="str-chat__message-bubble-wrapper">
               {isMine ? (
-                <LockedAttachment.Creator
+                <LockedAttachment.Sent
                   title={message.metadata?.attachment_title}
                   mimeType={message.metadata?.attachment_mime_type}
                   thumbnailUrl={message.metadata?.attachment_thumbnail}
                   amountText={message.metadata?.amount_text}
                   detail={message.metadata?.attachment_detail}
                   paymentStatus={message.metadata?.payment_status}
-                  isUnlocking={isUnlocking(message.id)}
                   onPreviewClick={() => onUnlockClick?.(message, channel)}
                   onFetchSource={async () =>
                     await onFetchSource?.(message, channel)
                   }
                 />
               ) : (
-                <LockedAttachment.Visitor
+                <LockedAttachment.Received
                   title={message.metadata?.attachment_title}
                   mimeType={message.metadata?.attachment_mime_type}
                   thumbnailUrl={message.metadata?.attachment_thumbnail}

package/src/components/CustomTypingIndicator/CustomTypingIndicator.stories.tsx

@@ -2,16 +2,21 @@ import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 import type { Event } from 'stream-chat'
 import {
+  AIStates,
   ChannelStateProvider,
   ChatProvider,
   TypingProvider,
 } from 'stream-chat-react'
 
+import { DmAgentEnabledContext } from './DmAgentContext'
+
 import CustomTypingIndicator from '.'
 
 type StoryProps = {
   typingEventsEnabled?: boolean
   typing?: Record<string, Event>
+  aiState?: string
+  dmAgentEnabled?: boolean
 }
 
 const currentUser = {
@@ -33,10 +38,38 @@ const defaultTyping: Record<string, Event> = {
   } as Event,
 }
 
+type ListenerMap = Record<string, (event: { ai_state: string; cid: string }) => void>
+
+const createMockChannel = ({ aiState }: { aiState?: string }) => {
+  const listeners: ListenerMap = {}
+  const channel = {
+    cid: 'messaging:test',
+    state: {
+      members: {
+        [currentUser.id]: { user: currentUser },
+        [typingUser.id]: { user: typingUser },
+      },
+    },
+    on(eventType: string, handler: ListenerMap[string]) {
+      listeners[eventType] = handler
+      // Fire the requested AI state synchronously so the hook picks it up.
+      if (eventType === 'ai_indicator.update' && aiState) {
+        handler({ ai_state: aiState, cid: 'messaging:test' })
+      }
+      return { unsubscribe: () => {} }
+    },
+  }
+  return channel
+}
+
 const StoryWrapper: React.FC<StoryProps> = ({
   typingEventsEnabled = true,
-  typing = defaultTyping,
+  typing = {},
+  aiState,
+  dmAgentEnabled = true,
 }) => {
+  const channel = createMockChannel({ aiState })
+
   const chatContextValue = {
     client: {
       user: currentUser,
@@ -57,18 +90,7 @@ const StoryWrapper: React.FC<StoryProps> = ({
   }
 
   const channelStateValue = {
-    channel: {
-      state: {
-        members: {
-          [currentUser.id]: {
-            user: currentUser,
-          },
-          [typingUser.id]: {
-            user: typingUser,
-          },
-        },
-      },
-    },
+    channel,
     channelCapabilities: {},
     channelConfig: {
       typing_events: typingEventsEnabled,
@@ -85,9 +107,11 @@ const StoryWrapper: React.FC<StoryProps> = ({
     <ChatProvider value={chatContextValue as never}>
       <ChannelStateProvider value={channelStateValue as never}>
         <TypingProvider value={{ typing }}>
-          <div className="relative h-20 w-[200px] bg-[#f4f4f4] p-3">
-            <CustomTypingIndicator />
-          </div>
+          <DmAgentEnabledContext.Provider value={dmAgentEnabled}>
+            <div className="relative h-20 w-[200px] bg-[#f4f4f4] p-3">
+              <CustomTypingIndicator />
+            </div>
+          </DmAgentEnabledContext.Provider>
         </TypingProvider>
       </ChannelStateProvider>
     </ChatProvider>
@@ -104,7 +128,9 @@ const meta: Meta<StoryProps> = {
 export default meta
 
 export const Default: StoryFn<StoryProps> = (args) => <StoryWrapper {...args} />
-Default.args = {}
+Default.args = {
+  typing: defaultTyping,
+}
 
 export const HiddenWhenNoTyping: StoryFn<StoryProps> = (args) => (
   <StoryWrapper {...args} />
@@ -112,3 +138,17 @@ export const HiddenWhenNoTyping: StoryFn<StoryProps> = (args) => (
 HiddenWhenNoTyping.args = {
   typing: {},
 }
+
+export const AiAgentThinking: StoryFn<StoryProps> = (args) => (
+  <StoryWrapper {...args} />
+)
+AiAgentThinking.args = {
+  aiState: AIStates.Thinking,
+}
+
+export const AiAgentGenerating: StoryFn<StoryProps> = (args) => (
+  <StoryWrapper {...args} />
+)
+AiAgentGenerating.args = {
+  aiState: AIStates.Generating,
+}

package/src/components/CustomTypingIndicator/CustomTypingIndicator.test.tsx

@@ -0,0 +1,187 @@
+import React from 'react'
+import type { Event } from 'stream-chat'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { renderWithProviders, screen } from '../../test/utils'
+
+import { DmAgentEnabledContext } from './DmAgentContext'
+
+const visitor = { id: 'visitor-1', name: 'Visitor' }
+const agent = { id: 'creator-1', name: 'Creator', image: 'agent.png' }
+
+let typingContext: { typing: Record<string, Event> } = { typing: {} }
+let aiStateContext: { aiState: string } = { aiState: 'AI_STATE_IDLE' }
+let channelStateContext: {
+  channel: {
+    state: { members: Record<string, { user: typeof visitor | typeof agent }> }
+  }
+  channelConfig: { typing_events: boolean }
+  thread: undefined
+} = {
+  channel: {
+    state: {
+      members: {
+        [visitor.id]: { user: visitor },
+        [agent.id]: { user: agent },
+      },
+    },
+  },
+  channelConfig: { typing_events: true },
+  thread: undefined,
+}
+
+vi.mock('stream-chat-react', () => ({
+  AIStates: {
+    Error: 'AI_STATE_ERROR',
+    ExternalSources: 'AI_STATE_EXTERNAL_SOURCES',
+    Generating: 'AI_STATE_GENERATING',
+    Idle: 'AI_STATE_IDLE',
+    Stop: 'AI_STATE_STOP',
+    Thinking: 'AI_STATE_THINKING',
+  },
+  useAIState: () => aiStateContext,
+  useChannelStateContext: () => channelStateContext,
+  useChatContext: () => ({ client: { user: visitor } }),
+  useTypingContext: () => typingContext,
+}))
+
+vi.mock('../Avatar', () => ({
+  Avatar: ({ name, id }: { name: string; id: string }) => (
+    <div data-testid="avatar" data-id={id}>
+      {name}
+    </div>
+  ),
+}))
+
+const importIndicator = async () => (await import('.')).default
+
+const renderIndicator = async (dmAgentEnabled = true) => {
+  const CustomTypingIndicator = await importIndicator()
+  return renderWithProviders(
+    <DmAgentEnabledContext.Provider value={dmAgentEnabled}>
+      <CustomTypingIndicator />
+    </DmAgentEnabledContext.Provider>
+  )
+}
+
+describe('CustomTypingIndicator', () => {
+  beforeEach(() => {
+    typingContext = { typing: {} }
+    aiStateContext = { aiState: 'AI_STATE_IDLE' }
+    channelStateContext = {
+      channel: {
+        state: {
+          members: {
+            [visitor.id]: { user: visitor },
+            [agent.id]: { user: agent },
+          },
+        },
+      },
+      channelConfig: { typing_events: true },
+      thread: undefined,
+    }
+  })
+
+  it('renders nothing when idle and no typers', async () => {
+    await renderIndicator()
+    expect(screen.queryByTestId('typing-indicator')).toBeNull()
+    expect(screen.queryByTestId('typing-indicator-ai')).toBeNull()
+  })
+
+  it('renders the human typing bubble when someone else is typing', async () => {
+    typingContext = {
+      typing: {
+        [agent.id]: {
+          type: 'typing.start',
+          user: agent,
+          parent_id: undefined,
+        } as Event,
+      },
+    }
+    await renderIndicator()
+    expect(screen.getByTestId('typing-indicator')).toBeInTheDocument()
+    expect(screen.getByTestId('avatar')).toHaveAttribute('data-id', agent.id)
+  })
+
+  it('hides the human typing bubble when typing_events is disabled', async () => {
+    channelStateContext.channelConfig.typing_events = false
+    typingContext = {
+      typing: {
+        [agent.id]: {
+          type: 'typing.start',
+          user: agent,
+          parent_id: undefined,
+        } as Event,
+      },
+    }
+    await renderIndicator()
+    expect(screen.queryByTestId('typing-indicator')).toBeNull()
+  })
+
+  it('renders the AI bubble when the agent is thinking', async () => {
+    aiStateContext = { aiState: 'AI_STATE_THINKING' }
+    await renderIndicator()
+    expect(screen.getByTestId('typing-indicator-ai')).toBeInTheDocument()
+    expect(screen.getByTestId('avatar')).toHaveAttribute('data-id', agent.id)
+  })
+
+  it('renders the AI bubble when the agent is generating', async () => {
+    aiStateContext = { aiState: 'AI_STATE_GENERATING' }
+    await renderIndicator()
+    expect(screen.getByTestId('typing-indicator-ai')).toBeInTheDocument()
+  })
+
+  it('renders the AI bubble when the agent is checking external sources', async () => {
+    aiStateContext = { aiState: 'AI_STATE_EXTERNAL_SOURCES' }
+    await renderIndicator()
+    expect(screen.getByTestId('typing-indicator-ai')).toBeInTheDocument()
+  })
+
+  it('does not render the AI bubble inside a thread list', async () => {
+    aiStateContext = { aiState: 'AI_STATE_GENERATING' }
+    const CustomTypingIndicator = await importIndicator()
+    renderWithProviders(
+      <DmAgentEnabledContext.Provider value={true}>
+        <CustomTypingIndicator threadList />
+      </DmAgentEnabledContext.Provider>
+    )
+    expect(screen.queryByTestId('typing-indicator-ai')).toBeNull()
+  })
+
+  it('renders the AI bubble even when typing_events is disabled', async () => {
+    channelStateContext.channelConfig.typing_events = false
+    aiStateContext = { aiState: 'AI_STATE_THINKING' }
+    await renderIndicator()
+    expect(screen.getByTestId('typing-indicator-ai')).toBeInTheDocument()
+  })
+
+  it('falls back to a default avatar id when no other channel member exists', async () => {
+    channelStateContext.channel.state.members = {
+      [visitor.id]: { user: visitor },
+    }
+    aiStateContext = { aiState: 'AI_STATE_GENERATING' }
+    await renderIndicator()
+    expect(screen.getByTestId('typing-indicator-ai')).toBeInTheDocument()
+    expect(screen.getByTestId('avatar')).toHaveAttribute('data-id', 'ai-agent')
+  })
+
+  it('does not render the AI bubble when dmAgentEnabled is false', async () => {
+    aiStateContext = { aiState: 'AI_STATE_GENERATING' }
+    await renderIndicator(false)
+    expect(screen.queryByTestId('typing-indicator-ai')).toBeNull()
+  })
+
+  it('still renders the human bubble when dmAgentEnabled is false', async () => {
+    typingContext = {
+      typing: {
+        [agent.id]: {
+          type: 'typing.start',
+          user: agent,
+          parent_id: undefined,
+        } as Event,
+      },
+    }
+    await renderIndicator(false)
+    expect(screen.getByTestId('typing-indicator')).toBeInTheDocument()
+  })
+})

package/src/components/CustomTypingIndicator/DmAgentContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react'
+
+export const DmAgentEnabledContext = createContext<boolean>(false)