v1.1.2: Fix animation completing prematurely on stream end

The 500ms safety-valve timeout was force-finalizing the message swap
before the character animation could finish, causing the same jarring
scroll jump. Replaced with an isCompleting state flag so AnimatedText
only triggers the swap when both the completion event has arrived AND
the animation has fully caught up.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: ILindsley

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "bt-servant-web-client",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "private": true,
   "scripts": {
     "dev": "next dev",

package.json

@@ -135,7 +135,7 @@ export default function LoginPage() {
 
             {/* Footer */}
             <p className="mt-3 text-center font-sans text-[10px] text-[#8a8985] dark:text-[#6b6a68]">
-              BT Servant Web v1.1.1
+              BT Servant Web v1.1.2
             </p>
           </div>
         </div>

src/app/(auth)/login/page.tsx

@@ -113,7 +113,7 @@ export const Thread: FC = () => {
           />
           <Composer />
           <p className="mt-2 text-center font-sans text-xs text-[#9a9893]">
-            BT Servant Web v1.1.1
+            BT Servant Web v1.1.2
           </p>
         </div>
       </AssistantIf>
@@ -196,7 +196,7 @@ const ThreadWelcome: FC = () => {
       {/* Footer */}
       <div className="shrink-0 pb-4">
         <p className="text-center font-sans text-xs text-[#9a9893]">
-          BT Servant Web v1.1.1
+          BT Servant Web v1.1.2
         </p>
       </div>
     </div>
@@ -300,14 +300,10 @@ const UserMessage: FC = () => {
 };
 
 // Animated text hook for streaming - handles character-by-character reveal
-function useAnimatedText(text: string, onComplete?: () => void): string {
+function useAnimatedText(text: string): [string, boolean] {
   const [displayedLength, setDisplayedLength] = useState(text.length);
   // Track previous text to detect resets
   const [prevText, setPrevText] = useState(text);
-  const onCompleteRef = useRef(onComplete);
-  useEffect(() => {
-    onCompleteRef.current = onComplete;
-  }, [onComplete]);
 
   // Detect text reset and update state together
   if (text !== prevText) {
@@ -333,27 +329,42 @@ function useAnimatedText(text: string, onComplete?: () => void): string {
     }
   }, [text.length, displayedLength]);
 
-  // Fire onComplete when animation catches up to the full text
+  const isAnimationDone = displayedLength >= text.length;
+  return [
+    text.slice(0, Math.min(displayedLength, text.length)),
+    isAnimationDone,
+  ];
+}
+
+// Animated text component for streaming
+const AnimatedText: FC<{
+  text: string;
+  isCompleting: boolean;
+  onAnimationCaughtUp: () => void;
+}> = ({ text, isCompleting, onAnimationCaughtUp }) => {
+  const [displayedText, isAnimationDone] = useAnimatedText(text);
+  const calledRef = useRef(false);
+
+  // Reset the called flag when isCompleting transitions to true
   useEffect(() => {
-    if (displayedLength >= text.length && text.length > 0) {
-      onCompleteRef.current?.();
+    if (isCompleting) {
+      calledRef.current = false;
     }
-  }, [displayedLength, text.length]);
+  }, [isCompleting]);
 
-  return text.slice(0, Math.min(displayedLength, text.length));
-}
+  // Fire callback when completing AND animation has caught up
+  useEffect(() => {
+    if (isCompleting && isAnimationDone && !calledRef.current) {
+      calledRef.current = true;
+      onAnimationCaughtUp();
+    }
+  }, [isCompleting, isAnimationDone, onAnimationCaughtUp]);
 
-// Animated text component for streaming
-const AnimatedText: FC<{ text: string; onComplete?: () => void }> = ({
-  text,
-  onComplete,
-}) => {
-  const displayedText = useAnimatedText(text, onComplete);
   return <span className="whitespace-pre-wrap">{displayedText}</span>;
 };
 
 const AssistantMessage: FC = () => {
-  const { finalizeComplete } = useChatContext();
+  const { finalizeComplete, isCompleting } = useChatContext();
   const audioBase64 = useAssistantState(
     ({ message }) => message.metadata?.custom?.audioBase64 as string | undefined
   );
@@ -366,7 +377,7 @@ const AssistantMessage: FC = () => {
     return firstPart?.type === "text" ? firstPart.text : "";
   });
 
-  const handleAnimationComplete = useCallback(() => {
+  const handleAnimationCaughtUp = useCallback(() => {
     finalizeComplete();
   }, [finalizeComplete]);
 
@@ -377,7 +388,8 @@ const AssistantMessage: FC = () => {
         {isStreaming ? (
           <AnimatedText
             text={messageText}
-            onComplete={handleAnimationComplete}
+            isCompleting={isCompleting}
+            onAnimationCaughtUp={handleAnimationCaughtUp}
           />
         ) : (
           <MessagePrimitive.Parts components={{ Text: MarkdownText }} />

src/components/assistant-ui/thread.tsx

@@ -14,6 +14,7 @@ interface ChatContextValue {
   statusMessage: string | null;
   streamingText: string;
   finalizeComplete: () => void;
+  isCompleting: boolean;
 }
 
 const ChatContext = createContext<ChatContextValue | null>(null);
@@ -33,6 +34,7 @@ export function AssistantProvider({ children }: { children: ReactNode }) {
     statusMessage,
     streamingText,
     finalizeComplete,
+    isCompleting,
   } = useChatRuntime();
 
   return (
@@ -43,6 +45,7 @@ export function AssistantProvider({ children }: { children: ReactNode }) {
         statusMessage,
         streamingText,
         finalizeComplete,
+        isCompleting,
       }}
     >
       <AssistantRuntimeProvider runtime={runtime}>

src/components/providers/assistant-provider.tsx

@@ -71,6 +71,7 @@ export function useChatRuntime() {
   const [streamingText, setStreamingText] = useState<string>("");
   const historyLoadedRef = useRef(false);
   const pendingCompleteRef = useRef<{ message: ChatMessage } | null>(null);
+  const [isCompleting, setIsCompleting] = useState(false);
   const streamingTextRef = useRef(streamingText);
   useEffect(() => {
     streamingTextRef.current = streamingText;
@@ -131,26 +132,13 @@ export function useChatRuntime() {
     if (!pending) return;
 
     pendingCompleteRef.current = null;
+    setIsCompleting(false);
     setMessages((prev) => [...prev, pending.message]);
     setIsLoading(false);
     setStatusMessage(null);
     setStreamingText("");
   }, []);
 
-  // Safety valve: if animation callback never fires (e.g. component unmount),
-  // force-finalize after a short delay to prevent stuck state
-  useEffect(() => {
-    if (!pendingCompleteRef.current) return;
-
-    const timeout = setTimeout(() => {
-      if (pendingCompleteRef.current) {
-        finalizeComplete();
-      }
-    }, 500);
-
-    return () => clearTimeout(timeout);
-  }, [streamingText, finalizeComplete]);
-
   // Define handlers before sendMessage so they can be in the dependency array
   const handleComplete = useCallback((data: ChatResponse) => {
     const joinedResponse = data.responses.join("\n\n");
@@ -175,12 +163,14 @@ export function useChatRuntime() {
 
     // Defer swap: store pending data and set full text so animation finishes
     pendingCompleteRef.current = { message: assistantMessage };
+    setIsCompleting(true);
     setStreamingText(joinedResponse);
     setStatusMessage(null);
   }, []);
 
   const handleError = useCallback((errorMessage: string) => {
     pendingCompleteRef.current = null;
+    setIsCompleting(false);
     setMessages((prev) => [
       ...prev,
       createMessage(`error-${Date.now()}`, "assistant", errorMessage),
@@ -196,6 +186,7 @@ export function useChatRuntime() {
       if (pendingCompleteRef.current) {
         const pending = pendingCompleteRef.current;
         pendingCompleteRef.current = null;
+        setIsCompleting(false);
         setMessages((prev) => [...prev, pending.message]);
       }
 
@@ -312,5 +303,6 @@ export function useChatRuntime() {
     sendMessage,
     clearMessages: () => setMessages([]),
     finalizeComplete,
+    isCompleting,
   };
 }