├── app
    ├── favicon.ico
    ├── layout.tsx
    ├── api
    │   ├── models
    │   │   └── route.ts
    │   ├── plantuml
    │   │   ├── render
    │   │   │   └── route.ts
    │   │   └── route.ts
    │   ├── mermaid
    │   │   └── route.ts
    │   ├── graphviz
    │   │   └── route.ts
    │   ├── excalidraw
    │   │   └── route.ts
    │   └── kroki
    │   │   ├── route.ts
    │   │   └── render
    │   │       └── route.ts
    ├── kroki
    │   └── page.tsx
    ├── mermaid
    │   └── page.tsx
    ├── graphviz
    │   └── page.tsx
    ├── plantuml
    │   └── page.tsx
    ├── excalidraw
    │   └── page.tsx
    └── globals.css
├── public
    ├── example.png
    ├── architecture.png
    ├── 01669c29-60a7-4777-af14-0982d6c6daa8.png
    ├── 409fd263-800f-4183-8df9-71691307633c.png
    ├── 6dd5b5c1-1e25-4d33-a45f-d10eb0fbb804.png
    ├── 7736141c-e820-450d-8260-5f5b0c846388.png
    ├── de5e647f-a83a-4b28-bd56-b449f587e472.png
    └── e59f7980-ac2f-4c57-b9a7-8b7c75feed58.png
├── postcss.config.mjs
├── next.config.ts
├── docker-compose.yaml
├── components.json
├── env.example
├── .dockerignore
├── tsconfig.json
├── .gitignore
├── components
    ├── ui
    │   ├── textarea.tsx
    │   ├── input.tsx
    │   ├── scroll-area.tsx
    │   ├── tooltip.tsx
    │   ├── button.tsx
    │   ├── card.tsx
    │   ├── dialog.tsx
    │   └── select.tsx
    ├── button-with-tooltip.tsx
    ├── plantuml-workspace.tsx
    ├── reset-warning-modal.tsx
    ├── graphviz-workspace.tsx
    ├── mermaid-workspace.tsx
    ├── kroki-workspace.tsx
    ├── mode-selector.tsx
    ├── excalidraw-workspace.tsx
    ├── excalidraw-history-dialog.tsx
    ├── resizable-panel.tsx
    ├── mode-nav.tsx
    ├── history-dialog.tsx
    ├── chat-example-panel.tsx
    ├── collapsible-chat-panel.tsx
    ├── file-preview-list.tsx
    ├── kroki-chat-panel.tsx
    ├── graphviz-chat-panel.tsx
    ├── mermaid-chat-panel.tsx
    ├── plantuml-chat-panel.tsx
    ├── excalidraw-chat-panel.tsx
    ├── graphviz-definition-card.tsx
    ├── mermaid-definition-card.tsx
    ├── kroki-definition-card.tsx
    └── plantuml-definition-card.tsx
├── Dockerfile
├── lib
    ├── model-provider.ts
    └── ai-providers.ts
├── package.json
├── contexts
    ├── graphviz-context.tsx
    ├── plantuml-context.tsx
    ├── diagram-context.tsx
    ├── mermaid-context.tsx
    └── model-config-context.tsx
├── README.md
└── README_en.md


/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shenpeiheng/ai-smart-draw/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/public/example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shenpeiheng/ai-smart-draw/HEAD/public/example.png


--------------------------------------------------------------------------------
/public/architecture.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shenpeiheng/ai-smart-draw/HEAD/public/architecture.png


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | const config = {
2 |   plugins: ["@tailwindcss/postcss"],
3 | };
4 | 
5 | export default config;
6 | 


--------------------------------------------------------------------------------
/public/01669c29-60a7-4777-af14-0982d6c6daa8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shenpeiheng/ai-smart-draw/HEAD/public/01669c29-60a7-4777-af14-0982d6c6daa8.png


--------------------------------------------------------------------------------
/public/409fd263-800f-4183-8df9-71691307633c.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shenpeiheng/ai-smart-draw/HEAD/public/409fd263-800f-4183-8df9-71691307633c.png


--------------------------------------------------------------------------------
/public/6dd5b5c1-1e25-4d33-a45f-d10eb0fbb804.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shenpeiheng/ai-smart-draw/HEAD/public/6dd5b5c1-1e25-4d33-a45f-d10eb0fbb804.png


--------------------------------------------------------------------------------
/public/7736141c-e820-450d-8260-5f5b0c846388.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shenpeiheng/ai-smart-draw/HEAD/public/7736141c-e820-450d-8260-5f5b0c846388.png


--------------------------------------------------------------------------------
/public/de5e647f-a83a-4b28-bd56-b449f587e472.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shenpeiheng/ai-smart-draw/HEAD/public/de5e647f-a83a-4b28-bd56-b449f587e472.png


--------------------------------------------------------------------------------
/public/e59f7980-ac2f-4c57-b9a7-8b7c75feed58.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shenpeiheng/ai-smart-draw/HEAD/public/e59f7980-ac2f-4c57-b9a7-8b7c75feed58.png


--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
1 | import type { NextConfig } from "next";
2 | 
3 | const nextConfig: NextConfig = {
4 |   /* config options here */
5 | };
6 | 
7 | export default nextConfig;
8 | 


--------------------------------------------------------------------------------
/docker-compose.yaml:
--------------------------------------------------------------------------------
 1 | version: '3.8'
 2 | 
 3 | services:
 4 |   ai-smart-draw:
 5 |     image: ai-smart-draw
 6 |     container_name: ai-smart-draw
 7 |     ports:
 8 |       - "6001:6001"
 9 |     env_file:
10 |       - .env.local
11 |     restart: unless-stopped
12 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "neutral",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   },
20 |   "iconLibrary": "lucide"
21 | }


--------------------------------------------------------------------------------
/env.example:
--------------------------------------------------------------------------------
 1 | # OpenAI credentials used on the server (front-end UI can override per browser)
 2 | OPENAI_API_KEY="your-openai-api-key-here"
 3 | # Optional overrides:
 4 | # OPENAI_MODEL="gpt-4o-mini"
 5 | # OPENAI_BASE_URL="https://api.openai.com/v1"
 6 | # OPENAI_MAX_OUTPUT_TOKENS="16000" # raise if your provider allows larger responses
 7 | 
 8 | # Optional: override the PlantUML renderer used for previews
 9 | # PLANTUML_RENDER_BASE="https://your-internal-host/plantuml/svg"
10 | 
11 | # Optional: override the Kroki renderer used for previews (defaults to https://kroki.io)
12 | # KROKI_RENDER_BASE="https://your-internal-host-or-alternative-kroki-instance


--------------------------------------------------------------------------------
/.dockerignore:
--------------------------------------------------------------------------------
 1 | # General
 2 | .git
 3 | .gitignore
 4 | .gitattributes
 5 | 
 6 | # Dependencies
 7 | node_modules
 8 | 
 9 | # Build artifacts
