From ccad616e02681b9618fe0a37cad61af3b0b3a6e7 Mon Sep 17 00:00:00 2001
From: Glen Maddern <glen@glenmaddern.com>
Date: Tue, 24 Jun 2025 20:18:40 +1000
Subject: [PATCH] feat: Add sliding window effect for streaming reasoning text

- Use overflow:hidden + whitespace:nowrap to prevent line breaks
- Apply justify-end flexbox to push content to the right
- New tokens push older ones out to the left edge and hide them
- Creates smooth sliding window effect showing only recent tokens
- Only applies during streaming, keeps normal wrap after completion

This creates a nice visual effect where you can see the latest reasoning
tokens flowing in from right to left as the model thinks.
---
 examples/chat-ui/src/components/ReasoningBlock.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/examples/chat-ui/src/components/ReasoningBlock.tsx b/examples/chat-ui/src/components/ReasoningBlock.tsx
index 7b21fa1..894155a 100644
--- a/examples/chat-ui/src/components/ReasoningBlock.tsx
+++ b/examples/chat-ui/src/components/ReasoningBlock.tsx
@@ -54,11 +54,13 @@ const ReasoningBlock: React.FC<ReasoningBlockProps> = ({
                     
                     {isExpanded ? (
                         // Expanded view: show reasoning content
-                        <div className="whitespace-pre-wrap flex-1">
-                            {reasoning}
-                            {isStreaming && (
-                                <span className="inline-block w-2 h-4 bg-zinc-400 ml-1 animate-pulse"></span>
-                            )}
+                        <div className={`flex-1 ${isStreaming ? "overflow-hidden whitespace-nowrap flex justify-end" : "whitespace-pre-wrap"}`}>
+                            <span className={isStreaming ? "inline-block" : ""}>
+                                {reasoning}
+                                {isStreaming && (
+                                    <span className="inline-block w-2 h-4 bg-zinc-400 ml-1 animate-pulse"></span>
+                                )}
+                            </span>
                         </div>
                     ) : (
                         // Collapsed view: show timing summary