Merge branch 'attachment-manager-integration' of github.com:GetStream/stream-chat-react-native into draft-message

Author: khushal87

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -14,13 +14,12 @@ import {
   useTypingString,
   AITypingIndicatorView,
 } from 'stream-chat-react-native';
-import { Platform, StyleSheet, View } from 'react-native';
+import { Platform, Pressable, StyleSheet, View } from 'react-native';
 import type { StackNavigationProp } from '@react-navigation/stack';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useAppContext } from '../context/AppContext';
 import { ScreenHeader } from '../components/ScreenHeader';
-import { TouchableOpacity } from 'react-native-gesture-handler';
 import { useChannelMembersStatus } from '../hooks/useChannelMembersStatus';
 
 import type { StackNavigatorParamList } from '../types';
@@ -49,44 +48,51 @@ const ChannelHeader: React.FC<ChannelHeaderProps> = ({ channel }) => {
   const navigation = useNavigation<ChannelScreenNavigationProp>();
   const typing = useTypingString();
 
-  if (!channel || !chatClient) {
-    return null;
-  }
-
   const isOneOnOneConversation =
     channel &&
     Object.values(channel.state.members).length === 2 &&
     channel.id?.indexOf('!members-') === 0;
 
+  const onBackPress = useCallback(() => {
+    if (!navigation.canGoBack()) {
+      // if no previous screen was present in history, go to the list screen
+      // this can happen when opened through push notification
+      navigation.reset({ index: 0, routes: [{ name: 'MessagingScreen' }] });
+    } else {
+      navigation.goBack();
+    }
+  }, [navigation]);
+
+  const onRightContentPress = useCallback(() => {
+    closePicker();
+    if (isOneOnOneConversation) {
+      navigation.navigate('OneOnOneChannelDetailScreen', {
+        channel,
+      });
+    } else {
+      navigation.navigate('GroupChannelDetailsScreen', {
+        channel,
+      });
+    }
+  }, [channel, closePicker, isOneOnOneConversation, navigation]);
+
+  if (!channel || !chatClient) {
+    return null;
+  }
+
   return (
     <ScreenHeader
-      onBack={() => {
-        if (!navigation.canGoBack()) {
-          // if no previous screen was present in history, go to the list screen
-          // this can happen when opened through push notification
-          navigation.reset({ index: 0, routes: [{ name: 'MessagingScreen' }] });
-        } else {
-          navigation.goBack();
-        }
-      }}
+      onBack={onBackPress}
       // eslint-disable-next-line react/no-unstable-nested-components
       RightContent={() => (
-        <TouchableOpacity
-          onPress={() => {
-            closePicker();
-            if (isOneOnOneConversation) {
-              navigation.navigate('OneOnOneChannelDetailScreen', {
-                channel,
-              });
-            } else {
-              navigation.navigate('GroupChannelDetailsScreen', {
-                channel,
-              });
-            }
-          }}
+        <Pressable
+          onPress={onRightContentPress}
+          style={({ pressed }) => ({
+            opacity: pressed ? 0.5 : 1,
+          })}
         >
           <ChannelAvatar channel={channel} />
-        </TouchableOpacity>
+        </Pressable>
       )}
       showUnreadCountBadge
       Subtitle={isOnline ? undefined : NetworkDownIndicator}

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/components/MessageInput/InputButtons.tsx

@@ -36,7 +36,7 @@ export type InputButtonsWithContextProps = Pick<
 
 const textComposerStateSelector = (state: TextComposerState) => ({
   command: state.command,
-  text: state.text,
+  hasText: !!state.text,
 });
 
 export const InputButtonsWithContext = (props: InputButtonsWithContextProps) => {
@@ -51,12 +51,11 @@ export const InputButtonsWithContext = (props: InputButtonsWithContextProps) =>
     uploadFile: ownCapabilitiesUploadFile,
   } = props;
   const { textComposer } = useMessageComposer();
-  const { command, text } = useStateStore(textComposer.state, textComposerStateSelector);
+  const { command, hasText } = useStateStore(textComposer.state, textComposerStateSelector);
 
   const [showMoreOptions, setShowMoreOptions] = useState(true);
   const { attachments } = useAttachmentManagerState();
 
-  const hasText = !!text;
   const shouldShowMoreOptions = hasText || !!attachments.length;
 
   useEffect(() => {

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

@@ -23,7 +23,6 @@ export type CommandInputProps = Partial<
 };
 const textComposerStateSelector = (state: TextComposerState) => ({
   command: state.command,
-  text: state.text,
 });
 
 export const CommandInput = ({

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' },
+  });
+};