fix: stop ai generation button PR remarks

Author: isekovanic

src/components/Channel/Channel.tsx

@@ -161,6 +161,7 @@ type ChannelPropsForwardedToComponentContext<
   | 'UnreadMessagesNotification'
   | 'UnreadMessagesSeparator'
   | 'VirtualMessage'
+  | 'StopAIGenerationButton'
 >;
 
 const isUserResponseArray = <
@@ -1273,6 +1274,7 @@ const ChannelInner = <
       ReactionsList: props.ReactionsList,
       SendButton: props.SendButton,
       StartRecordingAudioButton: props.StartRecordingAudioButton,
+      StopAIGenerationButton: props.StopAIGenerationButton,
       ThreadHead: props.ThreadHead,
       ThreadHeader: props.ThreadHeader,
       ThreadStart: props.ThreadStart,
@@ -1339,6 +1341,7 @@ const ChannelInner = <
       props.UnreadMessagesNotification,
       props.UnreadMessagesSeparator,
       props.VirtualMessage,
+      props.StopAIGenerationButton,
       props.emojiSearchIndex,
       props.reactionOptions,
     ],

src/components/MessageInput/MessageInputFlat.tsx

@@ -9,7 +9,7 @@ import {
 import { AttachmentPreviewList as DefaultAttachmentPreviewList } from './AttachmentPreviewList';
 import { CooldownTimer as DefaultCooldownTimer } from './CooldownTimer';
 import { SendButton as DefaultSendButton } from './SendButton';
-import { StopGeneratingButton as DefaultStopGeneratingButton } from './StopGeneratingButton';
+import { StopAIGenerationButton as DefaultStopAIGenerationButton } from './StopAIGenerationButton';
 import {
   AudioRecorder as DefaultAudioRecorder,
   RecordingPermissionDeniedNotification as DefaultRecordingPermissionDeniedNotification,
@@ -68,9 +68,13 @@ export const MessageInputFlat = <
     RecordingPermissionDeniedNotification = DefaultRecordingPermissionDeniedNotification,
     SendButton = DefaultSendButton,
     StartRecordingAudioButton = DefaultStartRecordingAudioButton,
-    StopGeneratingButton = DefaultStopGeneratingButton,
+    StopAIGenerationButton: StopAIGenerationButtonOverride,
     EmojiPicker,
   } = useComponentContext<StreamChatGenerics>('MessageInputFlat');
+  const StopAIGenerationButton =
+    StopAIGenerationButtonOverride === undefined
+      ? DefaultStopAIGenerationButton
+      : StopAIGenerationButtonOverride;
   const {
     acceptedFiles = [],
     multipleUploads,
@@ -142,7 +146,8 @@ export const MessageInputFlat = <
   const recordingEnabled = !!(recordingController.recorder && navigator.mediaDevices); // account for requirement on iOS as per this bug report: https://bugs.webkit.org/show_bug.cgi?id=252303
   const isRecording = !!recordingController.recordingState;
 
-  const shouldDisplayStopAIGeneration = [AIStates.Thinking, AIStates.Generating].includes(aiState);
+  const shouldDisplayStopAIGeneration =
+    [AIStates.Thinking, AIStates.Generating].includes(aiState) && !!StopAIGenerationButton;
 
   return (
     <>
@@ -186,7 +191,7 @@ export const MessageInputFlat = <
             </div>
           </div>
           {shouldDisplayStopAIGeneration ? (
-            <StopGeneratingButton onClick={stopGenerating} />
+            <StopAIGenerationButton onClick={stopGenerating} />
           ) : (
             !hideSendButton && (
               <>

src/components/MessageInput/StopAIGenerationButton.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export type StopAIGenerationButtonProps = React.ComponentProps<'button'>;
+
+export const StopAIGenerationButton = ({ onClick, ...restProps }: StopAIGenerationButtonProps) => (
+  <button
+    aria-label='aria/Stop'
+    className='str-chat__stop-generating-button'
+    data-testid='stop-ai-generation-button'
+    onClick={onClick}
+    {...restProps}
+  />
+);

src/components/MessageInput/StopGeneratingButton.tsx

@@ -54,7 +54,7 @@ import type {
   PropsWithChildrenOnly,
   UnknownType,
 } from '../types/types';
-import { StopGeneratingButtonProps } from '../components/MessageInput/StopGeneratingButton';
+import type { StopAIGenerationButtonProps } from '../components/MessageInput/StopAIGenerationButton';
 
 export type ComponentContextValue<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -165,7 +165,7 @@ export type ComponentContextValue<
   SendButton?: React.ComponentType<SendButtonProps<StreamChatGenerics>>;
   /** Custom UI component button for initiating audio recording, defaults to and accepts same props as: [StartRecordingAudioButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MediaRecorder/AudioRecorder/AudioRecordingButtons.tsx) */
   StartRecordingAudioButton?: React.ComponentType<StartRecordingAudioButtonProps>;
-  StopGeneratingButton?: React.ComponentType<StopGeneratingButtonProps>;
+  StopAIGenerationButton?: React.ComponentType<StopAIGenerationButtonProps> | null;
   /** Custom UI component that displays thread's parent or other message at the top of the `MessageList`, defaults to and accepts same props as [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) */
   ThreadHead?: React.ComponentType<MessageProps<StreamChatGenerics>>;
   /** Custom UI component to display the header of a `Thread`, defaults to and accepts same props as: [DefaultThreadHeader](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/Thread.tsx) */