fix: bug with stop streaming button and types

Author: isekovanic

package/src/components/AITypingIndicatorView/hooks/useAIState.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { Channel } from 'stream-chat';
+import { Channel, Event } from 'stream-chat';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 

package/src/components/MessageInput/MessageInput.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   Modal,
   NativeSyntheticEvent,
@@ -28,6 +28,8 @@ 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,
@@ -58,6 +60,7 @@ import {
 
 import { isImageMediaLibraryAvailable, triggerHaptic } from '../../native';
 import type { Asset, DefaultStreamChatGenerics } from '../../types/types';
+import { AIStates, useAIState } from '../AITypingIndicatorView';
 import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
 import { CreatePoll } from '../Poll/CreatePollContent';
 
@@ -727,6 +730,15 @@ const MessageInputWithContext = <
     })),
   };
 
+  const { channel } = useChannelContext<StreamChatGenerics>();
+  const { aiState } = useAIState(channel);
+
+  const stopGenerating = useCallback(
+    () => channel.sendEvent({ type: 'stop_generating' }),
+    [channel],
+  );
+  const shouldDisplayStopAIGeneration = [AIStates.Thinking, AIStates.Generating].includes(aiState);
+
   return (
     <>
       <View
@@ -832,7 +844,10 @@ const MessageInputWithContext = <
                 </>
               )}
 
-              {isSendingButtonVisible() &&
+              {shouldDisplayStopAIGeneration ? (
+                <StopMessageStreamingButton onPress={stopGenerating} />
+              ) : (
+                isSendingButtonVisible() &&
                 (cooldownRemainingSeconds ? (
                   <CooldownTimer seconds={cooldownRemainingSeconds} />
                 ) : (
@@ -841,7 +856,8 @@ const MessageInputWithContext = <
                       disabled={sending.current || !isValidMessage() || (giphyActive && !isOnline)}
                     />
                   </View>
-                ))}
+                ))
+              )}
               {audioRecordingEnabled && !micLocked && (
                 <GestureDetector gesture={panGestureMic}>
                   <Animated.View

package/src/components/MessageInput/SendButton.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 
 import { Pressable } from 'react-native';
 
@@ -12,41 +12,34 @@ import { SendRight } from '../../icons/SendRight';
 import { SendUp } from '../../icons/SendUp';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { useChannelContext } from '../../contexts';
-import { AIStates, AIStatesEnum, useAIState } from '../AITypingIndicatorView';
-import { EventAPIResponse } from 'stream-chat';
 
 type SendButtonPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<MessageInputContextValue<StreamChatGenerics>, 'giphyActive' | 'sendMessage'> & {
   /** Disables the button */ disabled: boolean;
-  aiState: AIStatesEnum;
-  stopGenerating: () => Promise<EventAPIResponse<StreamChatGenerics>>;
 };
 
 const SendButtonWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: SendButtonPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { disabled = false, giphyActive, sendMessage, aiState, stopGenerating } = props;
+  const { disabled = false, giphyActive, sendMessage } = props;
   const {
     theme: {
       colors: { accent_blue, grey_gainsboro },
       messageInput: { searchIcon, sendButton, sendRightIcon, sendUpIcon },
     },
   } = useTheme();
 
-  const shouldDisplayStopAIGeneration = [AIStates.Thinking, AIStates.Generating].includes(aiState);
-
   return (
     <Pressable
       disabled={disabled}
-      onPress={disabled ? () => null : shouldDisplayStopAIGeneration ? () => stopGenerating() : () => sendMessage()}
+      onPress={disabled ? () => null : () => sendMessage()}
       style={[sendButton]}
       testID='send-button'
     >
-      {giphyActive || shouldDisplayStopAIGeneration ? ( // TODO: Fix the icon please.
+      {giphyActive ? (
         <Search pathFill={disabled ? grey_gainsboro : accent_blue} {...searchIcon} />
       ) : disabled ? (
         <SendRight fill={grey_gainsboro} size={32} {...sendRightIcon} />
@@ -65,13 +58,11 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     disabled: prevDisabled,
     giphyActive: prevGiphyActive,
     sendMessage: prevSendMessage,
-    aiState: prevAiState,
   } = prevProps;
   const {
     disabled: nextDisabled,
     giphyActive: nextGiphyActive,
     sendMessage: nextSendMessage,
-    aiState: nextAiState,
   } = nextProps;
 
   const disabledEqual = prevDisabled === nextDisabled;
@@ -83,9 +74,6 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const sendMessageEqual = prevSendMessage === nextSendMessage;
   if (!sendMessageEqual) return false;
 
-  const aiStateEqual = prevAiState === nextAiState;
-  if (!aiStateEqual) return false;
-
   return true;
 };
 
@@ -107,18 +95,12 @@ export const SendButton = <
   props: SendButtonProps<StreamChatGenerics>,
 ) => {
   const { giphyActive, sendMessage } = useMessageInputContext<StreamChatGenerics>();
-  const { channel } = useChannelContext<StreamChatGenerics>();
-  const { aiState } = useAIState(channel);
-
-  const stopGenerating = useCallback(() => channel.sendEvent({ type: 'stop_generating', cid: channel.cid }), [channel])
 
   return (
     <MemoizedSendButton
       {...{ giphyActive, sendMessage }}
       {...props}
       {...{ disabled: props.disabled || false }}
-      aiState={aiState}
-      stopGenerating={stopGenerating}
     />
   );
 };

package/src/components/MessageInput/StopMessageStreamingButton.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { CircleStop } from '../../icons';
+
+export type StopMessageStreamingButtonProps = {
+  /** Function that opens attachment options bottom sheet */
+  onPress?: () => void;
+};
+
+export const StopMessageStreamingButton = (props: StopMessageStreamingButtonProps) => {
+  const { onPress } = props;
+
+  const {
+    theme: {
+      colors: { accent_blue },
+      messageInput: { stopMessageStreamingButton, stopMessageStreamingIcon },
+    },
+  } = useTheme();
+
+  return (
+    <Pressable
+      hitSlop={{ bottom: 15, left: 15, right: 15, top: 15 }}
+      onPress={onPress}
+      style={[stopMessageStreamingButton]}
+      testID='more-options-button'
+    >
+      <CircleStop fill={accent_blue} size={32} {...stopMessageStreamingIcon} />
+    </Pressable>
+  );
+};
+
+StopMessageStreamingButton.displayName = 'StopMessageStreamingButton{messageInput}';

package/src/contexts/themeContext/utils/theme.ts

@@ -353,6 +353,8 @@ export type Theme = {
       innerContainer: ViewStyle;
       text: TextStyle;
     };
+    stopMessageStreamingButton: ViewStyle;
+    stopMessageStreamingIcon: IconProps;
     suggestions: {
       command: {
         args: TextStyle;
@@ -1079,6 +1081,8 @@ export const defaultTheme: Theme = {
       innerContainer: {},
       text: {},
     },
+    stopMessageStreamingButton: {},
+    stopMessageStreamingIcon: {},
     suggestions: {
       command: {
         args: {},