skrypt-ai 0.7.0 → 0.8.0

package/dist/template/src/app/llms.txt/route.ts

@@ -0,0 +1,29 @@
+import { NextResponse } from 'next/server'
+import { readFile } from 'fs/promises'
+import { join } from 'path'
+
+export async function GET() {
+  const paths = [
+    join(process.cwd(), 'content', 'docs', 'llms.txt'),
+    join(process.cwd(), 'public', 'llms.txt'),
+  ]
+
+  for (const path of paths) {
+    try {
+      const content = await readFile(path, 'utf-8')
+      return new NextResponse(content, {
+        headers: {
+          'Content-Type': 'text/plain; charset=utf-8',
+          'Cache-Control': 'public, max-age=3600, s-maxage=86400',
+        },
+      })
+    } catch {
+      continue
+    }
+  }
+
+  return new NextResponse('# No llms.txt found\n\nRun `skrypt generate` to create one.\n', {
+    status: 404,
+    headers: { 'Content-Type': 'text/plain; charset=utf-8' },
+  })
+}

package/dist/template/src/app/md/[...slug]/route.ts

@@ -0,0 +1,174 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { readFile } from 'fs/promises'
+import { join, resolve } from 'path'
+
+/**
+ * Markdown route handler for content negotiation.
+ *
+ * Serves raw MDX/Markdown content with JSX components stripped,
+ * returning clean markdown that AI agents can consume directly.
+ */
+
+interface RouteParams {
+  params: Promise<{ slug: string[] }>
+}
+
+export async function GET(request: NextRequest, { params }: RouteParams) {
+  const { slug } = await params
+  const contentDir = resolve(process.cwd(), 'content', 'docs')
+
+  // Reject path traversal: slug segments must not contain .. or absolute paths
+  if (slug.some(s => s === '..' || s === '.' || s.includes('/') || s.includes('\\'))) {
+    return new NextResponse('# 400 Bad Request\n', {
+      status: 400,
+      headers: { 'Content-Type': 'text/markdown; charset=utf-8' },
+    })
+  }
+
+  // Try to find the MDX/MD source file
+  const filePath = join(contentDir, ...slug)
+
+  // Double-check resolved path stays within content directory
+  const resolved = resolve(filePath)
+  if (!resolved.startsWith(contentDir)) {
+    return new NextResponse('# 400 Bad Request\n', {
+      status: 400,
+      headers: { 'Content-Type': 'text/markdown; charset=utf-8' },
+    })
+  }
+  let content: string | null = null
+  let resolvedPath = ''
+
+  for (const ext of ['.mdx', '.md', '/index.mdx', '/index.md']) {
+    try {
+      resolvedPath = filePath + ext
+      content = await readFile(resolvedPath, 'utf-8')
+      break
+    } catch {
+      continue
+    }
+  }
+
+  if (!content) {
+    return new NextResponse('# 404 Not Found\n\nThis documentation page does not exist.\n', {
+      status: 404,
+      headers: { 'Content-Type': 'text/markdown; charset=utf-8' },
+    })
+  }
+
+  // Strip JSX components for clean markdown output
+  const markdown = stripMdxToMarkdown(content)
+
+  return new NextResponse(markdown, {
+    status: 200,
+    headers: {
+      'Content-Type': 'text/markdown; charset=utf-8',
+      'Cache-Control': 'public, max-age=3600, s-maxage=86400',
+      'X-Content-Source': 'mdx',
+    },
+  })
+}
+
+/**
+ * Lightweight MDX-to-markdown stripping for the route handler.
+ * Runs at request time so must be fast — uses regex, not a full parser.
+ */
+function stripMdxToMarkdown(mdx: string): string {
+  let out = mdx
+
+  // Remove import/export statements
+  out = out.replace(/^import\s+.*$/gm, '')
+  out = out.replace(/^export\s+(?!default\s).*$/gm, '')
+
+  // CodeGroup → flatten (keep code blocks)
+  out = out.replace(/<CodeGroup>\s*([\s\S]*?)\s*<\/CodeGroup>/g, (_m, inner: string) => inner.trim())
+
+  // Callout variants → blockquotes
+  for (const tag of ['Callout', 'Info', 'Warning', 'Success', 'Error', 'Tip', 'Note']) {
+    out = out.replace(
+      new RegExp(`<${tag}\\s+type=["']([^"']+)["'][^>]*>\\s*([\\s\\S]*?)\\s*<\\/${tag}>`, 'g'),
+      (_m, type: string, content: string) => {
+        const label = type.charAt(0).toUpperCase() + type.slice(1)
+        return `> **${label}:** ${content.trim()}\n`
+      }
+    )
+    out = out.replace(
+      new RegExp(`<${tag}(?:\\s[^>]*)?>\\s*([\\s\\S]*?)\\s*<\\/${tag}>`, 'g'),
+      (_m, content: string) => {
+        const label = tag === 'Callout' ? 'Note' : tag
+        return `> **${label}:** ${content.trim()}\n`
+      }
+    )
+  }
+
+  // CardGroup → unwrap
+  out = out.replace(/<CardGroup[^>]*>\s*/g, '')
+  out = out.replace(/\s*<\/CardGroup>/g, '')
+
+  // Card with href
+  out = out.replace(
+    /<Card\s+title=["']([^"']+)["']\s+(?:[^>]*?href=["']([^"']+)["'][^>]*?)>\s*([\s\S]*?)\s*<\/Card>/g,
+    (_m, title: string, href: string, desc: string) => {
+      const d = desc.trim().replace(/<[^>]+>/g, '')
+      return d ? `- **[${title}](${href})** — ${d}` : `- **[${title}](${href})**`
+    }
+  )
+
+  // Card without href
+  out = out.replace(
+    /<Card\s+title=["']([^"']+)["'][^>]*>\s*([\s\S]*?)\s*<\/Card>/g,
+    (_m, title: string, desc: string) => {
+      const d = desc.trim().replace(/<[^>]+>/g, '')
+      return d ? `- **${title}** — ${d}` : `- **${title}**`
+    }
+  )
+
+  // Tabs
+  out = out.replace(/<TabList>\s*([\s\S]*?)\s*<\/TabList>/g, '')
+  out = out.replace(/<Tab\s+label=["']([^"']+)["'][^>]*>\s*([\s\S]*?)\s*<\/Tab>/g,
+    (_m, label: string, content: string) => `#### ${label}\n\n${content.trim()}\n`
+  )
+  out = out.replace(/<TabPanel[^>]*>\s*([\s\S]*?)\s*<\/TabPanel>/g, (_m, c: string) => c.trim())
+  out = out.replace(/<Tabs[^>]*>\s*/g, '')
+  out = out.replace(/\s*<\/Tabs>/g, '')
+
+  // Steps
+  out = out.replace(/<Steps>\s*([\s\S]*?)\s*<\/Steps>/g, (_match, inner: string) => {
+    let n = 0
+    return inner.replace(
+      /<Step\s*(?:title=["']([^"']+)["'][^>]*)?>?\s*([\s\S]*?)\s*<\/Step>/g,
+      (_m, title: string | undefined, content: string) => {
+        n++
+        return `${n}. ${title ? `**${title}** ` : ''}${content.trim()}\n`
+      }
+    )
+  })
+
+  // Accordion
+  out = out.replace(/<AccordionGroup[^>]*>\s*/g, '')
+  out = out.replace(/\s*<\/AccordionGroup>/g, '')
+  out = out.replace(/<Accordion\s+title=["']([^"']+)["'][^>]*>\s*([\s\S]*?)\s*<\/Accordion>/g,
+    (_m, title: string, content: string) => `**${title}**\n\n${content.trim()}\n`
+  )
+
+  // Screenshot → image
+  out = out.replace(/<Screenshot\s+(?:[^>]*?src=["']([^"']+)["'][^>]*?)(?:\s+alt=["']([^"']+)["'])?[^>]*\s*\/?>/g,
+    (_m, src: string, alt?: string) => `![${alt || 'Screenshot'}](${src})`
+  )
+  out = out.replace(/<Screenshot\s+(?:[^>]*?src=["']([^"']+)["'][^>]*?)>[\s\S]*?<\/Screenshot>/g,
+    (_m, src: string) => `![Screenshot](${src})`
+  )
+
+  // Frame → unwrap
+  out = out.replace(/<Frame[^>]*>\s*/g, '')
+  out = out.replace(/\s*<\/Frame>/g, '')
+
+  // Catch-all: remove remaining JSX
+  out = out.replace(/<[A-Z][A-Za-z]*\s[^>]*\/>/g, '')
+  out = out.replace(/<[A-Z][A-Za-z]*(?:\s[^>]*)?>/g, '')
+  out = out.replace(/<\/[A-Z][A-Za-z]*>/g, '')
+
+  // Clean up
+  out = out.replace(/\n{4,}/g, '\n\n\n')
+  return out.trim() + '\n'
+}

