better chat (#416)

* better chat * fixes * fix
2026-02-11 14:17:53 -06:00
parent ffe29b8a26
commit 66a11aeb4c
9 changed files with 2267 additions and 284 deletions
@@ -26,7 +26,8 @@ When answering questions:
 - Always base your answers on the actual documentation content
 - Be concise and accurate
 - If the docs don't cover a topic, say so honestly
- Do NOT include source references or file paths in your response`;
+- Do NOT include source references or file paths in your response
+- Do NOT use emojis in your responses`;

 async function loadDocsFiles(): Promise<Record<string, string>> {
  const files: Record<string, string> = {};
@@ -1,4 +1,7 @@
@import "tailwindcss";
+@import "tw-animate-css";
+
+@source "../../node_modules/streamdown/dist/index.js";

 :root {
  --radius: 0.5rem;
@@ -78,29 +81,23 @@
  --font-mono: var(--font-geist-mono);
 }

+* {
+  border-color: var(--border);
+}
+
 body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-geist), system-ui, sans-serif;
 }

-/* Scrollbar */
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+/* Hide page scrollbar */
+html {
+  scrollbar-width: none;
 }

-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--muted-foreground);
+html::-webkit-scrollbar {
+  display: none;
 }

 /* Code blocks */
@@ -183,7 +180,7 @@ code {
  margin-bottom: 1.25rem;
  line-height: 1.7;
  color: var(--muted-foreground);
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
 }

 .prose ul, .prose ol {
@@ -194,7 +191,7 @@ code {
 .prose li {
  margin-bottom: 0.5rem;
  color: var(--muted-foreground);
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
  line-height: 1.6;
 }

@@ -254,17 +251,21 @@ code {
  animation: tool-shimmer 1.5s ease-in-out infinite;
 }

-/* Dark mode: use page bg color for borders in chat message content */
-.dark .docs-chat-content * {
-  border-color: var(--background);
-}
-
-/* Override prose text color inside chat content so agent responses appear brighter */
+/* Override prose text color in chat so agent responses use primary foreground */
 .docs-chat-content p,
 .docs-chat-content li,
-.docs-chat-content td {
+.docs-chat-content td,
+.docs-chat-content th,
+.docs-chat-content strong,
+.docs-chat-content code {
  color: var(--foreground);
-  opacity: 0.9;
+}
+
+/* Reset global pre styles inside chat so Streamdown's own styling takes effect */
+.docs-chat-content pre {
+  border: none;
+  border-radius: 0;
+  padding: revert-layer;
 }

 /* Fix list rendering in chat content */
@@ -6,6 +6,7 @@ import { MobileNavProvider } from "@/components/mobile-nav-context";
 import { Header } from "@/components/header";
 import { Sidebar } from "@/components/sidebar";
 import { DocsChat } from "@/components/docs-chat";
+import { cookies } from "next/headers";

 const geist = Geist({
  variable: "--font-geist",
@@ -22,13 +23,26 @@ export const metadata: Metadata = {
  description: "Headless browser automation CLI for AI agents",
 };

-export default function RootLayout({
+export default async function RootLayout({
  children,
 }: Readonly<{
  children: React.ReactNode;
 }>) {
+  const cookieStore = await cookies();
+  const chatOpen = cookieStore.get("docs-chat-open")?.value === "true";
+  const chatWidth = Number(cookieStore.get("docs-chat-width")?.value) || 400;
+
  return (
    <html lang="en" suppressHydrationWarning>
+      <head>
+        {chatOpen && (
+          <style
+            dangerouslySetInnerHTML={{
+              __html: `@media(min-width:640px){body{padding-right:${chatWidth}px}}`,
+            }}
+          />
+        )}
+      </head>
      <body
        className={`${geist.variable} ${geistMono.variable} antialiased bg-background text-foreground`}
      >
@@ -45,7 +59,7 @@ export default function RootLayout({
                </div>
              </main>
            </div>
-            <DocsChat />
+            <DocsChat defaultOpen={chatOpen} defaultWidth={chatWidth} />
          </MobileNavProvider>
        </ThemeProvider>
      </body>