@linktr.ee/messaging-react 1.40.2 → 2.0.1

package/dist/index.d.ts

@@ -101,6 +101,11 @@ export declare interface ChannelListProps {
     sort?: ChannelSort;
     customEmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>;
     renderMessagePreview?: (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;
 }
 
 /**
@@ -112,7 +117,7 @@ export declare const ChannelView: default_2.NamedExoticComponent<ChannelViewProp
  * Props that MessagingShell passes through to ChannelView.
  * ChannelViewProps is the source of truth for these props.
  */
-declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onDeleteConversationClick' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'messageMetadata' | 'onMessageSent' | 'showStarButton' | 'chatbotVotingEnabled' | 'renderChannelBanner' | 'customProfileContent' | 'customChannelActions' | 'renderMessage' | 'sendButton'>;
+declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onDeleteConversationClick' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'messageMetadata' | 'onMessageSent' | 'showStarButton' | 'chatbotVotingEnabled' | 'viewerLanguage' | 'renderChannelBanner' | 'customProfileContent' | 'customChannelActions' | 'renderMessage' | 'sendButton'>;
 
 /**
  * ChannelView component props
@@ -185,6 +190,11 @@ export declare 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
      * between the channel header and message list.
@@ -283,6 +293,11 @@ export declare interface FaqListProps {
  */
 export declare const formatRelativeTime: (date: Date) => string;
 
+export declare function getMessageDisplayText({ message, viewerLanguage, }: {
+    message?: MessageWithI18n | null;
+    viewerLanguage?: string;
+}): string | undefined;
+
 export declare function isLinkAttachment(a: Attachment): boolean;
 
 export declare const LockedAttachment: {
@@ -358,6 +373,10 @@ declare interface MessageVoteButtonsProps {
     onVoteDown: () => void;
 }
 
+declare type MessageWithI18n = Pick<LocalMessage, 'text'> & {
+    i18n?: Record<string, string> | null;
+};
+
 /**
  * Messaging capabilities configuration
  */
@@ -462,13 +481,14 @@ export declare interface MessagingShellProps extends ChannelViewPassthroughProps
     renderMessagePreview?: (message: LocalMessage | undefined, defaultPreview?: string) => React.ReactNode;
 }
 
+export declare function normalizeLanguageCode(language?: string): string | undefined;
+
 /**
  * Generic participant interface for different host environments
  */
 export declare interface Participant {
     id: string;
     name: string;
-    email?: string;
     image?: string;
     username?: string;
     phone?: string;

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, i as u, j as L, k as c, l as d, r as v, m as C, u as A, n as k, o as F } from "./index-B_PLgcDi.js";
+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-Bex7eg3v.js";
 export {
   e as ActionButton,
   t as Avatar,
@@ -10,15 +10,17 @@ export {
   r as FaqListItem,
   M as LockedAttachment,
   l as MediaMessage,
-  h as MessageVoteButtons,
-  u as MessagingProvider,
+  u as MessageVoteButtons,
+  h as MessagingProvider,
   L as MessagingShell,
-  c as formatRelativeTime,
-  d as isLinkAttachment,
-  v as resolveLinkAttachment,
-  C as resolveMediaFromMessage,
-  A as useCustomMessage,
-  k as useMessageVote,
-  F as useMessaging
+  d as formatRelativeTime,
+  C as getMessageDisplayText,
+  c as isLinkAttachment,
+  v as normalizeLanguageCode,
+  A as resolveLinkAttachment,
+  k as resolveMediaFromMessage,
+  p as useCustomMessage,
+  F as useMessageVote,
+  f as useMessaging
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.40.2",
+  "version": "2.0.1",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",
@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "^1.8.0",
+    "@linktr.ee/messaging-core": "^2.0.0",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/ChannelInfoDialog/ChannelInfoDialog.test.tsx

@@ -65,14 +65,13 @@ const createChannel = () =>
   }) as unknown as Channel
 
 const createParticipant = (
-  overrides: Partial<{ name: string; email: string; username: string }> = {}
+  overrides: Partial<{ name: string; username: string }> = {}
 ) =>
   ({
     user: {
       id: 'linker-1',
       name: overrides.name ?? 'Linker',
       image: undefined,
-      email: overrides.email,
       username: overrides.username,
     },
     role: 'member',
@@ -99,18 +98,7 @@ describe('ChannelInfoDialog', () => {
     expect(nameEl).toBeInTheDocument()
   })
 
-  it('renders participant email as secondary info', () => {
-    renderWithProviders(
-      <ChannelInfoDialog
-        {...defaultProps()}
-        participant={createParticipant({ email: 'linker@example.com' })}
-      />
-    )
-
-    expect(screen.getByText('linker@example.com')).toBeInTheDocument()
-  })
-
-  it('renders participant username as secondary info when no email', () => {
+  it('renders participant username as secondary info', () => {
     renderWithProviders(
       <ChannelInfoDialog
         {...defaultProps()}

package/src/components/ChannelInfoDialog/index.tsx

@@ -12,9 +12,8 @@ import ActionButton from '../ActionButton'
 import { Avatar } from '../Avatar'
 import { CloseButton } from '../CloseButton'
 
-// Custom user type with email and username
+// Custom user type with username
 type CustomUser = {
-  email?: string
   username?: string
 }
 
@@ -180,13 +179,10 @@ export const ChannelInfoDialog: React.FC<ChannelInfoDialogProps> = ({
   const participantName =
     participant.user?.name || participant.user?.id || 'Unknown member'
   const participantImage = participant.user?.image
-  const participantEmail = (participant.user as CustomUser)?.email
   const participantUsername = (participant.user as CustomUser)?.username
-  const participantSecondary = participantEmail
-    ? participantEmail
-    : participantUsername
-      ? `linktr.ee/${participantUsername}`
-      : undefined
+  const participantSecondary = participantUsername
+    ? `linktr.ee/${participantUsername}`
+    : undefined
   const participantId = participant.user?.id || 'unknown'
 
   return (

package/src/components/ChannelList/ChannelListContext.tsx

@@ -9,6 +9,7 @@ type ChannelListContextValue = {
     message: LocalMessage | undefined,
     defaultPreview?: string
   ) => React.ReactNode
+  viewerLanguage?: string
 }
 
 const ChannelListContext = React.createContext<ChannelListContextValue>({
@@ -16,6 +17,7 @@ const ChannelListContext = React.createContext<ChannelListContextValue>({
   onChannelSelect: () => {},
   debug: false,
   renderMessagePreview: undefined,
+  viewerLanguage: undefined,
 })
 
 export const ChannelListProvider = ChannelListContext.Provider

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -4,6 +4,7 @@ import { ChannelPreviewUIComponentProps } from 'stream-chat-react'
 
 import { useChannelStar } from '../../hooks/useChannelStar'
 import { formatRelativeTime } from '../../utils/formatRelativeTime'
+import { getMessageDisplayText } from '../../utils/getMessageDisplayText'
 import { Avatar } from '../Avatar'
 import { isChatbotMessage } from '../CustomMessage/MessageTag'
 
@@ -14,8 +15,13 @@ import { useChannelListContext } from './ChannelListContext'
  */
 const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
   ({ channel, unread }) => {
-    const { selectedChannel, onChannelSelect, debug, renderMessagePreview } =
-      useChannelListContext()
+    const {
+      selectedChannel,
+      onChannelSelect,
+      debug,
+      renderMessagePreview,
+      viewerLanguage,
+    } = useChannelListContext()
 
     const isSelected = selectedChannel?.id === channel?.id
 
@@ -53,7 +59,12 @@ const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
     })()
 
     const getLastMessageText = () => {
-      if (lastMessage?.text) return lastMessage.text
+      const displayText = getMessageDisplayText({
+        message: lastMessage,
+        viewerLanguage,
+      })
+      if (displayText) return displayText
+
       const isTip = lastMessage?.metadata?.custom_type === 'MESSAGE_TIP'
       if (isTip) return '💵 Sent a tip'
 

package/src/components/ChannelList/index.tsx

@@ -28,6 +28,7 @@ export const ChannelList = React.memo<ChannelListProps>(
     className,
     customEmptyStateIndicator,
     renderMessagePreview,
+    viewerLanguage,
   }) => {
     // Track renders
     const renderCountRef = React.useRef(0)
@@ -64,8 +65,15 @@ export const ChannelList = React.memo<ChannelListProps>(
         onChannelSelect,
         debug,
         renderMessagePreview,
+        viewerLanguage,
       }),
-      [selectedChannel, onChannelSelect, debug, renderMessagePreview]
+      [
+        selectedChannel,
+        onChannelSelect,
+        debug,
+        renderMessagePreview,
+        viewerLanguage,
+      ]
     )
 
     return (

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'
 
@@ -257,6 +258,7 @@ const ChannelViewInner: React.FC<{
     message: NonNullable<MessageUIComponentProps['message']>
   ) => React.ReactNode
   dmAgentEnabled?: boolean
+  viewerLanguage?: string
 }> = ({
   onBack,
   showBackButton,
@@ -275,6 +277,7 @@ const ChannelViewInner: React.FC<{
   customChannelActions,
   renderMessage,
   dmAgentEnabled = false,
+  viewerLanguage,
 }) => {
   const { channel } = useChannelStateContext()
   const infoDialogRef = useRef<HTMLDialogElement>(null)
@@ -339,7 +342,11 @@ 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}
+          viewerLanguage={viewerLanguage}
+        />
       )
 
       if (!renderMessage || !message) {
@@ -348,7 +355,7 @@ const ChannelViewInner: React.FC<{
 
       return renderMessage(messageNode, message)
     },
-    [chatbotVotingEnabled, renderMessage]
+    [chatbotVotingEnabled, renderMessage, viewerLanguage]
   )
 
   return (
@@ -436,6 +443,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     customChannelActions,
     renderMessage,
     sendButton,
+    viewerLanguage,
   }) => {
     // Custom send message handler that:
     // 1. Applies messageMetadata if provided
@@ -488,37 +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}
-          />
-        </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

@@ -30,6 +30,7 @@ import {
 } from 'stream-chat-react'
 
 import { useMessageVote } from '../../hooks/useMessageVote'
+import { getMessageDisplayText } from '../../utils/getMessageDisplayText'
 import { Avatar } from '../Avatar'
 import LockedAttachment from '../LockedAttachment'
 import { isLinkAttachment } from '../MediaMessage'
@@ -45,10 +46,12 @@ import { MessageVoteButtons } from './MessageVoteButtons'
 
 type CustomMessageUIComponentProps = MessageUIComponentProps & {
   chatbotVotingEnabled?: boolean
+  viewerLanguage?: string
 }
 
 type CustomMessageWithContextProps = MessageContextValue & {
   chatbotVotingEnabled?: boolean
+  viewerLanguage?: string
 }
 
 const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
@@ -68,11 +71,13 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
     message,
     renderText,
     threadList,
+    viewerLanguage,
   } = props
 
   const { client } = useChatContext('CustomMessage')
   const { channel } = useChannelStateContext('CustomMessage')
-  const { isUnlocking, onUnlockClick, onFetchSource, onDownloadClick } = useCustomMessage('LockedAttachment')
+  const { isUnlocking, onUnlockClick, onFetchSource, onDownloadClick } =
+    useCustomMessage('LockedAttachment')
   const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false)
   const reminder = useMessageReminder(message.id)
   const { selected: voteState, voteUp, voteDown } = useMessageVote(message)
@@ -107,6 +112,12 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
     const filtered = raw.filter((a) => !('type' in a) || !isLinkAttachment(a))
     return filtered.length === raw.length ? raw : filtered
   }, [message])
+  const displayMessage = useMemo(() => {
+    const displayText = getMessageDisplayText({ message, viewerLanguage })
+    return displayText === message.text
+      ? message
+      : { ...message, text: displayText }
+  }, [message, viewerLanguage])
 
   if (isDateSeparatorMessage(message)) {
     return null
@@ -247,7 +258,10 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
               )}
               {message.text && (
                 <div className="str-chat__message-bubble">
-                  <MessageText message={message} renderText={renderText} />
+                  <MessageText
+                    message={displayMessage}
+                    renderText={renderText}
+                  />
                 </div>
               )}
             </div>
@@ -273,11 +287,14 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
                 ) : null}
                 {isAIGenerated ? (
                   <StreamedMessageText
-                    message={message}
+                    message={displayMessage}
                     renderText={renderText}
                   />
                 ) : (
-                  <MessageText message={message} renderText={renderText} />
+                  <MessageText
+                    message={displayMessage}
+                    renderText={renderText}
+                  />
                 )}
                 <MessageErrorIcon />
               </div>
@@ -317,6 +334,7 @@ const MemoizedCustomMessage = React.memo(
   CustomMessageWithContext,
   (prev, next) => {
     if (prev.chatbotVotingEnabled !== next.chatbotVotingEnabled) return false
+    if (prev.viewerLanguage !== next.viewerLanguage) return false
     return areMessageUIPropsEqual(prev, next)
   }
 ) as typeof CustomMessageWithContext

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,
+}