feat: message composer

examples/vite/src/App.tsx

@@ -1,4 +1,11 @@
-import { ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
+import { useEffect } from 'react';
+import {
+  ChannelFilters,
+  ChannelOptions,
+  ChannelSort,
+  LocalMessage,
+  TextComposerMiddleware,
+} from 'stream-chat';
 import {
   AIStateIndicator,
   Channel,
@@ -8,13 +15,18 @@ import {
   Chat,
   ChatView,
   MessageInput,
-  StreamMessage,
   Thread,
   ThreadList,
+  useChatContext,
   useCreateChatClient,
   VirtualizedMessageList as MessageList,
   Window,
 } from 'stream-chat-react';
+import { createTextComposerEmojiMiddleware } from 'stream-chat-react/emojis';
+import { init, SearchIndex } from 'emoji-mart';
+import data from '@emoji-mart/data';
+
+init({ data });
 
 const params = new Proxy(new URLSearchParams(window.location.search), {
   get: (searchParams, property) => searchParams.get(property as string),
@@ -40,7 +52,8 @@ const filters: ChannelFilters = {
 const options: ChannelOptions = { limit: 5, presence: true, state: true };
 const sort: ChannelSort = { pinned_at: 1, last_message_at: -1, updated_at: -1 };
 
-const isMessageAIGenerated = (message: StreamMessage) => !!message?.ai_generated;
+// @ts-ignore
+const isMessageAIGenerated = (message: LocalMessage) => !!message?.ai_generated;
 
 const App = () => {
   const chatClient = useCreateChatClient({
@@ -49,6 +62,20 @@ const App = () => {
     userData: { id: userId },
   });
 
+  useEffect(() => {
+    if (!chatClient) return;
+
+    chatClient.setMessageComposerSetupFunction(({ composer }) => {
+      composer.textComposer.middlewareExecutor.insert({
+        middleware: [
+          createTextComposerEmojiMiddleware(SearchIndex) as TextComposerMiddleware,
+        ],
+        position: { before: 'stream-io/mentions-middleware' },
+        unique: true,
+      });
+    });
+  }, [chatClient]);
+
   if (!chatClient) return <>Loading...</>;
 
   return (
@@ -64,12 +91,12 @@ const App = () => {
             showChannelSearch
             additionalChannelSearchProps={{ searchForChannels: true }}
           />
-          <Channel>
+          <Channel emojiSearchIndex={SearchIndex}>
             <Window>
               <ChannelHeader Avatar={ChannelAvatar} />
               <MessageList returnAllReadData />
               <AIStateIndicator />
-              <MessageInput focus />
+              <MessageInput focus audioRecordingEnabled />
             </Window>
             <Thread virtualized />
           </Channel>

package.json

@@ -239,7 +239,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "semantic-release": "^24.2.3",
-    "stream-chat": "^9.0.0-rc.8",
+    "stream-chat": "https://github.com/GetStream/stream-chat-js.git#feat/message-composer",
     "ts-jest": "^29.2.5",
     "typescript": "^5.4.5",
     "typescript-eslint": "^8.17.0"

src/components/Attachment/Attachment.tsx

@@ -1,15 +1,11 @@
 import React, { useMemo } from 'react';
-import type { ReactPlayerProps } from 'react-player';
-import type { Attachment as StreamAttachment } from 'stream-chat';
-
 import {
   isAudioAttachment,
-  isFileAttachment,
-  isMediaAttachment,
+  isImageAttachment,
   isScrapedContent,
-  isUploadedImage,
   isVoiceRecordingAttachment,
-} from './utils';
+} from 'stream-chat';
+
 import {
   AudioContainer,
   CardContainer,
@@ -20,6 +16,10 @@
   UnsupportedAttachmentContainer,
   VoiceRecordingContainer,
 } from './AttachmentContainer';
+import { isFileAttachment, isMediaAttachment } from './utils';
+
+import type { ReactPlayerProps } from 'react-player';
+import type { Attachment as StreamAttachment } from 'stream-chat';
 import type { AttachmentActionsProps } from './AttachmentActions';
 import type { AudioProps } from './Audio';
 import type { VoiceRecordingProps } from './VoiceRecording';
@@ -104,11 +104,11 @@
   ...rest
 }: AttachmentProps): GroupedRenderedAttachment => {
   const uploadedImages: StreamAttachment[] = attachments.filter((attachment) =>
-    isUploadedImage(attachment),
+    isImageAttachment(attachment),
   );
 
   const containers = attachments
-    .filter((attachment) => !isUploadedImage(attachment))
+    .filter((attachment) => !isImageAttachment(attachment))
     .reduce<GroupedRenderedAttachment>(
       (typeMap, attachment) => {
         const attachmentType = getAttachmentType(attachment);

src/components/Attachment/AttachmentContainer.tsx

@@ -3,7 +3,7 @@ import React, { useLayoutEffect, useRef, useState } from 'react';
 import ReactPlayer from 'react-player';
 import clsx from 'clsx';
 import * as linkify from 'linkifyjs';
-import type { Attachment } from 'stream-chat';
+import type { Attachment, LocalAttachment } from 'stream-chat';
 
 import { AttachmentActions as DefaultAttachmentActions } from './AttachmentActions';
 import { Audio as DefaultAudio } from './Audio';
@@ -20,7 +20,6 @@ import type {
 } from './utils';
 import { isGalleryAttachmentType, isSvgAttachment } from './utils';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
-import type { LocalAttachment } from '../MessageInput';
 import type {
   ImageAttachmentConfiguration,
   VideoAttachmentConfiguration,

src/components/Attachment/utils.tsx

@@ -1,16 +1,15 @@
 import type { ReactNode } from 'react';
-import type { Attachment } from 'stream-chat';
-
-import type { ATTACHMENT_GROUPS_ORDER, AttachmentProps } from './Attachment';
 import type {
+  Attachment,
   LocalAttachment,
   LocalAudioAttachment,
-  LocalFileAttachment,
   LocalImageAttachment,
-  LocalVideoAttachment,
   LocalVoiceRecordingAttachment,
   VoiceRecordingAttachment,
-} from '../MessageInput';
+} from 'stream-chat';
+
+import type { LocalFileAttachment, LocalVideoAttachment } from 'stream-chat';
+import type { ATTACHMENT_GROUPS_ORDER, AttachmentProps } from './Attachment';
 
 export const SUPPORTED_VIDEO_FORMATS = [
   'video/mp4',
@@ -76,8 +75,8 @@
 export const isFileAttachment = (attachment: Attachment | LocalAttachment) =>
   attachment.type === 'file' ||
   !!(
     attachment.mime_type &&
     SUPPORTED_VIDEO_FORMATS.indexOf(attachment.mime_type) === -1 &&
     attachment.type !== 'video'
   );
 
@@ -87,8 +86,8 @@
   isFileAttachment(attachment) && isLocalAttachment(attachment);
 
 export const isMediaAttachment = (attachment: Attachment | LocalAttachment) =>
   (attachment.mime_type &&
     SUPPORTED_VIDEO_FORMATS.indexOf(attachment.mime_type) !== -1) ||
   attachment.type === 'video';
 
 export const isLocalMediaAttachment = (