aha/aha-ui/src/features/usage/index.tsx

import { useState } from "react"
import { BookOpen, Copy, Check, Code, Terminal, FileType } from "lucide-react"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Header } from "@/components/layout/header"
import { Main } from "@/components/layout/main"
import { ProfileDropdown } from "@/components/profile-dropdown"
import { ThemeSwitch } from "@/components/theme-switch"

interface CodeBlockProps {
  code: string
  language?: string
}

function CodeBlock({ code, language = "bash" }: CodeBlockProps) {
  const [copied, setCopied] = useState(false)

  const handleCopy = async () => {
    await navigator.clipboard.writeText(code)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  const langIcons: Record<string, React.ReactNode> = {
    bash: <Terminal className="w-3.5 h-3.5" />,
    python: <FileType className="w-3.5 h-3.5" />,
    typescript: <Code className="w-3.5 h-3.5" />,
  }

  return (
    <div className="relative group">
      <div className="flex items-center justify-between px-4 py-1.5 bg-muted/50 border-b border-border/50 rounded-t-lg">
        <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
          {langIcons[language] || null}
          {language}
        </div>
        <button
          onClick={handleCopy}
          className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
        >
          {copied ? (
            <>
              <Check className="w-3.5 h-3.5 text-green-500" />
              已复制
            </>
          ) : (
            <>
              <Copy className="w-3.5 h-3.5" />
              复制
            </>
          )}
        </button>
      </div>
      <pre className="bg-[#1e1e2e] text-gray-300 p-4 rounded-b-lg overflow-x-auto text-sm leading-relaxed">
        <code>{code}</code>
      </pre>
    </div>
  )
}

function ApiSection({
  title,
  method,
  path,
  description,
  children,
}: {
  title: string
  method: string
  path: string
  description: string
  children: React.ReactNode
}) {
  const methodColors: Record<string, string> = {
    GET: "bg-green-500/10 text-green-600 border-green-200 dark:border-green-800 dark:text-green-400",
    POST: "bg-blue-500/10 text-blue-600 border-blue-200 dark:border-blue-800 dark:text-blue-400",
  }

  return (
    <div className="space-y-3">
      <h3 className="text-base font-semibold">{title}</h3>
      <p className="text-sm text-muted-foreground">{description}</p>
      <div className="flex items-center gap-2 font-mono text-sm">
        <span className={`px-2 py-0.5 rounded border text-xs font-medium ${methodColors[method] || ""}`}>
          {method}
        </span>
        <span className="text-foreground">{path}</span>
      </div>
      {children}
    </div>
  )
}

export function UsagePage() {
  const [baseUrl, setBaseUrl] = useState("http://127.0.0.1:10100")

  return (
    <>
      <Header>
        <div className="flex items-center gap-2 ms-auto">
          <ThemeSwitch />
          <ProfileDropdown />
        </div>
      </Header>

      <Main>
        <div className="mb-6">
          <h1 className="text-2xl font-bold tracking-tight flex items-center gap-2">
            <BookOpen className="w-6 h-6" />
            API 使用指南
          </h1>
          <p className="text-muted-foreground text-sm mt-1">
            如何通过 HTTP 接口调用本地模型推理服务
          </p>
        </div>

        {/* 服务地址配置 */}
        <Card className="p-4 mb-6">
          <div className="flex items-end gap-4">
            <div className="flex-1 space-y-2">
              <Label htmlFor="base-url">服务地址</Label>
              <Input
                id="base-url"
                value={baseUrl}
                onChange={(e) => setBaseUrl(e.target.value)}
                placeholder="http://127.0.0.1:10100"
              />
            </div>
            <p className="text-xs text-muted-foreground pb-1">
              请确保服务已启动，地址与「启动服务」页面配置一致
            </p>
          </div>
        </Card>

        <div className="space-y-8">
          {/* 1. 查看可用模型 */}
          <Card className="p-5 space-y-4">
            <ApiSection
              title="查看可用模型"
              method="GET"
              path="/v1/models"
              description="获取当前服务中可用的模型列表"
            >
              <div className="space-y-3">
                <CodeBlock
                  language="bash"
                  code={`curl ${baseUrl}/v1/models`}
                />
                <CodeBlock
                  language="python"
                  code={`import requests

response = requests.get("${baseUrl}/v1/models")
models = response.json()
print(models)`}
                />
                <CodeBlock
                  language="typescript"
                  code={`const response = await fetch("${baseUrl}/v1/models")
const models = await response.json()
console.log(models)`}
                />
              </div>
            </ApiSection>
          </Card>

          {/* 2. Chat Completions */}
          <Card className="p-5 space-y-4">
            <ApiSection
              title="对话补全"
              method="POST"
              path="/v1/chat/completions"
              description="向模型发送对话消息，获取推理回复。兼容 OpenAI API 格式。"
            >
              <div className="space-y-3">
                <CodeBlock
                  language="bash"
                  code={`curl ${baseUrl}/v1/chat/completions \\
  -H "Content-Type: application/json" \\
  -d '{
    "model": "your-model-id",
    "messages": [
      {"role": "system", "content": "你是一个有用的助手"},
      {"role": "user", "content": "你好，请介绍一下你自己"}
    ],
    "temperature": 0.7,
    "max_tokens": 2048,
    "stream": false
  }'`}
                />
                <CodeBlock
                  language="python"
                  code={`import requests

response = requests.post(
    "${baseUrl}/v1/chat/completions",
    json={
        "model": "your-model-id",
        "messages": [
            {"role": "system", "content": "你是一个有用的助手"},
            {"role": "user", "content": "你好，请介绍一下你自己"}
        ],
        "temperature": 0.7,
        "max_tokens": 2048,
        "stream": False,
    },
)
result = response.json()
print(result["choices"][0]["message"]["content"])`}
                />
                <CodeBlock
                  language="typescript"
                  code={`const response = await fetch("${baseUrl}/v1/chat/completions", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    model: "your-model-id",
    messages: [
      { role: "system", content: "你是一个有用的助手" },
      { role: "user", content: "你好，请介绍一下你自己" }
    ],
    temperature: 0.7,
    max_tokens: 2048,
    stream: false,
  }),
})
const result = await response.json()
console.log(result.choices[0].message.content)`}
                />
              </div>

              <div className="mt-4 p-3 bg-muted/50 rounded-md text-sm space-y-2">
                <p className="font-medium">请求参数说明</p>
                <table className="w-full text-xs">
                  <thead>
                    <tr className="border-b">
                      <th className="text-left py-1 pr-2">参数</th>
                      <th className="text-left py-1 pr-2">类型</th>
                      <th className="text-left py-1">说明</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr className="border-b border-muted">
                      <td className="py-1 pr-2 font-mono">model</td>
                      <td className="py-1 pr-2">string</td>
                      <td className="py-1">模型 ID</td>
                    </tr>
                    <tr className="border-b border-muted">
                      <td className="py-1 pr-2 font-mono">messages</td>
                      <td className="py-1 pr-2">array</td>
                      <td className="py-1">对话消息列表</td>
                    </tr>
                    <tr className="border-b border-muted">
                      <td className="py-1 pr-2 font-mono">temperature</td>
                      <td className="py-1 pr-2">number</td>
                      <td className="py-1">采样温度 (0~2)，默认 1.0</td>
                    </tr>
                    <tr className="border-b border-muted">
                      <td className="py-1 pr-2 font-mono">max_tokens</td>
                      <td className="py-1 pr-2">number</td>
                      <td className="py-1">最大生成 token 数</td>
                    </tr>
                    <tr>
                      <td className="py-1 pr-2 font-mono">stream</td>
                      <td className="py-1 pr-2">boolean</td>
                      <td className="py-1">是否流式输出，默认 false</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </ApiSection>
          </Card>

          {/* 3. 流式输出 */}
          <Card className="p-5 space-y-4">
            <ApiSection
              title="流式对话"
              method="POST"
              path="/v1/chat/completions (stream)"
              description="使用 SSE (Server-Sent Events) 实现流式输出，逐 token 返回推理结果。"
            >
              <div className="space-y-3">
                <CodeBlock
                  language="bash"
                  code={`curl ${baseUrl}/v1/chat/completions \\
  -H "Content-Type: application/json" \\
  -d '{
    "model": "your-model-id",
    "messages": [
      {"role": "user", "content": "用 Python 写一个递归遍历目录的例子"}
    ],
    "stream": true
  }'`}
                />
                <CodeBlock
                  language="python"
                  code={`import requests

response = requests.post(
    "${baseUrl}/v1/chat/completions",
    json={
        "model": "your-model-id",
        "messages": [
            {"role": "user", "content": "用 Python 写一个递归遍历目录的例子"}
        ],
        "stream": True,
    },
    stream=True,
)
for line in response.iter_lines():
    if line:
        text = line.decode("utf-8").removeprefix("data: ")
        if text != "[DONE]":
            import json
            chunk = json.loads(text)
            delta = chunk["choices"][0].get("delta", {}).get("content", "")
            print(delta, end="", flush=True)`}
                />
                <CodeBlock
                  language="typescript"
                  code={`const response = await fetch("${baseUrl}/v1/chat/completions", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    model: "your-model-id",
    messages: [
      { role: "user", content: "用 Python 写一个递归遍历目录的例子" }
    ],
    stream: true,
  }),
})

const reader = response.body!.getReader()
const decoder = new TextDecoder()
let buffer = ""

while (true) {
  const { done, value } = await reader.read()
  if (done) break

  buffer += decoder.decode(value, { stream: true })
  const lines = buffer.split("\\n")
  buffer = lines.pop() || ""

  for (const line of lines) {
    const text = line.replace(/^data: /, "").trim()
    if (!text || text === "[DONE]") continue

    const chunk = JSON.parse(text)
    const content = chunk.choices?.[0]?.delta?.content || ""
    process.stdout.write(content)
  }
}`}
                />
              </div>
            </ApiSection>
          </Card>

          {/* 4. 使用 OpenAI SDK */}
          <Card className="p-5 space-y-4">
            <h3 className="text-base font-semibold">使用 OpenAI SDK 调用</h3>
            <p className="text-sm text-muted-foreground">
              由于服务兼容 OpenAI API 格式，你可以直接使用 OpenAI 官方 SDK，只需修改 base URL 即可。
            </p>
            <div className="space-y-3">
              <CodeBlock
                language="python"
                code={`from openai import OpenAI

client = OpenAI(
    base_url="${baseUrl}/v1",
    api_key="not-needed",  # 本地服务不需要 API Key
)

response = client.chat.completions.create(
    model="your-model-id",
    messages=[
        {"role": "user", "content": "你好"}
    ],
    stream=True,
)

for chunk in response:
    if chunk.choices[0].delta.content:
        print(chunk.choices[0].delta.content, end="")`}
              />
              <CodeBlock
                language="typescript"
                code={`import OpenAI from "openai"

const client = new OpenAI({
  baseURL: "${baseUrl}/v1",
  apiKey: "not-needed",
})

const stream = await client.chat.completions.create({
  model: "your-model-id",
  messages: [{ role: "user", content: "你好" }],
  stream: true,
})

for await (const chunk of stream) {
  const content = chunk.choices[0]?.delta?.content || ""
  process.stdout.write(content)
}`}
              />
            </div>
          </Card>

          {/* 5. 健康检查 */}
          <Card className="p-5 space-y-4">
            <ApiSection
              title="健康检查"
              method="GET"
              path="/health"
              description="检查服务运行状态"
            >
              <CodeBlock
                language="bash"
                code={`curl ${baseUrl}/health`}
              />
            </ApiSection>
          </Card>
        </div>
      </Main>
    </>
  )
}