doccupine 0.0.63 → 0.0.65

package/README.md

@@ -59,6 +59,7 @@ description: "Page description for SEO"
 category: "Getting Started"
 categoryOrder: 0 # Sort order for the category group
 order: 1 # Sort order within the category
+name: "My Docs" # Override site name in title suffix
 icon: "https://..." # Page favicon URL
 image: "https://..." # OpenGraph image URL
 date: "2025-01-01" # Page date metadata
@@ -128,7 +129,7 @@ Place these JSON files in your project root (where you run `doccupine`). They ar
 | File              | Purpose                                                                                                   |
 | ----------------- | --------------------------------------------------------------------------------------------------------- |
 | `doccupine.json`  | CLI config (watchDir, outputDir, port). Auto-generated on first run.                                      |
-| `config.json`     | Site metadata: `name`, `description`, `icon`, `preview` image URL                                         |
+| `config.json`     | Site metadata: `name`, `description`, `icon`, `image` URL                                                 |
 | `theme.json`      | Theme overrides for [cherry-styled-components](https://github.com/cherry-design-system/styled-components) |
 | `navigation.json` | Manual navigation structure (overrides auto-generated)                                                    |
 | `links.json`      | Static header/footer links                                                                                |
@@ -141,7 +142,7 @@ Place static assets (images, favicons, `robots.txt`, etc.) in a `public/` direct
 
 ## AI Chat Setup
 
-The generated app includes an AI chat assistant. To enable it, create a `.env.local` file in the generated app directory:
+The generated app includes an AI chat assistant. To enable it, create a `.env` file in the generated app directory:
 
 ```env
 LLM_PROVIDER=openai # openai | anthropic | google
@@ -170,7 +171,7 @@ Default models per provider:
 | --------- | ---------------------------- | ------------------------ |
 | OpenAI    | `gpt-4.1-nano`               | `text-embedding-3-small` |
 | Anthropic | `claude-sonnet-4-5-20250929` | OpenAI fallback          |
-| Google    | `gemini-2.5-flash-lite`      | `text-embedding-004`     |
+| Google    | `gemini-2.5-flash-lite`      | `gemini-embedding-001`   |
 
 ## MCP Server
 

package/dist/lib/structures.js

@@ -14,6 +14,7 @@ import { notFoundTemplate } from "../templates/app/not-found.js";
 import { themeTemplate } from "../templates/app/theme.js";
 import { chatTemplate } from "../templates/components/Chat.js";
 import { clickOutsideTemplate } from "../templates/components/ClickOutside.js";
+import { lockBodyScrollTemplate } from "../templates/components/LockBodyScroll.js";
 import { docsTemplate } from "../templates/components/Docs.js";
 import { docsSideBarTemplate } from "../templates/components/DocsSideBar.js";
 import { mdxComponentsTemplate } from "../templates/components/MDXComponents.js";
@@ -66,6 +67,7 @@ import { cardsMdxTemplate } from "../templates/mdx/cards.mdx.js";
 import { codeMdxTemplate } from "../templates/mdx/code.mdx.js";
 import { columnsMdxTemplate } from "../templates/mdx/columns.mdx.js";
 import { commandsMdxTemplate } from "../templates/mdx/commands.mdx.js";
+import { componentsMdxTemplate } from "../templates/mdx/components.mdx.js";
 import { deploymentMdxTemplate } from "../templates/mdx/deployment.mdx.js";
 import { fieldsMdxTemplate } from "../templates/mdx/fields.mdx.js";
 import { fontsMdxTemplate } from "../templates/mdx/fonts.mdx.js";
@@ -130,6 +132,7 @@ export const appStructure = {
     "utils/config.ts": configTemplate,
     "components/Chat.tsx": chatTemplate,
     "components/ClickOutside.ts": clickOutsideTemplate,
+    "components/LockBodyScroll.ts": lockBodyScrollTemplate,
     "components/Docs.tsx": docsTemplate,
     "components/DocsSideBar.tsx": docsSideBarTemplate,
     "components/MDXComponents.tsx": mdxComponentsTemplate,
@@ -171,6 +174,7 @@ export const startingDocsStructure = {
     "code.mdx": codeMdxTemplate,
     "columns.mdx": columnsMdxTemplate,
     "commands.mdx": commandsMdxTemplate,
+    "components.mdx": componentsMdxTemplate,
     "deployment.mdx": deploymentMdxTemplate,
     "fields.mdx": fieldsMdxTemplate,
     "fonts.mdx": fontsMdxTemplate,

package/dist/templates/app/api/rag/route.d.ts

@@ -1 +1 @@
-export declare const ragRoutesTemplate = "import { NextResponse } from \"next/server\";\nimport { z } from \"zod\";\nimport { getLLMConfig, createChatModel } from \"@/services/llm\";\nimport {\n  searchDocs,\n  ensureDocsIndex,\n  getIndexStatus,\n} from \"@/services/mcp/server\";\nimport { rateLimit } from \"@/utils/rateLimit\";\nimport { config } from \"@/utils/config\";\n\nconst messageSchema = z.object({\n  role: z.enum([\"user\", \"assistant\"]),\n  content: z.string().max(4000),\n});\n\nconst ragSchema = z.object({\n  question: z.string().min(1).max(2000),\n  history: z.array(messageSchema).max(20).optional(),\n  refresh: z.boolean().optional(),\n});\n\nconst projectName = config.name || \"Doccupine\";\n\nconst systemContext = `You are AI Assistant, a documentation assistant for ${projectName}, Your name is ${projectName} AI Assistant.\n\n## Core Rules\n1. Answer ONLY from the provided context. Never fabricate information.\n2. If the answer isn't in the context, say so clearly and suggest relevant sections or pages the user might check.\n3. If the question is ambiguous, ask a brief clarifying question before answering.\n\n## Response Style\n- Be concise and direct. Lead with the answer, then provide details if needed.\n- Use code examples from the context when relevant.\n- Match the technical level of the user's question.\n\n## MDX/Code Formatting\nWhen including code blocks in your response:\n- Never nest fenced code blocks (triple backticks) inside other fenced code blocks.\n- If you need to show MDX source that itself contains code blocks, use indented code blocks or escape the inner backticks.\n- All output must be valid MDX that renders correctly.\n\n## Greetings & Small Talk\nIf the user sends a greeting or non-documentation question, respond briefly and ask how you can help with the documentation.`;\n\nexport async function POST(req: Request) {\n  // Rate limit by IP\n  const ip =\n    req.headers.get(\"x-forwarded-for\")?.split(\",\")[0]?.trim() ?? \"unknown\";\n  const { allowed, retryAfter } = rateLimit(ip);\n  if (!allowed) {\n    return NextResponse.json(\n      { error: \"Too many requests\" },\n      { status: 429, headers: { \"Retry-After\": String(retryAfter) } },\n    );\n  }\n\n  try {\n    const body = await req.json();\n    const parsed = ragSchema.safeParse(body);\n    if (!parsed.success) {\n      return NextResponse.json(\n        { error: \"Invalid input\", details: parsed.error.issues },\n        { status: 400 },\n      );\n    }\n    const { question, history, refresh } = parsed.data;\n\n    let llmConfig;\n    try {\n      llmConfig = getLLMConfig();\n    } catch (error: unknown) {\n      const message =\n        error instanceof Error ? error.message : \"LLM configuration error\";\n      return NextResponse.json({ error: message }, { status: 500 });\n    }\n\n    // Use MCP service to ensure docs are indexed\n    await ensureDocsIndex(Boolean(refresh));\n\n    // Use MCP search_docs tool to find relevant documentation\n    const searchResults = await searchDocs(question, 6);\n\n    // Build context from search results\n    const context = searchResults\n      .map(\n        ({ chunk, score }) =>\n          `File: ${chunk.path}\\nScore: ${score.toFixed(3)}\\n----\\n${chunk.text}`,\n      )\n      .join(\"\\n\\n================\\n\\n\");\n\n    // Create chat model and stream response\n    const llm = createChatModel(llmConfig);\n    const prompt: { role: \"system\" | \"user\" | \"assistant\"; content: string }[] =\n      [\n        {\n          role: \"system\" as const,\n          content: systemContext,\n        },\n      ];\n\n    // Include conversation history for multi-turn context\n    if (history && history.length > 0) {\n      for (const msg of history) {\n        prompt.push({\n          role: msg.role,\n          content: msg.content,\n        });\n      }\n    }\n\n    prompt.push({\n      role: \"user\" as const,\n      content: `Question: ${question}\\n\\nContext:\\n${context}`,\n    });\n\n    const stream = await llm.stream(prompt);\n\n    // Build metadata from MCP search results\n    const indexStatus = getIndexStatus();\n    const metadata = {\n      sources: searchResults.map(({ chunk, score }) => ({\n        id: chunk.id,\n        path: chunk.path,\n        uri: chunk.uri,\n        score,\n      })),\n      chunkCount: indexStatus.chunkCount,\n    };\n\n    const encoder = new TextEncoder();\n    const readableStream = new ReadableStream({\n      async start(controller) {\n        try {\n          controller.enqueue(\n            encoder.encode(\n              `data: ${JSON.stringify({ type: \"metadata\", data: metadata })}\\n\\n`,\n            ),\n          );\n\n          for await (const chunk of stream) {\n            const content = chunk?.content || \"\";\n            if (content) {\n              controller.enqueue(\n                encoder.encode(\n                  `data: ${JSON.stringify({ type: \"content\", data: content })}\\n\\n`,\n                ),\n              );\n            }\n          }\n\n          controller.enqueue(\n            encoder.encode(`data: ${JSON.stringify({ type: \"done\" })}\\n\\n`),\n          );\n          controller.close();\n        } catch (error: unknown) {\n          const message =\n            error instanceof Error ? error.message : \"Stream error\";\n          controller.enqueue(\n            encoder.encode(\n              `data: ${JSON.stringify({ type: \"error\", data: message })}\\n\\n`,\n            ),\n          );\n          controller.close();\n        }\n      },\n    });\n\n    return new Response(readableStream, {\n      headers: {\n        \"Content-Type\": \"text/event-stream\",\n        \"Cache-Control\": \"no-cache\",\n        Connection: \"keep-alive\",\n      },\n    });\n  } catch (e: unknown) {\n    const message = e instanceof Error ? e.message : \"Unknown error\";\n    return NextResponse.json({ error: message }, { status: 500 });\n  }\n}\n\nexport async function GET() {\n  const status = getIndexStatus();\n  return NextResponse.json({\n    ready: status.ready,\n    chunks: status.chunkCount,\n  });\n}\n";
+export declare const ragRoutesTemplate = "import { NextResponse } from \"next/server\";\nimport { z } from \"zod\";\nimport { getLLMConfig, createChatModel } from \"@/services/llm\";\nimport {\n  searchDocs,\n  ensureDocsIndex,\n  getIndexStatus,\n} from \"@/services/mcp/server\";\nimport { rateLimit } from \"@/utils/rateLimit\";\nimport { config } from \"@/utils/config\";\n\nconst messageSchema = z.object({\n  role: z.enum([\"user\", \"assistant\"]),\n  content: z.string().max(4000),\n});\n\nconst ragSchema = z.object({\n  question: z.string().min(1).max(2000),\n  history: z.array(messageSchema).max(20).optional(),\n  refresh: z.boolean().optional(),\n});\n\nconst projectName = config.name || \"Doccupine\";\n\nconst systemContext = `You are AI Assistant, a documentation assistant for ${projectName}, Your name is ${projectName} AI Assistant.\n\n## Core Rules\n1. Answer ONLY from the provided context. Never fabricate information.\n2. If the answer isn't in the context, say so clearly and suggest relevant sections or pages the user might check.\n3. If the question is ambiguous, ask a brief clarifying question before answering.\n\n## Response Style\n- Be concise and direct. Lead with the answer, then provide details if needed.\n- Use code examples from the context when relevant.\n- Match the technical level of the user's question.\n\n## MDX/Code Formatting\nWhen including code blocks in your response:\n- Never nest fenced code blocks (triple backticks) inside other fenced code blocks.\n- If you need to show MDX source that itself contains code blocks, use indented code blocks or escape the inner backticks.\n- All output must be valid MDX that renders correctly.\n\n## Internal Links\nEach context chunk includes a \"URL:\" line with the pre-computed page URL. Use it directly when linking:\n- Format links as markdown: [Page Title](/slug/).\n- Never expose raw file paths like \"/app/.../page.tsx\" to the user.\n- Do NOT add a \"Related Pages\" section at the end - sources are shown separately by the UI.\n\n## Greetings & Small Talk\nIf the user sends a greeting or non-documentation question, respond briefly and ask how you can help with the documentation.`;\n\nexport async function POST(req: Request) {\n  // Rate limit by IP\n  const ip =\n    req.headers.get(\"x-forwarded-for\")?.split(\",\")[0]?.trim() ?? \"unknown\";\n  const { allowed, retryAfter } = rateLimit(ip);\n  if (!allowed) {\n    return NextResponse.json(\n      { error: \"Too many requests\" },\n      { status: 429, headers: { \"Retry-After\": String(retryAfter) } },\n    );\n  }\n\n  try {\n    const body = await req.json();\n    const parsed = ragSchema.safeParse(body);\n    if (!parsed.success) {\n      return NextResponse.json(\n        { error: \"Invalid input\", details: parsed.error.issues },\n        { status: 400 },\n      );\n    }\n    const { question, history, refresh } = parsed.data;\n\n    let llmConfig;\n    try {\n      llmConfig = getLLMConfig();\n    } catch (error: unknown) {\n      const message =\n        error instanceof Error ? error.message : \"LLM configuration error\";\n      return NextResponse.json({ error: message }, { status: 500 });\n    }\n\n    // Use MCP service to ensure docs are indexed\n    await ensureDocsIndex(Boolean(refresh));\n\n    // Use MCP search_docs tool to find relevant documentation\n    const searchResults = await searchDocs(question, 6);\n\n    // Build context from search results\n    const context = searchResults\n      .map(({ chunk, score }) => {\n        const slug = chunk.uri.replace(\"docs://\", \"\").replace(/^\\/+/, \"\");\n        const url = slug ? `/${slug}/` : \"/\";\n        return `File: ${chunk.path}\\nURL: ${url}\\nScore: ${score.toFixed(3)}\\n----\\n${chunk.text}`;\n      })\n      .join(\"\\n\\n================\\n\\n\");\n\n    // Create chat model and stream response\n    const llm = createChatModel(llmConfig);\n    const prompt: { role: \"system\" | \"user\" | \"assistant\"; content: string }[] =\n      [\n        {\n          role: \"system\" as const,\n          content: systemContext,\n        },\n      ];\n\n    // Include conversation history for multi-turn context\n    if (history && history.length > 0) {\n      for (const msg of history) {\n        prompt.push({\n          role: msg.role,\n          content: msg.content,\n        });\n      }\n    }\n\n    prompt.push({\n      role: \"user\" as const,\n      content: `Question: ${question}\\n\\nContext:\\n${context}`,\n    });\n\n    const stream = await llm.stream(prompt);\n\n    // Build metadata from MCP search results\n    const indexStatus = getIndexStatus();\n    const metadata = {\n      sources: searchResults.map(({ chunk, score }) => ({\n        id: chunk.id,\n        path: chunk.path,\n        uri: chunk.uri,\n        score,\n      })),\n      chunkCount: indexStatus.chunkCount,\n    };\n\n    const encoder = new TextEncoder();\n    const readableStream = new ReadableStream({\n      async start(controller) {\n        try {\n          controller.enqueue(\n            encoder.encode(\n              `data: ${JSON.stringify({ type: \"metadata\", data: metadata })}\\n\\n`,\n            ),\n          );\n\n          for await (const chunk of stream) {\n            const content = chunk?.content || \"\";\n            if (content) {\n              controller.enqueue(\n                encoder.encode(\n                  `data: ${JSON.stringify({ type: \"content\", data: content })}\\n\\n`,\n                ),\n              );\n            }\n          }\n\n          controller.enqueue(\n            encoder.encode(`data: ${JSON.stringify({ type: \"done\" })}\\n\\n`),\n          );\n          controller.close();\n        } catch (error: unknown) {\n          const message =\n            error instanceof Error ? error.message : \"Stream error\";\n          controller.enqueue(\n            encoder.encode(\n              `data: ${JSON.stringify({ type: \"error\", data: message })}\\n\\n`,\n            ),\n          );\n          controller.close();\n        }\n      },\n    });\n\n    return new Response(readableStream, {\n      headers: {\n        \"Content-Type\": \"text/event-stream\",\n        \"Cache-Control\": \"no-cache\",\n        Connection: \"keep-alive\",\n      },\n    });\n  } catch (e: unknown) {\n    const message = e instanceof Error ? e.message : \"Unknown error\";\n    return NextResponse.json({ error: message }, { status: 500 });\n  }\n}\n\nexport async function GET() {\n  const status = getIndexStatus();\n  return NextResponse.json({\n    ready: status.ready,\n    chunks: status.chunkCount,\n  });\n}\n";

package/dist/templates/app/api/rag/route.js

@@ -40,6 +40,12 @@ When including code blocks in your response:
 - If you need to show MDX source that itself contains code blocks, use indented code blocks or escape the inner backticks.
 - All output must be valid MDX that renders correctly.
 
+## Internal Links
+Each context chunk includes a "URL:" line with the pre-computed page URL. Use it directly when linking:
+- Format links as markdown: [Page Title](/slug/).
+- Never expose raw file paths like "/app/.../page.tsx" to the user.
+- Do NOT add a "Related Pages" section at the end - sources are shown separately by the UI.
+
 ## Greetings & Small Talk
 If the user sends a greeting or non-documentation question, respond briefly and ask how you can help with the documentation.\`;
 
@@ -83,10 +89,11 @@ export async function POST(req: Request) {
 
     // Build context from search results
     const context = searchResults
-      .map(
-        ({ chunk, score }) =>
-          \`File: \${chunk.path}\\nScore: \${score.toFixed(3)}\\n----\\n\${chunk.text}\`,
-      )
+      .map(({ chunk, score }) => {
+        const slug = chunk.uri.replace("docs://", "").replace(/^\\/+/, "");
+        const url = slug ? \`/\${slug}/\` : "/";
+        return \`File: \${chunk.path}\\nURL: \${url}\\nScore: \${score.toFixed(3)}\\n----\\n\${chunk.text}\`;
+      })
       .join("\\n\\n================\\n\\n");
 
     // Create chat model and stream response

package/dist/templates/app/theme.d.ts

@@ -1 +1,3 @@
-export declare const themeTemplate = "\"use client\";\nimport customThemeJson from \"@/theme.json\";\n\ninterface CustomTheme {\n  default?: Partial<Colors>;\n  dark?: Partial<Colors>;\n}\n\nconst customTheme = customThemeJson as CustomTheme;\n\nexport const breakpoints: Breakpoints = {\n  xs: 0,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n  xxl: 1440,\n  xxxl: 1920,\n};\n\nexport function mq(minWidth: keyof Breakpoints) {\n  return `@media screen and (min-width: ${breakpoints[minWidth]}px)`;\n}\n\nexport const spacing: Spacing = {\n  maxWidth: { xs: \"1280px\", xxxl: \"1440px\" },\n  padding: { xs: \"20px\", lg: \"40px\" },\n  radius: { xs: \"6px\", lg: \"12px\", xl: \"30px\" },\n  gridGap: { xs: \"20px\", lg: \"40px\" },\n};\n\nexport const colors: Colors = {\n  primaryLight: \"#d1d5db\",\n  primary: \"#6b7280\",\n  primaryDark: \"#374151\",\n  secondaryLight: \"#c4b5fd\",\n  secondary: \"#8b5cf6\",\n  secondaryDark: \"#5b21b6\",\n  tertiaryLight: \"#86efac\",\n  tertiary: \"#22c55e\",\n  tertiaryDark: \"#15803d\",\n  grayLight: \"#e5e7eb\",\n  gray: \"#9ca3af\",\n  grayDark: \"#4b5563\",\n  success: \"#84cc16\",\n  error: \"#ef4444\",\n  warning: \"#eab308\",\n  info: \"#06b6d4\",\n  dark: \"#000000\",\n  light: \"#ffffff\",\n  ...(customTheme.default ? (customTheme.default as Partial<Colors>) : {}),\n};\n\nexport const colorsDark: Colors = {\n  primaryLight: \"#9ca3af\",\n  primary: \"#6b7280\",\n  primaryDark: \"#374151\",\n  secondaryLight: \"#ddd6fe\",\n  secondary: \"#a78bfa\",\n  secondaryDark: \"#7c3aed\",\n  tertiaryLight: \"#6ee7b7\",\n  tertiary: \"#10b981\",\n  tertiaryDark: \"#065f46\",\n  grayLight: \"#1a1a1a\",\n  gray: \"#454444\",\n  grayDark: \"#808080\",\n  success: \"#84cc16\",\n  error: \"#ef4444\",\n  warning: \"#eab308\",\n  info: \"#06b6d4\",\n  dark: \"#ffffff\",\n  light: \"#000000\",\n  ...(customTheme.dark ? (customTheme.dark as Partial<Colors>) : {}),\n};\n\nexport const shadows: Shadows = {\n  xs: \"0px 4px 4px 0px rgba(18, 18, 18, 0.04), 0px 1px 3px 0px rgba(39, 41, 45, 0.02)\",\n  sm: \"0px 4px 4px 0px rgba(18, 18, 18, 0.08), 0px 1px 3px 0px rgba(39, 41, 45, 0.04)\",\n  md: \"0px 8px 8px 0px rgba(18, 18, 18, 0.16), 0px 2px 3px 0px rgba(39, 41, 45, 0.06)\",\n  lg: \"0px 16px 24px 0px rgba(18, 18, 18, 0.20), 0px 2px 3px 0px rgba(39, 41, 45, 0.08)\",\n  xl: \"0px 24px 32px 0px rgba(18, 18, 18, 0.24), 0px 2px 3px 0px rgba(39, 41, 45, 0.12)\",\n};\n\nexport const shadowsDark: Shadows = {\n  xs: \"0px 4px 4px 0px rgba(255, 255, 255, 0.04), 0px 1px 3px 0px rgba(255, 255, 255, 0.02)\",\n  sm: \"0px 4px 4px 0px rgba(255, 255, 255, 0.08), 0px 1px 3px 0px rgba(255, 255, 255, 0.04)\",\n  md: \"0px 8px 8px 0px rgba(255, 255, 255, 0.16), 0px 2px 3px 0px rgba(255, 255, 255, 0.06)\",\n  lg: \"0px 16px 24px 0px rgba(255, 255, 255, 0.20), 0px 2px 3px 0px rgba(255, 255, 255, 0.08)\",\n  xl: \"0px 24px 32px 0px rgba(255, 255, 255, 0.24), 0px 2px 3px 0px rgba(255, 255, 255, 0.12)\",\n};\n\nexport const fonts: Fonts = {\n  text: \"Inter\",\n  head: \"Inter\",\n  mono: \"Roboto Mono, monospace\",\n};\n\nexport const fontSizes: FontSizes = {\n  hero1: { xs: \"72px\", lg: \"128px\" },\n  hero2: { xs: \"60px\", lg: \"96px\" },\n  hero3: { xs: \"36px\", lg: \"72px\" },\n\n  h1: { xs: \"40px\", lg: \"60px\" },\n  h2: { xs: \"30px\", lg: \"36px\" },\n  h3: { xs: \"28px\", lg: \"30px\" },\n  h4: { xs: \"24px\", lg: \"26px\" },\n  h5: { xs: \"18px\", lg: \"20px\" },\n  h6: { xs: \"16px\", lg: \"18px\" },\n\n  text: { xs: \"14px\", lg: \"16px\" },\n  strong: { xs: \"14px\", lg: \"16px\" },\n  small: { xs: \"12px\", lg: \"14px\" },\n\n  blockquote: { xs: \"16px\", lg: \"18px\" },\n  code: { xs: \"14px\", lg: \"16px\" },\n\n  button: { xs: \"16px\", lg: \"16px\" },\n  buttonBig: { xs: \"18px\", lg: \"18px\" },\n  buttonSmall: { xs: \"14px\", lg: \"14px\" },\n\n  input: { xs: \"16px\", lg: \"16px\" },\n  inputBig: { xs: \"18px\", lg: \"18px\" },\n  inputSmall: { xs: \"14px\", lg: \"14px\" },\n};\n\nexport const lineHeights: LineHeights = {\n  hero1: { xs: \"1.1\", lg: \"1.1\" },\n  hero2: { xs: \"1.1\", lg: \"1.1\" },\n  hero3: { xs: \"1.17\", lg: \"1.1\" },\n\n  h1: { xs: \"1\", lg: \"1.07\" },\n  h2: { xs: \"1.2\", lg: \"1.2\" },\n  h3: { xs: \"1.3\", lg: \"1.5\" },\n  h4: { xs: \"1.3\", lg: \"1.5\" },\n  h5: { xs: \"1.6\", lg: \"1.5\" },\n  h6: { xs: \"1.6\", lg: \"1.6\" },\n\n  text: { xs: \"1.7\", lg: \"1.7\" },\n  strong: { xs: \"1.7\", lg: \"1.7\" },\n  small: { xs: \"1.7\", lg: \"1.7\" },\n\n  blockquote: { xs: \"1.7\", lg: \"1.7\" },\n  code: { xs: \"1.7\", lg: \"1.7\" },\n\n  button: { xs: \"1\", lg: \"1\" },\n  buttonBig: { xs: \"1\", lg: \"1\" },\n  buttonSmall: { xs: \"1\", lg: \"1\" },\n\n  input: { xs: \"1\", lg: \"1\" },\n  inputBig: { xs: \"1\", lg: \"1\" },\n  inputSmall: { xs: \"1\", lg: \"1\" },\n};\n\nexport const theme: Theme = {\n  breakpoints,\n  spacing,\n  colors,\n  shadows,\n  fonts,\n  fontSizes,\n  lineHeights,\n  isDark: false,\n};\n\nexport const themeDark: Theme = {\n  breakpoints,\n  spacing,\n  colors: colorsDark,\n  shadows: shadowsDark,\n  fonts,\n  fontSizes,\n  lineHeights,\n  isDark: true,\n};\n\nexport interface Breakpoints<TNumber = number> {\n  xs: TNumber;\n  sm: TNumber;\n  md: TNumber;\n  lg: TNumber;\n  xl: TNumber;\n  xxl: TNumber;\n  xxxl: TNumber;\n}\n\nexport interface Spacing<TString = string> {\n  maxWidth: { xs: TString; xxxl: TString };\n  padding: { xs: TString; lg: TString };\n  radius: { xs: TString; lg: TString; xl: TString };\n  gridGap: { xs: TString; lg: TString };\n}\n\nexport interface Colors<TString = string> {\n  primaryLight: TString;\n  primary: TString;\n  primaryDark: TString;\n\n  secondaryLight: TString;\n  secondary: TString;\n  secondaryDark: TString;\n\n  tertiaryLight: TString;\n  tertiary: TString;\n  tertiaryDark: TString;\n\n  grayLight: TString;\n  gray: TString;\n  grayDark: TString;\n\n  success: TString;\n  error: TString;\n  warning: TString;\n  info: TString;\n\n  dark: TString;\n  light: TString;\n}\n\ninterface Shadows<TString = string> {\n  xs: TString;\n  sm: TString;\n  md: TString;\n  lg: TString;\n  xl: TString;\n}\n\nexport interface Fonts<TString = string> {\n  head: TString;\n  text: TString;\n  mono: TString;\n}\n\nexport interface FontSizes<TString = string> {\n  hero1: { xs: TString; lg: TString };\n  hero2: { xs: TString; lg: TString };\n  hero3: { xs: TString; lg: TString };\n\n  h1: { xs: TString; lg: TString };\n  h2: { xs: TString; lg: TString };\n  h3: { xs: TString; lg: TString };\n  h4: { xs: TString; lg: TString };\n  h5: { xs: TString; lg: TString };\n  h6: { xs: TString; lg: TString };\n\n  text: { xs: TString; lg: TString };\n  strong: { xs: TString; lg: TString };\n  small: { xs: TString; lg: TString };\n\n  blockquote: { xs: TString; lg: TString };\n  code: { xs: TString; lg: TString };\n\n  button: { xs: TString; lg: TString };\n  buttonBig: { xs: TString; lg: TString };\n  buttonSmall: { xs: TString; lg: TString };\n\n  input: { xs: TString; lg: TString };\n  inputBig: { xs: TString; lg: TString };\n  inputSmall: { xs: TString; lg: TString };\n}\n\nexport interface LineHeights<TString = string> {\n  hero1: { xs: TString; lg: TString };\n  hero2: { xs: TString; lg: TString };\n  hero3: { xs: TString; lg: TString };\n\n  h1: { xs: TString; lg: TString };\n  h2: { xs: TString; lg: TString };\n  h3: { xs: TString; lg: TString };\n  h4: { xs: TString; lg: TString };\n  h5: { xs: TString; lg: TString };\n  h6: { xs: TString; lg: TString };\n\n  text: { xs: TString; lg: TString };\n  strong: { xs: TString; lg: TString };\n  small: { xs: TString; lg: TString };\n\n  blockquote: { xs: TString; lg: TString };\n  code: { xs: TString; lg: TString };\n\n  button: { xs: TString; lg: TString };\n  buttonBig: { xs: TString; lg: TString };\n  buttonSmall: { xs: TString; lg: TString };\n\n  input: { xs: TString; lg: TString };\n  inputBig: { xs: TString; lg: TString };\n  inputSmall: { xs: TString; lg: TString };\n}\n\nexport interface Theme {\n  breakpoints: Breakpoints;\n  spacing: Spacing;\n  colors: Colors;\n  shadows: Shadows;\n  fonts: Fonts;\n  fontSizes: FontSizes;\n  lineHeights: LineHeights;\n  isDark: boolean;\n}\n";
+export declare const SIDEBAR_WIDTH = 280;
+export declare const CHAT_WIDTH = 420;
+export declare const themeTemplate = "\"use client\";\nimport customThemeJson from \"@/theme.json\";\n\ninterface CustomTheme {\n  default?: Partial<Colors>;\n  dark?: Partial<Colors>;\n}\n\nconst customTheme = customThemeJson as CustomTheme;\n\nconst breakpoints: Breakpoints = {\n  xs: 0,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n  xxl: 1440,\n  xxxl: 1920,\n};\n\nexport function mq(minWidth: keyof Breakpoints) {\n  return `@media screen and (min-width: ${breakpoints[minWidth]}px)`;\n}\n\nconst spacing: Spacing = {\n  maxWidth: { xs: \"1280px\", xxxl: \"1440px\" },\n  padding: { xs: \"20px\", lg: \"40px\" },\n  radius: { xs: \"6px\", lg: \"12px\", xl: \"30px\" },\n  gridGap: { xs: \"20px\", lg: \"40px\" },\n};\n\nconst colors: Colors = {\n  primaryLight: \"#d1d5db\",\n  primary: \"#6b7280\",\n  primaryDark: \"#374151\",\n  secondaryLight: \"#c4b5fd\",\n  secondary: \"#8b5cf6\",\n  secondaryDark: \"#5b21b6\",\n  tertiaryLight: \"#86efac\",\n  tertiary: \"#22c55e\",\n  tertiaryDark: \"#15803d\",\n  grayLight: \"#e5e7eb\",\n  gray: \"#9ca3af\",\n  grayDark: \"#4b5563\",\n  success: \"#84cc16\",\n  error: \"#ef4444\",\n  warning: \"#eab308\",\n  info: \"#06b6d4\",\n  dark: \"#000000\",\n  light: \"#ffffff\",\n  ...(customTheme.default ? (customTheme.default as Partial<Colors>) : {}),\n};\n\nconst colorsDark: Colors = {\n  primaryLight: \"#9ca3af\",\n  primary: \"#6b7280\",\n  primaryDark: \"#374151\",\n  secondaryLight: \"#ddd6fe\",\n  secondary: \"#a78bfa\",\n  secondaryDark: \"#7c3aed\",\n  tertiaryLight: \"#6ee7b7\",\n  tertiary: \"#10b981\",\n  tertiaryDark: \"#065f46\",\n  grayLight: \"#1a1a1a\",\n  gray: \"#454444\",\n  grayDark: \"#808080\",\n  success: \"#84cc16\",\n  error: \"#ef4444\",\n  warning: \"#eab308\",\n  info: \"#06b6d4\",\n  dark: \"#ffffff\",\n  light: \"#000000\",\n  ...(customTheme.dark ? (customTheme.dark as Partial<Colors>) : {}),\n};\n\nconst shadows: Shadows = {\n  xs: \"0px 4px 4px 0px rgba(18, 18, 18, 0.04), 0px 1px 3px 0px rgba(39, 41, 45, 0.02)\",\n  sm: \"0px 4px 4px 0px rgba(18, 18, 18, 0.08), 0px 1px 3px 0px rgba(39, 41, 45, 0.04)\",\n  md: \"0px 8px 8px 0px rgba(18, 18, 18, 0.16), 0px 2px 3px 0px rgba(39, 41, 45, 0.06)\",\n  lg: \"0px 16px 24px 0px rgba(18, 18, 18, 0.20), 0px 2px 3px 0px rgba(39, 41, 45, 0.08)\",\n  xl: \"0px 24px 32px 0px rgba(18, 18, 18, 0.24), 0px 2px 3px 0px rgba(39, 41, 45, 0.12)\",\n};\n\nconst shadowsDark: Shadows = {\n  xs: \"0px 4px 4px 0px rgba(255, 255, 255, 0.04), 0px 1px 3px 0px rgba(255, 255, 255, 0.02)\",\n  sm: \"0px 4px 4px 0px rgba(255, 255, 255, 0.08), 0px 1px 3px 0px rgba(255, 255, 255, 0.04)\",\n  md: \"0px 8px 8px 0px rgba(255, 255, 255, 0.16), 0px 2px 3px 0px rgba(255, 255, 255, 0.06)\",\n  lg: \"0px 16px 24px 0px rgba(255, 255, 255, 0.20), 0px 2px 3px 0px rgba(255, 255, 255, 0.08)\",\n  xl: \"0px 24px 32px 0px rgba(255, 255, 255, 0.24), 0px 2px 3px 0px rgba(255, 255, 255, 0.12)\",\n};\n\nconst fonts: Fonts = {\n  text: \"Inter\",\n  head: \"Inter\",\n  mono: \"Roboto Mono, monospace\",\n};\n\nconst fontSizes: FontSizes = {\n  hero1: { xs: \"72px\", lg: \"128px\" },\n  hero2: { xs: \"60px\", lg: \"96px\" },\n  hero3: { xs: \"36px\", lg: \"72px\" },\n\n  h1: { xs: \"40px\", lg: \"60px\" },\n  h2: { xs: \"30px\", lg: \"36px\" },\n  h3: { xs: \"28px\", lg: \"30px\" },\n  h4: { xs: \"24px\", lg: \"26px\" },\n  h5: { xs: \"18px\", lg: \"20px\" },\n  h6: { xs: \"16px\", lg: \"18px\" },\n\n  text: { xs: \"14px\", lg: \"16px\" },\n  strong: { xs: \"14px\", lg: \"16px\" },\n  small: { xs: \"12px\", lg: \"14px\" },\n\n  blockquote: { xs: \"16px\", lg: \"18px\" },\n  code: { xs: \"14px\", lg: \"16px\" },\n\n  button: { xs: \"16px\", lg: \"16px\" },\n  buttonBig: { xs: \"18px\", lg: \"18px\" },\n  buttonSmall: { xs: \"14px\", lg: \"14px\" },\n\n  input: { xs: \"16px\", lg: \"16px\" },\n  inputBig: { xs: \"18px\", lg: \"18px\" },\n  inputSmall: { xs: \"14px\", lg: \"14px\" },\n};\n\nconst lineHeights: LineHeights = {\n  hero1: { xs: \"1.1\", lg: \"1.1\" },\n  hero2: { xs: \"1.1\", lg: \"1.1\" },\n  hero3: { xs: \"1.17\", lg: \"1.1\" },\n\n  h1: { xs: \"1\", lg: \"1.07\" },\n  h2: { xs: \"1.2\", lg: \"1.2\" },\n  h3: { xs: \"1.3\", lg: \"1.5\" },\n  h4: { xs: \"1.3\", lg: \"1.5\" },\n  h5: { xs: \"1.6\", lg: \"1.5\" },\n  h6: { xs: \"1.6\", lg: \"1.6\" },\n\n  text: { xs: \"1.7\", lg: \"1.7\" },\n  strong: { xs: \"1.7\", lg: \"1.7\" },\n  small: { xs: \"1.7\", lg: \"1.7\" },\n\n  blockquote: { xs: \"1.7\", lg: \"1.7\" },\n  code: { xs: \"1.7\", lg: \"1.7\" },\n\n  button: { xs: \"1\", lg: \"1\" },\n  buttonBig: { xs: \"1\", lg: \"1\" },\n  buttonSmall: { xs: \"1\", lg: \"1\" },\n\n  input: { xs: \"1\", lg: \"1\" },\n  inputBig: { xs: \"1\", lg: \"1\" },\n  inputSmall: { xs: \"1\", lg: \"1\" },\n};\n\nexport const theme: Theme = {\n  breakpoints,\n  spacing,\n  colors,\n  shadows,\n  fonts,\n  fontSizes,\n  lineHeights,\n  isDark: false,\n};\n\nexport const themeDark: Theme = {\n  breakpoints,\n  spacing,\n  colors: colorsDark,\n  shadows: shadowsDark,\n  fonts,\n  fontSizes,\n  lineHeights,\n  isDark: true,\n};\n\ninterface Breakpoints<TNumber = number> {\n  xs: TNumber;\n  sm: TNumber;\n  md: TNumber;\n  lg: TNumber;\n  xl: TNumber;\n  xxl: TNumber;\n  xxxl: TNumber;\n}\n\ninterface Spacing<TString = string> {\n  maxWidth: { xs: TString; xxxl: TString };\n  padding: { xs: TString; lg: TString };\n  radius: { xs: TString; lg: TString; xl: TString };\n  gridGap: { xs: TString; lg: TString };\n}\n\ninterface Colors<TString = string> {\n  primaryLight: TString;\n  primary: TString;\n  primaryDark: TString;\n\n  secondaryLight: TString;\n  secondary: TString;\n  secondaryDark: TString;\n\n  tertiaryLight: TString;\n  tertiary: TString;\n  tertiaryDark: TString;\n\n  grayLight: TString;\n  gray: TString;\n  grayDark: TString;\n\n  success: TString;\n  error: TString;\n  warning: TString;\n  info: TString;\n\n  dark: TString;\n  light: TString;\n}\n\ninterface Shadows<TString = string> {\n  xs: TString;\n  sm: TString;\n  md: TString;\n  lg: TString;\n  xl: TString;\n}\n\ninterface Fonts<TString = string> {\n  head: TString;\n  text: TString;\n  mono: TString;\n}\n\ninterface FontSizes<TString = string> {\n  hero1: { xs: TString; lg: TString };\n  hero2: { xs: TString; lg: TString };\n  hero3: { xs: TString; lg: TString };\n\n  h1: { xs: TString; lg: TString };\n  h2: { xs: TString; lg: TString };\n  h3: { xs: TString; lg: TString };\n  h4: { xs: TString; lg: TString };\n  h5: { xs: TString; lg: TString };\n  h6: { xs: TString; lg: TString };\n\n  text: { xs: TString; lg: TString };\n  strong: { xs: TString; lg: TString };\n  small: { xs: TString; lg: TString };\n\n  blockquote: { xs: TString; lg: TString };\n  code: { xs: TString; lg: TString };\n\n  button: { xs: TString; lg: TString };\n  buttonBig: { xs: TString; lg: TString };\n  buttonSmall: { xs: TString; lg: TString };\n\n  input: { xs: TString; lg: TString };\n  inputBig: { xs: TString; lg: TString };\n  inputSmall: { xs: TString; lg: TString };\n}\n\ninterface LineHeights<TString = string> {\n  hero1: { xs: TString; lg: TString };\n  hero2: { xs: TString; lg: TString };\n  hero3: { xs: TString; lg: TString };\n\n  h1: { xs: TString; lg: TString };\n  h2: { xs: TString; lg: TString };\n  h3: { xs: TString; lg: TString };\n  h4: { xs: TString; lg: TString };\n  h5: { xs: TString; lg: TString };\n  h6: { xs: TString; lg: TString };\n\n  text: { xs: TString; lg: TString };\n  strong: { xs: TString; lg: TString };\n  small: { xs: TString; lg: TString };\n\n  blockquote: { xs: TString; lg: TString };\n  code: { xs: TString; lg: TString };\n\n  button: { xs: TString; lg: TString };\n  buttonBig: { xs: TString; lg: TString };\n  buttonSmall: { xs: TString; lg: TString };\n\n  input: { xs: TString; lg: TString };\n  inputBig: { xs: TString; lg: TString };\n  inputSmall: { xs: TString; lg: TString };\n}\n\nexport interface Theme {\n  breakpoints: Breakpoints;\n  spacing: Spacing;\n  colors: Colors;\n  shadows: Shadows;\n  fonts: Fonts;\n  fontSizes: FontSizes;\n  lineHeights: LineHeights;\n  isDark: boolean;\n}\n";

package/dist/templates/app/theme.js

@@ -1,3 +1,5 @@
+export const SIDEBAR_WIDTH = 280;
+export const CHAT_WIDTH = 420;
 export const themeTemplate = `"use client";
 import customThemeJson from "@/theme.json";
 
@@ -8,7 +10,7 @@ interface CustomTheme {
 
 const customTheme = customThemeJson as CustomTheme;
 
-export const breakpoints: Breakpoints = {
+const breakpoints: Breakpoints = {
   xs: 0,
   sm: 576,
   md: 768,
@@ -22,14 +24,14 @@ export function mq(minWidth: keyof Breakpoints) {
   return \`@media screen and (min-width: \${breakpoints[minWidth]}px)\`;
 }
 
-export const spacing: Spacing = {
+const spacing: Spacing = {
   maxWidth: { xs: "1280px", xxxl: "1440px" },
   padding: { xs: "20px", lg: "40px" },
   radius: { xs: "6px", lg: "12px", xl: "30px" },
   gridGap: { xs: "20px", lg: "40px" },
 };
 
-export const colors: Colors = {
+const colors: Colors = {
   primaryLight: "#d1d5db",
   primary: "#6b7280",
   primaryDark: "#374151",
@@ -51,7 +53,7 @@ export const colors: Colors = {
   ...(customTheme.default ? (customTheme.default as Partial<Colors>) : {}),
 };
 
-export const colorsDark: Colors = {
+const colorsDark: Colors = {
   primaryLight: "#9ca3af",
   primary: "#6b7280",
   primaryDark: "#374151",
@@ -73,7 +75,7 @@ export const colorsDark: Colors = {
   ...(customTheme.dark ? (customTheme.dark as Partial<Colors>) : {}),
 };
 
-export const shadows: Shadows = {
+const shadows: Shadows = {
   xs: "0px 4px 4px 0px rgba(18, 18, 18, 0.04), 0px 1px 3px 0px rgba(39, 41, 45, 0.02)",
   sm: "0px 4px 4px 0px rgba(18, 18, 18, 0.08), 0px 1px 3px 0px rgba(39, 41, 45, 0.04)",
   md: "0px 8px 8px 0px rgba(18, 18, 18, 0.16), 0px 2px 3px 0px rgba(39, 41, 45, 0.06)",
@@ -81,7 +83,7 @@ export const shadows: Shadows = {
   xl: "0px 24px 32px 0px rgba(18, 18, 18, 0.24), 0px 2px 3px 0px rgba(39, 41, 45, 0.12)",
 };
 
-export const shadowsDark: Shadows = {
+const shadowsDark: Shadows = {
   xs: "0px 4px 4px 0px rgba(255, 255, 255, 0.04), 0px 1px 3px 0px rgba(255, 255, 255, 0.02)",
   sm: "0px 4px 4px 0px rgba(255, 255, 255, 0.08), 0px 1px 3px 0px rgba(255, 255, 255, 0.04)",
   md: "0px 8px 8px 0px rgba(255, 255, 255, 0.16), 0px 2px 3px 0px rgba(255, 255, 255, 0.06)",
@@ -89,13 +91,13 @@ export const shadowsDark: Shadows = {
   xl: "0px 24px 32px 0px rgba(255, 255, 255, 0.24), 0px 2px 3px 0px rgba(255, 255, 255, 0.12)",
 };
 
-export const fonts: Fonts = {
+const fonts: Fonts = {
   text: "Inter",
   head: "Inter",
   mono: "Roboto Mono, monospace",
 };
 
-export const fontSizes: FontSizes = {
+const fontSizes: FontSizes = {
   hero1: { xs: "72px", lg: "128px" },
   hero2: { xs: "60px", lg: "96px" },
   hero3: { xs: "36px", lg: "72px" },
@@ -123,7 +125,7 @@ export const fontSizes: FontSizes = {
   inputSmall: { xs: "14px", lg: "14px" },
 };
 
-export const lineHeights: LineHeights = {
+const lineHeights: LineHeights = {
   hero1: { xs: "1.1", lg: "1.1" },
   hero2: { xs: "1.1", lg: "1.1" },
   hero3: { xs: "1.17", lg: "1.1" },
@@ -173,7 +175,7 @@ export const themeDark: Theme = {
   isDark: true,
 };
 
-export interface Breakpoints<TNumber = number> {
+interface Breakpoints<TNumber = number> {
   xs: TNumber;
   sm: TNumber;
   md: TNumber;
@@ -183,14 +185,14 @@ export interface Breakpoints<TNumber = number> {
   xxxl: TNumber;
 }
 
-export interface Spacing<TString = string> {
+interface Spacing<TString = string> {
   maxWidth: { xs: TString; xxxl: TString };
   padding: { xs: TString; lg: TString };
   radius: { xs: TString; lg: TString; xl: TString };
   gridGap: { xs: TString; lg: TString };
 }
 
-export interface Colors<TString = string> {
+interface Colors<TString = string> {
   primaryLight: TString;
   primary: TString;
   primaryDark: TString;
@@ -224,13 +226,13 @@ interface Shadows<TString = string> {
   xl: TString;
 }
 
-export interface Fonts<TString = string> {
+interface Fonts<TString = string> {
   head: TString;
   text: TString;
   mono: TString;
 }
 
-export interface FontSizes<TString = string> {
+interface FontSizes<TString = string> {
   hero1: { xs: TString; lg: TString };
   hero2: { xs: TString; lg: TString };
   hero3: { xs: TString; lg: TString };
@@ -258,7 +260,7 @@ export interface FontSizes<TString = string> {
   inputSmall: { xs: TString; lg: TString };
 }
 
-export interface LineHeights<TString = string> {
+interface LineHeights<TString = string> {
   hero1: { xs: TString; lg: TString };
   hero2: { xs: TString; lg: TString };
   hero3: { xs: TString; lg: TString };

package/dist/templates/components/Chat.d.ts

@@ -1 +1 @@
-export declare const chatTemplate = "\"use client\";\nimport React, {\n  createContext,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport styled, { css, keyframes } from \"styled-components\";\nimport { rgba } from \"polished\";\nimport { Button } from \"cherry-styled-components\";\nimport { ArrowUp, LoaderPinwheel, Sparkles, X } from \"lucide-react\";\nimport remarkGfm from \"remark-gfm\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport { MDXRemote, MDXRemoteSerializeResult } from \"next-mdx-remote\";\nimport { serialize } from \"next-mdx-remote/serialize\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { useMDXComponents as getMDXComponents } from \"@/components/MDXComponents\";\nimport {\n  styledAnchor,\n  styledTable,\n  stylesLists,\n} from \"@/components/layout/SharedStyled\";\n\nconst mdxComponents = getMDXComponents({});\n\nconst styledText = css<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.text.xs};\n  line-height: ${({ theme }) => theme.lineHeights.text.xs};\n\n  ${mq(\"lg\")} {\n    font-size: ${({ theme }) => theme.fontSizes.small.lg};\n    line-height: ${({ theme }) => theme.lineHeights.small.lg};\n  }\n`;\n\nconst StyledChat = styled.div<{ theme: Theme; $isVisible: boolean }>`\n  margin: 0;\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: calc(100vh - 90px);\n  overflow-y: scroll;\n  overflow-x: hidden;\n  z-index: 1000;\n  padding: 0 20px;\n  transition: all 0.3s ease;\n  transform: translateX(0);\n  background: ${({ theme }) => theme.colors.light};\n  -webkit-overflow-scrolling: touch;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${({ $isVisible }) =>\n    !$isVisible &&\n    css`\n      transform: translateX(100%);\n    `}\n\n  ${mq(\"lg\")} {\n    width: 420px;\n    border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n  }\n`;\n\nconst loadingAnimation = keyframes`\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n`;\n\nconst rotateGradient = keyframes`\n  0% {\n    --gradient-angle: 0deg;\n  }\n  100% {\n    --gradient-angle: 360deg;\n  }\n`;\n\nconst pulseGlow = keyframes`\n  0%, 100% {\n    opacity: 0.5;\n    filter: blur(16px);\n  }\n  50% {\n    opacity: 1;\n    filter: blur(22px);\n  }\n`;\n\nconst sparkleFloat = keyframes`\n  0%, 100% {\n    opacity: 0;\n    transform: translateY(0) scale(0);\n  }\n  50% {\n    opacity: 0.9;\n    transform: translateY(-20px) scale(1);\n  }\n`;\n\nconst shimmer = keyframes`\n  0% {\n    background-position: 0% center;\n  }\n  50% {\n    background-position: 100% center;\n  }\n  100% {\n    background-position: 0% center;\n  }\n`;\n\nconst StyledRainbowInputWrapper = styled.div<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  @property --gradient-angle {\n    syntax: \"<angle>\";\n    initial-value: 0deg;\n    inherits: false;\n  }\n\n  position: relative;\n  flex: 1;\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: -2px;\n    border-radius: 14px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      #cc5555,\n      #d9a745,\n      #3ab0cc,\n      #cc7fc2,\n      #4380cc,\n      #4c1fa3,\n      #cc5555\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation: ${rotateGradient} 3s linear infinite;\n    z-index: 0;\n  }\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: -10px;\n    border-radius: 20px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      ${rgba(\"#ff6b6b\", 0.4)},\n      ${rgba(\"#feca57\", 0.4)},\n      ${rgba(\"#48dbfb\", 0.4)},\n      ${rgba(\"#ff9ff3\", 0.4)},\n      ${rgba(\"#54a0ff\", 0.4)},\n      ${rgba(\"#5f27cd\", 0.4)},\n      ${rgba(\"#ff6b6b\", 0.4)}\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation:\n      ${rotateGradient} 3s linear infinite,\n      ${pulseGlow} 2s ease-in-out infinite;\n    z-index: -1;\n    pointer-events: none;\n  }\n\n  &:hover::before,\n  &:focus-within::before {\n    opacity: 1;\n  }\n\n  &:hover::after,\n  &:focus-within::after {\n    opacity: 1;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      &::before {\n        opacity: 1;\n      }\n      &::after {\n        opacity: 1;\n      }\n    `}\n`;\n\nconst StyledSparkleContainer = styled.div<{ $isActive: boolean }>`\n  position: absolute;\n  inset: -30px;\n  pointer-events: none;\n  overflow: hidden;\n  border-radius: 30px;\n  z-index: -2;\n  opacity: 0;\n  transition: opacity 0.4s ease;\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      opacity: 1;\n    `}\n`;\n\nconst StyledSparkle = styled.div<{\n  $color: string;\n  $left: number;\n  $top: number;\n  $delay: number;\n}>`\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: ${({ $color }) => $color};\n  box-shadow: 0 0 6px ${({ $color }) => $color};\n  left: ${({ $left }) => $left}%;\n  top: ${({ $top }) => $top}%;\n  animation: ${sparkleFloat} 2s ease-in-out infinite;\n  animation-delay: ${({ $delay }) => $delay}s;\n`;\n\nconst StyledRainbowInput = styled.input<{ theme: Theme }>`\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  background: ${({ theme }) => theme.colors.light};\n  border: 1px solid ${({ theme }) => theme.colors.grayLight};\n  border-radius: 12px;\n  padding: 14px 18px;\n  font-size: ${({ theme }) => theme.fontSizes.text.lg};\n  font-family: inherit;\n  color: ${({ theme }) => theme.colors.dark};\n  outline: none;\n  transition:\n    border-color 0.3s ease,\n    box-shadow 0.3s ease;\n\n  ${mq(\"lg\")} {\n    font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  }\n\n  &::placeholder {\n    color: ${({ theme }) => rgba(theme.colors.dark, 0.4)};\n    transition: color 0.3s ease;\n  }\n\n  &:focus::placeholder {\n    color: ${({ theme }) => rgba(theme.colors.dark, 0.6)};\n  }\n\n  &:focus {\n    border-color: transparent;\n  }\n`;\n\nconst StyledRainbowButton = styled(Button)<{\n  theme: Theme;\n  $hasContent: boolean;\n}>`\n  padding-top: 10px;\n  padding-bottom: 10px;\n  position: relative;\n  overflow: hidden;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.dark : theme.colors.light};\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(\n      135deg,\n      #ff6b6b,\n      #feca57,\n      #48dbfb,\n      #ff9ff3,\n      #54a0ff\n    );\n    background-size: 300% 300%;\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    z-index: 0;\n    animation: ${shimmer} 3s linear infinite;\n    width: 200%;\n  }\n\n  ${({ $hasContent }) =>\n    $hasContent &&\n    css`\n      &::before {\n        opacity: 1;\n      }\n    `}\n\n  &:hover::before {\n    opacity: 1;\n  }\n\n  &:hover {\n    transform: scale(1.05);\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n\n  & svg {\n    position: relative;\n    z-index: 1;\n    transition: transform 0.3s ease;\n  }\n\n  &:disabled,\n  &:disabled:hover {\n    background: ${({ theme }) => theme.colors.primaryDark};\n    transform: none;\n    box-shadow: none;\n\n    &::before {\n      opacity: 0;\n    }\n  }\n`;\n\nconst StyledChatForm = styled.form<{ theme: Theme; $isVisible: boolean }>`\n  display: flex;\n  gap: 10px;\n  justify-content: center;\n  align-items: center;\n  background: ${({ theme }) => theme.colors.light};\n  padding: 20px;\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  z-index: 1000;\n  width: 100%;\n  border-top: solid 1px ${({ theme }) => theme.colors.grayLight};\n  transition: all 0.3s ease;\n  transform: translateX(100%);\n\n  ${mq(\"lg\")} {\n    width: 420px;\n    border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n  }\n\n  ${({ $isVisible }) =>\n    $isVisible &&\n    css`\n      transform: translateX(0);\n    `}\n\n  & .loading {\n    animation: ${loadingAnimation} 1s linear infinite;\n  }\n`;\n\nconst StyledChatFixedForm = styled.form<{\n  theme: Theme;\n  $hide: boolean;\n}>`\n  transition: all 0.3s ease;\n  position: fixed;\n  bottom: 20px;\n  left: 20px;\n  width: calc(100% - 115px);\n  z-index: 998;\n\n  ${mq(\"lg\")} {\n    left: 50%;\n    transform: translateX(-50%) translateY(0);\n    bottom: initial;\n    position: absolute;\n    top: 153px;\n    width: calc(100% - 320px * 2 - 40px);\n    opacity: 1;\n  }\n\n  ${({ $hide }) =>\n    $hide &&\n    css`\n      transform: translateX(-100px);\n\n      ${mq(\"lg\")} {\n        opacity: 0;\n        transform: translateX(-50%) translateY(-20px);\n      }\n    `}\n\n  & .loading {\n    animation: ${loadingAnimation} 1s linear infinite;\n  }\n`;\n\nconst StyledChatFixedInner = styled.div`\n  margin: auto;\n  display: flex;\n  gap: 10px;\n  justify-content: center;\n  align-items: center;\n\n  ${mq(\"lg\")} {\n    max-width: 640px;\n  }\n`;\n\nconst StyledError = styled.div<{ theme: Theme }>`\n  overflow-x: auto;\n  background: ${({ theme }) => theme.colors.error};\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.dark : theme.colors.light};\n  padding: 10px;\n  border-radius: 8px;\n  margin: 20px 0;\n  width: 100%;\n  ${styledText};\n`;\n\nconst loadingDotAnimation = keyframes`\n    0% {\n      opacity: 0;\n    }\n    50% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n`;\n\nconst StyledLoading = styled.div<{ theme: Theme }>`\n  overflow-x: auto;\n  margin: 20px 0;\n  width: 100%;\n  font-weight: 600;\n  ${styledText};\n  color: ${({ theme }) => theme.colors.dark};\n\n  & span {\n    &:nth-child(1) {\n      animation: ${loadingDotAnimation} 1s ease infinite;\n    }\n    &:nth-child(2) {\n      animation: ${loadingDotAnimation} 1s ease infinite;\n      animation-delay: 0.2s;\n    }\n    &:nth-child(3) {\n      animation: ${loadingDotAnimation} 1s ease infinite;\n      animation-delay: 0.4s;\n    }\n  }\n`;\n\nconst StyledAnswer = styled.div<{ theme: Theme; $isAnswer: boolean }>`\n  overflow-x: auto;\n  background: ${({ theme }) => theme.colors.primary};\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.dark : theme.colors.light};\n  padding: 10px;\n  border-radius: 8px;\n  margin: 20px 0;\n  width: 100%;\n  ${styledText};\n\n  & p {\n    ${styledText};\n  }\n\n  ${({ $isAnswer }) =>\n    $isAnswer &&\n    css`\n      background: transparent;\n      color: ${({ theme }) => theme.colors.dark};\n      padding: 0;\n    `}\n\n  & code:not([class]) {\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n    color: ${({ theme }) => theme.colors.dark};\n    padding: 2px 4px;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    white-space: pre;\n  }\n\n  ${styledAnchor};\n  ${stylesLists};\n  ${styledTable};\n\n  & pre,\n  & .hljs {\n    margin: 10px 0;\n  }\n\n  & .code-wrapper pre {\n    margin: 0;\n    ${styledText};\n  }\n\n  & > *:first-child {\n    margin-top: 0;\n  }\n\n  & > *:last-child {\n    margin-bottom: 0;\n\n    & > *:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  & ul,\n  & ol {\n    & li {\n      ${styledText};\n    }\n  }\n\n  & ol {\n    & > li {\n      padding-left: 20px;\n\n      &::before {\n        position: absolute;\n        top: 0;\n        left: 0;\n      }\n    }\n  }\n\n  & img,\n  & video,\n  & iframe {\n    max-width: 100%;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\n    margin: 10px 0;\n    display: block;\n  }\n\n  & h1,\n  & h2,\n  & h3,\n  & h4,\n  & h5,\n  & h6 {\n    margin: 10px 0;\n    padding: 0;\n  }\n`;\n\nconst StyledChatTitle = styled.div<{ theme: Theme }>`\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  position: sticky;\n  margin: 0 -20px;\n  padding: 16px 20px;\n  height: 62px;\n  top: 0;\n  background: ${({ theme }) => theme.colors.light};\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  z-index: 1000;\n`;\n\nconst StyledChatTitleIconWrapper = styled.span<{ theme: Theme }>`\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  color: ${({ theme }) => theme.colors.dark};\n`;\n\nconst StyledChatCloseButton = styled.button<{ theme: Theme }>`\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  color: ${({ theme }) => theme.colors.primary};\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primaryDark};\n    transform: scale(1.05);\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n`;\n\ntype Answer = {\n  text: string;\n  answer?: boolean;\n  mdx?: MDXRemoteSerializeResult;\n};\n\nconst SPARKLE_COLORS = [\n  \"#ff6b6b\",\n  \"#feca57\",\n  \"#48dbfb\",\n  \"#ff9ff3\",\n  \"#54a0ff\",\n  \"#5f27cd\",\n];\n\n// Deterministic sparkle positions to avoid hydration mismatch\nconst SPARKLE_POSITIONS = [\n  { left: 8, top: 35 },\n  { left: 17, top: 55 },\n  { left: 26, top: 28 },\n  { left: 35, top: 68 },\n  { left: 44, top: 42 },\n  { left: 53, top: 75 },\n  { left: 62, top: 32 },\n  { left: 71, top: 58 },\n  { left: 80, top: 45 },\n  { left: 89, top: 65 },\n];\n\ninterface RainbowInputProps {\n  id?: string;\n  value: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  placeholder?: string;\n  autoComplete?: string;\n  \"aria-label\"?: string;\n}\n\nfunction RainbowInput({\n  id,\n  value,\n  onChange,\n  placeholder,\n  autoComplete,\n  \"aria-label\": ariaLabel,\n}: RainbowInputProps) {\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const isActive = isFocused || isHovered;\n\n  const sparkles = SPARKLE_POSITIONS.map((pos, i) => ({\n    color: SPARKLE_COLORS[i % SPARKLE_COLORS.length],\n    left: pos.left,\n    top: pos.top,\n    delay: i * 0.12,\n  }));\n\n  return (\n    <StyledRainbowInputWrapper\n      $isActive={isActive}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <StyledSparkleContainer $isActive={isActive}>\n        {sparkles.map((sparkle, i) => (\n          <StyledSparkle\n            key={i}\n            $color={sparkle.color}\n            $left={sparkle.left}\n            $top={sparkle.top}\n            $delay={sparkle.delay}\n          />\n        ))}\n      </StyledSparkleContainer>\n      <StyledRainbowInput\n        id={id}\n        value={value}\n        onChange={onChange}\n        placeholder={placeholder}\n        autoComplete={autoComplete}\n        aria-label={ariaLabel}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n      />\n    </StyledRainbowInputWrapper>\n  );\n}\n\nfunction Chat() {\n  const [question, setQuestion] = useState(\"\");\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const [answer, setAnswer] = useState<Answer[]>([]);\n  const endRef = useRef<HTMLDivElement | null>(null);\n  const abortRef = useRef<AbortController | null>(null);\n  const { isOpen, setIsOpen } = useContext(ChatContext);\n\n  useEffect(() => {\n    endRef.current?.scrollIntoView({ behavior: \"smooth\", block: \"end\" });\n  }, [answer]);\n\n  useEffect(() => {\n    if (answer?.length > 0) {\n      const el = document.getElementById(\n        \"chat-bottom-input\",\n      ) as HTMLInputElement | null;\n      el?.focus();\n    }\n  }, [answer]);\n\n  async function ask(e: React.FormEvent) {\n    e.preventDefault();\n    if (loading || question.trim() === \"\") return;\n    const currentQuestion = question;\n    setQuestion(\"\");\n    setIsOpen(true);\n    setLoading(true);\n    setError(null);\n\n    const mergedQuestions =\n      answer.length > 0\n        ? [...answer, { text: currentQuestion, answer: false }]\n        : [{ text: currentQuestion, answer: false }];\n\n    setAnswer(mergedQuestions);\n\n    const controller = new AbortController();\n    abortRef.current = controller;\n\n    try {\n      // Build conversation history from previous Q&A pairs\n      const history = answer\n        .filter((a) => a.text.trim() !== \"\")\n        .map((a) => ({\n          role: a.answer ? (\"assistant\" as const) : (\"user\" as const),\n          content: a.text,\n        }));\n\n      const res = await fetch(\"/api/rag\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ question: currentQuestion, history }),\n        signal: controller.signal,\n      });\n\n      if (!res.ok) {\n        const errorData = await res.json();\n        throw new Error(errorData.error || \"Request failed\");\n      }\n\n      const reader = res.body?.getReader();\n      const decoder = new TextDecoder();\n      const contentParts: string[] = [];\n      if (!reader) {\n        throw new Error(\"Failed to get response reader\");\n      }\n\n      // Add a placeholder for the streaming answer\n      const streamingAnswerIndex = mergedQuestions.length;\n      setAnswer([...mergedQuestions, { text: \"\", answer: true }]);\n\n      let buffer = \"\";\n      while (true) {\n        const { done, value } = await reader.read();\n        if (done) break;\n\n        buffer += decoder.decode(value, { stream: true });\n        const parts = buffer.split(\"\\n\");\n        // Keep the last (potentially incomplete) part in the buffer\n        buffer = parts.pop() ?? \"\";\n\n        for (const line of parts) {\n          if (line.startsWith(\"data: \")) {\n            try {\n              const data = JSON.parse(line.slice(6));\n\n              if (data.type === \"content\") {\n                contentParts.push(data.data);\n                const streamedContent = contentParts.join(\"\");\n\n                setAnswer((prev) => {\n                  const newAnswers = [...prev];\n                  newAnswers[streamingAnswerIndex] = {\n                    text: streamedContent,\n                    answer: true,\n                  };\n                  return newAnswers;\n                });\n              } else if (data.type === \"error\") {\n                throw new Error(data.data);\n              } else if (data.type === \"done\") {\n                const streamedContent = contentParts.join(\"\");\n                // Finalize with MDX serialization\n                let mdxSource: MDXRemoteSerializeResult | null = null;\n                try {\n                  mdxSource = await serialize(streamedContent, {\n                    parseFrontmatter: false,\n                    mdxOptions: {\n                      remarkPlugins: [remarkGfm],\n                      rehypePlugins: [rehypeHighlight],\n                      format: \"md\",\n                      development: false,\n                    },\n                  });\n                } catch (mdxError: unknown) {\n                  console.error(\"MDX serialization error:\", mdxError);\n                }\n\n                setAnswer((prev) => {\n                  const newAnswers = [...prev];\n                  newAnswers[streamingAnswerIndex] = {\n                    text: streamedContent,\n                    answer: true,\n                    mdx: mdxSource || undefined,\n                  };\n                  return newAnswers;\n                });\n              }\n            } catch (parseError) {\n              if (\n                parseError instanceof Error &&\n                parseError.message !== \"Unknown error\"\n              ) {\n                console.error(\"Failed to parse SSE data:\", parseError);\n              }\n            }\n          }\n        }\n      }\n    } catch (err: unknown) {\n      if (err instanceof DOMException && err.name === \"AbortError\") return;\n      setError(err instanceof Error ? err.message : \"Unknown error\");\n    } finally {\n      abortRef.current = null;\n      setLoading(false);\n    }\n  }\n\n  return (\n    <>\n      <StyledChatFixedForm onSubmit={ask} $hide={answer?.length > 0}>\n        <StyledChatFixedInner>\n          <RainbowInput\n            value={question}\n            onChange={(e) => setQuestion(e.target.value)}\n            placeholder=\"Ask AI Assistant...\"\n            autoComplete=\"off\"\n            aria-label=\"Ask a question about the documentation\"\n          />\n          <StyledRainbowButton\n            type=\"submit\"\n            disabled={loading}\n            $hasContent={question.trim().length > 0}\n            aria-label={loading ? \"Loading response\" : \"Submit question\"}\n          >\n            {loading ? <LoaderPinwheel className=\"loading\" /> : <ArrowUp />}\n          </StyledRainbowButton>\n        </StyledChatFixedInner>\n      </StyledChatFixedForm>\n\n      <StyledChat $isVisible={isOpen}>\n        <StyledChatTitle>\n          <StyledChatTitleIconWrapper>\n            <Sparkles />\n            <h3>AI Assistant</h3>\n          </StyledChatTitleIconWrapper>\n          <StyledChatCloseButton\n            onClick={() => {\n              abortRef.current?.abort();\n              setAnswer([]);\n              setIsOpen(false);\n            }}\n            aria-label=\"Close chat\"\n          >\n            <X />\n          </StyledChatCloseButton>\n        </StyledChatTitle>\n        {answer &&\n          answer.map((a, i) => (\n            <StyledAnswer key={i} $isAnswer={a.answer ?? false}>\n              {a.answer && a.mdx ? (\n                <MDXRemote {...a.mdx} components={mdxComponents} />\n              ) : (\n                a.text\n              )}\n            </StyledAnswer>\n          ))}\n        {loading && (\n          <StyledLoading>\n            Answering<span>.</span>\n            <span>.</span>\n            <span>.</span>\n          </StyledLoading>\n        )}\n        {error && (\n          <StyledError>\n            <strong>Error:</strong> {error}\n          </StyledError>\n        )}\n        <div ref={endRef} />\n      </StyledChat>\n\n      <StyledChatForm onSubmit={ask} $isVisible={isOpen}>\n        <RainbowInput\n          id=\"chat-bottom-input\"\n          value={question}\n          onChange={(e) => setQuestion(e.target.value)}\n          placeholder=\"Ask AI Assistant...\"\n          autoComplete=\"off\"\n          aria-label=\"Ask a follow-up question\"\n        />\n        <StyledRainbowButton\n          type=\"submit\"\n          disabled={loading || question.trim() === \"\"}\n          $hasContent={question.trim().length > 0}\n          aria-label={loading ? \"Loading response\" : \"Submit question\"}\n        >\n          {loading ? <LoaderPinwheel className=\"loading\" /> : <ArrowUp />}\n        </StyledRainbowButton>\n      </StyledChatForm>\n    </>\n  );\n}\n\nconst ChatContext = createContext<{\n  isOpen: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n  isChatActive: boolean;\n}>({\n  isOpen: false,\n  setIsOpen: () => {},\n  isChatActive: false,\n});\n\ninterface ChatContextProviderProps {\n  children: React.ReactNode;\n  isChatActive: boolean;\n}\n\nconst ChtProvider = ({ children, isChatActive }: ChatContextProviderProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <ChatContext.Provider\n      value={{\n        isOpen,\n        setIsOpen,\n        isChatActive,\n      }}\n    >\n      {children}\n    </ChatContext.Provider>\n  );\n};\n\nexport { Chat, ChtProvider, ChatContext };\n";
+export declare const chatTemplate = "\"use client\";\nimport React, {\n  createContext,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport styled, { css, keyframes } from \"styled-components\";\nimport { rgba } from \"polished\";\nimport { Button } from \"cherry-styled-components\";\nimport { ArrowUp, LoaderPinwheel, RotateCcw, Sparkles, X } from \"lucide-react\";\nimport remarkGfm from \"remark-gfm\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport { MDXRemote, MDXRemoteSerializeResult } from \"next-mdx-remote\";\nimport { serialize } from \"next-mdx-remote/serialize\";\nimport Link from \"next/link\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { useLockBodyScroll } from \"@/components/LockBodyScroll\";\nimport { useMDXComponents as getMDXComponents } from \"@/components/MDXComponents\";\nimport {\n  styledAnchor,\n  styledTable,\n  stylesLists,\n  StyledSmallButton,\n  interactiveStyles,\n} from \"@/components/layout/SharedStyled\";\n\nconst mdxComponents = getMDXComponents({});\n\nconst styledText = css<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.text.xs};\n  line-height: ${({ theme }) => theme.lineHeights.text.xs};\n\n  ${mq(\"lg\")} {\n    font-size: ${({ theme }) => theme.fontSizes.small.lg};\n    line-height: ${({ theme }) => theme.lineHeights.small.lg};\n  }\n`;\n\nconst StyledChat = styled.div<{ theme: Theme; $isVisible: boolean }>`\n  margin: 0;\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: calc(100dvh - 90px);\n  overflow-y: scroll;\n  overflow-x: hidden;\n  z-index: 1000;\n  padding: 0 20px;\n  transition: all 0.3s ease;\n  transform: translateX(0);\n  background: ${({ theme }) => theme.colors.light};\n  -webkit-overflow-scrolling: touch;\n  opacity: 1;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${({ $isVisible }) =>\n    !$isVisible &&\n    css`\n      transform: translateX(100%);\n      opacity: 0;\n    `}\n\n  ${mq(\"lg\")} {\n    width: 420px;\n    border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n  }\n`;\n\nconst loadingAnimation = keyframes`\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n`;\n\nconst rotateGradient = keyframes`\n  0% {\n    --gradient-angle: 0deg;\n  }\n  100% {\n    --gradient-angle: 360deg;\n  }\n`;\n\nconst pulseGlow = keyframes`\n  0%, 100% {\n    opacity: 0.5;\n    filter: blur(16px);\n  }\n  50% {\n    opacity: 1;\n    filter: blur(22px);\n  }\n`;\n\nconst sparkleFloat = keyframes`\n  0%, 100% {\n    opacity: 0;\n    transform: translateY(0) scale(0);\n  }\n  50% {\n    opacity: 0.9;\n    transform: translateY(-20px) scale(1);\n  }\n`;\n\nconst shimmer = keyframes`\n  0% {\n    background-position: 0% center;\n  }\n  50% {\n    background-position: 100% center;\n  }\n  100% {\n    background-position: 0% center;\n  }\n`;\n\nconst StyledRainbowInputWrapper = styled.div<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  @property --gradient-angle {\n    syntax: \"<angle>\";\n    initial-value: 0deg;\n    inherits: false;\n  }\n\n  position: relative;\n  flex: 1;\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: -2px;\n    border-radius: 14px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      #cc5555,\n      #d9a745,\n      #3ab0cc,\n      #cc7fc2,\n      #4380cc,\n      #4c1fa3,\n      #cc5555\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation: ${rotateGradient} 3s linear infinite;\n    z-index: 0;\n  }\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: -10px;\n    border-radius: 20px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      ${rgba(\"#ff6b6b\", 0.4)},\n      ${rgba(\"#feca57\", 0.4)},\n      ${rgba(\"#48dbfb\", 0.4)},\n      ${rgba(\"#ff9ff3\", 0.4)},\n      ${rgba(\"#54a0ff\", 0.4)},\n      ${rgba(\"#5f27cd\", 0.4)},\n      ${rgba(\"#ff6b6b\", 0.4)}\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation:\n      ${rotateGradient} 3s linear infinite,\n      ${pulseGlow} 2s ease-in-out infinite;\n    z-index: -1;\n    pointer-events: none;\n  }\n\n  &:hover::before,\n  &:focus-within::before {\n    opacity: 1;\n  }\n\n  &:hover::after,\n  &:focus-within::after {\n    opacity: 1;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      &::before {\n        opacity: 1;\n      }\n      &::after {\n        opacity: 1;\n      }\n    `}\n`;\n\nconst StyledSparkleContainer = styled.div<{ $isActive: boolean }>`\n  position: absolute;\n  inset: -30px;\n  pointer-events: none;\n  overflow: hidden;\n  border-radius: 30px;\n  z-index: -2;\n  opacity: 0;\n  transition: opacity 0.4s ease;\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      opacity: 1;\n    `}\n`;\n\nconst StyledSparkle = styled.div<{\n  $color: string;\n  $left: number;\n  $top: number;\n  $delay: number;\n}>`\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: ${({ $color }) => $color};\n  box-shadow: 0 0 6px ${({ $color }) => $color};\n  left: ${({ $left }) => $left}%;\n  top: ${({ $top }) => $top}%;\n  animation: ${sparkleFloat} 2s ease-in-out infinite;\n  animation-delay: ${({ $delay }) => $delay}s;\n`;\n\nconst StyledRainbowInput = styled.input<{ theme: Theme }>`\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  background: ${({ theme }) => theme.colors.light};\n  border: 1px solid ${({ theme }) => theme.colors.grayLight};\n  border-radius: 12px;\n  padding: 14px 18px;\n  font-size: ${({ theme }) => theme.fontSizes.text.lg};\n  font-family: inherit;\n  color: ${({ theme }) => theme.colors.dark};\n  outline: none;\n  transition:\n    border-color 0.3s ease,\n    box-shadow 0.3s ease;\n\n  ${mq(\"lg\")} {\n    font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  }\n\n  &::placeholder {\n    color: ${({ theme }) => rgba(theme.colors.dark, 0.4)};\n    transition: color 0.3s ease;\n  }\n\n  &:focus::placeholder {\n    color: ${({ theme }) => rgba(theme.colors.dark, 0.6)};\n  }\n\n  &:focus {\n    border-color: transparent;\n  }\n`;\n\nconst StyledRainbowButton = styled(Button)<{\n  theme: Theme;\n  $hasContent: boolean;\n}>`\n  padding-top: 10px;\n  padding-bottom: 10px;\n  position: relative;\n  overflow: hidden;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.dark : theme.colors.light};\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(\n      135deg,\n      #ff6b6b,\n      #feca57,\n      #48dbfb,\n      #ff9ff3,\n      #54a0ff\n    );\n    background-size: 300% 300%;\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    z-index: 0;\n    animation: ${shimmer} 3s linear infinite;\n    width: 200%;\n  }\n\n  ${({ $hasContent }) =>\n    $hasContent &&\n    css`\n      &::before {\n        opacity: 1;\n      }\n    `}\n\n  &:hover::before {\n    opacity: 1;\n  }\n\n  &:hover {\n    transform: scale(1.05);\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n\n  & svg {\n    position: relative;\n    z-index: 1;\n    transition: transform 0.3s ease;\n  }\n\n  &:disabled,\n  &:disabled:hover {\n    background: ${({ theme }) => theme.colors.primaryDark};\n    transform: none;\n    box-shadow: none;\n\n    &::before {\n      opacity: 0;\n    }\n  }\n`;\n\nconst StyledChatForm = styled.form<{ theme: Theme; $isVisible: boolean }>`\n  display: flex;\n  gap: 10px;\n  justify-content: center;\n  align-items: center;\n  background: ${({ theme }) => theme.colors.light};\n  padding: 20px;\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  z-index: 1000;\n  width: 100%;\n  border-top: solid 1px ${({ theme }) => theme.colors.grayLight};\n  transition: all 0.3s ease;\n  transform: translateX(100%);\n  opacity: 0;\n\n  ${mq(\"lg\")} {\n    width: 420px;\n    border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n  }\n\n  ${({ $isVisible }) =>\n    $isVisible &&\n    css`\n      opacity: 1;\n      transform: translateX(0);\n    `}\n\n  & .loading {\n    animation: ${loadingAnimation} 1s linear infinite;\n  }\n`;\n\nconst StyledGlowSmallButton = styled(StyledSmallButton)<{\n  theme: Theme;\n  $hasContent: boolean;\n}>`\n  @property --gradient-angle {\n    syntax: \"<angle>\";\n    initial-value: 0deg;\n    inherits: false;\n  }\n\n  position: relative;\n  isolation: isolate;\n  margin-right: 0;\n  background: ${({ theme }) => theme.colors.light};\n  padding: 0;\n\n  &::before {\n    content: \"\";\n    inset: -2px;\n    border-radius: 8px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      #cc5555,\n      #d9a745,\n      #3ab0cc,\n      #cc7fc2,\n      #4380cc,\n      #4c1fa3,\n      #cc5555\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation: ${rotateGradient} 3s linear infinite;\n    z-index: -1;\n    position: absolute;\n    top: -2px;\n    left: -2px;\n    width: calc(100% + 4px);\n    height: calc(100% + 4px);\n  }\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: -8px;\n    border-radius: 14px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      ${rgba(\"#ff6b6b\", 0.4)},\n      ${rgba(\"#feca57\", 0.4)},\n      ${rgba(\"#48dbfb\", 0.4)},\n      ${rgba(\"#ff9ff3\", 0.4)},\n      ${rgba(\"#54a0ff\", 0.4)},\n      ${rgba(\"#5f27cd\", 0.4)},\n      ${rgba(\"#ff6b6b\", 0.4)}\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation:\n      ${rotateGradient} 3s linear infinite,\n      ${pulseGlow} 2s ease-in-out infinite;\n    z-index: -2;\n    pointer-events: none;\n  }\n\n  &:hover::before,\n  &:hover::after {\n    opacity: 1;\n  }\n\n  & span {\n    padding: 6px 8px;\n    display: flex;\n    background: ${({ theme }) => theme.colors.light};\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    gap: 6px;\n  }\n\n  ${({ $hasContent }) =>\n    $hasContent &&\n    css`\n      &::before {\n        opacity: 1;\n      }\n      &::after {\n        opacity: 1;\n      }\n    `}\n`;\n\nconst StyledError = styled.div<{ theme: Theme }>`\n  overflow-x: auto;\n  background: ${({ theme }) => theme.colors.error};\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.dark : theme.colors.light};\n  padding: 10px;\n  border-radius: 8px;\n  margin: 20px 0;\n  width: 100%;\n  ${styledText};\n`;\n\nconst loadingDotAnimation = keyframes`\n    0% {\n      opacity: 0;\n    }\n    50% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n`;\n\nconst StyledLoading = styled.div<{ theme: Theme }>`\n  overflow-x: auto;\n  margin: 20px 0;\n  width: 100%;\n  font-weight: 600;\n  ${styledText};\n  color: ${({ theme }) => theme.colors.dark};\n\n  & span {\n    &:nth-child(1) {\n      animation: ${loadingDotAnimation} 1s ease infinite;\n    }\n    &:nth-child(2) {\n      animation: ${loadingDotAnimation} 1s ease infinite;\n      animation-delay: 0.2s;\n    }\n    &:nth-child(3) {\n      animation: ${loadingDotAnimation} 1s ease infinite;\n      animation-delay: 0.4s;\n    }\n  }\n`;\n\nconst StyledAnswer = styled.div<{ theme: Theme; $isAnswer: boolean }>`\n  overflow-x: auto;\n  background: ${({ theme }) => theme.colors.primary};\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.dark : theme.colors.light};\n  padding: 10px;\n  border-radius: 8px;\n  margin: 20px 0;\n  width: 100%;\n  ${styledText};\n\n  & p {\n    ${styledText};\n  }\n\n  ${({ $isAnswer }) =>\n    $isAnswer &&\n    css`\n      background: transparent;\n      color: ${({ theme }) => theme.colors.dark};\n      padding: 0;\n    `}\n\n  & code:not([class]) {\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n    color: ${({ theme }) => theme.colors.dark};\n    padding: 2px 4px;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    white-space: pre;\n  }\n\n  ${styledAnchor};\n  ${stylesLists};\n  ${styledTable};\n\n  & pre,\n  & .hljs {\n    margin: 10px 0;\n  }\n\n  & .code-wrapper pre {\n    margin: 0;\n    ${styledText};\n  }\n\n  & > *:first-child {\n    margin-top: 0;\n  }\n\n  & > *:last-child {\n    margin-bottom: 0;\n\n    & > *:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  & ul,\n  & ol {\n    & li {\n      ${styledText};\n    }\n  }\n\n  & ol {\n    & > li {\n      padding-left: 20px;\n\n      &::before {\n        position: absolute;\n        top: 0;\n        left: 0;\n      }\n    }\n  }\n\n  & img,\n  & video,\n  & iframe {\n    max-width: 100%;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\n    margin: 10px 0;\n    display: block;\n  }\n\n  & h1,\n  & h2,\n  & h3,\n  & h4,\n  & h5,\n  & h6 {\n    margin: 10px 0;\n    padding: 0;\n  }\n`;\n\nconst StyledSources = styled.div`\n  display: flex;\n  gap: 16px;\n  flex-wrap: wrap;\n  margin: -5px 0 20px;\n`;\n\nconst StyledSourceLink = styled(Link)<{ theme: Theme }>`\n  position: relative;\n  text-decoration: none;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  line-height: 1;\n  color: ${({ theme }) => theme.colors.primary};\n  display: flex;\n  gap: 6px;\n  transition: all 0.3s ease;\n  font-weight: 600;\n  white-space: nowrap;\n  min-width: fit-content;\n  background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.1)};\n  padding: 6px 8px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  ${interactiveStyles};\n\n  & * {\n    margin: auto 0;\n  }\n\n  &:hover {\n    color: ${({ theme }) =>\n      theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n  }\n`;\n\nconst StyledChatTitle = styled.div<{ theme: Theme }>`\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  position: sticky;\n  margin: 0 -20px;\n  padding: 16px 20px;\n  height: 62px;\n  top: 0;\n  background: ${({ theme }) => theme.colors.light};\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  z-index: 1000;\n`;\n\nconst StyledChatTitleIconWrapper = styled.span<{ theme: Theme }>`\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  color: ${({ theme }) => theme.colors.dark};\n`;\n\nconst StyledChatCloseButton = styled.button<{ theme: Theme }>`\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  color: ${({ theme }) => theme.colors.primary};\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primaryDark};\n    transform: scale(1.05);\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n`;\n\ntype Source = {\n  id: string;\n  path: string;\n  uri: string;\n  score: number;\n};\n\ntype Answer = {\n  text: string;\n  answer?: boolean;\n  mdx?: MDXRemoteSerializeResult;\n  sources?: Source[];\n};\n\nconst SPARKLE_COLORS = [\n  \"#ff6b6b\",\n  \"#feca57\",\n  \"#48dbfb\",\n  \"#ff9ff3\",\n  \"#54a0ff\",\n  \"#5f27cd\",\n];\n\n// Deterministic sparkle positions to avoid hydration mismatch\nconst SPARKLE_POSITIONS = [\n  { left: 8, top: 35 },\n  { left: 17, top: 55 },\n  { left: 26, top: 28 },\n  { left: 35, top: 68 },\n  { left: 44, top: 42 },\n  { left: 53, top: 75 },\n  { left: 62, top: 32 },\n  { left: 71, top: 58 },\n  { left: 80, top: 45 },\n  { left: 89, top: 65 },\n];\n\ninterface RainbowInputProps {\n  id?: string;\n  value: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  placeholder?: string;\n  autoComplete?: string;\n  \"aria-label\"?: string;\n  inputRef?: React.Ref<HTMLInputElement>;\n}\n\nfunction RainbowInput({\n  id,\n  value,\n  onChange,\n  placeholder,\n  autoComplete,\n  \"aria-label\": ariaLabel,\n  inputRef,\n}: RainbowInputProps) {\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const isActive = isFocused || isHovered;\n\n  const sparkles = SPARKLE_POSITIONS.map((pos, i) => ({\n    color: SPARKLE_COLORS[i % SPARKLE_COLORS.length],\n    left: pos.left,\n    top: pos.top,\n    delay: i * 0.12,\n  }));\n\n  return (\n    <StyledRainbowInputWrapper\n      $isActive={isActive}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <StyledSparkleContainer $isActive={isActive}>\n        {sparkles.map((sparkle, i) => (\n          <StyledSparkle\n            key={i}\n            $color={sparkle.color}\n            $left={sparkle.left}\n            $top={sparkle.top}\n            $delay={sparkle.delay}\n          />\n        ))}\n      </StyledSparkleContainer>\n      <StyledRainbowInput\n        ref={inputRef}\n        id={id}\n        value={value}\n        onChange={onChange}\n        placeholder={placeholder}\n        autoComplete={autoComplete}\n        aria-label={ariaLabel}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n      />\n    </StyledRainbowInputWrapper>\n  );\n}\n\nfunction ChatButtonCTA() {\n  const { setIsOpen, isOpen, answer, setAnswer, chatInputRef } =\n    useContext(ChatContext);\n\n  return (\n    <StyledGlowSmallButton\n      onClick={() => {\n        const next = !isOpen;\n        setIsOpen(next);\n        if (next) {\n          if (answer.length === 0) {\n            setAnswer([\n              { text: \"Hey there, how can I assist you?\", answer: true },\n            ]);\n          }\n          setTimeout(() => {\n            chatInputRef.current?.focus();\n          }, 350);\n        }\n      }}\n      aria-label=\"Ask AI Assistant\"\n      $hasContent={isOpen}\n      type=\"button\"\n    >\n      <span>\n        <Sparkles size={16} />\n        Ask AI\n      </span>\n    </StyledGlowSmallButton>\n  );\n}\n\nfunction Chat() {\n  const {\n    isOpen,\n    question,\n    setQuestion,\n    loading,\n    error,\n    answer,\n    ask,\n    closeChat,\n    resetChat,\n    chatInputRef,\n  } = useContext(ChatContext);\n  const endRef = useRef<HTMLDivElement | null>(null);\n\n  useLockBodyScroll(isOpen);\n\n  useEffect(() => {\n    endRef.current?.scrollIntoView({ behavior: \"smooth\", block: \"end\" });\n  }, [answer]);\n\n  useEffect(() => {\n    if (answer?.length > 0) {\n      chatInputRef.current?.focus();\n    }\n  }, [answer, chatInputRef]);\n\n  return (\n    <>\n      <StyledChat $isVisible={isOpen}>\n        <StyledChatTitle>\n          <StyledChatTitleIconWrapper>\n            <Sparkles />\n            <h3>AI Assistant</h3>\n          </StyledChatTitleIconWrapper>\n          <StyledChatTitleIconWrapper>\n            <StyledChatCloseButton\n              onClick={resetChat}\n              aria-label=\"Reset chat history\"\n              title=\"Reset chat history\"\n            >\n              <RotateCcw size={18} />\n            </StyledChatCloseButton>\n            <StyledChatCloseButton\n              onClick={closeChat}\n              aria-label=\"Close chat\"\n              title=\"Close chat\"\n            >\n              <X />\n            </StyledChatCloseButton>\n          </StyledChatTitleIconWrapper>\n        </StyledChatTitle>\n        {answer &&\n          answer.map((a, i) => (\n            <React.Fragment key={i}>\n              <StyledAnswer $isAnswer={a.answer ?? false}>\n                {a.answer && a.mdx ? (\n                  <MDXRemote {...a.mdx} components={mdxComponents} />\n                ) : (\n                  a.text\n                )}\n              </StyledAnswer>\n              {a.answer && a.sources && a.sources.length > 0 && (\n                <StyledSources>\n                  {a.sources.map((src) => {\n                    const slug = src.uri\n                      .replace(\"docs://\", \"\")\n                      .replace(/^\\/+/, \"\");\n                    const href = slug ? `/${slug}/` : \"/\";\n                    const label = slug\n                      ? slug\n                          .split(\"/\")\n                          .pop()!\n                          .replace(/-/g, \" \")\n                          .replace(/\\b\\w/g, (c: string) => c.toUpperCase())\n                      : \"Home\";\n                    return (\n                      <StyledSourceLink key={src.id} href={href}>\n                        {label}\n                      </StyledSourceLink>\n                    );\n                  })}\n                </StyledSources>\n              )}\n            </React.Fragment>\n          ))}\n        {loading && (\n          <StyledLoading>\n            Answering<span>.</span>\n            <span>.</span>\n            <span>.</span>\n          </StyledLoading>\n        )}\n        {error && (\n          <StyledError>\n            <strong>Error:</strong> {error}\n          </StyledError>\n        )}\n        <div ref={endRef} />\n      </StyledChat>\n\n      <StyledChatForm onSubmit={ask} $isVisible={isOpen}>\n        <RainbowInput\n          id=\"chat-bottom-input\"\n          inputRef={chatInputRef}\n          value={question}\n          onChange={(e) => setQuestion(e.target.value)}\n          placeholder=\"Ask AI Assistant...\"\n          autoComplete=\"off\"\n          aria-label=\"Ask a follow-up question\"\n        />\n        <StyledRainbowButton\n          type=\"submit\"\n          disabled={loading || question.trim() === \"\"}\n          $hasContent={question.trim().length > 0}\n          aria-label={loading ? \"Loading response\" : \"Submit question\"}\n        >\n          {loading ? <LoaderPinwheel className=\"loading\" /> : <ArrowUp />}\n        </StyledRainbowButton>\n      </StyledChatForm>\n    </>\n  );\n}\n\nconst ChatContext = createContext<{\n  isOpen: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n  isChatActive: boolean;\n  question: string;\n  setQuestion: (q: string) => void;\n  loading: boolean;\n  error: string | null;\n  answer: Answer[];\n  setAnswer: (answers: Answer[]) => void;\n  ask: (e: React.FormEvent) => void;\n  closeChat: () => void;\n  resetChat: () => void;\n  chatInputRef: React.RefObject<HTMLInputElement | null>;\n}>({\n  isOpen: false,\n  setIsOpen: () => {},\n  isChatActive: false,\n  question: \"\",\n  setQuestion: () => {},\n  loading: false,\n  error: null,\n  answer: [],\n  setAnswer: () => {},\n  ask: () => {},\n  closeChat: () => {},\n  resetChat: () => {},\n  chatInputRef: { current: null },\n});\n\ninterface ChatContextProviderProps {\n  children: React.ReactNode;\n  isChatActive: boolean;\n}\n\nconst ChtProvider = ({ children, isChatActive }: ChatContextProviderProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [question, setQuestion] = useState(\"\");\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const [answer, setAnswer] = useState<Answer[]>([]);\n  const abortRef = useRef<AbortController | null>(null);\n  const chatInputRef = useRef<HTMLInputElement | null>(null);\n\n  async function ask(e: React.FormEvent) {\n    e.preventDefault();\n    if (loading || question.trim() === \"\") return;\n    const currentQuestion = question;\n    setQuestion(\"\");\n    setIsOpen(true);\n    setLoading(true);\n    setError(null);\n\n    const mergedQuestions =\n      answer.length > 0\n        ? [...answer, { text: currentQuestion, answer: false }]\n        : [{ text: currentQuestion, answer: false }];\n\n    setAnswer(mergedQuestions);\n\n    const controller = new AbortController();\n    abortRef.current = controller;\n\n    try {\n      const history = answer\n        .filter((a) => a.text.trim() !== \"\")\n        .map((a) => ({\n          role: a.answer ? (\"assistant\" as const) : (\"user\" as const),\n          content: a.text,\n        }));\n\n      const res = await fetch(\"/api/rag\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ question: currentQuestion, history }),\n        signal: controller.signal,\n      });\n\n      if (!res.ok) {\n        const errorData = await res.json();\n        throw new Error(errorData.error || \"Request failed\");\n      }\n\n      const reader = res.body?.getReader();\n      const decoder = new TextDecoder();\n      const contentParts: string[] = [];\n      let sources: Source[] = [];\n      if (!reader) {\n        throw new Error(\"Failed to get response reader\");\n      }\n\n      const streamingAnswerIndex = mergedQuestions.length;\n      setAnswer([...mergedQuestions, { text: \"\", answer: true }]);\n\n      let buffer = \"\";\n      while (true) {\n        const { done, value } = await reader.read();\n        if (done) break;\n\n        buffer += decoder.decode(value, { stream: true });\n        const parts = buffer.split(\"\\n\");\n        buffer = parts.pop() ?? \"\";\n\n        for (const line of parts) {\n          if (line.startsWith(\"data: \")) {\n            try {\n              const data = JSON.parse(line.slice(6));\n\n              if (data.type === \"metadata\") {\n                const allSources: Source[] = data.data?.sources ?? [];\n                const seen = new Set<string>();\n                sources = allSources.filter((s: Source) => {\n                  if (s.score < 0.4 || seen.has(s.uri)) return false;\n                  seen.add(s.uri);\n                  return true;\n                });\n              } else if (data.type === \"content\") {\n                contentParts.push(data.data);\n                const streamedContent = contentParts.join(\"\");\n\n                setAnswer((prev) => {\n                  const newAnswers = [...prev];\n                  newAnswers[streamingAnswerIndex] = {\n                    text: streamedContent,\n                    answer: true,\n                    sources,\n                  };\n                  return newAnswers;\n                });\n              } else if (data.type === \"error\") {\n                throw new Error(data.data);\n              } else if (data.type === \"done\") {\n                const streamedContent = contentParts.join(\"\");\n                let mdxSource: MDXRemoteSerializeResult | null = null;\n                try {\n                  mdxSource = await serialize(streamedContent, {\n                    parseFrontmatter: false,\n                    mdxOptions: {\n                      remarkPlugins: [remarkGfm],\n                      rehypePlugins: [rehypeHighlight],\n                      format: \"md\",\n                      development: false,\n                    },\n                  });\n                } catch (mdxError: unknown) {\n                  console.error(\"MDX serialization error:\", mdxError);\n                }\n\n                setAnswer((prev) => {\n                  const newAnswers = [...prev];\n                  newAnswers[streamingAnswerIndex] = {\n                    text: streamedContent,\n                    answer: true,\n                    mdx: mdxSource || undefined,\n                    sources,\n                  };\n                  return newAnswers;\n                });\n              }\n            } catch (parseError) {\n              if (\n                parseError instanceof Error &&\n                parseError.message !== \"Unknown error\"\n              ) {\n                console.error(\"Failed to parse SSE data:\", parseError);\n              }\n            }\n          }\n        }\n      }\n    } catch (err: unknown) {\n      if (err instanceof DOMException && err.name === \"AbortError\") return;\n      setError(err instanceof Error ? err.message : \"Unknown error\");\n    } finally {\n      abortRef.current = null;\n      setLoading(false);\n    }\n  }\n\n  function closeChat() {\n    setIsOpen(false);\n  }\n\n  function resetChat() {\n    abortRef.current?.abort();\n    setLoading(false);\n    setError(null);\n    setAnswer([{ text: \"Hey there, how can I assist you?\", answer: true }]);\n  }\n\n  return (\n    <ChatContext.Provider\n      value={{\n        isOpen,\n        setIsOpen,\n        isChatActive,\n        question,\n        setQuestion,\n        loading,\n        error,\n        answer,\n        setAnswer,\n        ask,\n        closeChat,\n        resetChat,\n        chatInputRef,\n      }}\n    >\n      {children}\n    </ChatContext.Provider>\n  );\n};\n\nexport { Chat, ChtProvider, ChatContext, ChatButtonCTA };\n";