package/dist/template/src/app/reference/route.ts

@@ -1,5 +1,3 @@
-import { ApiReference } from '@scalar/nextjs-api-reference'
-
 const MOCK_SERVER_ENABLED = process.env.NEXT_PUBLIC_MOCK_SERVER === 'true'
 
 // Build servers list
@@ -18,19 +16,25 @@ const servers = [
   }] : []),
 ]
 
-export const GET = ApiReference({
-  spec: {
-    url: '/api/openapi',
-  },
-  // Scalar configuration options
-  theme: 'default',
-  hideModels: false,
-  darkMode: true,
-  servers,
-  // Enable request sharing (#76)
-  showSidebar: true,
-  searchHotKey: 'k',
-  metaData: {
-    title: 'API Reference',
-  },
-})
+// Dynamic import — @scalar/nextjs-api-reference is only loaded when
+// this route is actually hit (not bundled into the main docs pages)
+export const GET = async () => {
+  const { ApiReference } = await import('@scalar/nextjs-api-reference')
+  const handler = ApiReference({
+    spec: {
+      url: '/api/openapi',
+    },
+    // Scalar configuration options
+    theme: 'default',
+    hideModels: false,
+    darkMode: true,
+    servers,
+    // Enable request sharing (#76)
+    showSidebar: true,
+    searchHotKey: 'k',
+    metaData: {
+      title: 'API Reference',
+    },
+  })
+  return handler()
+}

