fix: align textarea placeholder and text with the surroundings (#3052)

Author: MartinCupela

src/components/MessageComposer/CommandChip.tsx

@@ -1,15 +1,15 @@
 import { useMessageComposerController } from './hooks';
-import { useStateStore } from '../../store';
 import type { TextComposerState } from 'stream-chat';
 import { IconCrossMedium, IconThunder } from '../Icons';
 import { useMessageComposerContext } from '../../context';
 
-const textComposerStateSelector = ({ command }: TextComposerState) => ({ command });
+export type CommandChipProps = {
+  command?: TextComposerState['command'];
+};
 
-export const CommandChip = () => {
+export const CommandChip = ({ command }: CommandChipProps) => {
   const { textComposer } = useMessageComposerController();
   const { textareaRef } = useMessageComposerContext();
-  const { command } = useStateStore(textComposer.state, textComposerStateSelector);
   if (!command) return null;
 
   return (

src/components/MessageComposer/MessageComposerUI.tsx

@@ -174,9 +174,11 @@ export const MessageComposerUI = () => {
               <div className='str-chat__message-composer-controls'>
                 <div className='str-chat__message-composer-controls__text-composition-controls'>
                   <div className='str-chat__message-composer-controls__text-composition-controls__text'>
-                    <div className='str-chat__message-composer-controls__text-composition-controls__command-chip-container'>
-                      <CommandChip />
-                    </div>
+                    {command && (
+                      <div className='str-chat__message-composer-controls__text-composition-controls__command-chip-container'>
+                        <CommandChip command={command} />
+                      </div>
+                    )}
                     <TextareaComposer />
                   </div>
                   <SendToChannelCheckbox />

src/components/MessageComposer/__tests__/CommandChip.test.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { CommandChip } from '../CommandChip';
+
+const setCommandMock = vi.fn();
+const focusMock = vi.fn();
+
+vi.mock('../hooks', () => ({
+  useMessageComposerController: () => ({
+    textComposer: {
+      setCommand: setCommandMock,
+    },
+  }),
+}));
+
+vi.mock('../../../context', () => ({
+  useMessageComposerContext: () => ({
+    textareaRef: {
+      current: {
+        focus: focusMock,
+      },
+    },
+  }),
+}));
+
+describe('CommandChip', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('does not render when command is undefined', () => {
+    const { container } = render(<CommandChip command={undefined} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders command name when command is defined', () => {
+    render(<CommandChip command={{ name: 'giphy' }} />);
+    expect(screen.getByText('giphy')).toBeInTheDocument();
+  });
+
+  it('clears command and focuses textarea on close click', () => {
+    const { container } = render(<CommandChip command={{ name: 'giphy' }} />);
+    const closeButton = container.querySelector('.str-chat__command-chip__close-button');
+
+    expect(closeButton).toBeInTheDocument();
+    fireEvent.click(closeButton);
+
+    expect(setCommandMock).toHaveBeenCalledWith(null);
+    expect(focusMock).toHaveBeenCalledTimes(1);
+  });
+});

src/components/MessageComposer/styling/CommandChip.scss

@@ -2,19 +2,16 @@
 
 .str-chat__command-chip {
   display: flex;
-  padding: var(--spacing-xxs) var(--spacing-sm);
+  padding: var(--spacing-xxs) var(--spacing-xs);
   justify-content: center;
   align-items: center;
   gap: var(--spacing-xxs);
   border-radius: var(--radius-max);
-  height: fit-content;
 
   color: var(--text-inverse);
   background-color: var(--background-core-inverse, var(--slate-900));
   text-transform: uppercase;
-  font-size: var(--typography-font-size-xs);
-  font-weight: var(--typography-font-weight-semi-bold);
-  line-height: var(--typography-line-height-tight);
+  font: var(--str-chat__metadata-emphasis-text);
 
   .str-chat__command-chip__close-button {
     @include utils.button-reset;

src/components/MessageComposer/styling/MessageComposer.scss

@@ -180,12 +180,24 @@
       flex: 1;
       display: flex;
       flex-direction: column;
+      min-height: $controls-containers-min-height;
+      justify-content: center;
       gap: var(--spacing-sm);
+
+      .str-chat__message-composer-controls__text-composition-controls__command-chip-container {
+        height: 100%;
+        display: flex;
+        align-items: flex-end;
+        flex: 0 0 auto;
+        align-self: flex-end;
+      }
     }
 
     .str-chat__message-composer-controls__text-composition-controls__text {
       display: flex;
-      align-items: end;
+      align-items: center;
+      width: 100%;
+      min-width: 0;
       gap: var(--spacing-xxs);
     }
 
@@ -210,10 +222,11 @@
 
     .str-chat__textarea {
       flex: 1;
+      min-width: 0;
       position: relative;
       display: flex;
       align-items: center;
-      margin-inline: var(--spacing-xxs) var(--spacing-xs);
+      width: 100%;
 
       textarea {
         @include utils.component-layer-overrides('message-textarea');

src/context/ComponentContext.tsx

@@ -71,6 +71,7 @@ import type { StopAIGenerationButtonProps } from '../components/MessageComposer/
 import type { VideoPlayerProps } from '../components/VideoPlayer';
 import type { EditedMessagePreviewProps } from '../components/MessageComposer/EditedMessagePreview';
 import type { FileIconProps } from '../components/FileIcon/FileIcon';
+import type { CommandChipProps } from '../components/MessageComposer/CommandChip';
 
 export type ComponentContextValue = {
   /** Custom UI component to display additional message composer action buttons left to the textarea, defaults to and accepts same props as: [AdditionalMessageComposerActions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/MessageComposerActions.tsx) */
@@ -110,7 +111,7 @@ export type ComponentContextValue = {
   /** Custom UI component to display the channel preview in the list, defaults to and accepts same props as: [ChannelListItemUI](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelPreview/ChannelListItemUI.tsx) */
   ChannelListItemUI?: React.ComponentType<ChannelListItemUIProps>;
   /** Custom UI component to display command chip, defaults to and accepts same props as: [CommandChip](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/CommandChip.tsx) */
-  CommandChip?: React.ComponentType;
+  CommandChip?: React.ComponentType<CommandChipProps>;
   /** Custom UI component to display the slow mode cooldown timer, defaults to and accepts same props as: [CooldownTimer](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/CooldownTimer.tsx) */
   CooldownTimer?: React.ComponentType;
   /** Custom UI component for date separators, defaults to and accepts same props as: [DateSeparator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/DateSeparator.tsx) */