feat: replace MessageIsThreadReplyInChannelButtonIndicator with MessageAlsoSentInChannelIndicator

src/components/Message/MessageAlsoSentInChannelIndicator.tsx

@@ -1,22 +1,104 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import { IconArrowRightUp } from '../Icons';
-import { useMessageContext, useTranslationContext } from '../../context';
+import {
+  useChannelActionContext,
+  useChannelStateContext,
+  useChatContext,
+  useMessageContext,
+  useTranslationContext,
+} from '../../context';
+import { formatMessage, type LocalMessage } from 'stream-chat';
 
 /**
- * Indicator shown in thread message lists when the message was also sent to the main channel (show_in_channel === true).
- * Only visible inside Thread, not in the main channel list.
+ * Indicator shown when the message was also sent to the main channel (show_in_channel === true).
  */
 export const MessageAlsoSentInChannelIndicator = () => {
-  const { message, threadList } = useMessageContext('MessageAlsoSentInChannelIndicator');
+  const { client } = useChatContext();
   const { t } = useTranslationContext();
+  const { channel } = useChannelStateContext();
+  const { jumpToMessage, openThread } = useChannelActionContext();
+  const { message, threadList } = useMessageContext('MessageAlsoSentInChannelIndicator');
+  const targetMessageRef = useRef<LocalMessage | null | undefined>(undefined);
+
+  const queryParent = () =>
+    channel
+      .getClient()
+      .search({ cid: channel.cid }, { id: message.parent_id })
+      .then(({ results }) => {
+        if (!results.length) {
+          throw new Error('Thread has not been found');
+        }
+        targetMessageRef.current = formatMessage(results[0].message);
+      })
+      .catch((error: Error) => {
+        client.notifications.addError({
+          message: t('Thread has not been found'),
+          options: {
+            originalError: error,
+            type: 'api:message:search:not-found',
+          },
+          origin: {
+            context: { threadReply: message },
+            emitter: 'MessageIsThreadReplyInChannelButtonIndicator',
+          },
+        });
+      });
+
+  // todo: it is not possible to jump to a message in thread
+  const jumpToReplyInChannelMessages = async (id: string) => {
+    await jumpToMessage(id);
+    // todo: we do not have API to control, whether thread of channel message list is show - on mobile devices important
+  };
+
+  useEffect(() => {
+    if (
+      targetMessageRef.current ||
+      targetMessageRef.current === null ||
+      !message.parent_id
+    )
+      return;
+    const localMessage = channel.state.findMessage(message.parent_id);
+    if (localMessage) {
+      targetMessageRef.current = localMessage;
+      return;
+    }
+  }, [channel, message]);
+
+  const handleClickViewReference = async () => {
+    if (!targetMessageRef.current) {
+      // search query is performed here in order to prevent multiple search queries in useEffect
+      // due to the message list 3x remounting its items
+      if (threadList) {
+        await jumpToReplyInChannelMessages(message.id); // we are in thread, and we want to jump to this reply in the main message list
+        return;
+      } else await queryParent(); // we are in the main list and need to query the thread
+    }
+    const target = targetMessageRef.current;
+    if (!target) {
+      // prevent further search queries if the message is not found in the DB
+      targetMessageRef.current = null;
+      return;
+    }
+
+    if (threadList) await jumpToReplyInChannelMessages(message.id);
+    else openThread(target);
+  };
 
-  if (!threadList || !message?.show_in_channel) return null;
+  if (!message?.show_in_channel) return null;
 
   return (
     <div className='str-chat__message-also-sent-in-channel' role='status'>
       <IconArrowRightUp />
-      <span>{t('Also sent in channel')}</span>
+      <span>{threadList ? t('Also sent in channel') : t('Replied to a thread')}</span>
+      <span> · </span>
+      <button
+        className='str-chat__message-also-sent-in-channel__link-button'
+        onClick={handleClickViewReference}
+        type='button'
+      >
+        {t('View')}
+      </button>
     </div>
   );
 };

src/components/Message/MessageSimple.tsx

@@ -13,7 +13,6 @@ import { MessageTimestamp as DefaultMessageTimestamp } from './MessageTimestamp'
 import { StreamedMessageText as DefaultStreamedMessageText } from './StreamedMessageText';
 import { isDateSeparatorMessage } from '../MessageList';
 import { MessageAlsoSentInChannelIndicator as DefaultMessageAlsoSentInChannelIndicator } from './MessageAlsoSentInChannelIndicator';
-import { MessageIsThreadReplyInChannelButtonIndicator as DefaultMessageIsThreadReplyInChannelButtonIndicator } from './MessageIsThreadReplyInChannelButtonIndicator';
 import { ReminderNotification as DefaultReminderNotification } from './ReminderNotification';
 import { MessageTranslationIndicator as DefaultMessageTranslationIndicator } from './MessageTranslationIndicator';
 import { useMessageReminder } from './hooks';
