@linktr.ee/messaging-react 1.22.0-rc-1771903841 → 1.22.0

package/package.json

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

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: msg.attachments ?? [],
+    attachments: [],
     latest_reactions: [],
     own_reactions: [],
     reaction_counts: {},
@@ -91,7 +91,6 @@ 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
@@ -207,37 +206,3 @@ 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,34 +64,11 @@ Paid.args = {
   }),
 }
 
-export const ChatbotReceiverText: StoryFn<ComponentProps> = Template.bind({})
-ChatbotReceiverText.args = {
+export const Chatbot: StoryFn<ComponentProps> = Template.bind({})
+Chatbot.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(),
@@ -127,36 +104,11 @@ export const AllVariants: StoryFn = () => {
         />
       </div>
       <div className="flex items-center gap-4">
-        <span className="text-sm w-32">Chatbot (receiver):</span>
+        <span className="text-sm w-32">Chatbot:</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.tsx

@@ -5,20 +5,10 @@ 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 = ({ size = 12 }: { size?: number }) => (
-  <svg
-    width={size}
-    height={size}
-    viewBox="0 0 10 10"
-    fill="none"
-    aria-hidden="true"
-  >
+const SparkleIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 10 10" fill="none">
     <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"
       fill="currentColor"
@@ -54,8 +44,6 @@ 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)
@@ -84,44 +72,13 @@ export const MessageTag = ({
     )
   }
 
-  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
+  // Chatbot tag
   return (
-    <div className={chatbotClassName} data-testid="message-chatbot-indicator">
-      {isMyMessage && !isSenderAttachmentVariant ? (
-        <>
-          {label}
-          {icon}
-        </>
-      ) : (
-        <>
-          {icon}
-          {label}
-        </>
-      )}
+    <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>
   )
 }

package/src/components/CustomMessage/index.tsx

@@ -117,12 +117,11 @@ 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}`,
-    isMine
+    isMyMessage()
       ? 'str-chat__message--me str-chat__message-simple--me'
       : 'str-chat__message--other',
     message.text ? 'str-chat__message--has-text' : 'has-no-text',
@@ -143,12 +142,6 @@ 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 (
     <>
@@ -198,13 +191,6 @@ 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
@@ -222,15 +208,9 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
                 )}
                 <MessageErrorIcon />
               </div>
-              {/* Tip/paid tags stay outside; chatbot attachment indicator stays outside too */}
-              {(!isChatbot || useAttachmentFooterChatbotTag) && (
-                <MessageTag
-                  message={message}
-                  hasAttachment={hasRenderableAttachments}
-                  isMyMessage={isMine}
-                />
-              )}
-              {chatbotVotingEnabled && isChatbot && (
+              {/* Tag positioned outside and below the bubble */}
+              <MessageTag message={message} />
+              {chatbotVotingEnabled && isChatbotMessage(message) && (
                 <MessageVoteButtons
                   selected={voteState}
                   onVoteUp={voteUp}

package/src/styles.css

@@ -134,45 +134,9 @@
   color: #016630;
 }
 
-.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-bottom: 8px;
-}
-
-.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 {
-  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-tag--chatbot {
+  background-color: transparent;
+  color: #7f22fe;
 }
 
 /* Message vote buttons (chatbot feedback) */
@@ -195,9 +159,7 @@
   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 {

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

@@ -1,110 +0,0 @@
-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()
-  })
-})