feat: add authorLabel prop to QuotedMessagePreviewUIProps (#3162)

Author: MartinCupela

src/components/MessageComposer/EditedMessagePreview.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { QuotedMessagePreviewUI } from './QuotedMessagePreview';
 import type { LocalMessage } from 'stream-chat';
+import { useTranslationContext } from '../../context';
 
 export type EditedMessagePreviewProps = {
   message: LocalMessage;
@@ -10,6 +11,14 @@ export type EditedMessagePreviewProps = {
 export const EditedMessagePreview = ({
   message,
   onCancel,
-}: EditedMessagePreviewProps) => (
-  <QuotedMessagePreviewUI onRemove={onCancel} quotedMessage={message} />
-);
+}: EditedMessagePreviewProps) => {
+  const { t } = useTranslationContext();
+
+  return (
+    <QuotedMessagePreviewUI
+      authorLabel={t('Edit Message')}
+      onRemove={onCancel}
+      quotedMessage={message}
+    />
+  );
+};

src/components/MessageComposer/QuotedMessagePreview.tsx

@@ -311,11 +311,15 @@ export const QuotedMessagePreview = ({
 
 type QuotedMessagePreviewUIProps = QuotedMessagePreviewProps & {
   quotedMessage: LocalMessageBase;
+  authorLabel?: ReactNode;
+  className?: string;
   onClick?: MouseEventHandler<HTMLDivElement>;
   onRemove?: () => void;
 };
 
 export const QuotedMessagePreviewUI = ({
+  authorLabel,
+  className,
   getQuotedMessageAuthor,
   onClick,
   onRemove,
@@ -412,7 +416,7 @@ export const QuotedMessagePreviewUI = ({
   return (
     <div
       aria-label={isInteractive ? t('aria/Jump to quoted message') : undefined}
-      className={clsx('str-chat__quoted-message-preview', {
+      className={clsx('str-chat__quoted-message-preview', className, {
         'str-chat__quoted-message-preview--own': isOwnMessage,
       })}
       data-testid='quoted-message-preview'
@@ -424,11 +428,12 @@ export const QuotedMessagePreviewUI = ({
       <QuotedMessageIndicator isOwnMessage={isOwnMessage} />
       <div className='str-chat__quoted-message-preview__content'>
         <div className='str-chat__quoted-message-preview__author'>
-          {isOwnMessage
-            ? t('You')
-            : authorName
-              ? t('Reply to {{ authorName }}', { authorName })
-              : t('Reply')}
+          {authorLabel ??
+            (isOwnMessage
+              ? t('You')
+              : authorName
+                ? t('Reply to {{ authorName }}', { authorName })
+                : t('Reply'))}
         </div>
 
         <div