@linktr.ee/messaging-react 1.35.0 → 1.36.0-rc-1777522205

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: ({ id, image, size, className, starred, shape, aiActive, }: AvatarProps) => JSX_2.Element;
+export declare const Avatar: ({ id, image, size, className, starred, shape, dmAgentEnabled, }: AvatarProps) => JSX_2.Element;
 
 export declare interface AvatarProps {
     id: string;
@@ -37,7 +37,7 @@ export declare interface AvatarProps {
     className?: string;
     starred?: boolean;
     shape?: 'squircle' | 'circle';
-    aiActive?: boolean;
+    dmAgentEnabled?: boolean;
 }
 
 /**
@@ -151,6 +151,8 @@ export declare interface ChannelViewProps {
      * messages will be sent with skip_push and silent flags to suppress
      * notifications to the creator until the agent responds.
      * The library reads chatbot_paused from channel.data internally.
+     *
+     * In header UI, this treatment is shown only for visitor view.
      */
     dmAgentEnabled?: 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-BsSqs61X.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-DOsC03ZN.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

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

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

@@ -34,7 +34,7 @@ AIActive.args = {
   id: 'ai-agent',
   name: 'AI Assistant',
   image: 'https://i.pravatar.cc/150?img=12',
-  aiActive: true,
+  dmAgentEnabled: true,
 }
 
 export const WithoutImage: StoryFn<ComponentProps> = Template.bind({})
@@ -170,7 +170,7 @@ export const AIActiveVariousSizes: StoryFn = () => {
               id="ai-user-consistent"
               name="AI Assistant"
               size={size}
-              aiActive
+              dmAgentEnabled
             />
             <span className="text-xs text-stone">{size}px</span>
           </div>

package/src/components/Avatar/index.tsx

@@ -12,7 +12,7 @@ export interface AvatarProps {
   className?: string
   starred?: boolean
   shape?: 'squircle' | 'circle'
-  aiActive?: boolean
+  dmAgentEnabled?: boolean
 }
 
 /**
@@ -25,7 +25,7 @@ export const Avatar = ({
   className,
   starred = false,
   shape = 'squircle',
-  aiActive = false,
+  dmAgentEnabled = false,
 }: AvatarProps) => {
   const emoji = getAvatarEmoji(id)
 
@@ -37,14 +37,15 @@ export const Avatar = ({
   }
 
   const fontSizeClass = getFontSizeClass()
-  const aiRingWidth = Math.max(1, Math.ceil(size / 40))
+  // Match design treatment: 2px AI border at 40px avatar size.
+  const aiBorderWidth = size >= 40 ? 2 : 1
 
   const borderStyle =
     shape === 'circle'
       ? { borderRadius: '50%' }
       : {
           borderRadius: '33%',
-          'corner-shape': 'superellipse(1.3)',
+          cornerShape: 'superellipse(1.3)',
         }
 
   const avatarInner = (
@@ -89,15 +90,19 @@ export const Avatar = ({
         </div>
       )}
       <div
+        data-testid="avatar-ring"
         className={classNames(
           'h-full w-full',
-          aiActive
-            ? 'bg-[linear-gradient(135deg,#A855F7_0%,#8B5CF6_45%,#6D28D9_100%)]'
-            : 'bg-transparent'
+          'bg-transparent'
         )}
         style={{
           ...borderStyle,
-          ...(aiActive && { padding: `${aiRingWidth}px` }),
+          ...(dmAgentEnabled && {
+            borderWidth: `${aiBorderWidth}px`,
+            borderStyle: 'solid',
+            borderColor: 'var(--AI-Gradient, #7F22FE)',
+            boxShadow: 'inset 0 1px 2px 0 rgba(255, 255, 255, 0.5)',
+          }),
         }}
       >
         {avatarInner}

package/src/components/ChannelView.stories.tsx

@@ -125,12 +125,22 @@ const createMockChannel = async (
     channel.state.messages = mockMessages as unknown as any[]
     channel.state.members = {
       [mockUser.id]: {
-        user: mockUser,
+        user: {
+          ...mockUser,
+          is_account: false,
+        },
         user_id: mockUser.id,
+        role: 'owner',
+        is_account: false,
       },
       [participant.id]: {
-        user: participant,
+        user: {
+          ...participant,
+          is_account: true,
+        },
         user_id: participant.id,
+        role: 'member',
+        is_account: true,
       },
     }
     return {
@@ -240,6 +250,25 @@ Default.parameters = {
   },
 }
 
+export const DmAgentHeader: StoryFn<TemplateProps> = Template.bind({})
+DmAgentHeader.args = {
+  showBackButton: false,
+  dmAgentEnabled: true,
+  onBack: () => console.log('Back clicked'),
+  onLeaveConversation: (channel) =>
+    console.log('Leave conversation:', channel.id),
+  onBlockParticipant: (participantId) =>
+    console.log('Block participant:', participantId),
+}
+DmAgentHeader.parameters = {
+  docs: {
+    description: {
+      story:
+        'Channel view with DM agent header treatment enabled (AI avatar border and "Replies instantly with AI assistant" helper text).',
+    },
+  },
+}
+
 export const WithBackButton: StoryFn<TemplateProps> = Template.bind({})
 WithBackButton.args = {
   showBackButton: true,

package/src/components/ChannelView.test.tsx

@@ -71,16 +71,36 @@ vi.mock('../hooks/useChannelStar', () => ({
   useChannelStar: () => mockIsStarred,
 }))
 
-const createChannel = () =>
+const createChannel = ({
+  currentUserId = 'visitor-1',
+  currentUserRole = 'owner',
+}: {
+  currentUserId?: 'visitor-1' | 'linker-1'
+  currentUserRole?: 'owner' | 'member'
+} = {}) =>
   ({
     id: 'channel-1',
     cid: 'messaging:channel-1',
     data: {},
-    _client: { userID: 'visitor-1' },
+    _client: { userID: currentUserId },
     state: {
       members: {
-        visitor: { user: { id: 'visitor-1', name: 'Visitor' }, role: 'owner' },
-        linker: { user: { id: 'linker-1', name: 'Linker' }, role: 'member' },
+        current: {
+          user: {
+            id: currentUserId,
+            name: currentUserId === 'visitor-1' ? 'Visitor' : 'Linker',
+            is_account: currentUserId !== 'visitor-1',
+          },
+          role: currentUserRole,
+        },
+        other: {
+          user: {
+            id: currentUserId === 'visitor-1' ? 'linker-1' : 'visitor-1',
+            name: currentUserId === 'visitor-1' ? 'Linker' : 'Visitor',
+            is_account: currentUserId === 'visitor-1',
+          },
+          role: currentUserRole === 'owner' ? 'member' : 'owner',
+        },
       },
       membership: {},
       messages: [],
@@ -172,6 +192,57 @@ describe('ChannelView', () => {
     expect(avatarRenderCalls.every((call) => call.starred === false)).toBe(true)
   })
 
+  it('passes dmAgentEnabled to avatar when dmAgentEnabled is true for visitor view', () => {
+    const channel = createChannel({
+      currentUserId: 'visitor-1',
+      currentUserRole: 'owner',
+    })
+
+    renderWithProviders(
+      <ChannelView channel={channel} dmAgentEnabled={true} />
+    )
+
+    expect(avatarRenderCalls.length).toBeGreaterThan(0)
+    expect(
+      avatarRenderCalls.every((call) => call.dmAgentEnabled === true)
+    ).toBe(
+      true
+    )
+  })
+
+  it('renders dm agent helper text when dmAgentEnabled is true for visitor view', () => {
+    const channel = createChannel({
+      currentUserId: 'visitor-1',
+      currentUserRole: 'owner',
+    })
+
+    renderWithProviders(
+      <ChannelView channel={channel} dmAgentEnabled={true} />
+    )
+
+    expect(
+      screen.getAllByText('Replies instantly with AI assistant').length
+    ).toBeGreaterThan(0)
+  })
+
+  it('does not render dm agent helper text for linker view even when dmAgentEnabled is true', () => {
+    const channel = createChannel({
+      currentUserId: 'linker-1',
+      currentUserRole: 'member',
+    })
+
+    renderWithProviders(
+      <ChannelView channel={channel} dmAgentEnabled={true} />
+    )
+
+    expect(
+      screen.queryByText('Replies instantly with AI assistant')
+    ).not.toBeInTheDocument()
+    expect(
+      avatarRenderCalls.every((call) => call.dmAgentEnabled === false)
+    ).toBe(true)
+  })
+
   it('keeps channel banner and input action renderers working', () => {
     const channel = createChannel()
     const renderMessageInputActions = vi.fn((currentChannel: Channel) => (

package/src/components/ChannelView.tsx

@@ -2,6 +2,7 @@ import {
   ArrowLeftIcon,
   CaretRightIcon,
   DotsThreeIcon,
+  SparkleIcon,
   StarIcon,
 } from '@phosphor-icons/react'
 import classNames from 'classnames'
@@ -32,6 +33,7 @@ import { LoadingState } from './MessagingShell/LoadingState'
 
 const ICON_BTN_CLASS =
   'size-10 rounded-full bg-[#F1F0EE] hover:bg-[#E5E4E1] flex items-center justify-center transition-colors duration-150 focus-ring'
+const DM_AGENT_HEADER_HELPER_TEXT = 'Replies instantly with AI assistant'
 
 /**
  * Custom channel header component
@@ -42,12 +44,14 @@ const CustomChannelHeader: React.FC<{
   onShowInfo: () => void
   canShowInfo: boolean
   showStarButton?: boolean
+  dmAgentEnabled?: boolean
 }> = ({
   onBack,
   showBackButton,
   onShowInfo,
   canShowInfo,
   showStarButton = false,
+  dmAgentEnabled = false,
 }) => {
   const { channel } = useChannelStateContext()
 
@@ -100,6 +104,7 @@ const CustomChannelHeader: React.FC<{
             name={participantName}
             image={participantImage}
             starred={showStarButton && isStarred}
+            dmAgentEnabled={dmAgentEnabled}
             size={40}
           />
           <button
@@ -111,6 +116,12 @@ const CustomChannelHeader: React.FC<{
             {participantName}
             <CaretRightIcon className="size-3 shrink-0" />
           </button>
+          {dmAgentEnabled && (
+            <div className="flex items-center gap-1 text-[10px] leading-3 text-black/55">
+              <SparkleIcon className="size-3 shrink-0 text-black/55" />
+              <span>{DM_AGENT_HEADER_HELPER_TEXT}</span>
+            </div>
+          )}
         </div>
         <div className="flex justify-end items-center gap-2">
           {showStarButton && (
@@ -159,6 +170,7 @@ const CustomChannelHeader: React.FC<{
             name={participantName}
             image={participantImage}
             starred={showStarButton && isStarred}
+            dmAgentEnabled={dmAgentEnabled}
             size={40}
           />
           <div className="min-w-0">
@@ -177,6 +189,12 @@ const CustomChannelHeader: React.FC<{
                 {participantName}
               </h1>
             )}
+            {dmAgentEnabled && (
+              <div className="mt-0.5 flex items-center gap-1 text-[10px] leading-3 text-black/55">
+                <SparkleIcon className="size-3 shrink-0 text-black/55" />
+                <span className="truncate">{DM_AGENT_HEADER_HELPER_TEXT}</span>
+              </div>
+            )}
           </div>
         </div>
         <div className="flex items-center gap-2">
@@ -238,6 +256,7 @@ const ChannelViewInner: React.FC<{
     messageNode: React.ReactElement,
     message: NonNullable<MessageUIComponentProps['message']>
   ) => React.ReactNode
+  dmAgentEnabled?: boolean
 }> = ({
   onBack,
   showBackButton,
@@ -255,6 +274,7 @@ const ChannelViewInner: React.FC<{
   customProfileContent,
   customChannelActions,
   renderMessage,
+  dmAgentEnabled = false,
 }) => {
   const { channel } = useChannelStateContext()
   const infoDialogRef = useRef<HTMLDialogElement>(null)
@@ -267,6 +287,23 @@ const ChannelViewInner: React.FC<{
     )
   }, [channel._client.userID, channel.state.members])
 
+  const currentMember = React.useMemo(() => {
+    const members = Object.values(channel.state.members || {})
+    return members.find((member) => member.user?.id === channel._client.userID)
+  }, [channel._client.userID, channel.state.members])
+
+  const currentUserIsAccount =
+    (currentMember?.user as { is_account?: boolean } | undefined)?.is_account ??
+    (currentMember as { is_account?: boolean } | undefined)?.is_account
+  const participantIsAccount =
+    (participant?.user as { is_account?: boolean } | undefined)?.is_account ??
+    (participant as { is_account?: boolean } | undefined)?.is_account
+
+  const showDmAgentHeader =
+    dmAgentEnabled &&
+    currentUserIsAccount === false &&
+    participantIsAccount === true
+
   // Get follower status label from channel data
   const followerStatusLabel = React.useMemo(() => {
     const channelExtraData = (channel.data ?? {}) as {
@@ -326,6 +363,7 @@ const ChannelViewInner: React.FC<{
               onShowInfo={handleShowInfo}
               canShowInfo={Boolean(participant)}
               showStarButton={showStarButton}
+              dmAgentEnabled={showDmAgentHeader}
             />
           </div>
 
@@ -473,6 +511,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
             onBlockParticipantClick={onBlockParticipantClick}
             onReportParticipantClick={onReportParticipantClick}
             showStarButton={showStarButton}
+            dmAgentEnabled={dmAgentEnabled}
             chatbotVotingEnabled={chatbotVotingEnabled}
             renderChannelBanner={renderChannelBanner}
             customProfileContent={customProfileContent}

package/src/types.ts

@@ -156,6 +156,8 @@ export interface ChannelViewProps {
    * messages will be sent with skip_push and silent flags to suppress
    * notifications to the creator until the agent responds.
    * The library reads chatbot_paused from channel.data internally.
+   *
+   * In header UI, this treatment is shown only for visitor view.
    */
   dmAgentEnabled?: boolean