@@ -86,7 +85,6 @@ const MessageSimpleWithContext = ({
     MessageBouncePrompt = DefaultMessageBouncePrompt,
     MessageDeleted,
     MessageDeletedBubble = DefaultMessageDeletedBubble,
-    MessageIsThreadReplyInChannelButtonIndicator = DefaultMessageIsThreadReplyInChannelButtonIndicator,
     MessageRepliesCountButton = DefaultMessageRepliesCountButton,
     MessageStatus = DefaultMessageStatus,
     MessageTimestamp = DefaultMessageTimestamp,
@@ -141,8 +139,6 @@ const MessageSimpleWithContext = ({
 
   const showMetadata = !groupedByUser || endOfGroup;
   const showReplyCountButton = !threadList && !!message.reply_count;
-  const showIsReplyInChannel =
-    !threadList && message.show_in_channel && message.parent_id;
 
   const rootClassName = clsx(
     'str-chat__message str-chat__message-simple',
@@ -171,7 +167,7 @@ const MessageSimpleWithContext = ({
       '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__message-with-thread-link': showReplyCountButton,
       'str-chat__virtual-message__wrapper--end': endOfGroup,
       'str-chat__virtual-message__wrapper--first': firstOfGroup,
       'str-chat__virtual-message__wrapper--group': groupedByUser,
@@ -197,7 +193,7 @@ const MessageSimpleWithContext = ({
       )}
       <div className={rootClassName} key={message.id}>
         {message.pinned && <PinIndicator message={message} />}
-        {threadList && message.show_in_channel && <MessageAlsoSentInChannelIndicator />}
+        {message.show_in_channel && <MessageAlsoSentInChannelIndicator />}
         {!!reminder && <ReminderNotification reminder={reminder} />}
         <MessageTranslationIndicator message={message} />
         {message.user && (
@@ -251,7 +247,6 @@ const MessageSimpleWithContext = ({
               thread_participants={message.thread_participants}
             />
           )}
-          {showIsReplyInChannel && <MessageIsThreadReplyInChannelButtonIndicator />}
         </div>
         {showMetadata && (
           <div className='str-chat__message-metadata'>

src/components/Message/index.ts

@@ -5,7 +5,6 @@ export * from './MessageBlocked';
 export * from './MessageDeletedBubble';
 export * from './MessageEditedTimestamp';
 export * from './MessageAlsoSentInChannelIndicator';
-export * from './MessageIsThreadReplyInChannelButtonIndicator';
 export * from './MessageRepliesCountButton';
 export * from './PinIndicator';
 export * from './MessageSimple';

src/components/Message/styling/Message.scss

@@ -272,9 +272,7 @@
     justify-content: flex-end;
   }
 
-  &.str-chat__message--me
-    .str-chat__message-also-sent-in-channel
-    .str-chat__message-also-sent-in-channel__content {
+  &.str-chat__message--me .str-chat__message-also-sent-in-channel {
     justify-content: flex-end;
   }
 

src/components/Message/styling/MessageAlsoSentInChannelIndicator.scss

@@ -24,4 +24,11 @@
     stroke-width: 1.5px;
     stroke: var(--str-chat__message-also-sent-in-channel-color);
   }
+
+  .str-chat__message-also-sent-in-channel__link-button {
+    @include utils.button-reset;
+    cursor: pointer;
+    font: var(--str-chat__metadata-default-text);
+    color: var(--text-link);
+  }
 }

src/context/ComponentContext.tsx

@@ -143,8 +143,6 @@ export type ComponentContextValue = {
   MessageDeleted?: React.ComponentType<MessageDeletedProps>;
   /** Custom UI component for a message bubble of a deleted message, defaults to and accepts same props as: [MessageDeletedBubble](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageDeletedBubble.tsx) */
   MessageDeletedBubble?: React.ComponentType;
-  /** Custom UI component for an indicator that a message is a thread reply sent to channel list: [MessageIsThreadReplyInChannelButtonIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageIsThreadReplyInChannelButtonIndicator.tsx) */
-  MessageIsThreadReplyInChannelButtonIndicator?: React.ComponentType;
   MessageListMainPanel?: React.ComponentType<PropsWithChildrenOnly>;
   /** Custom UI component that displays message and connection status notifications in the `MessageList`, defaults to and accepts same props as [DefaultMessageListNotifications](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/MessageListNotifications.tsx) */
   MessageListNotifications?: React.ComponentType<MessageListNotificationsProps>;

src/i18n/de.json

@@ -288,6 +288,7 @@
   "Reminder set": "Erinnerung gesetzt",
   "Remove reminder": "Erinnerung entfernen",
   "Remove save for later": "„Später ansehen“ entfernen",
+  "Replied to a thread": "In einem Thread geantwortet",
   "Reply": "Antworten",
   "Reply to {{ authorName }}": "Antwort an {{ authorName }}",
   "Reply to Message": "Auf Nachricht antworten",
@@ -377,6 +378,7 @@
   "Upload type: \"{{ type }}\" is not allowed": "Upload-Typ: \"{{ type }}\" ist nicht erlaubt",
   "User uploaded content": "Vom Benutzer hochgeladener Inhalt",
   "Video": "Video",
+  "View": "Ansehen",
   "View {{count}} comments_one": "{{count}} Kommentar anzeigen",
   "View {{count}} comments_other": "{{count}} Kommentare anzeigen",
   "View original": "Original anzeigen",

src/i18n/en.json

@@ -288,6 +288,7 @@
   "Reminder set": "Reminder set",
   "Remove reminder": "Remove reminder",
   "Remove save for later": "Remove save for later",
+  "Replied to a thread": "Replied to a thread",
   "Reply": "Reply",
   "Reply to {{ authorName }}": "Reply to {{ authorName }}",
   "Reply to Message": "Reply to Message",
@@ -377,6 +378,7 @@
   "Upload type: \"{{ type }}\" is not allowed": "Upload type: \"{{ type }}\" is not allowed",
   "User uploaded content": "User uploaded content",
   "Video": "Video",
+  "View": "View",
   "View {{count}} comments_one": "View {{count}} comment",
   "View {{count}} comments_other": "View {{count}} comments",
   "View original": "View original",

src/i18n/es.json

@@ -295,6 +295,7 @@
   "Reminder set": "Recordatorio establecido",
   "Remove reminder": "Eliminar recordatorio",
   "Remove save for later": "Quitar guardar para después",
+  "Replied to a thread": "Respondió en un hilo",
   "Reply": "Responder",
   "Reply to {{ authorName }}": "Responder a {{ authorName }}",
   "Reply to Message": "Responder al mensaje",
@@ -388,6 +389,7 @@
   "Upload type: \"{{ type }}\" is not allowed": "Tipo de carga: \"{{ type }}\" no está permitido",
   "User uploaded content": "Contenido subido por el usuario",
   "Video": "Vídeo",
+  "View": "Ver",
   "View {{count}} comments_one": "Ver {{count}} comentario",
   "View {{count}} comments_many": "Ver {{count}} comentarios",
   "View {{count}} comments_other": "Ver {{count}} comentarios",

src/i18n/fr.json

@@ -295,6 +295,7 @@
   "Reminder set": "Rappel défini",
   "Remove reminder": "Supprimer le rappel",
   "Remove save for later": "Supprimer « Enregistrer pour plus tard »",
+  "Replied to a thread": "A répondu à un fil",
   "Reply": "Répondre",
   "Reply to {{ authorName }}": "Répondre à {{ authorName }}",
   "Reply to Message": "Répondre au message",
@@ -388,6 +389,7 @@
   "Upload type: \"{{ type }}\" is not allowed": "Le type de fichier : \"{{ type }}\" n'est pas autorisé",
   "User uploaded content": "Contenu téléchargé par l'utilisateur",
   "Video": "Vidéo",
+  "View": "Voir",
   "View {{count}} comments_one": "Voir {{count}} commentaire",
   "View {{count}} comments_many": "Voir {{count}} commentaires",
   "View {{count}} comments_other": "Voir {{count}} commentaires",

src/i18n/hi.json

@@ -289,6 +289,7 @@
   "Reminder set": "अनुस्मारक सेट किया गया",
   "Remove reminder": "रिमाइंडर हटाएं",
   "Remove save for later": "बाद में देखें हटाएं",
+  "Replied to a thread": "थ्रेड में जवाब दिया",
   "Reply": "जवाब दे दो",
   "Reply to {{ authorName }}": "{{ authorName }} को जवाब दें",
   "Reply to Message": "संदेश का जवाब दें",
@@ -378,6 +379,7 @@
   "Upload type: \"{{ type }}\" is not allowed": "अपलोड प्रकार: \"{{ type }}\" की अनुमति नहीं है",
   "User uploaded content": "उपयोगकर्ता अपलोड की गई सामग्री",
   "Video": "वीडियो",
+  "View": "देखें",
   "View {{count}} comments_one": "देखें {{count}} टिप्पणी",
   "View {{count}} comments_other": "देखें {{count}} टिप्पणियाँ",
   "View original": "मूल देखें",

src/i18n/it.json

@@ -295,6 +295,7 @@
   "Reminder set": "Promemoria impostato",
   "Remove reminder": "Rimuovi promemoria",
   "Remove save for later": "Rimuovi Salva per dopo",
+  "Replied to a thread": "Ha risposto in un thread",
   "Reply": "Rispondi",
   "Reply to {{ authorName }}": "Rispondi a {{ authorName }}",
   "Reply to Message": "Rispondi al messaggio",
@@ -388,6 +389,7 @@
   "Upload type: \"{{ type }}\" is not allowed": "Tipo di caricamento: \"{{ type }}\" non è consentito",
   "User uploaded content": "Contenuto caricato dall'utente",
   "Video": "Video",
+  "View": "Visualizza",
   "View {{count}} comments_one": "Visualizza {{count}} commento",
   "View {{count}} comments_many": "Visualizza {{count}} commenti",
   "View {{count}} comments_other": "Visualizza {{count}} commenti",