Fix animation hook to support dynamic default chat name

Author: ravikiranvm

packages/react-ui/src/app/features/ai/assistant/assistant-ui-chat.tsx

@@ -91,6 +91,8 @@ const AssistantUiChat = ({
     return title;
   }, [chatId, chats, title]);
 
+  const isTitleDefault = currentChatTitle === title;
+
   const onChatSelected = useCallback(
     (id: string) => {
       onChatIdChange(id);
@@ -139,7 +141,7 @@ const AssistantUiChat = ({
         runtime={runtime}
         onNewChat={onNewChatClick}
         title={currentChatTitle}
-        defaultTitle={title}
+        isTitleDefault={isTitleDefault}
         availableModels={availableModels}
         onModelSelected={onModelSelected}
         isModelSelectorLoading={isModelSelectorLoading}

packages/ui-components/src/components/assistant-ui/assistant-top-bar.tsx

@@ -11,7 +11,7 @@ type AssistantTopBarProps = {
   onClose: () => void;
   onNewChat: () => void;
   title?: string;
-  defaultTitle?: string;
+  isTitleDefault?: boolean;
   onHistoryOpenChange?: (open: boolean) => void;
   isHistoryOpen?: boolean;
   historyContent?: ReactNode;
@@ -28,15 +28,14 @@ const AssistantTopBar = ({
   historyContent,
   children,
   chatId,
-  defaultTitle,
+  isTitleDefault,
 }: AssistantTopBarProps) => {
-  const baseTitle = defaultTitle ?? t('OpenOps Assistant');
+  const baseTitle = t('OpenOps Assistant');
   const animatedTitle = useTypingAnimation({
     text: title || baseTitle,
     speed: 50,
-    fromText: baseTitle,
-    defaultText: baseTitle,
     chatId: chatId,
+    isDefault: isTitleDefault,
   });
 
   return (

packages/ui-components/src/components/assistant-ui/assistant-ui-chat-container.tsx

@@ -14,6 +14,7 @@ type AssistantUiChatContainerProps = {
   runtime: AssistantRuntime;
   toolComponents?: Record<string, ReactNode>;
   handleInject?: (codeContent: string | SourceCode) => void;
+  isTitleDefault?: boolean;
 } & ConnectionStatusProps &
   AssistantTopBarProps &
   ThreadProps;
@@ -36,7 +37,7 @@ const AssistantUiChatContainer = ({
   isShowingSlowWarning,
   connectionError,
   chatId,
-  defaultTitle,
+  isTitleDefault,
 }: AssistantUiChatContainerProps) => {
   const codeVariation = useMemo(() => {
     return handleInject
@@ -54,7 +55,7 @@ const AssistantUiChatContainer = ({
         isHistoryOpen={isHistoryOpen}
         historyContent={children}
         chatId={chatId}
-        defaultTitle={defaultTitle}
+        isTitleDefault={isTitleDefault}
       >
         {null}
       </AssistantTopBar>

packages/ui-components/src/hooks/use-typing-animation.ts

@@ -3,62 +3,46 @@ import { useEffect, useRef, useState } from 'react';
 type UseTypingAnimationOptions = {
   text: string;
   speed?: number;
-  fromText?: string;
   chatId?: string | null;
-  defaultText?: string;
+  isDefault?: boolean;
 };
 
 export function useTypingAnimation({
   text,
   speed = 50,
-  fromText,
   chatId,
-  defaultText,
+  isDefault,
 }: UseTypingAnimationOptions): string {
   const [displayedText, setDisplayedText] = useState(text);
-  const prevTextRef = useRef(text);
-  const prevChatIdRef = useRef<string | null | undefined>(chatId);
+  const prevChatIdRef = useRef(chatId);
+  const prevIsDefaultRef = useRef(isDefault);
 
   useEffect(() => {
-    let shouldAnimate = false;
-    let interval: NodeJS.Timeout | undefined;
-
-    if (fromText !== undefined && defaultText !== undefined) {
-      const isSameChat = prevChatIdRef.current === chatId;
-      const wasDefault =
-        prevTextRef.current === defaultText || prevTextRef.current === fromText;
-      const nowHasName = text !== defaultText && text !== fromText;
-
-      shouldAnimate = isSameChat && wasDefault && nowHasName;
-    } else if (fromText !== undefined) {
-      shouldAnimate = prevTextRef.current === fromText && text !== fromText;
-    }
+    const shouldAnimate =
+      prevChatIdRef.current === chatId &&
+      prevIsDefaultRef.current === true &&
+      isDefault === false;
 
     if (shouldAnimate && text.length > 0) {
       setDisplayedText('');
       let currentIndex = 0;
-
-      interval = setInterval(() => {
+      const interval = setInterval(() => {
         if (currentIndex < text.length) {
           setDisplayedText(text.slice(0, currentIndex + 1));
           currentIndex++;
         } else {
           clearInterval(interval);
         }
       }, speed);
+
+      return () => clearInterval(interval);
     } else {
       setDisplayedText(text);
     }
 
-    prevTextRef.current = text;
     prevChatIdRef.current = chatId;
-
-    return () => {
-      if (interval) {
-        clearInterval(interval);
-      }
-    };
-  }, [text, speed, fromText, chatId, defaultText]);
+    prevIsDefaultRef.current = isDefault;
+  }, [text, speed, chatId, isDefault]);
 
   return displayedText;
 }