feat: add stop generating functionality as well

Author: isekovanic

examples/vite/src/App.tsx

@@ -14,7 +14,8 @@ import {
   ThreadList,
   ChatView,
 } from 'stream-chat-react';
-import 'stream-chat-react/css/v2/index.css';
+// import 'stream-chat-react/css/v2/index.css';
+import '@stream-io/stream-chat-css/dist/v2/css/index.css';
 
 const params = (new Proxy(new URLSearchParams(window.location.search), {
   get: (searchParams, property) => searchParams.get(property as string),

src/components/AITypingIndicatorView/hooks/useAIState.ts

@@ -23,11 +23,15 @@ export const AIStates = {
 export const useAIState = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 >(
-  channel: Channel<StreamChatGenerics>,
+  channel?: Channel<StreamChatGenerics>,
 ) => {
   const [aiState, setAiState] = useState<AIStateType>(AIStates.Idle);
 
   useEffect(() => {
+    if (!channel) {
+      return;
+    }
+
     const indicatorChangedListener = channel.on(
       // @ts-ignore
       'ai_indicator_changed',

src/components/MessageInput/MessageInputFlat.tsx

@@ -9,6 +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 {
   AudioRecorder as DefaultAudioRecorder,
   RecordingPermissionDeniedNotification as DefaultRecordingPermissionDeniedNotification,
@@ -32,6 +33,7 @@ import { useMessageInputContext } from '../../context/MessageInputContext';
 import { useComponentContext } from '../../context/ComponentContext';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
+import { AIStates, useAIState } from '../AITypingIndicatorView';
 
 export const MessageInputFlat = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
@@ -66,6 +68,7 @@ export const MessageInputFlat = <
     RecordingPermissionDeniedNotification = DefaultRecordingPermissionDeniedNotification,
     SendButton = DefaultSendButton,
     StartRecordingAudioButton = DefaultStartRecordingAudioButton,
+    StopGeneratingButton = DefaultStopGeneratingButton,
     EmojiPicker,
   } = useComponentContext<StreamChatGenerics>('MessageInputFlat');
   const {
@@ -76,6 +79,13 @@ export const MessageInputFlat = <
   const { setQuotedMessage } = useChannelActionContext('MessageInputFlat');
   const { channel } = useChatContext<StreamChatGenerics>('MessageInputFlat');
 
+  const { aiState } = useAIState(channel);
+
+  // @ts-ignore
+  const stopGenerating = useCallback(() => channel?.sendEvent({ type: 'stop_generating' }), [
+    channel,
+  ]);
+
   const [
     showRecordingPermissionDeniedNotification,
     setShowRecordingPermissionDeniedNotification,
@@ -133,6 +143,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);
+
   return (
     <>
       <div {...getRootProps({ className: 'str-chat__message-input' })}>
@@ -174,41 +186,45 @@ export const MessageInputFlat = <
               {EmojiPicker && <EmojiPicker />}
             </div>
           </div>
-          {!hideSendButton && (
-            <>
-              {cooldownRemaining ? (
-                <CooldownTimer
-                  cooldownInterval={cooldownRemaining}
-                  setCooldownRemaining={setCooldownRemaining}
-                />
-              ) : (
-                <>
-                  <SendButton
-                    disabled={
-                      !numberOfUploads &&
-                      !text.length &&
-                      attachments.length - failedUploadsCount === 0
-                    }
-                    sendMessage={handleSubmit}
+          {shouldDisplayStopAIGeneration ? (
+            <StopGeneratingButton onClick={stopGenerating} />
+          ) : (
+            !hideSendButton && (
+              <>
+                {cooldownRemaining ? (
+                  <CooldownTimer
+                    cooldownInterval={cooldownRemaining}
+                    setCooldownRemaining={setCooldownRemaining}
                   />
-                  {recordingEnabled && (
-                    <StartRecordingAudioButton
+                ) : (
+                  <>
+                    <SendButton
                       disabled={
-                        isRecording ||
-                        (!asyncMessagesMultiSendEnabled &&
-                          attachments.some(
-                            (a) => a.type === RecordingAttachmentType.VOICE_RECORDING,
-                          ))
+                        !numberOfUploads &&
+                        !text.length &&
+                        attachments.length - failedUploadsCount === 0
                       }
-                      onClick={() => {
-                        recordingController.recorder?.start();
-                        setShowRecordingPermissionDeniedNotification(true);
-                      }}
+                      sendMessage={handleSubmit}
                     />
-                  )}
-                </>
-              )}
-            </>
+                    {recordingEnabled && (
+                      <StartRecordingAudioButton
+                        disabled={
+                          isRecording ||
+                          (!asyncMessagesMultiSendEnabled &&
+                            attachments.some(
+                              (a) => a.type === RecordingAttachmentType.VOICE_RECORDING,
+                            ))
+                        }
+                        onClick={() => {
+                          recordingController.recorder?.start();
+                          setShowRecordingPermissionDeniedNotification(true);
+                        }}
+                      />
+                    )}
+                  </>
+                )}
+              </>
+            )
           )}
         </div>
       </div>

src/components/MessageInput/StopGeneratingButton.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export type StopGeneratingButtonProps = {
+  onClick: () => void;
+} & React.ComponentProps<'button'>;
+
+export const StopGeneratingButton = ({ onClick }: StopGeneratingButtonProps) => (
+  <button
+    aria-label='Send'
+    className='str-chat__stop-generating-button'
+    data-testid='send-button'
+    onClick={onClick}
+    type='button'
+  />
+);

src/context/ComponentContext.tsx

@@ -54,6 +54,7 @@ import type {
   PropsWithChildrenOnly,
   UnknownType,
 } from '../types/types';
+import { StopGeneratingButtonProps } from '../components/MessageInput/StopGeneratingButton';
 
 export type ComponentContextValue<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -164,6 +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>;
   /** 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) */