@linktr.ee/messaging-react 1.34.0 → 1.35.0-rc-1777516919

package/dist/index.d.ts

@@ -27,7 +27,7 @@ export declare type AttachmentSourceType = 'image' | 'audio' | 'video' | 'docume
 /**
  * Avatar component that displays a user image or colored initial fallback
  */
-export declare const Avatar: default_2.FC<AvatarProps>;
+export declare const Avatar: ({ id, image, size, className, starred, shape, aiActive, }: AvatarProps) => JSX_2.Element;
 
 export declare interface AvatarProps {
     id: string;
@@ -37,6 +37,7 @@ export declare interface AvatarProps {
     className?: string;
     starred?: boolean;
     shape?: 'squircle' | 'circle';
+    aiActive?: boolean;
 }
 
 /**

package/dist/index.js

@@ -1,4 +1,4 @@
-import { A as e, a as t, C as i, b as n, c as o, d as g, F as r, e as m, L as u, f as M, h as c, i as l, j as h, P as C, k as P, u as d, l as L, m as p, n as v } from "./index-DWk0f1PF.js";
+import { A as e, a as t, C as i, b as n, c as o, d as g, F as r, e as m, L as u, f as M, h as c, i as l, j as h, P as C, k as P, u as d, l as L, m as p, n as v } from "./index-BhmonXWN.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

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

package/src/components/Avatar/Avatar.stories.tsx

@@ -29,6 +29,14 @@ Default.args = {
   image: 'https://i.pravatar.cc/150?img=1',
 }
 
+export const AIActive: StoryFn<ComponentProps> = Template.bind({})
+AIActive.args = {
+  id: 'ai-agent',
+  name: 'AI Assistant',
+  image: 'https://i.pravatar.cc/150?img=12',
+  aiActive: true,
+}
+
 export const WithoutImage: StoryFn<ComponentProps> = Template.bind({})
 WithoutImage.args = {
   id: 'user-2',
@@ -150,3 +158,24 @@ export const VariousSizes: StoryFn = () => {
   )
 }
 
+export const AIActiveVariousSizes: StoryFn = () => {
+  const sizes = [20, 32, 40, 56, 80]
+
+  return (
+    <div className="p-12">
+      <div className="flex gap-6 items-end">
+        {sizes.map((size) => (
+          <div key={size} className="flex flex-col items-center gap-2">
+            <Avatar
+              id="ai-user-consistent"
+              name="AI Assistant"
+              size={size}
+              aiActive
+            />
+            <span className="text-xs text-stone">{size}px</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/components/Avatar/index.tsx

@@ -12,19 +12,21 @@ export interface AvatarProps {
   className?: string
   starred?: boolean
   shape?: 'squircle' | 'circle'
+  aiActive?: boolean
 }
 
 /**
  * Avatar component that displays a user image or colored initial fallback
  */
-export const Avatar: React.FC<AvatarProps> = ({
+export const Avatar = ({
   id,
   image,
   size = 40,
   className,
   starred = false,
   shape = 'squircle',
-}) => {
+  aiActive = false,
+}: AvatarProps) => {
   const emoji = getAvatarEmoji(id)
 
   const getFontSizeClass = () => {
@@ -35,6 +37,8 @@ export const Avatar: React.FC<AvatarProps> = ({
   }
 
   const fontSizeClass = getFontSizeClass()
+  const aiRingWidth = Math.max(1, Math.ceil(size / 40))
+  const aiRingPadding = aiActive ? aiRingWidth : 0
 
   const borderStyle =
     shape === 'circle'
@@ -44,9 +48,34 @@ export const Avatar: React.FC<AvatarProps> = ({
           'corner-shape': 'superellipse(1.3)',
         }
 
+  const avatarInner = (
+    <div className="h-full w-full overflow-hidden" style={borderStyle}>
+      {image ? (
+        <img
+          src={image}
+          alt=""
+          className="aspect-square h-full w-full object-cover"
+        />
+      ) : (
+        <div
+          aria-hidden="true"
+          className={classNames(
+            'avatar-fallback flex h-full w-full items-center justify-center bg-[#E6E5E3] font-semibold select-none transition-colors',
+            fontSizeClass
+          )}
+        >
+          {emoji}
+        </div>
+      )}
+    </div>
+  )
+
   return (
     <div
-      className={classNames('relative flex-shrink-0', className)}
+      className={classNames(
+        'relative flex-shrink-0 !bg-transparent',
+        className
+      )}
       style={{
         width: `${size}px`,
         height: `${size}px`,
@@ -60,24 +89,19 @@ export const Avatar: React.FC<AvatarProps> = ({
           <StarIcon className="size-3 text-yellow-600" weight="duotone" />
         </div>
       )}
-      <div className="h-full w-full overflow-hidden" style={borderStyle}>
-        {image ? (
-          <img
-            src={image}
-            alt=""
-            className="aspect-square h-full w-full object-cover"
-          />
-        ) : (
-          <div
-            aria-hidden="true"
-            className={classNames(
-              'avatar-fallback flex h-full w-full items-center justify-center bg-[#E6E5E3] font-semibold select-none transition-colors',
-              fontSizeClass
-            )}
-          >
-            {emoji}
-          </div>
+      <div
+        className={classNames(
+          'h-full w-full',
+          aiActive
+            ? 'bg-[linear-gradient(135deg,#A855F7_0%,#8B5CF6_45%,#6D28D9_100%)]'
+            : 'bg-transparent'
         )}
+        style={{
+          ...borderStyle,
+          padding: `${aiRingPadding}px`,
+        }}
+      >
+        {avatarInner}
       </div>
     </div>
   )

package/src/components/ChannelView.stories.tsx

@@ -160,10 +160,20 @@ const createMockChannel = async (
 type TemplateProps = ComponentProps & {
   followerStatus?: string | boolean
   isFrozen?: boolean
+  typingUser?: {
+    id: string
+    name?: string
+    image?: string
+  }
 }
 
 const Template: StoryFn<TemplateProps> = (args) => {
-  const { followerStatus, isFrozen = false, ...channelViewProps } = args
+  const {
+    followerStatus,
+    isFrozen = false,
+    typingUser,
+    ...channelViewProps
+  } = args
   const [client] = React.useState(() => {
     const client = new StreamChat('mock-api-key', {
       allowServerSideConnect: true,
@@ -183,6 +193,22 @@ const Template: StoryFn<TemplateProps> = (args) => {
     )
   }, [client, followerStatus, isFrozen])
 
+  useEffect(() => {
+    if (!channel || !typingUser) {
+      return
+    }
+
+    const timer = setTimeout(() => {
+      client.dispatchEvent({
+        type: 'typing.start',
+        cid: channel.cid,
+        user: typingUser,
+      })
+    }, 0)
+
+    return () => clearTimeout(timer)
+  }, [channel, client, typingUser])
+
   if (!channel) {
     return <div>Loading...</div>
   }
@@ -556,6 +582,24 @@ FrozenChannel.parameters = {
   },
 }
 
+export const WithTypingIndicator: StoryFn<TemplateProps> = Template.bind({})
+WithTypingIndicator.args = {
+  showBackButton: false,
+  typingUser: {
+    id: mockParticipants[0].id,
+    name: mockParticipants[0].name,
+    image: mockParticipants[0].image,
+  },
+}
+WithTypingIndicator.parameters = {
+  docs: {
+    description: {
+      story:
+        'Channel view with the typing indicator visible, driven by a mocked typing.start event from the other participant.',
+    },
+  },
+}
+
 // ---------------------------------------------------------------------------
 // Custom SendButton stories
 // ---------------------------------------------------------------------------

package/src/components/ChannelView.tsx

@@ -1,4 +1,9 @@
-import { ArrowLeftIcon, CaretRightIcon, DotsThreeIcon, StarIcon } from '@phosphor-icons/react'
+import {
+  ArrowLeftIcon,
+  CaretRightIcon,
+  DotsThreeIcon,
+  StarIcon,
+} from '@phosphor-icons/react'
 import classNames from 'classnames'
 import React, { useCallback, useRef } from 'react'
 import { Channel as ChannelType } from 'stream-chat'
@@ -21,6 +26,7 @@ import { CustomDateSeparator } from './CustomDateSeparator'
 import { CustomMessage } from './CustomMessage'
 import { CustomMessageInput } from './CustomMessageInput'
 import { CustomSystemMessage } from './CustomSystemMessage'
+import CustomTypingIndicator from './CustomTypingIndicator'
 import { ChannelEmptyState } from './MessagingShell/ChannelEmptyState'
 import { LoadingState } from './MessagingShell/LoadingState'
 
@@ -296,10 +302,7 @@ const ChannelViewInner: React.FC<{
       // eslint-disable-next-line react-hooks/rules-of-hooks
       const { message } = useMessageContext('ChannelView')
       const messageNode = (
-        <CustomMessage
-          {...props}
-          chatbotVotingEnabled={chatbotVotingEnabled}
-        />
+        <CustomMessage {...props} chatbotVotingEnabled={chatbotVotingEnabled} />
       )
 
       if (!renderMessage || !message) {
@@ -453,6 +456,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
           EmptyStateIndicator={CustomChannelEmptyState}
           LoadingIndicator={LoadingState}
           DateSeparator={CustomDateSeparator}
+          TypingIndicator={CustomTypingIndicator}
           doSendMessageRequest={doSendMessageRequest}
           {...(sendButton ? { SendButton: sendButton } : {})}
         >

package/src/components/CustomMessage/CustomMessage.stories.tsx

@@ -2,19 +2,30 @@ import '../../stream-custom-data'
 
 import type { Meta, StoryFn } from '@storybook/react'
 import React, { useEffect } from 'react'
-import { Channel as ChannelType, QueryChannelAPIResponse, StreamChat, } from 'stream-chat'
-import { Channel, Chat, MessageList, MessageUIComponentProps, Window } from 'stream-chat-react'
+import {
+  Channel as ChannelType,
+  QueryChannelAPIResponse,
+  StreamChat,
+} from 'stream-chat'
+import {
+  Channel,
+  Chat,
+  MessageList,
+  MessageUIComponentProps,
+  Window,
+} from 'stream-chat-react'
 
 import {
   currentUserArgType,
   StoryUser,
   storyUsers,
 } from '../../stories/decorators/storyUser'
+import CustomTypingIndicator from '../CustomTypingIndicator'
 
 import { CustomMessage } from './index'
 
 const meta: Meta = {
-  title: 'Components/CustomMessage',
+  title: 'CustomMessage',
   component: CustomMessage,
   argTypes: currentUserArgType,
   args: { currentUser: storyUsers.creator },
@@ -89,6 +100,7 @@ const createMockChannel = async (
 
 interface TemplateProps {
   currentUser: StoryUser
+  typingUser?: StoryUser
   messages: Array<{
     id: string
     text: string
@@ -101,11 +113,7 @@ interface TemplateProps {
         | 'MESSAGE_PAID'
         | 'MESSAGE_CHATBOT'
         | 'MESSAGE_ATTACHMENT'
-      payment_status?: 
-        | 'pending'
-        | 'paid'
-        | 'failed'
-        | 'refunded'
+      payment_status?: 'pending' | 'paid' | 'failed' | 'refunded'
       amount_text?: string
       attachment_title?: string
       attachment_mime_type?: string
@@ -117,8 +125,9 @@ interface TemplateProps {
 
 const TemplateInner: React.FC<{
   currentUser: StoryUser
+  typingUser?: StoryUser
   messages: TemplateProps['messages']
-}> = ({ currentUser, messages }) => {
+}> = ({ currentUser, typingUser, messages }) => {
   const [client] = React.useState(() => {
     const c = new StreamChat('mock-api-key', { allowServerSideConnect: true })
     c.userID = currentUser.id
@@ -132,13 +141,26 @@ const TemplateInner: React.FC<{
     createMockChannel(client, messages).then(setChannel)
   }, [client, messages])
 
+  useEffect(() => {
+    if (!channel || !typingUser) {
+      return
+    }
+
+    // Stream Channel UI only updates typing context from typing.start/typing.stop events.
+    const timer = setTimeout(() => {
+      client.dispatchEvent({
+        type: 'typing.start',
+        cid: channel.cid,
+        user: typingUser,
+      })
+    }, 0)
+
+    return () => clearTimeout(timer)
+  }, [channel, client, typingUser])
+
   const MessageComponent = React.useMemo(() => {
     return function CustomMessageComponent(props: MessageUIComponentProps) {
-      return (
-        <CustomMessage
-          {...props}
-        />
-      )
+      return <CustomMessage {...props} />
     }
   }, [])
 
@@ -149,7 +171,11 @@ const TemplateInner: React.FC<{
   return (
     <Chat client={client}>
       <div className="h-screen w-full bg-white">
-        <Channel channel={channel} Message={MessageComponent}>
+        <Channel
+          channel={channel}
+          Message={MessageComponent}
+          TypingIndicator={CustomTypingIndicator}
+        >
           <Window>
             <MessageList />
           </Window>
@@ -161,11 +187,13 @@ const TemplateInner: React.FC<{
 
 const Template: StoryFn<TemplateProps> = ({
   currentUser = storyUsers.creator,
+  typingUser,
   messages,
 }) => (
   <TemplateInner
     key={currentUser.id}
     currentUser={currentUser}
+    typingUser={typingUser}
     messages={messages}
   />
 )
@@ -357,3 +385,35 @@ ChatbotVariants.args = {
     },
   ],
 }
+
+export const WithTypingIndicatorComparison: StoryFn<TemplateProps> =
+  Template.bind({})
+WithTypingIndicatorComparison.args = {
+  currentUser: storyUsers.creator,
+  typingUser: storyUsers.visitor,
+  messages: [
+    {
+      id: 'msg-1',
+      text: 'Hi, is this still available?',
+      user: storyUsers.visitor,
+    },
+    {
+      id: 'msg-2',
+      text: 'Yes, absolutely.',
+      user: storyUsers.creator,
+    },
+    {
+      id: 'msg-3',
+      text: 'Great! I have another question…',
+      user: storyUsers.visitor,
+    },
+  ],
+}
+WithTypingIndicatorComparison.parameters = {
+  docs: {
+    description: {
+      story:
+        'Renders a standard incoming message and the custom typing indicator in the same list for visual comparison.',
+    },
+  },
+}

package/src/components/CustomMessage/MessageTag.stories.tsx

@@ -7,7 +7,7 @@ import { MessageTag } from './MessageTag'
 type ComponentProps = React.ComponentProps<typeof MessageTag>
 
 const meta: Meta<ComponentProps> = {
-  title: 'Components/MessageTag',
+  title: 'MessageTag',
   component: MessageTag,
   parameters: {
     layout: 'centered',

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

@@ -0,0 +1,114 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+import type { Event } from 'stream-chat'
+import {
+  ChannelStateProvider,
+  ChatProvider,
+  TypingProvider,
+} from 'stream-chat-react'
+
+import CustomTypingIndicator from '.'
+
+type StoryProps = {
+  typingEventsEnabled?: boolean
+  typing?: Record<string, Event>
+}
+
+const currentUser = {
+  id: 'visitor-1',
+  name: 'Visitor',
+}
+
+const typingUser = {
+  id: 'creator-1',
+  name: 'Creator',
+  image: 'https://i.pravatar.cc/48?img=5',
+}
+
+const defaultTyping: Record<string, Event> = {
+  [typingUser.id]: {
+    type: 'typing.start',
+    user: typingUser,
+    parent_id: undefined,
+  } as Event,
+}
+
+const StoryWrapper: React.FC<StoryProps> = ({
+  typingEventsEnabled = true,
+  typing = defaultTyping,
+}) => {
+  const chatContextValue = {
+    client: {
+      user: currentUser,
+    },
+    theme: 'str-chat__theme-light',
+    channelsQueryState: {
+      error: null,
+      queryInProgress: null,
+    },
+    latestMessageDatesByChannels: {},
+    mutes: [],
+    closeMobileNav: () => {},
+    openMobileNav: () => {},
+    getAppSettings: () => null,
+    setActiveChannel: () => {},
+    themeVersion: '2',
+    useImageFlagEmojisOnWindows: false,
+  }
+
+  const channelStateValue = {
+    channel: {
+      state: {
+        members: {
+          [currentUser.id]: {
+            user: currentUser,
+          },
+          [typingUser.id]: {
+            user: typingUser,
+          },
+        },
+      },
+    },
+    channelCapabilities: {},
+    channelConfig: {
+      typing_events: typingEventsEnabled,
+    },
+    imageAttachmentSizeHandler: () => ({}),
+    multipleUploads: false,
+    notifications: [],
+    shouldGenerateVideoThumbnail: false,
+    suppressAutoscroll: false,
+    videoAttachmentSizeHandler: () => ({}),
+  }
+
+  return (
+    <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>
+        </TypingProvider>
+      </ChannelStateProvider>
+    </ChatProvider>
+  )
+}
+
+const meta: Meta<StoryProps> = {
+  title: 'CustomTypingIndicator',
+  component: CustomTypingIndicator,
+  parameters: {
+    layout: 'centered',
+  },
+}
+export default meta
+
+export const Default: StoryFn<StoryProps> = (args) => <StoryWrapper {...args} />
+Default.args = {}
+
+export const HiddenWhenNoTyping: StoryFn<StoryProps> = (args) => (
+  <StoryWrapper {...args} />
+)
+HiddenWhenNoTyping.args = {
+  typing: {},
+}

package/src/components/CustomTypingIndicator/index.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import type { Event } from 'stream-chat'
+import {
+  useChannelStateContext,
+  useChatContext,
+  useTypingContext,
+} from 'stream-chat-react'
+
+import { Avatar } from '../Avatar'
+
+interface CustomTypingIndicatorProps {
+  threadList?: boolean
+}
+
+const Circle = ({ cx, index }: { cx: string; index: number }) => (
+  <circle className="fill-pebble" cx={cx} cy="4" r="3.9">
+    <animateTransform
+      attributeName="transform"
+      type="translate"
+      values="0 0; 0 -2.25; 0 0;"
+      dur="900ms"
+      begin={`${120 * index}ms`} // 0ms, 120ms, 240ms
+      repeatCount="indefinite"
+    />
+  </circle>
+)
+
+const CustomTypingIndicator = ({ threadList }: CustomTypingIndicatorProps) => {
+  const { channel, channelConfig, thread } = useChannelStateContext()
+  const { client } = useChatContext()
+  const { typing = {} } = useTypingContext()
+
+  if (channelConfig?.typing_events === false) {
+    return null
+  }
+
+  const typingInChannel = !threadList
+    ? Object.values(typing).filter(
+        ({ parent_id, user }: Event) =>
+          user?.id !== client.user?.id && !parent_id
+      )
+    : []
+
+  const typingInThread = threadList
+    ? Object.values(typing).filter(
+        ({ parent_id, user }: Event) =>
+          user?.id !== client.user?.id && parent_id === thread?.id
+      )
+    : []
+
+  const typingUsers = threadList ? typingInThread : typingInChannel
+  if (!typingUsers.length) {
+    return null
+  }
+
+  const typingUser = typingUsers[0]?.user
+  const memberUser =
+    typingUser?.id && channel.state.members[typingUser.id]
+      ? 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"
+      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-[#F1F0EE] h-12 flex flex-col justify-end">
+        <svg
+          aria-hidden="true"
+          className="block overflow-visible"
+          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>
+  )
+}
+
+export default CustomTypingIndicator