stream-chat-react-native-core 9.1.2-beta.3 → 9.1.2-beta.4

package/lib/typescript/contexts/messageInputContext/MessageInputContext.d.ts

@@ -7,7 +7,7 @@ import { MessageInputHeightStore } from '../../state-store/message-input-height-
 import { File } from '../../types/types';
 export type LocalMessageInputContext = {
     closeAttachmentPicker: () => void;
-    inputBoxRef: React.RefObject<TextInput | null>;
+    inputBoxRef: React.RefObject<InputBoxRef | null>;
     openAttachmentPicker: () => void;
     /**
      * Function for picking a photo from native image picker and uploading it.
@@ -18,7 +18,7 @@ export type LocalMessageInputContext = {
     /**
      * Ref callback to set reference on input box
      */
-    setInputBoxRef: Ref<TextInput> | undefined;
+    setInputBoxRef: Ref<InputBoxRef> | undefined;
     /**
      * Function for taking a photo and uploading it
      */
@@ -33,6 +33,10 @@ export type LocalMessageInputContext = {
     uploadVoiceRecording: (sendOnComplete: boolean) => Promise<void>;
     stopVoiceRecording: () => Promise<void>;
 };
+export type InputBoxRef = TextInput & {
+    clearState: () => void;
+    restoreState: (text: string) => void;
+};
 export type InputMessageInputContextValue = {
     /**
      * Controls how many pixels to the top side the user has to scroll in order to lock the recording view and allow the

package/lib/typescript/contexts/messageInputContext/MessageInputContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageInputContext.d.ts","sourceRoot":"","sources":["../../../../src/contexts/messageInputContext/MessageInputContext.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MessageInputContext.d.ts","sourceRoot":"","sources":["../../../../src/contexts/messageInputContext/MessageInputContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,iBAAiB,EACjB,GAAG,EAMJ,MAAM,OAAO,CAAC;AACf,OAAO,EAAkB,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAGzE,OAAO,EACL,YAAY,EAEZ,kBAAkB,EAClB,UAAU,EACV,OAAO,IAAI,aAAa,EACxB,oBAAoB,EACpB,eAAe,EAChB,MAAM,aAAa,CAAC;AAerB,OAAO,EAA6B,UAAU,EAAkB,MAAM,cAAc,CAAC;AACrF,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAChF,OAAO,EAAE,uBAAuB,EAAE,MAAM,8CAA8C,CAAC;AACvF,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAazC,MAAM,MAAM,wBAAwB,GAAG;IACrC,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACjD,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC;;OAEG;IACH,kCAAkC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACxD,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC;;OAEG;IACH,cAAc,EAAE,GAAG,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC;IAC7C;;OAEG;IACH,kBAAkB,EAAE,CAClB,SAAS,CAAC,EAAE,UAAU,KACnB,OAAO,CAAC;QAAE,iBAAiB,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,SAAS,CAAC,CAAC;IAC9E,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,oBAAoB,EAAE,oBAAoB,CAAC;IAC3C,mBAAmB,EAAE,MAAM,OAAO,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACxD,oBAAoB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1C,oBAAoB,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACjE,kBAAkB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACzC,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG;IACpC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IAC1C;;;OAGG;IACH,yBAAyB,EAAE,MAAM,CAAC;IAClC;;;OAGG;IACH,iCAAiC,EAAE,MAAM,CAAC;IAC1C;;;;OAIG;IACH,4BAA4B,EAAE,OAAO,CAAC;IACtC;;;OAGG;IACH,kCAAkC,EAAE,MAAM,CAAC;IAC3C;;OAEG;IACH,qBAAqB,EAAE,OAAO,CAAC;IAC/B;;;;OAIG;IACH,iCAAiC,EAAE,MAAM,CAAC;IAC1C;;;;;OAKG;IACH,4BAA4B,EAAE,MAAM,CAAC;IAErC,WAAW,EAAE,CAAC,MAAM,EAAE;QACpB,YAAY,EAAE,YAAY,CAAC;QAC3B,OAAO,CAAC,EAAE,oBAAoB,CAAC;KAChC,KAAK,UAAU,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC,CAAC;IAE9C,oDAAoD;IACpD,eAAe,EAAE,OAAO,CAAC;IAEzB,gDAAgD;IAChD,WAAW,EAAE,OAAO,CAAC;IACrB,kDAAkD;IAClD,aAAa,EAAE,OAAO,CAAC;IACvB,mDAAmD;IACnD,cAAc,EAAE,OAAO,CAAC;IAExB,WAAW,EAAE,CAAC,MAAM,EAAE;QACpB,YAAY,EAAE,YAAY,CAAC;QAC3B,OAAO,EAAE,aAAa,CAAC;QACvB,OAAO,CAAC,EAAE,kBAAkB,CAAC;KAC9B,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpB;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,cAAc,CAAC;IAC1C,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAC3C,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;IACrC;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,eAAe,CAAC;IAEtC;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;IAErC;;;;OAIG;IACH,oBAAoB,EAAE,OAAO,CAAC;IAE9B,sBAAsB,CAAC,EAAE,CAAC,EAAE,WAAW,EAAE,EAAE,IAAI,CAAC,wBAAwB,EAAE,aAAa,CAAC,KAAK,IAAI,CAAC;IAClG;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,uBAAuB,EAAE,uBAAuB,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,wBAAwB,GAC7D,IAAI,CAAC,6BAA6B,EAAE,aAAa,CAAC,CAAC;AAErD,eAAO,MAAM,mBAAmB,yCAE/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,sBAGlC,iBAAiB,CAAC;IACnB,KAAK,EAAE,6BAA6B,CAAC;CACtC,CAAC,sBA0TD,CAAC;AAEF,eAAO,MAAM,sBAAsB,gCAUlC,CAAC"}

package/lib/typescript/contexts/messageInputContext/hooks/useIsCommandDisabled.d.ts

@@ -0,0 +1,3 @@
+import type { CommandSuggestion } from 'stream-chat';
+export declare const useIsCommandDisabled: (command: CommandSuggestion) => boolean;
+//# sourceMappingURL=useIsCommandDisabled.d.ts.map

package/lib/typescript/contexts/messageInputContext/hooks/useIsCommandDisabled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsCommandDisabled.d.ts","sourceRoot":"","sources":["../../../../../src/contexts/messageInputContext/hooks/useIsCommandDisabled.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,MAAM,aAAa,CAAC;AAU3E,eAAO,MAAM,oBAAoB,GAAI,SAAS,iBAAiB,YAW9D,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "9.1.2-beta.3",
+  "version": "9.1.2-beta.4",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -83,7 +83,7 @@
     "path": "0.12.7",
     "react-native-markdown-package": "1.8.2",
     "react-native-url-polyfill": "^2.0.0",
-    "stream-chat": "^9.42.1",
+    "stream-chat": "^9.43.0",
     "use-sync-external-store": "^1.5.0"
   },
   "peerDependencies": {

package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx

@@ -58,9 +58,13 @@ export const AttachmentCommandNativePickerItem = ({ item }: { item: CommandSugge
   const { close } = useBottomSheetContext();
 
   const handlePress = useCallback(() => {
+    if (messageComposer.isCommandDisabled(item)) {
+      return;
+    }
+
     textComposer.setCommand(item);
     close(() => inputBoxRef.current?.focus());
-  }, [textComposer, item, close, inputBoxRef]);
+  }, [messageComposer, item, textComposer, close, inputBoxRef]);
 
   return <AttachmentCommandPickerItemUI item={item} onPress={handlePress} />;
 };
@@ -73,9 +77,13 @@ export const AttachmentCommandPickerItem = ({ item }: { item: CommandSuggestion
   const { inputBoxRef } = useMessageInputContext();
 
   const handlePress = useCallback(() => {
+    if (messageComposer.isCommandDisabled(item)) {
+      return;
+    }
+
     textComposer.setCommand(item);
     inputBoxRef.current?.focus();
-  }, [textComposer, item, inputBoxRef]);
+  }, [messageComposer, item, textComposer, inputBoxRef]);
 
   if (disableAttachmentPicker) {
     return <AttachmentCommandNativePickerItem item={item} />;

package/src/components/AttachmentPicker/components/AttachmentTypePickerButton.tsx

@@ -9,7 +9,6 @@ import { AttachmentCommandPicker } from './AttachmentPickerContent';
 import {
   useAttachmentPickerContext,
   useChannelContext,
-  useMessageComposer,
   useMessageInputContext,
   useMessagesContext,
   useOwnCapabilitiesContext,
@@ -182,7 +181,6 @@ export const PollPickerButton = () => {
 
 export const CommandsPickerButton = () => {
   const [showCommandsSheet, setShowCommandsSheet] = useState(false);
-  const messageComposer = useMessageComposer();
   const { hasCommands } = useMessageInputContext();
   const { attachmentPickerStore, disableAttachmentPicker } = useAttachmentPickerContext();
   const { selectedPicker } = useAttachmentPickerState();
@@ -197,7 +195,7 @@ export const CommandsPickerButton = () => {
 
   const onClose = useStableCallback(() => setShowCommandsSheet(false));
 
-  return hasCommands && !messageComposer.editedMessage ? (
+  return hasCommands ? (
     <>
       <AttachmentTypePickerButton
         testID='commands-touchable'

package/src/components/AttachmentPicker/components/__tests__/AttachmentPickerContent.test.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import type { CommandSuggestion } from 'stream-chat';
+
+import {
+  AttachmentCommandNativePickerItem,
+  AttachmentCommandPickerItem,
+} from '../AttachmentPickerContent';
+
+jest.mock('stream-chat', () => ({
+  CommandSearchSource: jest.fn(() => ({
+    query: jest.fn(() => ({ items: [] })),
+  })),
+}));
+
+jest.mock('../AttachmentMediaPicker/AttachmentMediaPicker', () => ({
+  AttachmentMediaPicker: () => null,
+}));
+
+const mockClose = jest.fn((callback?: () => void) => callback?.());
+const mockFocus = jest.fn();
+const mockIsCommandDisabled = jest.fn();
+const mockSetCommand = jest.fn();
+
+jest.mock('../../../../contexts', () => ({
+  useAttachmentPickerContext: jest.fn(() => ({
+    disableAttachmentPicker: false,
+  })),
+  useBottomSheetContext: jest.fn(() => ({
+    close: mockClose,
+  })),
+  useMessageComposer: jest.fn(() => ({
+    isCommandDisabled: mockIsCommandDisabled,
+    textComposer: { setCommand: mockSetCommand },
+  })),
+  useMessageInputContext: jest.fn(() => ({
+    inputBoxRef: { current: { focus: mockFocus } },
+  })),
+}));
+
+jest.mock('../../../../contexts/themeContext/ThemeContext', () => ({
+  useTheme: jest.fn(() => ({
+    theme: {
+      semantics: {
+        backgroundUtilityPressed: '#f5f5f5',
+      },
+    },
+  })),
+}));
+
+jest.mock('../../../../hooks', () => ({
+  useAttachmentPickerState: jest.fn(() => ({ selectedPicker: 'images' })),
+  useStableCallback: (callback: unknown) => callback,
+}));
+
+jest.mock('../../../AutoCompleteInput/AutoCompleteSuggestionItem', () => {
+  const { Text } = require('react-native');
+
+  return {
+    CommandSuggestionItem: ({ name }: CommandSuggestion) => <Text>{name}</Text>,
+  };
+});
+
+const command = {
+  args: '',
+  id: 'ban',
+  name: 'ban',
+  set: 'moderation_set',
+} as CommandSuggestion;
+
+describe('AttachmentPickerContent commands', () => {
+  beforeEach(() => {
+    mockClose.mockClear();
+    mockFocus.mockClear();
+    mockIsCommandDisabled.mockReset();
+    mockSetCommand.mockClear();
+  });
+
+  it('does not focus the input when a disabled command is pressed', () => {
+    mockIsCommandDisabled.mockReturnValue(true);
+
+    render(<AttachmentCommandPickerItem item={command} />);
+
+    fireEvent.press(screen.getByText('ban'));
+
+    expect(mockIsCommandDisabled).toHaveBeenCalledWith(command);
+    expect(mockSetCommand).not.toHaveBeenCalled();
+    expect(mockFocus).not.toHaveBeenCalled();
+  });
+
+  it('does not close the picker or focus the input when a disabled command is pressed in native picker mode', () => {
+    mockIsCommandDisabled.mockReturnValue(true);
+
+    render(<AttachmentCommandNativePickerItem item={command} />);
+
+    fireEvent.press(screen.getByText('ban'));
+
+    expect(mockIsCommandDisabled).toHaveBeenCalledWith(command);
+    expect(mockSetCommand).not.toHaveBeenCalled();
+    expect(mockClose).not.toHaveBeenCalled();
+    expect(mockFocus).not.toHaveBeenCalled();
+  });
+});

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -17,16 +17,15 @@ import {
   useChannelContext,
 } from '../../contexts/channelContext/ChannelContext';
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
-import {
-  MessageInputContextValue,
-  useMessageInputContext,
-} from '../../contexts/messageInputContext/MessageInputContext';
+import type { MessageInputContextValue } from '../../contexts/messageInputContext/MessageInputContext';
+import { useMessageInputContext } from '../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import {
   TranslationContextValue,
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 
+import { useStableCallback } from '../../hooks';
 import { useStateStore } from '../../hooks/useStateStore';
 import { useCooldownRemaining } from '../MessageInput/hooks/useCooldownRemaining';
 
@@ -45,6 +44,19 @@ const TextInputRenderer = React.forwardRef<RNTextInput, AnimatedTextInputRendere
 
 const AnimatedTextInputRenderer = Animated.createAnimatedComponent(TextInputRenderer);
 
+const setRef = <T,>(ref: React.Ref<T> | undefined, value: T | null) => {
+  if (!ref) {
+    return;
+  }
+
+  if (typeof ref === 'function') {
+    ref(value);
+    return;
+  }
+
+  (ref as React.RefObject<T | null>).current = value;
+};
+
 type AutoCompleteInputPropsWithContext = TextInputProps &
   Pick<ChannelContextValue, 'channel'> &
   Pick<MessageInputContextValue, 'setInputBoxRef'> &
@@ -109,6 +121,30 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
     setLocalText(text);
   }, [text]);
 
+  const clearState = useCallback(() => {
+    setLocalText('');
+  }, []);
+
+  const restoreState = useStableCallback((restoredText: string) => {
+    setLocalText(restoredText);
+  });
+
+  const setExtendedInputRef = useCallback(
+    (ref: RNTextInput | null) => {
+      if (!ref) {
+        setRef(setInputBoxRef, null);
+        return;
+      }
+
+      const inputBoxRef = Object.assign(ref, {
+        clearState,
+        restoreState,
+      });
+      setRef(setInputBoxRef, inputBoxRef);
+    },
+    [clearState, restoreState, setInputBoxRef],
+  );
+
   const handleSelectionChange = useCallback(
     (e: TextInputSelectionChangeEvent) => {
       const { selection } = e.nativeEvent;
@@ -161,7 +197,7 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
       onSelectionChange={handleSelectionChange}
       placeholder={placeholderText}
       placeholderTextColor={semantics.inputTextPlaceholder}
-      ref={setInputBoxRef}
+      ref={setExtendedInputRef}
       style={[
         styles.inputBox,
         {

package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx

@@ -1,10 +1,11 @@
 import React, { useCallback, useMemo } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 
-import { CommandSuggestion, TextComposerSuggestion, UserSuggestion } from 'stream-chat';
+import type { CommandSuggestion, TextComposerSuggestion, UserSuggestion } from 'stream-chat';
 
 import { AutoCompleteSuggestionCommandIcon } from './AutoCompleteSuggestionCommandIcon';
 
+import { useIsCommandDisabled } from '../../contexts/messageInputContext/hooks/useIsCommandDisabled';
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../theme';
@@ -81,11 +82,17 @@ export const CommandSuggestionItem = (item: CommandSuggestion) => {
   } = useTheme();
   const styles = useStyles();
 
+  const isDisabled = useIsCommandDisabled(item);
+
   return (
     <View style={[styles.commandContainer, commandContainer]}>
       {name ? <AutoCompleteSuggestionCommandIcon name={name} /> : null}
       <Text
-        style={[styles.title, { color: semantics.textPrimary }, title]}
+        style={[
+          styles.title,
+          { color: isDisabled ? semantics.textTertiary : semantics.textPrimary },
+          title,
+        ]}
         testID='commands-item-title'
       >
         {(name || '').replace(/^\w/, (char) => char.toUpperCase())}

package/src/components/AutoCompleteInput/__tests__/AutoCompleteInput.test.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 
+import type { TextInput } from 'react-native';
+
 import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
 import type { Channel as ChannelType, StreamChat } from 'stream-chat';
 
 import { OverlayProvider } from '../../../contexts';
+import type { InputBoxRef } from '../../../contexts/messageInputContext/MessageInputContext';
 import { initiateClientWithChannels } from '../../../mock-builders/api/initiateClientWithChannels';
 import type { ChannelProps } from '../../Channel/Channel';
 import { Channel } from '../../Channel/Channel';
@@ -123,6 +126,50 @@ describe('AutoCompleteInput', () => {
     });
   });
 
+  it('should expose imperative state handlers on the input ref', async () => {
+    let inputRef: InputBoxRef | null = null;
+    const text = 'hello';
+    const channelProps = {
+      channel,
+      setInputRef: (ref: TextInput | null) => {
+        inputRef = ref as InputBoxRef | null;
+      },
+    };
+    const props = {};
+
+    renderComponent({ channelProps, client, props });
+
+    await waitFor(() => {
+      expect(inputRef?.clearState).toBeTruthy();
+      expect(inputRef?.restoreState).toBeTruthy();
+    });
+
+    act(() => {
+      fireEvent.changeText(screen.getByTestId('auto-complete-text-input'), text);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('auto-complete-text-input').props.value).toBe(text);
+    });
+
+    act(() => {
+      inputRef?.clearState();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('auto-complete-text-input').props.value).toBe('');
+      expect(channel.messageComposer.textComposer.text).toBe(text);
+    });
+
+    act(() => {
+      inputRef?.restoreState(text);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('auto-complete-text-input').props.value).toBe(text);
+    });
+  });
+
   it('should call the textComposer setSelection when the onSelectionChange is triggered', async () => {
     const { textComposer } = channel.messageComposer;
 

package/src/components/ui/GiphyChip.tsx

@@ -27,7 +27,7 @@ export const GiphyChip = () => {
 
   const onPressHandler = () => {
     textComposer.clearCommand();
-    messageComposer?.restore();
+    // messageComposer?.restore();
   };
 
   return (

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -51,7 +51,7 @@ import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type LocalMessageInputContext = {
   closeAttachmentPicker: () => void;
-  inputBoxRef: React.RefObject<TextInput | null>;
+  inputBoxRef: React.RefObject<InputBoxRef | null>;
   openAttachmentPicker: () => void;
   /**
    * Function for picking a photo from native image picker and uploading it.
@@ -62,7 +62,7 @@ export type LocalMessageInputContext = {
   /**
    * Ref callback to set reference on input box
    */
-  setInputBoxRef: Ref<TextInput> | undefined;
+  setInputBoxRef: Ref<InputBoxRef> | undefined;
   /**
    * Function for taking a photo and uploading it
    */
@@ -77,6 +77,11 @@ export type LocalMessageInputContext = {
   stopVoiceRecording: () => Promise<void>;
 };
 
+export type InputBoxRef = TextInput & {
+  clearState: () => void;
+  restoreState: (text: string) => void;
+};
+
 export type InputMessageInputContextValue = {
   /**
    * Controls how many pixels to the top side the user has to scroll in order to lock the recording view and allow the
@@ -215,7 +220,7 @@ export const MessageInputProvider = ({
   const { clearEditingState } = useMessageComposerAPIContext();
   const { thread } = useThreadContext();
   const { t } = useTranslationContext();
-  const inputBoxRef = useRef<TextInput | null>(null);
+  const inputBoxRef = useRef<InputBoxRef | null>(null);
 
   const [showPollCreationDialog, setShowPollCreationDialog] = useState(false);
 
@@ -368,14 +373,18 @@ export const MessageInputProvider = ({
   }, [closePicker, attachmentPickerStore]);
 
   const sendMessage = useStableCallback(async () => {
-    if (inputBoxRef.current) {
-      inputBoxRef.current.clear();
-    }
+    const textToRestore = messageComposer.textComposer.text;
+    let compositionAccepted = false;
+
+    inputBoxRef.current?.clearState();
 
     try {
       const composition = await messageComposer.compose();
 
-      if (!composition || !composition.message) return;
+      if (!composition || !composition.message) {
+        inputBoxRef.current?.restoreState(textToRestore);
+        return;
+      }
 
       const { localMessage, message, sendOptions } = composition;
       const linkInfos = parseLinksFromText(localMessage.text);
@@ -386,9 +395,12 @@ export const MessageInputProvider = ({
           t('Sending links is not allowed in this conversation'),
         );
 
+        inputBoxRef.current?.restoreState(textToRestore);
         return;
       }
 
+      compositionAccepted = true;
+
       // MODERATION: This is for the case where the message is of type 'error' and if you try to edit it, it will throw an error.
       if (editedMessage && editedMessage.type !== 'error') {
         try {
@@ -425,11 +437,14 @@ export const MessageInputProvider = ({
         }
       }
     } catch (error) {
+      if (!compositionAccepted) {
+        inputBoxRef.current?.restoreState(textToRestore);
+      }
       console.error('Error while sending message:', error);
     }
   });
 
-  const setInputBoxRef = useStableCallback((ref: TextInput | null) => {
+  const setInputBoxRef = useStableCallback((ref: InputBoxRef | null) => {
     inputBoxRef.current = ref;
     if (value.setInputRef) {
       value.setInputRef(ref);

package/src/contexts/messageInputContext/__tests__/sendMessage.test.tsx

@@ -22,6 +22,7 @@ import {
   MessageInputProvider,
   useMessageInputContext,
 } from '../MessageInputContext';
+import type { InputBoxRef } from '../MessageInputContext';
 
 const Wrapper = ({
   messageComposerContextValue,
@@ -98,6 +99,53 @@ describe("MessageInputContext's sendMessage", () => {
     });
   });
 
+  it('should restore input state if composition is discarded', async () => {
+    const sendMessageMock = jest.fn();
+    const clearState = jest.fn();
+    const restoreState = jest.fn();
+    const initialProps = {
+      sendMessage: sendMessageMock,
+    };
+
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps,
+      wrapper: (props) => (
+        <Wrapper
+          client={chatClient}
+          messageComposerContextValue={{ channel }}
+          props={{ ...props, ...initialProps }}
+        />
+      ),
+    });
+
+    const text = 'Hello there';
+    const inputRef = {
+      clearState,
+      restoreState,
+    } as unknown as InputBoxRef;
+    (result.current.setInputBoxRef as (ref: InputBoxRef | null) => void)(inputRef);
+
+    await act(async () => {
+      await channel.messageComposer.textComposer.handleChange({
+        selection: {
+          end: text.length,
+          start: text.length,
+        },
+        text,
+      });
+    });
+
+    jest.spyOn(channel.messageComposer, 'compose').mockResolvedValue(undefined);
+
+    await act(async () => {
+      await result.current.sendMessage();
+    });
+
+    expect(clearState).toHaveBeenCalledTimes(1);
+    expect(restoreState).toHaveBeenCalledWith(text);
+    expect(sendMessageMock).not.toHaveBeenCalled();
+  });
+
   it('should get into the catch block if the sendMessage throws an error', async () => {
     const sendMessageMock = jest.fn();
     sendMessageMock.mockRejectedValue(new Error('Error sending message'));

package/src/contexts/messageInputContext/__tests__/useIsCommandDisabled.test.tsx

@@ -0,0 +1,110 @@
+import { act, cleanup, renderHook } from '@testing-library/react-native';
+import type { CommandSuggestion, MessageComposerState } from 'stream-chat';
+
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { useIsCommandDisabled } from '../hooks/useIsCommandDisabled';
+import { useMessageComposer } from '../hooks/useMessageComposer';
+
+jest.mock('../hooks/useMessageComposer', () => ({
+  useMessageComposer: jest.fn(),
+}));
+
+type TestMessageComposerStateStore = {
+  getLatestValue: () => MessageComposerState;
+  partialNext: (nextValue: Partial<MessageComposerState>) => void;
+  subscribeWithSelector: (
+    selector: (state: MessageComposerState) => Record<string, unknown>,
+    onStoreChange: () => void,
+  ) => () => void;
+};
+
+const createMessageComposerState = (): TestMessageComposerStateStore => {
+  let value: MessageComposerState = {
+    draftId: null,
+    editedMessage: null,
+    id: 'composer-id',
+    pollId: null,
+    quotedMessage: null,
+    showReplyInChannel: false,
+  };
+  const subscribers = new Set<() => void>();
+
+  return {
+    getLatestValue: () => value,
+    partialNext: (nextValue) => {
+      value = { ...value, ...nextValue };
+      subscribers.forEach((subscriber) => subscriber());
+    },
+    subscribeWithSelector: (_selector, onStoreChange) => {
+      subscribers.add(onStoreChange);
+      return () => {
+        subscribers.delete(onStoreChange);
+      };
+    },
+  };
+};
+
+const command = {
+  id: 'ban',
+  name: 'ban',
+  set: 'moderation_set',
+} as CommandSuggestion;
+
+describe('useIsCommandDisabled', () => {
+  const mockUseMessageComposer = useMessageComposer as jest.MockedFunction<
+    typeof useMessageComposer
+  >;
+
+  afterEach(() => {
+    jest.resetAllMocks();
+    cleanup();
+  });
+
+  it('recalculates when quoted message existence changes', () => {
+    const state = createMessageComposerState();
+    const messageComposer = {
+      isCommandDisabled: jest.fn(() => !!state.getLatestValue().quotedMessage),
+      state,
+    } as unknown as ReturnType<typeof useMessageComposer>;
+
+    mockUseMessageComposer.mockReturnValue(messageComposer);
+
+    const { result } = renderHook(() => useIsCommandDisabled(command));
+
+    expect(result.current).toBe(false);
+    expect(messageComposer.isCommandDisabled).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      state.partialNext({ quotedMessage: generateMessage({ id: 'quoted-message' }) });
+    });
+
+    expect(result.current).toBe(true);
+    expect(messageComposer.isCommandDisabled).toHaveBeenCalledTimes(2);
+  });
+
+  it('does not recalculate when quoted message changes but existence does not', () => {
+    const state = createMessageComposerState();
+    const messageComposer = {
+      isCommandDisabled: jest.fn(() => !!state.getLatestValue().quotedMessage),
+      state,
+    } as unknown as ReturnType<typeof useMessageComposer>;
+
+    mockUseMessageComposer.mockReturnValue(messageComposer);
+
+    const { result } = renderHook(() => useIsCommandDisabled(command));
+
+    act(() => {
+      state.partialNext({ quotedMessage: generateMessage({ id: 'first-quoted-message' }) });
+    });
+
+    expect(result.current).toBe(true);
+    expect(messageComposer.isCommandDisabled).toHaveBeenCalledTimes(2);
+
+    act(() => {
+      state.partialNext({ quotedMessage: generateMessage({ id: 'second-quoted-message' }) });
+    });
+
+    expect(result.current).toBe(true);
+    expect(messageComposer.isCommandDisabled).toHaveBeenCalledTimes(2);
+  });
+});