feat: refresh MessageComposer design

examples/vite/src/App.tsx

@@ -19,6 +19,7 @@ import {
   ThreadList,
   useCreateChatClient,
   VirtualizedMessageList as MessageList,
+  // MessageList,
   Window,
 } from 'stream-chat-react';
 import { createTextComposerEmojiMiddleware, EmojiPicker } from 'stream-chat-react/emojis';
@@ -29,6 +30,7 @@ import { humanId } from 'human-id';
 init({ data });
 
 const apiKey = import.meta.env.VITE_STREAM_API_KEY;
+const token = import.meta.env.VITE_USER_TOKEN;
 
 if (!apiKey) {
   throw new Error('VITE_STREAM_API_KEY is not defined');
@@ -43,6 +45,7 @@ const isMessageAIGenerated = (message: LocalMessage) => !!message?.ai_generated;
 const useUser = () => {
   const userId = useMemo(() => {
     return (
+      import.meta.env.VITE_USER_ID ||
       new URLSearchParams(window.location.search).get('user_id') ||
       localStorage.getItem('user_id') ||
       humanId({ separator: '_', capitalize: false })
@@ -58,11 +61,13 @@ const useUser = () => {
   }, [userId]);
 
   const tokenProvider = useCallback(() => {
-    return fetch(
-      `https://pronto.getstream.io/api/auth/create-token?environment=shared-chat-redesign&user_id=${userId}`,
-    )
-      .then((response) => response.json())
-      .then((data) => data.token as string);
+    return token
+      ? Promise.resolve(token)
+      : fetch(
+          `https://pronto.getstream.io/api/auth/create-token?environment=shared-chat-redesign&user_id=${userId}`,
+        )
+          .then((response) => response.json())
+          .then((data) => data.token as string);
   }, [userId]);
 
   return { userId: userId, tokenProvider };
@@ -97,6 +102,11 @@ const App = () => {
         position: { before: 'stream-io/text-composer/mentions-middleware' },
         unique: true,
       });
+
+      composer.updateConfig({
+        linkPreviews: { enabled: true },
+        location: { enabled: true },
+      });
     });
   }, [chatClient]);
 
