doccupine 0.0.52 → 0.0.54

package/dist/index.js

@@ -62,6 +62,7 @@ import { llmTypesTemplate } from "./templates/services/llm/types.js";
 import { styledDTemplate } from "./templates/types/styled.js";
 import { orderNavItemsTemplate } from "./templates/utils/orderNavItems.js";
 import { rateLimitTemplate } from "./templates/utils/rateLimit.js";
+import { configTemplate } from "./templates/utils/config.js";
 import { accordionMdxTemplate } from "./templates/mdx/accordion.mdx.js";
 import { aiAssistantMdxTemplate } from "./templates/mdx/ai-assistant.mdx.js";
 import { buttonsMdxTemplate } from "./templates/mdx/buttons.mdx.js";
@@ -255,6 +256,7 @@ class MDXToNextJSGenerator {
             "types/styled.d.ts": styledDTemplate,
             "utils/orderNavItems.ts": orderNavItemsTemplate,
             "utils/rateLimit.ts": rateLimitTemplate,
+            "utils/config.ts": configTemplate,
             "components/Chat.tsx": chatTemplate,
             "components/ClickOutside.ts": clickOutsideTemplate,
             "components/Docs.tsx": docsTemplate,
@@ -666,16 +668,7 @@ class MDXToNextJSGenerator {
     async generatePageFromMDX(mdxFile) {
         const pageContent = `import { Metadata } from "next";
 import { Docs } from "@/components/Docs";
-import configData from "@/config.json";
-
-interface Config {
-  name?: string;
-  description?: string;
-  icon?: string;
-  preview?: string;
-}
-
-const config = configData as Config;
+import { config } from "@/utils/config";
 
 const content = \`${escapeTemplateContent(mdxFile.content)}\`;
 
@@ -718,16 +711,7 @@ export default function Page() {
         }
         const indexContent = `import { Metadata } from "next";
 import { Docs } from "@/components/Docs";
-import configData from "@/config.json";
-
-interface Config {
-  name?: string;
-  description?: string;
-  icon?: string;
-  preview?: string;
-}
-
-const config = configData as Config;
+import { config } from "@/utils/config";
 
 ${indexMDX ? `const content = \`${escapeTemplateContent(indexMDX.content)}\`;` : `const content = null;`}
 

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

@@ -1 +1 @@
-export declare const mcpRoutesTemplate = "import { NextResponse } from \"next/server\";\nimport { z } from \"zod\";\nimport { WebStandardStreamableHTTPServerTransport } from \"@modelcontextprotocol/sdk/server/webStandardStreamableHttp.js\";\nimport { createMCPServer } from \"@/services/mcp/server\";\nimport {\n  searchDocs,\n  ensureDocsIndex,\n  getIndexStatus,\n  DOCS_TOOLS,\n  listDocs,\n  getDoc,\n} from \"@/services/mcp\";\nimport type { MCPToolName } from \"@/services/mcp\";\n\nconst searchDocsSchema = z.object({\n  query: z.string().min(1).max(2000),\n  limit: z.number().int().min(1).max(50).optional(),\n});\n\nconst getDocSchema = z.object({\n  path: z.string().min(1).max(500),\n});\n\nconst listDocsSchema = z.object({\n  directory: z.string().max(500).optional(),\n});\n\n// Create a stateless transport for serverless environment\nfunction createTransport() {\n  return new WebStandardStreamableHTTPServerTransport({\n    sessionIdGenerator: undefined, // Stateless mode for serverless\n    enableJsonResponse: true,\n  });\n}\n\n// Handle MCP protocol requests\nasync function handleMCPRequest(req: Request) {\n  const transport = createTransport();\n  const server = createMCPServer();\n\n  try {\n    await server.connect(transport);\n    const response = await transport.handleRequest(req);\n\n    // Clean up after response is done\n    response\n      .clone()\n      .body?.pipeTo(\n        new WritableStream({\n          close() {\n            transport.close();\n            server.close();\n          },\n        }),\n      )\n      .catch(() => {});\n\n    return response;\n  } catch (error) {\n    console.error(\"MCP request error:\", error);\n    return new Response(\n      JSON.stringify({\n        jsonrpc: \"2.0\",\n        error: {\n          code: -32603,\n          message: \"Internal server error\",\n        },\n        id: null,\n      }),\n      {\n        status: 500,\n        headers: { \"Content-Type\": \"application/json\" },\n      },\n    );\n  }\n}\n\n// Handle REST API requests (original JSON format)\ninterface ToolCallRequest {\n  tool: MCPToolName;\n  params: Record<string, unknown>;\n}\n\nasync function handleRESTRequest(body: ToolCallRequest) {\n  try {\n    const { tool, params } = body;\n\n    if (!tool) {\n      return NextResponse.json(\n        { error: \"Missing 'tool' parameter\" },\n        { status: 400 },\n      );\n    }\n\n    switch (tool) {\n      case \"search_docs\": {\n        const parsed = searchDocsSchema.safeParse(params);\n        if (!parsed.success) {\n          return NextResponse.json(\n            { error: \"Invalid params\", details: parsed.error.issues },\n            { status: 400 },\n          );\n        }\n        await ensureDocsIndex();\n        const results = await searchDocs(\n          parsed.data.query,\n          parsed.data.limit ?? 6,\n        );\n        return NextResponse.json({\n          content: results.map(({ chunk, score }) => ({\n            path: chunk.path,\n            uri: chunk.uri,\n            score: score.toFixed(3),\n            text: chunk.text,\n          })),\n        });\n      }\n\n      case \"get_doc\": {\n        const parsed = getDocSchema.safeParse(params);\n        if (!parsed.success) {\n          return NextResponse.json(\n            { error: \"Invalid params\", details: parsed.error.issues },\n            { status: 400 },\n          );\n        }\n        const doc = await getDoc({ path: parsed.data.path });\n        if (!doc) {\n          return NextResponse.json(\n            { error: \"Document not found\" },\n            { status: 404 },\n          );\n        }\n        return NextResponse.json({ content: doc });\n      }\n\n      case \"list_docs\": {\n        const parsed = listDocsSchema.safeParse(params);\n        if (!parsed.success) {\n          return NextResponse.json(\n            { error: \"Invalid params\", details: parsed.error.issues },\n            { status: 400 },\n          );\n        }\n        const docs = await listDocs({\n          directory: parsed.data.directory,\n        });\n        return NextResponse.json({\n          content: docs.map((d) => ({\n            name: d.name,\n            path: d.path,\n            uri: d.uri,\n          })),\n        });\n      }\n\n      default:\n        return NextResponse.json(\n          { error: `Unknown tool: ${tool}` },\n          { status: 400 },\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 POST(req: Request) {\n  // Clone the request to read body twice if needed\n  const clonedReq = req.clone();\n\n  try {\n    const body = await clonedReq.json();\n\n    // Check if this is an MCP protocol request (has jsonrpc field)\n    // or a REST API request (has tool field)\n    if (\"jsonrpc\" in body) {\n      // MCP protocol request - use the original request\n      return handleMCPRequest(req);\n    } else if (\"tool\" in body) {\n      // REST API request\n      return handleRESTRequest(body as ToolCallRequest);\n    } else {\n      return NextResponse.json(\n        {\n          error:\n            \"Invalid request format. Expected 'jsonrpc' (MCP) or 'tool' (REST) field.\",\n        },\n        { status: 400 },\n      );\n    }\n  } catch {\n    return NextResponse.json({ error: \"Invalid JSON body\" }, { status: 400 });\n  }\n}\n\nexport async function GET() {\n  // GET always returns REST API format (tools list and index status)\n  const status = getIndexStatus();\n  return NextResponse.json({\n    tools: DOCS_TOOLS,\n    index: {\n      ready: status.ready,\n      chunkCount: status.chunkCount,\n    },\n  });\n}\n\nexport async function DELETE(req: Request) {\n  // DELETE is only used by MCP protocol\n  return handleMCPRequest(req);\n}\n";
+export declare const mcpRoutesTemplate = "import { NextResponse } from \"next/server\";\nimport { z } from \"zod\";\nimport { WebStandardStreamableHTTPServerTransport } from \"@modelcontextprotocol/sdk/server/webStandardStreamableHttp.js\";\nimport { createMCPServer } from \"@/services/mcp/server\";\nimport {\n  searchDocs,\n  ensureDocsIndex,\n  getIndexStatus,\n  DOCS_TOOLS,\n  listDocs,\n  getDoc,\n} from \"@/services/mcp\";\nimport type { MCPToolName } from \"@/services/mcp\";\nimport { rateLimit } from \"@/utils/rateLimit\";\n\nconst searchDocsSchema = z.object({\n  query: z.string().min(1).max(2000),\n  limit: z.number().int().min(1).max(50).optional(),\n});\n\nconst getDocSchema = z.object({\n  path: z.string().min(1).max(500),\n});\n\nconst listDocsSchema = z.object({\n  directory: z.string().max(500).optional(),\n});\n\n// Create a stateless transport for serverless environment\nfunction createTransport() {\n  return new WebStandardStreamableHTTPServerTransport({\n    sessionIdGenerator: undefined, // Stateless mode for serverless\n    enableJsonResponse: true,\n  });\n}\n\n// Handle MCP protocol requests\nasync function handleMCPRequest(req: Request) {\n  const transport = createTransport();\n  const server = createMCPServer();\n\n  try {\n    await server.connect(transport);\n    const response = await transport.handleRequest(req);\n\n    // Clean up after response is done\n    response\n      .clone()\n      .body?.pipeTo(\n        new WritableStream({\n          close() {\n            transport.close();\n            server.close();\n          },\n        }),\n      )\n      .catch(() => {});\n\n    return response;\n  } catch (error) {\n    console.error(\"MCP request error:\", error);\n    return new Response(\n      JSON.stringify({\n        jsonrpc: \"2.0\",\n        error: {\n          code: -32603,\n          message: \"Internal server error\",\n        },\n        id: null,\n      }),\n      {\n        status: 500,\n        headers: { \"Content-Type\": \"application/json\" },\n      },\n    );\n  }\n}\n\n// Handle REST API requests (original JSON format)\ninterface ToolCallRequest {\n  tool: MCPToolName;\n  params: Record<string, unknown>;\n}\n\nasync function handleRESTRequest(body: ToolCallRequest) {\n  try {\n    const { tool, params } = body;\n\n    if (!tool) {\n      return NextResponse.json(\n        { error: \"Missing 'tool' parameter\" },\n        { status: 400 },\n      );\n    }\n\n    switch (tool) {\n      case \"search_docs\": {\n        const parsed = searchDocsSchema.safeParse(params);\n        if (!parsed.success) {\n          return NextResponse.json(\n            { error: \"Invalid params\", details: parsed.error.issues },\n            { status: 400 },\n          );\n        }\n        await ensureDocsIndex();\n        const results = await searchDocs(\n          parsed.data.query,\n          parsed.data.limit ?? 6,\n        );\n        return NextResponse.json({\n          content: results.map(({ chunk, score }) => ({\n            path: chunk.path,\n            uri: chunk.uri,\n            score: score.toFixed(3),\n            text: chunk.text,\n          })),\n        });\n      }\n\n      case \"get_doc\": {\n        const parsed = getDocSchema.safeParse(params);\n        if (!parsed.success) {\n          return NextResponse.json(\n            { error: \"Invalid params\", details: parsed.error.issues },\n            { status: 400 },\n          );\n        }\n        const doc = await getDoc({ path: parsed.data.path });\n        if (!doc) {\n          return NextResponse.json(\n            { error: \"Document not found\" },\n            { status: 404 },\n          );\n        }\n        return NextResponse.json({ content: doc });\n      }\n\n      case \"list_docs\": {\n        const parsed = listDocsSchema.safeParse(params);\n        if (!parsed.success) {\n          return NextResponse.json(\n            { error: \"Invalid params\", details: parsed.error.issues },\n            { status: 400 },\n          );\n        }\n        const docs = await listDocs({\n          directory: parsed.data.directory,\n        });\n        return NextResponse.json({\n          content: docs.map((d) => ({\n            name: d.name,\n            path: d.path,\n            uri: d.uri,\n          })),\n        });\n      }\n\n      default:\n        return NextResponse.json(\n          { error: `Unknown tool: ${tool}` },\n          { status: 400 },\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 POST(req: Request) {\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  // Clone the request to read body twice if needed\n  const clonedReq = req.clone();\n\n  try {\n    const body = await clonedReq.json();\n\n    // Check if this is an MCP protocol request (has jsonrpc field)\n    // or a REST API request (has tool field)\n    if (\"jsonrpc\" in body) {\n      // MCP protocol request - use the original request\n      return handleMCPRequest(req);\n    } else if (\"tool\" in body) {\n      // REST API request\n      return handleRESTRequest(body as ToolCallRequest);\n    } else {\n      return NextResponse.json(\n        {\n          error:\n            \"Invalid request format. Expected 'jsonrpc' (MCP) or 'tool' (REST) field.\",\n        },\n        { status: 400 },\n      );\n    }\n  } catch {\n    return NextResponse.json({ error: \"Invalid JSON body\" }, { status: 400 });\n  }\n}\n\nexport async function GET() {\n  // GET always returns REST API format (tools list and index status)\n  const status = getIndexStatus();\n  return NextResponse.json({\n    tools: DOCS_TOOLS,\n    index: {\n      ready: status.ready,\n      chunkCount: status.chunkCount,\n    },\n  });\n}\n\nexport async function DELETE(req: Request) {\n  // DELETE is only used by MCP protocol\n  return handleMCPRequest(req);\n}\n";

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

@@ -11,6 +11,7 @@ import {
   getDoc,
 } from "@/services/mcp";
 import type { MCPToolName } from "@/services/mcp";
+import { rateLimit } from "@/utils/rateLimit";
 
 const searchDocsSchema = z.object({
   query: z.string().min(1).max(2000),
@@ -167,6 +168,16 @@ async function handleRESTRequest(body: ToolCallRequest) {
 }
 
 export async function POST(req: Request) {
+  const ip =
+    req.headers.get("x-forwarded-for")?.split(",")[0]?.trim() ?? "unknown";
+  const { allowed, retryAfter } = rateLimit(ip);
+  if (!allowed) {
+    return NextResponse.json(
+      { error: "Too many requests" },
+      { status: 429, headers: { "Retry-After": String(retryAfter) } },
+    );
+  }
+
   // Clone the request to read body twice if needed
   const clonedReq = req.clone();
 

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

@@ -1 +1 @@
-export declare const ragRoutesTemplate = "import { NextResponse } from \"next/server\";\nimport path from \"node:path\";\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 configData from \"@/config.json\";\n\nconst config = configData as Config;\n\ninterface Config {\n  name?: string;\n  description?: string;\n  icon?: string;\n  preview?: string;\n}\n\nconst PROJECT_ROOT = process.cwd();\n\nconst ragSchema = z.object({\n  question: z.string().min(1).max(2000),\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, refresh } = parsed.data;\n\n    let config;\n    try {\n      config = 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(String(question || \"\"), 6);\n\n    // Build context from search results\n    const context = searchResults\n      .map(\n        ({ chunk, score }) =>\n          `File: ${path.relative(PROJECT_ROOT, 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(config);\n    const prompt = [\n      {\n        role: \"system\" as const,\n        content: systemContext as string,\n      },\n      {\n        role: \"user\" as const,\n        content: `Question: ${question}\\n\\nContext:\\n${context}`,\n      },\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: path.relative(PROJECT_ROOT, 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 ragSchema = z.object({\n  question: z.string().min(1).max(2000),\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, 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 = [\n      {\n        role: \"system\" as const,\n        content: systemContext,\n      },\n      {\n        role: \"user\" as const,\n        content: `Question: ${question}\\n\\nContext:\\n${context}`,\n      },\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

@@ -1,5 +1,4 @@
 export const ragRoutesTemplate = `import { NextResponse } from "next/server";
-import path from "node:path";
 import { z } from "zod";
 import { getLLMConfig, createChatModel } from "@/services/llm";
 import {
@@ -8,18 +7,7 @@ import {
   getIndexStatus,
 } from "@/services/mcp/server";
 import { rateLimit } from "@/utils/rateLimit";
-import configData from "@/config.json";
-
-const config = configData as Config;
-
-interface Config {
-  name?: string;
-  description?: string;
-  icon?: string;
-  preview?: string;
-}
-
-const PROJECT_ROOT = process.cwd();
+import { config } from "@/utils/config";
 
 const ragSchema = z.object({
   question: z.string().min(1).max(2000),
@@ -72,9 +60,9 @@ export async function POST(req: Request) {
     }
     const { question, refresh } = parsed.data;
 
-    let config;
+    let llmConfig;
     try {
-      config = getLLMConfig();
+      llmConfig = getLLMConfig();
     } catch (error: unknown) {
       const message =
         error instanceof Error ? error.message : "LLM configuration error";
@@ -85,22 +73,22 @@ export async function POST(req: Request) {
     await ensureDocsIndex(Boolean(refresh));
 
     // Use MCP search_docs tool to find relevant documentation
-    const searchResults = await searchDocs(String(question || ""), 6);
+    const searchResults = await searchDocs(question, 6);
 
     // Build context from search results
     const context = searchResults
       .map(
         ({ chunk, score }) =>
-          \`File: \${path.relative(PROJECT_ROOT, chunk.path)}\\nScore: \${score.toFixed(3)}\\n----\\n\${chunk.text}\`,
+          \`File: \${chunk.path}\\nScore: \${score.toFixed(3)}\\n----\\n\${chunk.text}\`,
       )
       .join("\\n\\n================\\n\\n");
 
     // Create chat model and stream response
-    const llm = createChatModel(config);
+    const llm = createChatModel(llmConfig);
     const prompt = [
       {
         role: "system" as const,
-        content: systemContext as string,
+        content: systemContext,
       },
       {
         role: "user" as const,
@@ -115,7 +103,7 @@ export async function POST(req: Request) {
     const metadata = {
       sources: searchResults.map(({ chunk, score }) => ({
         id: chunk.id,
-        path: path.relative(PROJECT_ROOT, chunk.path),
+        path: chunk.path,
         uri: chunk.uri,
         score,
       })),

package/dist/templates/app/layout.js

@@ -1,9 +1,10 @@
 export const layoutTemplate = (pages, fontConfig) => `import type { Metadata } from "next";
 ${fontConfig?.googleFont?.fontName?.length ? `import { ${fontConfig.googleFont.fontName} } from "next/font/google";` : fontConfig?.localFonts?.length || fontConfig?.localFonts?.src?.length ? 'import localFont from "next/font/local";' : 'import { Inter } from "next/font/google";'}
+import dynamic from "next/dynamic";
 import { StyledComponentsRegistry } from "cherry-styled-components";
 import { theme, themeDark } from "@/app/theme";
 import { CherryThemeProvider } from "@/components/layout/CherryThemeProvider";
-import { Chat, ChtProvider } from "@/components/Chat";
+import { ChtProvider } from "@/components/Chat";
 import { Footer } from "@/components/layout/Footer";
 import { Header } from "@/components/layout/Header";
 import { DocsWrapper } from "@/components/layout/DocsComponents";
@@ -14,7 +15,9 @@ import {
   type PagesProps,
 } from "@/utils/orderNavItems";
 import { StaticLinks } from "@/components/layout/StaticLinks";
+import { config } from "@/utils/config";
 import navigation from "@/navigation.json";
+const Chat = dynamic(() => import("@/components/Chat").then((mod) => mod.Chat));
 
 ${fontConfig?.googleFont?.fontName?.length
     ? `const font = ${fontConfig.googleFont.fontName}({ subsets: ${fontConfig?.googleFont?.subsets?.length ? JSON.stringify(fontConfig?.googleFont?.subsets, null, 2) : '["latin"]'}, ${fontConfig.googleFont?.weight.length ? `weight: "${fontConfig.googleFont.weight}"` : ""} });`
@@ -25,13 +28,13 @@ ${fontConfig?.googleFont?.fontName?.length
         : 'const font = Inter({ subsets: ["latin"] });'}
 
 export const metadata: Metadata = {
-  title: "Doccupine",
-  description:
-    "Doccupine is a free and open-source document management system that allows you to store, organize, and share your documentation with ease. AI-ready.",
+  title: config.name || "Doccupine",
+  description: config.description || "Doccupine is a free and open-source document management system that allows you to store, organize, and share your documentation with ease. AI-ready.",
+  icons: config.icon || "https://doccupine.com/favicon.ico",
   openGraph: {
-    title: "Doccupine",
-    description:
-      "Doccupine is a free and open-source document management system that allows you to store, organize, and share your documentation with ease. AI-ready.",
+    title: config.name || "Doccupine",
+    description: config.description || "Doccupine is a free and open-source document management system that allows you to store, organize, and share your documentation with ease. AI-ready.",
+    images: config.preview || "https://doccupine.com/preview.png",
   },
 };
 

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 } from \"@/components/MDXComponents\";\nimport { styledTable, stylesLists } from \"@/components/layout/SharedStyled\";\nimport links from \"@/links.json\";\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  width: 100%;\n  padding: 0 20px;\n  transition: all 0.3s ease;\n  transform: translateX(0);\n  background: ${({ theme }) => theme.colors.light};\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  $hasLinks: 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: 90px;\n    width: calc(100% - 320px * 2 - 40px);\n    opacity: 1;\n\n    ${({ $hasLinks }) =>\n      $hasLinks &&\n      css`\n        top: 164px;\n      `}\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};A\n    white-space: pre;\n  }\n\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: 25px 20px;\n  height: 73px;\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}\n\nfunction RainbowInput({\n  id,\n  value,\n  onChange,\n  placeholder,\n  autoComplete,\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        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 mdxComponents = useMDXComponents({});\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    try {\n      const res = await fetch(\"/api/rag\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ question: currentQuestion }),\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      let streamedContent = \"\";\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      while (true) {\n        const { done, value } = await reader.read();\n        if (done) break;\n\n        const chunk = decoder.decode(value);\n        const lines = chunk.split(\"\\n\");\n\n        for (const line of lines) {\n          if (line.startsWith(\"data: \")) {\n            try {\n              const data = JSON.parse(line.slice(6));\n\n              if (data.type === \"content\") {\n                streamedContent += data.data;\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                // 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              console.error(\"Failed to parse SSE data:\", parseError);\n            }\n          }\n        }\n      }\n    } catch (err: unknown) {\n      setError(err instanceof Error ? err.message : \"Unknown error\");\n    } finally {\n      setLoading(false);\n    }\n  }\n\n  return (\n    <>\n      <StyledChatFixedForm\n        onSubmit={ask}\n        $hide={answer?.length > 0}\n        $hasLinks={links.length > 0}\n      >\n        <StyledChatFixedInner>\n          <RainbowInput\n            value={question}\n            onChange={(e) => setQuestion(e.target.value)}\n            placeholder=\"Ask AI Assistant...\"\n            autoComplete=\"off\"\n          />\n          <StyledRainbowButton\n            type=\"submit\"\n            disabled={loading}\n            $hasContent={question.trim().length > 0}\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              setAnswer([]);\n              setIsOpen(false);\n            }}\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        />\n        <StyledRainbowButton\n          type=\"submit\"\n          disabled={loading || question.trim() === \"\"}\n          $hasContent={question.trim().length > 0}\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, 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 { styledTable, stylesLists } from \"@/components/layout/SharedStyled\";\nimport links from \"@/links.json\";\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\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  $hasLinks: 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: 90px;\n    width: calc(100% - 320px * 2 - 40px);\n    opacity: 1;\n\n    ${({ $hasLinks }) =>\n      $hasLinks &&\n      css`\n        top: 164px;\n      `}\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  ${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: 25px 20px;\n  height: 73px;\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      const res = await fetch(\"/api/rag\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ question: currentQuestion }),\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 (parseError instanceof Error && parseError.message !== \"Unknown error\") {\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\n        onSubmit={ask}\n        $hide={answer?.length > 0}\n        $hasLinks={links.length > 0}\n      >\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";

package/dist/templates/components/Chat.js

@@ -15,10 +15,12 @@ import rehypeHighlight from "rehype-highlight";
 import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
 import { serialize } from "next-mdx-remote/serialize";
 import { mq, Theme } from "@/app/theme";
-import { useMDXComponents } from "@/components/MDXComponents";
+import { useMDXComponents as getMDXComponents } from "@/components/MDXComponents";
 import { styledTable, stylesLists } from "@/components/layout/SharedStyled";
 import links from "@/links.json";
 
+const mdxComponents = getMDXComponents({});
+
 const styledText = css<{ theme: Theme }>\`
   font-size: \${({ theme }) => theme.fontSizes.text.xs};
   line-height: \${({ theme }) => theme.lineHeights.text.xs};
@@ -39,7 +41,6 @@ const StyledChat = styled.div<{ theme: Theme; $isVisible: boolean }>\`
   overflow-y: scroll;
   overflow-x: hidden;
   z-index: 1000;
-  width: 100%;
   padding: 0 20px;
   transition: all 0.3s ease;
   transform: translateX(0);
@@ -490,7 +491,7 @@ const StyledAnswer = styled.div<{ theme: Theme; $isAnswer: boolean }>\`
     background: \${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};
     color: \${({ theme }) => theme.colors.dark};
     padding: 2px 4px;
-    border-radius: \${({ theme }) => theme.spacing.radius.xs};A
+    border-radius: \${({ theme }) => theme.spacing.radius.xs};
     white-space: pre;
   }
 
@@ -632,6 +633,7 @@ interface RainbowInputProps {
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   placeholder?: string;
   autoComplete?: string;
+  "aria-label"?: string;
 }
 
 function RainbowInput({
@@ -640,6 +642,7 @@ function RainbowInput({
   onChange,
   placeholder,
   autoComplete,
+  "aria-label": ariaLabel,
 }: RainbowInputProps) {
   const [isFocused, setIsFocused] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
@@ -675,6 +678,7 @@ function RainbowInput({
         onChange={onChange}
         placeholder={placeholder}
         autoComplete={autoComplete}
+        aria-label={ariaLabel}
         onFocus={() => setIsFocused(true)}
         onBlur={() => setIsFocused(false)}
       />
@@ -688,7 +692,7 @@ function Chat() {
   const [error, setError] = useState<string | null>(null);
   const [answer, setAnswer] = useState<Answer[]>([]);
   const endRef = useRef<HTMLDivElement | null>(null);
-  const mdxComponents = useMDXComponents({});
+  const abortRef = useRef<AbortController | null>(null);
   const { isOpen, setIsOpen } = useContext(ChatContext);
 
   useEffect(() => {
@@ -720,11 +724,15 @@ function Chat() {
 
     setAnswer(mergedQuestions);
 
+    const controller = new AbortController();
+    abortRef.current = controller;
+
     try {
       const res = await fetch("/api/rag", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ question: currentQuestion }),
+        signal: controller.signal,
       });
 
       if (!res.ok) {
@@ -734,7 +742,7 @@ function Chat() {
 
       const reader = res.body?.getReader();
       const decoder = new TextDecoder();
-      let streamedContent = "";
+      const contentParts: string[] = [];
       if (!reader) {
         throw new Error("Failed to get response reader");
       }
@@ -743,20 +751,24 @@ function Chat() {
       const streamingAnswerIndex = mergedQuestions.length;
       setAnswer([...mergedQuestions, { text: "", answer: true }]);
 
+      let buffer = "";
       while (true) {
         const { done, value } = await reader.read();
         if (done) break;
 
-        const chunk = decoder.decode(value);
-        const lines = chunk.split("\\n");
+        buffer += decoder.decode(value, { stream: true });
+        const parts = buffer.split("\\n");
+        // Keep the last (potentially incomplete) part in the buffer
+        buffer = parts.pop() ?? "";
 
-        for (const line of lines) {
+        for (const line of parts) {
           if (line.startsWith("data: ")) {
             try {
               const data = JSON.parse(line.slice(6));
 
               if (data.type === "content") {
-                streamedContent += data.data;
+                contentParts.push(data.data);
+                const streamedContent = contentParts.join("");
 
                 setAnswer((prev) => {
                   const newAnswers = [...prev];
@@ -769,6 +781,7 @@ function Chat() {
               } else if (data.type === "error") {
                 throw new Error(data.data);
               } else if (data.type === "done") {
+                const streamedContent = contentParts.join("");
                 // Finalize with MDX serialization
                 let mdxSource: MDXRemoteSerializeResult | null = null;
                 try {
@@ -796,14 +809,18 @@ function Chat() {
                 });
               }
             } catch (parseError) {
-              console.error("Failed to parse SSE data:", parseError);
+              if (parseError instanceof Error && parseError.message !== "Unknown error") {
+                console.error("Failed to parse SSE data:", parseError);
+              }
             }
           }
         }
       }
     } catch (err: unknown) {
+      if (err instanceof DOMException && err.name === "AbortError") return;
       setError(err instanceof Error ? err.message : "Unknown error");
     } finally {
+      abortRef.current = null;
       setLoading(false);
     }
   }
@@ -821,11 +838,13 @@ function Chat() {
             onChange={(e) => setQuestion(e.target.value)}
             placeholder="Ask AI Assistant..."
             autoComplete="off"
+            aria-label="Ask a question about the documentation"
           />
           <StyledRainbowButton
             type="submit"
             disabled={loading}
             $hasContent={question.trim().length > 0}
+            aria-label={loading ? "Loading response" : "Submit question"}
           >
             {loading ? <LoaderPinwheel className="loading" /> : <ArrowUp />}
           </StyledRainbowButton>
@@ -840,9 +859,11 @@ function Chat() {
           </StyledChatTitleIconWrapper>
           <StyledChatCloseButton
             onClick={() => {
+              abortRef.current?.abort();
               setAnswer([]);
               setIsOpen(false);
             }}
+            aria-label="Close chat"
           >
             <X />
           </StyledChatCloseButton>
@@ -879,11 +900,13 @@ function Chat() {
           onChange={(e) => setQuestion(e.target.value)}
           placeholder="Ask AI Assistant..."
           autoComplete="off"
+          aria-label="Ask a follow-up question"
         />
         <StyledRainbowButton
           type="submit"
           disabled={loading || question.trim() === ""}
           $hasContent={question.trim().length > 0}
+          aria-label={loading ? "Loading response" : "Submit question"}
         >
           {loading ? <LoaderPinwheel className="loading" /> : <ArrowUp />}
         </StyledRainbowButton>

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

@@ -1 +1 @@
-export declare const clickOutsideTemplate = "import { RefObject, useEffect } from \"react\";\n\nexport function useOnClickOutside(\n  refs: RefObject<HTMLElement | null>[],\n  cb: () => void,\n) {\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (\n        refs &&\n        refs\n          .map(\n            (ref) =>\n              ref && ref.current && ref.current.contains(event.target as Node),\n          )\n          .every((i) => i === false)\n      ) {\n        cb();\n      }\n    }\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [refs, cb]);\n}\n";
+export declare const clickOutsideTemplate = "import { RefObject, useCallback, useEffect } from \"react\";\n\nexport function useOnClickOutside(\n  refs: RefObject<HTMLElement | null>[],\n  cb: () => void,\n) {\n  // Stable callback ref to avoid re-subscribing on every render\n  const handleClickOutside = useCallback(\n    (event: MouseEvent) => {\n      if (\n        refs.every(\n          (ref) => !ref.current || !ref.current.contains(event.target as Node),\n        )\n      ) {\n        cb();\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [...refs, cb],\n  );\n\n  useEffect(() => {\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [handleClickOutside]);\n}\n";

package/dist/templates/components/ClickOutside.js

@@ -1,27 +1,29 @@
-export const clickOutsideTemplate = `import { RefObject, useEffect } from "react";
+export const clickOutsideTemplate = `import { RefObject, useCallback, useEffect } from "react";
 
 export function useOnClickOutside(
   refs: RefObject<HTMLElement | null>[],
   cb: () => void,
 ) {
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
+  // Stable callback ref to avoid re-subscribing on every render
+  const handleClickOutside = useCallback(
+    (event: MouseEvent) => {
       if (
-        refs &&
-        refs
-          .map(
-            (ref) =>
-              ref && ref.current && ref.current.contains(event.target as Node),
-          )
-          .every((i) => i === false)
+        refs.every(
+          (ref) => !ref.current || !ref.current.contains(event.target as Node),
+        )
       ) {
         cb();
       }
-    }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [...refs, cb],
+  );
+
+  useEffect(() => {
     document.addEventListener("mousedown", handleClickOutside);
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, [refs, cb]);
+  }, [handleClickOutside]);
 }
 `;

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

@@ -1 +1 @@
-export declare const docsSideBarTemplate = "\"use client\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { Space } from \"cherry-styled-components\";\nimport {\n  StyledIndexSidebar,\n  StyledIndexSidebarLink,\n  StyledIndexSidebarLabel,\n} from \"@/components/layout/DocsComponents\";\n\nexport interface Heading {\n  id: string;\n  text: string;\n  level: number;\n}\n\nexport function DocsSideBar({ headings }: { headings: Heading[] }) {\n  const [activeId, setActiveId] = useState<string>(\"\");\n\n  const getScrollOffset = useCallback(() => {\n    return document.getElementById(\"static-links\") ? 90 : 18;\n  }, []);\n\n  const handleScroll = useCallback(() => {\n    if (headings.length === 0) return;\n\n    const offset = getScrollOffset();\n\n    const headingElements = headings\n      .map((heading) => document.getElementById(heading.id))\n      .filter(Boolean) as HTMLElement[];\n\n    if (headingElements.length === 0) return;\n\n    const windowHeight = window.innerHeight;\n\n    const visibleHeadings = headingElements.filter((element) => {\n      const rect = element.getBoundingClientRect();\n      const elementTop = rect.top;\n      const elementBottom = rect.bottom;\n      return elementTop < windowHeight && elementBottom > -50;\n    });\n\n    if (visibleHeadings.length > 0) {\n      let closestHeading = visibleHeadings[0];\n      let closestDistance = Math.abs(\n        closestHeading.getBoundingClientRect().top - offset,\n      );\n      for (const heading of visibleHeadings) {\n        const distance = Math.abs(heading.getBoundingClientRect().top - offset);\n        if (\n          distance < closestDistance &&\n          heading.getBoundingClientRect().top <= windowHeight * 0.3\n        ) {\n          closestDistance = distance;\n          closestHeading = heading;\n        }\n      }\n      setActiveId(closestHeading.id);\n      return;\n    }\n\n    let currentActiveId = headings[0].id;\n    for (const element of headingElements) {\n      const rect = element.getBoundingClientRect();\n      if (rect.top <= offset) {\n        currentActiveId = element.id;\n      } else {\n        break;\n      }\n    }\n    setActiveId(currentActiveId);\n  }, [headings, getScrollOffset]);\n\n  useEffect(() => {\n    if (headings.length === 0) return;\n    // Run initial scroll check on next frame to avoid synchronous setState in effect\n    const rafId = requestAnimationFrame(handleScroll);\n    let timeoutId: NodeJS.Timeout;\n    const throttledHandleScroll = () => {\n      clearTimeout(timeoutId);\n      timeoutId = setTimeout(handleScroll, 50);\n    };\n    window.addEventListener(\"scroll\", throttledHandleScroll);\n    window.addEventListener(\"resize\", handleScroll);\n    return () => {\n      window.removeEventListener(\"scroll\", throttledHandleScroll);\n      window.removeEventListener(\"resize\", handleScroll);\n      cancelAnimationFrame(rafId);\n      clearTimeout(timeoutId);\n    };\n  }, [handleScroll, headings]);\n\n  const handleHeadingClick = (headingId: string) => {\n    const element = document.getElementById(headingId);\n    if (element) {\n      const offset = getScrollOffset();\n      const elementPosition =\n        element.getBoundingClientRect().top + window.scrollY;\n      window.scrollTo({ top: elementPosition - offset, behavior: \"smooth\" });\n    }\n  };\n\n  return (\n    <StyledIndexSidebar>\n      {headings?.length > 0 && (\n        <>\n          <StyledIndexSidebarLabel>On this page</StyledIndexSidebarLabel>\n          <Space $size={20} />\n        </>\n      )}\n      {headings.map((heading, index) => (\n        <li\n          key={index}\n          style={{ paddingLeft: `${(heading.level - 1) * 16}px` }}\n        >\n          <StyledIndexSidebarLink\n            href={`#${heading.id}`}\n            onClick={(e) => {\n              e.preventDefault();\n              handleHeadingClick(heading.id);\n            }}\n            $isActive={activeId === heading.id}\n          >\n            {heading.text}\n          </StyledIndexSidebarLink>\n        </li>\n      ))}\n    </StyledIndexSidebar>\n  );\n}\n";
+export declare const docsSideBarTemplate = "\"use client\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { Space } from \"cherry-styled-components\";\nimport {\n  StyledIndexSidebar,\n  StyledIndexSidebarLink,\n  StyledIndexSidebarLabel,\n} from \"@/components/layout/DocsComponents\";\n\nexport interface Heading {\n  id: string;\n  text: string;\n  level: number;\n}\n\nexport function DocsSideBar({ headings }: { headings: Heading[] }) {\n  const [activeId, setActiveId] = useState<string>(\"\");\n\n  const getScrollOffset = useCallback(() => {\n    return document.getElementById(\"static-links\") ? 90 : 18;\n  }, []);\n\n  const handleScroll = useCallback(() => {\n    if (headings.length === 0) return;\n\n    const offset = getScrollOffset();\n\n    const headingElements = headings\n      .map((heading) => document.getElementById(heading.id))\n      .filter((el): el is HTMLElement => el !== null);\n\n    if (headingElements.length === 0) return;\n\n    const windowHeight = window.innerHeight;\n\n    const visibleHeadings = headingElements.filter((element) => {\n      const rect = element.getBoundingClientRect();\n      const elementTop = rect.top;\n      const elementBottom = rect.bottom;\n      return elementTop < windowHeight && elementBottom > -50;\n    });\n\n    if (visibleHeadings.length > 0) {\n      let closestHeading = visibleHeadings[0];\n      let closestDistance = Math.abs(\n        closestHeading.getBoundingClientRect().top - offset,\n      );\n      for (const heading of visibleHeadings) {\n        const distance = Math.abs(heading.getBoundingClientRect().top - offset);\n        if (\n          distance < closestDistance &&\n          heading.getBoundingClientRect().top <= windowHeight * 0.3\n        ) {\n          closestDistance = distance;\n          closestHeading = heading;\n        }\n      }\n      setActiveId(closestHeading.id);\n      return;\n    }\n\n    let currentActiveId = headings[0].id;\n    for (const element of headingElements) {\n      const rect = element.getBoundingClientRect();\n      if (rect.top <= offset) {\n        currentActiveId = element.id;\n      } else {\n        break;\n      }\n    }\n    setActiveId(currentActiveId);\n  }, [headings, getScrollOffset]);\n\n  useEffect(() => {\n    if (headings.length === 0) return;\n    // Run initial scroll check on next frame to avoid synchronous setState in effect\n    const rafId = requestAnimationFrame(handleScroll);\n    let timeoutId: NodeJS.Timeout;\n    const throttledHandleScroll = () => {\n      clearTimeout(timeoutId);\n      timeoutId = setTimeout(handleScroll, 50);\n    };\n    window.addEventListener(\"scroll\", throttledHandleScroll);\n    window.addEventListener(\"resize\", handleScroll);\n    return () => {\n      window.removeEventListener(\"scroll\", throttledHandleScroll);\n      window.removeEventListener(\"resize\", handleScroll);\n      cancelAnimationFrame(rafId);\n      clearTimeout(timeoutId);\n    };\n  }, [handleScroll, headings]);\n\n  const handleHeadingClick = (headingId: string) => {\n    const element = document.getElementById(headingId);\n    if (element) {\n      const offset = getScrollOffset();\n      const elementPosition =\n        element.getBoundingClientRect().top + window.scrollY;\n      window.scrollTo({ top: elementPosition - offset, behavior: \"smooth\" });\n    }\n  };\n\n  return (\n    <StyledIndexSidebar>\n      {headings?.length > 0 && (\n        <>\n          <StyledIndexSidebarLabel>On this page</StyledIndexSidebarLabel>\n          <Space $size={20} />\n        </>\n      )}\n      {headings.map((heading, index) => (\n        <li\n          key={index}\n          style={{ paddingLeft: `${(heading.level - 1) * 16}px` }}\n        >\n          <StyledIndexSidebarLink\n            href={`#${heading.id}`}\n            onClick={(e) => {\n              e.preventDefault();\n              handleHeadingClick(heading.id);\n            }}\n            $isActive={activeId === heading.id}\n          >\n            {heading.text}\n          </StyledIndexSidebarLink>\n        </li>\n      ))}\n    </StyledIndexSidebar>\n  );\n}\n";

package/dist/templates/components/DocsSideBar.js

@@ -27,7 +27,7 @@ export function DocsSideBar({ headings }: { headings: Heading[] }) {
 
     const headingElements = headings
       .map((heading) => document.getElementById(heading.id))
-      .filter(Boolean) as HTMLElement[];
+      .filter((el): el is HTMLElement => el !== null);
 
     if (headingElements.length === 0) return;