10 | .next
11 | .nuxt
12 | .cache
13 | .vscode
14 | .idea
15 | 
16 | # Environment files
17 | .env
18 | .env.local
19 | .env.development
20 | .env.test
21 | .env.production
22 | 
23 | # Logs
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # System Files
29 | .DS_Store
30 | Thumbs.db
31 | 
32 | # Test files
33 | coverage
34 | *.log
35 | 
36 | # Build files
37 | Dockerfile
38 | dist
39 | build
40 | out
41 | 
42 | # Documentation
43 | README.md
44 | LICENSE
45 | *.pdf
46 | 
47 | # Misc
48 | *.swp
49 | *.swo
50 | *~
51 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2017",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.*
 7 | .yarn/*
 8 | !.yarn/patches
 9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 | 
13 | # testing
14 | /coverage
15 | 
16 | # next.js
17 | /.next/
18 | /out/
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 | 
33 | # env files (can opt-in for committing if needed)
34 | .env*
35 | 
36 | # vercel
37 | .vercel
38 | 
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 | push-via-ec2.sh
43 | .claude/settings.local.json
44 | /.idea/
45 | /.fastRequest/
46 | 


--------------------------------------------------------------------------------
/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
 6 |   return (
 7 |     <textarea
 8 |       data-slot="textarea"
 9 |       className={cn(
10 |         "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
11 |         className
12 |       )}
13 |       {...props}
14 |     />
15 |   )
16 | }
17 | 
18 | export { Textarea }
19 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM node:20-alpine AS deps
 2 | RUN apk add --no-cache libc6-compat
 3 | WORKDIR /app
 4 | 
 5 | COPY package.json package-lock.json ./
 6 | RUN npm ci
 7 | 
 8 | FROM node:20-alpine AS builder
 9 | WORKDIR /app
10 | ENV NEXT_TELEMETRY_DISABLED=1
11 | 
12 | COPY --from=deps /app/node_modules ./node_modules
13 | COPY . .
14 | 
15 | RUN npm run build
16 | RUN npm prune --omit=dev
17 | 
18 | FROM node:20-alpine AS runner
19 | WORKDIR /app
20 | ENV NODE_ENV=production
21 | ENV NEXT_TELEMETRY_DISABLED=1
22 | ENV PORT=6001
23 | 
24 | COPY --from=builder /app/package.json ./package.json
25 | COPY --from=builder /app/package-lock.json ./package-lock.json
26 | COPY --from=builder /app/node_modules ./node_modules
27 | COPY --from=builder /app/.next ./.next
28 | COPY --from=builder /app/public ./public
29 | COPY --from=builder /app/next.config.ts ./next.config.ts
30 | 
31 | EXPOSE 6001
32 | 
33 | CMD ["npm", "run", "start"]
34 | 


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 6 |   return (
 7 |     <input
 8 |       type={type}
 9 |       data-slot="input"
10 |       className={cn(
11 |         "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12 |         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
13 |         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
14 |         className
15 |       )}
16 |       {...props}
17 |     />
18 |   )
19 | }
20 | 
21 | export { Input }
22 | 


--------------------------------------------------------------------------------
/components/button-with-tooltip.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Button, buttonVariants } from "@/components/ui/button";
 3 | import {
 4 |     Tooltip,
 5 |     TooltipContent,
 6 |     TooltipProvider,
 7 |     TooltipTrigger,
 8 | } from "@/components/ui/tooltip";
 9 | import { type VariantProps } from "class-variance-authority";
10 | 
11 | interface ButtonWithTooltipProps
12 |     extends React.ComponentProps<"button">,
13 |         VariantProps<typeof buttonVariants> {
14 |     tooltipContent: string;
15 |     children: React.ReactNode;
16 |     asChild?: boolean;
17 | }
18 | 
19 | export function ButtonWithTooltip({
20 |     tooltipContent,
21 |     children,
22 |     ...buttonProps
23 | }: ButtonWithTooltipProps) {
24 |     return (
25 |         <TooltipProvider>
26 |             <Tooltip>
27 |                 <TooltipTrigger asChild>
28 |                     <Button {...buttonProps}>{children}</Button>
29 |                 </TooltipTrigger>
30 |                 <TooltipContent>{tooltipContent}</TooltipContent>
31 |             </Tooltip>
32 |         </TooltipProvider>
33 |     );
34 | }
35 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Analytics } from "@vercel/analytics/react";
 3 | import { DiagramProvider } from "@/contexts/diagram-context";
 4 | import { ModelConfigProvider } from "@/contexts/model-config-context";
 5 | import { KrokiProvider } from "@/contexts/kroki-context";
 6 | import "@excalidraw/excalidraw/index.css";
 7 | 
 8 | import "./globals.css";
 9 | 
10 | export const metadata: Metadata = {
11 |     title: "AI Smart Draw",
12 |     description: "An AI-powered drawing tool that integrates with draw.io, Mermaid, PlantUML, Excalidraw and more",
13 | };
14 | 
15 | export default function RootLayout({
16 |     children,
17 | }: Readonly<{
18 |     children: React.ReactNode;
19 | }>) {
20 |     return (
21 |         <html lang="en">
22 |             <body className="antialiased">
23 |                 <DiagramProvider>
24 |                     <ModelConfigProvider>
25 |                         <KrokiProvider>{children}</KrokiProvider>
26 |                     </ModelConfigProvider>
27 |                 </DiagramProvider>
28 | 
29 |                 <Analytics />
30 |             </body>
31 |         </html>
32 |     );
33 | }
34 | 


--------------------------------------------------------------------------------
/lib/model-provider.ts:
--------------------------------------------------------------------------------
 1 | import { createOpenAI } from "@ai-sdk/openai";
 2 | 
 3 | export interface ModelConfigInput {
 4 |     apiKey?: string;
 5 |     baseUrl?: string;
 6 |     model?: string;
 7 |     maxOutputTokens?: number;
 8 | }
 9 | 
10 | const DEFAULTS = {
11 |     model: process.env.OPENAI_MODEL ?? "gpt-4o-mini",
12 |     baseUrl: process.env.OPENAI_BASE_URL ?? "https://api.openai.com/v1",
13 |     apiKey: process.env.OPENAI_API_KEY,
14 |     maxOutputTokens: parseEnvInt(process.env.OPENAI_MAX_OUTPUT_TOKENS),
15 | };
16 | 
17 | function parseEnvInt(value?: string) {
18 |     if (!value) return undefined;
19 |     const parsed = Number.parseInt(value, 10);
20 |     return Number.isFinite(parsed) && parsed > 0 ? parsed : undefined;
21 | }
22 | 
23 | export function resolveModel(config?: ModelConfigInput) {
24 |     const baseUrl = config?.baseUrl?.trim() || DEFAULTS.baseUrl;
25 |     const apiKey = config?.apiKey?.trim() || DEFAULTS.apiKey;
26 |     const model = config?.model?.trim() || DEFAULTS.model;
27 |     const maxOutputTokens =
28 |         typeof config?.maxOutputTokens === "number"
29 |             ? config.maxOutputTokens
30 |             : DEFAULTS.maxOutputTokens;
31 | 
32 |     const client = createOpenAI({
33 |         apiKey,
34 |         baseURL: baseUrl,
35 |         name: "openai",
36 |     });
37 | 
38 |     return { client, model, maxOutputTokens };
39 | }
40 | 


--------------------------------------------------------------------------------
/components/plantuml-workspace.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useState } from "react";
 4 | import { usePlantUML } from "@/contexts/plantuml-context";
 5 | import { PlantUMLPreview } from "@/components/plantuml-preview";
 6 | import { PlantUMLDefinitionCard } from "@/components/plantuml-definition-card";
 7 | import { ResizablePanel } from "@/components/resizable-panel";
 8 | 
 9 | export function PlantUMLWorkspace() {
10 |     const { definition, clearDefinition, setDefinition } = usePlantUML();
11 |     const [isCollapsed, setIsCollapsed] = useState(false);
12 | 
13 |     const togglePanel = () => {
14 |         setIsCollapsed(!isCollapsed);
15 |     };
16 | 
17 |     return (
18 |         <div className="flex flex-col h-full gap-1">
19 |             <div className="flex-1 min-h-0">
20 |                 <PlantUMLPreview definition={definition} />
21 |             </div>
22 |             <ResizablePanel 
23 |                 defaultHeight={208}
24 |                 isCollapsed={isCollapsed}
25 |                 onToggle={togglePanel}
26 |             >
27 |                 <PlantUMLDefinitionCard
28 |                     definition={definition}
29 |                     onDefinitionChange={setDefinition}
30 |                     onReset={clearDefinition}
31 |                     isCollapsed={isCollapsed}
32 |                     onToggle={togglePanel}
33 |                 />
34 |             </ResizablePanel>
35 |         </div>
36 |     );
37 | }


--------------------------------------------------------------------------------
/components/reset-warning-modal.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Button } from "@/components/ui/button";
 4 | import {
 5 |     Dialog,
 6 |     DialogContent,
 7 |     DialogDescription,
 8 |     DialogFooter,
 9 |     DialogHeader,
10 |     DialogTitle,
11 | } from "@/components/ui/dialog";
12 | 
13 | interface ResetWarningModalProps {
14 |     open: boolean;
15 |     onOpenChange: (open: boolean) => void;
16 |     onClear: () => void;
17 | }
18 | 
19 | export function ResetWarningModal({
20 |     open,
21 |     onOpenChange,
22 |     onClear,
23 | }: ResetWarningModalProps) {
24 |     return (
25 |         <Dialog open={open} onOpenChange={onOpenChange}>
26 |             <DialogContent>
27 |                 <DialogHeader>
28 |                     <DialogTitle>清除所有内容？</DialogTitle>
29 |                     <DialogDescription>
30 |                         这将清除当前对话并重置图表。此操作无法撤销。
31 |                     </DialogDescription>
32 |                 </DialogHeader>
33 |                 <DialogFooter>
34 |                     <Button
35 |                         variant="outline"
36 |                         onClick={() => onOpenChange(false)}
37 |                     >
38 |                         取消
39 |                     </Button>
40 |                     <Button variant="destructive" onClick={onClear}>
41 |                         清除所有内容
42 |                     </Button>
43 |                 </DialogFooter>
44 |             </DialogContent>
45 |         </Dialog>
46 |     );
47 | }
48 | 


--------------------------------------------------------------------------------
/components/graphviz-workspace.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useState } from "react";
 4 | import { GraphvizPreview } from "@/components/graphviz-preview";
 5 | import { useGraphviz } from "@/contexts/graphviz-context";
 6 | import { GraphvizDefinitionCard } from "@/components/graphviz-definition-card";
 7 | import { ResizablePanel } from "@/components/resizable-panel";
 8 | 
 9 | export function GraphvizWorkspace() {
10 |     const { definition, setDefinition, clearDefinition, defaultDefinition } = useGraphviz();
11 |     const [isCollapsed, setIsCollapsed] = useState(false);
12 | 
13 |     const togglePanel = () => {
14 |         setIsCollapsed(!isCollapsed);
15 |     };
16 | 
17 |     return (
18 |         <div className="flex flex-col h-full gap-1">
19 |             <div className="flex-1 min-h-0">
20 |                 <GraphvizPreview />
21 |             </div>
22 |             <ResizablePanel 
23 |                 defaultHeight={208}
24 |                 isCollapsed={isCollapsed}
25 |                 onToggle={togglePanel}
26 |             >
27 |                 <GraphvizDefinitionCard
28 |                     definition={definition}
29 |                     onChange={setDefinition}
30 |                     onClear={clearDefinition}
31 |                     defaultDefinition={defaultDefinition}
32 |                     isCollapsed={isCollapsed}
33 |                     onToggle={togglePanel}
34 |                 />
35 |             </ResizablePanel>
36 |         </div>
37 |     );
38 | }


--------------------------------------------------------------------------------
/components/mermaid-workspace.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useState } from "react";
 4 | import { MermaidPreview } from "@/components/mermaid-preview";
 5 | import { MermaidDefinitionCard } from "@/components/mermaid-definition-card";
 6 | import { useMermaid } from "@/contexts/mermaid-context";
 7 | import { ResizablePanel } from "@/components/resizable-panel";
 8 | 
 9 | export function MermaidWorkspace() {
10 |     const { definition, clearDefinition, setDefinition } = useMermaid();
11 |     const [isCollapsed, setIsCollapsed] = useState(false);
12 | 
13 |     const togglePanel = () => {
14 |         setIsCollapsed(!isCollapsed);
15 |     };
16 | 
17 |     return (
18 |         <div className="flex flex-col h-full gap-1">
19 |             <div className="flex-1 min-h-0">
20 |                 <MermaidPreview
21 |                     definition={definition}
22 |                     className="h-full"
23 |                 />
24 |             </div>
25 |             <ResizablePanel 
26 |                 defaultHeight={208}
27 |                 isCollapsed={isCollapsed}
28 |                 onToggle={togglePanel}
29 |             >
30 |                 <MermaidDefinitionCard
31 |                     definition={definition}
32 |                     onDefinitionChange={setDefinition}
33 |                     onReset={clearDefinition}
34 |                     isCollapsed={isCollapsed}
35 |                     onToggle={togglePanel}
36 |                 />
37 |             </ResizablePanel>
38 |         </div>
39 |     );
40 | }


--------------------------------------------------------------------------------
/app/api/models/route.ts:
--------------------------------------------------------------------------------
 1 | export const maxDuration = 30;
 2 | 
 3 | interface ModelListResponse {
 4 |     id: string;
 5 | }
 6 | 
 7 | export async function POST(req: Request) {
 8 |     try {
 9 |         const { modelConfig } = await req.json();
10 |         const baseUrl: string =
11 |             (modelConfig?.baseUrl?.trim() as string | undefined) ||
12 |             process.env.OPENAI_BASE_URL ||
13 |             "https://api.openai.com/v1";
14 |         const apiKey: string | undefined =
15 |             (modelConfig?.apiKey?.trim() as string | undefined) ||
16 |             process.env.OPENAI_API_KEY;
17 | 
18 |         if (!apiKey) {
19 |             return Response.json(
20 |                 { error: "缺少 API Key，无法获取模型列表" },
21 |                 { status: 400 }
22 |             );
23 |         }
24 | 
25 |         const res = await fetch(`${baseUrl.replace(/\/+$/, "")}/models`, {
26 |             method: "GET",
27 |             headers: {
28 |                 Authorization: `Bearer ${apiKey}`,
29 |             },
30 |         });
31 | 
32 |         if (!res.ok) {
33 |             const text = await res.text();
34 |             return Response.json(
35 |                 { error: `获取模型失败：${res.status} ${text.slice(0, 300)}` },
36 |                 { status: res.status }
37 |             );
38 |         }
39 | 
40 |         const data = await res.json();
41 |         const ids =
42 |             (data?.data as ModelListResponse[] | undefined)?.map((m) => m.id) ||
43 |             [];
44 | 
45 |         return Response.json({ models: ids });
46 |     } catch (error) {
47 |         console.error("models route error", error);
48 |         return Response.json(
49 |             { error: "Internal server error" },
50 |             { status: 500 }
51 |         );
52 |     }
53 | }
54 | 


--------------------------------------------------------------------------------
/app/kroki/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import React, { useEffect, useState } from "react";
 4 | import { KrokiProvider } from "@/contexts/kroki-context";
 5 | import { KrokiWorkspace } from "@/components/kroki-workspace";
 6 | import { CollapsibleChatPanel } from "@/components/collapsible-chat-panel";
 7 | 
 8 | export default function KrokiPage() {
 9 |     const [isMobile, setIsMobile] = useState(false);
10 |     const [isChatCollapsed, setIsChatCollapsed] = useState(false);
11 | 
12 |     useEffect(() => {
13 |         const checkMobile = () => {
14 |             setIsMobile(window.innerWidth < 768);
15 |         };
16 | 
17 |         checkMobile();
18 |         window.addEventListener("resize", checkMobile);
19 |         return () => window.removeEventListener("resize", checkMobile);
20 |     }, []);
21 | 
22 |     if (isMobile) {
23 |         return (
24 |             <div className="flex items-center justify-center h-screen bg-gray-100">
25 |                 <div className="text-center p-8">
26 |                     <h1 className="text-2xl font-semibold text-gray-800">
27 |                         Please open this application on a desktop or laptop
28 |                     </h1>
29 |                 </div>
30 |             </div>
31 |         );
32 |     }
33 | 
34 |     return (
35 |         <KrokiProvider>
36 |             <div className="flex h-screen bg-gray-100 overflow-hidden">
37 |                 <div className={`h-full p-1 transition-all duration-300 ${isChatCollapsed ? 'w-full' : 'w-3/4'}`}>
38 |                     <KrokiWorkspace />
39 |                 </div>
40 |                 <div className={`h-full p-1 transition-all duration-300 ${isChatCollapsed ? 'w-0' : 'w-1/4'}`}>
41 |                     <CollapsibleChatPanel type="kroki" onCollapseChange={setIsChatCollapsed} />
42 |                 </div>
43 |             </div>
44 |         </KrokiProvider>
45 |     );
46 | }


--------------------------------------------------------------------------------
/app/mermaid/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import React, { useEffect, useState } from "react";
 4 | import { MermaidProvider } from "@/contexts/mermaid-context";
 5 | import { MermaidWorkspace } from "@/components/mermaid-workspace";
 6 | import { CollapsibleChatPanel } from "@/components/collapsible-chat-panel";
 7 | 
 8 | export default function MermaidPage() {
 9 |     const [isMobile, setIsMobile] = useState(false);
10 |     const [isChatCollapsed, setIsChatCollapsed] = useState(false);
11 | 
12 |     useEffect(() => {
13 |         const checkMobile = () => {
14 |             setIsMobile(window.innerWidth < 768);
15 |         };
16 | 
17 |         checkMobile();
18 |         window.addEventListener("resize", checkMobile);
19 |         return () => window.removeEventListener("resize", checkMobile);
20 |     }, []);
21 | 
22 |     if (isMobile) {
23 |         return (
24 |             <div className="flex items-center justify-center h-screen bg-gray-100">
25 |                 <div className="text-center p-8">
26 |                     <h1 className="text-2xl font-semibold text-gray-800">
27 |                         Please open this application on a desktop or laptop
28 |                     </h1>
29 |                 </div>
30 |             </div>
31 |         );
32 |     }
33 | 
34 |     return (
35 |         <MermaidProvider>
36 |             <div className="flex h-screen bg-gray-100 overflow-hidden">
37 |                 <div className={`h-full p-1 transition-all duration-300 ${isChatCollapsed ? 'w-full' : 'w-3/4'}`}>
38 |                     <MermaidWorkspace />
39 |                 </div>
40 |                 <div className={`h-full p-1 transition-all duration-300 ${isChatCollapsed ? 'w-0' : 'w-1/4'}`}>
41 |                     <CollapsibleChatPanel type="mermaid" onCollapseChange={setIsChatCollapsed} />
42 |                 </div>
43 |             </div>
44 |         </MermaidProvider>
45 |     );
46 | }


--------------------------------------------------------------------------------
/app/graphviz/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import React, { useEffect, useState } from "react";
 4 | import { GraphvizProvider } from "@/contexts/graphviz-context";
 5 | import { GraphvizWorkspace } from "@/components/graphviz-workspace";
 6 | import { CollapsibleChatPanel } from "@/components/collapsible-chat-panel";
 7 | 
 8 | export default function GraphvizPage() {
 9 |     const [isMobile, setIsMobile] = useState(false);
10 |     const [isChatCollapsed, setIsChatCollapsed] = useState(false);
11 | 
12 |     useEffect(() => {
13 |         const checkMobile = () => {
14 |             setIsMobile(window.innerWidth < 768);
15 |         };
16 | 
17 |         checkMobile();
18 |         window.addEventListener("resize", checkMobile);
19 |         return () => window.removeEventListener("resize", checkMobile);
20 |     }, []);
21 | 
22 |     if (isMobile) {
23 |         return (
24 |             <div className="flex items-center justify-center h-screen bg-gray-100">
25 |                 <div className="text-center p-8">
26 |                     <h1 className="text-2xl font-semibold text-gray-800">
27 |                         Please open this application on a desktop or laptop
28 |                     </h1>
29 |                 </div>
30 |             </div>
31 |         );
32 |     }
33 | 
34 |     return (
35 |         <GraphvizProvider>
36 |             <div className="flex h-screen bg-gray-100 overflow-hidden">
37 |                 <div className={`h-full p-1 transition-all duration-300 ${isChatCollapsed ? 'w-full' : 'w-3/4'}`}>
38 |                     <GraphvizWorkspace />
39 |                 </div>
40 |                 <div className={`h-full p-1 transition-all duration-300 ${isChatCollapsed ? 'w-0' : 'w-1/4'}`}>
41 |                     <CollapsibleChatPanel type="graphviz" onCollapseChange={setIsChatCollapsed} />
42 |                 </div>
43 |             </div>
44 |         </GraphvizProvider>
45 |     );
46 | }


--------------------------------------------------------------------------------
/app/plantuml/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import React, { useEffect, useState } from "react";
 4 | import { PlantUMLProvider } from "@/contexts/plantuml-context";
 5 | import { PlantUMLWorkspace } from "@/components/plantuml-workspace";
 6 | import { CollapsibleChatPanel } from "@/components/collapsible-chat-panel";
 7 | 
 8 | export default function PlantUMLPage() {
 9 |     const [isMobile, setIsMobile] = useState(false);
10 |     const [isChatCollapsed, setIsChatCollapsed] = useState(false);
11 | 
12 |     useEffect(() => {
13 |         const checkMobile = () => {
14 |             setIsMobile(window.innerWidth < 768);
15 |         };
16 | 
17 |         checkMobile();
18 |         window.addEventListener("resize", checkMobile);
19 |         return () => window.removeEventListener("resize", checkMobile);
20 |     }, []);
21 | 
22 |     if (isMobile) {
23 |         return (
24 |             <div className="flex items-center justify-center h-screen bg-gray-100">
25 |                 <div className="text-center p-8">
26 |                     <h1 className="text-2xl font-semibold text-gray-800">
27 |                         Please open this application on a desktop or laptop
28 |                     </h1>
29 |                 </div>
30 |             </div>
31 |         );
32 |     }
33 | 
34 |     return (
35 |         <PlantUMLProvider>
36 |             <div className="flex h-screen bg-gray-100 overflow-hidden">
37 |                 <div className={`h-full p-1 transition-all duration-300 ${isChatCollapsed ? 'w-full' : 'w-3/4'}`}>
38 |                     <PlantUMLWorkspace />
39 |                 </div>
40 |                 <div className={`h-full p-1 transition-all duration-300 ${isChatCollapsed ? 'w-0' : 'w-1/4'}`}>
41 |                     <CollapsibleChatPanel type="plantuml" onCollapseChange={setIsChatCollapsed} />
42 |                 </div>
43 |             </div>
44 |         </PlantUMLProvider>
45 |     );
46 | }


--------------------------------------------------------------------------------
/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function ScrollArea({
 9 |   className,
10 |   children,
11 |   ...props
12 | }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
13 |   return (
14 |     <ScrollAreaPrimitive.Root
15 |       data-slot="scroll-area"
16 |       className={cn("relative", className)}
17 |       {...props}
18 |     >
19 |       <ScrollAreaPrimitive.Viewport
20 |         data-slot="scroll-area-viewport"
21 |         className="ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1"
22 |       >
23 |         {children}
24 |       </ScrollAreaPrimitive.Viewport>
25 |       <ScrollBar />
26 |       <ScrollAreaPrimitive.Corner />
27 |     </ScrollAreaPrimitive.Root>
28 |   )
29 | }
30 | 
31 | function ScrollBar({
32 |   className,
33 |   orientation = "vertical",
34 |   ...props
35 | }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
36 |   return (
37 |     <ScrollAreaPrimitive.ScrollAreaScrollbar
38 |       data-slot="scroll-area-scrollbar"
39 |       orientation={orientation}
40 |       className={cn(
41 |         "flex touch-none p-px transition-colors select-none",
42 |         orientation === "vertical" &&
43 |           "h-full w-2.5 border-l border-l-transparent",
44 |         orientation === "horizontal" &&
45 |           "h-2.5 flex-col border-t border-t-transparent",
46 |         className
47 |       )}
48 |       {...props}
49 |     >
50 |       <ScrollAreaPrimitive.ScrollAreaThumb
51 |         data-slot="scroll-area-thumb"
52 |         className="bg-border relative flex-1 rounded-full"
53 |       />
54 |     </ScrollAreaPrimitive.ScrollAreaScrollbar>
55 |   )
56 | }
57 | 
58 | export { ScrollArea, ScrollBar }
59 | 


--------------------------------------------------------------------------------
/components/kroki-workspace.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useState, useEffect } from "react";
 4 | import { useKroki } from "@/contexts/kroki-context";
 5 | import { KrokiPreview } from "@/components/kroki-preview";
 6 | import { KrokiDefinitionCard } from "@/components/kroki-definition-card";
 7 | import { ResizablePanel } from "@/components/resizable-panel";
 8 | 
 9 | export function KrokiWorkspace() {
10 |     const { definition, clearDefinition, setDefinition, setDefinitionForType } = useKroki();
11 |     const [diagramType, setDiagramType] = useState<string>("auto");
12 |     const [isCollapsed, setIsCollapsed] = useState(false);
13 | 
14 |     const togglePanel = () => {
15 |         setIsCollapsed(!isCollapsed);
16 |     };
17 | 
18 |     // When the diagram type changes, update the definition to match the selected type
19 |     useEffect(() => {
20 |         if (diagramType !== "auto") {
21 |             setDefinitionForType(diagramType);
22 |         }
23 |     }, [diagramType, setDefinitionForType]);
24 | 
25 |     return (
26 |         <div className="flex flex-col h-full gap-1">
27 |             <div className="flex-1 min-h-0">
28 |                 <KrokiPreview 
29 |                     definition={definition} 
30 |                     diagramType={diagramType}
31 |                     onDiagramTypeChange={setDiagramType}
32 |                 />
33 |             </div>
34 |             <ResizablePanel 
35 |                 defaultHeight={208}
36 |                 isCollapsed={isCollapsed}
37 |                 onToggle={togglePanel}
38 |             >
39 |                 <KrokiDefinitionCard
40 |                     definition={definition}
41 |                     onDefinitionChange={setDefinition}
42 |                     onReset={clearDefinition}
43 |                     isCollapsed={isCollapsed}
44 |                     onToggle={togglePanel}
45 |                 />
46 |             </ResizablePanel>
47 |         </div>
48 |     );
49 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ai-smart-draw",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev --turbopack --port 6002",
 7 |     "build": "next build",
 8 |     "start": "next start --port 6001",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@ai-sdk/amazon-bedrock": "^3.0.62",
13 |     "@ai-sdk/anthropic": "^2.0.44",
14 |     "@ai-sdk/azure": "^2.0.69",
15 |     "@ai-sdk/deepseek": "^1.0.30",
16 |     "@ai-sdk/google": "^2.0.0",
17 |     "@ai-sdk/openai": "^2.0.19",
18 |     "@ai-sdk/react": "^2.0.22",
19 |     "@excalidraw/excalidraw": "^0.18.0",
20 |     "@openrouter/ai-sdk-provider": "^1.2.3",
21 |     "@radix-ui/react-dialog": "^1.1.6",
22 |     "@radix-ui/react-scroll-area": "^1.2.3",
23 |     "@radix-ui/react-select": "^2.1.10",
24 |     "@radix-ui/react-slot": "^1.1.2",
25 |     "@radix-ui/react-tooltip": "^1.1.8",
26 |     "@vercel/analytics": "^1.5.0",
27 |     "@xmldom/xmldom": "^0.9.8",
28 |     "ai": "^5.0.89",
29 |     "base-64": "^1.0.0",
30 |     "class-variance-authority": "^0.7.1",
31 |     "clsx": "^2.1.1",
32 |     "jsdom": "^26.0.0",
33 |     "lucide-react": "^0.483.0",
34 |     "mermaid": "11.10.0",
35 |     "next": "15.4.7",
36 |     "ollama-ai-provider-v2": "^1.5.4",
37 |     "pako": "^2.1.0",
38 |     "plantuml-encoder": "^1.4.0",
39 |     "react": "^19.0.0",
40 |     "react-dom": "^19.0.0",
41 |     "react-drawio": "^1.0.7",
42 |     "react-icons": "^5.5.0",
43 |     "remark-gfm": "^4.0.1",
44 |     "tailwind-merge": "^3.0.2",
45 |     "tailwindcss-animate": "^1.0.7",
46 |     "zod": "^4.1.12"
47 |   },
48 |   "devDependencies": {
49 |     "eslint": "9.39.1",
50 |     "eslint-config-next": "16.0.5",
51 |     "@tailwindcss/postcss": "^4",
52 |     "@types/node": "^20",
53 |     "@types/pako": "^2.0.3",
54 |     "@types/plantuml-encoder": "^1.4.2",
55 |     "@types/react": "^19",
56 |     "@types/react-dom": "^19",
57 |     "tailwindcss": "^4",
58 |     "typescript": "^5"
59 |   }
60 | }


--------------------------------------------------------------------------------
/contexts/graphviz-context.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import React, {
 4 |     createContext,
 5 |     useCallback,
 6 |     useContext,
 7 |     useMemo,
 8 |     useState,
 9 | } from "react";
10 | 
11 | // Default Graphviz definition
12 | const DEFAULT_DEFINITION = `digraph code_structure {
13 |     rankdir=TB;
14 |     main -> parse -> execute;
15 |     main -> init;
16 |     main -> cleanup;
17 |     execute -> make_string;
18 |     execute -> printf;
19 |     init -> make_string;
20 |     main -> printf;
21 |     execute -> compare;
22 | }
23 | `;
24 | 
25 | interface GraphvizContextType {
26 |     definition: string;
27 |     setDefinition: (definition: string) => void;
28 |     defaultDefinition: string;
29 |     clearDefinition: () => void;
30 |     updateDefinition: (definition: string, summary?: string) => void;
31 | }
32 | 
33 | const GraphvizContext = createContext<GraphvizContextType | undefined>(undefined);
34 | 
35 | export function GraphvizProvider({ children }: { children: React.ReactNode }) {
36 |     const [definition, setDefinition] = useState<string>(DEFAULT_DEFINITION);
37 | 
38 |     const clearDefinition = useCallback(() => {
39 |         setDefinition(DEFAULT_DEFINITION);
40 |     }, []);
41 | 
42 |     const updateDefinition = useCallback((newDefinition: string, summary?: string) => {
43 |         setDefinition(newDefinition);
44 |     }, []);
45 | 
46 |     const contextValue = useMemo(
47 |         () => ({
48 |             definition,
49 |             setDefinition,
50 |             defaultDefinition: DEFAULT_DEFINITION,
51 |             clearDefinition,
52 |             updateDefinition,
53 |         }),
54 |         [definition, clearDefinition, updateDefinition]
55 |     );
56 | 
57 |     return (
58 |         <GraphvizContext.Provider value={contextValue}>
59 |             {children}
60 |         </GraphvizContext.Provider>
61 |     );
62 | }
63 | 
64 | export function useGraphviz() {
65 |     const context = useContext(GraphvizContext);
66 |     if (context === undefined) {
67 |         throw new Error("useGraphviz must be used within a GraphvizProvider");
68 |     }
69 |     return context;
70 | }


--------------------------------------------------------------------------------
/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function TooltipProvider({
 9 |   delayDuration = 0,
10 |   ...props
11 | }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
12 |   return (
13 |     <TooltipPrimitive.Provider
14 |       data-slot="tooltip-provider"
15 |       delayDuration={delayDuration}
16 |       {...props}
17 |     />
18 |   )
19 | }
20 | 
21 | function Tooltip({
22 |   ...props
23 | }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
24 |   return (
25 |     <TooltipProvider>
26 |       <TooltipPrimitive.Root data-slot="tooltip" {...props} />
27 |     </TooltipProvider>
28 |   )
29 | }
30 | 
31 | function TooltipTrigger({
32 |   ...props
33 | }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
34 |   return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
35 | }
36 | 
37 | function TooltipContent({
38 |   className,
39 |   sideOffset = 0,
40 |   children,
41 |   ...props
42 | }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
43 |   return (
44 |     <TooltipPrimitive.Portal>
45 |       <TooltipPrimitive.Content
46 |         data-slot="tooltip-content"
47 |         sideOffset={sideOffset}
48 |         className={cn(
49 |           "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
50 |           className
51 |         )}
52 |         {...props}
53 |       >
54 |         {children}
55 |         <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
56 |       </TooltipPrimitive.Content>
57 |     </TooltipPrimitive.Portal>
58 |   )
59 | }
60 | 
61 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
62 | 


--------------------------------------------------------------------------------
/app/excalidraw/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import React, { useEffect, useState } from "react";
 4 | import { ExcalidrawProvider } from "@/contexts/excalidraw-context";
 5 | import { ExcalidrawWorkspace } from "@/components/excalidraw-workspace";
 6 | import { CollapsibleChatPanel } from "@/components/collapsible-chat-panel";
 7 | import { ExcalidrawHistoryDialog } from "@/components/excalidraw-history-dialog";
 8 | 
 9 | export default function ExcalidrawPage() {
10 |     const [isMobile, setIsMobile] = useState(false);
11 |     const [showHistory, setShowHistory] = useState(false);
12 |     const [isChatCollapsed, setIsChatCollapsed] = useState(false);
13 | 
14 |     useEffect(() => {
15 |         const checkMobile = () => {
16 |             setIsMobile(window.innerWidth < 768);
17 |         };
18 | 
19 |         checkMobile();
20 |         window.addEventListener("resize", checkMobile);
21 |         return () => window.removeEventListener("resize", checkMobile);
22 |     }, []);
23 | 
24 |     if (isMobile) {
25 |         return (
26 |             <div className="flex items-center justify-center h-screen bg-gray-100">
27 |                 <div className="text-center p-8">
28 |                     <h1 className="text-2xl font-semibold text-gray-800">
29 |                         Please open this application on a desktop or laptop
30 |                     </h1>
31 |                 </div>
32 |             </div>
33 |         );
34 |     }
35 | 
36 |     return (
37 |         <ExcalidrawProvider>
38 |             <div className="flex h-screen bg-gray-100 overflow-hidden">
39 |                 <div className={`h-full p-1 transition-all duration-300 ${isChatCollapsed ? 'w-full' : 'w-3/4'}`}>
40 |                     <ExcalidrawWorkspace
41 |                         onRequestHistory={() => setShowHistory(true)}
42 |                     />
43 |                 </div>
44 |                 <div className={`h-full p-1 transition-all duration-300 ${isChatCollapsed ? 'w-0' : 'w-1/4'}`}>
45 |                     <CollapsibleChatPanel type="excalidraw" onCollapseChange={setIsChatCollapsed} />
46 |                 </div>
47 |                 <ExcalidrawHistoryDialog
48 |                     open={showHistory}
49 |                     onOpenChange={setShowHistory}
50 |                 />
51 |             </div>
52 |         </ExcalidrawProvider>
53 |     );
54 | }


--------------------------------------------------------------------------------
/components/mode-selector.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import React, { useState } from "react";
 4 | import {
 5 |   Select,
 6 |   SelectContent,
 7 |   SelectItem,
 8 |   SelectTrigger,
 9 |   SelectValue,
10 | } from "@/components/ui/select";
11 | import { useRouter } from "next/navigation";
12 | 
13 | type Mode = "drawio" | "mermaid" | "plantuml" | "excalidraw" | "kroki" | "graphviz";
14 | 
15 | const modes: { label: string; value: Mode; href: string }[] = [
16 |   { value: "drawio", label: "Draw.io", href: "/" },
17 |   { value: "mermaid", label: "Mermaid", href: "/mermaid" },
18 |   { value: "plantuml", label: "PlantUML", href: "/plantuml" },
19 |   { value: "excalidraw", label: "Excalidraw", href: "/excalidraw" },
20 |   { value: "kroki", label: "Kroki", href: "/kroki" },
21 |   { value: "graphviz", label: "Graphviz", href: "/graphviz" },
22 | ];
23 | 
24 | interface ModeSelectorProps {
25 |   active: Mode;
26 | }
27 | 
28 | export function ModeSelector({ active }: ModeSelectorProps) {
29 |   const router = useRouter();
30 |   const [isLoading, setIsLoading] = useState(false);
31 |   
32 |   const handleChange = (value: string) => {
33 |     const mode = modes.find((m) => m.value === value);
34 |     if (mode) {
35 |       setIsLoading(true);
36 |       // 使用setTimeout让UI更新显示加载状态
37 |       setTimeout(() => {
38 |         router.push(mode.href);
39 |         // 不要在这里设置setIsLoading(false)，因为页面会卸载
40 |       }, 0);
41 |     }
42 |   };
43 | 
44 |   const activeMode = modes.find((m) => m.value === active);
45 | 
46 |   return (
47 |     <div className="relative">
48 |       <Select value={active} onValueChange={handleChange} disabled={isLoading}>
49 |         <SelectTrigger className={`w-[120px] h-8 text-sm ${isLoading ? 'opacity-50' : ''}`}>
50 |           <SelectValue>{activeMode?.label}</SelectValue>
51 |         </SelectTrigger>
52 |         <SelectContent>
53 |           {modes.map((mode) => (
54 |             <SelectItem key={mode.value} value={mode.value}>
55 |               {mode.label}
56 |             </SelectItem>
57 |         ))}
58 |         </SelectContent>
59 |       </Select>
60 |       {isLoading && (
61 |         <div className="absolute inset-0 flex items-center justify-center">
62 |           <div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"></div>
63 |         </div>
64 |       )}
65 |     </div>
66 |   );
67 | }


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
16 |         outline:
17 |           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
20 |         ghost:
21 |           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
22 |         link: "text-primary underline-offset-4 hover:underline",
23 |       },
24 |       size: {
25 |         default: "h-9 px-4 py-2 has-[>svg]:px-3",
26 |         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
27 |         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
28 |         icon: "size-9",
29 |       },
30 |     },
31 |     defaultVariants: {
32 |       variant: "default",
33 |       size: "default",
34 |     },
35 |   }
36 | )
37 | 
38 | function Button({
39 |   className,
40 |   variant,
41 |   size,
42 |   asChild = false,
43 |   ...props
44 | }: React.ComponentProps<"button"> &
45 |   VariantProps<typeof buttonVariants> & {
46 |     asChild?: boolean
47 |   }) {
48 |   const Comp = asChild ? Slot : "button"
49 | 
50 |   return (
51 |     <Comp
52 |       data-slot="button"
53 |       className={cn(buttonVariants({ variant, size, className }))}
54 |       {...props}
55 |     />
56 |   )
57 | }
58 | 
59 | export { Button, buttonVariants }
60 | 


--------------------------------------------------------------------------------
/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | function Card({ className, ...props }: React.ComponentProps<"div">) {
 6 |   return (
 7 |     <div
 8 |       data-slot="card"
 9 |       className={cn(
10 |         "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
11 |         className
12 |       )}
13 |       {...props}
14 |     />
15 |   )
16 | }
17 | 
18 | function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
19 |   return (
20 |     <div
21 |       data-slot="card-header"
22 |       className={cn(
23 |         "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-[data-slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
24 |         className
25 |       )}
26 |       {...props}
27 |     />
28 |   )
29 | }
30 | 
31 | function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
32 |   return (
33 |     <div
34 |       data-slot="card-title"
35 |       className={cn("leading-none font-semibold", className)}
36 |       {...props}
37 |     />
38 |   )
39 | }
40 | 
41 | function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
42 |   return (
43 |     <div
44 |       data-slot="card-description"
45 |       className={cn("text-muted-foreground text-sm", className)}
46 |       {...props}
47 |     />
48 |   )
49 | }
50 | 
51 | function CardAction({ className, ...props }: React.ComponentProps<"div">) {
52 |   return (
53 |     <div
54 |       data-slot="card-action"
55 |       className={cn(
56 |         "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
57 |         className
58 |       )}
59 |       {...props}
60 |     />
61 |   )
62 | }
63 | 
64 | function CardContent({ className, ...props }: React.ComponentProps<"div">) {
65 |   return (
66 |     <div
67 |       data-slot="card-content"
68 |       className={cn("px-6", className)}
69 |       {...props}
70 |     />
71 |   )
72 | }
73 | 
74 | function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
75 |   return (
76 |     <div
77 |       data-slot="card-footer"
78 |       className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
79 |       {...props}
80 |     />
81 |   )
82 | }
83 | 
84 | export {
85 |   Card,
86 |   CardHeader,
87 |   CardFooter,
88 |   CardTitle,
89 |   CardAction,
90 |   CardDescription,
91 |   CardContent,
92 | }
93 | 


--------------------------------------------------------------------------------
/components/excalidraw-workspace.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useState } from "react";
 4 | import dynamic from "next/dynamic";
 5 | import { Button } from "@/components/ui/button";
 6 | import { History } from "lucide-react";
 7 | import { useMemo, useCallback } from "react";
 8 | import { useExcalidraw } from "@/contexts/excalidraw-context";
 9 | import { ExcalidrawSceneCard } from "@/components/excalidraw-scene-card";
10 | import { ResizablePanel } from "@/components/resizable-panel";
11 | 
12 | const Excalidraw = dynamic(
13 |     async () => (await import("@excalidraw/excalidraw")).Excalidraw,
14 |     { ssr: false }
15 | );
16 | 
17 | export function ExcalidrawWorkspace({
18 |     onRequestHistory,
19 | }: {
20 |     onRequestHistory: () => void;
21 | }) {
22 |     const { sceneData, recordScene, clearScene, excalidrawAPIRef, history } =
23 |         useExcalidraw();
24 |     const [isCollapsed, setIsCollapsed] = useState(false);
25 | 
26 |     const togglePanel = () => {
27 |         setIsCollapsed(!isCollapsed);
28 |     };
29 | 
30 |     const initialData = useMemo(() => {
31 |         try {
32 |             return JSON.parse(sceneData);
33 |         } catch {
34 |             return undefined;
35 |         }
36 |     }, [sceneData]);
37 | 
38 |     const handleOnChange = useCallback(
39 |         (elements: readonly any[], appState: Record<string, any>, files: any) => {
40 |             // avoid mutating Excalidraw internal state by cloning
41 |             const elementsCopy = elements.map((element) => ({ ...element }));
42 |             recordScene(elementsCopy, appState, files);
43 |         },
44 |         [recordScene]
45 |     );
46 | 
47 |     return (
48 |         <div className="flex flex-col h-full gap-1">
49 |             <div className="flex-1 min-h-0 border rounded-lg overflow-hidden bg-white">
50 |                 <Excalidraw
51 |                     excalidrawAPI={(api) => {
52 |                         excalidrawAPIRef.current = api;
53 |                     }}
54 |                     initialData={initialData}
55 |                     onChange={handleOnChange}
56 |                 />
57 |             </div>
58 |             <ResizablePanel 
59 |                 defaultHeight={208}
60 |                 isCollapsed={isCollapsed}
61 |                 onToggle={togglePanel}
62 |             >
63 |                 <ExcalidrawSceneCard
64 |                     onClear={clearScene}
65 |                     onHistory={onRequestHistory}
66 |                     historyDisabled={history.length === 0}
67 |                     isCollapsed={isCollapsed}
68 |                     onToggle={togglePanel}
69 |                 />
70 |             </ResizablePanel>
71 |         </div>
72 |     );
73 | }


--------------------------------------------------------------------------------
/components/excalidraw-history-dialog.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import {
 4 |     Dialog,
 5 |     DialogContent,
 6 |     DialogDescription,
 7 |     DialogFooter,
 8 |     DialogHeader,
 9 |     DialogTitle,
10 | } from "@/components/ui/dialog";
11 | import { Button } from "@/components/ui/button";
12 | import { useExcalidraw } from "@/contexts/excalidraw-context";
13 | 
14 | interface ExcalidrawHistoryDialogProps {
15 |     open: boolean;
16 |     onOpenChange: (open: boolean) => void;
17 | }
18 | 
19 | export function ExcalidrawHistoryDialog({
20 |     open,
21 |     onOpenChange,
22 | }: ExcalidrawHistoryDialogProps) {
23 |     const { history, applyScene } = useExcalidraw();
24 | 
25 |     return (
26 |         <Dialog open={open} onOpenChange={onOpenChange}>
27 |             <DialogContent className="max-w-xl">
28 |                 <DialogHeader>
29 |                     <DialogTitle>历史记录</DialogTitle>
30 |                     <DialogDescription>
31 |                         恢复本次会话期间生成的任何记录。
32 |                     </DialogDescription>
33 |                 </DialogHeader>
34 |                 <div className="space-y-3 max-h-[50vh] overflow-auto pr-1">
35 |                     {history.length === 0 ? (
36 |                         <p className="text-sm text-muted-foreground">
37 |                             尚无历史记录。
38 |                         </p>
39 |                     ) : (
40 |                         history.map((entry) => (
41 |                             <button
42 |                                 key={entry.id}
43 |                                 className="w-full text-left border rounded-md px-4 py-3 hover:border-primary transition-colors"
44 |                                 onClick={() => {
45 |                                     applyScene(entry.scene, entry.summary, {
46 |                                         skipHistory: true,
47 |                                     });
48 |                                     onOpenChange(false);
49 |                                 }}
50 |                             >
51 |                                 <p className="text-sm font-medium">
52 |                                     {entry.summary || "Snapshot"}
53 |                                 </p>
54 |                                 <p className="text-xs text-muted-foreground">
55 |                                     {new Date(entry.createdAt).toLocaleString()}
56 |                                 </p>
57 |                             </button>
58 |                         ))
59 |                     )}
60 |                 </div>
61 |                 <DialogFooter>
62 |                     <Button variant="outline" onClick={() => onOpenChange(false)}>
63 |                         关闭
64 |                     </Button>
65 |                 </DialogFooter>
66 |             </DialogContent>
67 |         </Dialog>
68 |     );
69 | }
70 | 


--------------------------------------------------------------------------------
/app/api/plantuml/render/route.ts:
--------------------------------------------------------------------------------
 1 | "use server";
 2 | 
 3 | import { Buffer } from "node:buffer";
 4 | import { NextRequest, NextResponse } from "next/server";
 5 | import { encode } from "plantuml-encoder";
 6 | 
 7 | const DEFAULT_RENDERERS = [
 8 |     process.env.PLANTUML_RENDER_BASE?.replace(/\/$/, ""),
 9 |     "https://www.plantuml.com/plantuml/svg",
10 |     "http://vg.007988.xyz:8000/plantuml/svg",
11 |     "https://kroki.io/plantuml/svg",
12 | ].filter((value): value is string => Boolean(value && value.trim().length > 0));
13 | 
14 | export async function POST(request: NextRequest) {
15 |     let definition: string | undefined;
16 | 
17 |     try {
18 |         const body = await request.json();
19 |         definition = body?.definition;
20 |     } catch {
21 |         return NextResponse.json(
22 |             { error: "Invalid request body. Expected JSON with a definition field." },
23 |             { status: 400 }
24 |         );
25 |     }
26 | 
27 |     if (!definition || !definition.trim()) {
28 |         return NextResponse.json(
29 |             { error: "PlantUML definition cannot be empty." },
30 |             { status: 400 }
31 |         );
32 |     }
33 | 
34 |     const encoded = encode(definition);
35 |     const renderers = DEFAULT_RENDERERS.length > 0 ? DEFAULT_RENDERERS : ["https://www.plantuml.com/plantuml/svg"];
36 |     const errors: string[] = [];
37 | 
38 |     for (const renderer of renderers) {
39 |         const url = `${renderer}/${encoded}`;
40 |         try {
41 |             const response = await fetch(url, {
42 |                 cache: "no-store",
43 |             });
44 | 
45 |             if (!response.ok) {
46 |                 errors.push(
47 |                     `${renderer} responded with ${response.status} ${response.statusText || ""}`.trim()
48 |                 );
49 |                 continue;
50 |             }
51 | 
52 |             const contentType = response.headers.get("content-type") ?? "image/svg+xml";
53 |             if (!contentType.includes("svg")) {
54 |                 const buffer = Buffer.from(await response.arrayBuffer());
55 |                 const dataUrl = `data:${contentType};base64,${buffer.toString("base64")}`;
56 |                 return NextResponse.json({
57 |                     svgDataUrl: dataUrl,
58 |                     renderer,
59 |                 });
60 |             }
61 | 
62 |             const svg = await response.text();
63 |             return NextResponse.json({
64 |                 svg,
65 |                 renderer,
66 |             });
67 |         } catch (error) {
68 |             errors.push(
69 |                 `${renderer} error: ${
70 |                     error instanceof Error ? error.message : "Unknown renderer error."
71 |                 }`
72 |             );
73 |         }
74 |     }
75 | 
76 |     return NextResponse.json(
77 |         {
78 |             error:
79 |                 errors.join(" | ") ||
80 |                 "Unable to render PlantUML diagram with the configured renderers.",
81 |         },
82 |         { status: 502 }
83 |     );
84 | }
85 | 


--------------------------------------------------------------------------------
/components/resizable-panel.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import React, { useState, useRef, useEffect } from "react";
 4 | import { ChevronsUp, ChevronsDown } from "lucide-react";
 5 | 
 6 | interface ResizablePanelProps {
 7 |   children: React.ReactNode;
 8 |   minHeight?: number;
 9 |   maxHeight?: number;
10 |   defaultHeight?: number;
11 |   onHeightChange?: (height: number) => void;
12 |   isCollapsed?: boolean;
13 |   onToggle?: () => void;
14 | }
15 | 
16 | export function ResizablePanel({
17 |   children,
18 |   minHeight = 100,
19 |   maxHeight = 500,
20 |   defaultHeight = 208, // Approximately h-52
21 |   onHeightChange,
22 |   isCollapsed = false,
23 |   onToggle,
24 | }: ResizablePanelProps) {
25 |   const [height, setHeight] = useState(defaultHeight);
26 |   const [isResizing, setIsResizing] = useState(false);
27 |   const containerRef = useRef<HTMLDivElement>(null);
28 |   const previousHeight = useRef(height);
29 | 
30 |   useEffect(() => {
31 |     const handleMouseMove = (e: MouseEvent) => {
32 |       if (!isResizing || !containerRef.current) return;
33 |       
34 |       const containerRect = containerRef.current.getBoundingClientRect();
35 |       const newHeight = containerRect.bottom - e.clientY;
36 |       
37 |       const clampedHeight = Math.min(Math.max(newHeight, minHeight), maxHeight);
38 |       setHeight(clampedHeight);
39 |       onHeightChange?.(clampedHeight);
40 |     };
41 | 
42 |     const handleMouseUp = () => {
43 |       setIsResizing(false);
44 |     };
45 | 
46 |     if (isResizing) {
47 |       document.addEventListener("mousemove", handleMouseMove);
48 |       document.addEventListener("mouseup", handleMouseUp);
49 |     }
50 | 
51 |     return () => {
52 |       document.removeEventListener("mousemove", handleMouseMove);
53 |       document.removeEventListener("mouseup", handleMouseUp);
54 |     };
55 |   }, [isResizing, minHeight, maxHeight, onHeightChange]);
56 | 
57 |   const startResizing = (e: React.MouseEvent) => {
58 |     e.preventDefault();
59 |     setIsResizing(true);
60 |   };
61 | 
62 |   // Add toggle button to the resize handle area
63 |   return (
64 |     <div 
65 |       ref={containerRef}
66 |       className="relative"
67 |       style={{ height: isCollapsed ? '32px' : `${height}px` }}
68 |     >
69 |       <div 
70 |         className="absolute top-0 left-0 right-0 cursor-row-resize h-2 z-10 flex items-center justify-center"
71 |         onMouseDown={startResizing}
72 |       >
73 |         <div className="w-8 h-1 bg-gray-400 rounded-full opacity-70 hover:opacity-100"></div>
74 |       </div>
75 |       <div className="h-full pt-1 flex flex-col">
76 |         {isCollapsed ? (
77 |           <div className="flex justify-end">
78 |             {onToggle && (
79 |               <button
80 |                 onClick={onToggle}
81 |                 className="p-1 rounded hover:bg-gray-200 transition-colors"
82 |                 title="展开"
83 |                 aria-label="Expand panel"
84 |               >
85 |                 <ChevronsUp className="w-4 h-4" />
86 |               </button>
87 |             )}
88 |           </div>
89 |         ) : (
90 |           <div className="flex-1 min-h-0">
91 |             {children}
92 |           </div>
93 |         )}
94 |       </div>
95 |     </div>
96 |   );
97 | }


--------------------------------------------------------------------------------
/components/mode-nav.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import Link from "next/link";
 4 | import { cn } from "@/lib/utils";
 5 | 
 6 | type Mode = "drawio" | "mermaid" | "plantuml" | "excalidraw" | "kroki" | "graphviz";
 7 | 
 8 | const modes: { label: string; href: string; id: Mode }[] = [
 9 |     { id: "drawio", label: "Draw.io", href: "/" },
10 |     { id: "mermaid", label: "Mermaid", href: "/mermaid" },
11 |     { id: "plantuml", label: "PlantUML", href: "/plantuml" },
12 |     { id: "excalidraw", label: "Excalidraw", href: "/excalidraw" },
13 |     { id: "kroki", label: "Kroki", href: "/kroki" },
14 |     { id: "graphviz", label: "Graphviz", href: "/graphviz" },
15 | ];
16 | 
17 | interface ModeNavProps {
18 |     active: Mode;
19 |     className?: string;
20 | }
21 | 
22 | export function ModeNav({ active, className }: ModeNavProps) {
23 |     const getModeColor = (mode: Mode) => {
24 |         switch (mode) {
25 |             case "drawio":
26 |                 return "bg-blue-500 hover:bg-blue-600 text-white border-blue-600";
27 |             case "mermaid":
28 |                 return "bg-green-500 hover:bg-green-600 text-white border-green-600";
29 |             case "plantuml":
30 |                 return "bg-purple-500 hover:bg-purple-600 text-white border-purple-600";
31 |             case "excalidraw":
32 |                 return "bg-orange-500 hover:bg-orange-600 text-white border-orange-600";
33 |             case "kroki":
34 |                 return "bg-indigo-500 hover:bg-indigo-600 text-white border-indigo-600";
35 |             case "graphviz":
36 |                 return "bg-cyan-500 hover:bg-cyan-600 text-white border-cyan-600";
37 |             default:
38 |                 return "bg-gray-500 hover:bg-gray-600 text-white border-gray-600";
39 |         }
40 |     };
41 | 
42 |     return (
43 |         <div
44 |             className={cn(
45 |                 "flex flex-wrap gap-1 pointer-events-auto",
46 |                 className ?? "fixed top-4 right-4 z-50"
47 |             )}
48 |         >
49 |             {modes.map((mode) => {
50 |                 const isActive = mode.id === active;
51 |                 if (isActive) {
52 |                     return (
53 |                         <span
54 |                             key={mode.id}
55 |                             className={cn(
56 |                                 "px-1 py-1 text-sm rounded-md border shadow font-medium",
57 |                                 getModeColor(mode.id),
58 |                                 "brightness-125"
59 |                             )}
60 |                         >
61 |                             {mode.label}
62 |                         </span>
63 |                     );
64 |                 }
65 |                 return (
66 |                     <Link
67 |                         key={mode.id}
68 |                         href={mode.href}
69 |                         className={cn(
70 |                             "px-1 py-1 text-sm rounded-md border shadow bg-white transition-all duration-200 font-medium",
71 |                             getModeColor(mode.id)
72 |                         )}
73 |                     >
74 |                         {mode.label}
75 |                     </Link>
76 |                 );
77 |             })}
78 |         </div>
79 |     );
80 | }


--------------------------------------------------------------------------------
/components/history-dialog.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import {
 4 |     Dialog,
 5 |     DialogContent,
 6 |     DialogDescription,
 7 |     DialogFooter,
 8 |     DialogHeader,
 9 |     DialogTitle,
10 | } from "@/components/ui/dialog";
11 | import { Button } from "@/components/ui/button";
12 | import Image from "next/image";
13 | import { useDiagram } from "@/contexts/diagram-context";
14 | 
15 | interface HistoryDialogProps {
16 |     showHistory: boolean;
17 |     onToggleHistory: (show: boolean) => void;
18 | }
19 | 
20 | export function HistoryDialog({
21 |     showHistory,
22 |     onToggleHistory,
23 | }: HistoryDialogProps) {
24 |     const { loadDiagram: onDisplayChart, diagramHistory } = useDiagram();
25 | 
26 |     return (
27 |         <Dialog open={showHistory} onOpenChange={onToggleHistory}>
28 |             <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
29 |                 <DialogHeader>
30 |                     <DialogTitle>图表历史记录</DialogTitle>
31 |                     <DialogDescription>
32 |                         这里保存了每次AI修改前的图表。
33 |                         <br />
34 |                         点击图表以恢复到该版本
35 |                     </DialogDescription>
36 |                 </DialogHeader>
37 | 
38 |                 {diagramHistory.length === 0 ? (
39 |                     <div className="text-center p-4 text-gray-500">
40 |                         No history available yet. Send messages to create
41 |                         diagram history.
42 |                     </div>
43 |                 ) : (
44 |                     <div className="grid grid-cols-2 md:grid-cols-3 gap-4 py-4">
45 |                         {diagramHistory.map((item, index) => (
46 |                             <div
47 |                                 key={index}
48 |                                 className="border rounded-md p-2 cursor-pointer hover:border-primary transition-colors"
49 |                                 onClick={() => {
50 |                                     onDisplayChart(item.xml);
51 |                                     onToggleHistory(false);
52 |                                 }}
53 |                             >
54 |                                 <div className="aspect-video bg-white rounded overflow-hidden flex items-center justify-center">
55 |                                     <Image
56 |                                         src={item.svg}
57 |                                         alt={`Diagram version ${index + 1}`}
58 |                                         width={200}
59 |                                         height={100}
60 |                                         className="object-contain w-full h-full p-1"
61 |                                     />
62 |                                 </div>
63 |                                 <div className="text-xs text-center mt-1 text-gray-500">
64 |                                     Version {index + 1}
65 |                                 </div>
66 |                             </div>
67 |                         ))}
68 |                     </div>
69 |                 )}
70 | 
71 |                 <DialogFooter>
72 |                     <Button
73 |                         variant="outline"
74 |                         onClick={() => onToggleHistory(false)}
75 |                     >
76 |                         Close
77 |                     </Button>
78 |                 </DialogFooter>
79 |             </DialogContent>
80 |         </Dialog>
81 |     );
82 | }
83 | 


--------------------------------------------------------------------------------
/components/chat-example-panel.tsx:
--------------------------------------------------------------------------------
 1 | export default function ExamplePanel({
 2 |     setInput,
 3 |     setFiles,
 4 | }: {
 5 |     setInput: (input: string) => void;
 6 |     setFiles: (files: File[]) => void;
 7 | }) {
 8 |     // New handler for the "Replicate this flowchart" button
 9 |     const handleReplicateFlowchart = async () => {
10 |         setInput("复制此流程图");
11 | 
12 |         try {
13 |             // Fetch the example image
14 |             const response = await fetch("/example.png");
15 |             const blob = await response.blob();
16 |             const file = new File([blob], "example.png", { type: "image/png" });
17 | 
18 |             // Set the file to the files state
19 |             setFiles([file]);
20 |         } catch (error) {
21 |             console.error("Error loading example image:", error);
22 |         }
23 |     };
24 | 
25 |     // Handler for the "Replicate this in aws style" button
26 |     const handleReplicateArchitecture = async () => {
27 |         setInput("以AWS风格复制此图");
28 | 
29 |         try {
30 |             // Fetch the architecture image
31 |             const response = await fetch("/architecture.png");
32 |             const blob = await response.blob();
33 |             const file = new File([blob], "architecture.png", {
34 |                 type: "image/png",
35 |             });
36 | 
37 |             // Set the file to the files state
38 |             setFiles([file]);
39 |         } catch (error) {
40 |             console.error("Error loading architecture image:", error);
41 |         }
42 |     };
43 |     return (
44 |         <div className="px-4 py-2 border-t border-b border-gray-100">
45 |             <p className="text-sm text-gray-500 mb-2">
46 |                 {" "}
47 |                 开始对话以生成或修改图表，尝试这些示例：
48 |             </p>
49 |             <p className="text-sm text-gray-500 mb-2"></p>
50 |             <div className="flex flex-wrap gap-5">
51 |                 <button
52 |                     className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
53 |                     onClick={() =>
54 |                         setInput("帮我设计微服务的架构图")
55 |                     }
56 |                 >
57 |                     帮我设计微服务的架构图
58 |                 </button>
59 |                 <button
60 |                     className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
61 |                     onClick={() => setInput("帮我设计一个订单流程")}
62 |                 >
63 |                     帮我设计一个订单流程
64 |                 </button>
65 |                 <button
66 |                     className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
67 |                     onClick={() => setInput("帮我画一只卡通机器猫")}
68 |                 >
69 |                     帮我画一只卡通机器猫
70 |                 </button>
71 |                 {/*<button
72 |                     className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
73 |                     onClick={handleReplicateArchitecture}
74 |                 >
75 |                     以AWS风格创建此图
76 |                 </button>
77 |                 <button
78 |                     className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
79 |                     onClick={handleReplicateFlowchart}
80 |                 >
81 |                     复制此流程图
82 |                 </button>*/}
83 |             </div>
84 |         </div>
85 |     );
86 | }
87 | 


