@linktr.ee/messaging-react 1.40.2 → 2.0.1

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)

package/src/components/CustomTypingIndicator/index.tsx

@@ -1,6 +1,8 @@
-import React from 'react'
-import type { Event } from 'stream-chat'
+import React, { useContext } from 'react'
+import type { Event, UserResponse } from 'stream-chat'
 import {
+  AIStates,
+  useAIState,
   useChannelStateContext,
   useChatContext,
   useTypingContext,
@@ -8,6 +10,8 @@ import {
 
 import { Avatar } from '../Avatar'
 
+import { DmAgentEnabledContext } from './DmAgentContext'
+
 interface CustomTypingIndicatorProps {
   threadList?: boolean
 }
@@ -25,10 +29,38 @@ const Circle = ({ cx, index }: { cx: string; index: number }) => (
   </circle>
 )
 
+const AI_ACTIVE_STATES = new Set<string>([
+  AIStates.Thinking,
+  AIStates.Generating,
+  AIStates.ExternalSources,
+])
+
 const CustomTypingIndicator = ({ threadList }: CustomTypingIndicatorProps) => {
   const { channel, channelConfig, thread } = useChannelStateContext()
   const { client } = useChatContext()
   const { typing = {} } = useTypingContext()
+  const { aiState } = useAIState(channel)
+  const dmAgentEnabled = useContext(DmAgentEnabledContext)
+
+  // Show the AI indicator whenever the consumer agent is producing a reply.
+  // This event stream is independent of `typing.start`/`typing.stop`, so it is
+  // intentionally NOT gated by `channelConfig.typing_events`. Gate strictly on
+  // `dmAgentEnabled` so stale or off-surface ai_indicator events never surface
+  // the bubble on channels where the agent is not active.
+  const isAiActive =
+    !threadList && dmAgentEnabled && AI_ACTIVE_STATES.has(aiState)
+
+  if (isAiActive) {
+    const agentUser = findOtherChannelUser(channel, client.user?.id)
+    return (
+      <TypingBubble
+        avatarId={agentUser?.id ?? 'ai-agent'}
+        avatarName={agentUser?.name ?? agentUser?.id ?? 'Agent'}
+        avatarImage={agentUser?.image}
+        testId="typing-indicator-ai"
+      />
+    )
+  }
 
   if (channelConfig?.typing_events === false) {
     return null
@@ -59,43 +91,75 @@ const CustomTypingIndicator = ({ threadList }: CustomTypingIndicatorProps) => {
       ? channel.state.members[typingUser.id].user
       : undefined
 
-  const avatarId = typingUser?.id ?? memberUser?.id ?? 'typing-user'
-  const avatarName =
-    typingUser?.name ?? memberUser?.name ?? typingUser?.id ?? 'Typing user'
-  const avatarImage = typingUser?.image ?? memberUser?.image
-
   return (
-    <div
-      className="str-chat__typing-indicator !items-end !bg-transparent"
-      data-testid="typing-indicator"
-      style={{ insetInlineStart: 0, insetInlineEnd: 'auto' }}
-    >
-      <div className="shrink-0" aria-hidden="true">
-        <Avatar
-          id={avatarId}
-          name={avatarName}
-          image={avatarImage}
-          size={24}
-          shape="circle"
-        />
-      </div>
-
-      <div className="px-4 py-3 rounded-lg bg-[#E9EAED] h-12 flex flex-col justify-end">
-        <svg
-          aria-hidden="true"
-          className="block overflow-visible mb-[0.2rem]"
-          viewBox="0 0 32 8"
-          width="32"
-          height="8"
-          overflow="visible"
-        >
-          <Circle cx="4" index={0} />
-          <Circle cx="16" index={1} />
-          <Circle cx="28" index={2} />
-        </svg>
-      </div>
-    </div>
+    <TypingBubble
+      avatarId={typingUser?.id ?? memberUser?.id ?? 'typing-user'}
+      avatarName={
+        typingUser?.name ?? memberUser?.name ?? typingUser?.id ?? 'Typing user'
+      }
+      avatarImage={typingUser?.image ?? memberUser?.image}
+      testId="typing-indicator"
+    />
   )
 }
 
+const TypingBubble = ({
+  avatarId,
+  avatarName,
+  avatarImage,
+  testId,
+}: {
+  avatarId: string
+  avatarName: string
+  avatarImage?: string | null
+  testId: string
+}) => (
+  <div
+    className="str-chat__typing-indicator !items-end !bg-transparent"
+    data-testid={testId}
+    style={{ insetInlineStart: 0, insetInlineEnd: 'auto' }}
+  >
+    <div className="shrink-0" aria-hidden="true">
+      <Avatar
+        id={avatarId}
+        name={avatarName}
+        image={avatarImage ?? undefined}
+        size={24}
+        shape="circle"
+      />
+    </div>
+
+    <div className="px-4 py-3 rounded-lg bg-[#E9EAED] h-12 flex flex-col justify-end">
+      <svg
+        aria-hidden="true"
+        className="block overflow-visible mb-[0.2rem]"
+        viewBox="0 0 32 8"
+        width="32"
+        height="8"
+        overflow="visible"
+      >
+        <Circle cx="4" index={0} />
+        <Circle cx="16" index={1} />
+        <Circle cx="28" index={2} />
+      </svg>
+    </div>
+  </div>
+)
+
+type ChannelLike = ReturnType<typeof useChannelStateContext>['channel']
+
+function findOtherChannelUser(
+  channel: ChannelLike,
+  selfId: string | undefined
+): UserResponse | undefined {
+  const members = channel?.state?.members ?? {}
+  for (const member of Object.values(members)) {
+    const memberUser = member?.user
+    if (memberUser && memberUser.id !== selfId) {
+      return memberUser
+    }
+  }
+  return undefined
+}
+
 export default CustomTypingIndicator

package/src/components/MessagingShell/index.tsx

@@ -35,6 +35,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   onMessageSent,
   showStarButton = false,
   chatbotVotingEnabled = false,
+  viewerLanguage,
   renderMessagePreview,
   renderChannelBanner,
   customProfileContent,
@@ -60,9 +61,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
     string | null
   >(null)
 
-  const {
-    showDeleteConversation = true,
-  } = capabilities
+  const { showDeleteConversation = true } = capabilities
 
   // Create default filters and merge with provided filters
   const channelFilters = React.useMemo(() => {
@@ -194,7 +193,6 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
               const channel = await service.startChannelWithParticipant({
                 id: initialParticipantData.id,
                 name: initialParticipantData.name,
-                email: initialParticipantData.email,
                 phone: initialParticipantData.phone,
               })
 
@@ -375,6 +373,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
             channelRenderFilterFn={channelRenderFilterFn}
             customEmptyStateIndicator={channelListCustomEmptyStateIndicator}
             renderMessagePreview={renderMessagePreview}
+            viewerLanguage={viewerLanguage}
           />
         </div>
 
@@ -418,6 +417,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
                 onMessageSent={onMessageSent}
                 showStarButton={showStarButton}
                 chatbotVotingEnabled={chatbotVotingEnabled}
+                viewerLanguage={viewerLanguage}
                 customProfileContent={customProfileContent}
                 customChannelActions={customChannelActions}
                 renderMessage={renderMessage}

package/src/index.ts

@@ -18,7 +18,10 @@ export {
   resolveLinkAttachment,
   resolveMediaFromMessage,
 } from './components/MediaMessage'
-export type { MediaMessageProps, MediaMessageResolved } from './components/MediaMessage'
+export type {
+  MediaMessageProps,
+  MediaMessageResolved,
+} from './components/MediaMessage'
 
 // Providers
 export { MessagingProvider } from './providers/MessagingProvider'
@@ -31,6 +34,10 @@ export { useCustomMessage } from './components/CustomMessage/context'
 
 // Utils
 export { formatRelativeTime } from './utils/formatRelativeTime'
+export {
+  getMessageDisplayText,
+  normalizeLanguageCode,
+} from './utils/getMessageDisplayText'
 
 // Types
 export type {
@@ -45,7 +52,11 @@ export type {
 export type { MessageMetadata } from './stream-custom-data'
 export type { AvatarProps } from './components/Avatar'
 export type { ActionButtonProps } from './components/ActionButton'
-export type { CreatorCardProps, VisitorCardProps, LockedAttachmentContextValue } from './components/LockedAttachment'
+export type {
+  CreatorCardProps,
+  VisitorCardProps,
+  LockedAttachmentContextValue,
+} from './components/LockedAttachment'
 export type { CustomMessageRegistry } from './components/CustomMessage/context'
 export type { AttachmentSourceType } from './components/AttachmentCard/utils/mimeType'
 export type { Faq, FaqListProps } from './components/FaqList'

package/src/stories/mocks.tsx

@@ -110,31 +110,26 @@ export const mockParticipants = [
   {
     id: 'participant-1',
     name: 'Alice Johnson',
-    email: 'alice@example.com',
     image: 'https://i.pravatar.cc/150?img=2',
   },
   {
     id: 'participant-2',
     name: 'Bob Smith',
-    email: 'bob@example.com',
     image: 'https://i.pravatar.cc/150?img=3',
   },
   {
     id: 'participant-3',
     name: 'Carol Williams',
-    email: 'carol@example.com',
     image: 'https://i.pravatar.cc/150?img=4',
   },
   {
     id: 'participant-4',
     name: 'David Brown',
-    email: 'david@example.com',
     image: 'https://i.pravatar.cc/150?img=5',
   },
   {
     id: 'participant-5',
     name: 'Emma Davis',
-    email: 'emma@example.com',
     image: 'https://i.pravatar.cc/150?img=6',
   },
 ]
@@ -143,10 +138,8 @@ export const mockParticipants = [
 export const mockParticipantSource = {
   loadParticipants: async (options?: { search?: string; limit?: number }) => {
     const searchTerm = options?.search || ''
-    const filtered = mockParticipants.filter(
-      (p) =>
-        p.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        p.email.toLowerCase().includes(searchTerm.toLowerCase())
+    const filtered = mockParticipants.filter((p) =>
+      p.name.toLowerCase().includes(searchTerm.toLowerCase())
     )
     return {
       participants: filtered,

package/src/styles.css

@@ -1,6 +1,13 @@
 /* Stream Chat base styles */
 @import 'stream-chat-react/dist/css/v2/index.css';
 
+/* Inherit the host's font instead of stream-chat-react's hardcoded system stack.
+   In admin (federation host) this resolves to Link Sans; on linktr.ee profile
+   pages it resolves to the creator's profile font. */
+.str-chat {
+  --str-chat__font-family: inherit;
+}
+
 /* Dialog component styles - used by messaging components */
 /* Note: Dialogs get moved to the top layer when opened with .showModal() */
 .mes-dialog {

package/src/types.ts

@@ -25,7 +25,6 @@ export type { LockedAttachmentSource } from './components/LockedAttachment'
 export interface Participant {
   id: string
   name: string
-  email?: string
   image?: string
   username?: string
   phone?: string
@@ -95,6 +94,11 @@ export interface ChannelListProps {
     message: LocalMessage | undefined,
     defaultPreview?: string
   ) => React.ReactNode
+  /**
+   * Language code used to pick translated message text from Stream Chat i18n.
+   * Falls back to message.text when no matching translation exists.
+   */
+  viewerLanguage?: string
 }
 
 /**
@@ -173,6 +177,11 @@ export interface ChannelViewProps {
    * Defaults to false.
    */
   chatbotVotingEnabled?: boolean
+  /**
+   * Language code used to pick translated message text from Stream Chat i18n.
+   * Falls back to message.text when no matching translation exists.
+   */
+  viewerLanguage?: string
 
   /**
    * Custom render function for a banner/card component that renders
@@ -244,6 +253,7 @@ export type ChannelViewPassthroughProps = Pick<
   | 'onMessageSent'
   | 'showStarButton'
   | 'chatbotVotingEnabled'
+  | 'viewerLanguage'
   | 'renderChannelBanner'
   | 'customProfileContent'
   | 'customChannelActions'

package/src/utils/getMessageDisplayText.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  getMessageDisplayText,
+  normalizeLanguageCode,
+} from './getMessageDisplayText'
+
+describe('getMessageDisplayText', () => {
+  it('returns translated text for the viewer language', () => {
+    expect(
+      getMessageDisplayText({
+        message: {
+          text: 'Bonjour',
+          i18n: {
+            language: 'fr',
+            en_text: 'Hello',
+          },
+        },
+        viewerLanguage: 'en-US',
+      })
+    ).toBe('Hello')
+  })
+
+  it('falls back to the original message text when no translation exists', () => {
+    expect(
+      getMessageDisplayText({
+        message: {
+          text: 'Bonjour',
+          i18n: {
+            language: 'fr',
+          },
+        },
+        viewerLanguage: 'es',
+      })
+    ).toBe('Bonjour')
+  })
+})
+
+describe('normalizeLanguageCode', () => {
+  it('normalizes locale-style language codes to their primary subtag', () => {
+    expect(normalizeLanguageCode('fr-FR')).toBe('fr')
+    expect(normalizeLanguageCode('en_US')).toBe('en')
+  })
+})

package/src/utils/getMessageDisplayText.ts

@@ -0,0 +1,27 @@
+import type { LocalMessage } from 'stream-chat'
+
+type MessageWithI18n = Pick<LocalMessage, 'text'> & {
+  i18n?: Record<string, string> | null
+}
+
+export function normalizeLanguageCode(language?: string): string | undefined {
+  const normalized = language?.trim().toLowerCase().split(/[-_]/)[0]
+  return normalized || undefined
+}
+
+export function getMessageDisplayText({
+  message,
+  viewerLanguage,
+}: {
+  message?: MessageWithI18n | null
+  viewerLanguage?: string
+}): string | undefined {
+  const fallbackText = message?.text
+  const normalizedLanguage = normalizeLanguageCode(viewerLanguage)
+
+  if (!normalizedLanguage) {
+    return fallbackText
+  }
+
+  return message?.i18n?.[`${normalizedLanguage}_text`] ?? fallbackText
+}