@linktr.ee/messaging-react 1.21.2 → 1.22.0-rc-1771558667

package/package.json

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

package/src/components/CustomSystemMessage/CustomSystemMessage.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import type { EventComponentProps } from 'stream-chat-react'
+
+import { CustomSystemMessage } from '.'
+
+const meta: Meta<typeof CustomSystemMessage> = {
+  title: 'CustomSystemMessage',
+  component: CustomSystemMessage,
+  parameters: {
+    layout: 'centered',
+  },
+}
+export default meta
+
+const createStoryProps = (
+  messageOverrides: Partial<EventComponentProps['message']>
+): EventComponentProps =>
+  ({
+    message: {
+      id: 'system-message-1',
+      type: 'system',
+      text: 'System message',
+      hide_date: true,
+      ...messageOverrides,
+    },
+  }) as EventComponentProps
+
+const Template: StoryFn<EventComponentProps> = (args) => (
+  <div className="w-[420px] bg-white p-6">
+    <CustomSystemMessage {...args} />
+  </div>
+)
+
+export const DmAgentPaused: StoryFn<EventComponentProps> = Template.bind({})
+DmAgentPaused.args = createStoryProps({
+  text: 'DM Agent paused for this conversation',
+  metadata: {
+    custom_type: 'SYSTEM_DM_AGENT_PAUSED',
+  },
+})
+
+export const DmAgentResumed: StoryFn<EventComponentProps> = Template.bind({})
+DmAgentResumed.args = createStoryProps({
+  text: 'DM Agent resumed for this conversation',
+  metadata: {
+    custom_type: 'SYSTEM_DM_AGENT_RESUMED',
+  },
+})
+
+export const GenericFallback: StoryFn<EventComponentProps> = Template.bind({})
+GenericFallback.args = createStoryProps({
+  text: 'Message activity event',
+  metadata: {
+    custom_type: 'MESSAGE_CHATBOT',
+  },
+})

package/src/components/CustomSystemMessage/CustomSystemMessage.test.tsx

@@ -0,0 +1,96 @@
+import type { EventComponentProps } from 'stream-chat-react'
+import { describe, expect, it } from 'vitest'
+
+import type { DmAgentSystemType } from '../../stream-custom-data'
+import { renderWithProviders, screen } from '../../test/utils'
+
+import { CustomSystemMessage } from '.'
+
+const createProps = (
+  messageOverrides: Partial<EventComponentProps['message']> = {}
+): EventComponentProps =>
+  ({
+    message: {
+      id: 'system-message-1',
+      type: 'system',
+      text: 'System message',
+      hide_date: true,
+      ...messageOverrides,
+    },
+  }) as EventComponentProps
+
+describe('CustomSystemMessage', () => {
+  it('detects DM Agent system subtype from metadata.custom_type', () => {
+    renderWithProviders(
+      <CustomSystemMessage
+        {...createProps({
+          text: 'DM Agent paused',
+          metadata: {
+            custom_type: 'SYSTEM_DM_AGENT_PAUSED',
+          },
+          dm_agent_system_type: 'SYSTEM_DM_AGENT_RESUMED',
+        })}
+      />
+    )
+
+    const dmAgentSystemMessage = screen.getByTestId('dm-agent-system-message')
+    expect(dmAgentSystemMessage).toHaveAttribute(
+      'data-dm-agent-system-type',
+      'SYSTEM_DM_AGENT_PAUSED'
+    )
+    expect(dmAgentSystemMessage).toHaveTextContent('DM Agent paused')
+  })
+
+  it('falls back to message.dm_agent_system_type when metadata subtype is absent', () => {
+    renderWithProviders(
+      <CustomSystemMessage
+        {...createProps({
+          text: 'DM Agent resumed',
+          metadata: {},
+          dm_agent_system_type: 'SYSTEM_DM_AGENT_RESUMED',
+        })}
+      />
+    )
+
+    const dmAgentSystemMessage = screen.getByTestId('dm-agent-system-message')
+    expect(dmAgentSystemMessage).toHaveAttribute(
+      'data-dm-agent-system-type',
+      'SYSTEM_DM_AGENT_RESUMED'
+    )
+    expect(dmAgentSystemMessage).toHaveTextContent('DM Agent resumed')
+  })
+
+  it('falls back to legacy generic rendering when subtype is absent or unknown', () => {
+    const { container } = renderWithProviders(
+      <CustomSystemMessage
+        {...createProps({
+          text: 'Legacy system message',
+          dm_agent_system_type:
+            'SYSTEM_DM_AGENT_UNKNOWN' as unknown as DmAgentSystemType,
+        })}
+      />
+    )
+
+    expect(screen.queryByTestId('dm-agent-system-message')).not.toBeInTheDocument()
+    expect(screen.getByText('Legacy system message')).toBeInTheDocument()
+    expect(
+      container.querySelector('.str-chat__message--system__line')
+    ).toBeInTheDocument()
+  })
+
+  it('renders a trailing close glyph without interaction', () => {
+    renderWithProviders(
+      <CustomSystemMessage
+        {...createProps({
+          metadata: {
+            custom_type: 'SYSTEM_DM_AGENT_PAUSED',
+          },
+        })}
+      />
+    )
+
+    expect(
+      screen.getByTestId('dm-agent-system-message-close')
+    ).toBeInTheDocument()
+  })
+})

