chore: add override for stop streaming button

Author: isekovanic

package/src/components/Channel/Channel.tsx

@@ -162,6 +162,7 @@ import { MoreOptionsButton as MoreOptionsButtonDefault } from '../MessageInput/M
 import { SendButton as SendButtonDefault } from '../MessageInput/SendButton';
 import { SendMessageDisallowedIndicator as SendMessageDisallowedIndicatorDefault } from '../MessageInput/SendMessageDisallowedIndicator';
 import { ShowThreadMessageInChannelButton as ShowThreadMessageInChannelButtonDefault } from '../MessageInput/ShowThreadMessageInChannelButton';
+import { StopMessageStreamingButton as DefaultStopMessageStreamingButton } from '../MessageInput/StopMessageStreamingButton';
 import { UploadProgressIndicator as UploadProgressIndicatorDefault } from '../MessageInput/UploadProgressIndicator';
 import { DateHeader as DateHeaderDefault } from '../MessageList/DateHeader';
 import type { MessageType } from '../MessageList/hooks/useMessageList';
@@ -443,7 +444,12 @@ export type ChannelPropsWithContext<
      * Tells if channel is rendering a thread list
      */
     threadList?: boolean;
-  } & Partial<Pick<InputMessageInputContextValue, 'openPollCreationDialog' | 'CreatePollContent'>>;
+  } & Partial<
+    Pick<
+      InputMessageInputContextValue,
+      'openPollCreationDialog' | 'CreatePollContent' | 'StopMessageStreamingButton'
+    >
+  >;
 
 const ChannelWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -635,6 +641,7 @@ const ChannelWithContext = <
     StartAudioRecordingButton = AudioRecordingButtonDefault,
     stateUpdateThrottleInterval = defaultThrottleInterval,
     StickyHeader = StickyHeaderDefault,
+    StopMessageStreamingButton: StopMessageStreamingButtonOverride,
     StreamingMessageView = DefaultStreamingMessageView,
     supportedReactions = reactionData,
     t,
@@ -652,6 +659,10 @@ const ChannelWithContext = <
   } = props;
 
   const { thread: threadProps, threadInstance } = threadFromProps;
+  const StopMessageStreamingButton =
+    StopMessageStreamingButtonOverride === undefined
+      ? DefaultStopMessageStreamingButton
+      : StopMessageStreamingButtonOverride;
 
   const {
     theme: {
@@ -2254,6 +2265,7 @@ const ChannelWithContext = <
     setQuotedMessageState,
     ShowThreadMessageInChannelButton,
     StartAudioRecordingButton,
+    StopMessageStreamingButton,
     UploadProgressIndicator,
   });
 

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

@@ -64,6 +64,7 @@ export const useCreateInputMessageInputContext = <
   showPollCreationDialog,
   ShowThreadMessageInChannelButton,
   StartAudioRecordingButton,
