From cfa5354c50faae15401a16b7a6b26a9c9f1fffa6 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 9 Apr 2026 09:06:09 -0500
Subject: [PATCH] tweak cursor to appear at the end of the same line of the
 streaming response

---
 web/src/components/chat/ChatMessage.tsx | 13 ++++++++-----
 web/tailwind.config.cjs                 |  5 +++++
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/web/src/components/chat/ChatMessage.tsx b/web/src/components/chat/ChatMessage.tsx
index 385693f538..c5f92b5f46 100644
--- a/web/src/components/chat/ChatMessage.tsx
+++ b/web/src/components/chat/ChatMessage.tsx
@@ -153,7 +153,13 @@ export function MessageBubble({
             <div className="whitespace-pre-wrap">{displayContent}</div>
           </div>
         ) : (
-          <>
+          <div
+            className={cn(
+              "[&>*:last-child]:inline",
+              !isComplete &&
+                "after:ml-0.5 after:inline-block after:h-4 after:w-2 after:animate-cursor-blink after:rounded-sm after:bg-foreground after:align-middle after:content-['']",
+            )}
+          >
             <ReactMarkdown
               remarkPlugins={[remarkGfm]}
               components={{
@@ -179,10 +185,7 @@ export function MessageBubble({
             >
               {content}
             </ReactMarkdown>
-            {!isComplete && (
-              <span className="ml-1 inline-block h-4 w-0.5 animate-pulse bg-foreground align-middle" />
-            )}
-          </>
+          </div>
         )}
       </div>
       <div className="flex items-center gap-0.5">
diff --git a/web/tailwind.config.cjs b/web/tailwind.config.cjs
index cfd738d6ef..435b6cb1a9 100644
--- a/web/tailwind.config.cjs
+++ b/web/tailwind.config.cjs
@@ -49,6 +49,7 @@ module.exports = {
         scale4: "scale4 3s ease-in-out infinite",
         "timeline-zoom-in": "timeline-zoom-in 0.3s ease-out",
         "timeline-zoom-out": "timeline-zoom-out 0.3s ease-out",
+        "cursor-blink": "cursor-blink 1s step-end infinite",
       },
       aspectRatio: {
         wide: "32 / 9",
@@ -189,6 +190,10 @@ module.exports = {
           "50%": { transform: "translateY(0%)", opacity: "0.5" },
           "100%": { transform: "translateY(0)", opacity: "1" },
         },
+        "cursor-blink": {
+          "0%, 100%": { opacity: "1" },
+          "50%": { opacity: "0" },
+        },
       },
       screens: {
         xs: "480px",