--------------------------------------------------------------------------------
/components/collapsible-chat-panel.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React, { useState, useEffect } from "react";
  4 | import { Button } from "@/components/ui/button";
  5 | import { MessageCircle, X, Github } from "lucide-react";
  6 | import ChatPanel from "@/components/chat-panel";
  7 | import ExcalidrawChatPanel from "@/components/excalidraw-chat-panel";
  8 | import MermaidChatPanel from "@/components/mermaid-chat-panel";
  9 | import PlantUMLChatPanel from "@/components/plantuml-chat-panel";
 10 | import KrokiChatPanel from "@/components/kroki-chat-panel";
 11 | import GraphvizChatPanel from "@/components/graphviz-chat-panel";
 12 | import { ModelConfigDialog } from "@/components/model-config-dialog";
 13 | import { useModelConfig } from "@/contexts/model-config-context";
 14 | import { cn } from "@/lib/utils";
 15 | 
 16 | type PanelType = "drawio" | "excalidraw" | "mermaid" | "plantuml" | "kroki" | "graphviz";
 17 | 
 18 | interface CollapsibleChatPanelProps {
 19 |   type: PanelType;
 20 |   className?: string;
 21 |   onCollapseChange?: (collapsed: boolean) => void;
 22 | }
 23 | 
 24 | export function CollapsibleChatPanel({ 
 25 |   type,
 26 |   className = "",
 27 |   onCollapseChange
 28 | }: CollapsibleChatPanelProps) {
 29 |   const [isCollapsed, setIsCollapsed] = useState(false);
 30 |   const { activeProfile } = useModelConfig();
 31 | 
 32 |   useEffect(() => {
 33 |     onCollapseChange?.(isCollapsed);
 34 |   }, [isCollapsed, onCollapseChange]);
 35 | 
 36 |   const renderChatPanel = () => {
 37 |     switch (type) {
 38 |       case "drawio":
 39 |         return <ChatPanel />;
 40 |       case "excalidraw":
 41 |         return <ExcalidrawChatPanel />;
 42 |       case "mermaid":
 43 |         return <MermaidChatPanel />;
 44 |       case "plantuml":
 45 |         return <PlantUMLChatPanel />;
 46 |       case "kroki":
 47 |         return <KrokiChatPanel />;
 48 |       case "graphviz":
 49 |         return <GraphvizChatPanel />;
 50 |       default:
 51 |         return <ChatPanel />;
 52 |     }
 53 |   };
 54 | 
 55 |   return (
 56 |     <>
 57 |       {/* Floating AI button shown when panel is collapsed */}
 58 |       {isCollapsed && (
 59 |         <div className={cn("absolute right-4 top-20 z-50", className)}>
 60 |           <Button
 61 |             onClick={() => setIsCollapsed(false)}
 62 |             className="rounded-full shadow-lg h-12 w-12 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white transition-all duration-300 animate-pulse font-bold text-lg"
 63 |             size="icon"
 64 |           >
 65 |             AI
 66 |           </Button>
 67 |         </div>
 68 |       )}
 69 | 
 70 |       {/* Main panel container - always rendered but visibility controlled by CSS */}
 71 |       <div 
 72 |         className={cn("flex h-full relative overflow-hidden", className)}
 73 |         style={{ 
 74 |           display: isCollapsed ? 'none' : 'flex',
 75 |           position: 'relative'
 76 |         }}
 77 |       >
 78 |         <div className="flex-1 h-full">
 79 |           {renderChatPanel()}
 80 |         </div>
 81 |         <div className="absolute right-2 top-4 z-50 flex gap-1">
 82 |           <ModelConfigDialog size="sm" />
 83 |           <Button
 84 |             variant="outline"
 85 |             size="sm"
 86 |             className="flex items-center gap-2 h-8 px-2"
 87 |             title="GitHub shenpeiheng"
 88 |             onClick={() => window.open('https://github.com/shenpeiheng/ai-smart-draw', '_blank')}
 89 |           >
 90 |             <Github className="h-4 w-4" />
 91 |             {/*<span className="hidden sm:inline">GitHub</span>*/}
 92 |           </Button>
 93 |           <Button
 94 |             variant="outline"
 95 |             size="sm"
 96 |             className="flex items-center gap-2 h-8 px-2"
 97 |             title="关闭聊天区"
 98 |             onClick={() => setIsCollapsed(true)}
 99 |           >
100 |             <X className="h-4 w-4" />
101 |           </Button>
102 |         </div>
103 |       </div>
104 |     </>
105 |   );
106 | }
107 | 


