feat: make send message button react to ai state

Author: isekovanic

package/src/components/AITypingIndicatorView/AITypingIndicatorView.tsx

@@ -19,10 +19,13 @@ export const AITypingIndicatorView = <
   const { channel: channelFromContext } = useChannelContext();
   const channel = channelFromProps || channelFromContext;
   const { aiState } = useAIState(channel);
+  // TODO: Translations
   const allowedStates = {
     [AIStates.Thinking]: 'Thinking...',
     [AIStates.Generating]: 'Generating...',
   };
+
+  // TODO: Make it not ugly.
   return aiState in allowedStates ? (
     <View style={{ paddingHorizontal: 16, paddingVertical: 18 }}>
       <Text>{allowedStates[aiState]}</Text>

package/src/components/MessageInput/SendButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { Pressable } from 'react-native';
 
@@ -12,34 +12,41 @@ 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 } = props;
+  const { disabled = false, giphyActive, sendMessage, aiState, stopGenerating } = 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 : () => sendMessage()}
+      onPress={disabled ? () => null : shouldDisplayStopAIGeneration ? () => stopGenerating() : () => sendMessage()}
       style={[sendButton]}
       testID='send-button'
     >
-      {giphyActive ? (
+      {giphyActive || shouldDisplayStopAIGeneration ? ( // TODO: Fix the icon please.
         <Search pathFill={disabled ? grey_gainsboro : accent_blue} {...searchIcon} />
       ) : disabled ? (
         <SendRight fill={grey_gainsboro} size={32} {...sendRightIcon} />
@@ -58,11 +65,13 @@ 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;
@@ -74,6 +83,9 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const sendMessageEqual = prevSendMessage === nextSendMessage;
   if (!sendMessageEqual) return false;
 
+  const aiStateEqual = prevAiState === nextAiState;
+  if (!aiStateEqual) return false;
+
   return true;
 };
 
@@ -95,12 +107,18 @@ 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}
     />
   );
 };