diff --git a/package/src/components/Channel/Channel.tsx b/package/src/components/Channel/Channel.tsx index c29f1862b..03ac712ba 100644 --- a/package/src/components/Channel/Channel.tsx +++ b/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>; + } & 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, }); diff --git a/package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts b/package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts index 2669d859b..949e8cf85 100644 --- a/package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts +++ b/package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts @@ -64,6 +64,7 @@ export const useCreateInputMessageInputContext = < showPollCreationDialog, ShowThreadMessageInChannelButton, StartAudioRecordingButton, + StopMessageStreamingButton, UploadProgressIndicator, }: InputMessageInputContextValue & { /** @@ -133,6 +134,7 @@ export const useCreateInputMessageInputContext = < showPollCreationDialog, ShowThreadMessageInChannelButton, StartAudioRecordingButton, + StopMessageStreamingButton, UploadProgressIndicator, }), // eslint-disable-next-line react-hooks/exhaustive-deps diff --git a/package/src/components/MessageInput/MessageInput.tsx b/package/src/components/MessageInput/MessageInput.tsx index af67d21d4..353504e79 100644 --- a/package/src/components/MessageInput/MessageInput.tsx +++ b/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, '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, diff --git a/package/src/components/index.ts b/package/src/components/index.ts index 4a719dd4c..82d6d19e8 100644 --- a/package/src/components/index.ts +++ b/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'; diff --git a/package/src/contexts/messageInputContext/MessageInputContext.tsx b/package/src/contexts/messageInputContext/MessageInputContext.tsx index 396884376..690537a9d 100644 --- a/package/src/contexts/messageInputContext/MessageInputContext.tsx +++ b/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>; + StopMessageStreamingButton: React.ComponentType; /** * 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 (