feat: message composer

.lintstagedrc.json

@@ -1,5 +1,5 @@
 {
-  "src/**/*.{js,ts,tsx,md}": "eslint --max-warnings 0",
+  "src/**/*.{js,ts,tsx,md}": "eslint --max-warnings 0 --no-warn-ignored",
   "**/*.{js,mjs,ts,mts,jsx,tsx,md,json,yml}": "prettier --list-different",
   "src/i18n/*.json": "yarn run validate-translations"
 }

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,19 @@ import {
   Chat,
   ChatView,
   MessageInput,
-  StreamMessage,
+  SendButtonProps,
   Thread,
   ThreadList,
   useCreateChatClient,
+  useMessageComposer,
   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 +53,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 +63,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/text-composer/mentions-middleware' },
+        unique: true,
+      });
+    });
+  }, [chatClient]);
+
   if (!chatClient) return <>Loading...</>;
 
   return (
@@ -64,12 +92,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>