package/dist/template/src/app/sitemap.ts

@@ -52,7 +52,7 @@ async function scanDir(dir: string, prefix: string): Promise<string[]> {
 
       if (entry.isDirectory()) {
         files.push(...await scanDir(join(dir, entry.name), path))
-      } else if (entry.name.endsWith('.mdx') || entry.name.endsWith('.md')) {
+      } else if ((entry.name.endsWith('.mdx') || entry.name.endsWith('.md')) && !entry.name.startsWith('llms') && !entry.name.startsWith('_') && entry.name !== 'README.md') {
         files.push(path)
       }
     }

package/dist/template/src/components/ai-chat-impl.tsx

@@ -0,0 +1,206 @@
+'use client'
+
+import { useState, useRef, useEffect } from 'react'
+import { useChat } from '@ai-sdk/react'
+import { Streamdown } from 'streamdown'
+import { MessageSquare, X, Send, ExternalLink } from 'lucide-react'
+
+interface Citation {
+  title: string
+  path: string
+  snippet: string
+}
+
+interface AIChatProps {
+  projectName?: string
+  apiEndpoint?: string
+  placeholder?: string
+}
+
+export function AIChat({
+  projectName = 'this documentation',
+  apiEndpoint = '/api/chat',
+  placeholder = 'Ask a question...',
+}: AIChatProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [citations, setCitations] = useState<Map<string, Citation[]>>(new Map())
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+
+  const { messages, input, handleInputChange, handleSubmit, status, error } = useChat({
+    api: apiEndpoint,
+    onResponse(response: Response) {
+      // Extract citations from response header
+      const citationsHeader = response.headers.get('X-Citations')
+      if (citationsHeader) {
+        try {
+          const parsed = JSON.parse(atob(citationsHeader)) as Citation[]
+          // Associate citations with the next assistant message
+          setCitations(prev => {
+            const next = new Map(prev)
+            // Use a temporary key that will be replaced when the message arrives
+            next.set('_pending', parsed)
+            return next
+          })
+        } catch {
+          // Skip invalid citations
+        }
+      }
+    },
+    onFinish(message: { id: string }) {
+      // Move pending citations to the actual message ID
+      setCitations(prev => {
+        const next = new Map(prev)
+        const pending = next.get('_pending')
+        if (pending) {
+          next.delete('_pending')
+          next.set(message.id, pending)
+        }
+        return next
+      })
+    },
+  })
+
+  const isStreaming = status === 'streaming'
+  const isLoading = status === 'submitted'
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [messages, isStreaming])
+
+  if (!isOpen) {
+    return (
+      <button
+        onClick={() => setIsOpen(true)}
+        className="fixed bottom-6 right-6 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-[var(--color-text)] text-[var(--color-bg)] shadow-lg transition-transform hover:scale-105"
+        aria-label="Open AI chat"
+      >
+        <MessageSquare className="h-6 w-6" />
+      </button>
+    )
+  }
+
+  return (
+    <div className="fixed bottom-6 right-6 z-50 flex h-[500px] w-[380px] flex-col overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg)] shadow-2xl">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-[var(--color-border)] px-4 py-3">
+        <div className="flex items-center gap-2">
+          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--color-text)]">
+            <MessageSquare className="h-4 w-4 text-[var(--color-bg)]" />
+          </div>
+          <div>
+            <p className="text-sm font-medium text-[var(--color-text)]">Ask AI</p>
+            <p className="text-xs text-[var(--color-text-tertiary)]">About {projectName}</p>
+          </div>
+        </div>
+        <button
+          onClick={() => setIsOpen(false)}
+          className="rounded-lg p-1 text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-bg-secondary)] hover:text-[var(--color-text-secondary)]"
+          aria-label="Close chat"
+        >
+          <X className="h-5 w-5" />
+        </button>
+      </div>
+
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        {messages.length === 0 && (
+          <div className="text-center text-sm text-[var(--color-text-tertiary)] py-8">
+            <p>Ask me anything about {projectName}.</p>
+            <p className="mt-2 text-xs">I&apos;ll search the docs and give you an answer with sources.</p>
+          </div>
+        )}
+
+        {messages.map((message) => (
+          <div
+            key={message.id}
+            className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
+          >
+            <div
+              className={`max-w-[85%] rounded-2xl px-4 py-2 text-sm ${
+                message.role === 'user'
+                  ? 'bg-[var(--color-text)] text-[var(--color-bg)]'
+                  : 'bg-[var(--color-bg-tertiary)] text-[var(--color-text)]'
+              }`}
+            >
+              {message.role === 'assistant' ? (
+                <div className="chat-markdown prose prose-sm max-w-none">
+                  <Streamdown
+                    shikiTheme={['github-light', 'github-dark']}
+                    isAnimating={isStreaming && message.id === messages[messages.length - 1]?.id}
+                  >
+                    {message.content}
+                  </Streamdown>
+                </div>
+              ) : (
+                <p className="whitespace-pre-wrap">{message.content}</p>
+              )}
+
+              {/* Citations */}
+              {citations.get(message.id) && (
+                <div className="mt-3 border-t border-[var(--color-border)] pt-2">
+                  <p className="text-xs font-medium text-[var(--color-text-tertiary)] mb-1">Sources:</p>
+                  <div className="space-y-1">
+                    {citations.get(message.id)!.map((citation, j) => (
+                      <a
+                        key={j}
+                        href={citation.path}
+                        className="flex items-center gap-1 text-xs text-[var(--color-primary)] hover:underline"
+                      >
+                        <ExternalLink className="h-3 w-3" />
+                        {citation.title}
+                      </a>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+
+        {isLoading && (
+          <div className="flex justify-start">
+            <div className="flex items-center gap-2 rounded-2xl bg-[var(--color-bg-tertiary)] px-4 py-2 text-sm text-[var(--color-text-tertiary)]">
+              <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+              Searching docs...
+            </div>
+          </div>
+        )}
+
+        {error && (
+          <div className="flex justify-start">
+            <div className="rounded-2xl bg-red-50 px-4 py-2 text-sm text-red-600">
+              Something went wrong. Please try again.
+            </div>
+          </div>
+        )}
+
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input */}
+      <form
+        onSubmit={handleSubmit}
+        className="border-t border-[var(--color-border)] p-3"
+      >
+        <div className="flex items-center gap-2">
+          <input
+            type="text"
+            value={input}
+            onChange={handleInputChange}
+            placeholder={placeholder}
+            disabled={isStreaming || isLoading}
+            className="flex-1 rounded-xl border border-[var(--color-border)] bg-[var(--color-bg-secondary)] px-4 py-2 text-sm text-[var(--color-text)] outline-none transition-colors placeholder:text-[var(--color-text-tertiary)] focus:border-[var(--color-border-strong)]"
+          />
+          <button
+            type="submit"
+            disabled={!input.trim() || isStreaming || isLoading}
+            className="flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--color-text)] text-[var(--color-bg)] transition-colors hover:opacity-90 disabled:opacity-50"
+            aria-label="Send message"
+          >
+            <Send className="h-4 w-4" />
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}