Use streamdown to show the thinking as it happens

Author: matt-aitken

apps/webapp/app/components/code/AIQueryInput.tsx

@@ -1,6 +1,9 @@
 import { AnimatePresence, motion } from "framer-motion";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { Suspense, lazy, useCallback, useEffect, useRef, useState } from "react";
 import { AISparkleIcon } from "~/assets/icons/AISparkleIcon";
+
+// Lazy load streamdown to avoid SSR issues
+const Streamdown = lazy(() => import("streamdown").then((mod) => ({ default: mod.Streamdown })));
 import { Button } from "~/components/primitives/Buttons";
 import { Spinner } from "~/components/primitives/Spinner";
 import { useEnvironment } from "~/hooks/useEnvironment";
@@ -316,10 +319,10 @@ export function AIQueryInput({ onQueryGenerated, autoSubmitPrompt }: AIQueryInpu
                   </Button>
                 )}
               </div>
-              <div className="max-h-48 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
-                <p className="whitespace-pre-wrap text-xs text-text-dimmed">
-                  {thinking.slice(-800)}
-                </p>
+              <div className="streamdown-container max-h-48 overflow-y-auto text-xs text-text-dimmed scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+                <Suspense fallback={<p className="whitespace-pre-wrap">{thinking}</p>}>
+                  <Streamdown isAnimating={isLoading}>{thinking}</Streamdown>
+                </Suspense>
               </div>
             </div>
           </motion.div>

apps/webapp/app/tailwind.css

@@ -106,3 +106,67 @@
     --gradient-angle: 360deg;
   }
 }
+
+/* Streamdown markdown styling */
+.streamdown-container {
+  & p {
+    @apply my-1;
+  }
+  & h1, & h2, & h3, & h4, & h5, & h6 {
+    @apply font-semibold text-text-bright mt-2 mb-1;
+  }
+  & h1 {
+    @apply text-base;
+  }
+  & h2 {
+    @apply text-sm;
+  }
+  & h3, & h4, & h5, & h6 {
+    @apply text-xs;
+  }
+  & ul, & ol {
+    @apply ml-4 my-1;
+  }
+  & ul {
+    @apply list-disc;
+  }
+  & ol {
+    @apply list-decimal;
+  }
+  & li {
+    @apply my-0.5;
+  }
+  & code {
+    @apply bg-charcoal-700 px-1 py-0.5 rounded text-text-bright font-mono;
+  }
+  & pre {
+    @apply bg-charcoal-700 p-2 rounded my-2 overflow-x-auto;
+  }
+  & pre code {
+    @apply bg-transparent p-0;
+  }
+  & blockquote {
+    @apply border-l-2 border-charcoal-600 pl-3 my-2 italic;
+  }
+  & a {
+    @apply text-blue-400 hover:underline;
+  }
+  & strong {
+    @apply font-semibold text-text-bright;
+  }
+  & em {
+    @apply italic;
+  }
+  & hr {
+    @apply my-2 border-charcoal-600;
+  }
+  & table {
+    @apply w-full my-2 border-collapse;
+  }
+  & th, & td {
+    @apply border border-charcoal-600 px-2 py-1 text-left;
+  }
+  & th {
+    @apply bg-charcoal-700 font-semibold;
+  }
+}

apps/webapp/package.json

@@ -56,10 +56,10 @@
     "@heroicons/react": "^2.0.12",
     "@internal/cache": "workspace:*",
     "@internal/redis": "workspace:*",
-    "@internal/tsql": "workspace:*",
     "@internal/run-engine": "workspace:*",
     "@internal/schedule-engine": "workspace:*",
     "@internal/tracing": "workspace:*",
+    "@internal/tsql": "workspace:*",
     "@internal/zod-worker": "workspace:*",
     "@internationalized/date": "^3.5.1",
     "@kapaai/react-sdk": "^0.1.3",
@@ -201,10 +201,11 @@
     "simplur": "^3.0.1",
     "slug": "^6.0.0",
     "socket.io": "4.7.4",
-    "sql-formatter": "^15.4.10",
     "socket.io-adapter": "^2.5.4",
     "sonner": "^1.0.3",
+    "sql-formatter": "^15.4.10",
     "sqs-consumer": "^7.4.0",
+    "streamdown": "^1.4.0",
     "superjson": "^2.2.1",
     "tailwind-merge": "^1.12.0",
     "tailwind-scrollbar-hide": "^1.1.7",
@@ -290,4 +291,4 @@
   "engines": {
     "node": ">=18.19.0 || >=20.6.0"
   }
-}
+}