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

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/LinkAttachment/LinkAttachment.stories.tsx

@@ -0,0 +1,307 @@
+import {
+  ArticleIcon,
+  MusicNotesIcon,
+  PlayIcon,
+  QuestionIcon,
+} from '@phosphor-icons/react'
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import LinkAttachment from '.'
+
+const IMAGE_THUMBNAIL = '/image-thumbnail.jpg'
+const VIDEO_SOURCE = '/video-source.mp4'
+const VIDEO_POSTER = '/video-thumbnail.jpg'
+const AUDIO_SOURCE = '/audio-source.mp3'
+const PDF_SOURCE = '/document-source.pdf'
+
+const meta: Meta = {
+  title: 'LinkAttachment',
+  parameters: { layout: 'fullscreen' },
+}
+export default meta
+
+const Table = ({ children }: { children: React.ReactNode }) => (
+  <div className="min-h-screen w-full bg-[#F9F7F4] p-12">
+    <table className="border-separate border-spacing-4">{children}</table>
+  </div>
+)
+
+const TableHead = ({ columns }: { columns: string[] }) => (
+  <thead>
+    <tr>
+      <th className="pb-2 text-left text-xs font-medium text-black/40" />
+      {columns.map((column) => (
+        <th
+          key={column}
+          className="pb-2 text-left text-xs font-medium text-black/40"
+        >
+          {column}
+        </th>
+      ))}
+    </tr>
+  </thead>
+)
+
+const RowLabel = ({ children }: { children: React.ReactNode }) => (
+  <td className="pr-4 pt-2 text-right align-top text-xs font-medium text-black/40">
+    {children}
+  </td>
+)
+
+const APP_ICON_BASE =
+  'inline-flex size-4 items-center justify-center overflow-hidden rounded-[4px]'
+
+const SpotifyBadge = () => (
+  <span
+    aria-hidden
+    className={`${APP_ICON_BASE} bg-[#1ed760] text-white`}
+    title="Spotify"
+  >
+    <MusicNotesIcon className="size-3" weight="fill" />
+  </span>
+)
+
+const TikTokBadge = () => (
+  <span
+    aria-hidden
+    className={`${APP_ICON_BASE} bg-[#101211] text-white`}
+    title="TikTok"
+  >
+    <PlayIcon className="size-3" weight="fill" />
+  </span>
+)
+
+const FaqBadge = () => (
+  <span
+    aria-hidden
+    className={`${APP_ICON_BASE} bg-[#061492] text-white`}
+    title="FAQ"
+  >
+    <QuestionIcon className="size-3" weight="bold" />
+  </span>
+)
+
+const FormBadge = () => (
+  <span
+    aria-hidden
+    className={`${APP_ICON_BASE} bg-[#2665d6] text-white`}
+    title="Form"
+  >
+    <ArticleIcon className="size-3" weight="fill" />
+  </span>
+)
+
+const LINK_APPS: Array<{
+  key: string
+  appIcon: React.ReactNode
+  title: string
+  description: string
+  url?: string
+  ctaLabel?: string
+}> = [
+  {
+    key: 'spotify',
+    appIcon: <SpotifyBadge />,
+    title: 'My Playlist',
+    description: 'A handpicked workout mix I made for my clients.',
+    url: 'tr.ee/briemix',
+  },
+  {
+    key: 'tiktok',
+    appIcon: <TikTokBadge />,
+    title: 'My TikTok',
+    description: 'New form-check clips every week — follow along.',
+    url: 'tr.ee/brietok',
+  },
+  {
+    key: 'faq',
+    appIcon: <FaqBadge />,
+    title: 'Brie’s FAQ',
+    description: 'Get answers on my process and what to expect.',
+    ctaLabel: 'View FAQs',
+  },
+  {
+    key: 'form',
+    appIcon: <FormBadge />,
+    title: 'Fitness Assessment Fillout',
+    description: 'Share information about your journey and I’ll work on...',
+    ctaLabel: 'Complete form',
+  },
+]
+
+/**
+ * "Attachments" section of the Figma board — image / video / audio /
+ * file attachments shown across the three messaging states. These are
+ * pure media cards: the hero fills the card and there's no title /
+ * description / link metadata. Playable types use inline native controls:
+ *   - **Image** — full-bleed thumbnail; Received opens an image preview.
+ *   - **Video** — inline `<video controls>` with a poster.
+ *   - **Audio** — inline `<audio controls>` over the audio type-icon.
+ *   - **PDF** — type-icon placeholder; Received opens the PDF in the
+ *     browser's native viewer.
+ *   - **File** — generic file type-icon; Received opens a preview.
+ *   - **Placeholder** — empty draft state with the image type-icon.
+ */
+const ATTACHMENT_ROWS: Array<{
+  label: string
+  /** Drives the placeholder type-icon and the inline player switch. */
+  mimeType?: string
+  /** Thumbnail (image source or video poster). */
+  thumbnailUrl?: string
+  /** Playable media URL — when set with a video/audio mime, renders inline. */
+  sourceUrl?: string
+  /**
+   * Override the Received `onClick` handler. Used by the PDF row to open
+   * the PDF in the browser's native viewer.
+   */
+  onReceivedClick?: () => void
+}> = [
+  { label: 'Image', mimeType: 'image/jpeg', thumbnailUrl: IMAGE_THUMBNAIL },
+  {
+    label: 'Video',
+    mimeType: 'video/mp4',
+    thumbnailUrl: VIDEO_POSTER,
+    sourceUrl: VIDEO_SOURCE,
+  },
+  { label: 'Audio', mimeType: 'audio/mpeg', sourceUrl: AUDIO_SOURCE },
+  {
+    label: 'PDF',
+    mimeType: 'application/pdf',
+    onReceivedClick: () => window.open(PDF_SOURCE, '_blank', 'noopener'),
+  },
+  { label: 'File', mimeType: 'application/octet-stream' },
+  { label: 'Placeholder' },
+]
+
+export const Attachments: StoryFn = () => (
+  <Table>
+    <TableHead columns={['Composer', 'Sent', 'Received']} />
+    <tbody>
+      {ATTACHMENT_ROWS.map(
+        ({ label, mimeType, thumbnailUrl, sourceUrl, onReceivedClick }) => (
+          <tr key={label}>
+            <RowLabel>{label}</RowLabel>
+            <td className="align-top">
+              <LinkAttachment.Composer
+                mimeType={mimeType}
+                thumbnailUrl={thumbnailUrl}
+                sourceUrl={sourceUrl}
+                onDismiss={() => alert(`Dismissed ${label}`)}
+              />
+            </td>
+            <td className="align-top">
+              <LinkAttachment.Sent
+                mimeType={mimeType}
+                thumbnailUrl={thumbnailUrl}
+                sourceUrl={sourceUrl}
+              />
+            </td>
+            <td className="align-top">
+              <LinkAttachment.Received
+                mimeType={mimeType}
+                thumbnailUrl={thumbnailUrl}
+                sourceUrl={sourceUrl}
+                onClick={
+                  onReceivedClick ?? (() => alert(`Open ${label} preview`))
+                }
+              />
+            </td>
+          </tr>
+        )
+      )}
+    </tbody>
+  </Table>
+)
+
+type LinkAppLayout = 'featured' | 'classic'
+type LinkAppState = 'Received' | 'Sent' | 'Composer'
+
+const LINK_APP_ROWS: Array<{ layout: LinkAppLayout; state: LinkAppState }> = [
+  { layout: 'featured', state: 'Received' },
+  { layout: 'featured', state: 'Sent' },
+  { layout: 'featured', state: 'Composer' },
+  { layout: 'classic', state: 'Received' },
+  { layout: 'classic', state: 'Sent' },
+  { layout: 'classic', state: 'Composer' },
+]
+
+const renderLinkAppCard = (
+  layout: LinkAppLayout,
+  state: LinkAppState,
+  app: (typeof LINK_APPS)[number]
+) => {
+  const { key, appIcon, title, description, url, ctaLabel } = app
+  const thumbnailUrl = layout === 'featured' ? IMAGE_THUMBNAIL : undefined
+  const ctaWithHandler = ctaLabel
+    ? { label: ctaLabel, onClick: () => alert(`Tapped ${ctaLabel}`) }
+    : undefined
+  const ctaSilent = ctaLabel ? { label: ctaLabel } : undefined
+
+  if (state === 'Received') {
+    return (
+      <LinkAttachment.Received
+        layout={layout}
+        appIcon={appIcon}
+        title={title}
+        description={description}
+        thumbnailUrl={thumbnailUrl}
+        url={url}
+        cta={ctaWithHandler}
+      />
+    )
+  }
+  if (state === 'Sent') {
+    return (
+      <LinkAttachment.Sent
+        layout={layout}
+        appIcon={appIcon}
+        title={title}
+        description={description}
+        thumbnailUrl={thumbnailUrl}
+        url={url}
+        cta={ctaSilent}
+      />
+    )
+  }
+  return (
+    <LinkAttachment.Composer
+      layout={layout}
+      appIcon={appIcon}
+      title={title}
+      description={description}
+      thumbnailUrl={thumbnailUrl}
+      url={url}
+      cta={ctaSilent}
+      onDismiss={() => alert(`Dismissed ${key}`)}
+    />
+  )
+}
+
+/**
+ * "LinkApps" section of the Figma board — link previews with a brand
+ * badge prefixing the title and either a URL footer (Spotify, TikTok) or
+ * a CTA button (FAQ, Form). Each app is shown in both the **Featured**
+ * (hero image) and **Classic** (compact, no hero) layouts across all
+ * three messaging states.
+ */
+export const LinkApps: StoryFn = () => (
+  <Table>
+    <TableHead columns={LINK_APPS.map(({ key }) => key)} />
+    <tbody>
+      {LINK_APP_ROWS.map(({ layout, state }) => {
+        const label = `${layout === 'featured' ? 'Featured' : 'Classic'} (${state})`
+        return (
+          <tr key={label}>
+            <RowLabel>{label}</RowLabel>
+            {LINK_APPS.map((app) => (
+              <td key={app.key} className="align-top">
+                {renderLinkAppCard(layout, state, app)}
+              </td>
+            ))}
+          </tr>
+        )
+      })}
+    </tbody>
+  </Table>
+)