@linktr.ee/messaging-react 1.12.7 → 1.12.8-rc-1765974383

package/src/components/CustomMessage/index.tsx

@@ -0,0 +1,260 @@
+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,
+  MessageOptions as DefaultMessageOptions,
+  MessageRepliesCountButton as DefaultMessageRepliesCountButton,
+  MessageStatus as DefaultMessageStatus,
+  MessageText,
+  MessageTimestamp as DefaultMessageTimestamp,
+  Poll,
+  ReactionsList as DefaultReactionList,
+  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 } 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,
+    MessageOptions = DefaultMessageOptions,
+    MessageActions = MessageOptions,
+    MessageBlocked = DefaultMessageBlocked,
+    MessageBouncePrompt = DefaultMessageBouncePrompt,
+    MessageDeleted = DefaultMessageDeleted,
+    MessageIsThreadReplyInChannelButtonIndicator = DefaultMessageIsThreadReplyInChannelButtonIndicator,
+    MessageRepliesCountButton = DefaultMessageRepliesCountButton,
+    MessageStatus = DefaultMessageStatus,
+    MessageTimestamp = DefaultMessageTimestamp,
+    ReactionsList = DefaultReactionList,
+    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)
+
+  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}
+        >
+          <MessageActions />
+          <div className="str-chat__message-reactions-host">
+            {hasReactions && <ReactionsList reverse />}
+          </div>
+          <div className="str-chat__message-bubble">
+            {poll && <Poll poll={poll} />}
+            {finalAttachments?.length && !message.quoted_message ? (
+              <Attachment
+                actionHandler={handleAction}
+                attachments={finalAttachments}
+              />
+            ) : null}
+            {/* Custom tag component - positioned above message text */}
+            <MessageTag message={message} />
+            {isAIGenerated ? (
+              <StreamedMessageText message={message} renderText={renderText} />
+            ) : (
+              <MessageText message={message} renderText={renderText} />
+            )}
+            <MessageErrorIcon />
+          </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

@@ -1,10 +1,19 @@
+import { StarFourIcon } from '@phosphor-icons/react'
+import classNames from 'classnames'
 import { MessageTimestamp, type EventComponentProps } from 'stream-chat-react'
 
 export const CustomSystemMessage: React.FC<EventComponentProps> = (props) => {
   const isDateHidden = props.message.hide_date === true
+  const isPriority = props.message.system_type === 'priority'
 
   return (
-    <div className="str-chat__message--system" data-testid="message-system">
+    <div
+      className={classNames('str-chat__message--system', {
+        'str-chat__message--system--priority': isPriority,
+      })}
+      data-testid="message-system"
+    >
+      {isPriority && <StarFourIcon size={18} className="mx-auto mb-2 mt-3" />}
       <div className="str-chat__message--system__text">
         <div className="str-chat__message--system__line"></div>
         <p>{props.message.text}</p>

package/src/stream-custom-data.ts

@@ -21,6 +21,26 @@ declare module 'stream-chat' {
      * Used by CustomSystemMessage component.
      */
     hide_date?: boolean
+    /**
+     * Type of system message for special styling.
+     * Used by CustomSystemMessage component.
+     */
+    system_type?: 'priority'
+    /**
+     * Type of tag to display on the message.
+     * Used by MessageTag component.
+     */
+    tag_type?: 'paid-priority' | 'tip'
+    /**
+     * Monetary amount for tip messages.
+     * Used by MessageTag component.
+     */
+    amount?: number
+    /**
+     * Currency code (e.g. 'USD', 'EUR') for tip messages.
+     * Used by MessageTag component.
+     */
+    currency?: string
   }
 }
 

package/src/styles.css

@@ -102,3 +102,37 @@
 .str-chat__list {
   background: transparent;
 }
+
+/* Custom message tag styles */
+.message-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin: var(--str-chat__spacing-4);
+  margin-bottom: 0;
+  padding: 7px 8px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 500;
+  color: white;
+}
+
+.message-tag__icon {
+  display: flex;
+  align-items: center;
+}
+
+.message-tag--tip {
+  background-color: #008236;
+}
+
+.message-tag--paid-priority {
+  background-color: #7f22fe;
+}
+
+.str-chat__message--system--priority {
+  margin-top: var(--str-chat__spacing-3);
+  margin-bottom: var(--str-chat__spacing-2);
+  font-size: 12px;
+  color: var(--text-secondary, #0000008c);
+}