@linktr.ee/messaging-react 1.13.1 → 1.14.1

package/src/components/CustomMessage/index.tsx

@@ -0,0 +1,262 @@
+import classNames from 'classnames'
+import React, { useMemo, useState } from 'react'
+import {
+  Attachment as DefaultAttachment,
+  Avatar as DefaultAvatar,
+  EditMessageModal as DefaultEditMessageModal,
+  MessageBounceModal,
+  MessageBouncePrompt as DefaultMessageBouncePrompt,
+  MessageBlocked as DefaultMessageBlocked,
+  MessageDeleted as DefaultMessageDeleted,
+  MessageEditedTimestamp,
+  MessageErrorIcon,
+  MessageIsThreadReplyInChannelButtonIndicator as DefaultMessageIsThreadReplyInChannelButtonIndicator,
+  MessageRepliesCountButton as DefaultMessageRepliesCountButton,
+  MessageStatus as DefaultMessageStatus,
+  MessageText,
+  MessageTimestamp as DefaultMessageTimestamp,
+  Poll,
+  ReminderNotification as DefaultReminderNotification,
+  StreamedMessageText as DefaultStreamedMessageText,
+  areMessageUIPropsEqual,
+  isDateSeparatorMessage,
+  isMessageBlocked,
+  isMessageBounced,
+  isMessageEdited,
+  messageHasAttachments,
+  messageHasReactions,
+  useComponentContext,
+  useChatContext,
+  useMessageContext,
+  useMessageReminder,
+  useTranslationContext,
+  type MessageContextValue,
+  type MessageUIComponentProps,
+} from 'stream-chat-react'
+
+import { MessageTag, isTipOnlyMessage } from './MessageTag'
+
+type CustomMessageWithContextProps = MessageContextValue
+
+const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
+  const {
+    additionalMessageInputProps,
+    editing,
+    endOfGroup,
+    firstOfGroup,
+    groupedByUser,
+    handleAction,
+    handleOpenThread,
+    handleRetry,
+    highlighted,
+    isMessageAIGenerated,
+    isMyMessage,
+    message,
+    onUserClick,
+    onUserHover,
+    renderText,
+    threadList,
+  } = props
+
+  const { client } = useChatContext('CustomMessage')
+  const { t } = useTranslationContext('CustomMessage')
+  const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false)
+  const [isEditedTimestampOpen, setEditedTimestampOpen] = useState(false)
+  const reminder = useMessageReminder(message.id)
+
+  const {
+    Attachment = DefaultAttachment,
+    Avatar = DefaultAvatar,
+    EditMessageModal = DefaultEditMessageModal,
+    MessageBlocked = DefaultMessageBlocked,
+    MessageBouncePrompt = DefaultMessageBouncePrompt,
+    MessageDeleted = DefaultMessageDeleted,
+    MessageIsThreadReplyInChannelButtonIndicator = DefaultMessageIsThreadReplyInChannelButtonIndicator,
+    MessageRepliesCountButton = DefaultMessageRepliesCountButton,
+    MessageStatus = DefaultMessageStatus,
+    MessageTimestamp = DefaultMessageTimestamp,
+    ReminderNotification = DefaultReminderNotification,
+    StreamedMessageText = DefaultStreamedMessageText,
+    PinIndicator,
+  } = useComponentContext('CustomMessage')
+
+  const hasAttachment = messageHasAttachments(message)
+  const hasReactions = messageHasReactions(message)
+  const isAIGenerated = useMemo(
+    () => isMessageAIGenerated?.(message),
+    [isMessageAIGenerated, message]
+  )
+  const finalAttachments = useMemo(
+    () =>
+      !message.shared_location && !message.attachments
+        ? []
+        : !message.shared_location
+          ? message.attachments
+          : [message.shared_location, ...(message.attachments ?? [])],
+    [message]
+  )
+
+  if (isDateSeparatorMessage(message)) {
+    return null
+  }
+
+  if (message.deleted_at || message.type === 'deleted') {
+    return <MessageDeleted message={message} />
+  }
+
+  if (isMessageBlocked(message)) {
+    return <MessageBlocked />
+  }
+
+  const showMetadata = !groupedByUser || endOfGroup
+  const showReplyCountButton = !threadList && !!message.reply_count
+  const showIsReplyInChannel =
+    !threadList && message.show_in_channel && message.parent_id
+  const allowRetry =
+    message.status === 'failed' && message.error?.status !== 403
+  const isBounced = isMessageBounced(message)
+  const isEdited = isMessageEdited(message) && !isAIGenerated
+
+  let handleClick: (() => void) | undefined = undefined
+
+  if (allowRetry) {
+    handleClick = () => handleRetry(message)
+  } else if (isBounced) {
+    handleClick = () => setIsBounceDialogOpen(true)
+  } else if (isEdited) {
+    handleClick = () => setEditedTimestampOpen((prev) => !prev)
+  }
+
+  const rootClassName = classNames(
+    'str-chat__message str-chat__message-simple',
+    `str-chat__message--${message.type}`,
+    `str-chat__message--${message.status}`,
+    isMyMessage()
+      ? 'str-chat__message--me str-chat__message-simple--me'
+      : 'str-chat__message--other',
+    message.text ? 'str-chat__message--has-text' : 'has-no-text',
+    {
+      'str-chat__message--has-attachment': hasAttachment,
+      'str-chat__message--highlighted': highlighted,
+      'str-chat__message--pinned pinned-message': message.pinned,
+      'str-chat__message--with-reactions': hasReactions,
+      'str-chat__message-send-can-be-retried':
+        message?.status === 'failed' && message?.error?.status !== 403,
+      'str-chat__message-with-thread-link':
+        showReplyCountButton || showIsReplyInChannel,
+      'str-chat__virtual-message__wrapper--end': endOfGroup,
+      'str-chat__virtual-message__wrapper--first': firstOfGroup,
+      'str-chat__virtual-message__wrapper--group': groupedByUser,
+    }
+  )
+
+  const poll = message.poll_id && client.polls.fromState(message.poll_id)
+  const isTipOnly = isTipOnlyMessage(message)
+
+  return (
+    <>
+      {editing && (
+        <EditMessageModal
+          additionalMessageInputProps={additionalMessageInputProps}
+        />
+      )}
+      {isBounceDialogOpen && (
+        <MessageBounceModal
+          MessageBouncePrompt={MessageBouncePrompt}
+          onClose={() => setIsBounceDialogOpen(false)}
+          open={isBounceDialogOpen}
+        />
+      )}
+      <div className={rootClassName} key={message.id}>
+        {PinIndicator && <PinIndicator />}
+        {!!reminder && <ReminderNotification reminder={reminder} />}
+        {message.user && (
+          <Avatar
+            image={message.user.image}
+            name={message.user.name || message.user.id}
+            onClick={onUserClick}
+            onMouseOver={onUserHover}
+            user={message.user}
+          />
+        )}
+        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+        <div
+          className={classNames('str-chat__message-inner', {
+            'str-chat__simple-message--error-failed': allowRetry || isBounced,
+          })}
+          data-testid="message-inner"
+          onClick={handleClick}
+          onKeyDown={handleClick}
+          role={handleClick ? 'button' : undefined}
+          tabIndex={handleClick ? 0 : undefined}
+        >
+          {isTipOnly ? (
+            /* Tip-only messages render as a standalone bubble */
+            <MessageTag message={message} standalone />
+          ) : (
+            <div className="str-chat__message-bubble-wrapper">
+              <div className="str-chat__message-bubble">
+                {poll && <Poll poll={poll} />}
+                {finalAttachments?.length && !message.quoted_message ? (
+                  <Attachment
+                    actionHandler={handleAction}
+                    attachments={finalAttachments}
+                  />
+                ) : null}
+                {isAIGenerated ? (
+                  <StreamedMessageText
+                    message={message}
+                    renderText={renderText}
+                  />
+                ) : (
+                  <MessageText message={message} renderText={renderText} />
+                )}
+                <MessageErrorIcon />
+              </div>
+              {/* Tag positioned outside and below the bubble */}
+              <MessageTag message={message} />
+            </div>
+          )}
+        </div>
+        {showReplyCountButton && (
+          <MessageRepliesCountButton
+            onClick={handleOpenThread}
+            reply_count={message.reply_count}
+          />
+        )}
+        {showIsReplyInChannel && (
+          <MessageIsThreadReplyInChannelButtonIndicator />
+        )}
+        {showMetadata && (
+          <div className="str-chat__message-metadata">
+            <MessageStatus />
+            {!isMyMessage() && !!message.user && (
+              <span className="str-chat__message-simple-name">
+                {message.user.name || message.user.id}
+              </span>
+            )}
+            <MessageTimestamp customClass="str-chat__message-simple-timestamp" />
+            {isEdited && (
+              <span className="str-chat__mesage-simple-edited">
+                {t('Edited')}
+              </span>
+            )}
+            {isEdited && (
+              <MessageEditedTimestamp calendar open={isEditedTimestampOpen} />
+            )}
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
+
+const MemoizedCustomMessage = React.memo(
+  CustomMessageWithContext,
+  areMessageUIPropsEqual
+) as typeof CustomMessageWithContext
+
+export const CustomMessage = (props: MessageUIComponentProps) => {
+  const messageContext = useMessageContext('CustomMessage')
+  return <MemoizedCustomMessage {...messageContext} {...props} />
+}

package/src/components/CustomSystemMessage/index.tsx

@@ -14,3 +14,4 @@ export const CustomSystemMessage: React.FC<EventComponentProps> = (props) => {
     </div>
   )
 }
+

package/src/stream-custom-data.ts

@@ -21,6 +21,17 @@ declare module 'stream-chat' {
      * Used by CustomSystemMessage component.
      */
     hide_date?: boolean
+    /**
+     * Message metadata from backend.
+     * Contains type and payment information.
+     */
+    metadata?: {
+      custom_type?: 'MESSAGE_TIP' | 'MESSAGE_PAID' | 'MESSAGE_CHATBOT'
+      amount_text?: string
+      payment_status?: string
+      payment_intent_id?: string
+      listing_id?: string
+    }
   }
 }
 

package/src/styles.css

@@ -102,3 +102,48 @@
 .str-chat__list {
   background: transparent;
 }
+
+/* Wrapper to ensure tag stays below bubble */
+.str-chat__message-bubble-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Custom message tag styles */
+.message-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 4px;
+  padding: 0;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.message-tag__icon {
+  display: flex;
+  align-items: center;
+}
+
+.message-tag--tip {
+  background-color: transparent;
+  color: #016630;
+}
+
+.message-tag--chatbot {
+  background-color: transparent;
+  color: #7f22fe;
+}
+
+/* Standalone tip message (tip without text) */
+.message-tip-standalone {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 14px;
+  border-radius: 18px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #016e1a;
+  background-color: #dbf0e0;
+}