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

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

@@ -1,6 +1,8 @@
 import type { Meta, StoryFn } from '@storybook/react'
 import React, { useState } from 'react'
 
+import type { LockedAttachmentGalleryItem } from './types'
+
 import LockedAttachment from '.'
 
 const VIDEO_THUMBNAIL_BLURRED = '/video-thumbnail-blurred.jpg'
@@ -73,6 +75,37 @@ const VARIANTS = [
   },
 ]
 
+/**
+ * A mixed-media collection (a video + 3 photos) used by the Gallery stories
+ * below. Each `LockedAttachment.*` card accepts a `gallery` prop and renders
+ * a carousel of these items when 2+ items are provided.
+ */
+const GALLERY_ITEMS: LockedAttachmentGalleryItem[] = [
+  {
+    mimeType: 'video/mp4',
+    thumbnailUrl: VIDEO_THUMBNAIL_BLURRED,
+    sourceUrl: VIDEO_SOURCE,
+  },
+  {
+    mimeType: 'image/jpeg',
+    thumbnailUrl: IMAGE_THUMBNAIL_BLURRED,
+    sourceUrl: IMAGE_SOURCE,
+  },
+  {
+    mimeType: 'image/jpeg',
+    thumbnailUrl: DOCUMENT_THUMBNAIL_BLURRED,
+    sourceUrl: DOCUMENT_SOURCE,
+  },
+  {
+    mimeType: 'image/jpeg',
+    thumbnailUrl: AUDIO_THUMBNAIL_BLURRED,
+    sourceUrl: AUDIO_SOURCE,
+  },
+]
+
+const GALLERY_DETAIL = '1 video, 3 photos'
+const GALLERY_TITLE = 'Workout Guide'
+
 const Table = ({ children }: { children: React.ReactNode }) => (
   <div className="min-h-screen w-full p-12 bg-[#F9F7F4]">
     <table className="border-separate border-spacing-4">{children}</table>
@@ -99,91 +132,7 @@ const TableHead = ({
   </thead>
 )
 
-export const Received: StoryFn = () => {
-  const [isPaid, setPaid] = useState<string | undefined>()
-  const [isUnlocking, setUnlocking] = useState<string | undefined>()
-
-  return (
-    <Table>
-      <TableHead variants={VARIANTS} />
-      <tbody>
-        <tr>
-          <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-            Locked
-          </td>
-          {VARIANTS.map(
-            ({
-              title,
-              mimeType,
-              detail,
-              thumbnailUrl,
-              thumbnailUnlockedUrl,
-              sourceUrl,
-            }) => (
-              <td key={mimeType} className="align-top">
-                <LockedAttachment.Visitor
-                  title={title}
-                  thumbnailUrl={thumbnailUrl}
-                  mimeType={mimeType}
-                  detail={detail}
-                  paymentStatus={isPaid === mimeType ? 'paid' : undefined}
-                  amountText="AU$9.99"
-                  isUnlocking={isUnlocking === mimeType}
-                  onUnlockClick={() => {
-                    setUnlocking(mimeType)
-                    setTimeout(() => {
-                      setUnlocking(undefined)
-                      setPaid(mimeType)
-                    }, 1500)
-                  }}
-                  onDownloadClick={() => alert('Download clicked')}
-                  onFetchSource={async () => ({
-                    sourceUrl: sourceUrl,
-                    thumbnailUrl: thumbnailUnlockedUrl,
-                  })}
-                />
-              </td>
-            )
-          )}
-        </tr>
-        <tr>
-          <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-            Unlocked
-          </td>
-          {VARIANTS.map(
-            ({
-              title,
-              mimeType,
-              detail,
-              thumbnailUrl,
-              thumbnailUnlockedUrl,
-              sourceUrl,
-            }) => (
-              <td key={mimeType} className="align-top">
-                <LockedAttachment.Visitor
-                  title={title}
-                  thumbnailUrl={thumbnailUrl}
-                  mimeType={mimeType}
-                  detail={detail}
-                  amountText="AU$9.99"
-                  paymentStatus="paid"
-                  onUnlockClick={() => alert('Unlock clicked')}
-                  onDownloadClick={() => alert('Download clicked')}
-                  onFetchSource={async () => ({
-                    sourceUrl: sourceUrl,
-                    thumbnailUrl: thumbnailUnlockedUrl,
-                  })}
-                />
-              </td>
-            )
-          )}
-        </tr>
-      </tbody>
-    </Table>
-  )
-}
-
-export const Sent: StoryFn = () => (
+export const Composer: StoryFn = () => (
   <Table>
     <TableHead variants={VARIANTS} />
     <tbody>
@@ -200,7 +149,7 @@ export const Sent: StoryFn = () => (
             sourceUrl,
           }) => (
             <td key={mimeType} className="align-top">
-              <LockedAttachment.Creator
+              <LockedAttachment.Composer
                 placeholderTitle="Attachment title"
                 placeholderAmountText="AU$0.00"
                 thumbnailUrl={thumbnailUrl}
@@ -224,7 +173,7 @@ export const Sent: StoryFn = () => (
         </td>
         {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
           <td key={mimeType} className="align-top">
-            <LockedAttachment.Creator
+            <LockedAttachment.Composer
               title={title}
               thumbnailUrl={thumbnailUrl}
               mimeType={mimeType}
@@ -235,6 +184,14 @@ export const Sent: StoryFn = () => (
           </td>
         ))}
       </tr>
+    </tbody>
+  </Table>
+)
+
+export const Sent: StoryFn = () => (
+  <Table>
+    <TableHead variants={VARIANTS} />
+    <tbody>
       <tr>
         <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
           Sent
@@ -249,7 +206,7 @@ export const Sent: StoryFn = () => (
             sourceUrl,
           }) => (
             <td key={mimeType} className="align-top">
-              <LockedAttachment.Creator
+              <LockedAttachment.Sent
                 title={title}
                 thumbnailUrl={thumbnailUrl}
                 mimeType={mimeType}
@@ -281,7 +238,7 @@ export const Sent: StoryFn = () => (
             sourceUrl,
           }) => (
             <td key={mimeType} className="align-top">
-              <LockedAttachment.Creator
+              <LockedAttachment.Sent
                 title={title}
                 thumbnailUrl={thumbnailUrl}
                 mimeType={mimeType}
@@ -303,3 +260,187 @@ export const Sent: StoryFn = () => (
     </tbody>
   </Table>
 )
+
+export const Gallery: StoryFn = () => {
+  const [isPaid, setPaid] = useState(false)
+  const [isUnlocking, setUnlocking] = useState(false)
+
+  return (
+    <Table>
+      <thead>
+        <tr>
+          <th className="text-left text-xs font-medium text-black/40 pb-2" />
+          <th className="text-left text-xs font-medium text-black/40 pb-2">
+            Composer
+          </th>
+          <th className="text-left text-xs font-medium text-black/40 pb-2">
+            Sent
+          </th>
+          <th className="text-left text-xs font-medium text-black/40 pb-2">
+            Received
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
+            Locked
+          </td>
+          <td className="align-top">
+            <LockedAttachment.Composer
+              title={GALLERY_TITLE}
+              detail={GALLERY_DETAIL}
+              amountText="AU$50.00"
+              gallery={GALLERY_ITEMS}
+              onDismiss={() => alert('Dismissed gallery')}
+              onEditClick={() => alert('Edit gallery')}
+            />
+          </td>
+          <td className="align-top">
+            <LockedAttachment.Sent
+              title={GALLERY_TITLE}
+              detail={GALLERY_DETAIL}
+              amountText="AU$50.00"
+              gallery={GALLERY_ITEMS}
+            />
+          </td>
+          <td className="align-top">
+            <LockedAttachment.Received
+              title={GALLERY_TITLE}
+              detail={GALLERY_DETAIL}
+              amountText="AU$50.00"
+              gallery={GALLERY_ITEMS}
+              paymentStatus={isPaid ? 'paid' : undefined}
+              isUnlocking={isUnlocking}
+              onUnlockClick={() => {
+                setUnlocking(true)
+                setTimeout(() => {
+                  setUnlocking(false)
+                  setPaid(true)
+                }, 1500)
+              }}
+              onDownloadClick={() => alert('Download gallery')}
+            />
+          </td>
+        </tr>
+        <tr>
+          <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
+            Sold / Purchased
+          </td>
+          <td className="align-top">
+            <LockedAttachment.Composer
+              title={GALLERY_TITLE}
+              detail={GALLERY_DETAIL}
+              amountText="AU$50.00"
+              gallery={GALLERY_ITEMS}
+              onEditClick={() => alert('Edit gallery')}
+            />
+          </td>
+          <td className="align-top">
+            <LockedAttachment.Sent
+              title={GALLERY_TITLE}
+              detail={GALLERY_DETAIL}
+              amountText="AU$50.00"
+              paymentStatus="paid"
+              gallery={GALLERY_ITEMS}
+            />
+          </td>
+          <td className="align-top">
+            <LockedAttachment.Received
+              title={GALLERY_TITLE}
+              detail={GALLERY_DETAIL}
+              amountText="AU$50.00"
+              paymentStatus="paid"
+              gallery={GALLERY_ITEMS}
+              onDownloadClick={() => alert('Download gallery')}
+            />
+          </td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
+export const Received: StoryFn = () => {
+  const [isPaid, setPaid] = useState<string | undefined>()
+  const [isUnlocking, setUnlocking] = useState<string | undefined>()
+
+  return (
+    <Table>
+      <TableHead variants={VARIANTS} />
+      <tbody>
+        <tr>
+          <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
+            Locked
+          </td>
+          {VARIANTS.map(
+            ({
+              title,
+              mimeType,
+              detail,
+              thumbnailUrl,
+              thumbnailUnlockedUrl,
+              sourceUrl,
+            }) => (
+              <td key={mimeType} className="align-top">
+                <LockedAttachment.Received
+                  title={title}
+                  thumbnailUrl={thumbnailUrl}
+                  mimeType={mimeType}
+                  detail={detail}
+                  paymentStatus={isPaid === mimeType ? 'paid' : undefined}
+                  amountText="AU$9.99"
+                  isUnlocking={isUnlocking === mimeType}
+                  onUnlockClick={() => {
+                    setUnlocking(mimeType)
+                    setTimeout(() => {
+                      setUnlocking(undefined)
+                      setPaid(mimeType)
+                    }, 1500)
+                  }}
+                  onDownloadClick={() => alert('Download clicked')}
+                  onFetchSource={async () => ({
+                    sourceUrl: sourceUrl,
+                    thumbnailUrl: thumbnailUnlockedUrl,
+                  })}
+                />
+              </td>
+            )
+          )}
+        </tr>
+        <tr>
+          <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
+            Unlocked
+          </td>
+          {VARIANTS.map(
+            ({
+              title,
+              mimeType,
+              detail,
+              thumbnailUrl,
+              thumbnailUnlockedUrl,
+              sourceUrl,
+            }) => (
+              <td key={mimeType} className="align-top">
+                <LockedAttachment.Received
+                  title={title}
+                  thumbnailUrl={thumbnailUrl}
+                  mimeType={mimeType}
+                  detail={detail}
+                  amountText="AU$9.99"
+                  paymentStatus="paid"
+                  onUnlockClick={() => alert('Unlock clicked')}
+                  onDownloadClick={() => alert('Download clicked')}
+                  onFetchSource={async () => ({
+                    sourceUrl: sourceUrl,
+                    thumbnailUrl: thumbnailUnlockedUrl,
+                  })}
+                />
+              </td>
+            )
+          )}
+        </tr>
+      </tbody>
+    </Table>
+  )
+}