fix(ai): stop typewriter animation on ai_indicator.stop (#2918)

### 🎯 Goal

Add `AI_STATE_STOP` and adjust typewriter animation so that it stops
when `ai_indicator.stop` event arrives.

This change should be probably ported to the AI SDK too.

Author: arnautov-anton

src/components/AIStateIndicator/hooks/useAIState.ts

@@ -6,6 +6,7 @@ export const AIStates = {
   ExternalSources: 'AI_STATE_EXTERNAL_SOURCES',
   Generating: 'AI_STATE_GENERATING',
   Idle: 'AI_STATE_IDLE',
+  Stop: 'AI_STATE_STOP',
   Thinking: 'AI_STATE_THINKING',
 };
 
@@ -37,9 +38,17 @@ export const useAIState = (channel?: Channel): { aiState: AIState } => {
       }
     });
 
+    const indicatorStoppedListener = channel.on('ai_indicator.stop', (event) => {
+      const { cid } = event;
+      if (channel.cid === cid) {
+        setAiState(AIStates.Stop);
+      }
+    });
+
     return () => {
       indicatorChangedListener.unsubscribe();
       indicatorClearedListener.unsubscribe();
+      indicatorStoppedListener.unsubscribe();
     };
   }, [channel]);
 

src/components/Message/StreamedMessageText.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import type { MessageTextProps } from './MessageText';
 import { MessageText } from './MessageText';
 
-import { useMessageContext } from '../../context';
+import { useChannelStateContext, useMessageContext } from '../../context';
 import { useMessageTextStreaming } from './hooks';
 
 export type StreamedMessageTextProps = Pick<
@@ -22,14 +22,21 @@ export const StreamedMessageText = (props: StreamedMessageTextProps) => {
     streamingLetterIntervalMs,
   } = props;
   const { message: messageFromContext } = useMessageContext('StreamedMessageText');
+  const { channel } = useChannelStateContext();
   const message = messageFromProps || messageFromContext;
   const { text = '' } = message;
-  const { streamedMessageText } = useMessageTextStreaming({
+  const { skipAnimation, streamedMessageText } = useMessageTextStreaming({
     renderingLetterCount,
     streamingLetterIntervalMs,
     text,
   });
 
+  useEffect(() => {
+    channel?.on('ai_indicator.stop', () => {
+      skipAnimation();
+    });
+  }, [channel, skipAnimation]);
+
   return (
     <MessageText
       message={{ ...message, text: streamedMessageText }}

src/components/Message/hooks/useMessageTextStreaming.ts

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 
+import { useStableCallback } from '../../../utils/useStableCallback';
 import type { StreamedMessageTextProps } from '../StreamedMessageText';
 
 export type UseMessageTextStreamingProps = Pick<
@@ -22,15 +23,17 @@ export const useMessageTextStreaming = ({
   renderingLetterCount = DEFAULT_RENDERING_LETTER_COUNT,
   streamingLetterIntervalMs = DEFAULT_LETTER_INTERVAL,
   text,
-}: UseMessageTextStreamingProps): { streamedMessageText: string } => {
+}: UseMessageTextStreamingProps) => {
   const [streamedMessageText, setStreamedMessageText] = useState<string>(text);
   const textCursor = useRef<number>(text.length);
 
   useEffect(() => {
     const textLength = text.length;
+
     const interval = setInterval(() => {
       if (!text || textCursor.current >= textLength) {
         clearInterval(interval);
+        return;
       }
       const newCursorValue = textCursor.current + renderingLetterCount;
       const newText = text.substring(0, newCursorValue);
@@ -43,5 +46,10 @@ export const useMessageTextStreaming = ({
     };
   }, [streamingLetterIntervalMs, renderingLetterCount, text]);
 
-  return { streamedMessageText };
+  const skipAnimation = useStableCallback(() => {
+    textCursor.current = text.length;
+    setStreamedMessageText(text);
+  });
+
+  return { skipAnimation, streamedMessageText } as const;
 };