+  StopMessageStreamingButton,
   UploadProgressIndicator,
 }: InputMessageInputContextValue<StreamChatGenerics> & {
   /**
@@ -133,6 +134,7 @@ export const useCreateInputMessageInputContext = <
       showPollCreationDialog,
       ShowThreadMessageInChannelButton,
       StartAudioRecordingButton,
+      StopMessageStreamingButton,
       UploadProgressIndicator,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/MessageInput/MessageInput.tsx

@@ -28,8 +28,6 @@ import type { UserResponse } from 'stream-chat';
 import { useAudioController } from './hooks/useAudioController';
 import { useCountdown } from './hooks/useCountdown';
 
-import { StopMessageStreamingButton } from './StopMessageStreamingButton';
-
 import { ChatContextValue, useChatContext, useOwnCapabilitiesContext } from '../../contexts';
 import {
   AttachmentPickerContextValue,
@@ -162,6 +160,7 @@ type MessageInputPropsWithContext<
     | 'showPollCreationDialog'
     | 'sendMessage'
     | 'CreatePollContent'
+    | 'StopMessageStreamingButton'
   > &
   Pick<MessagesContextValue<StreamChatGenerics>, 'Reply'> &
   Pick<
@@ -231,6 +230,7 @@ const MessageInputWithContext = <
     showPollCreationDialog,
     ShowThreadMessageInChannelButton,
     StartAudioRecordingButton,
+    StopMessageStreamingButton,
     suggestions,
     text,
     thread,
@@ -734,7 +734,8 @@ const MessageInputWithContext = <
   const { aiState } = useAIState(channel);
 
   const stopGenerating = useCallback(() => channel?.stopAIResponse(), [channel]);
-  const shouldDisplayStopAIGeneration = [AIStates.Thinking, AIStates.Generating].includes(aiState);
+  const shouldDisplayStopAIGeneration =
+    [AIStates.Thinking, AIStates.Generating].includes(aiState) && !!StopMessageStreamingButton;
 
   return (
     <>
@@ -1156,6 +1157,7 @@ export const MessageInput = <
     showPollCreationDialog,
     ShowThreadMessageInChannelButton,
     StartAudioRecordingButton,
+    StopMessageStreamingButton,
     text,
     uploadNewFile,
     uploadNewImage,
@@ -1245,6 +1247,7 @@ export const MessageInput = <
         showPollCreationDialog,
         ShowThreadMessageInChannelButton,
         StartAudioRecordingButton,
+        StopMessageStreamingButton,
         suggestions,
         t,
         text,

package/src/components/index.ts

@@ -134,6 +134,7 @@ export * from './MessageInput/InputButtons';
 export * from './MessageInput/MessageInput';
 export * from './MessageInput/MoreOptionsButton';
 export * from './MessageInput/SendButton';
+export * from './MessageInput/StopMessageStreamingButton';
 export * from './MessageInput/ShowThreadMessageInChannelButton';
 export * from './MessageInput/UploadProgressIndicator';
 

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -29,7 +29,7 @@ import { useMessageDetailsForState } from './hooks/useMessageDetailsForState';
 
 import { isUploadAllowed, MAX_FILE_SIZE_TO_UPLOAD, prettifyFileSize } from './utils/utils';
 
-import { PollContentProps } from '../../components';
+import { PollContentProps, StopMessageStreamingButtonProps } from '../../components';
 import { AudioAttachmentProps } from '../../components/Attachment/AudioAttachment';
 import { parseLinksFromText } from '../../components/Message/MessageSimple/utils/parseLinks';
 import type { AttachButtonProps } from '../../components/MessageInput/AttachButton';
@@ -388,6 +388,7 @@ export type InputMessageInputContextValue<
    * Defaults to and accepts same props as: [AudioRecordingButton](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx)
    */
   StartAudioRecordingButton: React.ComponentType<AudioRecordingButtonProps<StreamChatGenerics>>;
+  StopMessageStreamingButton: React.ComponentType<StopMessageStreamingButtonProps>;
   /**
    * Custom UI component to render upload progress indicator on attachment preview.
    *
@@ -590,7 +591,9 @@ export const MessageInputProvider = <
     editing,
     initialValue,
     openPollCreationDialog: openPollCreationDialogFromContext,
+    StopMessageStreamingButton,
   } = value;
+
   const {
     fileUploads,
     imageUploads,
@@ -1482,6 +1485,7 @@ export const MessageInputProvider = <
     openPollCreationDialog,
     sendMessage, // overriding the originally passed in sendMessage
     showPollCreationDialog,
+    StopMessageStreamingButton,
   });
   return (
     <MessageInputContext.Provider

package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts

@@ -103,6 +103,7 @@ export const useCreateMessageInputContext = <
   showPollCreationDialog,
   ShowThreadMessageInChannelButton,
   StartAudioRecordingButton,
+  StopMessageStreamingButton,
   takeAndUploadImage,
   text,
   thread,
@@ -225,6 +226,7 @@ export const useCreateMessageInputContext = <
       showPollCreationDialog,
       ShowThreadMessageInChannelButton,
       StartAudioRecordingButton,
+      StopMessageStreamingButton,
       takeAndUploadImage,
       text,
       toggleAttachmentPicker,