tweak cursor to appear at the end of the same line of the streaming response

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 && (
+          </div>
-              <span className="ml-1 inline-block h-4 w-0.5 animate-pulse bg-foreground align-middle" />
-            )}
-          </>
         )}
       </div>
       <div className="flex items-center gap-0.5">

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",