@linktr.ee/messaging-react 1.22.0 → 1.22.1

package/package.json

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

package/src/components/ChannelView.tsx

@@ -47,6 +47,9 @@ type BlockedUser = {
   blocked_user_id: string
 }
 
+const ICON_BTN_CLASS =
+  'size-10 rounded-full bg-[#F1F0EE] hover:bg-[#E5E4E1] flex items-center justify-center transition-colors duration-150'
+
 /**
  * Custom channel header component
  */
@@ -118,9 +121,7 @@ const CustomChannelHeader: React.FC<{
         <div className="flex items-center gap-2">
           {showBackButton && (
             <button
-              className={classNames(
-                'size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center'
-              )}
+              className={ICON_BTN_CLASS}
               onClick={onBack || (() => {})}
               type="button"
               aria-label="Back to conversations"
@@ -143,7 +144,7 @@ const CustomChannelHeader: React.FC<{
         <div className="flex justify-end items-center gap-2">
           {showStarButton && (
             <button
-              className="size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center"
+              className={ICON_BTN_CLASS}
               onClick={handleStarClick}
               type="button"
               aria-label={
@@ -160,7 +161,7 @@ const CustomChannelHeader: React.FC<{
             </button>
           )}
           <button
-            className="size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center"
+            className={ICON_BTN_CLASS}
             onClick={onShowInfo}
             type="button"
             aria-label="Show info"
@@ -175,7 +176,7 @@ const CustomChannelHeader: React.FC<{
             <button
               type="button"
               onClick={onBack}
-              className="size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center"
+              className={ICON_BTN_CLASS}
               aria-label="Back to conversations"
             >
               <ArrowLeftIcon className="size-5 text-black/90" />
@@ -197,7 +198,7 @@ const CustomChannelHeader: React.FC<{
         <div className="flex items-center gap-2">
           {showStarButton && (
             <button
-              className="size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center"
+              className={ICON_BTN_CLASS}
               onClick={handleStarClick}
               type="button"
               aria-label={
@@ -215,7 +216,7 @@ const CustomChannelHeader: React.FC<{
           )}
           {canShowInfo && onShowInfo && (
             <button
-              className="size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center"
+              className={ICON_BTN_CLASS}
               onClick={onShowInfo}
               type="button"
               aria-label="Show info"

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

@@ -38,7 +38,7 @@ const createMockChannel = async (
     created_at: new Date(Date.now() - 1000 * 60 * (messages.length - index)),
     updated_at: new Date(Date.now() - 1000 * 60 * (messages.length - index)),
     html: `<p>${msg.text}</p>`,
-    attachments: [],
+    attachments: msg.attachments ?? [],
     latest_reactions: [],
     own_reactions: [],
     reaction_counts: {},
@@ -91,6 +91,7 @@ interface TemplateProps {
     text: string
     user: typeof mockUser | { id: string; name: string }
     type?: 'regular' | 'system'
+    attachments?: Array<Record<string, unknown>>
     metadata?: {
       custom_type?: 'MESSAGE_TIP' | 'MESSAGE_PAID' | 'MESSAGE_CHATBOT'
       amount_text?: string
@@ -206,3 +207,37 @@ MixedTags.args = {
     { id: 'msg-9', text: 'Thanks for letting me know.', user: mockUser },
   ],
 }
+
+export const ChatbotVariants: StoryFn<TemplateProps> = Template.bind({})
+ChatbotVariants.args = {
+  messages: [
+    {
+      id: 'msg-1',
+      text: 'Would you like to share some details that I can relay to Rupi Kaur?',
+      user: participant,
+      metadata: { custom_type: 'MESSAGE_CHATBOT' },
+    },
+    {
+      id: 'msg-2',
+      text: 'I’m sorry to hear that. Are you referring to the course you’ve recently purchased?',
+      user: mockUser,
+      metadata: { custom_type: 'MESSAGE_CHATBOT' },
+    },
+    {
+      id: 'msg-3',
+      text: '',
+      user: mockUser,
+      metadata: { custom_type: 'MESSAGE_CHATBOT' },
+      attachments: [
+        {
+          type: 'card',
+          title: 'The Perfect Yoga Course',
+          title_link: 'https://linktr.ee/rupikaur/learntoyoga',
+          text: 'linktr.ee/rupikaur/learntoyoga',
+          image_url:
+            'https://images.unsplash.com/photo-1571019613914-85f342c1d4b5?auto=format&fit=crop&w=1024&q=80',
+        },
+      ],
+    },
+  ],
+}

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

@@ -64,11 +64,34 @@ Paid.args = {
   }),
 }
 
-export const Chatbot: StoryFn<ComponentProps> = Template.bind({})
-Chatbot.args = {
+export const ChatbotReceiverText: StoryFn<ComponentProps> = Template.bind({})
+ChatbotReceiverText.args = {
   message: createMockMessage({ metadata: { custom_type: 'MESSAGE_CHATBOT' } }),
 }
 
+export const ChatbotSenderText: StoryFn<ComponentProps> = (args) => {
+  return (
+    <div className="p-12">
+      <div className="bg-[#121110] rounded-3xl px-4 py-3 w-[280px]">
+        <MessageTag {...args} />
+      </div>
+    </div>
+  )
+}
+ChatbotSenderText.args = {
+  message: createMockMessage({ metadata: { custom_type: 'MESSAGE_CHATBOT' } }),
+  isMyMessage: true,
+}
+
+export const ChatbotSenderAttachment: StoryFn<ComponentProps> = Template.bind(
+  {}
+)
+ChatbotSenderAttachment.args = {
+  message: createMockMessage({ metadata: { custom_type: 'MESSAGE_CHATBOT' } }),
+  isMyMessage: true,
+  hasAttachment: true,
+}
+
 export const NoTag: StoryFn<ComponentProps> = Template.bind({})
 NoTag.args = {
   message: createMockMessage(),
@@ -104,11 +127,36 @@ export const AllVariants: StoryFn = () => {
         />
       </div>
       <div className="flex items-center gap-4">
-        <span className="text-sm w-32">Chatbot:</span>
+        <span className="text-sm w-32">Chatbot (receiver):</span>
         <MessageTag
-          message={createMockMessage({ metadata: { custom_type: 'MESSAGE_CHATBOT' } })}
+          message={createMockMessage({
+            metadata: { custom_type: 'MESSAGE_CHATBOT' },
+          })}
         />
       </div>
+      <div className="flex items-center gap-4">
+        <span className="text-sm w-32">Chatbot (sender):</span>
+        <div className="bg-[#121110] rounded-3xl px-4 py-3 w-[280px]">
+          <MessageTag
+            message={createMockMessage({
+              metadata: { custom_type: 'MESSAGE_CHATBOT' },
+            })}
+            isMyMessage
+          />
+        </div>
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="text-sm w-32">Chatbot (attachment):</span>
+        <div className="w-[280px]">
+          <MessageTag
+            message={createMockMessage({
+              metadata: { custom_type: 'MESSAGE_CHATBOT' },
+            })}
+            isMyMessage
+            hasAttachment
+          />
+        </div>
+      </div>
       <div className="flex items-center gap-4">
         <span className="text-sm w-32">No tag:</span>
         <MessageTag message={createMockMessage()} />

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

@@ -0,0 +1,110 @@
+import { LocalMessage } from 'stream-chat'
+import { describe, expect, it } from 'vitest'
+
+import { renderWithProviders, screen } from '../../test/utils'
+
+import { MessageTag } from './MessageTag'
+
+interface MockMessageOptions {
+  metadata?: {
+    custom_type?: 'MESSAGE_TIP' | 'MESSAGE_PAID' | 'MESSAGE_CHATBOT'
+    amount_text?: string
+  }
+  text?: string
+}
+
+const createMockMessage = (options?: MockMessageOptions): LocalMessage =>
+  ({
+    id: 'msg-1',
+    text: options?.text ?? 'Hello world',
+    type: 'regular',
+    created_at: new Date(),
+    updated_at: new Date(),
+    metadata: options?.metadata,
+  }) as LocalMessage
+
+describe('MessageTag', () => {
+  it('renders receiver chatbot text variant with DM Agent copy and icon first', () => {
+    renderWithProviders(
+      <MessageTag
+        message={createMockMessage({
+          metadata: { custom_type: 'MESSAGE_CHATBOT' },
+        })}
+      />
+    )
+
+    const indicator = screen.getByTestId('message-chatbot-indicator')
+    expect(indicator).toHaveTextContent('Sent with DM Agent')
+    expect(indicator).toHaveClass('message-chatbot-indicator--receiver')
+    expect(indicator).toHaveClass('message-chatbot-indicator--text')
+
+    expect(indicator.children[0]).toHaveClass('message-chatbot-indicator__icon')
+    expect(indicator.children[1]).toHaveClass(
+      'message-chatbot-indicator__label'
+    )
+  })
+
+  it('renders sender chatbot text variant with mirrored order', () => {
+    renderWithProviders(
+      <MessageTag
+        message={createMockMessage({
+          metadata: { custom_type: 'MESSAGE_CHATBOT' },
+        })}
+        isMyMessage
+      />
+    )
+
+    const indicator = screen.getByTestId('message-chatbot-indicator')
+    expect(indicator).toHaveTextContent('Sent with DM Agent')
+    expect(indicator).toHaveClass('message-chatbot-indicator--sender')
+    expect(indicator).toHaveClass('message-chatbot-indicator--text')
+
+    expect(indicator.children[0]).toHaveClass(
+      'message-chatbot-indicator__label'
+    )
+    expect(indicator.children[1]).toHaveClass('message-chatbot-indicator__icon')
+  })
+
+  it('renders sender attachment chatbot variant outside-footer copy', () => {
+    renderWithProviders(
+      <MessageTag
+        message={createMockMessage({
+          metadata: { custom_type: 'MESSAGE_CHATBOT' },
+        })}
+        hasAttachment
+        isMyMessage
+      />
+    )
+
+    const indicator = screen.getByTestId('message-chatbot-indicator')
+    expect(indicator).toHaveTextContent('Sent with AI')
+    expect(indicator).toHaveClass('message-chatbot-indicator--sender')
+    expect(indicator).toHaveClass('message-chatbot-indicator--attachment')
+
+    expect(indicator.children[0]).toHaveClass('message-chatbot-indicator__icon')
+    expect(indicator.children[1]).toHaveClass(
+      'message-chatbot-indicator__label'
+    )
+  })
+
+  it('keeps tip tag behavior unchanged', () => {
+    renderWithProviders(
+      <MessageTag
+        message={createMockMessage({
+          metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$5.50' },
+        })}
+      />
+    )
+
+    const tipTag = screen.getByText('Delivered with $5.50 tip')
+    expect(tipTag.closest('.message-tag--tip')).not.toBeNull()
+  })
+
+  it('returns null for non-custom messages', () => {
+    const { container } = renderWithProviders(
+      <MessageTag message={createMockMessage()} />
+    )
+
+    expect(container.firstChild).toBeNull()
+  })
+})

package/src/components/CustomMessage/MessageTag.tsx

@@ -5,13 +5,24 @@ interface MessageTagProps {
   message: LocalMessage
   /** When true, renders as a standalone bubble instead of a small tag */
   standalone?: boolean
+  /** When true, renders sender-side chatbot variants */
+  isMyMessage?: boolean
+  /** Whether the message includes an attachment */
+  hasAttachment?: boolean
 }
 
-const SparkleIcon = () => (
-  <svg width="12" height="12" viewBox="0 0 10 10" fill="none">
+const SparkleIcon = ({ size = 15 }: { size?: number }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 15 15"
+    fill="none"
+    aria-hidden="true"
+  >
     <path
-      d="M10.003 5a.705.705 0 0 1-.469.67L6.7 6.7 5.67 9.535a.715.715 0 0 1-1.34 0L3.3 6.7.466 5.67a.715.715 0 0 1 0-1.34L3.3 3.3 4.33.466a.715.715 0 0 1 1.34 0L6.7 3.3l2.834 1.03a.705.705 0 0 1 .469.67"
+      d="M12.003 9a.985.985 0 0 1-.652.934l-3.223 1.191-1.188 3.226a.995.995 0 0 1-1.867 0l-1.195-3.226L.65 9.937a.995.995 0 0 1 0-1.867l3.227-1.195 1.187-3.226a.995.995 0 0 1 1.868 0l1.195 3.226 3.226 1.187a.99.99 0 0 1 .649.938m3-5.83a.52.52 0 0 1-.344.492l-1.702.63-.627 1.703a.525.525 0 0 1-.986 0l-.63-1.704-1.704-.627a.525.525 0 0 1 0-.986l1.703-.63.627-1.704a.526.526 0 0 1 .986 0l.631 1.703 1.704.627a.52.52 0 0 1 .342.495"
       fill="currentColor"
+      fillOpacity={0.55}
     />
   </svg>
 )
@@ -44,6 +55,8 @@ export const isTipOnlyMessage = (message: LocalMessage): boolean => {
 export const MessageTag = ({
   message,
   standalone = false,
+  isMyMessage = false,
+  hasAttachment = false,
 }: MessageTagProps) => {
   const isTipOrPaid = isTipOrPaidMessage(message)
   const isChatbot = isChatbotMessage(message)
@@ -72,13 +85,44 @@ export const MessageTag = ({
     )
   }
 
-  // Chatbot tag
+  const isSenderAttachmentVariant = isMyMessage && hasAttachment
+  const chatbotLabel = isSenderAttachmentVariant
+    ? 'Sent with AI'
+    : 'Sent with DM Agent'
+
+  const chatbotClassName = [
+    'message-chatbot-indicator',
+    isMyMessage
+      ? 'message-chatbot-indicator--sender'
+      : 'message-chatbot-indicator--receiver',
+    isSenderAttachmentVariant
+      ? 'message-chatbot-indicator--attachment'
+      : 'message-chatbot-indicator--text',
+  ].join(' ')
+
+  const label = (
+    <span className="message-chatbot-indicator__label">{chatbotLabel}</span>
+  )
+  const icon = (
+    <span className="message-chatbot-indicator__icon">
+      <SparkleIcon size={isSenderAttachmentVariant ? 12 : 15} />
+    </span>
+  )
+
+  // Chatbot indicator variant
   return (
-    <div className="message-tag message-tag--chatbot">
-      <span className="message-tag__icon" style={{ marginTop: -1 }}>
-        <SparkleIcon />
-      </span>
-      <span className="message-tag__label">Chatbot</span>
+    <div className={chatbotClassName} data-testid="message-chatbot-indicator">
+      {isMyMessage && !isSenderAttachmentVariant ? (
+        <>
+          {label}
+          {icon}
+        </>
+      ) : (
+        <>
+          {icon}
+          {label}
+        </>
+      )}
     </div>
   )
 }

package/src/components/CustomMessage/index.tsx

@@ -117,11 +117,12 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
     handleClick = () => setIsBounceDialogOpen(true)
   }
 
+  const isMine = isMyMessage()
   const rootClassName = classNames(
     'str-chat__message str-chat__message-simple',
     `str-chat__message--${message.type}`,
     `str-chat__message--${message.status}`,
-    isMyMessage()
+    isMine
       ? 'str-chat__message--me str-chat__message-simple--me'
       : 'str-chat__message--other',
     message.text ? 'str-chat__message--has-text' : 'has-no-text',
@@ -142,6 +143,12 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
 
   const poll = message.poll_id && client.polls.fromState(message.poll_id)
   const isTipOnly = isTipOnlyMessage(message)
+  const isChatbot = isChatbotMessage(message)
+  const hasRenderableAttachments = !!(
+    finalAttachments?.length && !message.quoted_message
+  )
+  const useAttachmentFooterChatbotTag =
+    isChatbot && isMine && hasRenderableAttachments
 
   return (
     <>
@@ -191,6 +198,13 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
           ) : (
             <div className="str-chat__message-bubble-wrapper">
               <div className="str-chat__message-bubble">
+                {isChatbot && !useAttachmentFooterChatbotTag && (
+                  <MessageTag
+                    message={message}
+                    hasAttachment={hasRenderableAttachments}
+                    isMyMessage={isMine}
+                  />
+                )}
                 {poll && <Poll poll={poll} />}
                 {finalAttachments?.length && !message.quoted_message ? (
                   <Attachment
@@ -208,9 +222,15 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
                 )}
                 <MessageErrorIcon />
               </div>
-              {/* Tag positioned outside and below the bubble */}
-              <MessageTag message={message} />
-              {chatbotVotingEnabled && isChatbotMessage(message) && (
+              {/* Tip/paid tags stay outside; chatbot attachment indicator stays outside too */}
+              {(!isChatbot || useAttachmentFooterChatbotTag) && (
+                <MessageTag
+                  message={message}
+                  hasAttachment={hasRenderableAttachments}
+                  isMyMessage={isMine}
+                />
+              )}
+              {chatbotVotingEnabled && isChatbot && (
                 <MessageVoteButtons
                   selected={voteState}
                   onVoteUp={voteUp}

package/src/styles.css

@@ -134,9 +134,51 @@
   color: #016630;
 }
 
-.message-tag--chatbot {
-  background-color: transparent;
-  color: #7f22fe;
+.message-chatbot-indicator {
+  display: inline-flex;
+  align-items: center;
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0.2px;
+}
+
+.message-chatbot-indicator--text {
+  width: 100%;
+  gap: 6px;
+  margin-top: 12px;
+  padding-inline: 16px;
+}
+
+.message-chatbot-indicator--receiver {
+  justify-content: flex-start;
+  color: rgba(0, 0, 0, 0.3);
+}
+
+.message-chatbot-indicator--sender {
+  justify-content: flex-end;
+}
+
+.message-chatbot-indicator--sender.message-chatbot-indicator--text {
+  justify-content: flex-start;
+  color: rgba(255, 255, 255, 0.55);
+}
+
+.message-chatbot-indicator--attachment {
+  width: 100%;
+  gap: 8px;
+  margin-top: 4px;
+  color: rgba(0, 0, 0, 0.3);
+}
+
+.message-chatbot-indicator__icon {
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+}
+
+.message-chatbot-indicator__label {
+  text-align: left;
 }
 
 /* Message vote buttons (chatbot feedback) */
@@ -159,7 +201,9 @@
   background-color: transparent;
   color: rgba(0, 0, 0, 0.35);
   cursor: pointer;
-  transition: background-color 0.15s, color 0.15s;
+  transition:
+    background-color 0.15s,
+    color 0.15s;
 }
 
 .message-vote-button:hover {