@@ -120,7 +130,12 @@ const App = () => {
               <ChannelHeader Avatar={ChannelAvatar} />
               <MessageList returnAllReadData />
               <AIStateIndicator />
-              <MessageInput focus audioRecordingEnabled />
+              <MessageInput
+                focus
+                audioRecordingEnabled
+                maxRows={10}
+                asyncMessagesMultiSendEnabled
+              />
             </Window>
             <Thread virtualized />
           </Channel>

examples/vite/src/index.scss

@@ -1,10 +1,11 @@
-@layer stream, stream-overrides;
+@layer stream, stream-new, stream-overrides;
 
 @import url('./stream-imports-theme.scss') layer(stream);
 @import url('./stream-imports-layout.scss') layer(stream);
 
 // v3 CSS import
-@import url('stream-chat-react/dist/css/index.css');
+@import url('stream-chat-react/dist/css/index.css') layer(stream-new);
+@import url('stream-chat-react/dist/css/emojis.css') layer(stream-new);
 
 :root {
   font-synthesis: none;

examples/vite/src/stream-imports-layout.scss

@@ -4,7 +4,7 @@
 
 @use 'stream-chat-react/dist/scss/v2/Avatar/Avatar-layout';
 @use 'stream-chat-react/dist/scss/v2/AttachmentList/AttachmentList-layout';
-@use 'stream-chat-react/dist/scss/v2/AttachmentPreviewList/AttachmentPreviewList-layout';
+//@use 'stream-chat-react/dist/scss/v2/AttachmentPreviewList/AttachmentPreviewList-layout'; // X
 @use 'stream-chat-react/dist/scss/v2/Autocomplete/Autocomplete-layout';
 @use 'stream-chat-react/dist/scss/v2/AudioRecorder/AudioRecorder-layout';
 @use 'stream-chat-react/dist/scss/v2/BaseImage/BaseImage-layout';
@@ -15,21 +15,21 @@
 @use 'stream-chat-react/dist/scss/v2/ChannelSearch/ChannelSearch-layout';
 @use 'stream-chat-react/dist/scss/v2/common/CTAButton/CTAButton-layout';
 @use 'stream-chat-react/dist/scss/v2/common/CircleFAButton/CircleFAButton-layout';
-@use 'stream-chat-react/dist/scss/v2/Dialog/Dialog-layout';
+//@use 'stream-chat-react/dist/scss/v2/Dialog/Dialog-layout';
 @use 'stream-chat-react/dist/scss/v2/DragAndDropContainer/DragAndDropContainer-layout';
-@use 'stream-chat-react/dist/scss/v2/DropzoneContainer/DropzoneContainer-layout';
+@use 'stream-chat-react/dist/scss/v2/DropzoneContainer/DropzoneContainer-layout'; // X
 @use 'stream-chat-react/dist/scss/v2/EditMessageForm/EditMessageForm-layout';
 @use 'stream-chat-react/dist/scss/v2/Form/Form-layout';
 @use 'stream-chat-react/dist/scss/v2/ImageCarousel/ImageCarousel-layout';
-@use 'stream-chat-react/dist/scss/v2/Icon/Icon-layout';
+//@use 'stream-chat-react/dist/scss/v2/Icon/Icon-layout';
 @use 'stream-chat-react/dist/scss/v2/InfiniteScrollPaginator/InfiniteScrollPaginator-layout';
-@use 'stream-chat-react/dist/scss/v2/LinkPreview/LinkPreview-layout';
+//@use 'stream-chat-react/dist/scss/v2/LinkPreview/LinkPreview-layout'; // X
 @use 'stream-chat-react/dist/scss/v2/LoadingIndicator/LoadingIndicator-layout';
 @use 'stream-chat-react/dist/scss/v2/Location/Location-layout';
 @use 'stream-chat-react/dist/scss/v2/Message/Message-layout';
 @use 'stream-chat-react/dist/scss/v2/MessageActionsBox/MessageActionsBox-layout';
 @use 'stream-chat-react/dist/scss/v2/MessageBouncePrompt/MessageBouncePrompt-layout';
-@use 'stream-chat-react/dist/scss/v2/MessageInput/MessageInput-layout';
+//@use 'stream-chat-react/dist/scss/v2/MessageInput/MessageInput-layout'; // X
 @use 'stream-chat-react/dist/scss/v2/MessageList/MessageList-layout';
 @use 'stream-chat-react/dist/scss/v2/MessageList/VirtualizedMessageList-layout';
 @use 'stream-chat-react/dist/scss/v2/MessageReactions/MessageReactions-layout';

examples/vite/src/stream-imports-theme.scss

@@ -7,7 +7,6 @@
 @use 'stream-chat-react/dist/scss/v2/common/CircleFAButton/CircleFAButton-theme';
 @use 'stream-chat-react/dist/scss/v2/Avatar/Avatar-theme';
 @use 'stream-chat-react/dist/scss/v2/AttachmentList/AttachmentList-theme';
-@use 'stream-chat-react/dist/scss/v2/AttachmentPreviewList/AttachmentPreviewList-theme';
 @use 'stream-chat-react/dist/scss/v2/AudioRecorder/AudioRecorder-theme';
 @use 'stream-chat-react/dist/scss/v2/Autocomplete/Autocomplete-theme';
 @use 'stream-chat-react/dist/scss/v2/BaseImage/BaseImage-theme';
@@ -16,20 +15,17 @@
 @use 'stream-chat-react/dist/scss/v2/ChannelList/ChannelList-theme';
 @use 'stream-chat-react/dist/scss/v2/ChannelPreview/ChannelPreview-theme';
 @use 'stream-chat-react/dist/scss/v2/ChannelSearch/ChannelSearch-theme';
-@use 'stream-chat-react/dist/scss/v2/Dialog/Dialog-theme';
+//@use 'stream-chat-react/dist/scss/v2/Dialog/Dialog-theme';
 @use 'stream-chat-react/dist/scss/v2/DragAndDropContainer/DragAndDropContainer-theme';
 @use 'stream-chat-react/dist/scss/v2/DropzoneContainer/DropzoneContainer-theme';
-@use 'stream-chat-react/dist/scss/v2/EditMessageForm/EditMessageForm-theme';
 @use 'stream-chat-react/dist/scss/v2/Form/Form-theme';
-@use 'stream-chat-react/dist/scss/v2/Icon/Icon-theme';
+//@use 'stream-chat-react/dist/scss/v2/Icon/Icon-theme';
 @use 'stream-chat-react/dist/scss/v2/ImageCarousel/ImageCarousel-theme';
-@use 'stream-chat-react/dist/scss/v2/LinkPreview/LinkPreview-theme';
 @use 'stream-chat-react/dist/scss/v2/LoadingIndicator/LoadingIndicator-theme';
 @use 'stream-chat-react/dist/scss/v2/Location/Location-theme';
 @use 'stream-chat-react/dist/scss/v2/Message/Message-theme';
 @use 'stream-chat-react/dist/scss/v2/MessageActionsBox/MessageActionsBox-theme';
 @use 'stream-chat-react/dist/scss/v2/MessageBouncePrompt/MessageBouncePrompt-theme';
-@use 'stream-chat-react/dist/scss/v2/MessageInput/MessageInput-theme';
 @use 'stream-chat-react/dist/scss/v2/MessageList/MessageList-theme';
 @use 'stream-chat-react/dist/scss/v2/MessageList/VirtualizedMessageList-theme';
 @use 'stream-chat-react/dist/scss/v2/MessageReactions/MessageReactions-theme';

examples/vite/src/vite-env.d.ts

@@ -1,5 +1,7 @@
 interface ImportMetaEnv {
   readonly VITE_STREAM_API_KEY?: string;
+  readonly VITE_USER_ID?: string;
+  readonly VITE_USER_TOKEN?: string;
 }
 
 interface ImportMeta {

examples/vite/yarn.lock

@@ -2329,6 +2329,11 @@ minimatch@^9.0.4:
   dependencies:
     brace-expansion "^2.0.1"
 
+modern-normalize@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-3.0.1.tgz#4e2dc8da282ab854d53d70d7155a8027f59fbed6"
+  integrity sha512-VqlMdYi59Uch6fnUPxnpijWUQe+TW6zeWCvyr6Mb7JibheHzSuAAoJi2c71ZwIaWKpECpGpYHoaaBp6rBRr+/g==
+
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"

package.json

@@ -120,7 +120,7 @@
     "emoji-mart": "^5.4.0",
     "react": "^19.0.0 || ^18.0.0 || ^17.0.0",
     "react-dom": "^19.0.0 || ^18.0.0 || ^17.0.0",
-    "stream-chat": "^9.27.2"
+    "stream-chat": "^9.30.1"
   },
   "peerDependenciesMeta": {
     "@breezystack/lamejs": {
@@ -215,7 +215,7 @@
     "react-dom": "^19.0.0",
     "sass": "^1.97.2",
     "semantic-release": "^25.0.2",
-    "stream-chat": "^9.27.2",
+    "stream-chat": "^9.30.1",
     "ts-jest": "^29.2.5",
     "typescript": "^5.4.5",
     "typescript-eslint": "^8.17.0",
@@ -224,7 +224,7 @@
   "scripts": {
     "clean": "rm -rf dist",
     "build": "yarn clean && concurrently './scripts/copy-css.sh' 'yarn build-translations' 'vite build' 'tsc --project tsconfig.lib.json' 'yarn build-styling'",
-    "build-styling": "sass src/styling/index.scss dist/css/index.css",
+    "build-styling": "sass src/styling/index.scss dist/css/index.css && sass src/plugins/Emojis/styling/index.scss dist/css/emojis.css",
     "build-translations": "i18next-cli extract",
     "coverage": "jest --collectCoverage && codecov",
     "lint": "yarn prettier --list-different && yarn eslint && yarn validate-translations",
@@ -234,8 +234,8 @@
     "prettier": "prettier '**/*.{js,mjs,ts,mts,jsx,tsx,md,json,yml}'",
     "prettier-fix": "yarn prettier --write",
     "fix-staged": "lint-staged --config .lintstagedrc.fix.json --concurrent 1",
-    "start": "tsc --watch --sourceMap",
-    "start:css": "sass --watch src/styling/index.scss dist/css/index.css",
+    "start": "tsc -p tsconfig.lib.json -w",
+    "start:css": "sass --watch src/styling:dist/css src/plugins/Emojis/styling:dist/css",
     "prepare": "husky install",
     "preversion": "yarn install",
     "test": "jest",

src/components/Attachment/Attachment.tsx

@@ -37,6 +37,7 @@ import type { GeolocationProps } from './Geolocation';
 
 const CONTAINER_MAP = {
   audio: AudioContainer,
+  // todo: rename to linkPreview
   card: CardContainer,
   file: FileContainer,
   media: MediaContainer,
@@ -177,7 +178,7 @@ const renderGroupedAttachments = ({
   return containers;
 };
 
-const getAttachmentType = (
+export const getAttachmentType = (
   attachment: AttachmentProps['attachments'][number],
 ): keyof typeof CONTAINER_MAP => {
   if (isScrapedContent(attachment)) {

src/components/Attachment/Audio.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import type { Attachment } from 'stream-chat';
 
-import { DownloadButton, FileSizeIndicator, PlayButton, ProgressBar } from './components';
+import { DownloadButton, FileSizeIndicator, ProgressBar } from './components';
 import { type AudioPlayerState, useAudioPlayer } from '../AudioPlayback';
 import { useStateStore } from '../../store';
 import { useMessageContext } from '../../context';
 import type { AudioPlayer } from '../AudioPlayback/AudioPlayer';
+import { PlayButton } from '../Button/PlayButton';
 
 type AudioAttachmentUIProps = {
   audioPlayer: AudioPlayer;

src/components/Attachment/Card.tsx

@@ -5,7 +5,7 @@ import ReactPlayer from 'react-player';
 import type { AudioProps } from './Audio';
 import { ImageComponent } from '../Gallery';
 import { SafeAnchor } from '../SafeAnchor';
-import { PlayButton, ProgressBar } from './components';
+import { ProgressBar } from './components';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 
@@ -15,6 +15,7 @@ import type { Dimensions } from '../../types/types';
 import { type AudioPlayerState, useAudioPlayer } from '../AudioPlayback';
 import { useStateStore } from '../../store';
 import { useMessageContext } from '../../context';
+import { PlayButton } from '../Button';
 
 const getHostFromURL = (url?: string | null) => {
   if (url !== undefined && url !== null) {

src/components/Attachment/FileAttachment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FileIcon } from '../ReactFileUtilities';
+import { FileIcon } from '../FileIcon';
 import type { Attachment } from 'stream-chat';
 
 import { DownloadButton, FileSizeIndicator } from './components';

src/components/Attachment/UnsupportedAttachment.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Attachment } from 'stream-chat';
 
-import { FileIcon } from '../ReactFileUtilities';
+import { FileIcon } from '../FileIcon';
 import { useTranslationContext } from '../../context';
 
 export type UnsupportedAttachmentProps = {

src/components/Attachment/VoiceRecording.tsx

@@ -1,18 +1,14 @@
 import React from 'react';
 import type { Attachment } from 'stream-chat';
 
-import {
-  FileSizeIndicator,
-  PlaybackRateButton,
-  PlayButton,
-  WaveProgressBar,
-} from './components';
+import { FileSizeIndicator, PlaybackRateButton, WaveProgressBar } from './components';
 import { displayDuration } from './utils';
-import { FileIcon } from '../ReactFileUtilities';
+import { FileIcon } from '../FileIcon';
 import { useMessageContext, useTranslationContext } from '../../context';
 import { type AudioPlayerState, useAudioPlayer } from '../AudioPlayback/';
 import { useStateStore } from '../../store';
 import type { AudioPlayer } from '../AudioPlayback/AudioPlayer';
+import { PlayButton } from '../Button';
 
 const rootClassName = 'str-chat__message-attachment__voice-recording-widget';
 
@@ -73,7 +69,7 @@ const VoiceRecordingPlayerUI = ({ audioPlayer }: VoiceRecordingPlayerUIProps) =>
             {playbackRate?.toFixed(1)}x
           </PlaybackRateButton>
         ) : (
-          <FileIcon big={true} mimeType={audioPlayer.mimeType} size={40} />
+          <FileIcon mimeType={audioPlayer.mimeType} />
         )}
       </div>
     </div>
@@ -156,7 +152,7 @@ export const QuotedVoiceRecording = ({ attachment }: QuotedVoiceRecordingProps)
           </div>
         </div>
       </div>
-      <FileIcon big={true} mimeType={attachment.mime_type} size={34} />
+      <FileIcon mimeType={attachment.mime_type} />
     </div>
   );
 };

src/components/Attachment/components/index.ts

@@ -2,5 +2,4 @@ export * from './DownloadButton';
 export * from './FileSizeIndicator';
 export * from './ProgressBar';
 export * from './PlaybackRateButton';
-export * from './PlayButton';
-export * from './WaveProgressBar';
+export * from '../../AudioPlayback/components/WaveProgressBar';

src/components/Attachment/utils.tsx

@@ -53,11 +53,10 @@ export const displayDuration = (totalSeconds?: number) => {
   const [hours, hoursLeftover] = divMod(totalSeconds, 3600);
   const [minutes, seconds] = divMod(hoursLeftover, 60);
   const roundedSeconds = Math.ceil(seconds);
+  const prependHrsZero = String(hours).padStart(2, '0');
+  const prependMinZero = String(minutes).padStart(2, '0');
+  const prependSecZero = String(roundedSeconds).padStart(2, '0');
+  const minSec = `${prependMinZero}:${prependSecZero}`;
 
-  const prependHrsZero = hours.toString().length === 1 ? '0' : '';
-  const prependMinZero = minutes.toString().length === 1 ? '0' : '';
-  const prependSecZero = roundedSeconds.toString().length === 1 ? '0' : '';
-  const minSec = `${prependMinZero}${minutes}:${prependSecZero}${roundedSeconds}`;
-
-  return hours ? `${prependHrsZero}${hours}:` + minSec : minSec;
+  return hours ? `${prependHrsZero}:` + minSec : minSec;
 };