package/src/components/CustomSystemMessage/index.tsx

@@ -1,7 +1,76 @@
+import { Sparkle as SparkleIcon, X } from '@phosphor-icons/react'
 import { MessageTimestamp, type EventComponentProps } from 'stream-chat-react'
 
+import type { DmAgentSystemType } from '../../stream-custom-data'
+
+const DM_AGENT_SYSTEM_TYPES: readonly DmAgentSystemType[] = [
+  'SYSTEM_DM_AGENT_PAUSED',
+  'SYSTEM_DM_AGENT_RESUMED',
+]
+
+const DM_AGENT_SYSTEM_MESSAGE_FALLBACK_TEXT: Record<DmAgentSystemType, string> =
+  {
+    SYSTEM_DM_AGENT_PAUSED: 'DM Agent has left the conversation',
+    SYSTEM_DM_AGENT_RESUMED: 'DM Agent has rejoined the conversation',
+  }
+
+const isDmAgentSystemType = (
+  value: string | undefined
+): value is DmAgentSystemType => {
+  return DM_AGENT_SYSTEM_TYPES.includes(value as DmAgentSystemType)
+}
+
+const getDmAgentSystemType = (
+  message: EventComponentProps['message']
+): DmAgentSystemType | undefined => {
+  const metadataCustomType = message.metadata?.custom_type
+  if (isDmAgentSystemType(metadataCustomType)) {
+    return metadataCustomType
+  }
+
+  const fallbackType = message.dm_agent_system_type
+  if (isDmAgentSystemType(fallbackType)) {
+    return fallbackType
+  }
+
+  return undefined
+}
+
 export const CustomSystemMessage: React.FC<EventComponentProps> = (props) => {
   const isDateHidden = props.message.hide_date === true
+  const dmAgentSystemType = getDmAgentSystemType(props.message)
+
+  if (dmAgentSystemType) {
+    const messageText =
+      props.message.text?.trim() ||
+      DM_AGENT_SYSTEM_MESSAGE_FALLBACK_TEXT[dmAgentSystemType]
+
+    return (
+      <div className="str-chat__message--system" data-testid="message-system">
+        <div
+          className="mes-dm-agent-system-message"
+          data-testid="dm-agent-system-message"
+          data-dm-agent-system-type={dmAgentSystemType}
+        >
+          <SparkleIcon
+            size={16}
+            weight="regular"
+            aria-hidden
+            className="mes-dm-agent-system-message__sparkle"
+          />
+          <p className="mes-dm-agent-system-message__text">{messageText}</p>
+          <span
+            className="mes-dm-agent-system-message__close"
+            aria-hidden
+            data-testid="dm-agent-system-message-close"
+          >
+            <X size={14} weight="regular" aria-hidden />
+          </span>
+        </div>
+        {!isDateHidden && <MessageTimestamp message={props.message} />}
+      </div>
+    )
+  }
 
   return (
     <div className="str-chat__message--system" data-testid="message-system">
@@ -14,4 +83,3 @@ export const CustomSystemMessage: React.FC<EventComponentProps> = (props) => {
     </div>
   )
 }
-

package/src/stream-custom-data.ts

@@ -14,12 +14,22 @@
 
 import 'stream-chat'
 
+export type DmAgentSystemType =
+  | 'SYSTEM_DM_AGENT_PAUSED'
+  | 'SYSTEM_DM_AGENT_RESUMED'
+
+export type MessageCustomType =
+  | 'MESSAGE_TIP'
+  | 'MESSAGE_PAID'
+  | 'MESSAGE_CHATBOT'
+  | DmAgentSystemType
+
 /**
  * Message metadata for paid messaging and chatbot flows.
  * Used to identify message types and payment status.
  */
 export interface MessageMetadata {
-  custom_type?: 'MESSAGE_TIP' | 'MESSAGE_PAID' | 'MESSAGE_CHATBOT'
+  custom_type?: MessageCustomType
   amount_text?: string
   payment_status?: string
   payment_intent_id?: string
@@ -38,5 +48,10 @@ declare module 'stream-chat' {
      * Contains type and payment information.
      */
     metadata?: MessageMetadata
+    /**
+     * DM Agent-specific system message type.
+     * Used as a fallback when metadata.custom_type is not available.
+     */
+    dm_agent_system_type?: DmAgentSystemType
   }
 }

package/src/styles.css

@@ -187,3 +187,44 @@
   color: #016e1a;
   background-color: #dbf0e0;
 }
+
+/* DM Agent pause/resume system message variants */
+.mes-dm-agent-system-message {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-inline: auto;
+  margin-bottom: 4px;
+  max-width: 100%;
+  padding: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 12px;
+  color: rgba(0, 0, 0, 0.55);
+}
+
+.mes-dm-agent-system-message__sparkle {
+  flex-shrink: 0;
+}
+
+.mes-dm-agent-system-message__text {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0.21px;
+  color: rgba(0, 0, 0, 0.55);
+  text-align: left;
+}
+
+.mes-dm-agent-system-message__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  color: rgba(0, 0, 0, 0.5);
+  pointer-events: none;
+}