--------------------------------------------------------------------------------
/contexts/plantuml-context.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React, {
  4 |     createContext,
  5 |     useCallback,
  6 |     useContext,
  7 |     useMemo,
  8 |     useState,
  9 | } from "react";
 10 | 
 11 | const DEFAULT_SNIPPET = `@startjson
 12 | <style>
 13 |   .h1 {
 14 |     BackGroundColor green
 15 |     FontColor white
 16 |     FontStyle italic
 17 |   }
 18 |   .h2 {
 19 |     BackGroundColor red
 20 |     FontColor white
 21 |     FontStyle bold
 22 |   }
 23 | </style>
 24 | #highlight "lastName"
 25 | #highlight "address" / "city" <<h1>>
 26 | #highlight "phoneNumbers" / "0" / "number" <<h2>>
 27 | {
 28 |   "firstName": "John",
 29 |   "lastName": "Smith",
 30 |   "isAlive": true,
 31 |   "age": 28,
 32 |   "address": {
 33 |     "streetAddress": "21 2nd Street",
 34 |     "city": "New York",
 35 |     "state": "NY",
 36 |     "postalCode": "10021-3100"
 37 |   },
 38 |   "phoneNumbers": [
 39 |     {
 40 |       "type": "home",
 41 |       "number": "212 555-1234"
 42 |     },
 43 |     {
 44 |       "type": "office",
 45 |       "number": "646 555-4567"
 46 |     }
 47 |   ],
 48 |   "children": [],
 49 |   "spouse": null
 50 | }
 51 | @endjson
 52 | `;
 53 | 
 54 | interface PlantUMLHistoryEntry {
 55 |     id: string;
 56 |     definition: string;
 57 |     summary?: string;
 58 |     createdAt: number;
 59 | }
 60 | 
 61 | interface PlantUMLContextValue {
 62 |     definition: string;
 63 |     history: PlantUMLHistoryEntry[];
 64 |     updateDefinition: (definition: string, summary?: string) => void;
 65 |     setDefinition: (definition: string) => void;
 66 |     clearDefinition: () => void;
 67 |     initialDefinition: string;
 68 | }
 69 | 
 70 | const PlantUMLContext = createContext<PlantUMLContextValue | undefined>(
 71 |     undefined
 72 | );
 73 | 
 74 | function createEntry(
 75 |     definition: string,
 76 |     summary?: string
 77 | ): PlantUMLHistoryEntry {
 78 |     const id =
 79 |         typeof crypto !== "undefined" && crypto.randomUUID
 80 |             ? crypto.randomUUID()
 81 |             : `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
 82 | 
 83 |     return {
 84 |         id,
 85 |         definition,
 86 |         summary,
 87 |         createdAt: Date.now(),
 88 |     };
 89 | }
 90 | 
 91 | export function PlantUMLProvider({ children }: { children: React.ReactNode }) {
 92 |     const [definition, setDefinitionState] = useState(DEFAULT_SNIPPET);
 93 |     const [history, setHistory] = useState<PlantUMLHistoryEntry[]>(() => [
 94 |         createEntry(DEFAULT_SNIPPET, "Initial snippet"),
 95 |     ]);
 96 | 
 97 |     const updateDefinition = useCallback(
 98 |         (nextDefinition: string, summary?: string) => {
 99 |             if (!nextDefinition.trim()) return;
100 |             setDefinitionState(nextDefinition);
101 |             setHistory((prev) => [...prev, createEntry(nextDefinition, summary)]);
102 |         },
103 |         []
104 |     );
105 | 
106 |     const setDefinition = useCallback((nextDefinition: string) => {
107 |         setDefinitionState(nextDefinition);
108 |     }, []);
109 | 
110 |     const clearDefinition = useCallback(() => {
111 |         setDefinitionState(DEFAULT_SNIPPET);
112 |         setHistory([createEntry(DEFAULT_SNIPPET, "Snippet reset")]);
113 |     }, []);
114 | 
115 |     const value = useMemo(
116 |         () => ({
117 |             definition,
118 |             history,
119 |             updateDefinition,
120 |             setDefinition,
121 |             clearDefinition,
122 |             initialDefinition: DEFAULT_SNIPPET,
123 |         }),
124 |         [definition, history, updateDefinition, setDefinition, clearDefinition]
125 |     );
126 | 
127 |     return (
128 |         <PlantUMLContext.Provider value={value}>
129 |             {children}
130 |         </PlantUMLContext.Provider>
131 |     );
132 | }
133 | 
134 | export function usePlantUML() {
135 |     const context = useContext(PlantUMLContext);
136 |     if (!context) {
137 |         throw new Error("usePlantUML must be used within PlantUMLProvider");
138 |     }
139 |     return context;
140 | }
141 | 


--------------------------------------------------------------------------------
/components/file-preview-list.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import React, { useEffect, useState } from "react";
 4 | import Image from "next/image";
 5 | import { X } from "lucide-react";
 6 | 
 7 | interface FilePreviewListProps {
 8 |     files: File[];
 9 |     onRemoveFile: (fileToRemove: File) => void;
10 | }
11 | 
12 | export function FilePreviewList({ files, onRemoveFile }: FilePreviewListProps) {
13 |     const [selectedImage, setSelectedImage] = useState<string | null>(null);
14 | 
15 |     // Cleanup object URLs on unmount
16 |     useEffect(() => {
17 |         const objectUrls = files
18 |             .filter((file) => file.type.startsWith("image/"))
19 |             .map((file) => URL.createObjectURL(file));
20 | 
21 |         return () => {
22 |             objectUrls.forEach(URL.revokeObjectURL);
23 |         };
24 |     }, [files]);
25 | 
26 |     if (files.length === 0) return null;
27 | 
28 |     return (
29 |         <>
30 |             <div className="flex flex-wrap gap-2 mt-2 p-2 bg-muted/50 rounded-md">
31 |                 {files.map((file, index) => {
32 |                     const imageUrl = file.type.startsWith("image/") ? URL.createObjectURL(file) : null;
33 |                     return (
34 |                         <div key={file.name + index} className="relative group">
35 |                             <div
36 |                                 className="w-20 h-20 border rounded-md overflow-hidden bg-muted cursor-pointer"
37 |                                 onClick={() => imageUrl && setSelectedImage(imageUrl)}
38 |                             >
39 |                                 {file.type.startsWith("image/") ? (
40 |                                     <Image
41 |                                         src={imageUrl!}
42 |                                         alt={file.name}
43 |                                         width={80}
44 |                                         height={80}
45 |                                         className="object-cover w-full h-full"
46 |                                     />
47 |                                 ) : (
48 |                                     <div className="flex items-center justify-center h-full text-xs text-center p-1">
49 |                                         {file.name}
50 |                                     </div>
51 |                                 )}
52 |                             </div>
53 |                             <button
54 |                                 type="button"
55 |                                 onClick={() => onRemoveFile(file)}
56 |                                 className="absolute -top-2 -right-2 bg-destructive rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
57 |                                 aria-label="Remove file"
58 |                             >
59 |                                 <X className="h-3 w-3" />
60 |                             </button>
61 |                         </div>
62 |                     );
63 |                 })}
64 |             </div>
65 | 
66 |             {/* Image Modal/Lightbox */}
67 |             {selectedImage && (
68 |                 <div
69 |                     className="fixed inset-0 z-50 bg-black/80 flex items-center justify-center p-4"
70 |                     onClick={() => setSelectedImage(null)}
71 |                 >
72 |                     <button
73 |                         className="absolute top-4 right-4 z-10 bg-white rounded-full p-2 hover:bg-gray-200 transition-colors"
74 |                         onClick={() => setSelectedImage(null)}
75 |                         aria-label="Close"
76 |                     >
77 |                         <X className="h-6 w-6" />
78 |                     </button>
79 |                     <div className="relative w-auto h-auto max-w-[90vw] max-h-[90vh]">
80 |                         <Image
81 |                             src={selectedImage}
82 |                             alt="Preview"
83 |                             width={1200}
84 |                             height={900}
85 |                             className="object-contain max-w-full max-h-[90vh] w-auto h-auto"
86 |                             onClick={(e) => e.stopPropagation()}
87 |                         />
88 |                     </div>
89 |                 </div>
90 |             )}
91 |         </>
92 |     );
93 | }
94 | 


--------------------------------------------------------------------------------
/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  5 | import { XIcon } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | function Dialog({
 10 |   ...props
 11 | }: React.ComponentProps<typeof DialogPrimitive.Root>) {
 12 |   return <DialogPrimitive.Root data-slot="dialog" {...props} />
 13 | }
 14 | 
 15 | function DialogTrigger({
 16 |   ...props
 17 | }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
 18 |   return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
 19 | }
 20 | 
 21 | function DialogPortal({
 22 |   ...props
 23 | }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
 24 |   return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
 25 | }
 26 | 
 27 | function DialogClose({
 28 |   ...props
 29 | }: React.ComponentProps<typeof DialogPrimitive.Close>) {
 30 |   return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
 31 | }
 32 | 
 33 | function DialogOverlay({
 34 |   className,
 35 |   ...props
 36 | }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
 37 |   return (
 38 |     <DialogPrimitive.Overlay
 39 |       data-slot="dialog-overlay"
 40 |       className={cn(
 41 |         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
 42 |         className
 43 |       )}
 44 |       {...props}
 45 |     />
 46 |   )
 47 | }
 48 | 
 49 | function DialogContent({
 50 |   className,
 51 |   children,
 52 |   ...props
 53 | }: React.ComponentProps<typeof DialogPrimitive.Content>) {
 54 |   return (
 55 |     <DialogPortal data-slot="dialog-portal">
 56 |       <DialogOverlay />
 57 |       <DialogPrimitive.Content
 58 |         data-slot="dialog-content"
 59 |         className={cn(
 60 |           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
 61 |           className
 62 |         )}
 63 |         {...props}
 64 |       >
 65 |         {children}
 66 |         <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
 67 |           <XIcon />
 68 |           <span className="sr-only">Close</span>
 69 |         </DialogPrimitive.Close>
 70 |       </DialogPrimitive.Content>
 71 |     </DialogPortal>
 72 |   )
 73 | }
 74 | 
 75 | function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
 76 |   return (
 77 |     <div
 78 |       data-slot="dialog-header"
 79 |       className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
 80 |       {...props}
 81 |     />
 82 |   )
 83 | }
 84 | 
 85 | function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
 86 |   return (
 87 |     <div
 88 |       data-slot="dialog-footer"
 89 |       className={cn(
 90 |         "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
 91 |         className
 92 |       )}
 93 |       {...props}
 94 |     />
 95 |   )
 96 | }
 97 | 
 98 | function DialogTitle({
 99 |   className,
100 |   ...props
101 | }: React.ComponentProps<typeof DialogPrimitive.Title>) {
102 |   return (
103 |     <DialogPrimitive.Title
104 |       data-slot="dialog-title"
105 |       className={cn("text-lg leading-none font-semibold", className)}
106 |       {...props}
107 |     />
108 |   )
109 | }
110 | 
111 | function DialogDescription({
112 |   className,
113 |   ...props
114 | }: React.ComponentProps<typeof DialogPrimitive.Description>) {
115 |   return (
116 |     <DialogPrimitive.Description
117 |       data-slot="dialog-description"
118 |       className={cn("text-muted-foreground text-sm", className)}
119 |       {...props}
120 |     />
121 |   )
122 | }
123 | 
124 | export {
125 |   Dialog,
126 |   DialogClose,
127 |   DialogContent,
128 |   DialogDescription,
129 |   DialogFooter,
130 |   DialogHeader,
131 |   DialogOverlay,
132 |   DialogPortal,
133 |   DialogTitle,
134 |   DialogTrigger,
135 | }
136 | 


--------------------------------------------------------------------------------
/app/api/plantuml/route.ts:
--------------------------------------------------------------------------------
  1 | import { streamText, convertToModelMessages } from "ai";
  2 | import { z } from "zod/v3";
  3 | import { resolveModel } from "@/lib/model-provider";
  4 | 
  5 | export const maxDuration = 60;
  6 | 
  7 | export async function POST(req: Request) {
  8 |     try {
  9 |         const { messages, definition, modelConfig } = await req.json();
 10 | 
 11 |         const systemMessage = `
 12 | You are a PlantUML expert.
 13 | Translate user intent into clean, well-structured PlantUML diagrams (sequence/class/component/activity/etc.).
 14 | 
 15 | Rules:
 16 | - Always reason about the provided "Current PlantUML snippet" before responding.
 17 | - Respond conversationally but deliver the final code exclusively via the display_plantuml tool.
 18 | - Prefer incremental edits unless the user requests a full rewrite.
 19 | - Keep lifelines, participants, and relationships clearly labeled.
 20 | - Use whitespace, titles, and notes to maintain readability.
 21 | - If the diagram must include colors or styling, use standard PlantUML directives.
 22 | 
 23 | Tool usage:
 24 | - Exactly one display_plantuml tool call per assistant turn.
 25 | - Include the entire PlantUML definition (between @startuml ... @enduml).
 26 | - Optionally include a short summary describing key changes.
 27 | `;
 28 | 
 29 |         const lastMessage = messages[messages.length - 1];
 30 |         const lastMessageText =
 31 |             lastMessage.parts?.find((part: any) => part.type === "text")
 32 |                 ?.text || "";
 33 |         const fileParts =
 34 |             lastMessage.parts?.filter((part: any) => part.type === "file") ||
 35 |             [];
 36 | 
 37 |         const formattedTextContent = `
 38 | Current PlantUML snippet:
 39 | """plantuml
 40 | ${definition || "@startuml\n@enduml"}
 41 | """
 42 | User input:
 43 | """md
 44 | ${lastMessageText}
 45 | """
 46 | `;
 47 | 
 48 |         const modelMessages = convertToModelMessages(messages);
 49 |         let enhancedMessages = [...modelMessages];
 50 | 
 51 |         if (enhancedMessages.length > 0) {
 52 |             const lastModelMessage = enhancedMessages[enhancedMessages.length - 1];
 53 |             if (lastModelMessage.role === "user") {
 54 |                 const contentParts: any[] = [
 55 |                     { type: "text", text: formattedTextContent },
 56 |                 ];
 57 | 
 58 |                 for (const filePart of fileParts) {
 59 |                     contentParts.push({
 60 |                         type: "image",
 61 |                         image: filePart.url,
 62 |                         mimeType: filePart.mediaType,
 63 |                     });
 64 |                 }
 65 | 
 66 |                 enhancedMessages = [
 67 |                     ...enhancedMessages.slice(0, -1),
 68 |                     { ...lastModelMessage, content: contentParts },
 69 |                 ];
 70 |             }
 71 |         }
 72 | 
 73 |         const { client, model } = resolveModel(modelConfig);
 74 | 
 75 |         const result = streamText({
 76 |             system: systemMessage,
 77 |             model: client.chat(model),
 78 |             messages: enhancedMessages,
 79 |             temperature: 0.2,
 80 |             tools: {
 81 |                 display_plantuml: {
 82 |                     description:
 83 |                         "Render a PlantUML diagram. Provide the full snippet including @startuml ... @enduml.",
 84 |                     inputSchema: z.object({
 85 |                         definition: z
 86 |                             .string()
 87 |                             .describe("Complete PlantUML code to render"),
 88 |                         summary: z
 89 |                             .string()
 90 |                             .optional()
 91 |                             .describe("Optional short change summary"),
 92 |                     }),
 93 |                 },
 94 |             },
 95 |         });
 96 | 
 97 |         function errorHandler(error: unknown) {
 98 |             if (error == null) {
 99 |                 return "unknown error";
100 |             }
101 |             if (typeof error === "string") {
102 |                 return error;
103 |             }
104 |             if (error instanceof Error) {
105 |                 return error.message;
106 |             }
107 |             return JSON.stringify(error);
108 |         }
109 | 
110 |         return result.toUIMessageStreamResponse({
111 |             onError: errorHandler,
112 |         });
113 |     } catch (error) {
114 |         console.error("Error in plantuml route:", error);
115 |         return Response.json(
116 |             { error: "Internal server error" },
117 |             { status: 500 }
118 |         );
119 |     }
120 | }
121 | 


--------------------------------------------------------------------------------
/components/kroki-chat-panel.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import type React from "react";
  4 | import { useState } from "react";
  5 | import {
  6 |     Card,
  7 |     CardContent,
  8 |     CardFooter,
  9 |     CardHeader,
 10 |     CardTitle,
 11 | } from "@/components/ui/card";
 12 | import { useChat } from "@ai-sdk/react";
 13 | import { DefaultChatTransport } from "ai";
 14 | import { ChatInput } from "@/components/chat-input";
 15 | import { KrokiChatMessageDisplay } from "@/components/kroki-chat-message-display";
 16 | import { useKroki } from "@/contexts/kroki-context";
 17 | import { ModeSelector } from "@/components/mode-selector";
 18 | import { ModelConfigDialog } from "@/components/model-config-dialog";
 19 | import { useModelConfig } from "@/contexts/model-config-context";
 20 | 
 21 | export default function KrokiChatPanel() {
 22 |     const { definition, clearDefinition } = useKroki();
 23 |     const [files, setFiles] = useState<File[]>([]);
 24 |     const [input, setInput] = useState("");
 25 |     const { config: modelConfig } = useModelConfig();
 26 | 
 27 |     const { messages, sendMessage, addToolResult, status, error, setMessages } =
 28 |         useChat({
 29 |             transport: new DefaultChatTransport({
 30 |                 api: "/api/kroki",
 31 |             }),
 32 |             async onToolCall({ toolCall }) {
 33 |                 if (toolCall.toolName === "display_kroki") {
 34 |                     addToolResult({
 35 |                         tool: "display_kroki",
 36 |                         toolCallId: toolCall.toolCallId,
 37 |                         output: "生成完成.",
 38 |                     });
 39 |                 }
 40 |             },
 41 |         });
 42 | 
 43 |     const onFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
 44 |         e.preventDefault();
 45 |         if (!input.trim() || status === "streaming") return;
 46 | 
 47 |         try {
 48 |             const parts: any[] = [{ type: "text", text: input }];
 49 | 
 50 |             if (files.length > 0) {
 51 |                 for (const file of files) {
 52 |                     const reader = new FileReader();
 53 |                     const dataUrl = await new Promise<string>((resolve) => {
 54 |                         reader.onload = () => resolve(reader.result as string);
 55 |                         reader.readAsDataURL(file);
 56 |                     });
 57 | 
 58 |                     parts.push({
 59 |                         type: "file",
 60 |                         url: dataUrl,
 61 |                         mediaType: file.type,
 62 |                     });
 63 |                 }
 64 |             }
 65 | 
 66 |             sendMessage(
 67 |                 { parts },
 68 |                 {
 69 |                     body: {
 70 |                         definition,
 71 |                         modelConfig,
 72 |                     },
 73 |                 }
 74 |             );
 75 | 
 76 |             setInput("");
 77 |             setFiles([]);
 78 |         } catch (err) {
 79 |             console.error("Failed to submit Kroki prompt:", err);
 80 |         }
 81 |     };
 82 | 
 83 |     const handleInputChange = (
 84 |         e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
 85 |     ) => {
 86 |         setInput(e.target.value);
 87 |     };
 88 | 
 89 |     const handleFileChange = (newFiles: File[]) => {
 90 |         setFiles(newFiles);
 91 |     };
 92 | 
 93 |     return (
 94 |         <Card className="h-full flex flex-col rounded-none py-0 gap-0 overflow-hidden">
 95 |             <CardHeader className="p-4 flex flex-col gap-2">
 96 |                 <div className="flex items-center justify-between gap-2">
 97 |                     <div className="flex gap-2 items-center">
 98 |                         <ModeSelector active="kroki" />
 99 |                     </div>
100 |                 </div>
101 |             </CardHeader>
102 |             <CardContent className="flex-grow overflow-hidden px-2">
103 |                 <KrokiChatMessageDisplay
104 |                     messages={messages}
105 |                     error={error}
106 |                     setInput={setInput}
107 |                     setFiles={handleFileChange}
108 |                 />
109 |             </CardContent>
110 |             <CardFooter className="p-2">
111 |                 <ChatInput
112 |                     input={input}
113 |                     status={status}
114 |                     onSubmit={onFormSubmit}
115 |                     onChange={handleInputChange}
116 |                     onClearChat={() => {
117 |                         setMessages([]);
118 |                         clearDefinition();
119 |                     }}
120 |                     files={files}
121 |                     onFileChange={handleFileChange}
122 |                     enableHistoryControls={false}
123 |                 />
124 |             </CardFooter>
125 |         </Card>
126 |     );
127 | }


--------------------------------------------------------------------------------
/components/graphviz-chat-panel.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import type React from "react";
  4 | import { useState } from "react";
  5 | import {
  6 |     Card,
  7 |     CardContent,
  8 |     CardFooter,
  9 |     CardHeader,
 10 | } from "@/components/ui/card";
 11 | import { useChat } from "@ai-sdk/react";
 12 | import { DefaultChatTransport } from "ai";
 13 | import { ChatInput } from "@/components/chat-input";
 14 | import { GraphvizChatMessageDisplay } from "@/components/graphviz-chat-message-display";
 15 | import { useGraphviz } from "@/contexts/graphviz-context";
 16 | import { ModeSelector } from "@/components/mode-selector";
 17 | import { ModelConfigDialog } from "@/components/model-config-dialog";
 18 | import { useModelConfig } from "@/contexts/model-config-context";
 19 | 
 20 | export default function GraphvizChatPanel() {
 21 |     const { definition, clearDefinition } = useGraphviz();
 22 |     const [files, setFiles] = useState<File[]>([]);
 23 |     const [input, setInput] = useState("");
 24 |     const { config: modelConfig } = useModelConfig();
 25 | 
 26 |     const { messages, sendMessage, addToolResult, status, error, setMessages } =
 27 |         useChat({
 28 |             transport: new DefaultChatTransport({
 29 |                 api: "/api/graphviz",
 30 |             }),
 31 |             async onToolCall({ toolCall }) {
 32 |                 if (toolCall.toolName === "display_graphviz") {
 33 |                     addToolResult({
 34 |                         tool: "display_graphviz",
 35 |                         toolCallId: toolCall.toolCallId,
 36 |                         output: "生成完成.",
 37 |                     });
 38 |                 }
 39 |             },
 40 |         });
 41 | 
 42 |     const onFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
 43 |         e.preventDefault();
 44 |         if (!input.trim() || status === "streaming") return;
 45 | 
 46 |         try {
 47 |             const parts: any[] = [{ type: "text", text: input }];
 48 | 
 49 |             if (files.length > 0) {
 50 |                 for (const file of files) {
 51 |                     const reader = new FileReader();
 52 |                     const dataUrl = await new Promise<string>((resolve) => {
 53 |                         reader.onload = () => resolve(reader.result as string);
 54 |                         reader.readAsDataURL(file);
 55 |                     });
 56 | 
 57 |                     parts.push({
 58 |                         type: "file",
 59 |                         url: dataUrl,
 60 |                         mediaType: file.type,
 61 |                     });
 62 |                 }
 63 |             }
 64 | 
 65 |             sendMessage(
 66 |                 { parts },
 67 |                 {
 68 |                     body: {
 69 |                         definition,
 70 |                         modelConfig,
 71 |                     },
 72 |                 }
 73 |             );
 74 | 
 75 |             setInput("");
 76 |             setFiles([]);
 77 |         } catch (err) {
 78 |             console.error("Failed to submit Graphviz prompt:", err);
 79 |         }
 80 |     };
 81 | 
 82 |     const handleInputChange = (
 83 |         e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
 84 |     ) => {
 85 |         setInput(e.target.value);
 86 |     };
 87 | 
 88 |     const handleFileChange = (newFiles: File[]) => {
 89 |         setFiles(newFiles);
 90 |     };
 91 | 
 92 |     return (
 93 |         <Card className="h-full flex flex-col rounded-none py-0 gap-0 overflow-hidden">
 94 |             <CardHeader className="p-4 flex flex-col gap-2">
 95 |                 <div className="flex items-center justify-between gap-2">
 96 |                     <div className="flex gap-2 items-center">
 97 |                         <ModeSelector active="graphviz" />
 98 |                     </div>
 99 |                 </div>
100 |             </CardHeader>
101 |             <CardContent className="flex-grow overflow-hidden px-2">
102 |                 <GraphvizChatMessageDisplay
103 |                     messages={messages}
104 |                     error={error}
105 |                     setInput={setInput}
106 |                     setFiles={handleFileChange}
107 |                 />
108 |             </CardContent>
109 |             <CardFooter className="p-2">
110 |                 <ChatInput
111 |                     input={input}
112 |                     status={status}
113 |                     onSubmit={onFormSubmit}
114 |                     onChange={handleInputChange}
115 |                     onClearChat={() => {
116 |                         setMessages([]);
117 |                         clearDefinition();
118 |                     }}
119 |                     files={files}
120 |                     onFileChange={handleFileChange}
121 |                     enableHistoryControls={false}
122 |                 />
123 |             </CardFooter>
124 |         </Card>
125 |     );
126 | }


--------------------------------------------------------------------------------
/app/api/mermaid/route.ts:
--------------------------------------------------------------------------------
  1 | import { streamText, convertToModelMessages } from "ai";
  2 | import { z } from "zod/v3";
  3 | import { resolveModel } from "@/lib/model-provider";
  4 | 
  5 | export const maxDuration = 60;
  6 | 
  7 | export async function POST(req: Request) {
  8 |     try {
  9 |         const { messages, definition, modelConfig } = await req.json();
 10 | 
 11 |         const systemMessage = `
 12 | You are an expert Mermaid diagram assistant.
 13 | Your job is to translate user intent into clean, well-organized Mermaid syntax for flowcharts, sequence diagrams, ERDs, architecture views, and more.
 14 | 
 15 | Rules of engagement:
 16 | - Always reason about the provided "Current Mermaid definition" before replying.
 17 | - Respond conversationally but deliver the final code via the display_mermaid tool.
 18 | - Prefer incremental edits unless the user asks to rebuild from scratch.
 19 | - Keep node labels concise, ensure indentation is consistent, and add helpful comments sparingly.
 20 | - Use subgraphs/sections to keep complex diagrams readable.
 21 | - Never return Mermaid code directly in text responses.
 22 | 
 23 | Tool contract:
 24 | - You must trigger exactly one display_mermaid tool call per assistant turn.
 25 | - Include the full diagram definition inside that tool call.
 26 | - Optionally include a short summary describing the key changes.
 27 | `;
 28 | 
 29 |         const lastMessage = messages[messages.length - 1];
 30 |         const lastMessageText =
 31 |             lastMessage.parts?.find((part: any) => part.type === "text")
 32 |                 ?.text || "";
 33 |         const fileParts =
 34 |             lastMessage.parts?.filter((part: any) => part.type === "file") ||
 35 |             [];
 36 | 
 37 |         const formattedTextContent = `
 38 | Current Mermaid definition:
 39 | """mermaid
 40 | ${definition || "graph TD\n    Start --> Stop"}
 41 | """
 42 | User input:
 43 | """md
 44 | ${lastMessageText}
 45 | """
 46 | `;
 47 | 
 48 |         const modelMessages = convertToModelMessages(messages);
 49 |         let enhancedMessages = [...modelMessages];
 50 | 
 51 |         if (enhancedMessages.length > 0) {
 52 |             const lastModelMessage = enhancedMessages[enhancedMessages.length - 1];
 53 |             if (lastModelMessage.role === "user") {
 54 |                 const contentParts: any[] = [
 55 |                     { type: "text", text: formattedTextContent },
 56 |                 ];
 57 | 
 58 |                 for (const filePart of fileParts) {
 59 |                     contentParts.push({
 60 |                         type: "image",
 61 |                         image: filePart.url,
 62 |                         mimeType: filePart.mediaType,
 63 |                     });
 64 |                 }
 65 | 
 66 |                 enhancedMessages = [
 67 |                     ...enhancedMessages.slice(0, -1),
 68 |                     { ...lastModelMessage, content: contentParts },
 69 |                 ];
 70 |             }
 71 |         }
 72 | 
 73 |         const { client, model } = resolveModel(modelConfig);
 74 | 
 75 |         const result = streamText({
 76 |             system: systemMessage,
 77 |             model: client.chat(model),
 78 |             messages: enhancedMessages,
 79 |             temperature: 0.2,
 80 |             tools: {
 81 |                 display_mermaid: {
 82 |                     description:
 83 |                         "Render a Mermaid diagram by providing the full definition.",
 84 |                     inputSchema: z.object({
 85 |                         definition: z
 86 |                             .string()
 87 |                             .describe(
 88 |                                 "Complete Mermaid definition for the diagram"
 89 |                             ),
 90 |                         summary: z
 91 |                             .string()
 92 |                             .optional()
 93 |                             .describe(
 94 |                                 "Optional short explanation of what changed"
 95 |                             ),
 96 |                     }),
 97 |                 },
 98 |             },
 99 |         });
100 | 
101 |         function errorHandler(error: unknown) {
102 |             if (error == null) {
103 |                 return "unknown error";
104 |             }
105 |             if (typeof error === "string") {
106 |                 return error;
107 |             }
108 |             if (error instanceof Error) {
109 |                 return error.message;
110 |             }
111 |             return JSON.stringify(error);
112 |         }
113 | 
114 |         return result.toUIMessageStreamResponse({
115 |             onError: errorHandler,
116 |         });
117 |     } catch (error) {
118 |         console.error("Error in mermaid route:", error);
119 |         return Response.json(
120 |             { error: "Internal server error" },
121 |             { status: 500 }
122 |         );
123 |     }
124 | }
125 | 


--------------------------------------------------------------------------------
/components/mermaid-chat-panel.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import type React from "react";
  4 | import { useState } from "react";
  5 | import {
  6 |     Card,
  7 |     CardContent,
  8 |     CardFooter,
  9 |     CardHeader,
 10 |     CardTitle,
 11 | } from "@/components/ui/card";
 12 | import { useChat } from "@ai-sdk/react";
 13 | import { DefaultChatTransport } from "ai";
 14 | import { ChatInput } from "@/components/chat-input";
 15 | import { MermaidChatMessageDisplay } from "@/components/mermaid-chat-message-display";
 16 | import { useMermaid } from "@/contexts/mermaid-context";
 17 | import { ModeSelector } from "@/components/mode-selector";
 18 | import { ModelConfigDialog } from "@/components/model-config-dialog";
 19 | import { useModelConfig } from "@/contexts/model-config-context";
 20 | 
 21 | export default function MermaidChatPanel() {
 22 |     const { definition, clearDefinition } = useMermaid();
 23 |     const [files, setFiles] = useState<File[]>([]);
 24 |     const [input, setInput] = useState("");
 25 |     const { config: modelConfig } = useModelConfig();
 26 | 
 27 |     const { messages, sendMessage, addToolResult, status, error, setMessages } =
 28 |         useChat({
 29 |             transport: new DefaultChatTransport({
 30 |                 api: "/api/mermaid",
 31 |             }),
 32 |             async onToolCall({ toolCall }) {
 33 |                 if (toolCall.toolName === "display_mermaid") {
 34 |                     addToolResult({
 35 |                         tool: "display_mermaid",
 36 |                         toolCallId: toolCall.toolCallId,
 37 |                         output: "生成完成.",
 38 |                     });
 39 |                 }
 40 |             },
 41 |         });
 42 | 
 43 |     const onFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
 44 |         e.preventDefault();
 45 |         if (!input.trim() || status === "streaming") return;
 46 | 
 47 |         try {
 48 |             const parts: any[] = [{ type: "text", text: input }];
 49 | 
 50 |             if (files.length > 0) {
 51 |                 for (const file of files) {
 52 |                     const reader = new FileReader();
 53 |                     const dataUrl = await new Promise<string>((resolve) => {
 54 |                         reader.onload = () => resolve(reader.result as string);
 55 |                         reader.readAsDataURL(file);
 56 |                     });
 57 | 
 58 |                     parts.push({
 59 |                         type: "file",
 60 |                         url: dataUrl,
 61 |                         mediaType: file.type,
 62 |                     });
 63 |                 }
 64 |             }
 65 | 
 66 |             sendMessage(
 67 |                 { parts },
 68 |                 {
 69 |                     body: {
 70 |                         definition,
 71 |                         modelConfig,
 72 |                     },
 73 |                 }
 74 |             );
 75 | 
 76 |             setInput("");
 77 |             setFiles([]);
 78 |         } catch (err) {
 79 |             console.error("Failed to submit Mermaid prompt:", err);
 80 |         }
 81 |     };
 82 | 
 83 |     const handleInputChange = (
 84 |         e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
 85 |     ) => {
 86 |         setInput(e.target.value);
 87 |     };
 88 | 
 89 |     const handleFileChange = (newFiles: File[]) => {
 90 |         setFiles(newFiles);
 91 |     };
 92 | 
 93 |     return (
 94 |         <Card className="h-full flex flex-col rounded-none py-0 gap-0 overflow-hidden">
 95 |             <CardHeader className="p-4 flex flex-col gap-2">
 96 |                 <div className="flex items-center justify-between gap-2">
 97 |                     <div className="flex gap-2 items-center">
 98 |                         <ModeSelector active="mermaid" />
 99 |                     </div>
100 |                 </div>
101 |             </CardHeader>
102 |             <CardContent className="flex-grow overflow-hidden px-2">
103 |                 <MermaidChatMessageDisplay
104 |                     messages={messages}
105 |                     error={error}
106 |                     setInput={setInput}
107 |                     setFiles={handleFileChange}
108 |                 />
109 |             </CardContent>
110 |             <CardFooter className="p-2">
111 |                 <ChatInput
112 |                     input={input}
113 |                     status={status}
114 |                     onSubmit={onFormSubmit}
115 |                     onChange={handleInputChange}
116 |                     onClearChat={() => {
117 |                         setMessages([]);
118 |                         clearDefinition();
119 |                     }}
120 |                     files={files}
121 |                     onFileChange={handleFileChange}
122 |                     enableHistoryControls={false}
123 |                 />
124 |             </CardFooter>
125 |         </Card>
126 |     );
127 | }
128 | 


--------------------------------------------------------------------------------
/components/plantuml-chat-panel.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import type React from "react";
  4 | import { useState } from "react";
  5 | import {
  6 |     Card,
  7 |     CardContent,
  8 |     CardFooter,
  9 |     CardHeader,
 10 |     CardTitle,
 11 | } from "@/components/ui/card";
 12 | import { useChat } from "@ai-sdk/react";
 13 | import { DefaultChatTransport } from "ai";
 14 | import { ChatInput } from "@/components/chat-input";
 15 | import { PlantUMLChatMessageDisplay } from "./plantuml-chat-message-display";
 16 | import { usePlantUML } from "@/contexts/plantuml-context";
 17 | import { ModeSelector } from "@/components/mode-selector";
 18 | import { ModelConfigDialog } from "@/components/model-config-dialog";
 19 | import { useModelConfig } from "@/contexts/model-config-context";
 20 | 
 21 | export default function PlantUMLChatPanel() {
 22 |     const { definition, clearDefinition } = usePlantUML();
 23 |     const [files, setFiles] = useState<File[]>([]);
 24 |     const [input, setInput] = useState("");
 25 |     const { config: modelConfig } = useModelConfig();
 26 | 
 27 |     const { messages, sendMessage, addToolResult, status, error, setMessages } =
 28 |         useChat({
 29 |             transport: new DefaultChatTransport({
 30 |                 api: "/api/plantuml",
 31 |             }),
 32 |             async onToolCall({ toolCall }) {
 33 |                 if (toolCall.toolName === "display_plantuml") {
 34 |                     addToolResult({
 35 |                         tool: "display_plantuml",
 36 |                         toolCallId: toolCall.toolCallId,
 37 |                         output: "生成完成.",
 38 |                     });
 39 |                 }
 40 |             },
 41 |         });
 42 | 
 43 |     const onFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
 44 |         e.preventDefault();
 45 |         if (!input.trim() || status === "streaming") return;
 46 | 
 47 |         try {
 48 |             const parts: any[] = [{ type: "text", text: input }];
 49 | 
 50 |             if (files.length > 0) {
 51 |                 for (const file of files) {
 52 |                     const reader = new FileReader();
 53 |                     const dataUrl = await new Promise<string>((resolve) => {
 54 |                         reader.onload = () => resolve(reader.result as string);
 55 |                         reader.readAsDataURL(file);
 56 |                     });
 57 | 
 58 |                     parts.push({
 59 |                         type: "file",
 60 |                         url: dataUrl,
 61 |                         mediaType: file.type,
 62 |                     });
 63 |                 }
 64 |             }
 65 | 
 66 |             sendMessage(
 67 |                 { parts },
 68 |                 {
 69 |                     body: {
 70 |                         definition,
 71 |                         modelConfig,
 72 |                     },
 73 |                 }
 74 |             );
 75 | 
 76 |             setInput("");
 77 |             setFiles([]);
 78 |         } catch (err) {
 79 |             console.error("Failed to submit PlantUML prompt:", err);
 80 |         }
 81 |     };
 82 | 
 83 |     const handleInputChange = (
 84 |         e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
 85 |     ) => {
 86 |         setInput(e.target.value);
 87 |     };
 88 | 
 89 |     const handleFileChange = (newFiles: File[]) => {
 90 |         setFiles(newFiles);
 91 |     };
 92 | 
 93 |     return (
 94 |         <Card className="h-full flex flex-col rounded-none py-0 gap-0 overflow-hidden">
 95 |             <CardHeader className="p-4 flex flex-col gap-2">
 96 |                 <div className="flex items-center justify-between gap-2">
 97 |                     <div className="flex gap-2 items-center">
 98 |                         <ModeSelector active="plantuml" />
 99 |                     </div>
100 |                 </div>
101 |             </CardHeader>
102 |             <CardContent className="flex-grow overflow-hidden px-2">
103 |                 <PlantUMLChatMessageDisplay
104 |                     messages={messages}
105 |                     error={error}
106 |                     setInput={setInput}
107 |                     setFiles={handleFileChange}
108 |                 />
109 |             </CardContent>
110 |             <CardFooter className="p-2">
111 |                 <ChatInput
112 |                     input={input}
113 |                     status={status}
114 |                     onSubmit={onFormSubmit}
115 |                     onChange={handleInputChange}
116 |                     onClearChat={() => {
117 |                         setMessages([]);
118 |                         clearDefinition();
119 |                     }}
120 |                     files={files}
121 |                     onFileChange={handleFileChange}
122 |                     enableHistoryControls={false}
123 |                 />
124 |             </CardFooter>
125 |         </Card>
126 |     );
127 | }
128 | 


--------------------------------------------------------------------------------
/components/excalidraw-chat-panel.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import type React from "react";
  4 | import { useState } from "react";
  5 | import {
  6 |     Card,
  7 |     CardContent,
  8 |     CardFooter,
  9 |     CardHeader,
 10 |     CardTitle,
 11 | } from "@/components/ui/card";
 12 | import { useChat } from "@ai-sdk/react";
 13 | import { DefaultChatTransport } from "ai";
 14 | import { ChatInput } from "@/components/chat-input";
 15 | import { ExcalidrawChatMessageDisplay } from "@/components/excalidraw-chat-message-display";
 16 | import { useExcalidraw } from "@/contexts/excalidraw-context";
 17 | import { ModeSelector } from "@/components/mode-selector";
 18 | import { ModelConfigDialog } from "@/components/model-config-dialog";
 19 | import { useModelConfig } from "@/contexts/model-config-context";
 20 | 
 21 | export default function ExcalidrawChatPanel() {
 22 |     const { sceneData, clearScene } = useExcalidraw();
 23 |     const [files, setFiles] = useState<File[]>([]);
 24 |     const [input, setInput] = useState("");
 25 |     const { config: modelConfig } = useModelConfig();
 26 | 
 27 |     const { messages, sendMessage, addToolResult, status, error, setMessages } =
 28 |         useChat({
 29 |             transport: new DefaultChatTransport({
 30 |                 api: "/api/excalidraw",
 31 |             }),
 32 |             async onToolCall({ toolCall }) {
 33 |                 if (toolCall.toolName === "display_excalidraw") {
 34 |                     addToolResult({
 35 |                         tool: "display_excalidraw",
 36 |                         toolCallId: toolCall.toolCallId,
 37 |                         output: "生成完成.",
 38 |                     });
 39 |                 }
 40 |             },
 41 |         });
 42 | 
 43 |     const onFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
 44 |         e.preventDefault();
 45 |         if (!input.trim() || status === "streaming") return;
 46 | 
 47 |         try {
 48 |             const parts: any[] = [{ type: "text", text: input }];
 49 | 
 50 |             if (files.length > 0) {
 51 |                 for (const file of files) {
 52 |                     const reader = new FileReader();
 53 |                     const dataUrl = await new Promise<string>((resolve) => {
 54 |                         reader.onload = () => resolve(reader.result as string);
 55 |                         reader.readAsDataURL(file);
 56 |                     });
 57 | 
 58 |                     parts.push({
 59 |                         type: "file",
 60 |                         url: dataUrl,
 61 |                         mediaType: file.type,
 62 |                     });
 63 |                 }
 64 |             }
 65 | 
 66 |             sendMessage(
 67 |                 { parts },
 68 |                 {
 69 |                     body: {
 70 |                         scene: sceneData,
 71 |                         modelConfig,
 72 |                     },
 73 |                 }
 74 |             );
 75 | 
 76 |             setInput("");
 77 |             setFiles([]);
 78 |         } catch (err) {
 79 |             console.error("Failed to submit Excalidraw prompt:", err);
 80 |         }
 81 |     };
 82 | 
 83 |     const handleInputChange = (
 84 |         e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
 85 |     ) => {
 86 |         setInput(e.target.value);
 87 |     };
 88 | 
 89 |     const handleFileChange = (newFiles: File[]) => {
 90 |         setFiles(newFiles);
 91 |     };
 92 | 
 93 |     return (
 94 |         <Card className="h-full flex flex-col rounded-none py-0 gap-0 overflow-hidden">
 95 |             <CardHeader className="p-4 flex flex-col gap-2">
 96 |                 <div className="flex items-center justify-between gap-2">
 97 |                     <div className="flex gap-2 items-center">
 98 |                         <ModeSelector active="excalidraw" />
 99 |                     </div>
100 |                 </div>
101 |             </CardHeader>
102 |             <CardContent className="flex-grow overflow-hidden px-2">
103 |                 <ExcalidrawChatMessageDisplay
104 |                     messages={messages}
105 |                     error={error}
106 |                     setInput={setInput}
107 |                     setFiles={handleFileChange}
108 |                 />
109 |             </CardContent>
110 |             <CardFooter className="p-2">
111 |                 <ChatInput
112 |                     input={input}
113 |                     status={status}
114 |                     onSubmit={onFormSubmit}
115 |                     onChange={handleInputChange}
116 |                     onClearChat={() => {
117 |                         setMessages([]);
118 |                         clearScene();
119 |                     }}
120 |                     files={files}
121 |                     onFileChange={handleFileChange}
122 |                     enableHistoryControls={false}
123 |                 />
124 |             </CardFooter>
125 |         </Card>
126 |     );
127 | }
128 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | 
  3 | @plugin "tailwindcss-animate";
  4 | 
  5 | @custom-variant dark (&:is(.dark *));
  6 | 
  7 | @theme inline {
  8 |   --color-background: var(--background);
  9 |   --color-foreground: var(--foreground);
 10 |   --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
 11 |   --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, "Liberation Mono", "Courier New", monospace;
 12 |   --color-sidebar-ring: var(--sidebar-ring);
 13 |   --color-sidebar-border: var(--sidebar-border);
 14 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 15 |   --color-sidebar-accent: var(--sidebar-accent);
 16 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
 17 |   --color-sidebar-primary: var(--sidebar-primary);
 18 |   --color-sidebar-foreground: var(--sidebar-foreground);
 19 |   --color-sidebar: var(--sidebar);
 20 |   --color-chart-5: var(--chart-5);
 21 |   --color-chart-4: var(--chart-4);
 22 |   --color-chart-3: var(--chart-3);
 23 |   --color-chart-2: var(--chart-2);
 24 |   --color-chart-1: var(--chart-1);
 25 |   --color-ring: var(--ring);
 26 |   --color-input: var(--input);
 27 |   --color-border: var(--border);
 28 |   --color-destructive: var(--destructive);
 29 |   --color-accent-foreground: var(--accent-foreground);
 30 |   --color-accent: var(--accent);
 31 |   --color-muted-foreground: var(--muted-foreground);
 32 |   --color-muted: var(--muted);
 33 |   --color-secondary-foreground: var(--secondary-foreground);
 34 |   --color-secondary: var(--secondary);
 35 |   --color-primary-foreground: var(--primary-foreground);
 36 |   --color-primary: var(--primary);
 37 |   --color-popover-foreground: var(--popover-foreground);
 38 |   --color-popover: var(--popover);
 39 |   --color-card-foreground: var(--card-foreground);
 40 |   --color-card: var(--card);
 41 |   --radius-sm: calc(var(--radius) - 4px);
 42 |   --radius-md: calc(var(--radius) - 2px);
 43 |   --radius-lg: var(--radius);
 44 |   --radius-xl: calc(var(--radius) + 4px);
 45 | }
 46 | 
 47 | :root {
 48 |   --radius: 0.625rem;
 49 |   --background: oklch(1 0 0);
 50 |   --foreground: oklch(0.145 0 0);
 51 |   --card: oklch(1 0 0);
 52 |   --card-foreground: oklch(0.145 0 0);
 53 |   --popover: oklch(1 0 0);
 54 |   --popover-foreground: oklch(0.145 0 0);
 55 |   --primary: oklch(0.205 0 0);
 56 |   --primary-foreground: oklch(0.985 0 0);
 57 |   --secondary: oklch(0.97 0 0);
 58 |   --secondary-foreground: oklch(0.205 0 0);
 59 |   --muted: oklch(0.97 0 0);
 60 |   --muted-foreground: oklch(0.556 0 0);
 61 |   --accent: oklch(0.97 0 0);
 62 |   --accent-foreground: oklch(0.205 0 0);
 63 |   --destructive: oklch(0.577 0.245 27.325);
 64 |   --border: oklch(0.922 0 0);
 65 |   --input: oklch(0.922 0 0);
 66 |   --ring: oklch(0.708 0 0);
 67 |   --chart-1: oklch(0.646 0.222 41.116);
 68 |   --chart-2: oklch(0.6 0.118 184.704);
 69 |   --chart-3: oklch(0.398 0.07 227.392);
 70 |   --chart-4: oklch(0.828 0.189 84.429);
 71 |   --chart-5: oklch(0.769 0.188 70.08);
 72 |   --sidebar: oklch(0.985 0 0);
 73 |   --sidebar-foreground: oklch(0.145 0 0);
 74 |   --sidebar-primary: oklch(0.205 0 0);
 75 |   --sidebar-primary-foreground: oklch(0.985 0 0);
 76 |   --sidebar-accent: oklch(0.97 0 0);
 77 |   --sidebar-accent-foreground: oklch(0.205 0 0);
 78 |   --sidebar-border: oklch(0.922 0 0);
 79 |   --sidebar-ring: oklch(0.708 0 0);
 80 | }
 81 | 
 82 | .dark {
 83 |   --background: oklch(0.145 0 0);
 84 |   --foreground: oklch(0.985 0 0);
 85 |   --card: oklch(0.205 0 0);
 86 |   --card-foreground: oklch(0.985 0 0);
 87 |   --popover: oklch(0.205 0 0);
 88 |   --popover-foreground: oklch(0.985 0 0);
 89 |   --primary: oklch(0.922 0 0);
 90 |   --primary-foreground: oklch(0.205 0 0);
 91 |   --secondary: oklch(0.269 0 0);
 92 |   --secondary-foreground: oklch(0.985 0 0);
 93 |   --muted: oklch(0.269 0 0);
 94 |   --muted-foreground: oklch(0.708 0 0);
 95 |   --accent: oklch(0.269 0 0);
 96 |   --accent-foreground: oklch(0.985 0 0);
 97 |   --destructive: oklch(0.704 0.191 22.216);
 98 |   --border: oklch(1 0 0 / 10%);
 99 |   --input: oklch(1 0 0 / 15%);
100 |   --ring: oklch(0.556 0 0);
101 |   --chart-1: oklch(0.488 0.243 264.376);
102 |   --chart-2: oklch(0.696 0.17 162.48);
103 |   --chart-3: oklch(0.769 0.188 70.08);
104 |   --chart-4: oklch(0.627 0.265 303.9);
105 |   --chart-5: oklch(0.645 0.246 16.439);
106 |   --sidebar: oklch(0.205 0 0);
107 |   --sidebar-foreground: oklch(0.985 0 0);
108 |   --sidebar-primary: oklch(0.488 0.243 264.376);
109 |   --sidebar-primary-foreground: oklch(0.985 0 0);
110 |   --sidebar-accent: oklch(0.269 0 0);
111 |   --sidebar-accent-foreground: oklch(0.985 0 0);
112 |   --sidebar-border: oklch(1 0 0 / 10%);
113 |   --sidebar-ring: oklch(0.556 0 0);
114 | }
115 | 
116 | @layer base {
117 |   * {
118 |     @apply border-border outline-ring/50;
119 |   }
120 |   body {
121 |     @apply bg-background text-foreground font-sans;
122 |   }
123 |   code, pre {
124 |     @apply font-mono;
125 |   }
126 | }
127 | 


--------------------------------------------------------------------------------
/app/api/graphviz/route.ts:
--------------------------------------------------------------------------------
  1 | import { streamText, convertToModelMessages } from "ai";
  2 | import { z } from "zod/v3";
  3 | import { resolveModel } from "@/lib/model-provider";
  4 | 
  5 | export const maxDuration = 60;
  6 | 
  7 | export async function POST(req: Request) {
  8 |     try {
  9 |         const { messages, definition, modelConfig } = await req.json();
 10 | 
 11 |         const systemMessage = `
 12 | You are an expert Graphviz (DOT language) diagram assistant.
 13 | Your job is to translate user intent into clean, well-organized Graphviz syntax.
 14 | 
 15 | Graphviz Rules:
 16 | - Always use proper DOT syntax (digraph, graph, or subgraph)
 17 | - Use meaningful node and edge labels
 18 | - Keep layouts clean and readable
 19 | - Use appropriate graph attributes for styling
 20 | - Add helpful comments when needed
 21 | 
 22 | Rules of engagement:
 23 | - Always reason about the provided "Current Graphviz definition" before replying.
 24 | - Respond conversationally but deliver the final code via the display_graphviz tool.
 25 | - Prefer incremental edits unless the user asks to rebuild from scratch.
 26 | - Keep labels concise, ensure indentation is consistent.
 27 | - Never return diagram code directly in text responses.
 28 | 
 29 | Tool contract:
 30 | - You must trigger exactly one display_graphviz tool call per assistant turn.
 31 | - Include the full Graphviz definition inside that tool call.
 32 | - Optionally include a short summary describing the key changes.
 33 | `;
 34 | 
 35 |         const lastMessage = messages[messages.length - 1];
 36 |         const lastMessageText =
 37 |             lastMessage.parts?.find((part: any) => part.type === "text")
 38 |                 ?.text || "";
 39 |         const fileParts =
 40 |             lastMessage.parts?.filter((part: any) => part.type === "file") ||
 41 |             [];
 42 | 
 43 |         const formattedTextContent = `
 44 | Current Graphviz definition:
 45 | """dot
 46 | ${definition || "digraph G {\n  A -> B\n}"}
 47 | """
 48 | User input:
 49 | """md
 50 | ${lastMessageText}
 51 | """
 52 | `;
 53 | 
 54 |         const modelMessages = convertToModelMessages(messages);
 55 |         let enhancedMessages = [...modelMessages];
 56 | 
 57 |         if (enhancedMessages.length > 0) {
 58 |             const lastModelMessage = enhancedMessages[enhancedMessages.length - 1];
 59 |             if (lastModelMessage.role === "user") {
 60 |                 const contentParts: any[] = [
 61 |                     { type: "text", text: formattedTextContent },
 62 |                 ];
 63 | 
 64 |                 for (const filePart of fileParts) {
 65 |                     contentParts.push({
 66 |                         type: "image",
 67 |                         image: filePart.url,
 68 |                         mimeType: filePart.mediaType,
 69 |                     });
 70 |                 }
 71 | 
 72 |                 enhancedMessages = [
 73 |                     ...enhancedMessages.slice(0, -1),
 74 |                     { ...lastModelMessage, content: contentParts },
 75 |                 ];
 76 |             }
 77 |         }
 78 | 
 79 |         const { client, model } = resolveModel(modelConfig);
 80 | 
 81 |         const result = streamText({
 82 |             system: systemMessage,
 83 |             model: client.chat(model),
 84 |             messages: enhancedMessages,
 85 |             temperature: 0.2,
 86 |             tools: {
 87 |                 display_graphviz: {
 88 |                     description:
 89 |                         "Render a Graphviz diagram by providing the full DOT definition.",
 90 |                     inputSchema: z.object({
 91 |                         definition: z
 92 |                             .string()
 93 |                             .describe(
 94 |                                 "Complete Graphviz DOT definition for the diagram"
 95 |                             ),
 96 |                         summary: z
 97 |                             .string()
 98 |                             .optional()
 99 |                             .describe(
100 |                                 "Optional short explanation of what changed"
101 |                             ),
102 |                     }),
103 |                 },
104 |             },
105 |         });
106 | 
107 |         function errorHandler(error: unknown) {
108 |             if (error == null) {
109 |                 return "unknown error";
110 |             }
111 |             if (typeof error === "string") {
112 |                 return error;
113 |             }
114 |             if (error instanceof Error) {
115 |                 return error.message;
116 |             }
117 |             return JSON.stringify(error);
118 |         }
119 | 
120 |         return result.toUIMessageStreamResponse({
121 |             onError: errorHandler,
122 |         });
123 |     } catch (error) {
124 |         console.error("Error in graphviz route:", error);
125 |         return Response.json(
126 |             { error: "Internal server error" },
127 |             { status: 500 }
128 |         );
129 |     }
130 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # AI 智能绘图
  2 | 
  3 | [English](README_en.md) | 中文
  4 | 
  5 | 一个基于 Next.js 构建的智能绘图应用程序，利用 AI 的强大功能创建和操作各种类型的图表，包括 Draw.io (diagrams.net)、Mermaid、PlantUML、Excalidraw，以及通过自然语言命令支持 20 多种其他图表格式。
  6 | 
  7 | 🔗 **在线演示**:
  8 | - https://ai-smart-draw.vercel.app/
  9 | 
 10 | ![de5e647f-a83a-4b28-bd56-b449f587e472.png](public/de5e647f-a83a-4b28-bd56-b449f587e472.png)
 11 | ![01669c29-60a7-4777-af14-0982d6c6daa8.png](public/01669c29-60a7-4777-af14-0982d6c6daa8.png)
 12 | ![409fd263-800f-4183-8df9-71691307633c.png](public/409fd263-800f-4183-8df9-71691307633c.png)
 13 | ![6dd5b5c1-1e25-4d33-a45f-d10eb0fbb804.png](public/6dd5b5c1-1e25-4d33-a45f-d10eb0fbb804.png)
 14 | ![7736141c-e820-450d-8260-5f5b0c846388.png](public/7736141c-e820-450d-8260-5f5b0c846388.png)
 15 | ![e59f7980-ac2f-4c57-b9a7-8b7c75feed58.png](public/e59f7980-ac2f-4c57-b9a7-8b7c75feed58.png)
 16 | 
 17 | ## 🌟 主要功能
 18 | 
 19 | - **AI 驱动的图表创建**: 将自然语言描述转换为专业图表
 20 | - **多格式支持**: 支持 Draw.io XML、Mermaid、PlantUML、Excalidraw，以及通过 Kroki 支持 20 多种其他格式
 21 | - **智能编辑**: 通过对话式 AI 提示修改现有图表
 22 | - **实时预览**: 在与 AI 交互时查看更改
 23 | - **版本历史**: 跟踪和恢复图表的先前版本
 24 | - **可折叠聊天面板**: 展开或折叠聊天界面以最大化工作区
 25 | - **灵活渲染**: 具有回退机制的多种渲染选项
 26 | - **模型配置**: 直接从浏览器自定义 AI 模型
 27 | 
 28 | ## 🎯 支持的图表类型
 29 | 
 30 | ### Draw.io (diagrams.net)
 31 | 使用 AI 驱动的 XML 生成和修改功能创建和编辑专业流程图、过程图和复杂可视化图表。
 32 | 
 33 | ### Mermaid
 34 | 在专用工作区中生成流程图、序列图、甘特图等，并提供实时 SVG 预览。
 35 | 
 36 | ### PlantUML
 37 | 内置渲染代理，支持 plantuml.com、kroki.io 或自定义端点创建 UML 图表。
 38 | 
 39 | ### Excalidraw
 40 | 结合 AI 辅助的徒手风格绘图，用于有机图表创建。
 41 | 
 42 | ### Graphviz
 43 | 使用 DOT 语言语法创建图形图表。Graphviz 通过 kroki.io 服务提供支持，该服务提供强大的图形可视化功能。
 44 | 
 45 | ### Kroki (20 多种格式)
 46 | 使用 kroki.io 服务在各种格式中生成图表，通过单一界面支持：
 47 | 
 48 | - **PlantUML**: UML 图表、活动图、序列图等
 49 | - **Mermaid**: 流程图、序列图、甘特图等
 50 | - **BPMN**: 业务流程建模符号，用于工作流图
 51 | - **Graphviz**: 图形可视化和网络图
 52 | - **BlockDiag**: 方框图
 53 | - **C4-PlantUML**: 软件架构图
 54 | - **Ditaa**: ASCII 艺术到图像转换
 55 | - **Erd**: 实体关系图
 56 | - **Vega/Vega-Lite**: 数据可视化
 57 | - **以及其他 15 多种格式**
 58 | 
 59 | ## 🛠 工作原理
 60 | 
 61 | AI 智能绘图利用现代 Web 技术在自然语言和图表表示之间架起桥梁：
 62 | 
 63 | - **Next.js 应用路由器**: 具有服务器端渲染的快速、现代 React 框架
 64 | - **AI SDK 集成**: 与 OpenAI 兼容 API 的无缝通信
 65 | - **上下文感知提示**: 为每种图表类型设计的智能提示工程
 66 | - **实时流式传输**: 具有流式响应的即时反馈
 67 | - **格式特定工具**: 为每种图表格式设计的专用工具（[display_mermaid]、[display_plantuml] 等）
 68 | 
 69 | 应用程序将您的自然语言请求转换为结构化图表代码，然后实时渲染。
 70 | 
 71 | ## 🚀 入门指南
 72 | 
 73 | ### 先决条件
 74 | - Node.js 18+
 75 | - npm 或 yarn
 76 | 
 77 | ### 安装
 78 | 
 79 | 1. 克隆仓库：
 80 | ```bash
 81 | git clone https://github.com/shenpeiheng/ai-smart-draw.git
 82 | cd ai-smart-draw
 83 | ```
 84 | 
 85 | 2. 安装依赖：
 86 | ```bash
 87 | npm install
 88 | # 或
 89 | yarn install
 90 | ```
 91 | 
 92 | 3. 在根目录创建 `.env.local` 文件。您可以使用 `env.example` 作为模板：
 93 | ```bash
 94 | cp env.example .env.local
 95 | ```
 96 | 
 97 | 然后使用您的 OpenAI 凭据更新 `.env.local`。
 98 | 
 99 | ### OpenAI 配置
100 | 
101 | - `OPENAI_API_KEY` (必需): 来自您 OpenAI 账户的密钥
102 | - `OPENAI_MODEL` (可选): 默认为 `gpt-4o-mini`，如果您喜欢其他已发布的变体可以覆盖
103 | - `OPENAI_BASE_URL` (可选): 默认为 `https://api.openai.com/v1`；如果您自托管代理或网关，请设置此项
104 | 
105 | 示例片段：
106 | ```bash
107 | OPENAI_API_KEY="sk-your-key"
108 | # OPENAI_MODEL="gpt-4o-mini"
109 | # OPENAI_BASE_URL="https://api.openai.com/v1"
110 | ```
111 | 
112 | #### 可选：从浏览器配置
113 | 
114 | - 点击任何工作区标题中的 **模型设置** 按钮，覆盖当前浏览器的 API 密钥、基础 URL 或模型。值存储在 `localStorage` 中，仅在您提交聊天请求时发送到服务器
115 | - 留空任何字段以回退到上述服务器端环境变量
116 | - 使用 **拉取列表** 按钮调用 `/api/models` 助手，将当前凭据转发到 `GET /models` 并列出可选择的模型 ID
117 | 
118 | 4. 运行开发服务器：
119 | ```bash
120 | npm run dev
121 | ```
122 | 
123 | 5. 在浏览器中打开 [http://localhost:3000](http://localhost:3000) 查看应用程序
124 |     - `/` -> Draw.io (XML 工作流、图表历史、文件上传)
125 |     - `/mermaid` -> Mermaid (由您配置的 OpenAI 兼容模型驱动的实时预览 + 定义卡)
126 |     - `/plantuml` -> PlantUML (具有远程预览的基于文本的图表)
127 |     - `/excalidraw` -> Excalidraw (由相同模型驱动的自由形式画布)
128 |     - `/kroki` -> Kroki (由 kroki.io 驱动的多格式图表)
129 |     - `/graphviz` -> Graphviz (由 kroki.io 驱动的图形可视化图表)
130 | 
131 | ## 🌐 用户界面功能
132 | 
133 | ### 可折叠聊天面板
134 | - 切换聊天面板以最大化您的工作区
135 | - 折叠时，浮动按钮可快速访问以恢复聊天面板
136 | - 流畅的动画提供无缝用户体验
137 | 
138 | ### 响应式设计
139 | - 针对桌面和笔记本电脑使用进行了优化
140 | - 移动友好的界面和适当的消息
141 | 
142 | ### 统一导航
143 | - 在不同图表类型之间轻松切换
144 | - 所有图表工作区的一致界面
145 | 
146 | ## 🚀 部署
147 | 
148 | 部署 Next.js 应用的最简单方法是使用 Next.js 创建者提供的 [Vercel 平台](https://vercel.com/new)。
149 | 
150 | 查看 [Next.js 部署文档](https://nextjs.org/docs/app/building-your-application/deploying)了解更多详情。
151 | 
152 | 或者您可以使用此按钮进行部署。
153 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fshenpeiheng%2Fai-smart-draw)
154 | 
155 | ## 📁 项目结构
156 | 
157 | ```
158 | app/                  # Next.js 应用路由和页面
159 |   api/                # 不同图表类型的 API 路由
160 |   [diagram-type]/     # 每种图表类型的独立页面
161 | components/           # React 组件
162 |   ui/                 # 可重用的 UI 组件
163 |   [feature]/          # 特定功能的组件
164 | contexts/             # React 上下文提供者
165 | lib/                  # 实用函数和助手
166 | public/               # 静态资源，包括示例图片
167 | ```
168 | 
169 | ## ✅ 待办事项
170 | 
171 | - [x] 允许 LLM 修改 XML 而不是每次都从头生成
172 | - [x] 提高形状流式更新的流畅性
173 | - [x] 添加可折叠聊天面板以更好地利用工作区
174 | 
175 | ## 📄 许可证
176 | 
177 | 该项目基于 MIT 许可证。
178 | 
179 | ## ⭐ 星标历史
180 | 
181 | [![Star History Chart](https://api.star-history.com/svg?repos=shenpeiheng/ai-smart-draw&type=date&legend=top-left)](https://www.star-history.com/#shenpeiheng/ai-smart-draw&type=date&legend=top-left)


--------------------------------------------------------------------------------
/components/graphviz-definition-card.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useEffect, useState } from "react";
  4 | import { Button } from "@/components/ui/button";
  5 | import { Textarea } from "@/components/ui/textarea";
  6 | import {ClipboardCopy, ClipboardCheck, RefreshCcw, ChevronsDown, ChevronsUp, Copy} from "lucide-react";
  7 | import { copyToClipboard } from "@/components/plantuml-definition-card";
  8 | import { cn } from "@/lib/utils";
  9 | 
 10 | interface GraphvizDefinitionCardProps {
 11 |     definition: string;
 12 |     onChange: (value: string) => void;
 13 |     onClear: () => void;
 14 |     defaultDefinition: string;
 15 |     isCollapsed?: boolean;
 16 |     onToggle?: () => void;
 17 | }
 18 | 
 19 | export function GraphvizDefinitionCard({
 20 |     definition,
 21 |     onChange,
 22 |     onClear,
 23 |     defaultDefinition,
 24 |     isCollapsed,
 25 |     onToggle,
 26 | }: GraphvizDefinitionCardProps) {
 27 |     const [copied, setCopied] = useState(false);
 28 |     const [isResetting, setIsResetting] = useState(false);
 29 | 
 30 |     useEffect(() => {
 31 |         if (!copied) return;
 32 |         const timer = setTimeout(() => setCopied(false), 1500);
 33 |         return () => clearTimeout(timer);
 34 |     }, [copied]);
 35 | 
 36 |     const handleCopy = async () => {
 37 |         if (!definition) return;
 38 |         await copyToClipboard(definition);
 39 |         setCopied(true);
 40 |     };
 41 | 
 42 |     const handleReset = () => {
 43 |         setIsResetting(true);
 44 |         onChange(defaultDefinition);
 45 |         // 添加一个短暂的延迟来显示重置动画效果
 46 |         setTimeout(() => setIsResetting(false), 300);
 47 |     };
 48 | 
 49 |     return (
 50 |         <div className="bg-white rounded-lg border shadow-sm flex flex-col h-full">
 51 |             <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/40">
 52 |                 <div>
 53 |                     <p className="text-sm font-medium">Graphviz 定义</p>
 54 |                     <p className="text-xs text-muted-foreground">
 55 |                         由 <a href="https://www.graphviz.org" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">https://www.graphviz.org</a> 提供支持
 56 |                     </p>
 57 |                 </div>
 58 |                 <div className="flex gap-1 items-center">
 59 |                     {onToggle && (
 60 |                         <Button
 61 |                             type="button"
 62 |                             variant="outline"
 63 |                             size="sm"
 64 |                             onClick={onToggle}
 65 |                             title="折叠"
 66 |                             aria-label={isCollapsed ? "Expand panel" : "Collapse panel"}
 67 |                         >
 68 |                             {isCollapsed ? (
 69 |                                 <ChevronsUp className="h-4 w-4" />
 70 |                             ) : (
 71 |                                 <ChevronsDown className="h-4 w-4" />
 72 |                             )}
 73 |                         </Button>
 74 |                     )}
 75 |                     <Button
 76 |                         type="button"
 77 |                         variant="outline"
 78 |                         size="sm"
 79 |                         onClick={handleReset}
 80 |                         title="重置"
 81 |                         className={cn(
 82 |                             "transition-all duration-300",
 83 |                             isResetting && "bg-blue-500 text-white border-blue-500"
 84 |                         )}
 85 |                     >
 86 |                         <RefreshCcw className={cn(
 87 |                             "h-4 w-4",
 88 |                             isResetting && "animate-spin"
 89 |                         )} />
 90 |                     </Button>
 91 |                     <Button
 92 |                         type="button"
 93 |                         variant="outline"
 94 |                         size="sm"
 95 |                         onClick={handleCopy}
 96 |                         title="复制"
 97 |                         disabled={!definition}
 98 |                     >
 99 |                         {copied ? (
100 |                             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4">
101 |                                 <polyline points="20 6 9 17 4 12"/>
102 |                             </svg>
103 |                         ) : (
104 |                             <Copy className="h-4 w-4" />
105 |                         )}
106 |                     </Button>
107 |                 </div>
108 |             </div>
109 |             {!isCollapsed && (
110 |                 <div className="flex-1 bg-muted/10 flex flex-col overflow-hidden">
111 |                     <Textarea
112 |                         value={definition}
113 |                         onChange={(event) => onChange(event.target.value)}
114 |                         placeholder="Enter Graphviz definition (digraph, graph, etc.)..."
115 |                         className="flex-1 min-h-0 text-xs resize-none bg-white/70 focus-visible:ring-2 overflow-auto font-mono"
116 |                         spellCheck={false}
117 |                     />
118 |                 </div>
119 |             )}
120 |         </div>
121 |     );
122 | }


--------------------------------------------------------------------------------
/components/mermaid-definition-card.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useEffect, useState } from "react";
  4 | import { Button } from "@/components/ui/button";
  5 | import { Textarea } from "@/components/ui/textarea";
  6 | import {ClipboardCopy, ClipboardCheck, RefreshCcw, ChevronsDown, ChevronsUp, Copy} from "lucide-react";
  7 | import {copyToClipboard} from "@/components/plantuml-definition-card";
  8 | import { cn } from "@/lib/utils";
  9 | 
 10 | interface MermaidDefinitionCardProps {
 11 |     definition: string;
 12 |     onDefinitionChange?: (definition: string) => void;
 13 |     onReset?: () => void;
 14 |     isCollapsed?: boolean;
 15 |     onToggle?: () => void;
 16 | }
 17 | 
 18 | export function MermaidDefinitionCard({
 19 |     definition,
 20 |     onDefinitionChange,
 21 |     onReset,
 22 |     isCollapsed,
 23 |     onToggle,
 24 | }: MermaidDefinitionCardProps) {
 25 |     const [copied, setCopied] = useState(false);
 26 |     const [isResetting, setIsResetting] = useState(false);
 27 | 
 28 |     useEffect(() => {
 29 |         if (!copied) return;
 30 |         const timer = setTimeout(() => setCopied(false), 1500);
 31 |         return () => clearTimeout(timer);
 32 |     }, [copied]);
 33 | 
 34 |     const handleCopy = async () => {
 35 |         if (!definition) return;
 36 |         await copyToClipboard(definition);
 37 |         setCopied(true);
 38 |     };
 39 |     
 40 |     const handleReset = () => {
 41 |         if (onReset) {
 42 |             setIsResetting(true);
 43 |             onReset();
 44 |             // 添加一个短暂的延迟来显示重置动画效果
 45 |             setTimeout(() => setIsResetting(false), 300);
 46 |         }
 47 |     };
 48 | 
 49 |     return (
 50 |         <div className="bg-white rounded-lg border shadow-sm flex flex-col h-full">
 51 |             <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/40">
 52 |                 <div>
 53 |                     <p className="text-sm font-medium">Mermaid 定义</p>
 54 |                     <p className="text-xs text-muted-foreground">
 55 |                         由 <a href="https://mermaid.live" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">https://mermaid.live</a> 提供支持
 56 |                     </p>
 57 |                 </div>
 58 |                 <div className="flex gap-1 items-center">
 59 |                     {onToggle && (
 60 |                         <Button
 61 |                             type="button"
 62 |                             variant="outline"
 63 |                             size="sm"
 64 |                             onClick={onToggle}
 65 |                             title="折叠"
 66 |                             aria-label={isCollapsed ? "Expand panel" : "Collapse panel"}
 67 |                         >
 68 |                             {isCollapsed ? (
 69 |                                 <ChevronsUp className="h-4 w-4" />
 70 |                             ) : (
 71 |                                 <ChevronsDown className="h-4 w-4" />
 72 |                             )}
 73 |                         </Button>
 74 |                     )}
 75 |                     {onReset && (
 76 |                         <Button
 77 |                             type="button"
 78 |                             variant="outline"
 79 |                             size="sm"
 80 |                             onClick={handleReset}
 81 |                             title="重置"
 82 |                             className={cn(
 83 |                                 "transition-all duration-300",
 84 |                                 isResetting && "bg-blue-500 text-white border-blue-500"
 85 |                             )}
 86 |                         >
 87 |                             <RefreshCcw className={cn(
 88 |                                 "h-4 w-4",
 89 |                                 isResetting && "animate-spin"
 90 |                             )} />
 91 |                         </Button>
 92 |                     )}
 93 |                     <Button
 94 |                         type="button"
 95 |                         variant="outline"
 96 |                         size="sm"
 97 |                         onClick={handleCopy}
 98 |                         title="复制"
 99 |                         disabled={!definition}
100 |                     >
101 |                         {copied ? (
102 |                             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4">
103 |                                 <polyline points="20 6 9 17 4 12"/>
104 |                             </svg>
105 |                         ) : (
106 |                             <Copy className="h-4 w-4" />
107 |                         )}
108 |                     </Button>
109 |                 </div>
110 |             </div>
111 |             {!isCollapsed && (
112 |                 <div className="flex-1 bg-muted/10 flex flex-col overflow-hidden">
113 |                     <Textarea
114 |                         value={definition}
115 |                         onChange={(event) => onDefinitionChange?.(event.target.value)}
116 |                         placeholder="Ask the assistant for a diagram or type Mermaid markup directly..."
117 |                         className="flex-1 min-h-0 text-xs resize-none bg-white/70 focus-visible:ring-2 overflow-auto"
118 |                         spellCheck={false}
119 |                         disabled={!onDefinitionChange}
120 |                     />
121 |                 </div>
122 |             )}
123 |         </div>
124 |     );
125 | }


--------------------------------------------------------------------------------
/components/kroki-definition-card.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useEffect, useState } from "react";
  4 | import { Button } from "@/components/ui/button";
  5 | import { Textarea } from "@/components/ui/textarea";
  6 | import {ClipboardCopy, ClipboardCheck, RefreshCcw, ChevronsDown, ChevronsUp, Copy} from "lucide-react";
  7 | import { copyToClipboard } from "@/components/plantuml-definition-card";
  8 | import { cn } from "@/lib/utils";
  9 | 
 10 | interface KrokiDefinitionCardProps {
 11 |     definition: string;
 12 |     onDefinitionChange?: (definition: string) => void;
 13 |     onReset?: () => void;
 14 |     isCollapsed?: boolean;
 15 |     onToggle?: () => void;
 16 | }
 17 | 
 18 | export function KrokiDefinitionCard({
 19 |     definition,
 20 |     onDefinitionChange,
 21 |     onReset,
 22 |     isCollapsed,
 23 |     onToggle,
 24 | }: KrokiDefinitionCardProps) {
 25 |     const [copied, setCopied] = useState(false);
 26 |     const [isResetting, setIsResetting] = useState(false);
 27 | 
 28 |     useEffect(() => {
 29 |         if (!copied) return;
 30 |         const timer = setTimeout(() => setCopied(false), 1500);
 31 |         return () => clearTimeout(timer);
 32 |     }, [copied]);
 33 | 
 34 |     const handleCopy = async () => {
 35 |         if (!definition) return;
 36 |         await copyToClipboard(definition);
 37 |         setCopied(true);
 38 |     };
 39 |     
 40 |     const handleReset = () => {
 41 |         if (onReset) {
 42 |             setIsResetting(true);
 43 |             onReset();
 44 |             // 添加一个短暂的延迟来显示重置动画效果
 45 |             setTimeout(() => setIsResetting(false), 300);
 46 |         }
 47 |     };
 48 | 
 49 |     return (
 50 |         <div className="bg-white rounded-lg border shadow-sm flex flex-col h-full">
 51 |             <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/40">
 52 |                 <div>
 53 |                     <p className="text-sm font-medium">Kroki 定义</p>
 54 |                     <p className="text-xs text-muted-foreground">
 55 |                         由 <a href="https://kroki.io" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">https://kroki.io</a> 提供支持
 56 |                     </p>
 57 |                 </div>
 58 |                 <div className="flex gap-1 items-center">
 59 |                     {onToggle && (
 60 |                         <Button
 61 |                             type="button"
 62 |                             variant="outline"
 63 |                             size="sm"
 64 |                             onClick={onToggle}
 65 |                             title="折叠"
 66 |                             aria-label={isCollapsed ? "Expand panel" : "Collapse panel"}
 67 |                         >
 68 |                             {isCollapsed ? (
 69 |                                 <ChevronsUp className="h-4 w-4" />
 70 |                             ) : (
 71 |                                 <ChevronsDown className="h-4 w-4" />
 72 |                             )}
 73 |                         </Button>
 74 |                     )}
 75 |                     {onReset && (
 76 |                         <Button
 77 |                             type="button"
 78 |                             variant="outline"
 79 |                             size="sm"
 80 |                             onClick={handleReset}
 81 |                             title="重置"
 82 |                             className={cn(
 83 |                                 "transition-all duration-300",
 84 |                                 isResetting && "bg-blue-500 text-white border-blue-500"
 85 |                             )}
 86 |                         >
 87 |                             <RefreshCcw className={cn(
 88 |                                 "h-4 w-4",
 89 |                                 isResetting && "animate-spin"
 90 |                             )} />
 91 |                         </Button>
 92 |                     )}
 93 |                     <Button
 94 |                         type="button"
 95 |                         variant="outline"
 96 |                         size="sm"
 97 |                         onClick={handleCopy}
 98 |                         title="复制"
 99 |                         disabled={!definition}
100 |                     >
101 |                         {copied ? (
102 |                             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4">
103 |                                 <polyline points="20 6 9 17 4 12"/>
104 |                             </svg>
105 |                         ) : (
106 |                             <Copy className="h-4 w-4" />
107 |                         )}
108 |                     </Button>
109 |                 </div>
110 |             </div>
111 |             {!isCollapsed && (
112 |                 <div className="flex-1 bg-muted/10 flex flex-col overflow-hidden">
113 |                     <Textarea
114 |                         value={definition}
115 |                         onChange={(event) => onDefinitionChange?.(event.target.value)}
116 |                         placeholder="Enter diagram definition using any supported format (PlantUML, Mermaid, BPMN, Graphviz, etc.)..."
117 |                         className="flex-1 min-h-0 text-xs resize-none bg-white/70 focus-visible:ring-2 overflow-auto font-mono"
118 |                         spellCheck={false}
119 |                         disabled={!onDefinitionChange}
120 |                     />
121 |                 </div>
122 |             )}
123 |         </div>
124 |     );
125 | }


--------------------------------------------------------------------------------
/contexts/diagram-context.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React, { createContext, useContext, useRef, useState } from "react";
  4 | import type { DrawIoEmbedRef } from "react-drawio";
  5 | import { extractDiagramXML } from "../lib/utils";
  6 | 
  7 | interface DiagramContextType {
  8 |     chartXML: string;
  9 |     latestSvg: string;
 10 |     diagramHistory: { svg: string; xml: string }[];
 11 |     loadDiagram: (chart: string) => void;
 12 |     handleExport: (purpose?: 'chat' | 'file') => void;
 13 |     resolverRef: React.Ref<((value: string) => void) | null>;
 14 |     drawioRef: React.Ref<DrawIoEmbedRef | null>;
 15 |     handleDiagramExport: (data: any) => void;
 16 |     clearDiagram: () => void;
 17 |     importDiagramFile: (file: File) => void;
 18 |     exportDiagramFile: () => void;
 19 |     exportPurpose: 'chat' | 'file';
 20 | }
 21 | 
 22 | const DiagramContext = createContext<DiagramContextType | undefined>(undefined);
 23 | 
 24 | export function DiagramProvider({ children }: { children: React.ReactNode }) {
 25 |     const [chartXML, setChartXML] = useState<string>("");
 26 |     const [latestSvg, setLatestSvg] = useState<string>("");
 27 |     const [diagramHistory, setDiagramHistory] = useState<
 28 |         { svg: string; xml: string }[]
 29 |     >([]);
 30 |     const [exportPurpose, setExportPurpose] = useState<'chat' | 'file'>('chat');
 31 |     const drawioRef = useRef<DrawIoEmbedRef | null>(null);
 32 |     const resolverRef = useRef<((value: string) => void) | null>(null);
 33 | 
 34 |     const handleExport = (purpose: 'chat' | 'file' = 'chat') => {
 35 |         // Store the purpose for the export handler
 36 |         console.log('handleExport called with purpose:', purpose);
 37 |         setExportPurpose(purpose);
 38 |         
 39 |         // For file export, we need a different approach to ensure the export event
 40 |         // handler knows this is a file export
 41 |         if (purpose === 'file') {
 42 |             // Add a special flag to the document that can be checked in the export handler
 43 |             document.body.setAttribute('data-export-purpose', 'file');
 44 |             
 45 |             // Set a timeout to remove the flag after a reasonable time
 46 |             setTimeout(() => {
 47 |                 document.body.removeAttribute('data-export-purpose');
 48 |             }, 2000);
 49 |         }
 50 |         
 51 |         if (drawioRef.current) {
 52 |             console.log('Calling exportDiagram');
 53 |             drawioRef.current.exportDiagram({
 54 |                 format: "xmlsvg",
 55 |             });
 56 |         } else {
 57 |             console.log('drawioRef.current is null');
 58 |         }
 59 |     };
 60 | 
 61 |     const loadDiagram = (chart: string) => {
 62 |         if (drawioRef.current) {
 63 |             drawioRef.current.load({
 64 |                 xml: chart,
 65 |             });
 66 |         }
 67 |     };
 68 | 
 69 |     const handleDiagramExport = (data: any) => {
 70 |         console.log('handleDiagramExport called, exportPurpose:', exportPurpose);
 71 |         const extractedXML = extractDiagramXML(data.data);
 72 |         
 73 |         // 只有在聊天导出时才更新状态，避免文件导出时干扰
 74 |         if (exportPurpose === 'chat') {
 75 |             console.log('Updating chat state');
 76 |             setChartXML(extractedXML);
 77 |             setLatestSvg(data.data);
 78 |             setDiagramHistory((prev) => [
 79 |                 ...prev,
 80 |                 {
 81 |                     svg: data.data,
 82 |                     xml: extractedXML,
 83 |                 },
 84 |             ]);
 85 |         }
 86 |         
 87 |         // 对于聊天导出，通过 resolver 返回结果
 88 |         if (exportPurpose === 'chat' && resolverRef.current) {
 89 |             resolverRef.current(extractedXML);
 90 |             resolverRef.current = null;
 91 |         }
 92 |     };
 93 | 
 94 |     const clearDiagram = () => {
 95 |         const emptyDiagram = `<mxfile><diagram name="Page-1" id="page-1"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/></root></mxGraphModel></diagram></mxfile>`;
 96 |         loadDiagram(emptyDiagram);
 97 |         setChartXML(emptyDiagram);
 98 |         setLatestSvg("");
 99 |         setDiagramHistory([]);
100 |     };
101 | 
102 |     const importDiagramFile = (file: File) => {
103 |         const reader = new FileReader();
104 |         reader.onload = (e) => {
105 |             const content = e.target?.result as string;
106 |             if (drawioRef.current) {
107 |                 // Try to load as XML directly
108 |                 drawioRef.current.load({
109 |                     xml: content,
110 |                 });
111 |             }
112 |         };
113 |         reader.readAsText(file);
114 |     };
115 | 
116 |     const exportDiagramFile = () => {
117 |         // Trigger the export from draw.io for file export
118 |         console.log('exportDiagramFile called, setting purpose to file');
119 |         handleExport('file');
120 |     };
121 | 
122 |     return (
123 |         <DiagramContext.Provider
124 |             value={{
125 |                 chartXML,
126 |                 latestSvg,
127 |                 diagramHistory,
128 |                 loadDiagram,
129 |                 handleExport,
130 |                 resolverRef,
131 |                 drawioRef,
132 |                 handleDiagramExport,
133 |                 clearDiagram,
134 |                 importDiagramFile,
135 |                 exportDiagramFile,
136 |                 exportPurpose,
137 |             }}
138 |         >
139 |             {children}
140 |         </DiagramContext.Provider>
141 |     );
142 | }
143 | 
144 | export function useDiagram() {
145 |     const context = useContext(DiagramContext);
146 |     if (context === undefined) {
147 |         throw new Error("useDiagram must be used within a DiagramProvider");
148 |     }
149 |     return context;
150 | }


--------------------------------------------------------------------------------
/contexts/mermaid-context.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React, {
  4 |     createContext,
  5 |     useCallback,
  6 |     useContext,
  7 |     useMemo,
  8 |     useState,
  9 | } from "react";
 10 | 
 11 | const DEFAULT_DEFINITION = `graph TB
 12 |     %% ===== 房顶部分：用户接入层 =====
 13 |     Web[🌐 Web界面]:::roof
 14 |     App[📱 移动App]:::roof
 15 |     API[🔌 API接口]:::roof
 16 |     
 17 |     %% ===== 房顶装饰 =====
 18 |     Roof1[╱]:::roofDec
 19 |     Roof2[╲]:::roofDec
 20 |     
 21 |     %% ===== 二层：AI服务层（主卧室） =====
 22 |     subgraph "🏠 AI服务层"
 23 |         LLM[🧠 大语言模型<br/>GPT/LLaMA]:::aiService
 24 |         Agent[🤖 智能体框架<br/>LangChain]:::aiService
 25 |     end
 26 |     
 27 |     %% ===== 三层：数据处理层（客厅） =====
 28 |     subgraph "📊 数据处理层"
 29 |         VectorDB[🗃️ 向量数据库<br/>Pinecone]:::data
 30 |         RAG[🔍 RAG检索]:::data
 31 |     end
 32 |     
 33 |     %% ===== 四层：模型层（书房） =====
 34 |     subgraph "📚 模型管理层"
 35 |         ModelHub[🔄 模型仓库<br/>HuggingFace]:::model
 36 |         FineTune[🎯 模型微调]:::model
 37 |     end
 38 |     
 39 |     %% ===== 底层：基础设施（地基） =====
 40 |     subgraph "⚡ 基础设施层"
 41 |         GPU[🎮 GPU集群]:::infra
 42 |         K8S[🐳 Kubernetes]:::infra
 43 |     end
 44 |     
 45 |     %% ===== 左右窗户：监控评估 =====
 46 |     PromptStudio[💡 Prompt工作室]:::window
 47 |     Eval[📈 模型评估]:::window
 48 |     
 49 |     %% ===== 烟囱：外部数据 =====
 50 |     External[🌐 外部数据源]:::chimney
 51 |     
 52 |     %% ===== 房屋结构连接 =====
 53 |     %% 房顶
 54 |     Web --> Roof1
 55 |     App --> Roof1
 56 |     API --> Roof2
 57 |     Roof1 --> LLM
 58 |     Roof2 --> LLM
 59 |     
 60 |     %% 楼层连接
 61 |     LLM --> Agent
 62 |     Agent --> VectorDB
 63 |     Agent --> RAG
 64 |     VectorDB --> ModelHub
 65 |     RAG --> ModelHub
 66 |     ModelHub --> FineTune
 67 |     FineTune --> GPU
 68 |     FineTune --> K8S
 69 |     
 70 |     %% 窗户连接
 71 |     LLM --> PromptStudio
 72 |     LLM --> Eval
 73 |     
 74 |     %% 烟囱连接
 75 |     External --> VectorDB
 76 |     External --> ModelHub
 77 |     
 78 |     %% ===== 样式定义 =====
 79 |     classDef roof fill:#ff6b6b,stroke:#c44569,stroke-width:3px,color:white
 80 |     classDef roofDec fill:#ff6b6b,stroke:#c44569,stroke-width:1px,color:white
 81 |     classDef aiService fill:#74b9ff,stroke:#0984e3,stroke-width:2px,color:white
 82 |     classDef data fill:#55efc4,stroke:#00b894,stroke-width:2px,color:black
 83 |     classDef model fill:#ffeaa7,stroke:#fdcb6e,stroke-width:2px,color:black
 84 |     classDef infra fill:#dfe6e9,stroke:#b2bec3,stroke-width:2px,color:black
 85 |     classDef window fill:#a29bfe,stroke:#6c5ce7,stroke-width:2px,color:white
 86 |     classDef chimney fill:#636e72,stroke:#2d3436,stroke-width:2px,color:white
 87 | 
 88 |     %% ===== 房屋装饰元素 =====
 89 |     %% 门
 90 |     Door[🚪 MLOps平台]:::infra
 91 |     K8S --> Door
 92 |     
 93 |     %% 花园
 94 |     Garden1[🌱 数据清洗]:::window
 95 |     Garden2[🌿 文档处理]:::window
 96 |     VectorDB --> Garden1
 97 |     RAG --> Garden2
 98 | `;
 99 | 
100 | export interface MermaidHistoryEntry {
101 |     id: string;
102 |     definition: string;
103 |     summary?: string;
104 |     createdAt: number;
105 | }
106 | 
107 | interface MermaidContextValue {
108 |     definition: string;
109 |     history: MermaidHistoryEntry[];
110 |     updateDefinition: (definition: string, summary?: string) => void;
111 |     setDefinition: (definition: string) => void;
112 |     clearDefinition: () => void;
113 |     initialDefinition: string;
114 | }
115 | 
116 | const MermaidContext = createContext<MermaidContextValue | undefined>(
117 |     undefined
118 | );
119 | 
120 | function createHistoryEntry(
121 |     definition: string,
122 |     summary?: string
123 | ): MermaidHistoryEntry {
124 |     const id =
125 |         typeof crypto !== "undefined" && crypto.randomUUID
126 |             ? crypto.randomUUID()
127 |             : `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
128 | 
129 |     return {
130 |         id,
131 |         definition,
132 |         summary,
133 |         createdAt: Date.now(),
134 |     };
135 | }
136 | 
137 | export function MermaidProvider({ children }: { children: React.ReactNode }) {
138 |     const [definition, setDefinitionState] = useState(DEFAULT_DEFINITION);
139 |     const [history, setHistory] = useState<MermaidHistoryEntry[]>(() => [
140 |         createHistoryEntry(DEFAULT_DEFINITION, "Initial sample diagram"),
141 |     ]);
142 | 
143 |     const updateDefinition = useCallback(
144 |         (nextDefinition: string, summary?: string) => {
145 |             if (!nextDefinition.trim()) return;
146 |             setDefinitionState(nextDefinition);
147 |             setHistory((prev) => [
148 |                 ...prev,
149 |                 createHistoryEntry(nextDefinition, summary),
150 |             ]);
151 |         },
152 |         []
153 |     );
154 | 
155 |     const setDefinition = useCallback((nextDefinition: string) => {
156 |         setDefinitionState(nextDefinition);
157 |     }, []);
158 | 
159 |     const clearDefinition = useCallback(() => {
160 |         setDefinitionState(DEFAULT_DEFINITION);
161 |         setHistory([
162 |             createHistoryEntry(DEFAULT_DEFINITION, "Diagram reset"),
163 |         ]);
164 |     }, []);
165 | 
166 |     const value = useMemo(
167 |         () => ({
168 |             definition,
169 |             history,
170 |             updateDefinition,
171 |             setDefinition,
172 |             clearDefinition,
173 |             initialDefinition: DEFAULT_DEFINITION,
174 |         }),
175 |         [definition, history, updateDefinition, setDefinition, clearDefinition]
176 |     );
177 | 
178 |     return (
179 |         <MermaidContext.Provider value={value}>
180 |             {children}
181 |         </MermaidContext.Provider>
182 |     );
183 | }
184 | 
185 | export function useMermaid() {
186 |     const context = useContext(MermaidContext);
187 |     if (!context) {
188 |         throw new Error("useMermaid must be used within a MermaidProvider");
189 |     }
190 |     return context;
191 | }
192 | 


--------------------------------------------------------------------------------
/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as SelectPrimitive from "@radix-ui/react-select"
  5 | import { Check, ChevronDown, ChevronUp } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Select = SelectPrimitive.Root
 10 | 
 11 | const SelectGroup = SelectPrimitive.Group
 12 | 
 13 | const SelectValue = SelectPrimitive.Value
 14 | 
 15 | const SelectTrigger = React.forwardRef<
 16 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 17 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 18 | >(({ className, children, ...props }, ref) => (
 19 |   <SelectPrimitive.Trigger
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |   >
 27 |     {children}
 28 |     <SelectPrimitive.Icon asChild>
 29 |       <ChevronDown className="h-4 w-4 opacity-50" />
 30 |     </SelectPrimitive.Icon>
 31 |   </SelectPrimitive.Trigger>
 32 | ))
 33 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 34 | 
 35 | const SelectScrollUpButton = React.forwardRef<
 36 |   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
 37 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 38 | >(({ className, ...props }, ref) => (
 39 |   <SelectPrimitive.ScrollUpButton
 40 |     ref={ref}
 41 |     className={cn(
 42 |       "flex cursor-default items-center justify-center py-1",
 43 |       className
 44 |     )}
 45 |     {...props}
 46 |   >
 47 |     <ChevronUp className="h-4 w-4" />
 48 |   </SelectPrimitive.ScrollUpButton>
 49 | ))
 50 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 51 | 
 52 | const SelectScrollDownButton = React.forwardRef<
 53 |   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
 54 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 55 | >(({ className, ...props }, ref) => (
 56 |   <SelectPrimitive.ScrollDownButton
 57 |     ref={ref}
 58 |     className={cn(
 59 |       "flex cursor-default items-center justify-center py-1",
 60 |       className
 61 |     )}
 62 |     {...props}
 63 |   >
 64 |     <ChevronDown className="h-4 w-4" />
 65 |   </SelectPrimitive.ScrollDownButton>
 66 | ))
 67 | SelectScrollDownButton.displayName =
 68 |   SelectPrimitive.ScrollDownButton.displayName
 69 | 
 70 | const SelectContent = React.forwardRef<
 71 |   React.ElementRef<typeof SelectPrimitive.Content>,
 72 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 73 | >(({ className, children, position = "popper", ...props }, ref) => (
 74 |   <SelectPrimitive.Portal>
 75 |     <SelectPrimitive.Content
 76 |       ref={ref}
 77 |       className={cn(
 78 |         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 79 |         position === "popper" &&
 80 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 81 |         className
 82 |       )}
 83 |       position={position}
 84 |       {...props}
 85 |     >
 86 |       <SelectScrollUpButton />
 87 |       <SelectPrimitive.Viewport
 88 |         className={cn(
 89 |           "p-1",
 90 |           position === "popper" &&
 91 |             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
 92 |         )}
 93 |       >
 94 |         {children}
 95 |       </SelectPrimitive.Viewport>
 96 |       <SelectScrollDownButton />
 97 |     </SelectPrimitive.Content>
 98 |   </SelectPrimitive.Portal>
 99 | ))
100 | SelectContent.displayName = SelectPrimitive.Content.displayName
101 | 
102 | const SelectLabel = React.forwardRef<
103 |   React.ElementRef<typeof SelectPrimitive.Label>,
104 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
105 | >(({ className, ...props }, ref) => (
106 |   <SelectPrimitive.Label
107 |     ref={ref}
108 |     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
109 |     {...props}
110 |   />
111 | ))
112 | SelectLabel.displayName = SelectPrimitive.Label.displayName
113 | 
114 | const SelectItem = React.forwardRef<
115 |   React.ElementRef<typeof SelectPrimitive.Item>,
116 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
117 | >(({ className, children, ...props }, ref) => (
118 |   <SelectPrimitive.Item
119 |     ref={ref}
120 |     className={cn(
121 |       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
122 |       className
123 |     )}
124 |     {...props}
125 |   >
126 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
127 |       <SelectPrimitive.ItemIndicator>
128 |         <Check className="h-4 w-4" />
129 |       </SelectPrimitive.ItemIndicator>
130 |     </span>
131 | 
132 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
133 |   </SelectPrimitive.Item>
134 | ))
135 | SelectItem.displayName = SelectPrimitive.Item.displayName
136 | 
137 | const SelectSeparator = React.forwardRef<
138 |   React.ElementRef<typeof SelectPrimitive.Separator>,
139 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
140 | >(({ className, ...props }, ref) => (
141 |   <SelectPrimitive.Separator
142 |     ref={ref}
143 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
144 |     {...props}
145 |   />
146 | ))
147 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName
148 | 
149 | export {
150 |   Select,
151 |   SelectGroup,
152 |   SelectValue,
153 |   SelectTrigger,
154 |   SelectContent,
155 |   SelectLabel,
156 |   SelectItem,
157 |   SelectSeparator,
158 |   SelectScrollUpButton,
159 |   SelectScrollDownButton,
160 | }


--------------------------------------------------------------------------------
/app/api/excalidraw/route.ts:
--------------------------------------------------------------------------------
  1 | import { streamText, convertToModelMessages } from "ai";
  2 | import { z } from "zod/v3";
  3 | import { resolveModel } from "@/lib/model-provider";
  4 | 
  5 | const DEFAULT_MAX_OUTPUT_TOKENS = 12_000;
  6 | const MAX_OUTPUT_TOKENS_CAP = 24_000;
  7 | 
  8 | export const maxDuration = 60;
  9 | 
 10 | export async function POST(req: Request) {
 11 |     try {
 12 |         const { messages, scene, modelConfig } = await req.json();
 13 | 
 14 |         const systemMessage = `
 15 | You are an Excalidraw scene architect.
 16 | Your job is to translate user requests into Excalidraw scenes with elements, styling, and layout.
 17 | 
 18 | Rules for interaction:
 19 | - Always provide a brief explanation of what you're creating or modifying before using the tool
 20 | - Respond conversationally but deliver the final scene via the display_excalidraw tool
 21 | - Prefer incremental changes unless the user asks for a complete rebuild
 22 | - Keep layouts clean, well-organized, and visually balanced
 23 | - Use meaningful text labels and appropriate colors for elements
 24 | - Maintain consistent styling across related elements
 25 | 
 26 | Tool usage:
 27 | - ALWAYS include a complete object: { "elements": [...], "appState": {...}, "files": {...} }
 28 | - Provide the scene payload as a structured JSON object inside the tool call
 29 | - If unsure, reuse the current scene and apply small changes instead of rebuilding
 30 | - Keep coordinates reasonable (within a 1200x800 canvas)
 31 | - Never stream raw JSON in text replies; only send it through the tool call
 32 | - Exactly ONE display_excalidraw tool call per response
 33 | 
 34 | Refer to the Excalidraw format guide for detailed information about the scene structure:
 35 | - Elements should have proper coordinates and styling
 36 | - Use appropriate element types (rectangle, ellipse, arrow, text, etc.)
 37 | - Include descriptive text labels for elements
 38 | - Maintain consistent styling across related elements
 39 | - Use appState to define canvas properties like background color
 40 | `;
 41 | 
 42 |         const lastMessage = messages[messages.length - 1];
 43 |         const lastMessageText =
 44 |             lastMessage.parts?.find((part: any) => part.type === "text")
 45 |                 ?.text || "";
 46 |         const fileParts =
 47 |             lastMessage.parts?.filter((part: any) => part.type === "file") ||
 48 |             [];
 49 | 
 50 |         const formattedTextContent = `
 51 | Current scene JSON:
 52 | """json
 53 | ${scene || '{"elements": [], "appState": {}, "files": {}}'}
 54 | """
 55 | User input:
 56 | """md
 57 | ${lastMessageText}
 58 | """
 59 | `;
 60 | 
 61 |         const modelMessages = convertToModelMessages(messages);
 62 |         let enhancedMessages = [...modelMessages];
 63 | 
 64 |         if (enhancedMessages.length > 0) {
 65 |             const lastModelMessage = enhancedMessages[enhancedMessages.length - 1];
 66 |             if (lastModelMessage.role === "user") {
 67 |                 const contentParts: any[] = [
 68 |                     { type: "text", text: formattedTextContent },
 69 |                 ];
 70 | 
 71 |                 for (const filePart of fileParts) {
 72 |                     contentParts.push({
 73 |                         type: "image",
 74 |                         image: filePart.url,
 75 |                         mimeType: filePart.mediaType,
 76 |                     });
 77 |                 }
 78 | 
 79 |                 enhancedMessages = [
 80 |                     ...enhancedMessages.slice(0, -1),
 81 |                     { ...lastModelMessage, content: contentParts },
 82 |                 ];
 83 |             }
 84 |         }
 85 | 
 86 |         const { client, model, maxOutputTokens } = resolveModel(modelConfig);
 87 |         const outputTokenBudget = Math.min(
 88 |             Math.max(
 89 |                 2_000,
 90 |                 maxOutputTokens && Number.isFinite(maxOutputTokens)
 91 |                     ? Math.floor(maxOutputTokens)
 92 |                     : DEFAULT_MAX_OUTPUT_TOKENS
 93 |             ),
 94 |             MAX_OUTPUT_TOKENS_CAP
 95 |         );
 96 | 
 97 |         const result = streamText({
 98 |             system: systemMessage,
 99 |             model: client.chat(model),
100 |             messages: enhancedMessages,
101 |             temperature: 0,
102 |             maxOutputTokens: outputTokenBudget,
103 |             tools: {
104 |                 display_excalidraw: {
105 |                     description:
106 |                         "Render an Excalidraw scene by supplying a structured scene payload.",
107 |                     inputSchema: z.object({
108 |                         scene: z.object({
109 |                             elements: z
110 |                                 .array(z.record(z.any()))
111 |                                 .describe(
112 |                                     "List of Excalidraw elements with coordinates, styles, etc."
113 |                                 ),
114 |                             appState: z
115 |                                 .record(z.any())
116 |                                 .describe("Excalidraw appState object")
117 |                                 .optional()
118 |                                 .default({}),
119 |                             files: z
120 |                                 .record(z.any())
121 |                                 .describe("Files map keyed by element ids")
122 |                                 .optional()
123 |                                 .default({}),
124 |                         }),
125 |                         summary: z
126 |                             .string()
127 |                             .optional()
128 |                             .describe(
129 |                                 "Optional short description of what changed"
130 |                             ),
131 |                     }),
132 |                 },
133 |             },
134 |         });
135 | 
136 |         function errorHandler(error: unknown) {
137 |             if (error == null) {
138 |                 return "unknown error";
139 |             }
140 |             if (typeof error === "string") {
141 |                 return error;
142 |             }
143 |             if (error instanceof Error) {
144 |                 return error.message;
145 |             }
146 |             return JSON.stringify(error);
147 |         }
148 | 
149 |         return result.toUIMessageStreamResponse({
150 |             onError: errorHandler,
151 |         });
152 |     } catch (error) {
153 |         console.error("Error in excalidraw route:", error);
154 |         return Response.json(
155 |             { error: "Internal server error" },
156 |             { status: 500 }
157 |         );
158 |     }
159 | }
160 | 


--------------------------------------------------------------------------------
/components/plantuml-definition-card.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useEffect, useState } from "react";
  4 | import { Button } from "@/components/ui/button";
  5 | import { Textarea } from "@/components/ui/textarea";
  6 | import {ClipboardCopy, ClipboardCheck, RefreshCcw, ChevronsDown, ChevronsUp, Copy} from "lucide-react";
  7 | import { cn } from "@/lib/utils";
  8 | 
  9 | interface PlantUMLDefinitionCardProps {
 10 |     definition: string;
 11 |     onDefinitionChange?: (definition: string) => void;
 12 |     onReset?: () => void;
 13 |     isCollapsed?: boolean;
 14 |     onToggle?: () => void;
 15 | }
 16 | 
 17 | export function PlantUMLDefinitionCard({
 18 |     definition,
 19 |     onDefinitionChange,
 20 |     onReset,
 21 |     isCollapsed,
 22 |     onToggle,
 23 | }: PlantUMLDefinitionCardProps) {
 24 |     const [copied, setCopied] = useState(false);
 25 |     const [isResetting, setIsResetting] = useState(false);
 26 | 
 27 |     useEffect(() => {
 28 |         if (!copied) return;
 29 |         const timer = setTimeout(() => setCopied(false), 1500);
 30 |         return () => clearTimeout(timer);
 31 |     }, [copied]);
 32 | 
 33 |     const handleCopy = async () => {
 34 |         if (!definition) return;
 35 |         await copyToClipboard(definition);
 36 |         setCopied(true);
 37 |     };
 38 |     
 39 |     const handleReset = () => {
 40 |         if (onReset) {
 41 |             setIsResetting(true);
 42 |             onReset();
 43 |             // 添加一个短暂的延迟来显示重置动画效果
 44 |             setTimeout(() => setIsResetting(false), 300);
 45 |         }
 46 |     };
 47 | 
 48 |     return (
 49 |         <div className="bg-white rounded-lg border shadow-sm flex flex-col h-full">
 50 |             <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/50">
 51 |                 <div>
 52 |                     <p className="text-sm font-medium">PlantUML 定义</p>
 53 |                     <p className="text-xs text-muted-foreground">
 54 |                         由 <a href=" https://www.plantuml.com" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline"> https://www.plantuml.com</a> 提供支持
 55 |                     </p>
 56 |                 </div>
 57 |                 <div className="flex gap-1 items-center">
 58 |                     {onToggle && (
 59 |                         <Button
 60 |                             type="button"
 61 |                             variant="outline"
 62 |                             size="sm"
 63 |                             onClick={onToggle}
 64 |                             title="折叠"
 65 |                             aria-label={isCollapsed ? "Expand panel" : "Collapse panel"}
 66 |                         >
 67 |                             {isCollapsed ? (
 68 |                                 <ChevronsUp className="h-4 w-4" />
 69 |                             ) : (
 70 |                                 <ChevronsDown className="h-4 w-4" />
 71 |                             )}
 72 |                         </Button>
 73 |                     )}
 74 |                     {onReset && (
 75 |                         <Button
 76 |                             type="button"
 77 |                             size="sm"
 78 |                             variant="outline"
 79 |                             onClick={handleReset}
 80 |                             title="重置"
 81 |                             disabled={!definition}
 82 |                             className={cn(
 83 |                                 "transition-all duration-300",
 84 |                                 isResetting && "bg-blue-500 text-white border-blue-500"
 85 |                             )}
 86 |                         >
 87 |                             <RefreshCcw className={cn(
 88 |                                 "h-4 w-4",
 89 |                                 isResetting && "animate-spin"
 90 |                             )} />
 91 |                         </Button>
 92 |                     )}
 93 |                     <Button
 94 |                         type="button"
 95 |                         size="sm"
 96 |                         variant="outline"
 97 |                         onClick={handleCopy}
 98 |                         title="复制"
 99 |                         disabled={!definition}
100 |                     >
101 |                         {copied ? (
102 |                             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4">
103 |                                 <polyline points="20 6 9 17 4 12"/>
104 |                             </svg>
105 |                         ) : (
106 |                             <Copy className="h-4 w-4" />
107 |                         )}
108 |                     </Button>
109 |                 </div>
110 |             </div>
111 |             {!isCollapsed && (
112 |                 <div className="flex-1 bg-muted/10 flex flex-col overflow-hidden">
113 |                     <Textarea
114 |                         value={definition}
115 |                         onChange={(event) => onDefinitionChange?.(event.target.value)}
116 |                         placeholder="Describe a diagram or type PlantUML directly..."
117 |                         className="flex-1 min-h-0 text-xs resize-none bg-white/70 focus-visible:ring-2 overflow-auto"
118 |                         spellCheck={false}
119 |                         disabled={!onDefinitionChange}
120 |                     />
121 |                 </div>
122 |             )}
123 |         </div>
124 |     );
125 | }
126 | 
127 | /**
128 |  * 安全复制文本到剪贴板（TypeScript 版本）
129 |  * 兼容现代剪贴板 API 和降级方案
130 |  * @param {string} text - 需要复制的文本
131 |  * @returns {Promise<boolean>} - 是否复制成功
132 |  */
133 | export const copyToClipboard = async (text: string): Promise<boolean> => {
134 |     try {
135 |         // 尝试使用现代剪贴板 API
136 |         if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
137 |             await navigator.clipboard.writeText(text);
138 |             return true;
139 |         }
140 | 
141 |         // 降级兼容方案：使用 document.execCommand
142 |         const textarea = document.createElement('textarea');
143 |         textarea.value = text;
144 |         textarea.style.position = 'fixed';
145 |         textarea.style.opacity = '0';
146 |         document.body.appendChild(textarea);
147 |         textarea.select();
148 | 
149 |         const success = document.execCommand('copy');
150 |         document.body.removeChild(textarea);
151 | 
152 |         if (!success) {
153 |             throw new Error('复制失败');
154 |         }
155 |         return true;
156 |     } catch (error) {
157 |         console.error('复制失败:', error);
158 |         return false;
159 |     }
160 | };


--------------------------------------------------------------------------------
/app/api/kroki/route.ts:
--------------------------------------------------------------------------------
  1 | import { streamText, convertToModelMessages } from "ai";
  2 | import { z } from "zod/v3";
  3 | import { resolveModel } from "@/lib/model-provider";
  4 | 
  5 | export const maxDuration = 60;
  6 | 
  7 | export async function POST(req: Request) {
  8 |     try {
  9 |         const { messages, definition, modelConfig } = await req.json();
 10 | 
 11 |         const systemMessage = `
 12 | You are an expert diagram assistant that can work with various diagram formats supported by Kroki (https://kroki.io).
 13 | Your job is to translate user intent into clean, well-organized diagram syntax for any of the supported formats.
 14 | 
 15 | Kroki supports exactly 28 diagram formats:
 16 | 
 17 | 1. PlantUML - for UML diagrams, activity diagrams, sequence diagrams, etc.
 18 | 2. Mermaid - for flowcharts, sequence diagrams, Gantt charts, etc.
 19 | 3. BPMN - for business process modeling
 20 | 4. Graphviz (DOT) - for graph visualization
 21 | 5. BlockDiag - for block diagrams
 22 | 6. SeqDiag - for sequence diagrams
 23 | 7. ActDiag - for activity diagrams
 24 | 8. NwDiag - for network diagrams
 25 | 9. C4-PlantUML - for software architecture diagrams
 26 | 10. Ditaa - for ascii-to-image conversion
 27 | 11. Erd - for entity relationship diagrams
 28 | 12. Excalidraw - for hand-drawn like sketches
 29 | 13. Nomnoml - for nomnoml diagrams
 30 | 14. Pikchr - for pikchr diagrams
 31 | 15. Structurizr - for software architecture diagrams
 32 | 16. Svgbob - for ascii-to-svg conversion
 33 | 17. Umlet - for UML diagrams
 34 | 18. Vega - for data visualizations
 35 | 19. Vega-Lite - for data visualizations
 36 | 20. WaveDrom - for waveform diagrams
 37 | 21. Bytefield - for binary data field diagrams
 38 | 22. D2 - for modern diagram scripting language
 39 | 23. DBML - for database markup language
 40 | 24. Symbolator - for HDL component diagrams
 41 | 25. TikZ - for LaTeX-based diagrams
 42 | 26. WireViz - for cable and connector documentation
 43 | 27. PacketDiag - for packet diagrams
 44 | 28. RackDiag - for rack diagrams
 45 | 
 46 | Rules of engagement:
 47 | - Always reason about the provided "Current diagram definition" before replying.
 48 | - Respond conversationally but deliver the final code via the display_kroki tool.
 49 | - Prefer incremental edits unless the user asks to rebuild from scratch.
 50 | - Keep labels concise, ensure indentation is consistent, and add helpful comments sparingly.
 51 | - Never return diagram code directly in text responses.
 52 | 
 53 | Tool contract:
 54 | - You must trigger exactly one display_kroki tool call per assistant turn.
 55 | - Include the full diagram definition inside that tool call.
 56 | - Optionally include a short summary describing the key changes.
 57 | 
 58 | When creating diagrams:
 59 | - Choose the most appropriate format for the user's needs
 60 | - For business process diagrams, use BPMN
 61 | - For software architecture, consider C4-PlantUML or Structurizr
 62 | - For data visualizations, use Vega or Vega-Lite
 63 | - For general flowcharts, use PlantUML or Mermaid
 64 | - For network diagrams, use Graphviz or NwDiag
 65 | `;
 66 | 
 67 |         const lastMessage = messages[messages.length - 1];
 68 |         const lastMessageText =
 69 |             lastMessage.parts?.find((part: any) => part.type === "text")
 70 |                 ?.text || "";
 71 |         const fileParts =
 72 |             lastMessage.parts?.filter((part: any) => part.type === "file") ||
 73 |             [];
 74 | 
 75 |         const formattedTextContent = `
 76 | Current diagram definition:
 77 | """diagram
 78 | ${definition || "@startuml\nAlice -> Bob: Hello\n@enduml"}
 79 | """
 80 | User input:
 81 | """md
 82 | ${lastMessageText}
 83 | """
 84 | `;
 85 | 
 86 |         const modelMessages = convertToModelMessages(messages);
 87 |         let enhancedMessages = [...modelMessages];
 88 | 
 89 |         if (enhancedMessages.length > 0) {
 90 |             const lastModelMessage = enhancedMessages[enhancedMessages.length - 1];
 91 |             if (lastModelMessage.role === "user") {
 92 |                 const contentParts: any[] = [
 93 |                     { type: "text", text: formattedTextContent },
 94 |                 ];
 95 | 
 96 |                 for (const filePart of fileParts) {
 97 |                     contentParts.push({
 98 |                         type: "image",
 99 |                         image: filePart.url,
100 |                         mimeType: filePart.mediaType,
101 |                     });
102 |                 }
103 | 
104 |                 enhancedMessages = [
105 |                     ...enhancedMessages.slice(0, -1),
106 |                     { ...lastModelMessage, content: contentParts },
107 |                 ];
108 |             }
109 |         }
110 | 
111 |         const { client, model } = resolveModel(modelConfig);
112 | 
113 |         const result = streamText({
114 |             system: systemMessage,
115 |             model: client.chat(model),
116 |             messages: enhancedMessages,
117 |             temperature: 0.2,
118 |             tools: {
119 |                 display_kroki: {
120 |                     description:
121 |                         "Render a diagram using Kroki by providing the full definition.",
122 |                     inputSchema: z.object({
123 |                         definition: z
124 |                             .string()
125 |                             .describe(
126 |                                 "Complete diagram definition for the diagram"
127 |                             ),
128 |                         summary: z
129 |                             .string()
130 |                             .optional()
131 |                             .describe(
132 |                                 "Optional short explanation of what changed"
133 |                             ),
134 |                         diagramType: z
135 |                             .string()
136 |                             .optional()
137 |                             .describe(
138 |                                 "The type of diagram being generated (e.g., plantuml, mermaid, graphviz, etc.)"
139 |                             ),
140 |                     }),
141 |                 },
142 |             },
143 |         });
144 | 
145 |         function errorHandler(error: unknown) {
146 |             if (error == null) {
147 |                 return "unknown error";
148 |             }
149 |             if (typeof error === "string") {
150 |                 return error;
151 |             }
152 |             if (error instanceof Error) {
153 |                 return error.message;
154 |             }
155 |             return JSON.stringify(error);
156 |         }
157 | 
158 |         return result.toUIMessageStreamResponse({
159 |             onError: errorHandler,
160 |         });
161 |     } catch (error) {
162 |         console.error("Error in kroki route:", error);
163 |         return Response.json(
164 |             { error: "Internal server error" },
165 |             { status: 500 }
166 |         );
167 |     }
168 | }


--------------------------------------------------------------------------------
/contexts/model-config-context.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
  4 | 
  5 | export interface ModelConfig {
  6 |     apiKey?: string;
  7 |     baseUrl?: string;
  8 |     model?: string;
  9 |     maxOutputTokens?: number;
 10 | }
 11 | 
 12 | export interface ModelProfile {
 13 |     id: string;
 14 |     name: string;
 15 |     config: ModelConfig;
 16 | }
 17 | 
 18 | interface ModelConfigContextValue {
 19 |     config: ModelConfig; // active profile config (backward compatible)
 20 |     profiles: ModelProfile[];
 21 |     activeProfileId: string;
 22 |     activeProfile: ModelProfile;
 23 |     setActiveProfile: (id: string) => void;
 24 |     setConfig: (value: ModelConfig) => void;
 25 |     updateConfig: (value: Partial<ModelConfig>) => void;
 26 |     createProfile: (name?: string) => void;
 27 |     renameProfile: (id: string, name: string) => void;
 28 |     deleteProfile: (id: string) => void;
 29 |     reset: () => void;
 30 | }
 31 | 
 32 | const STORAGE_KEY = "ai-model-config-v2";
 33 | const LEGACY_STORAGE_KEY = "ai-model-config";
 34 | 
 35 | export const defaultModelConfig: ModelConfig = {
 36 |     apiKey: "",
 37 |     baseUrl: "",
 38 |     model: "",
 39 |     maxOutputTokens: undefined,
 40 | };
 41 | 
 42 | const defaultProfile: ModelProfile = {
 43 |     id: "default",
 44 |     name: "默认配置",
 45 |     config: defaultModelConfig,
 46 | };
 47 | 
 48 | const ModelConfigContext = createContext<ModelConfigContextValue | undefined>(undefined);
 49 | 
 50 | function generateId() {
 51 |     return `profile-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
 52 | }
 53 | 
 54 | export function ModelConfigProvider({ children }: { children: React.ReactNode }) {
 55 |     const [profiles, setProfiles] = useState<ModelProfile[]>([defaultProfile]);
 56 |     const [activeProfileId, setActiveProfileId] = useState<string>(defaultProfile.id);
 57 | 
 58 |     // Load from localStorage on mount
 59 |     useEffect(() => {
 60 |         try {
 61 |             const stored = localStorage.getItem(STORAGE_KEY);
 62 |             if (stored) {
 63 |                 const parsed = JSON.parse(stored) as {
 64 |                     profiles: ModelProfile[];
 65 |                     activeProfileId: string;
 66 |                 };
 67 |                 if (parsed?.profiles?.length) {
 68 |                     setProfiles(parsed.profiles);
 69 |                     setActiveProfileId(parsed.activeProfileId || parsed.profiles[0].id);
 70 |                     return;
 71 |                 }
 72 |             }
 73 | 
 74 |             // migrate legacy single config if exists
 75 |             const legacy = localStorage.getItem(LEGACY_STORAGE_KEY);
 76 |             if (legacy) {
 77 |                 const parsedLegacy = JSON.parse(legacy) as ModelConfig;
 78 |                 const migrated: ModelProfile = {
 79 |                     ...defaultProfile,
 80 |                     config: { ...defaultModelConfig, ...parsedLegacy },
 81 |                 };
 82 |                 setProfiles([migrated]);
 83 |                 setActiveProfileId(migrated.id);
 84 |             }
 85 |         } catch (error) {
 86 |             console.warn("Failed to load model config from storage", error);
 87 |         }
 88 |     }, []);
 89 | 
 90 |     // Persist to localStorage whenever profiles or activeProfileId changes
 91 |     useEffect(() => {
 92 |         try {
 93 |             localStorage.setItem(
 94 |                 STORAGE_KEY,
 95 |                 JSON.stringify({ profiles, activeProfileId })
 96 |             );
 97 |         } catch (error) {
 98 |             console.warn("Failed to save model config to storage", error);
 99 |         }
100 |     }, [profiles, activeProfileId]);
101 | 
102 |     const activeProfile = useMemo(() => {
103 |         return profiles.find((p) => p.id === activeProfileId) || profiles[0];
104 |     }, [profiles, activeProfileId]);
105 | 
106 |     const value = useMemo<ModelConfigContextValue>(() => {
107 |         const updateProfileList = (updater: (prev: ModelProfile[]) => ModelProfile[]) => {
108 |             setProfiles((prev) => updater(prev));
109 |         };
110 | 
111 |         return {
112 |             config: activeProfile?.config || defaultModelConfig,
113 |             profiles,
114 |             activeProfileId: activeProfile?.id || defaultProfile.id,
115 |             activeProfile: activeProfile || defaultProfile,
116 |             setActiveProfile: (id) => setActiveProfileId(id),
117 |             setConfig: (value) => {
118 |                 updateProfileList((prev) =>
119 |                     prev.map((p) =>
120 |                         p.id === (activeProfile?.id || defaultProfile.id)
121 |                             ? { ...p, config: value }
122 |                             : p
123 |                     )
124 |                 );
125 |             },
126 |             updateConfig: (value) => {
127 |                 updateProfileList((prev) =>
128 |                     prev.map((p) =>
129 |                         p.id === (activeProfile?.id || defaultProfile.id)
130 |                             ? { ...p, config: { ...p.config, ...value } }
131 |                             : p
132 |                     )
133 |                 );
134 |             },
135 |             createProfile: (name) => {
136 |                 const newProfile: ModelProfile = {
137 |                     id: generateId(),
138 |                     name: name?.trim() || `配置${profiles.length + 1}`,
139 |                     config: activeProfile?.config ? { ...activeProfile.config } : defaultModelConfig,
140 |                 };
141 |                 setProfiles((prev) => [...prev, newProfile]);
142 |                 setActiveProfileId(newProfile.id);
143 |             },
144 |             renameProfile: (id, name) => {
145 |                 const nextName = name.trim() || "未命名配置";
146 |                 updateProfileList((prev) =>
147 |                     prev.map((p) => (p.id === id ? { ...p, name: nextName } : p))
148 |                 );
149 |             },
150 |             deleteProfile: (id) => {
151 |                 if (profiles.length <= 1) return; // keep at least one profile
152 |                 const nextProfiles = profiles.filter((p) => p.id !== id);
153 |                 setProfiles(nextProfiles);
154 |                 if (id === activeProfileId) {
155 |                     setActiveProfileId(nextProfiles[0].id);
156 |                 }
157 |             },
158 |             reset: () => {
159 |                 setProfiles([defaultProfile]);
160 |                 setActiveProfileId(defaultProfile.id);
161 |             },
162 |         };
163 |     }, [activeProfile, activeProfileId, profiles]);
164 | 
165 |     return (
166 |         <ModelConfigContext.Provider value={value}>
167 |             {children}
168 |         </ModelConfigContext.Provider>
169 |     );
170 | }
171 | 
172 | export function useModelConfig() {
173 |     const ctx = useContext(ModelConfigContext);
174 |     if (!ctx) {
175 |         throw new Error("useModelConfig must be used within a ModelConfigProvider");
176 |     }
177 |     return ctx;
178 | }
179 | 


--------------------------------------------------------------------------------
/lib/ai-providers.ts:
--------------------------------------------------------------------------------
  1 | import { bedrock } from '@ai-sdk/amazon-bedrock';
  2 | import { openai, createOpenAI } from '@ai-sdk/openai';
  3 | import { createAnthropic } from '@ai-sdk/anthropic';
  4 | import { google, createGoogleGenerativeAI } from '@ai-sdk/google';
  5 | import { azure, createAzure } from '@ai-sdk/azure';
  6 | import { ollama, createOllama } from 'ollama-ai-provider-v2';
  7 | import { createOpenRouter } from '@openrouter/ai-sdk-provider';
  8 | import { deepseek, createDeepSeek } from '@ai-sdk/deepseek';
  9 | 
 10 | export type ProviderName =
 11 |     | 'bedrock'
 12 |     | 'openai'
 13 |     | 'anthropic'
 14 |     | 'google'
 15 |     | 'azure'
 16 |     | 'ollama'
 17 |     | 'openrouter'
 18 |     | 'deepseek';
 19 | 
 20 | interface ModelConfig {
 21 |     model: any;
 22 |     providerOptions?: any;
 23 |     headers?: Record<string, string>;
 24 | }
 25 | 
 26 | // Bedrock provider options for Anthropic beta features
 27 | const BEDROCK_ANTHROPIC_BETA = {
 28 |     bedrock: {
 29 |         anthropicBeta: ['fine-grained-tool-streaming-2025-05-14'],
 30 |     },
 31 | };
 32 | 
 33 | // Direct Anthropic API headers for beta features
 34 | const ANTHROPIC_BETA_HEADERS = {
 35 |     'anthropic-beta': 'fine-grained-tool-streaming-2025-05-14',
 36 | };
 37 | 
 38 | /**
 39 |  * Validate that required API keys are present for the selected provider
 40 |  */
 41 | function validateProviderCredentials(provider: ProviderName): void {
 42 |     const requiredEnvVars: Record<ProviderName, string | null> = {
 43 |         bedrock: 'AWS_ACCESS_KEY_ID',
 44 |         openai: 'OPENAI_API_KEY',
 45 |         anthropic: 'ANTHROPIC_API_KEY',
 46 |         google: 'GOOGLE_GENERATIVE_AI_API_KEY',
 47 |         azure: 'AZURE_API_KEY',
 48 |         ollama: null, // No credentials needed for local Ollama
 49 |         openrouter: 'OPENROUTER_API_KEY',
 50 |         deepseek: 'DEEPSEEK_API_KEY',
 51 |     };
 52 | 
 53 |     const requiredVar = requiredEnvVars[provider];
 54 |     if (requiredVar && !process.env[requiredVar]) {
 55 |         throw new Error(
 56 |             `${requiredVar} environment variable is required for ${provider} provider. ` +
 57 |             `Please set it in your .env.local file.`
 58 |         );
 59 |     }
 60 | }
 61 | 
 62 | /**
 63 |  * Get the AI model based on environment variables
 64 |  *
 65 |  * Environment variables:
 66 |  * - AI_PROVIDER: The provider to use (bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek)
 67 |  * - AI_MODEL: The model ID/name for the selected provider
 68 |  *
 69 |  * Provider-specific env vars:
 70 |  * - OPENAI_API_KEY: OpenAI API key
 71 |  * - OPENAI_BASE_URL: Custom OpenAI-compatible endpoint (optional)
 72 |  * - ANTHROPIC_API_KEY: Anthropic API key
 73 |  * - GOOGLE_GENERATIVE_AI_API_KEY: Google API key
 74 |  * - AZURE_RESOURCE_NAME, AZURE_API_KEY: Azure OpenAI credentials
 75 |  * - AWS_REGION, AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY: AWS Bedrock credentials
 76 |  * - OLLAMA_BASE_URL: Ollama server URL (optional, defaults to http://localhost:11434)
 77 |  * - OPENROUTER_API_KEY: OpenRouter API key
 78 |  * - DEEPSEEK_API_KEY: DeepSeek API key
 79 |  * - DEEPSEEK_BASE_URL: DeepSeek endpoint (optional)
 80 |  */
 81 | export function getAIModel(): ModelConfig {
 82 |     const provider = (process.env.AI_PROVIDER || 'bedrock') as ProviderName;
 83 |     const modelId = process.env.AI_MODEL;
 84 | 
 85 |     if (!modelId) {
 86 |         throw new Error(
 87 |             `AI_MODEL environment variable is required. Example: AI_MODEL=claude-sonnet-4-5`
 88 |         );
 89 |     }
 90 | 
 91 |     // Validate provider credentials
 92 |     validateProviderCredentials(provider);
 93 | 
 94 |     // Log initialization for debugging
 95 |     console.log(`[AI Provider] Initializing ${provider} with model: ${modelId}`);
 96 | 
 97 |     let model: any;
 98 |     let providerOptions: any = undefined;
 99 |     let headers: Record<string, string> | undefined = undefined;
100 | 
101 |     switch (provider) {
102 |         case 'bedrock':
103 |             model = bedrock(modelId);
104 |             // Add Anthropic beta options if using Claude models via Bedrock
105 |             if (modelId.includes('anthropic.claude')) {
106 |                 providerOptions = BEDROCK_ANTHROPIC_BETA;
107 |             }
108 |             break;
109 | 
110 |         case 'openai':
111 |             if (process.env.OPENAI_BASE_URL) {
112 |                 const customOpenAI = createOpenAI({
113 |                     apiKey: process.env.OPENAI_API_KEY,
114 |                     baseURL: process.env.OPENAI_BASE_URL,
115 |                 });
116 |                 model = customOpenAI.chat(modelId);
117 |             } else {
118 |                 model = openai(modelId);
119 |             }
120 |             break;
121 | 
122 |         case 'anthropic':
123 |             const customProvider = createAnthropic({
124 |                 apiKey: process.env.ANTHROPIC_API_KEY,
125 |                 baseURL: process.env.ANTHROPIC_BASE_URL || 'https://api.anthropic.com/v1',
126 |                 headers: ANTHROPIC_BETA_HEADERS,
127 |             });
128 |             model = customProvider(modelId);
129 |             // Add beta headers for fine-grained tool streaming
130 |             headers = ANTHROPIC_BETA_HEADERS;
131 |             break;
132 | 
133 |         case 'google':
134 |             if (process.env.GOOGLE_BASE_URL) {
135 |                 const customGoogle = createGoogleGenerativeAI({
136 |                     apiKey: process.env.GOOGLE_GENERATIVE_AI_API_KEY,
137 |                     baseURL: process.env.GOOGLE_BASE_URL,
138 |                 });
139 |                 model = customGoogle(modelId);
140 |             } else {
141 |                 model = google(modelId);
142 |             }
143 |             break;
144 | 
145 |         case 'azure':
146 |             if (process.env.AZURE_BASE_URL) {
147 |                 const customAzure = createAzure({
148 |                     apiKey: process.env.AZURE_API_KEY,
149 |                     baseURL: process.env.AZURE_BASE_URL,
150 |                 });
151 |                 model = customAzure(modelId);
152 |             } else {
153 |                 model = azure(modelId);
154 |             }
155 |             break;
156 | 
157 |         case 'ollama':
158 |             if (process.env.OLLAMA_BASE_URL) {
159 |                 const customOllama = createOllama({
160 |                     baseURL: process.env.OLLAMA_BASE_URL,
161 |                 });
162 |                 model = customOllama(modelId);
163 |             } else {
164 |                 model = ollama(modelId);
165 |             }
166 |             break;
167 | 
168 |         case 'openrouter':
169 |             const openrouter = createOpenRouter({
170 |                 apiKey: process.env.OPENROUTER_API_KEY,
171 |                 ...(process.env.OPENROUTER_BASE_URL && { baseURL: process.env.OPENROUTER_BASE_URL }),
172 |             });
173 |             model = openrouter(modelId);
174 |             break;
175 | 
176 |         case 'deepseek':
177 |             if (process.env.DEEPSEEK_BASE_URL) {
178 |                 const customDeepSeek = createDeepSeek({
179 |                     apiKey: process.env.DEEPSEEK_API_KEY,
180 |                     baseURL: process.env.DEEPSEEK_BASE_URL,
181 |                 });
182 |                 model = customDeepSeek(modelId);
183 |             } else {
184 |                 model = deepseek(modelId);
185 |             }
186 |             break;
187 | 
188 |         default:
189 |             throw new Error(
190 |                 `Unknown AI provider: ${provider}. Supported providers: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek`
191 |             );
192 |     }
193 | 
194 |     // Log if provider options or headers are being applied
195 |     if (providerOptions || headers) {
196 |         console.log('[AI Provider] Applying provider-specific options/headers');
197 |     }
198 | 
199 |     return { model, providerOptions, headers };
200 | }


--------------------------------------------------------------------------------
/app/api/kroki/render/route.ts:
--------------------------------------------------------------------------------
  1 | "use server";
  2 | 
  3 | import {Buffer} from "node:buffer";
  4 | import {NextRequest, NextResponse} from "next/server";
  5 | 
  6 | // Default to kroki.io
  7 | const DEFAULT_RENDERER = process.env.KROKI_RENDER_BASE?.replace(/\/$/, "") || "http://vg.007988.xyz:8000";
  8 | 
  9 | // Supported diagram types and their endpoints
 10 | // Reference: https://kroki.io/#support
 11 | const DIAGRAM_TYPES: Record<string, string> = {
 12 |     "actdiag": "actdiag",
 13 |     "blockdiag": "blockdiag",
 14 |     "bpmn": "bpmn",
 15 |     "bytefield": "bytefield",
 16 |     "c4plantuml": "c4plantuml",
 17 |     "ditaa": "ditaa",
 18 |     "erd": "erd",
 19 |     "excalidraw": "excalidraw",
 20 |     "graphviz": "graphviz",
 21 |     "mermaid": "mermaid",
 22 |     "nomnoml": "nomnoml",
 23 |     "nwdiag": "nwdiag",
 24 |     "packetdiag": "packetdiag",
 25 |     "pikchr": "pikchr",
 26 |     "plantuml": "plantuml",
 27 |     "rackdiag": "rackdiag",
 28 |     "seqdiag": "seqdiag",
 29 |     "structurizr": "structurizr",
 30 |     "svgbob": "svgbob",
 31 |     "umlet": "umlet",
 32 |     "vega": "vega",
 33 |     "d2": "d2",
 34 |     "dbml": "dbml",
 35 |     "tikz": "tikz",
 36 |     "vegalite": "vegalite",
 37 |     "wavedrom": "wavedrom",
 38 |     "wireviz": "wireviz",
 39 |     "symbolator": "symbolator",
 40 | };
 41 | 
 42 | function detectDiagramType(definition: string): string {
 43 |     const trimmed = definition.trim().toLowerCase();
 44 |     
 45 |     // First check if the definition starts with an explicit diagram type marker
 46 |     for (const [marker, type] of Object.entries(DIAGRAM_TYPES)) {
 47 |         const directMarker = marker.toLowerCase();
 48 |         if (trimmed.startsWith(directMarker)) {
 49 |             // Skip the marker line and any empty lines after it when determining the actual diagram type
 50 |             const lines = definition.trim().split('\n');
 51 |             let startIndex = 1; // Skip the first line which is the marker
 52 |             while (startIndex < lines.length && lines[startIndex].trim() === '') {
 53 |                 startIndex++; // Skip empty lines after marker
 54 |             }
 55 |             
 56 |             // If we have content after the marker, use that to determine the real type
 57 |             if (startIndex < lines.length) {
 58 |                 const contentAfterMarker = lines.slice(startIndex).join('\n');
 59 |                 return detectActualDiagramType(contentAfterMarker, type);
 60 |             }
 61 |             
 62 |             // If no content after marker, return the marker type
 63 |             return type;
 64 |         }
 65 |     }
 66 |     
 67 |     // If no explicit marker, try to detect from content
 68 |     return detectActualDiagramType(definition, "plantuml");
 69 | }
 70 | 
 71 | function detectActualDiagramType(definition: string, defaultType: string): string {
 72 |     const trimmed = definition.trim();
 73 |     if (!trimmed) return defaultType;
 74 |     
 75 |     // Check for specific content patterns to identify diagram types
 76 |     if (trimmed.includes('@startuml') || trimmed.includes('skinparam')) {
 77 |         return "plantuml";
 78 |     }
 79 |     if (trimmed.includes('graph ') && (trimmed.includes('{') || trimmed.includes('->'))) {
 80 |         return "graphviz";
 81 |     }
 82 |     if (trimmed.includes('graph') && trimmed.includes('TD') || trimmed.includes('LR') || trimmed.includes('BT') || trimmed.includes('RL')) {
 83 |         return "mermaid";
 84 |     }
 85 |     if (trimmed.includes('blockdiag') || trimmed.includes('->') && trimmed.includes(';') && !trimmed.includes('@startuml')) {
 86 |         return "blockdiag";
 87 |     }
 88 |     if (trimmed.includes('seqdiag') && trimmed.includes('->')) {
 89 |         return "seqdiag";
 90 |     }
 91 |     if (trimmed.includes('actdiag')) {
 92 |         return "actdiag";
 93 |     }
 94 |     if (trimmed.includes('nwdiag')) {
 95 |         return "nwdiag";
 96 |     }
 97 |     if (trimmed.includes('packetdiag')) {
 98 |         return "packetdiag";
 99 |     }
100 |     if (trimmed.includes('rackdiag')) {
101 |         return "rackdiag";
102 |     }
103 |     if (trimmed.includes('bytefield') || trimmed.includes('(defattrs') || trimmed.includes('(defn') || trimmed.includes('draw-box')) {
104 |         return "bytefield";
105 |     }
106 |     if (trimmed.includes('<?xml') && trimmed.includes('semantic:definitions')) {
107 |         return "bpmn";
108 |     }
109 |     if (trimmed.includes('|') && trimmed.includes('--') && trimmed.includes('==') && !trimmed.includes('{')) {
110 |         return "erd";
111 |     }
112 |     if (trimmed.includes('d2 Parser') || trimmed.includes('shape:') || (trimmed.includes(':') && trimmed.includes('{') && trimmed.includes('}'))) {
113 |         return "d2";
114 |     }
115 |     
116 |     // Default to the provided default type if no specific patterns are found
117 |     return defaultType;
118 | }
119 | 
120 | function encodeDiagram(definition: string): string {
121 |     // Encode in deflate + base64 format as expected by Kroki
122 |     const zlib = require('zlib');
123 |     const buffer = Buffer.from(definition, 'utf8');
124 |     const compressed = zlib.deflateSync(buffer);
125 |     return Buffer.from(compressed).toString('base64').replace(/\+/g, '-').replace(/\//g, '_');
126 | }
127 | 
128 | export async function POST(request: NextRequest) {
129 |     let definition: string | undefined;
130 |     let diagramType: string | undefined;
131 | 
132 |     try {
133 |         const body = await request.json();
134 |         definition = body?.definition;
135 |         diagramType = body?.diagramType;
136 |     } catch {
137 |         return NextResponse.json(
138 |             {error: "Invalid request body. Expected JSON with a definition field."},
139 |             {status: 400}
140 |         );
141 |     }
142 | 
143 |     if (!definition || !definition.trim()) {
144 |         return NextResponse.json(
145 |             {error: "Diagram definition cannot be empty."},
146 |             {status: 400}
147 |         );
148 |     }
149 | 
150 |     // Use provided diagram type or auto-detect if not specified or set to "auto"
151 |     const finalDiagramType = (diagramType && diagramType !== "auto")
152 |         ? diagramType
153 |         : detectDiagramType(definition);
154 | 
155 |     const encoded = encodeDiagram(definition);
156 |     const renderer = DEFAULT_RENDERER;
157 |     const url = `${renderer}/${finalDiagramType}/svg/${encoded}`;
158 | 
159 |     try {
160 |         const response = await fetch(url, {
161 |             method: 'GET',
162 |             headers: {
163 |                 'Accept': 'image/svg+xml',
164 |             },
165 |             cache: "no-store",
166 |         });
167 | 
168 |         if (!response.ok) {
169 |             return NextResponse.json(
170 |                 {
171 |                     error: `Kroki service responded with ${response.status} ${response.statusText || ""}`.trim()
172 |                 },
173 |                 {status: response.status}
174 |             );
175 |         }
176 | 
177 |         const contentType = response.headers.get("content-type") ?? "image/svg+xml";
178 |         if (!contentType.includes("svg")) {
179 |             const buffer = Buffer.from(await response.arrayBuffer());
180 |             const dataUrl = `data:${contentType};base64,${buffer.toString("base64")}`;
181 |             return NextResponse.json({
182 |                 svgDataUrl: dataUrl,
183 |                 renderer: "kroki.io",
184 |             });
185 |         }
186 | 
187 |         const svg = await response.text();
188 |         return NextResponse.json({
189 |             svg,
190 |             renderer: "kroki.io",
191 |         });
192 |     } catch (error) {
193 |         return NextResponse.json(
194 |             {
195 |                 error: error instanceof Error ? error.message : "Unknown error contacting Kroki service."
196 |             },
197 |             {status: 502}
198 |         );
199 |     }
200 | }


--------------------------------------------------------------------------------
/README_en.md:
--------------------------------------------------------------------------------
  1 | # AI Smart Draw
  2 | 
  3 | English | [中文](README.md)
  4 | 
  5 | An intelligent diagramming application built with Next.js that harnesses the power of AI to create and manipulate various types of diagrams including Draw.io (diagrams.net), Mermaid, PlantUML, Excalidraw, and over 20 other diagram formats through natural language commands.
  6 | 
  7 | 🔗 **Live Demo**:
  8 | - https://ai-smart-draw.vercel.app/
  9 | 
 10 | ![de5e647f-a83a-4b28-bd56-b449f587e472.png](public/de5e647f-a83a-4b28-bd56-b449f587e472.png)
 11 | ![01669c29-60a7-4777-af14-0982d6c6daa8.png](public/01669c29-60a7-4777-af14-0982d6c6daa8.png)
 12 | ![409fd263-800f-4183-8df9-71691307633c.png](public/409fd263-800f-4183-8df9-71691307633c.png)
 13 | ![6dd5b5c1-1e25-4d33-a45f-d10eb0fbb804.png](public/6dd5b5c1-1e25-4d33-a45f-d10eb0fbb804.png)
 14 | ![7736141c-e820-450d-8260-5f5b0c846388.png](public/7736141c-e820-450d-8260-5f5b0c846388.png)
 15 | ![e59f7980-ac2f-4c57-b9a7-8b7c75feed58.png](public/e59f7980-ac2f-4c57-b9a7-8b7c75feed58.png)
 16 | 
 17 | ## 🌟 Key Features
 18 | 
 19 | - **AI-Powered Diagram Creation**: Transform natural language descriptions into professional diagrams
 20 | - **Multi-Format Support**: Work with Draw.io XML, Mermaid, PlantUML, Excalidraw, and 20+ other formats via Kroki
 21 | - **Intelligent Editing**: Modify existing diagrams through conversational AI prompts
 22 | - **Real-time Preview**: See changes as you interact with the AI
 23 | - **Version History**: Track and restore previous versions of your diagrams
 24 | - **Collapsible Chat Panel**: Expand or collapse the chat interface to maximize workspace
 25 | - **Flexible Rendering**: Multiple rendering options with fallback mechanisms
 26 | - **Model Configuration**: Customize AI models directly from the browser
 27 | 
 28 | ## 🎯 Supported Diagram Types
 29 | 
 30 | ### Draw.io (diagrams.net)
 31 | Create and edit professional flowcharts, process diagrams, and complex visualizations using AI-powered XML generation and modification.
 32 | 
 33 | ### Mermaid
 34 | Generate flowcharts, sequence diagrams, Gantt charts, and more with live SVG previews in a dedicated workspace.
 35 | 
 36 | ### PlantUML
 37 | Create UML diagrams with a built-in rendering proxy that supports plantuml.com, kroki.io, or custom endpoints.
 38 | 
 39 | ### Excalidraw
 40 | Freehand-style sketching combined with AI assistance for organic diagram creation.
 41 | 
 42 | ### Kroki (20+ Formats)
 43 | Generate diagrams in various formats using the kroki.io service with a single interface. Supports:
 44 | 
 45 | - **PlantUML**: UML diagrams, activity diagrams, sequence diagrams, etc.
 46 | - **Mermaid**: Flowcharts, sequence diagrams, Gantt charts, etc.
 47 | - **BPMN**: Business Process Modeling Notation for workflow diagrams
 48 | - **Graphviz**: Graph visualization and network diagrams
 49 | - **BlockDiag**: Block diagrams
 50 | - **C4-PlantUML**: Software architecture diagrams
 51 | - **Ditaa**: ASCII art to image conversion
 52 | - **Erd**: Entity relationship diagrams
 53 | - **Vega/Vega-Lite**: Data visualizations
 54 | - **And 15+ more formats**
 55 | 
 56 | ## 🛠 How It Works
 57 | 
 58 | AI Smart Draw leverages modern web technologies to bridge natural language and diagrammatic representations:
 59 | 
 60 | - **Next.js App Router**: Fast, modern React framework with server-side rendering
 61 | - **AI SDK Integration**: Seamless communication with OpenAI-compatible APIs
 62 | - **Context-Aware Prompts**: Intelligent prompt engineering for each diagram type
 63 | - **Real-time Streaming**: Instant feedback with streaming responses
 64 | - **Format-Specific Tools**: Dedicated tools for each diagram format (`display_mermaid`, `display_plantuml`, etc.)
 65 | 
 66 | The application converts your natural language requests into structured diagram code, which is then rendered in real-time.
 67 | 
 68 | ## 🚀 Getting Started
 69 | 
 70 | ### Prerequisites
 71 | - Node.js 18+
 72 | - npm or yarn
 73 | 
 74 | ### Installation
 75 | 
 76 | 1. Clone the repository:
 77 | ```bash
 78 | git clone https://github.com/shenpeiheng/ai-smart-draw.git
 79 | cd ai-smart-draw
 80 | ```
 81 | 
 82 | 2. Install dependencies:
 83 | ```bash
 84 | npm install
 85 | # or
 86 | yarn install
 87 | ```
 88 | 
 89 | 3. Create a `.env.local` file in the root directory. You can use `env.example` as a template:
 90 | ```bash
 91 | cp env.example .env.local
 92 | ```
 93 | 
 94 | Then update `.env.local` with your OpenAI credentials.
 95 | 
 96 | ### OpenAI Configuration
 97 | 
 98 | - `OPENAI_API_KEY` (required): Secret key from your OpenAI account.
 99 | - `OPENAI_MODEL` (optional): Defaults to `gpt-4o-mini`, override if you prefer another released variant.
100 | - `OPENAI_BASE_URL` (optional): Defaults to `https://api.openai.com/v1`; set this if you are self-hosting a proxy or gateway.
101 | 
102 | Example snippet:
103 | ```bash
104 | OPENAI_API_KEY="sk-your-key"
105 | # OPENAI_MODEL="gpt-4o-mini"
106 | # OPENAI_BASE_URL="https://api.openai.com/v1"
107 | ```
108 | 
109 | #### Optional: Configure from the browser
110 | 
111 | - Click the **模型设置** button in any workspace header to override API Key, Base URL, or model for the current browser. Values are stored in `localStorage` and only sent to the server when you submit a chat request.
112 | - Leave any field blank to fall back to the server-side environment variables described above.
113 | - Use the **拉取列表** button to call the `/api/models` helper, which forwards the current credentials to `GET /models` and lists selectable model IDs.
114 | 
115 | 4. Run the development server:
116 | ```bash
117 | npm run dev
118 | ```
119 | 
120 | 5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.
121 |     - `/` -> Draw.io (XML workflows, diagram history, file upload)
122 |     - `/mermaid` -> Mermaid (live preview + definition card powered by your configured OpenAI-compatible model)
123 |     - `/plantuml` -> PlantUML (text-based diagrams with remote preview)
124 |     - `/excalidraw` -> Excalidraw (freeform canvas powered by the same model)
125 |     - `/kroki` -> Kroki (multi-format diagrams powered by kroki.io)
126 |     - `/graphviz` -> Graphviz (graph visualization diagrams powered by kroki.io)
127 | 
128 | ## 🌐 User Interface Features
129 | 
130 | ### Collapsible Chat Panel
131 | - Toggle the chat panel to maximize your workspace
132 | - When collapsed, a floating button provides quick access to restore the chat panel
133 | - Smooth animations for a seamless user experience
134 | 
135 | ### Responsive Design
136 | - Optimized for desktop and laptop usage
137 | - Mobile-friendly interface with appropriate messaging
138 | 
139 | ### Unified Navigation
140 | - Easy switching between different diagram types
141 | - Consistent interface across all diagram workspaces
142 | 
143 | ## 🚀 Deployment
144 | 
145 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new) from the creators of Next.js.
146 | 
147 | Check out the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
148 | 
149 | Or you can deploy by this button.
150 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fshenpeiheng%2Fai-smart-draw)
151 | 
152 | ## 📁 Project Structure
153 | 
154 | ```
155 | app/                  # Next.js application routes and pages
156 |   api/                # API routes for different diagram types
157 |   [diagram-type]/     # Individual pages for each diagram type
158 | components/           # React components
159 |   ui/                 # Reusable UI components
160 |   [feature]/          # Feature-specific components
161 | contexts/             # React context providers
162 | lib/                  # Utility functions and helpers
163 | public/               # Static assets including example images
164 | ```
165 | 
166 | ## ✅ TODOs
167 | 
168 | - [x] Allow the LLM to modify the XML instead of generating it from scratch everytime.
169 | - [x] Improve the smoothness of shape streaming updates.
170 | - [x] Add collapsible chat panel for better workspace utilization.
171 | 
172 | ## 📄 License
173 | 
174 | This project is licensed under the MIT License.
175 | 
176 | ## ⭐ Star History
177 | 
178 | [![Star History Chart](https://api.star-history.com/svg?repos=shenpeiheng/ai-smart-draw&type=date&legend=top-left)](https://www.star-history.com/#shenpeiheng/ai-smart-draw&type=date&legend=top-left)
179 | 


--------------------------------------------------------------------------------