Modernize Input Field Scrollbar Design (#536) (#538)

* Modernize Input Field Scrollbar Design #536

* Added Input Field Scrollbar Design #536

* The edit mode for the user scroller already looks good, so there’s no need to change it. The scrollbar-thin class only makes the scrollbar smaller compared to when it’s not present, so it isn’t needed.

---------

Co-authored-by: Biki Kalita <86558912+Biki-dev@users.noreply.github.com>

README.md

@@ -45,6 +45,7 @@ https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1
   - [Multi-Provider Support](#multi-provider-support)
   - [How It Works](#how-it-works)
   - [Support \& Contact](#support--contact)
+  - [FAQ](#faq)
   - [Star History](#star-history)
 
 ## Examples
@@ -246,6 +247,10 @@ For support or inquiries, please open an issue on the GitHub repository or conta
 
 -   Email: me[at]jiang.jp
 
+## FAQ
+
+See [FAQ](./docs/en/FAQ.md) for common issues and solutions.
+
 ## Star History
 
 [![Star History Chart](https://api.star-history.com/svg?repos=DayuanJiang/next-ai-draw-io&type=date&legend=top-left)](https://www.star-history.com/#DayuanJiang/next-ai-draw-io&type=date&legend=top-left)

app/api/validate-model/route.ts

@@ -202,7 +202,7 @@ export async function POST(req: Request) {
             case "siliconflow": {
                 const sf = createOpenAI({
                     apiKey,
-                    baseURL: baseUrl || "https://api.siliconflow.com/v1",
+                    baseURL: baseUrl || "https://api.siliconflow.cn/v1",
                 })
                 model = sf.chat(modelId)
                 break

app/globals.css

@@ -244,6 +244,19 @@
     .scrollbar-thin::-webkit-scrollbar-thumb:hover {
         background-color: oklch(0.75 0.01 260);
     }
+
+    /* Dark mode scrollbar */
+    .dark .scrollbar-thin {
+        scrollbar-color: oklch(0.35 0.015 260) transparent;
+    }
+
+    .dark .scrollbar-thin::-webkit-scrollbar-thumb {
+        background-color: oklch(0.35 0.015 260);
+    }
+
+    .dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+        background-color: oklch(0.45 0.015 260);
+    }
 }
 
 /* Smooth page transitions */

components/chat-input.tsx

@@ -407,7 +407,7 @@ export function ChatInput({
                     placeholder={dict.chat.placeholder}
                     disabled={isDisabled}
                     aria-label="Chat input"
-                    className="min-h-[60px] max-h-[200px] resize-none border-0 bg-transparent px-4 py-3 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-muted-foreground/60"
+                    className="min-h-[60px] max-h-[200px] resize-none border-0 bg-transparent px-4 py-3 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-muted-foreground/60 scrollbar-thin"
                 />
 
                 <div className="flex items-center justify-end gap-1 px-3 py-2 border-t border-border/50">

components/chat-message-display.tsx

@@ -1114,7 +1114,7 @@ export function ChatMessageDisplay({
                                                                                                         )}
                                                                                                     </button>
                                                                                                     {isExpanded && (
-                                                                                                        <div className="px-3 py-2 border-t border-border/40 max-h-48 overflow-y-auto bg-muted/30">
+                                                                                                        <div className="px-3 py-2 border-t border-border/40 max-h-48 overflow-y-auto bg-muted/30 scrollbar-thin">
                                                                                                             <pre className="text-xs whitespace-pre-wrap text-foreground/80">
                                                                                                                 {
                                                                                                                     section.content

components/history-dialog.tsx

@@ -43,7 +43,7 @@ export function HistoryDialog({
 
     return (
         <Dialog open={showHistory} onOpenChange={onToggleHistory}>
-            <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
+            <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto scrollbar-thin">
                 <DialogHeader>
                     <DialogTitle>{dict.history.title}</DialogTitle>
                     <DialogDescription>

docs/cn/FAQ.md

@@ -0,0 +1,78 @@
+# 常见问题解答 (FAQ)
+
+---
+
+## 1. 无法导出 PDF
+
+**问题**: Web 版点击导出 PDF 后跳转到 `convert.diagrams.net/node/export` 然后无响应
+
+**原因**: 嵌入式 Draw.io 不支持直接 PDF 导出，依赖外部转换服务，在 iframe 中无法正常工作
+
+**解决方案**: 先导出为图片（PNG），再打印转成 PDF
+
+**相关 Issue**: #539, #125
+
+---
+
+## 2. 无法访问 embed.diagrams.net（离线/内网部署）
+
+**问题**: 内网环境提示"找不到 embed.diagrams.net 的服务器 IP 地址"
+
+**关键点**: `NEXT_PUBLIC_*` 环境变量是**构建时**变量，会被打包到 JS 代码中，**运行时设置无效**！
+
+**解决方案**: 必须在构建时通过 `args` 传入：
+
+```yaml
+# docker-compose.yml
+services:
+  drawio:
+    image: jgraph/drawio:latest
+    ports: ["8080:8080"]
+  next-ai-draw-io:
+    build:
+      context: .
+      args:
+        - NEXT_PUBLIC_DRAWIO_BASE_URL=http://你的服务器IP:8080/
+    ports: ["3000:3000"]
+    env_file: .env
+```
+
+**内网用户**: 在外网修改 Dockerfile 并构建镜像，再传到内网使用
+
+**相关 Issue**: #295, #317
+
+---
+
+## 3. 自建模型只思考不画图
+
+**问题**: 本地部署的模型（如 Qwen、LiteLLM）只输出思考过程，不生成图表
+
+**可能原因**:
+1. **模型太小** - 小模型难以正确遵循 tool calling 指令，建议使用 32B+ 参数的模型
+2. **未开启 tool calling** - 模型服务需要配置 tool use 功能
+
+**解决方案**: 开启 tool calling，例如 vLLM：
+```bash
+python -m vllm.entrypoints.openai.api_server \
+    --model Qwen/Qwen3-32B \
+    --enable-auto-tool-choice \
+    --tool-call-parser hermes
+```
+
+**相关 Issue**: #269, #75
+
+---
+
+## 4. 上传图片后提示"未提供图片"
+
+**问题**: 上传图片后，系统显示"未提供图片"错误
+
+**可能原因**:
+1. 模型不支持视觉功能（如 Kimi K2、DeepSeek、Qwen 文本模型）
+
+**解决方案**:
+- 使用支持视觉的模型：GPT-5.2、Claude 4.5 Sonnet、Gemini 3 Pro
+- 模型名带 `vision` 或 `vl` 的支持图片
+- 更新到最新版本（v0.4.9+）
+
+**相关 Issue**: #324, #421, #469

docs/cn/README_CN.md

@@ -42,6 +42,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
   - [多提供商支持](#多提供商支持)
   - [工作原理](#工作原理)
   - [支持与联系](#支持与联系)
+  - [常见问题](#常见问题)
   - [Star历史](#star历史)
 
 ## 示例
@@ -238,6 +239,10 @@ npm run dev
 
 -   邮箱：me[at]jiang.jp
 
+## 常见问题
+
+请参阅 [FAQ](./FAQ.md) 了解常见问题和解决方案。
+
 ## Star历史
 
 [![Star History Chart](https://api.star-history.com/svg?repos=DayuanJiang/next-ai-draw-io&type=date&legend=top-left)](https://www.star-history.com/#DayuanJiang/next-ai-draw-io&type=date&legend=top-left)

docs/en/FAQ.md

@@ -0,0 +1,78 @@
+# Frequently Asked Questions (FAQ)
+
+---
+
+## 1. Cannot Export PDF
+
+**Problem**: Web version redirects to `convert.diagrams.net/node/export` when exporting PDF, then nothing happens
+
+**Cause**: Embedded Draw.io doesn't support direct PDF export, it relies on external conversion service which doesn't work in iframe
+
+**Solution**: Export as image (PNG) first, then print to PDF
+
+**Related Issues**: #539, #125
+
+---
+
+## 2. Cannot Access embed.diagrams.net (Offline/Intranet Deployment)
+
+**Problem**: Intranet environment shows "Cannot find server IP address for embed.diagrams.net"
+
+**Key Point**: `NEXT_PUBLIC_*` environment variables are **build-time** variables, they get bundled into JS code. **Runtime settings don't work!**
+
+**Solution**: Must pass via `args` at build time:
+
+```yaml
+# docker-compose.yml
+services:
+  drawio:
+    image: jgraph/drawio:latest
+    ports: ["8080:8080"]
+  next-ai-draw-io:
+    build:
+      context: .
+      args:
+        - NEXT_PUBLIC_DRAWIO_BASE_URL=http://your-server-ip:8080/
+    ports: ["3000:3000"]
+    env_file: .env
+```
+
+**Intranet Users**: Modify Dockerfile and build image on external network, then transfer to intranet
+
+**Related Issues**: #295, #317
+
+---
+
+## 3. Self-hosted Model Only Thinks But Doesn't Draw
+
+**Problem**: Locally deployed models (e.g., Qwen, LiteLLM) only output thinking process, don't generate diagrams
+
+**Possible Causes**:
+1. **Model too small** - Small models struggle to follow tool calling instructions correctly, recommend 32B+ parameter models
+2. **Tool calling not enabled** - Model service needs tool use configuration
+
+**Solution**: Enable tool calling, e.g., vLLM:
+```bash
+python -m vllm.entrypoints.openai.api_server \
+    --model Qwen/Qwen3-32B \
+    --enable-auto-tool-choice \
+    --tool-call-parser hermes
+```
+
+**Related Issues**: #269, #75
+
+---
+
+## 4. "No Image Provided" After Uploading Image
+
+**Problem**: After uploading an image, the system shows "No image provided" error
+
+**Possible Causes**:
+1. Model doesn't support vision (e.g., Kimi K2, DeepSeek, Qwen text models)
+
+**Solution**:
+- Use vision-capable models: GPT-5.2, Claude 4.5 Sonnet, Gemini 3 Pro
+- Models with `vision` or `vl` in name support images
+- Update to latest version (v0.4.9+)
+
+**Related Issues**: #324, #421, #469

docs/ja/FAQ.md

@@ -0,0 +1,78 @@
+# よくある質問 (FAQ)
+
+---
+
+## 1. PDFをエクスポートできない
+
+**問題**: Web版でPDFエクスポートをクリックすると `convert.diagrams.net/node/export` にリダイレクトされ、その後何も起こらない
+
+**原因**: 埋め込みDraw.ioは直接PDFエクスポートをサポートしておらず、外部変換サービスに依存しているが、iframe内では正常に動作しない
+
+**解決策**: まず画像（PNG）としてエクスポートし、その後PDFに印刷する
+
+**関連Issue**: #539, #125
+
+---
+
+## 2. embed.diagrams.netにアクセスできない（オフライン/イントラネットデプロイ）
+
+**問題**: イントラネット環境で「embed.diagrams.netのサーバーIPアドレスが見つかりません」と表示される
+
+**重要**: `NEXT_PUBLIC_*` 環境変数は**ビルド時**変数であり、JSコードにバンドルされます。**実行時の設定は無効です！**
+
+**解決策**: ビルド時に `args` で渡す必要があります：
+
+```yaml
+# docker-compose.yml
+services:
+  drawio:
+    image: jgraph/drawio:latest
+    ports: ["8080:8080"]
+  next-ai-draw-io:
+    build:
+      context: .
+      args:
+        - NEXT_PUBLIC_DRAWIO_BASE_URL=http://あなたのサーバーIP:8080/
+    ports: ["3000:3000"]
+    env_file: .env
+```
+
+**イントラネットユーザー**: 外部ネットワークでDockerfileを修正してイメージをビルドし、イントラネットに転送する
+
+**関連Issue**: #295, #317
+
+---
+
+## 3. 自前モデルが思考するだけで描画しない
+
+**問題**: ローカルデプロイのモデル（Qwen、LiteLLMなど）が思考過程のみを出力し、図表を生成しない
+
+**考えられる原因**:
+1. **モデルが小さすぎる** - 小さいモデルはtool calling指示に正しく従うことが難しい、32B+パラメータのモデルを推奨
+2. **tool callingが有効になっていない** - モデルサービスでtool use機能を設定する必要がある
+
+**解決策**: tool callingを有効にする、例えばvLLM：
+```bash
+python -m vllm.entrypoints.openai.api_server \
+    --model Qwen/Qwen3-32B \
+    --enable-auto-tool-choice \
+    --tool-call-parser hermes
+```
+
+**関連Issue**: #269, #75
+
+---
+
+## 4. 画像アップロード後「画像が提供されていません」と表示される
+
+**問題**: 画像をアップロードした後、「画像が提供されていません」というエラーが表示される
+
+**考えられる原因**:
+1. モデルがビジョン機能をサポートしていない（Kimi K2、DeepSeek、Qwenテキストモデルなど）
+
+**解決策**:
+- ビジョン対応モデルを使用：GPT-5.2、Claude 4.5 Sonnet、Gemini 3 Pro
+- モデル名に `vision` または `vl` が含まれているものは画像をサポート
+- 最新バージョン（v0.4.9+）にアップデート
+
+**関連Issue**: #324, #421, #469

docs/ja/README_JA.md

@@ -42,6 +42,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
   - [マルチプロバイダーサポート](#マルチプロバイダーサポート)
   - [仕組み](#仕組み)
   - [サポート＆お問い合わせ](#サポートお問い合わせ)
+  - [よくある質問](#よくある質問)
   - [スター履歴](#スター履歴)
 
 ## 例
@@ -239,6 +240,10 @@ AWS BedrockとOpenRouter以外のすべてのプロバイダーはカスタム
 
 -   メール：me[at]jiang.jp
 
+## よくある質問
+
+一般的な問題と解決策については [FAQ](./FAQ.md) をご覧ください。
+
 ## スター履歴
 
 [![Star History Chart](https://api.star-history.com/svg?repos=DayuanJiang/next-ai-draw-io&type=date&legend=top-left)](https://www.star-history.com/#DayuanJiang/next-ai-draw-io&type=date&legend=top-left)

lib/ai-providers.ts

@@ -464,7 +464,7 @@ function validateProviderCredentials(provider: ProviderName): void {
  * - DEEPSEEK_API_KEY: DeepSeek API key
  * - DEEPSEEK_BASE_URL: DeepSeek endpoint (optional)
  * - SILICONFLOW_API_KEY: SiliconFlow API key
- * - SILICONFLOW_BASE_URL: SiliconFlow endpoint (optional, defaults to https://api.siliconflow.com/v1)
+ * - SILICONFLOW_BASE_URL: SiliconFlow endpoint (optional, defaults to https://api.siliconflow.cn/v1)
  * - SGLANG_API_KEY: SGLang API key
  * - SGLANG_BASE_URL: SGLang endpoint (optional)
  * - MODELSCOPE_API_KEY: ModelScope API key
@@ -721,7 +721,7 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
             const baseURL =
                 overrides?.baseUrl ||
                 process.env.SILICONFLOW_BASE_URL ||
-                "https://api.siliconflow.com/v1"
+                "https://api.siliconflow.cn/v1"
             const siliconflowProvider = createOpenAI({
                 apiKey,
                 baseURL,

lib/types/model-config.ts

@@ -80,7 +80,7 @@ export const PROVIDER_INFO: Record<
     deepseek: { label: "DeepSeek" },
     siliconflow: {
         label: "SiliconFlow",
-        defaultBaseUrl: "https://api.siliconflow.com/v1",
+        defaultBaseUrl: "https://api.siliconflow.cn/v1",
     },
     sglang: {
         label: "SGLang",

packages/claude-plugin/.claude-plugin/plugin.json

@@ -0,0 +1,11 @@
+{
+    "name": "next-ai-drawio",
+    "version": "1.0.0",
+    "description": "AI-powered Draw.io diagram generation with real-time browser preview. Create flowcharts, architecture diagrams, and more through natural language.",
+    "author": {
+        "name": "DayuanJiang"
+    },
+    "repository": "https://github.com/DayuanJiang/next-ai-draw-io",
+    "homepage": "https://next-ai-drawio.jiang.jp",
+    "license": "Apache-2.0"
+}

packages/claude-plugin/.mcp.json

@@ -0,0 +1,8 @@
+{
+    "mcpServers": {
+        "drawio": {
+            "command": "npx",
+            "args": ["@next-ai-drawio/mcp-server@latest"]
+        }
+    }
+}

packages/claude-plugin/README.md

@@ -0,0 +1,107 @@
+# Next AI Draw.io - Claude Code Plugin
+
+AI-powered Draw.io diagram generation with real-time browser preview for Claude Code.
+
+## Installation
+
+### From Plugin Directory (Coming Soon)
+
+Once approved, install via:
+```
+/plugin install next-ai-drawio
+```
+
+### Manual Installation
+
+```bash
+claude --plugin-dir /path/to/packages/claude-plugin
+```
+
+Or add the MCP server directly:
+```bash
+claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
+```
+
+## Features
+
+- **Real-time Preview**: Diagrams appear and update in your browser as Claude creates them
+- **Version History**: Restore previous diagram versions with visual thumbnails
+- **Natural Language**: Describe diagrams in plain text - flowcharts, architecture diagrams, etc.
+- **Edit Support**: Modify existing diagrams with natural language instructions
+- **Export**: Save diagrams as `.drawio` files
+- **Self-contained**: Embedded server, no external dependencies required
+
+## Use Case Examples
+
+### 1. Create Architecture Diagrams
+
+```
+Generate an AWS architecture diagram with Lambda, API Gateway, DynamoDB,
+and S3 for a serverless REST API
+```
+
+### 2. Flowchart Generation
+
+```
+Create a flowchart showing the CI/CD pipeline: code commit -> build ->
+test -> staging deploy -> production deploy with approval gates
+```
+
+### 3. System Design Documentation
+
+```
+Design a microservices e-commerce system with user service, product catalog,
+shopping cart, order processing, and payment gateway
+```
+
+### 4. Cloud Architecture (AWS/GCP/Azure)
+
+```
+Generate a GCP architecture diagram with Cloud Run, Cloud SQL, and
+Cloud Storage for a web application
+```
+
+### 5. Sequence Diagrams
+
+```
+Create a sequence diagram showing OAuth 2.0 authorization code flow
+between user, client app, auth server, and resource server
+```
+
+## Available Tools
+
+| Tool | Description |
+|------|-------------|
+| `start_session` | Opens browser with real-time diagram preview |
+| `create_new_diagram` | Create a new diagram from XML |
+| `edit_diagram` | Edit diagram by ID-based operations |
+| `get_diagram` | Get the current diagram XML |
+| `export_diagram` | Save diagram to a `.drawio` file |
+
+## How It Works
+
+```
+Claude Code <--stdio--> MCP Server <--http--> Browser (draw.io)
+```
+
+1. Ask Claude to create a diagram
+2. Claude calls `start_session` to open a browser window
+3. Claude generates diagram XML and sends it to the browser
+4. You see the diagram update in real-time!
+
+## Configuration
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `PORT` | `6002` | Port for the embedded HTTP server |
+| `DRAWIO_BASE_URL` | `https://embed.diagrams.net` | Base URL for draw.io (for self-hosted deployments) |
+
+## Links
+
+- [Homepage](https://next-ai-drawio.jiang.jp)
+- [GitHub Repository](https://github.com/DayuanJiang/next-ai-draw-io)
+- [MCP Server Documentation](https://github.com/DayuanJiang/next-ai-draw-io/tree/main/packages/mcp-server)
+
+## License
+
+Apache-2.0

scripts/prepare-electron-build.mjs

@@ -38,4 +38,12 @@ const targetStaticDir = join(targetDir, ".next", "static")
 mkdirSync(targetStaticDir, { recursive: true })
 cpSync(staticDir, targetStaticDir, { recursive: true })
 
+// Copy public folder (required for favicon-white.svg and other assets)
+console.log("Copying public folder...")
+const publicDir = join(rootDir, "public")
+const targetPublicDir = join(targetDir, "public")
+if (existsSync(publicDir)) {
+    cpSync(publicDir, targetPublicDir, { recursive: true })
+}
+
 console.log("Done! Files prepared in electron-standalone/")