fix: remove isCommandUIEnabled from channel context

Author: khushal87

package/src/components/Channel/Channel.tsx

@@ -279,7 +279,6 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'EmptyStateIndicator'
       | 'enableMessageGroupingByUser'
       | 'enforceUniqueReaction'
-      | 'isCommandUIEnabled'
       | 'hideStickyDateHeader'
       | 'hideDateSeparators'
       | 'LoadingIndicator'
@@ -1694,7 +1693,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     hideStickyDateHeader,
     highlightedMessageId,
     isChannelActive: shouldSyncChannel,
-    isCommandUIEnabled: isCommandUIEnabled ?? !!clientChannelConfig?.commands?.length,
     lastRead,
     loadChannelAroundMessage,
     loadChannelAtFirstUnreadMessage,
@@ -1769,7 +1767,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     FileUploadPreview,
     handleAttachButtonPress,
     hasCameraPicker,
-    hasCommands: hasCommands ?? (getChannelConfigSafely()?.commands ?? []).length > 0,
+    hasCommands: hasCommands ?? !!clientChannelConfig?.commands?.length,
     hasFilePicker,
     hasImagePicker,
     ImageAttachmentUploadPreview,
@@ -1779,7 +1777,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     InputButtons,
     InputEditingStateHeader,
     InputReplyStateHeader,
-    isCommandUIEnabled,
+    isCommandUIEnabled: isCommandUIEnabled ?? !!clientChannelConfig?.commands?.length,
     MoreOptionsButton,
     openPollCreationDialog,
     SendButton,

package/src/components/Channel/hooks/useCreateChannelContext.ts

@@ -10,7 +10,6 @@ export const useCreateChannelContext = ({
   enableMessageGroupingByUser,
   enforceUniqueReaction,
   error,
-  isCommandUIEnabled,
   hideDateSeparators,
   hideStickyDateHeader,
   highlightedMessageId,
@@ -59,7 +58,6 @@ export const useCreateChannelContext = ({
       hideStickyDateHeader,
       highlightedMessageId,
       isChannelActive,
-      isCommandUIEnabled,
       lastRead,
       loadChannelAroundMessage,
       loadChannelAtFirstUnreadMessage,

package/src/contexts/channelContext/ChannelContext.tsx

@@ -49,10 +49,6 @@ export type ChannelContextValue = {
    */
   enforceUniqueReaction: boolean;
   error: boolean | Error;
-  /**
-   * When set to false, it will disable giphy command on MessageInput component.
-   */
-  isCommandUIEnabled: boolean;
   /**
    * Hide inline date separators on channel
    */

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -11,15 +11,11 @@ import { Alert, Keyboard, Linking, TextInput, TextInputProps } from 'react-nativ
 
 import { BottomSheetHandleProps } from '@gorhom/bottom-sheet';
 import {
-  createCommandInjectionMiddleware,
-  createCommandStringExtractionMiddleware,
-  createDraftCommandInjectionMiddleware,
   LocalMessage,
   Message,
   SendMessageOptions,
   StreamChat,
   Message as StreamMessage,
-  TextComposerMiddleware,
   UpdateMessageOptions,
   UploadRequestFn,
   UserResponse,
@@ -67,6 +63,7 @@ import {
 import { isDocumentPickerAvailable, MediaTypes, NativeHandlers } from '../../native';
 import { File } from '../../types/types';
 import { compressedImageURI } from '../../utils/compressImage';
+import { setupCommandUIMiddleware } from '../../utils/setupCommandUIMiddleware';
 import {
   AttachmentPickerIconProps,
   useAttachmentPickerContext,
@@ -428,7 +425,7 @@ export const MessageInputProvider = ({
     useAttachmentPickerContext();
   const { client, enableOfflineSupport } = useChatContext();
 
-  const { isCommandUIEnabled, uploadAbortControllerRef } = useChannelContext();
+  const { uploadAbortControllerRef } = useChannelContext();
   const { clearEditingState } = useMessageComposerAPIContext();
   const { thread } = useThreadContext();
   const { t } = useTranslationContext();
@@ -462,21 +459,8 @@ export const MessageInputProvider = ({
       attachmentManager.setCustomUploadFn(value.doFileUploadRequest);
     }
 
-    if (isCommandUIEnabled) {
-      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' },
-      });
+    if (value.isCommandUIEnabled) {
+      setupCommandUIMiddleware(messageComposer);
     }
 
     if (enableOfflineSupport) {
@@ -490,7 +474,7 @@ export const MessageInputProvider = ({
     }
   }, [
     value.doFileUploadRequest,
-    isCommandUIEnabled,
+    value.isCommandUIEnabled,
     enableOfflineSupport,
     messageComposer,
     attachmentManager,

package/src/utils/setupCommandUIMiddleware.ts

@@ -0,0 +1,24 @@
+import {
+  createCommandInjectionMiddleware,
+  createCommandStringExtractionMiddleware,
+  createDraftCommandInjectionMiddleware,
+  MessageComposer,
+  TextComposerMiddleware,
+} from 'stream-chat';
+
+export const setupCommandUIMiddleware = (messageComposer: MessageComposer) => {
+  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' },
+  });
+};