Compare commits

..

2 Commits

Author SHA1 Message Date
dayuan.jiang
2158d26bbb fix: address PR review feedback for auto-update
- Register manual check listeners before checkForUpdates() to avoid race
- Strip prerelease/build metadata in version comparison
- Add res.setEncoding("utf8") for GitHub API response
- Stream file hashing in CI script instead of reading into memory
- Add directory existence checks in fix-latest-yml.mjs
- Define UpdateStatus type locally in preload to avoid tsconfig scope issues
- Show error dialog for manual check failures (parse/network errors)
2026-04-03 17:59:57 +09:00
dayuan.jiang
e27afe6f0d feat: add automatic update functionality for Electron app
Closes #613

- Add electron-updater for Windows NSIS and Linux AppImage auto-update
- macOS and Linux DEB fall back to GitHub API check with download link
- Add "Check for Updates" menu item with i18n (en, zh, ja, zh-Hant)
- Fix Windows CI workflow to publish correct latest.yml after code signing
- Add update toast notifications in renderer via sonner
2026-04-03 17:46:27 +09:00
38 changed files with 1048 additions and 376 deletions

View File

@@ -37,7 +37,7 @@ jobs:
- name: Download draw.io static files for offline use - name: Download draw.io static files for offline use
run: | run: |
rm -rf public/drawio rm -rf public/drawio
git clone --depth 1 https://github.com/jgraph/drawio.git /tmp/drawio git clone --depth 1 --branch v29.3.5 https://github.com/jgraph/drawio.git /tmp/drawio
mkdir -p public/drawio mkdir -p public/drawio
cp -r /tmp/drawio/src/main/webapp/* public/drawio/ cp -r /tmp/drawio/src/main/webapp/* public/drawio/
rm -rf public/drawio/WEB-INF rm -rf public/drawio/WEB-INF
@@ -70,7 +70,7 @@ jobs:
shell: bash shell: bash
run: | run: |
rm -rf public/drawio rm -rf public/drawio
git clone --depth 1 https://github.com/jgraph/drawio.git /tmp/drawio git clone --depth 1 --branch v29.3.5 https://github.com/jgraph/drawio.git /tmp/drawio
mkdir -p public/drawio mkdir -p public/drawio
cp -r /tmp/drawio/src/main/webapp/* public/drawio/ cp -r /tmp/drawio/src/main/webapp/* public/drawio/
rm -rf public/drawio/WEB-INF rm -rf public/drawio/WEB-INF
@@ -105,9 +105,14 @@ jobs:
wait-for-completion: true wait-for-completion: true
output-artifact-directory: release-signed output-artifact-directory: release-signed
- name: Upload signed artifacts to release - name: Fix latest.yml with signed exe hashes
run: node scripts/fix-latest-yml.mjs
- name: Upload signed artifacts and update metadata to release
uses: softprops/action-gh-release@v2 uses: softprops/action-gh-release@v2
with: with:
files: release-signed/*.exe files: |
release-signed/*.exe
release/latest*.yml
env: env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

View File

@@ -31,7 +31,7 @@ https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1
- [Table of Contents](#table-of-contents) - [Table of Contents](#table-of-contents)
- [Examples](#examples) - [Examples](#examples)
- [Features](#features) - [Features](#features)
- [MCP Server](#mcp-server) - [MCP Server (Preview)](#mcp-server-preview)
- [Claude Code CLI](#claude-code-cli) - [Claude Code CLI](#claude-code-cli)
- [Getting Started](#getting-started) - [Getting Started](#getting-started)
- [Try it Online](#try-it-online) - [Try it Online](#try-it-online)
@@ -63,24 +63,24 @@ Here are some example prompts and their generated diagrams:
</tr> </tr>
<tr> <tr>
<td width="50%" valign="top"> <td width="50%" valign="top">
<strong>RAG Technique Diagram</strong><br /> <strong>GCP architecture diagram</strong><br />
<p><strong>Prompt:</strong> Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion</p> <p><strong>Prompt:</strong> Generate a GCP architecture diagram with **GCP icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
<img src="./public/rag_prod.svg" alt="RAG Architecture Diagram" width="480" /> <img src="./public/gcp_demo.svg" alt="GCP Architecture Diagram" width="480" />
</td> </td>
<td width="50%" valign="top"> <td width="50%" valign="top">
<strong>Authentication using React and AWS</strong><br /> <strong>AWS architecture diagram</strong><br />
<p><strong>Prompt:</strong> Generate authentication process using React with **AWS**. Use Serverless architecture.</p> <p><strong>Prompt:</strong> Generate a AWS architecture diagram with **AWS icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
<img src="./public/auth.svg" alt="Authentication Architecture Diagram" width="480" /> <img src="./public/aws_demo.svg" alt="AWS Architecture Diagram" width="480" />
</td> </td>
</tr> </tr>
<tr> <tr>
<td width="50%" valign="top"> <td width="50%" valign="top">
<strong>Open Innovation</strong><br /> <strong>Azure architecture diagram</strong><br />
<p><strong>Prompt:</strong> Create visualization of Henry Chesbrough's Open Innovation model.</p> <p><strong>Prompt:</strong> Generate a Azure architecture diagram with **Azure icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
<img src="./public/inno.svg" alt="Open Innovation Diagram" width="480" /> <img src="./public/azure_demo.svg" alt="Azure Architecture Diagram" width="480" />
</td> </td>
<td width="50%" valign="top"> <td width="50%" valign="top">
<strong>Cat sketch</strong><br /> <strong>Cat sketch prompt</strong><br />
<p><strong>Prompt:</strong> Draw a cute cat for me.</p> <p><strong>Prompt:</strong> Draw a cute cat for me.</p>
<img src="./public/cat_demo.svg" alt="Cat Drawing" width="240" /> <img src="./public/cat_demo.svg" alt="Cat Drawing" width="240" />
</td> </td>
@@ -99,7 +99,9 @@ Here are some example prompts and their generated diagrams:
- **Cloud Architecture Diagram Support**: Specialized support for generating cloud architecture diagrams (AWS, GCP, Azure) - **Cloud Architecture Diagram Support**: Specialized support for generating cloud architecture diagrams (AWS, GCP, Azure)
- **Animated Connectors**: Create dynamic and animated connectors between diagram elements for better visualization - **Animated Connectors**: Create dynamic and animated connectors between diagram elements for better visualization
## MCP Server ## MCP Server (Preview)
> **Preview Feature**: This feature is experimental and may not be stable.
Use Next AI Draw.io with AI agents like Claude Desktop, Cursor, and VS Code via MCP (Model Context Protocol). Use Next AI Draw.io with AI agents like Claude Desktop, Cursor, and VS Code via MCP (Model Context Protocol).

View File

@@ -175,106 +175,92 @@ export default function AboutCN() {
</p> </p>
<div className="space-y-8"> <div className="space-y-8">
{/* ResNet50 Architecture */} {/* Animated Transformer */}
<div className="text-center"> <div className="text-center">
<h3 className="text-lg font-semibold text-gray-900 mb-2"> <h3 className="text-lg font-semibold text-gray-900 mb-2">
ResNet50模型架构动画 Transformer连接器
</h3> </h3>
<p className="text-gray-600 mb-4"> <p className="text-gray-600 mb-4">
<strong>Prompt:</strong> Give me an{" "} <strong></strong>
<strong>animated</strong> architecture diagram <strong></strong>Transformer架构图
of the ResNet50 model.
</p> </p>
<div className="bg-neutral-950 rounded-lg p-4 inline-block"> <Image
<Image src="/animated_connectors.svg"
src="/resnet50.svg" alt="带动画连接器的Transformer架构"
alt="ResNet50模型架构图" width={480}
width={480} height={360}
height={360} className="mx-auto"
className="mx-auto" />
/>
</div>
</div> </div>
{/* Diagram Grid */} {/* Cloud Architecture Grid */}
<div className="grid md:grid-cols-2 gap-6"> <div className="grid md:grid-cols-2 gap-6">
<div className="text-center"> <div className="text-center">
<h3 className="text-lg font-semibold text-gray-900 mb-2"> <h3 className="text-lg font-semibold text-gray-900 mb-2">
RAG技术 GCP架构
</h3> </h3>
<p className="text-gray-600 text-sm mb-4"> <p className="text-gray-600 text-sm mb-4">
<strong>Prompt:</strong> Generate a RAG <strong></strong> 使
architecture diagram for{" "} <strong>GCP图标</strong>
<strong>chat application</strong>. Use GCP架构图
connected diagram for data ingestion
</p> </p>
<div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]"> <Image
<Image src="/gcp_demo.svg"
src="/rag_prod.svg" alt="GCP架构图"
alt="RAG架构图" width={400}
width={480} height={300}
height={360} className="mx-auto"
className="max-w-full max-h-full object-contain" />
/>
</div>
</div> </div>
<div className="text-center"> <div className="text-center">
<h3 className="text-lg font-semibold text-gray-900 mb-2"> <h3 className="text-lg font-semibold text-gray-900 mb-2">
React和AWS认证流程 AWS架构图
</h3> </h3>
<p className="text-gray-600 text-sm mb-4"> <p className="text-gray-600 text-sm mb-4">
<strong>Prompt:</strong> Generate <strong></strong> 使
authentication process using React with{" "} <strong>AWS图标</strong>
<strong>AWS</strong>. Use Serverless AWS架构图
architecture.
</p> </p>
<div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]"> <Image
<Image src="/aws_demo.svg"
src="/auth.svg" alt="AWS架构图"
alt="认证架构图" width={400}
width={480} height={300}
height={360} className="mx-auto"
className="max-w-full max-h-full object-contain" />
/>
</div>
</div> </div>
<div className="text-center"> <div className="text-center">
<h3 className="text-lg font-semibold text-gray-900 mb-2"> <h3 className="text-lg font-semibold text-gray-900 mb-2">
Scrum流程 Azure架构图
</h3> </h3>
<p className="text-gray-600 text-sm mb-4"> <p className="text-gray-600 text-sm mb-4">
<strong>Prompt:</strong> Generate agile <strong></strong> 使
scrum workflow diagram for software <strong>Azure图标</strong>
development team. Azure架构图
</p> </p>
<div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]"> <Image
<Image src="/azure_demo.svg"
src="/agile_scrum.svg" alt="Azure架构图"
alt="敏捷Scrum流程图" width={400}
width={480} height={300}
height={360} className="mx-auto"
className="max-w-full max-h-full object-contain" />
/>
</div>
</div> </div>
<div className="text-center"> <div className="text-center">
<h3 className="text-lg font-semibold text-gray-900 mb-2"> <h3 className="text-lg font-semibold text-gray-900 mb-2">
</h3> </h3>
<p className="text-gray-600 text-sm mb-4"> <p className="text-gray-600 text-sm mb-4">
<strong>Prompt:</strong> Create <strong></strong>{" "}
visualization of Henry Chesbrough&apos;s
Open Innovation model.
</p> </p>
<div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]"> <Image
<Image src="/cat_demo.svg"
src="/inno.svg" alt="猫咪绘图"
alt="开放式创新图" width={240}
width={480} height={240}
height={360} className="mx-auto"
className="max-w-full max-h-full object-contain" />
/>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -168,106 +168,93 @@ export default function AboutJA() {
</p> </p>
<div className="space-y-8"> <div className="space-y-8">
{/* ResNet50 Architecture */} {/* Animated Transformer */}
<div className="text-center"> <div className="text-center">
<h3 className="text-lg font-semibold text-gray-900 mb-2"> <h3 className="text-lg font-semibold text-gray-900 mb-2">
ResNet50モデルアーキテクチャアニメーション Transformerコネクタ
</h3> </h3>
<p className="text-gray-600 mb-4"> <p className="text-gray-600 mb-4">
<strong>Prompt:</strong> Give me an{" "} <strong></strong>{" "}
<strong>animated</strong> architecture diagram <strong></strong>
of the ResNet50 model. Transformerアーキテクチャ図を作成してください
</p> </p>
<div className="bg-neutral-950 rounded-lg p-4 inline-block"> <Image
<Image src="/animated_connectors.svg"
src="/resnet50.svg" alt="アニメーションコネクタ付きTransformerアーキテクチャ"
alt="ResNet50モデルアーキテクチャ図" width={480}
width={480} height={360}
height={360} className="mx-auto"
className="mx-auto" />
/>
</div>
</div> </div>
{/* Diagram Grid */} {/* Cloud Architecture Grid */}
<div className="grid md:grid-cols-2 gap-6"> <div className="grid md:grid-cols-2 gap-6">
<div className="text-center"> <div className="text-center">
<h3 className="text-lg font-semibold text-gray-900 mb-2"> <h3 className="text-lg font-semibold text-gray-900 mb-2">
RAG技術ダイアグラム GCPアーキテクチャ図
</h3> </h3>
<p className="text-gray-600 text-sm mb-4"> <p className="text-gray-600 text-sm mb-4">
<strong>Prompt:</strong> Generate a RAG <strong></strong>{" "}
architecture diagram for{" "} <strong>GCPアイコン</strong>
<strong>chat application</strong>. Use 使GCPアーキテクチャ図を生成してください
connected diagram for data ingestion
</p> </p>
<div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]"> <Image
<Image src="/gcp_demo.svg"
src="/rag_prod.svg" alt="GCPアーキテクチャ図"
alt="RAGアーキテクチャ図" width={400}
width={480} height={300}
height={360} className="mx-auto"
className="max-w-full max-h-full object-contain" />
/>
</div>
</div> </div>
<div className="text-center"> <div className="text-center">
<h3 className="text-lg font-semibold text-gray-900 mb-2"> <h3 className="text-lg font-semibold text-gray-900 mb-2">
ReactとAWSによる認証 AWSアーキテクチャ図
</h3> </h3>
<p className="text-gray-600 text-sm mb-4"> <p className="text-gray-600 text-sm mb-4">
<strong>Prompt:</strong> Generate <strong></strong>{" "}
authentication process using React with{" "} <strong>AWSアイコン</strong>
<strong>AWS</strong>. Use Serverless 使AWSアーキテクチャ図を生成してください
architecture.
</p> </p>
<div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]"> <Image
<Image src="/aws_demo.svg"
src="/auth.svg" alt="AWSアーキテクチャ図"
alt="認証アーキテクチャ図" width={400}
width={480} height={300}
height={360} className="mx-auto"
className="max-w-full max-h-full object-contain" />
/>
</div>
</div> </div>
<div className="text-center"> <div className="text-center">
<h3 className="text-lg font-semibold text-gray-900 mb-2"> <h3 className="text-lg font-semibold text-gray-900 mb-2">
Azureアーキテクチャ図
</h3> </h3>
<p className="text-gray-600 text-sm mb-4"> <p className="text-gray-600 text-sm mb-4">
<strong>Prompt:</strong> Generate agile <strong></strong>{" "}
scrum workflow diagram for software <strong>Azureアイコン</strong>
development team. 使Azureアーキテクチャ図を生成してください
</p> </p>
<div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]"> <Image
<Image src="/azure_demo.svg"
src="/agile_scrum.svg" alt="Azureアーキテクチャ図"
alt="アジャイルスクラム図" width={400}
width={480} height={300}
height={360} className="mx-auto"
className="max-w-full max-h-full object-contain" />
/>
</div>
</div> </div>
<div className="text-center"> <div className="text-center">
<h3 className="text-lg font-semibold text-gray-900 mb-2"> <h3 className="text-lg font-semibold text-gray-900 mb-2">
</h3> </h3>
<p className="text-gray-600 text-sm mb-4"> <p className="text-gray-600 text-sm mb-4">
<strong>Prompt:</strong> Create <strong></strong>{" "}
visualization of Henry Chesbrough&apos;s
Open Innovation model.
</p> </p>
<div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]"> <Image
<Image src="/cat_demo.svg"
src="/inno.svg" alt="猫の絵"
alt="オープンイノベーション図" width={240}
width={480} height={240}
height={360} className="mx-auto"
className="max-w-full max-h-full object-contain" />
/>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -182,106 +182,96 @@ export default function About() {
</p> </p>
<div className="space-y-8"> <div className="space-y-8">
{/* ResNet50 Architecture */} {/* Animated Transformer */}
<div className="text-center"> <div className="text-center">
<h3 className="text-lg font-semibold text-gray-900 mb-2"> <h3 className="text-lg font-semibold text-gray-900 mb-2">
Animated ResNet50 Model Architecture Animated Transformer Connectors
</h3> </h3>
<p className="text-gray-600 mb-4"> <p className="text-gray-600 mb-4">
<strong>Prompt:</strong> Give me an{" "} <strong>Prompt:</strong> Give me an{" "}
<strong>animated</strong> architecture diagram <strong>animated connector</strong> diagram of
of the ResNet50 model. transformer&apos;s architecture.
</p> </p>
<div className="bg-neutral-950 rounded-lg p-4 inline-block"> <Image
<Image src="/animated_connectors.svg"
src="/resnet50.svg" alt="Transformer Architecture with Animated Connectors"
alt="Architecture diagram for ResNet50 model" width={480}
width={480} height={360}
height={360} className="mx-auto"
className="mx-auto" />
/>
</div>
</div> </div>
{/* Diagram Grid */} {/* Cloud Architecture Grid */}
<div className="grid md:grid-cols-2 gap-6"> <div className="grid md:grid-cols-2 gap-6">
<div className="text-center"> <div className="text-center">
<h3 className="text-lg font-semibold text-gray-900 mb-2"> <h3 className="text-lg font-semibold text-gray-900 mb-2">
RAG Technique Diagram GCP Architecture Diagram
</h3> </h3>
<p className="text-gray-600 text-sm mb-4"> <p className="text-gray-600 text-sm mb-4">
<strong>Prompt:</strong> Generate a RAG <strong>Prompt:</strong> Generate a GCP
architecture diagram for{" "} architecture diagram with{" "}
<strong>chat application</strong>. Use <strong>GCP icons</strong>. Users connect to
connected diagram for data ingestion a frontend hosted on an instance.
</p> </p>
<div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]"> <Image
<Image src="/gcp_demo.svg"
src="/rag_prod.svg" alt="GCP Architecture Diagram"
alt="RAG Architecture Diagram" width={400}
width={480} height={300}
height={360} className="mx-auto"
className="max-w-full max-h-full object-contain" />
/>
</div>
</div> </div>
<div className="text-center"> <div className="text-center">
<h3 className="text-lg font-semibold text-gray-900 mb-2"> <h3 className="text-lg font-semibold text-gray-900 mb-2">
Authentication using React and AWS AWS Architecture Diagram
</h3> </h3>
<p className="text-gray-600 text-sm mb-4"> <p className="text-gray-600 text-sm mb-4">
<strong>Prompt:</strong> Generate <strong>Prompt:</strong> Generate an AWS
authentication process using React with{" "} architecture diagram with{" "}
<strong>AWS</strong>. Use Serverless <strong>AWS icons</strong>. Users connect to
architecture. a frontend hosted on an instance.
</p> </p>
<div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]"> <Image
<Image src="/aws_demo.svg"
src="/auth.svg" alt="AWS Architecture Diagram"
alt="Authentication Architecture Diagram" width={400}
width={480} height={300}
height={360} className="mx-auto"
className="max-w-full max-h-full object-contain" />
/>
</div>
</div> </div>
<div className="text-center"> <div className="text-center">
<h3 className="text-lg font-semibold text-gray-900 mb-2"> <h3 className="text-lg font-semibold text-gray-900 mb-2">
Agile Scrum Process Azure Architecture Diagram
</h3> </h3>
<p className="text-gray-600 text-sm mb-4"> <p className="text-gray-600 text-sm mb-4">
<strong>Prompt:</strong> Generate agile <strong>Prompt:</strong> Generate an Azure
scrum workflow diagram for software architecture diagram with{" "}
development team. <strong>Azure icons</strong>. Users connect
to a frontend hosted on an instance.
</p> </p>
<div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]"> <Image
<Image src="/azure_demo.svg"
src="/agile_scrum.svg" alt="Azure Architecture Diagram"
alt="Agile Scrum Diagram" width={400}
width={480} height={300}
height={360} className="mx-auto"
className="max-w-full max-h-full object-contain" />
/>
</div>
</div> </div>
<div className="text-center"> <div className="text-center">
<h3 className="text-lg font-semibold text-gray-900 mb-2"> <h3 className="text-lg font-semibold text-gray-900 mb-2">
Open Innovation Cat Sketch
</h3> </h3>
<p className="text-gray-600 text-sm mb-4"> <p className="text-gray-600 text-sm mb-4">
<strong>Prompt:</strong> Create <strong>Prompt:</strong> Draw a cute cat for
visualization of Henry Chesbrough&apos;s me.
Open Innovation model.
</p> </p>
<div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]"> <Image
<Image src="/cat_demo.svg"
src="/inno.svg" alt="Cat Drawing"
alt="Open Innovation Diagram" width={240}
width={480} height={240}
height={360} className="mx-auto"
className="max-w-full max-h-full object-contain" />
/>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -100,8 +100,12 @@ export default function Home() {
const handleDrawioAutoSave = useCallback( const handleDrawioAutoSave = useCallback(
(data: { xml?: string }) => { (data: { xml?: string }) => {
handleDiagramAutoSave(data) handleDiagramAutoSave(data)
// Only suppress modified state when persistence is available
if (canPersist) {
drawioRef.current?.status({ message: "", modified: false })
}
}, },
[handleDiagramAutoSave], [canPersist, drawioRef, handleDiagramAutoSave],
) )
const handleDarkModeChange = () => { const handleDarkModeChange = () => {

View File

@@ -141,6 +141,9 @@ export default function ExamplePanel({
<span className="text-sm font-medium text-foreground group-hover:text-purple-500 transition-colors"> <span className="text-sm font-medium text-foreground group-hover:text-purple-500 transition-colors">
{dict.examples.mcpServer} {dict.examples.mcpServer}
</span> </span>
<span className="px-1.5 py-0.5 text-[10px] font-semibold bg-purple-500 text-white rounded">
{dict.examples.preview}
</span>
</div> </div>
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
{dict.examples.mcpDescription} {dict.examples.mcpDescription}

View File

@@ -417,7 +417,6 @@ export function ChatMessageDisplay({
// Track previous message count to detect bulk loads vs streaming // Track previous message count to detect bulk loads vs streaming
const prevMessageCountRef = useRef(0) const prevMessageCountRef = useRef(0)
const scrollThrottleRef = useRef<ReturnType<typeof setTimeout> | null>(null)
useEffect(() => { useEffect(() => {
if (messagesEndRef.current && messages.length > 0) { if (messagesEndRef.current && messages.length > 0) {
@@ -431,17 +430,8 @@ export function ChatMessageDisplay({
return return
} }
// Throttle scroll during streaming to avoid layout thrashing // Single message added - smooth scroll
// Leading + trailing: scroll immediately, then once more after cooldown messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
if (!scrollThrottleRef.current) {
messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
scrollThrottleRef.current = setTimeout(() => {
scrollThrottleRef.current = null
messagesEndRef.current?.scrollIntoView({
behavior: "smooth",
})
}, 150)
}
} }
}, [messages]) }, [messages])

View File

@@ -25,6 +25,7 @@ import Image from "@/components/image-with-basepath"
import { ModelConfigDialog } from "@/components/model-config-dialog" import { ModelConfigDialog } from "@/components/model-config-dialog"
import { SettingsDialog } from "@/components/settings-dialog" import { SettingsDialog } from "@/components/settings-dialog"
import { useDiagram } from "@/contexts/diagram-context" import { useDiagram } from "@/contexts/diagram-context"
import { useAutoUpdate } from "@/hooks/use-auto-update"
import { useDiagramToolHandlers } from "@/hooks/use-diagram-tool-handlers" import { useDiagramToolHandlers } from "@/hooks/use-diagram-tool-handlers"
import { useDictionary } from "@/hooks/use-dictionary" import { useDictionary } from "@/hooks/use-dictionary"
import { getSelectedAIConfig, useModelConfig } from "@/hooks/use-model-config" import { getSelectedAIConfig, useModelConfig } from "@/hooks/use-model-config"
@@ -1253,10 +1254,22 @@ export default function ChatPanel({
sendChatMessage(newParts, savedXml, previousXml, sessionId) sendChatMessage(newParts, savedXml, previousXml, sessionId)
} }
// Auto-update listener (must be before early return so it's always active)
useAutoUpdate()
// Collapsed view (desktop only) // Collapsed view (desktop only)
if (!isVisible && !isMobile) { if (!isVisible && !isMobile) {
return ( return (
<div className="h-full flex flex-col items-center pt-4 bg-card border border-border/30 rounded-xl"> <div className="h-full flex flex-col items-center pt-4 bg-card border border-border/30 rounded-xl">
<Toaster
position="bottom-left"
richColors
expand
toastOptions={{
style: { maxWidth: "480px" },
duration: 2000,
}}
/>
<ButtonWithTooltip <ButtonWithTooltip
tooltipContent={dict.nav.showPanel} tooltipContent={dict.nav.showPanel}
variant="ghost" variant="ghost"

View File

@@ -107,8 +107,8 @@ export function ChatLobby({
currentInput = "", currentInput = "",
dict, dict,
}: ChatLobbyProps) { }: ChatLobbyProps) {
const [templatesExpanded, setTemplatesExpanded] = useState(true) const [templatesExpanded, setTemplatesExpanded] = useState(false)
const [examplesExpanded, setExamplesExpanded] = useState(true) const [examplesExpanded, setExamplesExpanded] = useState(false)
const [panelVisibility, setPanelVisibility] = useState(getPanelVisibility) const [panelVisibility, setPanelVisibility] = useState(getPanelVisibility)
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false) const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
const [sessionToDelete, setSessionToDelete] = useState<string | null>(null) const [sessionToDelete, setSessionToDelete] = useState<string | null>(null)
@@ -125,25 +125,19 @@ export function ChatLobby({
const hasHistory = sessions.length > 0 const hasHistory = sessions.length > 0
if (!hasHistory) { if (!hasHistory) {
if (!panelVisibility.myTemplates && !panelVisibility.quickExamples) { if (panelVisibility.myTemplates) {
return null return (
<TemplatePanel
setInput={setInput}
onSendTemplate={onSendTemplate}
currentInput={currentInput}
/>
)
} }
return ( if (panelVisibility.quickExamples) {
<div className="animate-fade-in"> return <ExamplePanel setInput={setInput} setFiles={setFiles} />
{panelVisibility.myTemplates && ( }
<TemplatePanel return null
setInput={setInput}
onSendTemplate={onSendTemplate}
currentInput={currentInput}
/>
)}
{panelVisibility.quickExamples && (
<div className={panelVisibility.myTemplates ? "mt-6" : ""}>
<ExamplePanel setInput={setInput} setFiles={setFiles} />
</div>
)}
</div>
)
} }
// Show history + collapsible examples when there are sessions // Show history + collapsible examples when there are sessions

View File

@@ -195,22 +195,7 @@ export function ToolCallCard({
{input && isExpanded && ( {input && isExpanded && (
<div className="px-4 py-3 border-t border-border/40 bg-muted/20"> <div className="px-4 py-3 border-t border-border/40 bg-muted/20">
{typeof input === "object" && input.xml ? ( {typeof input === "object" && input.xml ? (
state === "input-streaming" || <CodeBlock code={input.xml} language="xml" />
state === "input-available" ? (
<pre
className="text-[11px] leading-relaxed overflow-x-auto overflow-y-auto max-h-48 scrollbar-thin break-all whitespace-pre-wrap"
style={{
fontFamily:
"var(--font-mono), ui-monospace, monospace",
margin: 0,
padding: 0,
}}
>
{input.xml}
</pre>
) : (
<CodeBlock code={input.xml} language="xml" />
)
) : typeof input === "object" && ) : typeof input === "object" &&
input.operations && input.operations &&
Array.isArray(input.operations) ? ( Array.isArray(input.operations) ? (

124
components/update-toast.tsx Normal file
View File

@@ -0,0 +1,124 @@
"use client"
import type React from "react"
interface UpdateToastAvailableProps {
variant: "download"
version: string
onDownload: () => void
onDismiss: () => void
}
interface UpdateToastManualProps {
variant: "manual"
version: string
url: string
onDismiss: () => void
}
interface UpdateToastDownloadingProps {
variant: "downloading"
percent: number
onDismiss: () => void
}
type UpdateToastProps =
| UpdateToastAvailableProps
| UpdateToastManualProps
| UpdateToastDownloadingProps
export function UpdateToast(props: UpdateToastProps) {
const { variant, onDismiss } = props
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === "Escape") {
e.preventDefault()
onDismiss()
}
}
return (
<div
role="alert"
aria-live="polite"
tabIndex={0}
onKeyDown={handleKeyDown}
className="flex items-center gap-3 bg-card border border-border/50 px-4 py-3 rounded-xl shadow-sm"
>
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-primary/10 flex-shrink-0">
<svg
className="w-4 h-4 text-primary"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
<polyline points="7 10 12 15 17 10" />
<line x1="12" y1="15" x2="12" y2="3" />
</svg>
</div>
<div className="flex-1 min-w-0">
{variant === "downloading" ? (
<span className="text-sm text-foreground">
Downloading update... {Math.round(props.percent)}%
</span>
) : (
<span className="text-sm text-foreground">
Version {props.version} is available
</span>
)}
</div>
{variant === "download" && (
<button
type="button"
onClick={(e) => {
e.stopPropagation()
props.onDownload()
}}
className="text-xs font-medium px-3 py-1.5 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors flex-shrink-0"
>
Download
</button>
)}
{variant === "manual" && (
<button
type="button"
onClick={(e) => {
e.stopPropagation()
window.open(props.url, "_blank")
}}
className="text-xs font-medium px-3 py-1.5 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors flex-shrink-0"
>
Download
</button>
)}
<button
type="button"
onClick={onDismiss}
className="text-muted-foreground hover:text-foreground transition-colors flex-shrink-0"
aria-label="Dismiss"
>
<svg
className="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</button>
</div>
)
}

View File

@@ -30,7 +30,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
- [目录](#目录) - [目录](#目录)
- [示例](#示例) - [示例](#示例)
- [功能特性](#功能特性) - [功能特性](#功能特性)
- [MCP服务器](#mcp服务器) - [MCP服务器(预览)](#mcp服务器预览)
- [Claude Code CLI](#claude-code-cli) - [Claude Code CLI](#claude-code-cli)
- [快速开始](#快速开始) - [快速开始](#快速开始)
- [在线试用](#在线试用) - [在线试用](#在线试用)
@@ -56,31 +56,31 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
<tr> <tr>
<td colspan="2" valign="top" align="center"> <td colspan="2" valign="top" align="center">
<strong>动画Transformer连接器</strong><br /> <strong>动画Transformer连接器</strong><br />
<p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p> <p><strong>提示词:</strong> 给我一个带有**动画连接器**的Transformer架构图。</p>
<img src="../../public/animated_connectors.svg" alt="带动画连接器的Transformer架构" width="480" /> <img src="../../public/animated_connectors.svg" alt="带动画连接器的Transformer架构" width="480" />
</td> </td>
</tr> </tr>
<tr> <tr>
<td width="50%" valign="top"> <td width="50%" valign="top">
<strong>RAG技术图</strong><br /> <strong>GCP架构图</strong><br />
<p><strong>Prompt:</strong> Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion</p> <p><strong>提示词:</strong> 使用**GCP图标**生成一个GCP架构图。在这个图中用户连接到托管在实例上的前端。</p>
<img src="../../public/rag_prod.svg" alt="RAG架构图" width="480" /> <img src="../../public/gcp_demo.svg" alt="GCP架构图" width="480" />
</td> </td>
<td width="50%" valign="top"> <td width="50%" valign="top">
<strong>React和AWS认证流程</strong><br /> <strong>AWS架构图</strong><br />
<p><strong>Prompt:</strong> Generate authentication process using React with **AWS**. Use Serverless architecture.</p> <p><strong>提示词:</strong> 使用**AWS图标**生成一个AWS架构图。在这个图中用户连接到托管在实例上的前端。</p>
<img src="../../public/auth.svg" alt="认证架构图" width="480" /> <img src="../../public/aws_demo.svg" alt="AWS架构图" width="480" />
</td> </td>
</tr> </tr>
<tr> <tr>
<td width="50%" valign="top"> <td width="50%" valign="top">
<strong>开放式创新</strong><br /> <strong>Azure架构图</strong><br />
<p><strong>Prompt:</strong> Create visualization of Henry Chesbrough's Open Innovation model.</p> <p><strong>提示词:</strong> 使用**Azure图标**生成一个Azure架构图。在这个图中用户连接到托管在实例上的前端。</p>
<img src="../../public/inno.svg" alt="开放式创新图" width="480" /> <img src="../../public/azure_demo.svg" alt="Azure架构图" width="480" />
</td> </td>
<td width="50%" valign="top"> <td width="50%" valign="top">
<strong>猫咪素描</strong><br /> <strong>猫咪素描</strong><br />
<p><strong>Prompt:</strong> Draw a cute cat for me.</p> <p><strong>提示词:</strong> 给我画一只可爱的猫。</p>
<img src="../../public/cat_demo.svg" alt="猫咪绘图" width="240" /> <img src="../../public/cat_demo.svg" alt="猫咪绘图" width="240" />
</td> </td>
</tr> </tr>
@@ -98,7 +98,9 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
- **云架构图支持**专门支持生成云架构图AWS、GCP、Azure - **云架构图支持**专门支持生成云架构图AWS、GCP、Azure
- **动画连接器**:在图表元素之间创建动态动画连接器,实现更好的可视化效果 - **动画连接器**:在图表元素之间创建动态动画连接器,实现更好的可视化效果
## MCP服务器 ## MCP服务器(预览)
> **预览功能**:此功能为实验性功能,可能不稳定。
通过MCP模型上下文协议在Claude Desktop、Cursor和VS Code等AI代理中使用Next AI Draw.io。 通过MCP模型上下文协议在Claude Desktop、Cursor和VS Code等AI代理中使用Next AI Draw.io。

View File

@@ -28,7 +28,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
- [目次](#目次) - [目次](#目次)
- [](#例) - [](#例)
- [機能](#機能) - [機能](#機能)
- [MCPサーバー](#mcpサーバー) - [MCPサーバー(プレビュー)](#mcpサーバープレビュー)
- [Claude Code CLI](#claude-code-cli) - [Claude Code CLI](#claude-code-cli)
- [はじめに](#はじめに) - [はじめに](#はじめに)
- [オンラインで試す](#オンラインで試す) - [オンラインで試す](#オンラインで試す)
@@ -54,31 +54,31 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
<tr> <tr>
<td colspan="2" valign="top" align="center"> <td colspan="2" valign="top" align="center">
<strong>アニメーションTransformerコネクタ</strong><br /> <strong>アニメーションTransformerコネクタ</strong><br />
<p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p> <p><strong>プロンプト:</strong> **アニメーションコネクタ**付きのTransformerアーキテクチャ図を作成してください。</p>
<img src="../../public/animated_connectors.svg" alt="アニメーションコネクタ付きTransformerアーキテクチャ" width="480" /> <img src="../../public/animated_connectors.svg" alt="アニメーションコネクタ付きTransformerアーキテクチャ" width="480" />
</td> </td>
</tr> </tr>
<tr> <tr>
<td width="50%" valign="top"> <td width="50%" valign="top">
<strong>RAG技術ダイアグラム</strong><br /> <strong>GCPアーキテクチャ図</strong><br />
<p><strong>Prompt:</strong> Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion</p> <p><strong>プロンプト:</strong> **GCPアイコン**を使用してGCPアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。</p>
<img src="../../public/rag_prod.svg" alt="RAGアーキテクチャ図" width="480" /> <img src="../../public/gcp_demo.svg" alt="GCPアーキテクチャ図" width="480" />
</td> </td>
<td width="50%" valign="top"> <td width="50%" valign="top">
<strong>ReactとAWSによる認証</strong><br /> <strong>AWSアーキテクチャ図</strong><br />
<p><strong>Prompt:</strong> Generate authentication process using React with **AWS**. Use Serverless architecture.</p> <p><strong>プロンプト:</strong> **AWSアイコン**を使用してAWSアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。</p>
<img src="../../public/auth.svg" alt="認証アーキテクチャ図" width="480" /> <img src="../../public/aws_demo.svg" alt="AWSアーキテクチャ図" width="480" />
</td> </td>
</tr> </tr>
<tr> <tr>
<td width="50%" valign="top"> <td width="50%" valign="top">
<strong>オープンイノベーション</strong><br /> <strong>Azureアーキテクチャ図</strong><br />
<p><strong>Prompt:</strong> Create visualization of Henry Chesbrough's Open Innovation model.</p> <p><strong>プロンプト:</strong> **Azureアイコン**を使用してAzureアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。</p>
<img src="../../public/inno.svg" alt="オープンイノベーション図" width="480" /> <img src="../../public/azure_demo.svg" alt="Azureアーキテクチャ図" width="480" />
</td> </td>
<td width="50%" valign="top"> <td width="50%" valign="top">
<strong>猫のスケッチ</strong><br /> <strong>猫のスケッチ</strong><br />
<p><strong>Prompt:</strong> Draw a cute cat for me.</p> <p><strong>プロンプト:</strong> かわいい猫を描いてください。</p>
<img src="../../public/cat_demo.svg" alt="猫の絵" width="240" /> <img src="../../public/cat_demo.svg" alt="猫の絵" width="240" />
</td> </td>
</tr> </tr>
@@ -96,7 +96,9 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
- **クラウドアーキテクチャダイアグラムサポート**クラウドアーキテクチャダイアグラムの生成を専門的にサポートAWS、GCP、Azure - **クラウドアーキテクチャダイアグラムサポート**クラウドアーキテクチャダイアグラムの生成を専門的にサポートAWS、GCP、Azure
- **アニメーションコネクタ**:より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成 - **アニメーションコネクタ**:より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成
## MCPサーバー ## MCPサーバー(プレビュー)
> **プレビュー機能**:この機能は実験的であり、安定しない可能性があります。
MCPModel Context Protocolを介して、Claude Desktop、Cursor、VS CodeなどのAIエージェントでNext AI Draw.ioを使用できます。 MCPModel Context Protocolを介して、Claude Desktop、Cursor、VS CodeなどのAIエージェントでNext AI Draw.ioを使用できます。

View File

@@ -2,6 +2,14 @@
* Type declarations for Electron API exposed via preload script * Type declarations for Electron API exposed via preload script
*/ */
/** Update status data sent from main process */
type UpdateStatusData =
| { status: "available"; version: string }
| { status: "available-manual"; version: string; url: string }
| { status: "downloading"; percent: number }
| { status: "downloaded" }
| { status: "error"; message: string }
/** Configuration preset interface */ /** Configuration preset interface */
interface ConfigPreset { interface ConfigPreset {
id: string id: string
@@ -74,6 +82,12 @@ declare global {
> >
/** Set user's preferred locale */ /** Set user's preferred locale */
setUserLocale: (locale: string) => Promise<SetUserLocaleResult> setUserLocale: (locale: string) => Promise<SetUserLocaleResult>
/** Listen for update status events from main process */
onUpdateStatus: (
callback: (data: UpdateStatusData) => void,
) => () => void
/** Start downloading the available update */
startDownload: () => Promise<void>
} }
/** Settings window Electron API */ /** Settings window Electron API */

View File

@@ -6,6 +6,7 @@ import {
type MenuItemConstructorOptions, type MenuItemConstructorOptions,
shell, shell,
} from "electron" } from "electron"
import { checkForUpdatesManual } from "./auto-updater"
import { import {
applyPresetToEnv, applyPresetToEnv,
getAllPresets, getAllPresets,
@@ -156,6 +157,11 @@ function getMenuTemplate(): MenuItemConstructorOptions[] {
template.push({ template.push({
label: t.help, label: t.help,
submenu: [ submenu: [
{
label: t.checkForUpdates,
click: () => checkForUpdatesManual(),
},
{ type: "separator" },
{ {
label: t.documentation, label: t.documentation,
click: async () => { click: async () => {

View File

@@ -0,0 +1,282 @@
import https from "node:https"
import { app, dialog, ipcMain } from "electron"
import electronUpdater from "electron-updater"
import { getMainWindow } from "./window-manager"
const { autoUpdater } = electronUpdater
const CHECK_INTERVAL = 4 * 60 * 60 * 1000 // 4 hours
const STARTUP_DELAY = 10_000 // 10 seconds
const GITHUB_API_URL =
"https://api.github.com/repos/DayuanJiang/next-ai-draw-io/releases/latest"
let isChecking = false
let updateDownloaded = false
/**
* Whether this platform supports electron-updater auto-update.
* macOS: disabled because builds are ad-hoc signed (no Apple Developer cert).
*/
function supportsAutoUpdate(): boolean {
if (process.platform === "darwin") return false
if (process.platform === "win32" && process.env.PORTABLE_EXECUTABLE_DIR)
return false
if (process.platform === "linux" && !process.env.APPIMAGE) return false
return true
}
/**
* Compare two semver-like version strings numerically.
* Returns true if remote > local.
* Strips prerelease/build metadata (e.g., "1.2.3-beta.1" → "1.2.3").
*/
function isNewerVersion(remote: string, local: string): boolean {
const strip = (v: string) => v.replace(/^v/, "").split("-")[0].split("+")[0]
const r = strip(remote).split(".").map(Number)
const l = strip(local).split(".").map(Number)
const len = Math.max(r.length, l.length)
for (let i = 0; i < len; i++) {
const rv = r[i] || 0
const lv = l[i] || 0
if (rv > lv) return true
if (rv < lv) return false
}
return false
}
/**
* Send update status to the renderer via IPC
*/
function sendStatus(data: Record<string, unknown>) {
const win = getMainWindow()
if (win && !win.isDestroyed()) {
win.webContents.send("update-status", data)
}
}
/**
* Check GitHub API for latest release (used on macOS and Linux DEB)
*/
function checkGitHubRelease(manual: boolean) {
const req = https.get(
GITHUB_API_URL,
{
headers: { "User-Agent": "next-ai-draw-io" },
timeout: 15000,
},
(res) => {
if (res.statusCode !== 200) {
console.error(`GitHub API returned status ${res.statusCode}`)
if (manual) {
dialog.showMessageBox({
type: "error",
title: "Update Check Failed",
message:
"Could not check for updates. Please try again later.",
})
}
isChecking = false
return
}
res.setEncoding("utf8")
let body = ""
res.on("data", (chunk: string) => {
body += chunk
})
res.on("end", () => {
try {
const data = JSON.parse(body)
const remoteVersion = data.tag_name || ""
const localVersion = app.getVersion()
if (isNewerVersion(remoteVersion, localVersion)) {
sendStatus({
status: "available-manual",
version: remoteVersion.replace(/^v/, ""),
url: data.html_url,
})
} else if (manual) {
dialog.showMessageBox({
type: "info",
title: "No Updates",
message: "You're up to date!",
detail: `Version ${localVersion} is the latest version.`,
})
}
} catch (err) {
console.error("Failed to parse GitHub release:", err)
if (manual) {
dialog.showMessageBox({
type: "error",
title: "Update Check Failed",
message:
"Could not check for updates. Please try again later.",
})
}
}
isChecking = false
})
},
)
req.on("timeout", () => {
req.destroy()
isChecking = false
})
req.on("error", (err) => {
console.error("GitHub API request failed:", err)
if (manual) {
dialog.showMessageBox({
type: "error",
title: "Update Check Failed",
message: "Could not check for updates. Please try again later.",
})
}
isChecking = false
})
req.end()
}
/**
* Set up electron-updater event handlers (Windows NSIS / Linux AppImage)
*/
function setupAutoUpdater() {
autoUpdater.autoDownload = false
autoUpdater.autoInstallOnAppQuit = true
autoUpdater.on("update-available", (info) => {
console.log("Update available:", info.version)
sendStatus({ status: "available", version: info.version })
isChecking = false
})
autoUpdater.on("update-not-available", () => {
console.log("No update available")
isChecking = false
})
autoUpdater.on("download-progress", (progress) => {
sendStatus({
status: "downloading",
percent: progress.percent,
})
})
autoUpdater.on("update-downloaded", () => {
updateDownloaded = true
console.log("Update downloaded")
sendStatus({ status: "downloaded" })
showRestartDialog()
})
autoUpdater.on("error", (err) => {
console.error("Auto-update error:", err)
sendStatus({ status: "error", message: String(err) })
isChecking = false
})
// IPC: renderer requests download
ipcMain.handle("updater:start-download", () => {
return autoUpdater.downloadUpdate()
})
}
/**
* Show restart dialog after update downloaded
*/
async function showRestartDialog() {
const result = await dialog.showMessageBox({
type: "info",
buttons: ["Restart Now", "Later"],
defaultId: 0,
cancelId: 1,
title: "Update Ready",
message: "A new version has been downloaded.",
detail: "Restart the app to install the update.",
})
if (result.response === 0) {
autoUpdater.quitAndInstall()
}
}
/**
* Run a single update check
*/
function doCheck(manual: boolean) {
if (isChecking) return
isChecking = true
// If update already downloaded, just re-show restart dialog
if (updateDownloaded && supportsAutoUpdate()) {
isChecking = false
showRestartDialog()
return
}
if (supportsAutoUpdate()) {
// For manual check, register listeners BEFORE triggering check
// to avoid race where event fires before listeners are attached
if (manual) {
const onNotAvailable = () => {
dialog.showMessageBox({
type: "info",
title: "No Updates",
message: "You're up to date!",
detail: `Version ${app.getVersion()} is the latest version.`,
})
cleanup()
}
const onAvailable = () => cleanup()
const onError = () => cleanup()
const cleanup = () => {
autoUpdater.off("update-not-available", onNotAvailable)
autoUpdater.off("update-available", onAvailable)
autoUpdater.off("error", onError)
}
autoUpdater.once("update-not-available", onNotAvailable)
autoUpdater.once("update-available", onAvailable)
autoUpdater.once("error", onError)
}
autoUpdater.checkForUpdates().catch((err) => {
console.error("checkForUpdates failed:", err)
isChecking = false
})
} else {
checkGitHubRelease(manual)
}
}
/**
* Initialize auto-updater. Call once after createWindow().
*/
export function initAutoUpdater() {
if (!app.isPackaged) return
if (supportsAutoUpdate()) {
setupAutoUpdater()
} else {
// Register no-op handler so renderer doesn't get an unhandled error
ipcMain.handle("updater:start-download", () => {})
}
// First check after startup delay
setTimeout(() => doCheck(false), STARTUP_DELAY)
// Periodic checks
setInterval(() => doCheck(false), CHECK_INTERVAL)
}
/**
* Manual update check from menu item
*/
export function checkForUpdatesManual() {
if (!app.isPackaged) {
dialog.showMessageBox({
type: "info",
title: "Development Mode",
message: "Auto-update is not available in development mode.",
})
return
}
doCheck(true)
}

View File

@@ -1,5 +1,6 @@
import { app, BrowserWindow, dialog, shell } from "electron" import { app, BrowserWindow, dialog, shell } from "electron"
import { buildAppMenu } from "./app-menu" import { buildAppMenu } from "./app-menu"
import { initAutoUpdater } from "./auto-updater"
import { getCurrentPresetEnv } from "./config-manager" import { getCurrentPresetEnv } from "./config-manager"
import { loadEnvFile } from "./env-loader" import { loadEnvFile } from "./env-loader"
import { registerIpcHandlers } from "./ipc-handlers" import { registerIpcHandlers } from "./ipc-handlers"
@@ -58,6 +59,11 @@ if (!gotTheLock) {
// Create main window // Create main window
createWindow(serverUrl) createWindow(serverUrl)
// Initialize auto-updater (production only)
if (!isDev) {
initAutoUpdater()
}
} catch (error) { } catch (error) {
console.error("Failed to start application:", error) console.error("Failed to start application:", error)
dialog.showErrorBox( dialog.showErrorBox(

View File

@@ -33,6 +33,7 @@ export interface MenuTranslations {
help: string help: string
documentation: string documentation: string
reportIssue: string reportIssue: string
checkForUpdates: string
} }
const translations: Record<MenuLocale, MenuTranslations> = { const translations: Record<MenuLocale, MenuTranslations> = {
@@ -62,6 +63,7 @@ const translations: Record<MenuLocale, MenuTranslations> = {
help: "Help", help: "Help",
documentation: "Documentation", documentation: "Documentation",
reportIssue: "Report Issue", reportIssue: "Report Issue",
checkForUpdates: "Check for Updates...",
}, },
zh: { zh: {
@@ -90,6 +92,7 @@ const translations: Record<MenuLocale, MenuTranslations> = {
help: "帮助", help: "帮助",
documentation: "文档", documentation: "文档",
reportIssue: "报告问题", reportIssue: "报告问题",
checkForUpdates: "检查更新...",
}, },
ja: { ja: {
@@ -118,6 +121,7 @@ const translations: Record<MenuLocale, MenuTranslations> = {
help: "ヘルプ", help: "ヘルプ",
documentation: "ドキュメント", documentation: "ドキュメント",
reportIssue: "問題を報告", reportIssue: "問題を報告",
checkForUpdates: "アップデートを確認...",
}, },
"zh-Hant": { "zh-Hant": {
@@ -146,6 +150,7 @@ const translations: Record<MenuLocale, MenuTranslations> = {
help: "說明", help: "說明",
documentation: "文件", documentation: "文件",
reportIssue: "回報問題", reportIssue: "回報問題",
checkForUpdates: "檢查更新...",
}, },
} }

View File

@@ -1,4 +1,12 @@
import { contextBridge, ipcRenderer } from "electron" import { contextBridge, type IpcRendererEvent, ipcRenderer } from "electron"
// Locally defined to avoid dependency on electron.d.ts compilation scope
type UpdateStatus =
| { status: "available"; version: string }
| { status: "available-manual"; version: string; url: string }
| { status: "downloading"; percent: number }
| { status: "downloaded" }
| { status: "error"; message: string }
/** /**
* Expose safe APIs to the renderer process * Expose safe APIs to the renderer process
@@ -31,4 +39,13 @@ contextBridge.exposeInMainWorld("electronAPI", {
getUserLocale: () => ipcRenderer.invoke("get-user-locale"), getUserLocale: () => ipcRenderer.invoke("get-user-locale"),
setUserLocale: (locale: string) => setUserLocale: (locale: string) =>
ipcRenderer.invoke("set-user-locale", locale), ipcRenderer.invoke("set-user-locale", locale),
// Auto-update
onUpdateStatus: (callback: (data: UpdateStatus) => void) => {
const handler = (_event: IpcRendererEvent, data: UpdateStatus) =>
callback(data)
ipcRenderer.on("update-status", handler)
return () => ipcRenderer.removeListener("update-status", handler)
},
startDownload: () => ipcRenderer.invoke("updater:start-download"),
}) })

86
hooks/use-auto-update.ts Normal file
View File

@@ -0,0 +1,86 @@
import { createElement, useEffect, useRef } from "react"
import { toast } from "sonner"
import { UpdateToast } from "@/components/update-toast"
export function useAutoUpdate() {
const downloadToastId = useRef<string | number | null>(null)
useEffect(() => {
const api = (window as Window).electronAPI
if (!api?.onUpdateStatus) return
const cleanup = api.onUpdateStatus((data) => {
switch (data.status) {
case "available":
toast.custom(
(t) =>
createElement(UpdateToast, {
variant: "download",
version: data.version,
onDownload: () => {
toast.dismiss(t)
api.startDownload().catch(() => {
// Error will come through update-status channel
})
},
onDismiss: () => toast.dismiss(t),
}),
{ duration: 15000 },
)
break
case "available-manual":
toast.custom(
(t) =>
createElement(UpdateToast, {
variant: "manual",
version: data.version,
url: data.url,
onDismiss: () => toast.dismiss(t),
}),
{ duration: Number.POSITIVE_INFINITY },
)
break
case "downloading": {
const id =
downloadToastId.current ??
`download-progress-${Date.now()}`
downloadToastId.current = id
toast.custom(
(t) =>
createElement(UpdateToast, {
variant: "downloading",
percent: data.percent,
onDismiss: () => toast.dismiss(t),
}),
{ id, duration: Number.POSITIVE_INFINITY },
)
break
}
case "downloaded":
// Dismiss progress toast — native restart dialog handles the rest
if (downloadToastId.current) {
toast.dismiss(downloadToastId.current)
downloadToastId.current = null
}
break
case "error":
if (downloadToastId.current) {
// Error during active download — inform the user
toast.dismiss(downloadToastId.current)
downloadToastId.current = null
toast.error(
"Update download failed. Please try again later.",
)
}
// Otherwise: silent — background check failure, logged in main process
break
}
})
return cleanup
}, [])
}

View File

@@ -1356,11 +1356,12 @@ export function supportsImageInput(modelId: string): boolean {
} }
// Qwen text models (not vision variants like qwen-vl) // Qwen text models (not vision variants like qwen-vl)
// Qwen3.5 series (qwen3.5, qwen3.5-plus, qwen3.5-flash) natively support image input // qwen3.5-plus is a vision model
if ( if (
lowerModelId.includes("qwen") && lowerModelId.includes("qwen") &&
!hasVisionIndicator && !hasVisionIndicator &&
!lowerModelId.includes("qwen3.5") !lowerModelId.includes("qwen3.5-plus") &&
!lowerModelId.includes("qwen3.5-flash")
) { ) {
return false return false
} }

View File

@@ -76,7 +76,8 @@
"creativeDescription": "Draw something fun and creative", "creativeDescription": "Draw something fun and creative",
"cachedNote": "Examples are cached for instant response", "cachedNote": "Examples are cached for instant response",
"mcpServer": "MCP Server", "mcpServer": "MCP Server",
"mcpDescription": "Use in Claude Desktop, VS Code & Cursor" "mcpDescription": "Use in Claude Desktop, VS Code & Cursor",
"preview": "PREVIEW"
}, },
"settings": { "settings": {
"title": "Settings", "title": "Settings",

View File

@@ -76,7 +76,8 @@
"creativeDescription": "楽しくてクリエイティブなものを描く", "creativeDescription": "楽しくてクリエイティブなものを描く",
"cachedNote": "例はキャッシュされ、即座に応答します", "cachedNote": "例はキャッシュされ、即座に応答します",
"mcpServer": "MCP サーバー", "mcpServer": "MCP サーバー",
"mcpDescription": "Claude Desktop、VS Code、Cursor で使用" "mcpDescription": "Claude Desktop、VS Code、Cursor で使用",
"preview": "プレビュー"
}, },
"settings": { "settings": {
"title": "設定", "title": "設定",

View File

@@ -76,7 +76,8 @@
"creativeDescription": "繪製有趣且富有創意的內容", "creativeDescription": "繪製有趣且富有創意的內容",
"cachedNote": "範例已快取,可即時回應", "cachedNote": "範例已快取,可即時回應",
"mcpServer": "MCP 伺服器", "mcpServer": "MCP 伺服器",
"mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用" "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用",
"preview": "預覽"
}, },
"settings": { "settings": {
"title": "設定", "title": "設定",

View File

@@ -76,7 +76,8 @@
"creativeDescription": "绘制有趣且富有创意的内容", "creativeDescription": "绘制有趣且富有创意的内容",
"cachedNote": "示例已缓存,可即时响应", "cachedNote": "示例已缓存,可即时响应",
"mcpServer": "MCP 服务器", "mcpServer": "MCP 服务器",
"mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用" "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用",
"preview": "预览"
}, },
"settings": { "settings": {
"title": "设置", "title": "设置",

118
package-lock.json generated
View File

@@ -48,10 +48,9 @@
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"cmdk": "^1.1.1", "cmdk": "^1.1.1",
"electron-updater": "^6.8.3",
"idb": "^8.0.3", "idb": "^8.0.3",
"jsonrepair": "^3.13.1", "jsonrepair": "^3.13.1",
"lightningcss": "^1.32.0",
"lightningcss-linux-x64-gnu": "^1.32.0",
"lucide-react": "^0.577.0", "lucide-react": "^0.577.0",
"motion": "^12.23.25", "motion": "^12.23.25",
"nanoid": "^5.0.0", "nanoid": "^5.0.0",
@@ -2226,9 +2225,6 @@
"arm64" "arm64"
], ],
"dev": true, "dev": true,
"libc": [
"glibc"
],
"license": "MIT OR Apache-2.0", "license": "MIT OR Apache-2.0",
"optional": true, "optional": true,
"os": [ "os": [
@@ -2246,9 +2242,6 @@
"arm64" "arm64"
], ],
"dev": true, "dev": true,
"libc": [
"musl"
],
"license": "MIT OR Apache-2.0", "license": "MIT OR Apache-2.0",
"optional": true, "optional": true,
"os": [ "os": [
@@ -2266,9 +2259,6 @@
"x64" "x64"
], ],
"dev": true, "dev": true,
"libc": [
"glibc"
],
"license": "MIT OR Apache-2.0", "license": "MIT OR Apache-2.0",
"optional": true, "optional": true,
"os": [ "os": [
@@ -2286,9 +2276,6 @@
"x64" "x64"
], ],
"dev": true, "dev": true,
"libc": [
"musl"
],
"license": "MIT OR Apache-2.0", "license": "MIT OR Apache-2.0",
"optional": true, "optional": true,
"os": [ "os": [
@@ -8259,9 +8246,6 @@
"x64" "x64"
], ],
"dev": true, "dev": true,
"libc": [
"glibc"
],
"license": "MPL-2.0", "license": "MPL-2.0",
"optional": true, "optional": true,
"os": [ "os": [
@@ -10062,7 +10046,6 @@
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
"dev": true,
"license": "Python-2.0" "license": "Python-2.0"
}, },
"node_modules/aria-hidden": { "node_modules/aria-hidden": {
@@ -10698,7 +10681,6 @@
"version": "9.5.1", "version": "9.5.1",
"resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.5.1.tgz", "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.5.1.tgz",
"integrity": "sha512-qt41tMfgHTllhResqM5DcnHyDIWNgzHvuY2jDcYP9iaGpkWxTUzV6GQjDeLnlR1/DtdlcsWQbA7sByMpmJFTLQ==", "integrity": "sha512-qt41tMfgHTllhResqM5DcnHyDIWNgzHvuY2jDcYP9iaGpkWxTUzV6GQjDeLnlR1/DtdlcsWQbA7sByMpmJFTLQ==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"debug": "^4.3.4", "debug": "^4.3.4",
@@ -12797,6 +12779,69 @@
"dev": true, "dev": true,
"license": "ISC" "license": "ISC"
}, },
"node_modules/electron-updater": {
"version": "6.8.3",
"resolved": "https://registry.npmjs.org/electron-updater/-/electron-updater-6.8.3.tgz",
"integrity": "sha512-Z6sgw3jgbikWKXei1ENdqFOxBP0WlXg3TtKfz0rgw2vIZFJUyI4pD7ZN7jrkm7EoMK+tcm/qTnPUdqfZukBlBQ==",
"license": "MIT",
"dependencies": {
"builder-util-runtime": "9.5.1",
"fs-extra": "^10.1.0",
"js-yaml": "^4.1.0",
"lazy-val": "^1.0.5",
"lodash.escaperegexp": "^4.1.2",
"lodash.isequal": "^4.5.0",
"semver": "~7.7.3",
"tiny-typed-emitter": "^2.1.0"
}
},
"node_modules/electron-updater/node_modules/fs-extra": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
"integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
"license": "MIT",
"dependencies": {
"graceful-fs": "^4.2.0",
"jsonfile": "^6.0.1",
"universalify": "^2.0.0"
},
"engines": {
"node": ">=12"
}
},
"node_modules/electron-updater/node_modules/jsonfile": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
"integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
"license": "MIT",
"dependencies": {
"universalify": "^2.0.0"
},
"optionalDependencies": {
"graceful-fs": "^4.1.6"
}
},
"node_modules/electron-updater/node_modules/semver": {
"version": "7.7.4",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
"integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
"license": "ISC",
"bin": {
"semver": "bin/semver.js"
},
"engines": {
"node": ">=10"
}
},
"node_modules/electron-updater/node_modules/universalify": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
"license": "MIT",
"engines": {
"node": ">= 10.0.0"
}
},
"node_modules/electron-winstaller": { "node_modules/electron-winstaller": {
"version": "5.4.0", "version": "5.4.0",
"resolved": "https://registry.npmjs.org/electron-winstaller/-/electron-winstaller-5.4.0.tgz", "resolved": "https://registry.npmjs.org/electron-winstaller/-/electron-winstaller-5.4.0.tgz",
@@ -14915,7 +14960,6 @@
"version": "4.2.11", "version": "4.2.11",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
"dev": true,
"license": "ISC" "license": "ISC"
}, },
"node_modules/gzip-size": { "node_modules/gzip-size": {
@@ -16148,7 +16192,6 @@
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz", "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
"integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==", "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"argparse": "^2.0.1" "argparse": "^2.0.1"
@@ -16366,7 +16409,6 @@
"version": "1.0.5", "version": "1.0.5",
"resolved": "https://registry.npmjs.org/lazy-val/-/lazy-val-1.0.5.tgz", "resolved": "https://registry.npmjs.org/lazy-val/-/lazy-val-1.0.5.tgz",
"integrity": "sha512-0/BnGCCfyUMkBpeDgWihanIAF9JmZhHBgUhEqzvf+adhNGLoP6TaiI5oF8oyb3I45P+PcnrqihSf01M0l0G5+Q==", "integrity": "sha512-0/BnGCCfyUMkBpeDgWihanIAF9JmZhHBgUhEqzvf+adhNGLoP6TaiI5oF8oyb3I45P+PcnrqihSf01M0l0G5+Q==",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/levn": { "node_modules/levn": {
@@ -16567,9 +16609,6 @@
"cpu": [ "cpu": [
"x64" "x64"
], ],
"libc": [
"glibc"
],
"license": "MPL-2.0", "license": "MPL-2.0",
"optional": true, "optional": true,
"os": [ "os": [
@@ -16753,9 +16792,6 @@
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
"libc": [
"glibc"
],
"license": "MPL-2.0", "license": "MPL-2.0",
"optional": true, "optional": true,
"os": [ "os": [
@@ -16776,9 +16812,6 @@
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
"libc": [
"musl"
],
"license": "MPL-2.0", "license": "MPL-2.0",
"optional": true, "optional": true,
"os": [ "os": [
@@ -16799,9 +16832,6 @@
"cpu": [ "cpu": [
"x64" "x64"
], ],
"libc": [
"musl"
],
"license": "MPL-2.0", "license": "MPL-2.0",
"optional": true, "optional": true,
"os": [ "os": [
@@ -17069,6 +17099,19 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/lodash.escaperegexp": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz",
"integrity": "sha512-TM9YBvyC84ZxE3rgfefxUWiQKLilstD6k7PTGt6wfbtXF8ixIJLOL3VYyV/z+ZiPLsVxAsKAFVwWlWeb2Y8Yyw==",
"license": "MIT"
},
"node_modules/lodash.isequal": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
"integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
"deprecated": "This package is deprecated. Use require('node:util').isDeepStrictEqual instead.",
"license": "MIT"
},
"node_modules/lodash.merge": { "node_modules/lodash.merge": {
"version": "4.6.2", "version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -21055,7 +21098,6 @@
"version": "1.4.4", "version": "1.4.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.4.4.tgz", "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.4.tgz",
"integrity": "sha512-1n3r/tGXO6b6VXMdFT54SHzT9ytu9yr7TaELowdYpMqY/Ao7EnlQGmAQ1+RatX7Tkkdm6hONI2owqNx2aZj5Sw==", "integrity": "sha512-1n3r/tGXO6b6VXMdFT54SHzT9ytu9yr7TaELowdYpMqY/Ao7EnlQGmAQ1+RatX7Tkkdm6hONI2owqNx2aZj5Sw==",
"dev": true,
"license": "BlueOak-1.0.0", "license": "BlueOak-1.0.0",
"engines": { "engines": {
"node": ">=11.0.0" "node": ">=11.0.0"
@@ -22475,6 +22517,12 @@
"semver": "bin/semver" "semver": "bin/semver"
} }
}, },
"node_modules/tiny-typed-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-typed-emitter/-/tiny-typed-emitter-2.1.0.tgz",
"integrity": "sha512-qVtvMxeXbVej0cQWKqVSSAHmKZEHAvxdF8HEUBFWts8h+xEo5m/lEiPakuyZ3BnCBjOD8i24kzNOiOLLgsSxhA==",
"license": "MIT"
},
"node_modules/tinybench": { "node_modules/tinybench": {
"version": "2.9.0", "version": "2.9.0",
"resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz", "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",

View File

@@ -70,6 +70,7 @@
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"cmdk": "^1.1.1", "cmdk": "^1.1.1",
"electron-updater": "^6.8.3",
"idb": "^8.0.3", "idb": "^8.0.3",
"jsonrepair": "^3.13.1", "jsonrepair": "^3.13.1",
"lucide-react": "^0.577.0", "lucide-react": "^0.577.0",

View File

@@ -1,6 +1,6 @@
{ {
"name": "@next-ai-drawio/mcp-server", "name": "@next-ai-drawio/mcp-server",
"version": "0.1.19", "version": "0.1.17",
"description": "MCP server for Next AI Draw.io - AI-powered diagram generation with real-time browser preview", "description": "MCP server for Next AI Draw.io - AI-powered diagram generation with real-time browser preview",
"type": "module", "type": "module",
"main": "dist/index.js", "main": "dist/index.js",

View File

@@ -4,29 +4,6 @@
*/ */
import http from "node:http" import http from "node:http"
const MAX_BODY_BYTES = 10 * 1024 * 1024 // 10 MiB
function readBody(
req: http.IncomingMessage,
res: http.ServerResponse,
cb: (body: string) => void,
): void {
let body = ""
let size = 0
req.on("data", (chunk: Buffer) => {
size += chunk.length
if (size > MAX_BODY_BYTES) {
res.writeHead(413, { "Content-Type": "application/json" })
res.end(JSON.stringify({ error: "Payload too large" }))
req.destroy()
return
}
body += chunk
})
req.on("end", () => cb(body))
}
import { import {
addHistory, addHistory,
clearHistory, clearHistory,
@@ -178,7 +155,7 @@ export function startHttpServer(port = 6002): Promise<number> {
} }
}) })
server.listen(port, "127.0.0.1", () => { server.listen(port, () => {
serverPort = port serverPort = port
log.info(`HTTP server running on http://localhost:${port}`) log.info(`HTTP server running on http://localhost:${port}`)
resolve(port) resolve(port)
@@ -289,7 +266,11 @@ function handleStateApi(
}), }),
) )
} else if (req.method === "POST") { } else if (req.method === "POST") {
readBody(req, res, (body) => { let body = ""
req.on("data", (chunk) => {
body += chunk
})
req.on("end", () => {
try { try {
const data = JSON.parse(body) const data = JSON.parse(body)
const { sessionId } = data const { sessionId } = data
@@ -366,7 +347,11 @@ function handleRestoreApi(
return return
} }
readBody(req, res, (body) => { let body = ""
req.on("data", (chunk) => {
body += chunk
})
req.on("end", () => {
try { try {
const { sessionId, index } = JSON.parse(body) const { sessionId, index } = JSON.parse(body)
if (!sessionId || index === undefined) { if (!sessionId || index === undefined) {
@@ -408,7 +393,11 @@ function handleHistorySvgApi(
return return
} }
readBody(req, res, (body) => { let body = ""
req.on("data", (chunk) => {
body += chunk
})
req.on("end", () => {
try { try {
const { sessionId, svg } = JSON.parse(body) const { sessionId, svg } = JSON.parse(body)
if (!sessionId || !svg) { if (!sessionId || !svg) {

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 30 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 42 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 27 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 35 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 39 KiB

134
scripts/fix-latest-yml.mjs Normal file
View File

@@ -0,0 +1,134 @@
/**
* Fix latest.yml metadata after Windows code signing.
*
* electron-builder generates latest.yml with hashes of unsigned executables.
* After SignPath signs them, the hashes change. This script reads each
* latest*.yml in release/, finds the matching signed exe in release-signed/,
* and rewrites the sha512 and size fields.
*
* Usage: node scripts/fix-latest-yml.mjs
*/
import { createHash } from "node:crypto"
import {
createReadStream,
existsSync,
readdirSync,
readFileSync,
statSync,
writeFileSync,
} from "node:fs"
import { join } from "node:path"
const RELEASE_DIR = "release"
const SIGNED_DIR = "release-signed"
// Verify directories exist
if (!existsSync(RELEASE_DIR)) {
console.error(`Error: ${RELEASE_DIR}/ directory does not exist`)
process.exit(1)
}
if (!existsSync(SIGNED_DIR)) {
console.error(`Error: ${SIGNED_DIR}/ directory does not exist`)
process.exit(1)
}
// Find all latest*.yml files
const ymlFiles = readdirSync(RELEASE_DIR).filter(
(f) => f.startsWith("latest") && f.endsWith(".yml"),
)
if (ymlFiles.length === 0) {
console.log("No latest*.yml files found in release/")
process.exit(0)
}
/**
* Compute SHA-512 hash of a file using streaming (avoids loading large exe into memory)
*/
function hashFile(filePath) {
return new Promise((resolve, reject) => {
const hash = createHash("sha512")
const stream = createReadStream(filePath)
stream.on("data", (chunk) => hash.update(chunk))
stream.on("end", () => resolve(hash.digest("base64")))
stream.on("error", reject)
})
}
// Build a map of signed exe filenames to their hash and size
const signedFiles = new Map()
for (const f of readdirSync(SIGNED_DIR)) {
if (!f.endsWith(".exe")) continue
const filePath = join(SIGNED_DIR, f)
const sha512 = await hashFile(filePath)
const size = statSync(filePath).size
signedFiles.set(f, { sha512, size })
}
if (signedFiles.size === 0) {
console.error("No signed .exe files found in release-signed/")
process.exit(1)
}
console.log(
`Found ${signedFiles.size} signed exe(s):`,
[...signedFiles.keys()].join(", "),
)
for (const ymlFile of ymlFiles) {
const ymlPath = join(RELEASE_DIR, ymlFile)
const content = readFileSync(ymlPath, "utf-8")
const lines = content.split("\n")
const outputLines = []
// Track the current file entry being processed (by url field)
let currentExeName = null
for (const line of lines) {
// Match " url: SomeFile.exe" inside the files array
const urlMatch = line.match(/^\s+url:\s+(.+\.exe)\s*$/)
if (urlMatch) {
currentExeName = urlMatch[1]
outputLines.push(line)
continue
}
// Match top-level "path: SomeFile.exe"
const pathMatch = line.match(/^path:\s+(.+\.exe)\s*$/)
if (pathMatch) {
currentExeName = pathMatch[1]
outputLines.push(line)
continue
}
// Replace sha512 lines
const sha512Match = line.match(/^(\s*)sha512:\s+/)
if (sha512Match && currentExeName && signedFiles.has(currentExeName)) {
const indent = sha512Match[1]
outputLines.push(
`${indent}sha512: ${signedFiles.get(currentExeName).sha512}`,
)
continue
}
// Replace size lines
const sizeMatch = line.match(/^(\s*)size:\s+\d+/)
if (sizeMatch && currentExeName && signedFiles.has(currentExeName)) {
const indent = sizeMatch[1]
outputLines.push(
`${indent}size: ${signedFiles.get(currentExeName).size}`,
)
// Reset current exe after processing both sha512 and size
currentExeName = null
continue
}
outputLines.push(line)
}
writeFileSync(ymlPath, outputLines.join("\n"))
console.log(`Updated ${ymlFile}`)
}
console.log("Done!")

View File

@@ -200,8 +200,6 @@ describe("supportsImageInput", () => {
it("returns true for Qwen vision models", () => { it("returns true for Qwen vision models", () => {
expect(supportsImageInput("qwen-vl")).toBe(true) expect(supportsImageInput("qwen-vl")).toBe(true)
expect(supportsImageInput("Qwen3.5")).toBe(true)
expect(supportsImageInput("qwen3.5")).toBe(true)
expect(supportsImageInput("qwen3.5-plus")).toBe(true) expect(supportsImageInput("qwen3.5-plus")).toBe(true)
expect(supportsImageInput("qwen3.5-flash")).toBe(true) expect(supportsImageInput("qwen3.5-flash")).toBe(true)
expect(supportsImageInput("qwen3-vl-plus")).toBe(true) expect(supportsImageInput("qwen3-vl-plus")).toBe(true)

View File

@@ -35,7 +35,6 @@
"packages", "packages",
"electron", "electron",
"electron-standalone", "electron-standalone",
"dist-electron", "dist-electron"
"release"
] ]
} }