fix: align slots in message composer previews

Author: MartinCupela

src/components/MessageInput/AttachmentPreviewList/AttachmentPreviewList.tsx

@@ -1,4 +1,4 @@
-import type { ComponentType } from 'react';
+import { type ComponentType, useMemo } from 'react';
 import React from 'react';
 import {
   isLocalAttachment,
@@ -8,6 +8,7 @@ import {
   isLocalVideoAttachment,
   isLocalVoiceRecordingAttachment,
   isScrapedContent,
+  isVoiceRecordingAttachment,
 } from 'stream-chat';
 import {
   UnsupportedAttachmentPreview as DefaultUnknownAttachmentPreview,
@@ -53,15 +54,15 @@ export const AttachmentPreviewList = ({
 
   // todo: we could also allow to attach poll to a message composition
   const { attachments, location } = useAttachmentsForPreview();
+  const filteredAttachments = useMemo(
+    () => attachments.filter((a) => !isVoiceRecordingAttachment(a)),
+    [attachments],
+  );
 
-  if (!attachments.length && !location) return null;
+  if (!filteredAttachments.length && !location) return null;
 
   return (
     <div className='str-chat__attachment-preview-list'>
-      {/*<div*/}
-      {/*  className='str-chat__attachment-list-scroll-container'*/}
-      {/*  data-testid='attachment-list-scroll-container'*/}
-      {/*>*/}
       {location && (
         <GeolocationPreview
           location={location}
@@ -126,7 +127,6 @@ export const AttachmentPreviewList = ({
         }
         return null;
       })}
-      {/*</div>*/}
     </div>
   );
 };

src/components/MessageInput/QuotedMessagePreview.tsx

@@ -253,12 +253,14 @@ export const QuotedMessagePreview = ({
   );
 
   return quotedMessage ? (
-    <QuotedMessagePreviewUI
-      getQuotedMessageAuthor={getQuotedMessageAuthor}
-      onRemove={() => messageComposer.setQuotedMessage(null)}
-      quotedMessage={quotedMessage}
-      renderText={renderText}
-    />
+    <div className='str-chat__message-composer__quoted-message-preview-slot'>
+      <QuotedMessagePreviewUI
+        getQuotedMessageAuthor={getQuotedMessageAuthor}
+        onRemove={() => messageComposer.setQuotedMessage(null)}
+        quotedMessage={quotedMessage}
+        renderText={renderText}
+      />
+    </div>
   ) : null;
 };
 

src/components/MessageInput/styling/MessageComposer.scss

@@ -63,16 +63,14 @@
     flex-direction: column;
     width: 100%;
     min-width: 0;
-    padding-inline: var(--spacing-xs);
-    padding-block: var(--spacing-sm);
     @include utils.component-layer-overrides('message-input');
   }
 
   .str-chat__message-composer-previews {
     display: flex;
     flex-direction: column;
     width: 100%;
-    padding-bottom: var(--spacing-xs);
+    padding: var(--spacing-xs) var(--spacing-xs) 0;
     gap: var(--spacing-xxs);
 
     min-width: 0;
@@ -83,6 +81,7 @@
     align-items: end;
     width: 100%;
     gap: var(--spacing-xs);
+    padding: var(--spacing-sm);
 
     $controls-containers-min-height: 26px;
 

src/components/MessageInput/styling/QuotedMessagePreview.scss

@@ -1,6 +1,10 @@
 @use '../../../styling/utils';
 
 .str-chat {
+  .str-chat__message-composer__quoted-message-preview-slot {
+    padding: var(--spacing-xxs);
+  }
+
   .str-chat__quoted-message-preview {
     display: flex;
     align-items: center;