fix: add channel command middleware

Author: khushal87

…ddlewares/textComposerEmojiMiddleware.ts …ampleApp/src/middlewares/emojiControl.tsexamples/SampleApp/src/middlewares/textComposerEmojiMiddleware.ts renamed to examples/SampleApp/src/middlewares/emojiControl.ts examples/SampleApp/src/middlewares/textComposerEmojiMiddleware.ts renamed to examples/SampleApp/src/middlewares/emojiControl.ts

@@ -59,11 +59,7 @@ const baseFilters = {
   type: 'messaging',
 };
 
-const sort: ChannelSort = [
-  { pinned_at: -1 },
-  { last_message_at: -1 },
-  { updated_at: -1 },
-];
+const sort: ChannelSort = [{ pinned_at: -1 }, { last_message_at: -1 }, { updated_at: -1 }];
 
 const options = {
   presence: true,

examples/SampleApp/src/screens/ChannelListScreen.tsx

@@ -1,5 +1,10 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import type { Channel as StreamChatChannel, TextComposerMiddleware } from 'stream-chat';
+import type {
+  CustomDataManagerState,
+  LocalMessage,
+  Channel as StreamChatChannel,
+  TextComposerMiddleware,
+} from 'stream-chat';
 import { RouteProp, useFocusEffect, useNavigation } from '@react-navigation/native';
 import {
   Channel,
@@ -10,11 +15,17 @@ import {
   useAttachmentPickerContext,
   useChannelPreviewDisplayName,
   useChatContext,
+  useMessageComposer,
   useTheme,
   useTypingString,
   AITypingIndicatorView,
+  AutoCompleteInput,
+  GiphyLightning,
+  useStateStore,
+  CircleClose,
+  SendButton,
 } from 'stream-chat-react-native';
-import { Platform, StyleSheet, View } from 'react-native';
+import { Platform, Pressable, StyleSheet, Text, View } from 'react-native';
 import type { StackNavigationProp } from '@react-navigation/stack';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -25,16 +36,12 @@ import { useChannelMembersStatus } from '../hooks/useChannelMembersStatus';
 
 import type { StackNavigatorParamList } from '../types';
 import { NetworkDownIndicator } from '../components/NetworkDownIndicator';
-import { createTextComposerEmojiMiddleware } from '../middlewares/textComposerEmojiMiddleware';
+import { createTextComposerEmojiMiddleware } from '../middlewares/emojiControl';
 import { init, SearchIndex } from 'emoji-mart';
 import data from '@emoji-mart/data';
 
 init({ data });
 
-const styles = StyleSheet.create({
-  flex: { flex: 1 },
-});
-
 export type ChannelScreenNavigationProp = StackNavigationProp<
   StackNavigatorParamList,
   'ChannelScreen'
@@ -152,14 +159,14 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
     chatClient.setMessageComposerSetupFunction(({ composer }) => {
       composer.textComposer.middlewareExecutor.insert({
         middleware: [createTextComposerEmojiMiddleware(SearchIndex) as TextComposerMiddleware],
-        position: { before: 'stream-io/text-composer/mentions-middleware' },
+        position: { after: 'stream-io/text-composer/mentions-middleware' },
         unique: true,
       });
     });
   }, [chatClient]);
 
   const onThreadSelect = useCallback(
-    (thread) => {
+    (thread: LocalMessage | null) => {
       setSelectedThread(thread);
       navigation.navigate('ThreadScreen', {
         channel,
@@ -194,3 +201,23 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  input: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  giphyContainer: {
+    alignItems: 'center',
+    borderRadius: 12,
+    flexDirection: 'row',
+    marginRight: 8,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+  },
+  giphyText: {
+    fontSize: 12,
+    fontWeight: 'bold',
+  },
+});

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -9,7 +9,7 @@ import {
   TextInputSelectionChangeEventData,
 } from 'react-native';
 
-import { TextComposerState } from 'stream-chat';
+import { CustomDataManagerState, TextComposerState } from 'stream-chat';
 
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import {
@@ -27,13 +27,7 @@ import { useStateStore } from '../../hooks/useStateStore';
 type AutoCompleteInputPropsWithContext = TextInputProps &
   Pick<
     MessageInputContextValue,
-    | 'giphyActive'
-    | 'giphyEnabled'
-    | 'maxMessageLength'
-    | 'numberOfLines'
-    | 'onChangeText'
-    | 'setGiphyActive'
-    | 'setInputBoxRef'
+    'isCommandUIEnabled' | 'maxMessageLength' | 'numberOfLines' | 'onChangeText' | 'setInputBoxRef'
   > &
   Pick<TranslationContextValue, 't'> & {
     /**
@@ -49,10 +43,13 @@ const textComposerStateSelector = (state: TextComposerState) => ({
   text: state.text,
 });
 
+const customComposerDataSelector = (state: CustomDataManagerState) => ({
+  command: state.custom.command,
+});
+
 const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext) => {
   const {
     cooldownActive = false,
-    giphyActive,
     maxMessageLength,
     numberOfLines,
     onChangeText,
@@ -62,8 +59,9 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
   } = props;
   const [textHeight, setTextHeight] = useState(0);
   const messageComposer = useMessageComposer();
-  const { textComposer } = messageComposer;
+  const { customDataManager, textComposer } = messageComposer;
   const { text } = useStateStore(textComposer.state, textComposerStateSelector);
+  const { command } = useStateStore(customDataManager.state, customComposerDataSelector);
 
   const handleSelectionChange = useCallback(
     (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
@@ -103,12 +101,8 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
   } = useTheme();
 
   const placeholderText = useMemo(() => {
-    return giphyActive
-      ? t('Search GIFs')
-      : cooldownActive
-        ? t('Slow mode ON')
-        : t('Send a message');
-  }, [cooldownActive, giphyActive, t]);
+    return command ? t('Search GIFs') : cooldownActive ? t('Slow mode ON') : t('Send a message');
+  }, [command, cooldownActive, t]);
 
   const handleContentSizeChange = useCallback(
     ({
@@ -121,7 +115,7 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
 
   return (
     <TextInput
-      autoFocus={giphyActive}
+      autoFocus={!!command}
       maxLength={maxMessageLength}
       multiline
       onChangeText={onTextChangeHandler}
@@ -150,13 +144,8 @@ const areEqual = (
   prevProps: AutoCompleteInputPropsWithContext,
   nextProps: AutoCompleteInputPropsWithContext,
 ) => {
-  const { cooldownActive: prevCooldownActive, giphyActive: prevGiphyActive, t: prevT } = prevProps;
-  const { cooldownActive: nextCooldownActive, giphyActive: nextGiphyActive, t: nextT } = nextProps;
-
-  const giphyActiveEqual = prevGiphyActive === nextGiphyActive;
-  if (!giphyActiveEqual) {
-    return false;
-  }
+  const { cooldownActive: prevCooldownActive, t: prevT } = prevProps;
+  const { cooldownActive: nextCooldownActive, t: nextT } = nextProps;
 
   const tEqual = prevT === nextT;
   if (!tEqual) {
@@ -178,13 +167,11 @@ const MemoizedAutoCompleteInput = React.memo(
 
 export const AutoCompleteInput = (props: AutoCompleteInputProps) => {
   const {
-    giphyEnabled,
+    isCommandUIEnabled,
     additionalTextInputProps,
-    giphyActive,
     maxMessageLength,
     numberOfLines,
     onChangeText,
-    setGiphyActive,
     setInputBoxRef,
   } = useMessageInputContext();
   const { t } = useTranslationContext();
@@ -193,12 +180,10 @@ export const AutoCompleteInput = (props: AutoCompleteInputProps) => {
     <MemoizedAutoCompleteInput
       {...{
         additionalTextInputProps,
-        giphyActive,
-        giphyEnabled,
+        isCommandUIEnabled,
         maxMessageLength,
         numberOfLines,
         onChangeText,
-        setGiphyActive,
         setInputBoxRef,
         t,
       }}

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -1,22 +1,11 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { CommandVariants } from 'stream-chat';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Flag, GiphyIcon, Imgur, Lightning, Mute, Sound, UserAdd, UserDelete } from '../../icons';
 
-const styles = StyleSheet.create({
-  iconContainer: {
-    alignItems: 'center',
-    borderRadius: 12,
-    height: 24,
-    justifyContent: 'center',
-    marginRight: 8,
-    width: 24,
-  },
-});
-
 export const AutoCompleteSuggestionCommandIcon = ({ name }: { name: CommandVariants }) => {
   const {
     theme: {
@@ -28,54 +17,55 @@ export const AutoCompleteSuggestionCommandIcon = ({ name }: { name: CommandVaria
       },
     },
   } = useTheme();
-  switch (name) {
-    case 'ban':
-      return (
-        <View style={[styles.iconContainer, { backgroundColor: accent_blue }, iconContainer]}>
-          <UserDelete height={16} pathFill={white} width={16} />
-        </View>
-      );
-    case 'flag':
-      return (
-        <View style={[styles.iconContainer, { backgroundColor: accent_blue }, iconContainer]}>
-          <Flag pathFill={white} />
-        </View>
-      );
-    case 'giphy':
-      return (
-        <View style={[styles.iconContainer, { backgroundColor: accent_blue }, iconContainer]}>
-          <GiphyIcon />
-        </View>
-      );
-    case 'imgur':
-      return (
-        <View style={[styles.iconContainer, { backgroundColor: accent_blue }, iconContainer]}>
-          <Imgur />
-        </View>
-      );
-    case 'mute':
-      return (
-        <View style={[styles.iconContainer, { backgroundColor: accent_blue }, iconContainer]}>
-          <Mute height={16} pathFill={white} width={16} />
-        </View>
-      );
-    case 'unban':
-      return (
-        <View style={[styles.iconContainer, { backgroundColor: accent_blue }, iconContainer]}>
-          <UserAdd height={16} pathFill={white} width={16} />
-        </View>
-      );
-    case 'unmute':
-      return (
-        <View style={[styles.iconContainer, { backgroundColor: accent_blue }, iconContainer]}>
-          <Sound pathFill={white} />
-        </View>
-      );
-    default:
-      return (
-        <View style={[styles.iconContainer, { backgroundColor: accent_blue }, iconContainer]}>
-          <Lightning fill={white} size={16} />
-        </View>
-      );
-  }
+
+  const renderIcon = useCallback(
+    (name: CommandVariants) => {
+      switch (name) {
+        case 'ban':
+          return <UserDelete height={16} pathFill={white} width={16} />;
+        case 'flag':
+          return <Flag pathFill={white} />;
+        case 'giphy':
+          return <GiphyIcon />;
+        case 'imgur':
+          return <Imgur />;
+        case 'mute':
+          return <Mute height={16} pathFill={white} width={16} />;
+        case 'unban':
+          return <UserAdd height={16} pathFill={white} width={16} />;
+        case 'unmute':
+          return <Sound pathFill={white} />;
+        default:
+          return <Lightning fill={white} size={16} />;
+      }
+    },
+    [white],
+  );
+
+  const icon = renderIcon(name);
+
+  return (
+    <View
+      style={[
+        styles.iconContainer,
+        {
+          backgroundColor: accent_blue,
+        },
+        iconContainer,
+      ]}
+    >
+      {icon}
+    </View>
+  );
 };
+
+const styles = StyleSheet.create({
+  iconContainer: {
+    alignItems: 'center',
+    borderRadius: 12,
+    height: 24,
+    justifyContent: 'center',
+    marginRight: 8,
+    width: 24,
+  },
+});