fix: unified SummarizedMessagePreview, cover more cases

src/components/ChannelPreview/ChannelPreviewMessenger.tsx

@@ -3,49 +3,13 @@ import clsx from 'clsx';
 
 import { ChannelPreviewActionButtons as DefaultChannelPreviewActionButtons } from './ChannelPreviewActionButtons';
 import { ChannelPreviewTimestamp } from './ChannelPreviewTimestamp';
-import {
-  type ChannelPreviewDeliveryStatus,
-  type ChannelPreviewMessageType,
-  useLatestMessagePreview,
-} from './hooks/useLatestMessagePreview';
 
 import { ChannelAvatar as DefaultChannelAvatar } from '../Avatar';
 import { Badge } from '../Badge';
-import {
-  IconCamera1,
-  IconChainLink,
-  IconCheckmark1Small,
-  IconCircleBanSign,
-  IconClock,
-  IconDoubleCheckmark1Small,
-  IconExclamationCircle1,
-  IconFileBend,
-  IconMapPin,
-  IconMicrophone,
-  IconMute,
-  IconVideo,
-} from '../Icons';
+import { IconMute } from '../Icons';
 import { useComponentContext } from '../../context';
 import type { ChannelPreviewUIComponentProps } from './ChannelPreview';
-
-const deliveryStatusIconMap: Record<ChannelPreviewDeliveryStatus, React.ComponentType> = {
-  delivered: IconDoubleCheckmark1Small,
-  read: IconDoubleCheckmark1Small,
-  sending: IconClock,
-  sent: IconCheckmark1Small,
-};
-
-const contentTypeIconMap: Partial<
-  Record<ChannelPreviewMessageType, React.ComponentType>
-> = {
-  deleted: IconCircleBanSign,
-  file: IconFileBend,
-  image: IconCamera1,
-  link: IconChainLink,
-  location: IconMapPin,
-  video: IconVideo,
-  voice: IconMicrophone,
-};
+import { SummarizedMessagePreview } from '../SummarizedMessagePreview';
 
 const UnMemoizedChannelPreviewMessenger = (props: ChannelPreviewUIComponentProps) => {
   const {
@@ -70,17 +34,6 @@ const UnMemoizedChannelPreviewMessenger = (props: ChannelPreviewUIComponentProps
 
   const channelPreviewButton = useRef<HTMLButtonElement | null>(null);
 
-  const { deliveryStatus, senderName, text, type } = useLatestMessagePreview({
-    latestMessage: lastMessage,
-    messageDeliveryStatus,
-    participantCount: channel.data?.member_count,
-  });
-
-  const DeliveryStatusIcon = deliveryStatus
-    ? deliveryStatusIconMap[deliveryStatus]
-    : undefined;
-  const ContentTypeIcon = contentTypeIconMap[type];
-
   const avatarName =
     displayTitle || channel.state.messages[channel.state.messages.length - 1]?.user?.id;
 
@@ -133,41 +86,11 @@ const UnMemoizedChannelPreviewMessenger = (props: ChannelPreviewUIComponentProps
               )}
             </div>
           </div>
-          <div
-            className={clsx('str-chat__channel-preview-data__latest-message', {
-              [`str-chat__channel-preview-data__latest-message--${type}`]: type,
-            })}
-          >
-            {type === 'error' ? (
-              <>
-                <IconExclamationCircle1 />
-                <span>{text}</span>
-              </>
-            ) : (
-              <>
-                {DeliveryStatusIcon && (
-                  <span
-                    className={clsx(
-                      'str-chat__channel-preview-data__latest-message-delivery-status',
-                      {
-                        [`str-chat__channel-preview-data__latest-message-delivery-status--${deliveryStatus}`]:
-                          deliveryStatus,
-                      },
-                    )}
-                  >
-                    <DeliveryStatusIcon />
-                  </span>
-                )}
-                {senderName && (
-                  <span className='str-chat__channel-preview-data__latest-message-sender'>
-                    {senderName}:
-                  </span>
-                )}
-                {ContentTypeIcon && <ContentTypeIcon />}
-                <span className='channel-preview-data__latest-message-text'>{text}</span>
-              </>
-            )}
-          </div>
+          <SummarizedMessagePreview
+            latestMessage={lastMessage}
+            messageDeliveryStatus={messageDeliveryStatus}
+            participantCount={channel.data?.member_count}
+          />
         </div>
       </button>
     </div>

src/components/ChannelPreview/hooks/index.ts

@@ -1,9 +1,2 @@
 export { useChannelPreviewInfo } from './useChannelPreviewInfo';
-export { useLatestMessagePreview } from './useLatestMessagePreview';
-export type {
-  ChannelPreviewDeliveryStatus,
-  ChannelPreviewMessageType,
-  LatestMessagePreviewData,
-  UseLatestMessagePreviewParams,
-} from './useLatestMessagePreview';
 export { MessageDeliveryStatus } from './useMessageDeliveryStatus';

src/components/ChannelPreview/styling/ChannelPreview.scss

@@ -45,10 +45,10 @@
   cursor: pointer;
   text-align: start;
   font-family: var(--typography-font-family-sans);
-  background: var(--background-elevation-elevation-1);
   border-radius: var(--radius-lg);
   width: 100%;
 
+  background: var(--background-elevation-elevation-1);
   &:not(:disabled):hover {
     background: var(--background-core-hover);
   }
@@ -118,62 +118,4 @@
       }
     }
   }
