1- import { ChannelFilters , ChannelOptions , ChannelSort } from 'stream-chat' ;
1+ import { useEffect } from 'react' ;
2+ import {
3+ ChannelFilters ,
4+ ChannelOptions ,
5+ ChannelSort ,
6+ LocalMessage ,
7+ TextComposerMiddleware ,
8+ } from 'stream-chat' ;
29import {
310 AIStateIndicator ,
411 Channel ,
@@ -8,13 +15,19 @@ import {
815 Chat ,
916 ChatView ,
1017 MessageInput ,
11- StreamMessage ,
18+ SendButtonProps ,
1219 Thread ,
1320 ThreadList ,
1421 useCreateChatClient ,
22+ useMessageComposer ,
1523 VirtualizedMessageList as MessageList ,
1624 Window ,
1725} from 'stream-chat-react' ;
26+ import { createTextComposerEmojiMiddleware } from 'stream-chat-react/emojis' ;
27+ import { init , SearchIndex } from 'emoji-mart' ;
28+ import data from '@emoji-mart/data' ;
29+
30+ init ( { data } ) ;
1831
1932const params = new Proxy ( new URLSearchParams ( window . location . search ) , {
2033 get : ( searchParams , property ) => searchParams . get ( property as string ) ,
@@ -40,40 +53,30 @@ const filters: ChannelFilters = {
4053const options : ChannelOptions = { limit : 5 , presence : true , state : true } ;
4154const sort : ChannelSort = { pinned_at : 1 , last_message_at : - 1 , updated_at : - 1 } ;
4255
43- type LocalAttachmentType = Record < string , unknown > ;
44- type LocalChannelType = Record < string , unknown > ;
45- type LocalCommandType = string ;
46- type LocalEventType = Record < string , unknown > ;
47- type LocalMemberType = Record < string , unknown > ;
48- type LocalMessageType = Record < string , unknown > ;
49- type LocalPollOptionType = Record < string , unknown > ;
50- type LocalPollType = Record < string , unknown > ;
51- type LocalReactionType = Record < string , unknown > ;
52- type LocalUserType = Record < string , unknown > ;
53-
54- type StreamChatGenerics = {
55- attachmentType : LocalAttachmentType ;
56- channelType : LocalChannelType ;
57- commandType : LocalCommandType ;
58- eventType : LocalEventType ;
59- memberType : LocalMemberType ;
60- messageType : LocalMessageType ;
61- pollOptionType : LocalPollOptionType ;
62- pollType : LocalPollType ;
63- reactionType : LocalReactionType ;
64- userType : LocalUserType ;
65- } ;
66-
67- const isMessageAIGenerated = ( message : StreamMessage < StreamChatGenerics > ) =>
68- ! ! message ?. ai_generated ;
56+ // @ts -ignore
57+ const isMessageAIGenerated = ( message : LocalMessage ) => ! ! message ?. ai_generated ;
6958
7059const App = ( ) => {
71- const chatClient = useCreateChatClient < StreamChatGenerics > ( {
60+ const chatClient = useCreateChatClient ( {
7261 apiKey,
7362 tokenOrProvider : userToken ,
7463 userData : { id : userId } ,
7564 } ) ;
7665
66+ useEffect ( ( ) => {
67+ if ( ! chatClient ) return ;
68+
69+ chatClient . setMessageComposerSetupFunction ( ( { composer } ) => {
70+ composer . textComposer . middlewareExecutor . insert ( {
71+ middleware : [
72+ createTextComposerEmojiMiddleware ( SearchIndex ) as TextComposerMiddleware ,
73+ ] ,
74+ position : { before : 'stream-io/text-composer/mentions-middleware' } ,
75+ unique : true ,
76+ } ) ;
77+ } ) ;
78+ } , [ chatClient ] ) ;
79+
7780 if ( ! chatClient ) return < > Loading...</ > ;
7881
7982 return (
@@ -89,12 +92,12 @@ const App = () => {
8992 showChannelSearch
9093 additionalChannelSearchProps = { { searchForChannels : true } }
9194 />
92- < Channel >
95+ < Channel emojiSearchIndex = { SearchIndex } >
9396 < Window >
9497 < ChannelHeader Avatar = { ChannelAvatar } />
9598 < MessageList returnAllReadData />
9699 < AIStateIndicator />
97- < MessageInput focus />
100+ < MessageInput focus audioRecordingEnabled />
98101 </ Window >
99102 < Thread virtualized />
100103 </ Channel >
0 commit comments