Style improvements

Author: matt-aitken

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

@@ -2,8 +2,16 @@ import { AnimatePresence, motion } from "framer-motion";
 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 })));
+// Lazy load streamdown components to avoid SSR issues
+const StreamdownRenderer = lazy(() =>
+  import("streamdown").then((mod) => ({
+    default: ({ children, isAnimating }: { children: string; isAnimating: boolean }) => (
+      <mod.ShikiThemeContext.Provider value={["one-dark-pro", "one-dark-pro"]}>
+        <mod.Streamdown isAnimating={isAnimating}>{children}</mod.Streamdown>
+      </mod.ShikiThemeContext.Provider>
+    ),
+  }))
+);
 import { Button } from "~/components/primitives/Buttons";
 import { Spinner } from "~/components/primitives/Spinner";
 import { useEnvironment } from "~/hooks/useEnvironment";
@@ -137,7 +145,7 @@ export function AIQueryInput({ onQueryGenerated, autoSubmitPrompt }: AIQueryInpu
           setThinking((prev) => prev + event.content);
           break;
         case "tool_call":
-          setThinking((prev) => prev + `\n[Validating query...]\n`);
+          setThinking((prev) => prev + `\nValidating query...\n`);
           break;
         case "tool_result":
           // Optionally show validation result
@@ -319,9 +327,9 @@ export function AIQueryInput({ onQueryGenerated, autoSubmitPrompt }: AIQueryInpu
                   </Button>
                 )}
               </div>
-              <div className="streamdown-container max-h-48 overflow-y-auto text-xs text-text-dimmed scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+              <div className="streamdown-container max-h-96 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>
+                  <StreamdownRenderer isAnimating={isLoading}>{thinking}</StreamdownRenderer>
                 </Suspense>
               </div>
             </div>

apps/webapp/app/tailwind.css

@@ -109,6 +109,12 @@
 
 /* Streamdown markdown styling */
 .streamdown-container {
+  /* Streamdown uses shadcn/ui CSS variables - define them for our theme */
+  --muted: 220 13% 20%;
+  --muted-foreground: 215 14% 60%;
+  --foreground: 210 20% 90%;
+  --border: 217 19% 27%;
+
   & p {
     @apply my-1;
   }
@@ -136,15 +142,10 @@
   & li {
     @apply my-0.5;
   }
-  & code {
+  /* Inline code (not in pre blocks) */
+  & code:not(pre 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;
   }
@@ -169,4 +170,29 @@
   & th {
     @apply bg-charcoal-700 font-semibold;
   }
+
+  /* Streamdown code block container */
+  & [data-code-block-container] {
+    @apply my-2 border-charcoal-700;
+  }
+  & [data-code-block-header] {
+    @apply bg-charcoal-800 text-text-dimmed border-b border-charcoal-700;
+  }
+  /* Hide light mode code block, show dark mode */
+  & [data-code-block].dark\:hidden {
+    display: none !important;
+  }
+  & [data-code-block].hidden.dark\:block {
+    display: block !important;
+  }
+  /* Override the bg-muted/40 class to let inline styles work */
+  & [data-code-block] pre {
+    background-color: inherit !important;
+  }
+  & [data-code-block] pre code {
+    @apply bg-transparent;
+  }
+  & [data-code-block] .line {
+    @apply leading-relaxed;
+  }
 }