-
-  .str-chat__channel-preview-data__latest-message {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-xxs);
-
-    flex-grow: 1;
-    flex-shrink: 1;
-    min-width: 0;
-
-    color: var(--text-secondary);
-    font-size: var(--typography-font-size-sm);
-    font-style: normal;
-    font-weight: var(--typography-font-weight-regular);
-    line-height: var(--typography-line-height-normal);
-
-    .str-chat__icon {
-      flex-shrink: 0;
-      width: var(--icon-size-sm);
-      height: var(--icon-size-sm);
-    }
-
-    &--error {
-      color: var(--text-error);
-    }
-
-    &--deleted {
-      color: var(--text-tertiary);
-    }
-
-    .channel-preview-data__latest-message-text {
-      flex: 1;
-      min-width: 0;
-
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
-
-    .str-chat__channel-preview-data__latest-message-delivery-status {
-      display: flex;
-      flex-shrink: 0;
-      color: var(--text-tertiary);
-
-      &--read {
-        color: var(--accent-primary);
-      }
-    }
-
-    .str-chat__channel-preview-data__latest-message-sender {
-      color: var(--text-tertiary);
-      font-weight: var(--typography-font-weight-semi-bold);
-
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
 }

src/components/SummarizedMessagePreview/SummarizedMessagePreview.tsx

@@ -0,0 +1,87 @@
+import clsx from 'clsx';
+import {
+  type ChannelPreviewDeliveryStatus,
+  type ChannelPreviewMessageType,
+  useLatestMessagePreview,
+  type UseLatestMessagePreviewParams,
+} from './hooks/useLatestMessagePreview';
+import {
+  IconCamera1,
+  IconChainLink,
+  IconCheckmark1Small,
+  IconCircleBanSign,
+  IconClock,
+  IconDoubleCheckmark1Small,
+  IconExclamationCircle1,
+  IconFileBend,
+  IconMapPin,
+  IconMicrophone,
+  IconVideo,
+} from '../Icons';
+
+const deliveryStatusIconMap: Record<ChannelPreviewDeliveryStatus, React.ComponentType> = {
+  delivered: IconDoubleCheckmark1Small,
+  read: IconDoubleCheckmark1Small,
+  sending: IconClock,
+  sent: IconCheckmark1Small,
+};
+
+const contentTypeIconMap: Partial<
+  Record<ChannelPreviewMessageType, React.ComponentType>
+> = {
+  deleted: IconCircleBanSign,
+  error: IconExclamationCircle1,
+  file: IconFileBend,
+  image: IconCamera1,
+  link: IconChainLink,
+  location: IconMapPin,
+  video: IconVideo,
+  voice: IconMicrophone,
+};
+
+export const SummarizedMessagePreview = ({
+  latestMessage,
+  messageDeliveryStatus,
+  participantCount,
+}: UseLatestMessagePreviewParams) => {
+  const { deliveryStatus, senderName, text, type } = useLatestMessagePreview({
+    latestMessage,
+    messageDeliveryStatus,
+    participantCount,
+  });
+
+  const DeliveryStatusIcon = deliveryStatus
+    ? deliveryStatusIconMap[deliveryStatus]
+    : undefined;
+  const ContentTypeIcon = contentTypeIconMap[type];
+
+  return (
+    <div
+      className={clsx('str-chat__summarized-message-preview', {
+        [`str-chat__summarized-message-preview--${type}`]: type,
+      })}
+    >
+      {type !== 'error' && (
+        <>
+          {DeliveryStatusIcon && (
+            <span
+              className={clsx('str-chat__summarized-message-preview__delivery-status', {
+                [`str-chat__summarized-message-preview__delivery-status--${deliveryStatus}`]:
+                  deliveryStatus,
+              })}
+            >
+              <DeliveryStatusIcon />
+            </span>
+          )}
+          {senderName && (
+            <span className='str-chat__summarized-message-preview__sender'>
+              {senderName}:
+            </span>
+          )}
+        </>
+      )}
+      {ContentTypeIcon && <ContentTypeIcon />}
+      <span className='str-chat__summarized-message-preview__text'>{text}</span>
+    </div>
+  );
+};

src/components/SummarizedMessagePreview/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useLatestMessagePreview';