feat: handle command injection through middleware

Author: khushal87

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -42,9 +42,7 @@ type AutoCompleteInputPropsWithContext = TextInputProps &
 type AutoCompleteInputProps = Partial<AutoCompleteInputPropsWithContext>;
 
 const textComposerStateSelector = (state: TextComposerState) => ({
-  // TODO: Comment out once the commands PR has been merged on the LLC
-  // command: state.command,
-  command: null,
+  command: state.command,
   text: state.text,
 });
 

package/src/components/MessageInput/InputButtons.tsx

@@ -35,9 +35,7 @@ export type InputButtonsWithContextProps = Pick<
   Pick<OwnCapabilitiesContextValue, 'uploadFile'>;
 
 const textComposerStateSelector = (state: TextComposerState) => ({
-  // TODO: Comment out once the commands PR has been merged on the LLC
-  // command: state.command,
-  command: null,
+  command: state.command,
   hasText: !!state.text,
 });
 

package/src/components/MessageInput/MessageInput.tsx

@@ -173,9 +173,7 @@ type MessageInputPropsWithContext = Partial<
   Pick<MessageComposerAPIContextValue, 'clearEditingState'> & { editing: boolean };
 
 const textComposerStateSelector = (state: TextComposerState) => ({
-  // TODO: Comment out once the commands PR has been merged on the LLC
-  // command: state.command,
-  command: null,
+  command: state.command,
   hasText: !!state.text,
   mentionedUsers: state.mentionedUsers,
   suggestions: state.suggestions,

package/src/components/MessageInput/SendButton.tsx

@@ -20,13 +20,8 @@ export type SendButtonProps = Partial<Pick<MessageInputContextValue, 'sendMessag
   disabled: boolean;
 };
 
-// TODO: Comment out once the commands PR has been merged on the LLC
-// @ts-ignore
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const textComposerStateSelector = (state: TextComposerState) => ({
-  // TODO: Comment out once the commands PR has been merged on the LLC
-  // command: state.command,
-  command: null,
+  command: state.command,
 });
 
 export const SendButton = (props: SendButtonProps) => {

package/src/components/MessageInput/components/CommandInput.tsx

@@ -22,9 +22,7 @@ export type CommandInputProps = Partial<
   disabled: boolean;
 };
 const textComposerStateSelector = (state: TextComposerState) => ({
-  // TODO: Comment out once the commands PR has been merged on the LLC
-  // command: state.command,
-  command: null,
+  command: state.command,
   text: state.text,
 });
 
@@ -52,18 +50,15 @@ export const CommandInput = ({
   } = useTheme();
 
   const onCloseHandler = () => {
-    // TODO: Comment out once the commands PR has been merged on the LLC
-    // textComposer.clearCommand();
+    textComposer.clearCommand();
     messageComposer?.restore();
   };
 
   if (!command) {
     return null;
   }
 
-  // TODO: Comment out once the commands PR has been merged on the LLC
-  // const commandName = (command.name ?? '').toUpperCase();
-  const commandName = '';
+  const commandName = (command.name ?? '').toUpperCase();
 
   return (
     <View style={[styles.autoCompleteInputContainer, autoCompleteInputContainer]}>

package/src/index.ts

@@ -15,6 +15,7 @@ export * from './types/types';
 
 export * from './utils/patchMessageTextCommand';
 export * from './utils/i18n/Streami18n';
+export * from './utils/setupCommandUIMiddleware';
 export * from './utils/utils';
 
 export { default as enTranslations } from './i18n/en.json';

package/src/utils/setupCommandUIMiddleware.ts

@@ -1,28 +1,24 @@
 import {
-  // createCommandInjectionMiddleware,
-  // createCommandStringExtractionMiddleware,
-  // createDraftCommandInjectionMiddleware,
+  createCommandInjectionMiddleware,
+  createCommandStringExtractionMiddleware,
+  createDraftCommandInjectionMiddleware,
   MessageComposer,
-  // TextComposerMiddleware,
+  TextComposerMiddleware,
 } from 'stream-chat';
 
-// TODO: Comment out once the commands PR has been merged on the LLC
-// @ts-ignore
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const setupCommandUIMiddleware = (messageComposer: MessageComposer) => {
-  // TODO: Comment out once the commands PR has been merged on the LLC
-  // messageComposer.compositionMiddlewareExecutor.insert({
-  //   middleware: [createCommandInjectionMiddleware(messageComposer)],
-  //   position: { after: 'stream-io/message-composer-middleware/attachments' },
-  // });
-  //
-  // messageComposer.draftCompositionMiddlewareExecutor.insert({
-  //   middleware: [createDraftCommandInjectionMiddleware(messageComposer)],
-  //   position: { after: 'stream-io/message-composer-middleware/draft-attachments' },
-  // });
-  //
-  // messageComposer.textComposer.middlewareExecutor.insert({
-  //   middleware: [createCommandStringExtractionMiddleware() as TextComposerMiddleware],
-  //   position: { after: 'stream-io/text-composer/commands-middleware' },
-  // });
+  messageComposer.compositionMiddlewareExecutor.insert({
+    middleware: [createCommandInjectionMiddleware(messageComposer)],
+    position: { after: 'stream-io/message-composer-middleware/attachments' },
+  });
+
+  messageComposer.draftCompositionMiddlewareExecutor.insert({
+    middleware: [createDraftCommandInjectionMiddleware(messageComposer)],
+    position: { after: 'stream-io/message-composer-middleware/draft-attachments' },
+  });
+
+  messageComposer.textComposer.middlewareExecutor.insert({
+    middleware: [createCommandStringExtractionMiddleware() as TextComposerMiddleware],
+    position: { after: 'stream-io/text-composer/commands-middleware' },
+  });
 };