mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-01-02 14:22:28 +08:00
feat(electron): add desktop application support with electron (#344)
* feat(electron): add desktop application support with electron - implement complete Electron main process architecture with window management, app menu, IPC handlers, and settings window - integrate Next.js server for production builds with embedded standalone server - add configuration management with persistent storage and env file support - create preload scripts with secure context bridge for renderer communication - set up electron-builder configuration for multi-platform packaging (macOS, Windows, Linux) - add GitHub Actions workflow for automated release builds - include development scripts for hot-reload during Electron development * feat(electron): enhance security and stability - encrypt API keys using Electron safeStorage API before persisting to disk - add error handling and rollback for preset switching failures - extract inline styles to external CSS file and remove unsafe-inline from CSP - implement dynamic port allocation with automatic fallback for production builds * fix(electron): add maintainer field for Linux .deb package - add maintainer email to linux configuration in electron-builder.yml - required for building .deb packages * fix(electron): use shx for cross-platform file copying - replace Unix-only cp -r with npx shx cp -r - add shx as devDependency for Windows compatibility * fix(electron): fix runtime icon path for all platforms - use icon.png directly instead of platform-specific formats - electron-builder handles icon conversion during packaging - macOS uses embedded icon from app bundle, no explicit path needed - add icon.png to extraResources for Windows/Linux runtime access * fix(electron): add security warning for plaintext API key storage - warn user when safeStorage is unavailable (Linux without keyring) - fail secure: throw error if encryption fails instead of storing plaintext - prevent duplicate warnings with hasWarnedAboutPlaintext flag * fix(electron): add remaining review fixes - Add Windows ARM64 architecture support - Add IPC input validation with config key whitelist - Add server.js existence check before starting Next.js server - Make afterPack throw error on missing directories - Add workflow permissions for release job --------- Co-authored-by: dayuan.jiang <jdy.toh@gmail.com>
This commit is contained in:
chouheiwa
100
.github/workflows/electron-release.yml
vendored
Normal file
100
.github/workflows/electron-release.yml
vendored
Normal file
@@ -0,0 +1,100 @@
|
||||
name: Electron Release
|
||||
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- "v*"
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
version:
|
||||
description: "Version tag (e.g., v0.4.5)"
|
||||
required: false
|
||||
|
||||
jobs:
|
||||
build:
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
include:
|
||||
- os: macos-latest
|
||||
platform: mac
|
||||
- os: windows-latest
|
||||
platform: win
|
||||
- os: ubuntu-latest
|
||||
platform: linux
|
||||
|
||||
runs-on: ${{ matrix.os }}
|
||||
|
||||
steps:
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20
|
||||
cache: "npm"
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Build Electron app
|
||||
run: npm run dist:${{ matrix.platform }}
|
||||
env:
|
||||
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
- name: Upload macOS artifacts
|
||||
if: matrix.platform == 'mac'
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: mac-build
|
||||
path: |
|
||||
release/*.dmg
|
||||
release/*.zip
|
||||
if-no-files-found: error
|
||||
|
||||
- name: Upload Windows artifacts
|
||||
if: matrix.platform == 'win'
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: win-build
|
||||
path: |
|
||||
release/*.exe
|
||||
if-no-files-found: error
|
||||
|
||||
- name: Upload Linux artifacts
|
||||
if: matrix.platform == 'linux'
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: linux-build
|
||||
path: |
|
||||
release/*.AppImage
|
||||
release/*.deb
|
||||
if-no-files-found: error
|
||||
|
||||
release:
|
||||
needs: build
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
contents: write
|
||||
if: startsWith(github.ref, 'refs/tags/')
|
||||
|
||||
steps:
|
||||
- name: Download all artifacts
|
||||
uses: actions/download-artifact@v4
|
||||
with:
|
||||
path: artifacts
|
||||
|
||||
- name: Create Release
|
||||
uses: softprops/action-gh-release@v1
|
||||
with:
|
||||
files: |
|
||||
artifacts/**/*.dmg
|
||||
artifacts/**/*.zip
|
||||
artifacts/**/*.exe
|
||||
artifacts/**/*.AppImage
|
||||
artifacts/**/*.deb
|
||||
draft: true
|
||||
generate_release_notes: true
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
13
.gitignore
vendored
13
.gitignore
vendored
@@ -50,3 +50,16 @@ push-via-ec2.sh
|
||||
.wrangler/
|
||||
.env*.local
|
||||
|
||||
# Electron
|
||||
/dist-electron/
|
||||
/release/
|
||||
/electron-standalone/
|
||||
*.dmg
|
||||
*.exe
|
||||
*.AppImage
|
||||
*.deb
|
||||
*.rpm
|
||||
*.snap
|
||||
|
||||
CLAUDE.md
|
||||
.spec-workflow
|
||||
96
electron-builder.yml
Normal file
96
electron-builder.yml
Normal file
@@ -0,0 +1,96 @@
|
||||
appId: com.nextaidrawio.app
|
||||
productName: Next AI Draw.io
|
||||
copyright: Copyright © 2024 Next AI Draw.io
|
||||
electronVersion: 39.2.7
|
||||
|
||||
directories:
|
||||
output: release
|
||||
buildResources: resources
|
||||
|
||||
afterPack: ./scripts/afterPack.cjs
|
||||
|
||||
files:
|
||||
- dist-electron/**/*
|
||||
- "!node_modules"
|
||||
|
||||
asarUnpack:
|
||||
- "**/*.node"
|
||||
|
||||
extraResources:
|
||||
# Copy prepared standalone directory (includes node_modules)
|
||||
- from: electron-standalone/
|
||||
to: standalone/
|
||||
# Copy icon for runtime use (Windows/Linux)
|
||||
- from: resources/icon.png
|
||||
to: icon.png
|
||||
|
||||
# macOS configuration
|
||||
mac:
|
||||
category: public.app-category.productivity
|
||||
icon: resources/icon.png
|
||||
target:
|
||||
- target: dmg
|
||||
arch:
|
||||
- x64
|
||||
- arm64
|
||||
- target: zip
|
||||
arch:
|
||||
- x64
|
||||
- arm64
|
||||
hardenedRuntime: true
|
||||
gatekeeperAssess: false
|
||||
entitlements: resources/entitlements.mac.plist
|
||||
entitlementsInherit: resources/entitlements.mac.plist
|
||||
|
||||
dmg:
|
||||
contents:
|
||||
- x: 130
|
||||
y: 220
|
||||
- x: 410
|
||||
y: 220
|
||||
type: link
|
||||
path: /Applications
|
||||
window:
|
||||
width: 540
|
||||
height: 380
|
||||
|
||||
# Windows configuration
|
||||
win:
|
||||
icon: resources/icon.png
|
||||
target:
|
||||
- target: nsis
|
||||
arch:
|
||||
- x64
|
||||
- arm64
|
||||
- target: portable
|
||||
arch:
|
||||
- x64
|
||||
- arm64
|
||||
|
||||
nsis:
|
||||
oneClick: false
|
||||
perMachine: false
|
||||
allowToChangeInstallationDirectory: true
|
||||
deleteAppDataOnUninstall: false
|
||||
createDesktopShortcut: true
|
||||
createStartMenuShortcut: true
|
||||
|
||||
# Linux configuration
|
||||
linux:
|
||||
icon: resources/icon.png
|
||||
category: Office
|
||||
maintainer: Next AI Draw.io <nextaidrawio@users.noreply.github.com>
|
||||
target:
|
||||
- target: AppImage
|
||||
arch:
|
||||
- x64
|
||||
- arm64
|
||||
- target: deb
|
||||
arch:
|
||||
- x64
|
||||
- arm64
|
||||
|
||||
# Publish configuration (optional)
|
||||
publish:
|
||||
provider: github
|
||||
releaseType: release
|
||||
74
electron.d.ts
vendored
Normal file
74
electron.d.ts
vendored
Normal file
@@ -0,0 +1,74 @@
|
||||
/**
|
||||
* Type declarations for Electron API exposed via preload script
|
||||
*/
|
||||
|
||||
/** Configuration preset interface */
|
||||
interface ConfigPreset {
|
||||
id: string
|
||||
name: string
|
||||
createdAt: number
|
||||
updatedAt: number
|
||||
config: {
|
||||
AI_PROVIDER?: string
|
||||
AI_MODEL?: string
|
||||
AI_API_KEY?: string
|
||||
AI_BASE_URL?: string
|
||||
TEMPERATURE?: string
|
||||
[key: string]: string | undefined
|
||||
}
|
||||
}
|
||||
|
||||
/** Result of applying a preset */
|
||||
interface ApplyPresetResult {
|
||||
success: boolean
|
||||
error?: string
|
||||
env?: Record<string, string>
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
/** Main window Electron API */
|
||||
electronAPI?: {
|
||||
/** Current platform (darwin, win32, linux) */
|
||||
platform: NodeJS.Platform
|
||||
/** Whether running in Electron environment */
|
||||
isElectron: boolean
|
||||
/** Get application version */
|
||||
getVersion: () => Promise<string>
|
||||
/** Minimize the window */
|
||||
minimize: () => void
|
||||
/** Maximize/restore the window */
|
||||
maximize: () => void
|
||||
/** Close the window */
|
||||
close: () => void
|
||||
/** Open file dialog and return file path */
|
||||
openFile: () => Promise<string | null>
|
||||
/** Save data to file via save dialog */
|
||||
saveFile: (data: string) => Promise<boolean>
|
||||
}
|
||||
|
||||
/** Settings window Electron API */
|
||||
settingsAPI?: {
|
||||
/** Get all configuration presets */
|
||||
getPresets: () => Promise<ConfigPreset[]>
|
||||
/** Get current preset ID */
|
||||
getCurrentPresetId: () => Promise<string | null>
|
||||
/** Get current preset */
|
||||
getCurrentPreset: () => Promise<ConfigPreset | null>
|
||||
/** Save (create or update) a preset */
|
||||
savePreset: (preset: {
|
||||
id?: string
|
||||
name: string
|
||||
config: Record<string, string | undefined>
|
||||
}) => Promise<ConfigPreset>
|
||||
/** Delete a preset */
|
||||
deletePreset: (id: string) => Promise<boolean>
|
||||
/** Apply a preset (sets environment variables and restarts server) */
|
||||
applyPreset: (id: string) => Promise<ApplyPresetResult>
|
||||
/** Close settings window */
|
||||
close: () => void
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { ConfigPreset, ApplyPresetResult }
|
||||
241
electron/main/app-menu.ts
Normal file
241
electron/main/app-menu.ts
Normal file
@@ -0,0 +1,241 @@
|
||||
import {
|
||||
app,
|
||||
BrowserWindow,
|
||||
dialog,
|
||||
Menu,
|
||||
type MenuItemConstructorOptions,
|
||||
shell,
|
||||
} from "electron"
|
||||
import {
|
||||
applyPresetToEnv,
|
||||
getAllPresets,
|
||||
getCurrentPresetId,
|
||||
setCurrentPreset,
|
||||
} from "./config-manager"
|
||||
import { restartNextServer } from "./next-server"
|
||||
import { showSettingsWindow } from "./settings-window"
|
||||
|
||||
/**
|
||||
* Build and set the application menu
|
||||
*/
|
||||
export function buildAppMenu(): void {
|
||||
const template = getMenuTemplate()
|
||||
const menu = Menu.buildFromTemplate(template)
|
||||
Menu.setApplicationMenu(menu)
|
||||
}
|
||||
|
||||
/**
|
||||
* Rebuild the menu (call this when presets change)
|
||||
*/
|
||||
export function rebuildAppMenu(): void {
|
||||
buildAppMenu()
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the menu template
|
||||
*/
|
||||
function getMenuTemplate(): MenuItemConstructorOptions[] {
|
||||
const isMac = process.platform === "darwin"
|
||||
|
||||
const template: MenuItemConstructorOptions[] = []
|
||||
|
||||
// macOS app menu
|
||||
if (isMac) {
|
||||
template.push({
|
||||
label: app.name,
|
||||
submenu: [
|
||||
{ role: "about" },
|
||||
{ type: "separator" },
|
||||
{
|
||||
label: "Settings...",
|
||||
accelerator: "CmdOrCtrl+,",
|
||||
click: () => {
|
||||
const win = BrowserWindow.getFocusedWindow()
|
||||
showSettingsWindow(win || undefined)
|
||||
},
|
||||
},
|
||||
{ type: "separator" },
|
||||
{ role: "services" },
|
||||
{ type: "separator" },
|
||||
{ role: "hide" },
|
||||
{ role: "hideOthers" },
|
||||
{ role: "unhide" },
|
||||
{ type: "separator" },
|
||||
{ role: "quit" },
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
// File menu
|
||||
template.push({
|
||||
label: "File",
|
||||
submenu: [
|
||||
...(isMac
|
||||
? []
|
||||
: [
|
||||
{
|
||||
label: "Settings",
|
||||
accelerator: "CmdOrCtrl+,",
|
||||
click: () => {
|
||||
const win = BrowserWindow.getFocusedWindow()
|
||||
showSettingsWindow(win || undefined)
|
||||
},
|
||||
},
|
||||
{ type: "separator" } as MenuItemConstructorOptions,
|
||||
]),
|
||||
isMac ? { role: "close" } : { role: "quit" },
|
||||
],
|
||||
})
|
||||
|
||||
// Edit menu
|
||||
template.push({
|
||||
label: "Edit",
|
||||
submenu: [
|
||||
{ role: "undo" },
|
||||
{ role: "redo" },
|
||||
{ type: "separator" },
|
||||
{ role: "cut" },
|
||||
{ role: "copy" },
|
||||
{ role: "paste" },
|
||||
...(isMac
|
||||
? [
|
||||
{
|
||||
role: "pasteAndMatchStyle",
|
||||
} as MenuItemConstructorOptions,
|
||||
{ role: "delete" } as MenuItemConstructorOptions,
|
||||
{ role: "selectAll" } as MenuItemConstructorOptions,
|
||||
]
|
||||
: [
|
||||
{ role: "delete" } as MenuItemConstructorOptions,
|
||||
{ type: "separator" } as MenuItemConstructorOptions,
|
||||
{ role: "selectAll" } as MenuItemConstructorOptions,
|
||||
]),
|
||||
],
|
||||
})
|
||||
|
||||
// View menu
|
||||
template.push({
|
||||
label: "View",
|
||||
submenu: [
|
||||
{ role: "reload" },
|
||||
{ role: "forceReload" },
|
||||
{ role: "toggleDevTools" },
|
||||
{ type: "separator" },
|
||||
{ role: "resetZoom" },
|
||||
{ role: "zoomIn" },
|
||||
{ role: "zoomOut" },
|
||||
{ type: "separator" },
|
||||
{ role: "togglefullscreen" },
|
||||
],
|
||||
})
|
||||
|
||||
// Configuration menu with presets
|
||||
template.push(buildConfigMenu())
|
||||
|
||||
// Window menu
|
||||
template.push({
|
||||
label: "Window",
|
||||
submenu: [
|
||||
{ role: "minimize" },
|
||||
{ role: "zoom" },
|
||||
...(isMac
|
||||
? [
|
||||
{ type: "separator" } as MenuItemConstructorOptions,
|
||||
{ role: "front" } as MenuItemConstructorOptions,
|
||||
]
|
||||
: [{ role: "close" } as MenuItemConstructorOptions]),
|
||||
],
|
||||
})
|
||||
|
||||
// Help menu
|
||||
template.push({
|
||||
label: "Help",
|
||||
submenu: [
|
||||
{
|
||||
label: "Documentation",
|
||||
click: async () => {
|
||||
await shell.openExternal(
|
||||
"https://github.com/dayuanjiang/next-ai-draw-io",
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Report Issue",
|
||||
click: async () => {
|
||||
await shell.openExternal(
|
||||
"https://github.com/dayuanjiang/next-ai-draw-io/issues",
|
||||
)
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
return template
|
||||
}
|
||||
|
||||
/**
|
||||
* Build the Configuration menu with presets
|
||||
*/
|
||||
function buildConfigMenu(): MenuItemConstructorOptions {
|
||||
const presets = getAllPresets()
|
||||
const currentPresetId = getCurrentPresetId()
|
||||
|
||||
const presetItems: MenuItemConstructorOptions[] = presets.map((preset) => ({
|
||||
label: preset.name,
|
||||
type: "radio",
|
||||
checked: preset.id === currentPresetId,
|
||||
click: async () => {
|
||||
const previousPresetId = getCurrentPresetId()
|
||||
const env = applyPresetToEnv(preset.id)
|
||||
|
||||
if (env) {
|
||||
try {
|
||||
await restartNextServer()
|
||||
rebuildAppMenu() // Rebuild menu to update checkmarks
|
||||
} catch (error) {
|
||||
console.error("Failed to restart server:", error)
|
||||
|
||||
// Revert to previous preset on failure
|
||||
if (previousPresetId) {
|
||||
applyPresetToEnv(previousPresetId)
|
||||
} else {
|
||||
setCurrentPreset(null)
|
||||
}
|
||||
|
||||
// Rebuild menu to restore previous checkmark state
|
||||
rebuildAppMenu()
|
||||
|
||||
// Show error dialog to notify user
|
||||
dialog.showErrorBox(
|
||||
"Configuration Error",
|
||||
`Failed to apply preset "${preset.name}". The server could not be restarted.\n\nThe previous configuration has been restored.\n\nError: ${error instanceof Error ? error.message : String(error)}`,
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
}))
|
||||
|
||||
return {
|
||||
label: "Configuration",
|
||||
submenu: [
|
||||
...(presetItems.length > 0
|
||||
? [
|
||||
{ label: "Switch Preset", enabled: false },
|
||||
{ type: "separator" } as MenuItemConstructorOptions,
|
||||
...presetItems,
|
||||
{ type: "separator" } as MenuItemConstructorOptions,
|
||||
]
|
||||
: []),
|
||||
{
|
||||
label:
|
||||
presetItems.length > 0
|
||||
? "Manage Presets..."
|
||||
: "Add Configuration Preset...",
|
||||
click: () => {
|
||||
const win = BrowserWindow.getFocusedWindow()
|
||||
showSettingsWindow(win || undefined)
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
460
electron/main/config-manager.ts
Normal file
460
electron/main/config-manager.ts
Normal file
@@ -0,0 +1,460 @@
|
||||
import { randomUUID } from "node:crypto"
|
||||
import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs"
|
||||
import path from "node:path"
|
||||
import { app, safeStorage } from "electron"
|
||||
|
||||
/**
|
||||
* Fields that contain sensitive data and should be encrypted
|
||||
*/
|
||||
const SENSITIVE_FIELDS = ["AI_API_KEY"] as const
|
||||
|
||||
/**
|
||||
* Prefix to identify encrypted values
|
||||
*/
|
||||
const ENCRYPTED_PREFIX = "encrypted:"
|
||||
|
||||
/**
|
||||
* Check if safeStorage encryption is available
|
||||
*/
|
||||
function isEncryptionAvailable(): boolean {
|
||||
return safeStorage.isEncryptionAvailable()
|
||||
}
|
||||
|
||||
/**
|
||||
* Track if we've already warned about plaintext storage
|
||||
*/
|
||||
let hasWarnedAboutPlaintext = false
|
||||
|
||||
/**
|
||||
* Encrypt a sensitive value using safeStorage
|
||||
* Warns if encryption is not available (API key stored in plaintext)
|
||||
*/
|
||||
function encryptValue(value: string): string {
|
||||
if (!value) {
|
||||
return value
|
||||
}
|
||||
|
||||
if (!isEncryptionAvailable()) {
|
||||
if (!hasWarnedAboutPlaintext) {
|
||||
console.warn(
|
||||
"⚠️ SECURITY WARNING: safeStorage not available. " +
|
||||
"API keys will be stored in PLAINTEXT. " +
|
||||
"On Linux, install gnome-keyring or similar for secure storage.",
|
||||
)
|
||||
hasWarnedAboutPlaintext = true
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
try {
|
||||
const encrypted = safeStorage.encryptString(value)
|
||||
return ENCRYPTED_PREFIX + encrypted.toString("base64")
|
||||
} catch (error) {
|
||||
console.error("Encryption failed:", error)
|
||||
// Fail secure: don't store if encryption fails
|
||||
throw new Error(
|
||||
"Failed to encrypt API key. Cannot securely store credentials.",
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Decrypt a sensitive value using safeStorage
|
||||
* Returns the original value if it's not encrypted or decryption fails
|
||||
*/
|
||||
function decryptValue(value: string): string {
|
||||
if (!value || !value.startsWith(ENCRYPTED_PREFIX)) {
|
||||
return value
|
||||
}
|
||||
if (!isEncryptionAvailable()) {
|
||||
console.warn(
|
||||
"Cannot decrypt value: safeStorage encryption is not available",
|
||||
)
|
||||
return value
|
||||
}
|
||||
try {
|
||||
const base64Data = value.slice(ENCRYPTED_PREFIX.length)
|
||||
const buffer = Buffer.from(base64Data, "base64")
|
||||
return safeStorage.decryptString(buffer)
|
||||
} catch (error) {
|
||||
console.error("Failed to decrypt value:", error)
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Encrypt sensitive fields in a config object
|
||||
*/
|
||||
function encryptConfig(
|
||||
config: Record<string, string | undefined>,
|
||||
): Record<string, string | undefined> {
|
||||
const encrypted = { ...config }
|
||||
for (const field of SENSITIVE_FIELDS) {
|
||||
if (encrypted[field]) {
|
||||
encrypted[field] = encryptValue(encrypted[field] as string)
|
||||
}
|
||||
}
|
||||
return encrypted
|
||||
}
|
||||
|
||||
/**
|
||||
* Decrypt sensitive fields in a config object
|
||||
*/
|
||||
function decryptConfig(
|
||||
config: Record<string, string | undefined>,
|
||||
): Record<string, string | undefined> {
|
||||
const decrypted = { ...config }
|
||||
for (const field of SENSITIVE_FIELDS) {
|
||||
if (decrypted[field]) {
|
||||
decrypted[field] = decryptValue(decrypted[field] as string)
|
||||
}
|
||||
}
|
||||
return decrypted
|
||||
}
|
||||
|
||||
/**
|
||||
* Configuration preset interface
|
||||
*/
|
||||
export interface ConfigPreset {
|
||||
id: string
|
||||
name: string
|
||||
createdAt: number
|
||||
updatedAt: number
|
||||
config: {
|
||||
AI_PROVIDER?: string
|
||||
AI_MODEL?: string
|
||||
AI_API_KEY?: string
|
||||
AI_BASE_URL?: string
|
||||
TEMPERATURE?: string
|
||||
[key: string]: string | undefined
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Configuration file structure
|
||||
*/
|
||||
interface ConfigPresetsFile {
|
||||
version: 1
|
||||
currentPresetId: string | null
|
||||
presets: ConfigPreset[]
|
||||
}
|
||||
|
||||
const CONFIG_FILE_NAME = "config-presets.json"
|
||||
|
||||
/**
|
||||
* Get the path to the config file
|
||||
*/
|
||||
function getConfigFilePath(): string {
|
||||
const userDataPath = app.getPath("userData")
|
||||
return path.join(userDataPath, CONFIG_FILE_NAME)
|
||||
}
|
||||
|
||||
/**
|
||||
* Load presets from the config file
|
||||
* Decrypts sensitive fields automatically
|
||||
*/
|
||||
export function loadPresets(): ConfigPresetsFile {
|
||||
const configPath = getConfigFilePath()
|
||||
|
||||
if (!existsSync(configPath)) {
|
||||
return {
|
||||
version: 1,
|
||||
currentPresetId: null,
|
||||
presets: [],
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const content = readFileSync(configPath, "utf-8")
|
||||
const data = JSON.parse(content) as ConfigPresetsFile
|
||||
|
||||
// Decrypt sensitive fields in each preset
|
||||
data.presets = data.presets.map((preset) => ({
|
||||
...preset,
|
||||
config: decryptConfig(preset.config) as ConfigPreset["config"],
|
||||
}))
|
||||
|
||||
return data
|
||||
} catch (error) {
|
||||
console.error("Failed to load config presets:", error)
|
||||
return {
|
||||
version: 1,
|
||||
currentPresetId: null,
|
||||
presets: [],
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Save presets to the config file
|
||||
* Encrypts sensitive fields automatically
|
||||
*/
|
||||
export function savePresets(data: ConfigPresetsFile): void {
|
||||
const configPath = getConfigFilePath()
|
||||
const userDataPath = app.getPath("userData")
|
||||
|
||||
// Ensure the directory exists
|
||||
if (!existsSync(userDataPath)) {
|
||||
mkdirSync(userDataPath, { recursive: true })
|
||||
}
|
||||
|
||||
// Encrypt sensitive fields before saving
|
||||
const dataToSave: ConfigPresetsFile = {
|
||||
...data,
|
||||
presets: data.presets.map((preset) => ({
|
||||
...preset,
|
||||
config: encryptConfig(preset.config) as ConfigPreset["config"],
|
||||
})),
|
||||
}
|
||||
|
||||
try {
|
||||
writeFileSync(configPath, JSON.stringify(dataToSave, null, 2), "utf-8")
|
||||
} catch (error) {
|
||||
console.error("Failed to save config presets:", error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all presets
|
||||
*/
|
||||
export function getAllPresets(): ConfigPreset[] {
|
||||
const data = loadPresets()
|
||||
return data.presets
|
||||
}
|
||||
|
||||
/**
|
||||
* Get current preset ID
|
||||
*/
|
||||
export function getCurrentPresetId(): string | null {
|
||||
const data = loadPresets()
|
||||
return data.currentPresetId
|
||||
}
|
||||
|
||||
/**
|
||||
* Get current preset
|
||||
*/
|
||||
export function getCurrentPreset(): ConfigPreset | null {
|
||||
const data = loadPresets()
|
||||
if (!data.currentPresetId) {
|
||||
return null
|
||||
}
|
||||
return data.presets.find((p) => p.id === data.currentPresetId) || null
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a new preset
|
||||
*/
|
||||
export function createPreset(
|
||||
preset: Omit<ConfigPreset, "id" | "createdAt" | "updatedAt">,
|
||||
): ConfigPreset {
|
||||
const data = loadPresets()
|
||||
const now = Date.now()
|
||||
|
||||
const newPreset: ConfigPreset = {
|
||||
id: randomUUID(),
|
||||
name: preset.name,
|
||||
config: preset.config,
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
}
|
||||
|
||||
data.presets.push(newPreset)
|
||||
savePresets(data)
|
||||
|
||||
return newPreset
|
||||
}
|
||||
|
||||
/**
|
||||
* Update an existing preset
|
||||
*/
|
||||
export function updatePreset(
|
||||
id: string,
|
||||
updates: Partial<Omit<ConfigPreset, "id" | "createdAt">>,
|
||||
): ConfigPreset | null {
|
||||
const data = loadPresets()
|
||||
const index = data.presets.findIndex((p) => p.id === id)
|
||||
|
||||
if (index === -1) {
|
||||
return null
|
||||
}
|
||||
|
||||
const updatedPreset: ConfigPreset = {
|
||||
...data.presets[index],
|
||||
...updates,
|
||||
updatedAt: Date.now(),
|
||||
}
|
||||
|
||||
data.presets[index] = updatedPreset
|
||||
savePresets(data)
|
||||
|
||||
return updatedPreset
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a preset
|
||||
*/
|
||||
export function deletePreset(id: string): boolean {
|
||||
const data = loadPresets()
|
||||
const index = data.presets.findIndex((p) => p.id === id)
|
||||
|
||||
if (index === -1) {
|
||||
return false
|
||||
}
|
||||
|
||||
data.presets.splice(index, 1)
|
||||
|
||||
// Clear current preset if it was deleted
|
||||
if (data.currentPresetId === id) {
|
||||
data.currentPresetId = null
|
||||
}
|
||||
|
||||
savePresets(data)
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the current preset
|
||||
*/
|
||||
export function setCurrentPreset(id: string | null): boolean {
|
||||
const data = loadPresets()
|
||||
|
||||
if (id !== null) {
|
||||
const preset = data.presets.find((p) => p.id === id)
|
||||
if (!preset) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
data.currentPresetId = id
|
||||
savePresets(data)
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* Map generic AI_API_KEY and AI_BASE_URL to provider-specific environment variables
|
||||
*/
|
||||
const PROVIDER_ENV_MAP: Record<string, { apiKey: string; baseUrl: string }> = {
|
||||
openai: { apiKey: "OPENAI_API_KEY", baseUrl: "OPENAI_BASE_URL" },
|
||||
anthropic: { apiKey: "ANTHROPIC_API_KEY", baseUrl: "ANTHROPIC_BASE_URL" },
|
||||
google: {
|
||||
apiKey: "GOOGLE_GENERATIVE_AI_API_KEY",
|
||||
baseUrl: "GOOGLE_BASE_URL",
|
||||
},
|
||||
azure: { apiKey: "AZURE_API_KEY", baseUrl: "AZURE_BASE_URL" },
|
||||
openrouter: {
|
||||
apiKey: "OPENROUTER_API_KEY",
|
||||
baseUrl: "OPENROUTER_BASE_URL",
|
||||
},
|
||||
deepseek: { apiKey: "DEEPSEEK_API_KEY", baseUrl: "DEEPSEEK_BASE_URL" },
|
||||
siliconflow: {
|
||||
apiKey: "SILICONFLOW_API_KEY",
|
||||
baseUrl: "SILICONFLOW_BASE_URL",
|
||||
},
|
||||
gateway: { apiKey: "AI_GATEWAY_API_KEY", baseUrl: "AI_GATEWAY_BASE_URL" },
|
||||
// bedrock and ollama don't use API keys in the same way
|
||||
bedrock: { apiKey: "", baseUrl: "" },
|
||||
ollama: { apiKey: "", baseUrl: "OLLAMA_BASE_URL" },
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply preset environment variables to the current process
|
||||
* Returns the environment variables that were applied
|
||||
*/
|
||||
export function applyPresetToEnv(id: string): Record<string, string> | null {
|
||||
const data = loadPresets()
|
||||
const preset = data.presets.find((p) => p.id === id)
|
||||
|
||||
if (!preset) {
|
||||
return null
|
||||
}
|
||||
|
||||
const appliedEnv: Record<string, string> = {}
|
||||
const provider = preset.config.AI_PROVIDER?.toLowerCase()
|
||||
|
||||
for (const [key, value] of Object.entries(preset.config)) {
|
||||
if (value !== undefined && value !== "") {
|
||||
// Map generic AI_API_KEY to provider-specific key
|
||||
if (
|
||||
key === "AI_API_KEY" &&
|
||||
provider &&
|
||||
PROVIDER_ENV_MAP[provider]
|
||||
) {
|
||||
const providerApiKey = PROVIDER_ENV_MAP[provider].apiKey
|
||||
if (providerApiKey) {
|
||||
process.env[providerApiKey] = value
|
||||
appliedEnv[providerApiKey] = value
|
||||
}
|
||||
}
|
||||
// Map generic AI_BASE_URL to provider-specific key
|
||||
else if (
|
||||
key === "AI_BASE_URL" &&
|
||||
provider &&
|
||||
PROVIDER_ENV_MAP[provider]
|
||||
) {
|
||||
const providerBaseUrl = PROVIDER_ENV_MAP[provider].baseUrl
|
||||
if (providerBaseUrl) {
|
||||
process.env[providerBaseUrl] = value
|
||||
appliedEnv[providerBaseUrl] = value
|
||||
}
|
||||
}
|
||||
// Apply other env vars directly
|
||||
else {
|
||||
process.env[key] = value
|
||||
appliedEnv[key] = value
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Set as current preset
|
||||
data.currentPresetId = id
|
||||
savePresets(data)
|
||||
|
||||
return appliedEnv
|
||||
}
|
||||
|
||||
/**
|
||||
* Get environment variables from current preset
|
||||
* Maps generic AI_API_KEY/AI_BASE_URL to provider-specific keys
|
||||
*/
|
||||
export function getCurrentPresetEnv(): Record<string, string> {
|
||||
const preset = getCurrentPreset()
|
||||
if (!preset) {
|
||||
return {}
|
||||
}
|
||||
|
||||
const env: Record<string, string> = {}
|
||||
const provider = preset.config.AI_PROVIDER?.toLowerCase()
|
||||
|
||||
for (const [key, value] of Object.entries(preset.config)) {
|
||||
if (value !== undefined && value !== "") {
|
||||
// Map generic AI_API_KEY to provider-specific key
|
||||
if (
|
||||
key === "AI_API_KEY" &&
|
||||
provider &&
|
||||
PROVIDER_ENV_MAP[provider]
|
||||
) {
|
||||
const providerApiKey = PROVIDER_ENV_MAP[provider].apiKey
|
||||
if (providerApiKey) {
|
||||
env[providerApiKey] = value
|
||||
}
|
||||
}
|
||||
// Map generic AI_BASE_URL to provider-specific key
|
||||
else if (
|
||||
key === "AI_BASE_URL" &&
|
||||
provider &&
|
||||
PROVIDER_ENV_MAP[provider]
|
||||
) {
|
||||
const providerBaseUrl = PROVIDER_ENV_MAP[provider].baseUrl
|
||||
if (providerBaseUrl) {
|
||||
env[providerBaseUrl] = value
|
||||
}
|
||||
}
|
||||
// Apply other env vars directly
|
||||
else {
|
||||
env[key] = value
|
||||
}
|
||||
}
|
||||
}
|
||||
return env
|
||||
}
|
||||
67
electron/main/env-loader.ts
Normal file
67
electron/main/env-loader.ts
Normal file
@@ -0,0 +1,67 @@
|
||||
import fs from "node:fs"
|
||||
import path from "node:path"
|
||||
import { app } from "electron"
|
||||
|
||||
/**
|
||||
* Load environment variables from .env file
|
||||
* Searches multiple locations in priority order
|
||||
*/
|
||||
export function loadEnvFile(): void {
|
||||
const possiblePaths = [
|
||||
// Next to the executable (for portable installations)
|
||||
path.join(path.dirname(app.getPath("exe")), ".env"),
|
||||
// User data directory (persists across updates)
|
||||
path.join(app.getPath("userData"), ".env"),
|
||||
// Development: project root
|
||||
path.join(app.getAppPath(), ".env.local"),
|
||||
path.join(app.getAppPath(), ".env"),
|
||||
]
|
||||
|
||||
for (const envPath of possiblePaths) {
|
||||
if (fs.existsSync(envPath)) {
|
||||
console.log(`Loading environment from: ${envPath}`)
|
||||
loadEnvFromFile(envPath)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
console.log("No .env file found, using system environment variables")
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse and load environment variables from a file
|
||||
*/
|
||||
function loadEnvFromFile(filePath: string): void {
|
||||
try {
|
||||
const content = fs.readFileSync(filePath, "utf-8")
|
||||
const lines = content.split("\n")
|
||||
|
||||
for (const line of lines) {
|
||||
const trimmed = line.trim()
|
||||
|
||||
// Skip comments and empty lines
|
||||
if (!trimmed || trimmed.startsWith("#")) continue
|
||||
|
||||
const equalIndex = trimmed.indexOf("=")
|
||||
if (equalIndex === -1) continue
|
||||
|
||||
const key = trimmed.slice(0, equalIndex).trim()
|
||||
let value = trimmed.slice(equalIndex + 1).trim()
|
||||
|
||||
// Remove surrounding quotes
|
||||
if (
|
||||
(value.startsWith('"') && value.endsWith('"')) ||
|
||||
(value.startsWith("'") && value.endsWith("'"))
|
||||
) {
|
||||
value = value.slice(1, -1)
|
||||
}
|
||||
|
||||
// Don't override existing environment variables
|
||||
if (!(key in process.env)) {
|
||||
process.env[key] = value
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Failed to load env file ${filePath}:`, error)
|
||||
}
|
||||
}
|
||||
105
electron/main/index.ts
Normal file
105
electron/main/index.ts
Normal file
@@ -0,0 +1,105 @@
|
||||
import { app, BrowserWindow, dialog, shell } from "electron"
|
||||
import { buildAppMenu } from "./app-menu"
|
||||
import { getCurrentPresetEnv } from "./config-manager"
|
||||
import { loadEnvFile } from "./env-loader"
|
||||
import { registerIpcHandlers } from "./ipc-handlers"
|
||||
import { startNextServer, stopNextServer } from "./next-server"
|
||||
import { registerSettingsWindowHandlers } from "./settings-window"
|
||||
import { createWindow, getMainWindow } from "./window-manager"
|
||||
|
||||
// Single instance lock
|
||||
const gotTheLock = app.requestSingleInstanceLock()
|
||||
|
||||
if (!gotTheLock) {
|
||||
app.quit()
|
||||
} else {
|
||||
app.on("second-instance", () => {
|
||||
const mainWindow = getMainWindow()
|
||||
if (mainWindow) {
|
||||
if (mainWindow.isMinimized()) mainWindow.restore()
|
||||
mainWindow.focus()
|
||||
}
|
||||
})
|
||||
|
||||
// Load environment variables from .env files
|
||||
loadEnvFile()
|
||||
|
||||
// Apply saved preset environment variables (overrides .env)
|
||||
const presetEnv = getCurrentPresetEnv()
|
||||
for (const [key, value] of Object.entries(presetEnv)) {
|
||||
process.env[key] = value
|
||||
}
|
||||
|
||||
const isDev = process.env.NODE_ENV === "development"
|
||||
let serverUrl: string | null = null
|
||||
|
||||
app.whenReady().then(async () => {
|
||||
// Register IPC handlers
|
||||
registerIpcHandlers()
|
||||
registerSettingsWindowHandlers()
|
||||
|
||||
// Build application menu
|
||||
buildAppMenu()
|
||||
|
||||
try {
|
||||
if (isDev) {
|
||||
// Development: use the dev server URL
|
||||
serverUrl =
|
||||
process.env.ELECTRON_DEV_URL || "http://localhost:6002"
|
||||
console.log(`Development mode: connecting to ${serverUrl}`)
|
||||
} else {
|
||||
// Production: start Next.js standalone server
|
||||
serverUrl = await startNextServer()
|
||||
}
|
||||
|
||||
// Create main window
|
||||
createWindow(serverUrl)
|
||||
} catch (error) {
|
||||
console.error("Failed to start application:", error)
|
||||
dialog.showErrorBox(
|
||||
"Startup Error",
|
||||
`Failed to start the application: ${error instanceof Error ? error.message : "Unknown error"}`,
|
||||
)
|
||||
app.quit()
|
||||
}
|
||||
|
||||
app.on("activate", () => {
|
||||
if (BrowserWindow.getAllWindows().length === 0) {
|
||||
if (serverUrl) {
|
||||
createWindow(serverUrl)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
app.on("window-all-closed", () => {
|
||||
if (process.platform !== "darwin") {
|
||||
stopNextServer()
|
||||
app.quit()
|
||||
}
|
||||
})
|
||||
|
||||
app.on("before-quit", () => {
|
||||
stopNextServer()
|
||||
})
|
||||
|
||||
// Open external links in default browser
|
||||
app.on("web-contents-created", (_, contents) => {
|
||||
contents.setWindowOpenHandler(({ url }) => {
|
||||
// Allow diagrams.net iframe
|
||||
if (
|
||||
url.includes("diagrams.net") ||
|
||||
url.includes("draw.io") ||
|
||||
url.startsWith("http://localhost")
|
||||
) {
|
||||
return { action: "allow" }
|
||||
}
|
||||
// Open other links in external browser
|
||||
if (url.startsWith("http://") || url.startsWith("https://")) {
|
||||
shell.openExternal(url)
|
||||
return { action: "deny" }
|
||||
}
|
||||
return { action: "allow" }
|
||||
})
|
||||
})
|
||||
}
|
||||
212
electron/main/ipc-handlers.ts
Normal file
212
electron/main/ipc-handlers.ts
Normal file
@@ -0,0 +1,212 @@
|
||||
import { app, BrowserWindow, dialog, ipcMain } from "electron"
|
||||
import {
|
||||
applyPresetToEnv,
|
||||
type ConfigPreset,
|
||||
createPreset,
|
||||
deletePreset,
|
||||
getAllPresets,
|
||||
getCurrentPreset,
|
||||
getCurrentPresetId,
|
||||
setCurrentPreset,
|
||||
updatePreset,
|
||||
} from "./config-manager"
|
||||
import { restartNextServer } from "./next-server"
|
||||
|
||||
/**
|
||||
* Allowed configuration keys for presets
|
||||
* This whitelist prevents arbitrary environment variable injection
|
||||
*/
|
||||
const ALLOWED_CONFIG_KEYS = new Set([
|
||||
"AI_PROVIDER",
|
||||
"AI_MODEL",
|
||||
"AI_API_KEY",
|
||||
"AI_BASE_URL",
|
||||
"TEMPERATURE",
|
||||
])
|
||||
|
||||
/**
|
||||
* Sanitize preset config to only include allowed keys
|
||||
*/
|
||||
function sanitizePresetConfig(
|
||||
config: Record<string, string | undefined>,
|
||||
): Record<string, string | undefined> {
|
||||
const sanitized: Record<string, string | undefined> = {}
|
||||
for (const key of ALLOWED_CONFIG_KEYS) {
|
||||
if (key in config && typeof config[key] === "string") {
|
||||
sanitized[key] = config[key]
|
||||
}
|
||||
}
|
||||
return sanitized
|
||||
}
|
||||
|
||||
/**
|
||||
* Register all IPC handlers
|
||||
*/
|
||||
export function registerIpcHandlers(): void {
|
||||
// ==================== App Info ====================
|
||||
|
||||
ipcMain.handle("get-version", () => {
|
||||
return app.getVersion()
|
||||
})
|
||||
|
||||
// ==================== Window Controls ====================
|
||||
|
||||
ipcMain.on("window-minimize", (event) => {
|
||||
const win = BrowserWindow.fromWebContents(event.sender)
|
||||
win?.minimize()
|
||||
})
|
||||
|
||||
ipcMain.on("window-maximize", (event) => {
|
||||
const win = BrowserWindow.fromWebContents(event.sender)
|
||||
if (win?.isMaximized()) {
|
||||
win.unmaximize()
|
||||
} else {
|
||||
win?.maximize()
|
||||
}
|
||||
})
|
||||
|
||||
ipcMain.on("window-close", (event) => {
|
||||
const win = BrowserWindow.fromWebContents(event.sender)
|
||||
win?.close()
|
||||
})
|
||||
|
||||
// ==================== File Dialogs ====================
|
||||
|
||||
ipcMain.handle("dialog-open-file", async (event) => {
|
||||
const win = BrowserWindow.fromWebContents(event.sender)
|
||||
if (!win) return null
|
||||
|
||||
const result = await dialog.showOpenDialog(win, {
|
||||
properties: ["openFile"],
|
||||
filters: [
|
||||
{ name: "Draw.io Files", extensions: ["drawio", "xml"] },
|
||||
{ name: "All Files", extensions: ["*"] },
|
||||
],
|
||||
})
|
||||
|
||||
if (result.canceled || result.filePaths.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
// Read the file content
|
||||
const fs = await import("node:fs/promises")
|
||||
try {
|
||||
const content = await fs.readFile(result.filePaths[0], "utf-8")
|
||||
return content
|
||||
} catch (error) {
|
||||
console.error("Failed to read file:", error)
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
||||
ipcMain.handle("dialog-save-file", async (event, data: string) => {
|
||||
const win = BrowserWindow.fromWebContents(event.sender)
|
||||
if (!win) return false
|
||||
|
||||
const result = await dialog.showSaveDialog(win, {
|
||||
filters: [
|
||||
{ name: "Draw.io Files", extensions: ["drawio"] },
|
||||
{ name: "XML Files", extensions: ["xml"] },
|
||||
],
|
||||
})
|
||||
|
||||
if (result.canceled || !result.filePath) {
|
||||
return false
|
||||
}
|
||||
|
||||
const fs = await import("node:fs/promises")
|
||||
try {
|
||||
await fs.writeFile(result.filePath, data, "utf-8")
|
||||
return true
|
||||
} catch (error) {
|
||||
console.error("Failed to save file:", error)
|
||||
return false
|
||||
}
|
||||
})
|
||||
|
||||
// ==================== Config Presets ====================
|
||||
|
||||
ipcMain.handle("config-presets:get-all", () => {
|
||||
return getAllPresets()
|
||||
})
|
||||
|
||||
ipcMain.handle("config-presets:get-current", () => {
|
||||
return getCurrentPreset()
|
||||
})
|
||||
|
||||
ipcMain.handle("config-presets:get-current-id", () => {
|
||||
return getCurrentPresetId()
|
||||
})
|
||||
|
||||
ipcMain.handle(
|
||||
"config-presets:save",
|
||||
(
|
||||
_event,
|
||||
preset: Omit<ConfigPreset, "id" | "createdAt" | "updatedAt"> & {
|
||||
id?: string
|
||||
},
|
||||
) => {
|
||||
// Validate preset name
|
||||
if (typeof preset.name !== "string" || !preset.name.trim()) {
|
||||
throw new Error("Invalid preset name")
|
||||
}
|
||||
|
||||
// Sanitize config to only allow whitelisted keys
|
||||
const sanitizedConfig = sanitizePresetConfig(preset.config ?? {})
|
||||
|
||||
if (preset.id) {
|
||||
// Update existing preset
|
||||
return updatePreset(preset.id, {
|
||||
name: preset.name.trim(),
|
||||
config: sanitizedConfig,
|
||||
})
|
||||
}
|
||||
// Create new preset
|
||||
return createPreset({
|
||||
name: preset.name.trim(),
|
||||
config: sanitizedConfig,
|
||||
})
|
||||
},
|
||||
)
|
||||
|
||||
ipcMain.handle("config-presets:delete", (_event, id: string) => {
|
||||
return deletePreset(id)
|
||||
})
|
||||
|
||||
ipcMain.handle("config-presets:apply", async (_event, id: string) => {
|
||||
const env = applyPresetToEnv(id)
|
||||
if (!env) {
|
||||
return { success: false, error: "Preset not found" }
|
||||
}
|
||||
|
||||
const isDev = process.env.NODE_ENV === "development"
|
||||
|
||||
if (isDev) {
|
||||
// In development mode, the config file change will trigger
|
||||
// the file watcher in electron-dev.mjs to restart Next.js
|
||||
// We just need to save the preset (already done in applyPresetToEnv)
|
||||
return { success: true, env, devMode: true }
|
||||
}
|
||||
|
||||
// Production mode: restart the Next.js server to apply new environment variables
|
||||
try {
|
||||
await restartNextServer()
|
||||
return { success: true, env }
|
||||
} catch (error) {
|
||||
return {
|
||||
success: false,
|
||||
error:
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: "Failed to restart server",
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
ipcMain.handle(
|
||||
"config-presets:set-current",
|
||||
(_event, id: string | null) => {
|
||||
return setCurrentPreset(id)
|
||||
},
|
||||
)
|
||||
}
|
||||
161
electron/main/next-server.ts
Normal file
161
electron/main/next-server.ts
Normal file
@@ -0,0 +1,161 @@
|
||||
import { existsSync } from "node:fs"
|
||||
import path from "node:path"
|
||||
import { app, type UtilityProcess, utilityProcess } from "electron"
|
||||
import {
|
||||
findAvailablePort,
|
||||
getAllocatedPort,
|
||||
getServerUrl,
|
||||
isPortAvailable,
|
||||
} from "./port-manager"
|
||||
|
||||
let serverProcess: UtilityProcess | null = null
|
||||
|
||||
/**
|
||||
* Get the path to the standalone server resources
|
||||
* In packaged app: resources/standalone
|
||||
* In development: .next/standalone
|
||||
*/
|
||||
function getResourcePath(): string {
|
||||
if (app.isPackaged) {
|
||||
return path.join(process.resourcesPath, "standalone")
|
||||
}
|
||||
return path.join(app.getAppPath(), ".next", "standalone")
|
||||
}
|
||||
|
||||
/**
|
||||
* Wait for the server to be ready by polling the health endpoint
|
||||
*/
|
||||
async function waitForServer(url: string, timeout = 30000): Promise<void> {
|
||||
const start = Date.now()
|
||||
while (Date.now() - start < timeout) {
|
||||
try {
|
||||
const response = await fetch(url)
|
||||
if (response.ok || response.status < 500) {
|
||||
return
|
||||
}
|
||||
} catch {
|
||||
// Server not ready yet
|
||||
}
|
||||
await new Promise((resolve) => setTimeout(resolve, 100))
|
||||
}
|
||||
throw new Error(`Server startup timeout after ${timeout}ms`)
|
||||
}
|
||||
|
||||
/**
|
||||
* Start the Next.js standalone server using Electron's utilityProcess
|
||||
* This API is designed for running Node.js code in the background
|
||||
*/
|
||||
export async function startNextServer(): Promise<string> {
|
||||
const resourcePath = getResourcePath()
|
||||
const serverPath = path.join(resourcePath, "server.js")
|
||||
|
||||
console.log(`Starting Next.js server from: ${resourcePath}`)
|
||||
console.log(`Server script path: ${serverPath}`)
|
||||
|
||||
// Verify server script exists before attempting to start
|
||||
if (!existsSync(serverPath)) {
|
||||
throw new Error(
|
||||
`Server script not found at ${serverPath}. ` +
|
||||
"Please ensure the app was built correctly with 'npm run build'.",
|
||||
)
|
||||
}
|
||||
|
||||
// Find an available port (random in production, fixed in development)
|
||||
const port = await findAvailablePort()
|
||||
console.log(`Using port: ${port}`)
|
||||
|
||||
// Set up environment variables
|
||||
const env: Record<string, string> = {
|
||||
NODE_ENV: "production",
|
||||
PORT: String(port),
|
||||
HOSTNAME: "localhost",
|
||||
}
|
||||
|
||||
// Set cache directory to a writable location (user's app data folder)
|
||||
// This is necessary because the packaged app might be on a read-only volume
|
||||
if (app.isPackaged) {
|
||||
const cacheDir = path.join(app.getPath("userData"), "cache")
|
||||
env.NEXT_CACHE_DIR = cacheDir
|
||||
}
|
||||
|
||||
// Copy existing environment variables
|
||||
for (const [key, value] of Object.entries(process.env)) {
|
||||
if (value !== undefined && !env[key]) {
|
||||
env[key] = value
|
||||
}
|
||||
}
|
||||
|
||||
// Use Electron's utilityProcess API for running Node.js in background
|
||||
// This is the recommended way to run Node.js code in Electron
|
||||
serverProcess = utilityProcess.fork(serverPath, [], {
|
||||
cwd: resourcePath,
|
||||
env,
|
||||
stdio: "pipe",
|
||||
})
|
||||
|
||||
serverProcess.stdout?.on("data", (data) => {
|
||||
console.log(`[Next.js] ${data.toString().trim()}`)
|
||||
})
|
||||
|
||||
serverProcess.stderr?.on("data", (data) => {
|
||||
console.error(`[Next.js Error] ${data.toString().trim()}`)
|
||||
})
|
||||
|
||||
serverProcess.on("exit", (code) => {
|
||||
console.log(`Next.js server exited with code ${code}`)
|
||||
serverProcess = null
|
||||
})
|
||||
|
||||
const url = getServerUrl()
|
||||
await waitForServer(url)
|
||||
console.log(`Next.js server started at ${url}`)
|
||||
|
||||
return url
|
||||
}
|
||||
|
||||
/**
|
||||
* Stop the Next.js server process
|
||||
*/
|
||||
export function stopNextServer(): void {
|
||||
if (serverProcess) {
|
||||
console.log("Stopping Next.js server...")
|
||||
serverProcess.kill()
|
||||
serverProcess = null
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Wait for the server to fully stop
|
||||
*/
|
||||
async function waitForServerStop(timeout = 5000): Promise<void> {
|
||||
const port = getAllocatedPort()
|
||||
if (port === null) {
|
||||
return
|
||||
}
|
||||
|
||||
const start = Date.now()
|
||||
while (Date.now() - start < timeout) {
|
||||
const available = await isPortAvailable(port)
|
||||
if (available) {
|
||||
return
|
||||
}
|
||||
await new Promise((resolve) => setTimeout(resolve, 100))
|
||||
}
|
||||
console.warn("Server stop timeout, port may still be in use")
|
||||
}
|
||||
|
||||
/**
|
||||
* Restart the Next.js server with new environment variables
|
||||
*/
|
||||
export async function restartNextServer(): Promise<string> {
|
||||
console.log("Restarting Next.js server...")
|
||||
|
||||
// Stop the current server
|
||||
stopNextServer()
|
||||
|
||||
// Wait for the port to be released
|
||||
await waitForServerStop()
|
||||
|
||||
// Start the server again
|
||||
return startNextServer()
|
||||
}
|
||||
129
electron/main/port-manager.ts
Normal file
129
electron/main/port-manager.ts
Normal file
@@ -0,0 +1,129 @@
|
||||
import net from "node:net"
|
||||
import { app } from "electron"
|
||||
|
||||
/**
|
||||
* Port configuration
|
||||
*/
|
||||
const PORT_CONFIG = {
|
||||
// Development mode uses fixed port for hot reload compatibility
|
||||
development: 6002,
|
||||
// Production mode port range (will find first available)
|
||||
production: {
|
||||
min: 10000,
|
||||
max: 65535,
|
||||
},
|
||||
// Maximum attempts to find an available port
|
||||
maxAttempts: 100,
|
||||
}
|
||||
|
||||
/**
|
||||
* Currently allocated port (cached after first allocation)
|
||||
*/
|
||||
let allocatedPort: number | null = null
|
||||
|
||||
/**
|
||||
* Check if a specific port is available
|
||||
*/
|
||||
export function isPortAvailable(port: number): Promise<boolean> {
|
||||
return new Promise((resolve) => {
|
||||
const server = net.createServer()
|
||||
server.once("error", () => resolve(false))
|
||||
server.once("listening", () => {
|
||||
server.close()
|
||||
resolve(true)
|
||||
})
|
||||
server.listen(port, "127.0.0.1")
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate a random port within the production range
|
||||
*/
|
||||
function getRandomPort(): number {
|
||||
const { min, max } = PORT_CONFIG.production
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min
|
||||
}
|
||||
|
||||
/**
|
||||
* Find an available port
|
||||
* - In development: uses fixed port (6002)
|
||||
* - In production: finds a random available port
|
||||
* - If a port was previously allocated, verifies it's still available
|
||||
*
|
||||
* @param reuseExisting If true, try to reuse the previously allocated port
|
||||
* @returns Promise<number> The available port
|
||||
* @throws Error if no available port found after max attempts
|
||||
*/
|
||||
export async function findAvailablePort(reuseExisting = true): Promise<number> {
|
||||
const isDev = !app.isPackaged
|
||||
|
||||
// Try to reuse cached port if requested and available
|
||||
if (reuseExisting && allocatedPort !== null) {
|
||||
const available = await isPortAvailable(allocatedPort)
|
||||
if (available) {
|
||||
return allocatedPort
|
||||
}
|
||||
console.warn(
|
||||
`Previously allocated port ${allocatedPort} is no longer available`,
|
||||
)
|
||||
allocatedPort = null
|
||||
}
|
||||
|
||||
if (isDev) {
|
||||
// Development mode: use fixed port
|
||||
const port = PORT_CONFIG.development
|
||||
const available = await isPortAvailable(port)
|
||||
if (available) {
|
||||
allocatedPort = port
|
||||
return port
|
||||
}
|
||||
console.warn(
|
||||
`Development port ${port} is in use, finding alternative...`,
|
||||
)
|
||||
}
|
||||
|
||||
// Production mode or dev port unavailable: find random available port
|
||||
for (let attempt = 0; attempt < PORT_CONFIG.maxAttempts; attempt++) {
|
||||
const port = isDev
|
||||
? PORT_CONFIG.development + attempt + 1
|
||||
: getRandomPort()
|
||||
|
||||
const available = await isPortAvailable(port)
|
||||
if (available) {
|
||||
allocatedPort = port
|
||||
console.log(`Allocated port: ${port}`)
|
||||
return port
|
||||
}
|
||||
}
|
||||
|
||||
throw new Error(
|
||||
`Failed to find available port after ${PORT_CONFIG.maxAttempts} attempts`,
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the currently allocated port
|
||||
* Returns null if no port has been allocated yet
|
||||
*/
|
||||
export function getAllocatedPort(): number | null {
|
||||
return allocatedPort
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset the allocated port (useful for testing or restart scenarios)
|
||||
*/
|
||||
export function resetAllocatedPort(): void {
|
||||
allocatedPort = null
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the server URL with the allocated port
|
||||
*/
|
||||
export function getServerUrl(): string {
|
||||
if (allocatedPort === null) {
|
||||
throw new Error(
|
||||
"No port allocated yet. Call findAvailablePort() first.",
|
||||
)
|
||||
}
|
||||
return `http://localhost:${allocatedPort}`
|
||||
}
|
||||
78
electron/main/settings-window.ts
Normal file
78
electron/main/settings-window.ts
Normal file
@@ -0,0 +1,78 @@
|
||||
import path from "node:path"
|
||||
import { app, BrowserWindow, ipcMain } from "electron"
|
||||
|
||||
let settingsWindow: BrowserWindow | null = null
|
||||
|
||||
/**
|
||||
* Create and show the settings window
|
||||
*/
|
||||
export function showSettingsWindow(parentWindow?: BrowserWindow): void {
|
||||
// If settings window already exists, focus it
|
||||
if (settingsWindow && !settingsWindow.isDestroyed()) {
|
||||
settingsWindow.focus()
|
||||
return
|
||||
}
|
||||
|
||||
// Determine path to settings preload script
|
||||
// In compiled output: dist-electron/preload/settings.js
|
||||
const preloadPath = path.join(__dirname, "..", "preload", "settings.js")
|
||||
|
||||
// Determine path to settings HTML
|
||||
// In packaged app: app.asar/dist-electron/settings/index.html
|
||||
// In development: electron/settings/index.html
|
||||
const settingsHtmlPath = app.isPackaged
|
||||
? path.join(__dirname, "..", "settings", "index.html")
|
||||
: path.join(__dirname, "..", "..", "electron", "settings", "index.html")
|
||||
|
||||
settingsWindow = new BrowserWindow({
|
||||
width: 600,
|
||||
height: 700,
|
||||
minWidth: 500,
|
||||
minHeight: 500,
|
||||
parent: parentWindow,
|
||||
modal: false,
|
||||
show: false,
|
||||
title: "Settings - Next AI Draw.io",
|
||||
webPreferences: {
|
||||
preload: preloadPath,
|
||||
contextIsolation: true,
|
||||
nodeIntegration: false,
|
||||
sandbox: true,
|
||||
},
|
||||
})
|
||||
settingsWindow.loadFile(settingsHtmlPath)
|
||||
|
||||
settingsWindow.once("ready-to-show", () => {
|
||||
settingsWindow?.show()
|
||||
})
|
||||
|
||||
settingsWindow.on("closed", () => {
|
||||
settingsWindow = null
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the settings window if it exists
|
||||
*/
|
||||
export function closeSettingsWindow(): void {
|
||||
if (settingsWindow && !settingsWindow.isDestroyed()) {
|
||||
settingsWindow.close()
|
||||
settingsWindow = null
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if settings window is open
|
||||
*/
|
||||
export function isSettingsWindowOpen(): boolean {
|
||||
return settingsWindow !== null && !settingsWindow.isDestroyed()
|
||||
}
|
||||
|
||||
/**
|
||||
* Register settings window IPC handlers
|
||||
*/
|
||||
export function registerSettingsWindowHandlers(): void {
|
||||
ipcMain.on("settings:close", () => {
|
||||
closeSettingsWindow()
|
||||
})
|
||||
}
|
||||
84
electron/main/window-manager.ts
Normal file
84
electron/main/window-manager.ts
Normal file
@@ -0,0 +1,84 @@
|
||||
import path from "node:path"
|
||||
import { app, BrowserWindow, screen } from "electron"
|
||||
|
||||
let mainWindow: BrowserWindow | null = null
|
||||
|
||||
/**
|
||||
* Get the icon path based on platform
|
||||
* Note: electron-builder converts icon.png during packaging,
|
||||
* but at runtime we use PNG directly - Electron handles it
|
||||
*/
|
||||
function getIconPath(): string | undefined {
|
||||
// macOS doesn't need explicit icon - it's embedded in the app bundle
|
||||
if (process.platform === "darwin" && app.isPackaged) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
const iconName = "icon.png"
|
||||
|
||||
if (app.isPackaged) {
|
||||
return path.join(process.resourcesPath, iconName)
|
||||
}
|
||||
|
||||
// Development: use icon.png from resources
|
||||
return path.join(__dirname, "../../resources/icon.png")
|
||||
}
|
||||
|
||||
/**
|
||||
* Create the main application window
|
||||
*/
|
||||
export function createWindow(serverUrl: string): BrowserWindow {
|
||||
const { width, height } = screen.getPrimaryDisplay().workAreaSize
|
||||
|
||||
mainWindow = new BrowserWindow({
|
||||
width: Math.min(1400, Math.floor(width * 0.9)),
|
||||
height: Math.min(900, Math.floor(height * 0.9)),
|
||||
minWidth: 800,
|
||||
minHeight: 600,
|
||||
title: "Next AI Draw.io",
|
||||
icon: getIconPath(),
|
||||
show: false, // Don't show until ready
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, "../preload/index.js"),
|
||||
contextIsolation: true,
|
||||
nodeIntegration: false,
|
||||
sandbox: true,
|
||||
webSecurity: true,
|
||||
},
|
||||
})
|
||||
|
||||
// Load the Next.js application
|
||||
mainWindow.loadURL(serverUrl)
|
||||
|
||||
// Show window when ready to prevent flashing
|
||||
mainWindow.once("ready-to-show", () => {
|
||||
mainWindow?.show()
|
||||
})
|
||||
|
||||
// Open DevTools in development
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
mainWindow.webContents.openDevTools()
|
||||
}
|
||||
|
||||
mainWindow.on("closed", () => {
|
||||
mainWindow = null
|
||||
})
|
||||
|
||||
// Handle page title updates
|
||||
mainWindow.webContents.on("page-title-updated", (event, title) => {
|
||||
if (title && !title.includes("localhost")) {
|
||||
mainWindow?.setTitle(title)
|
||||
} else {
|
||||
event.preventDefault()
|
||||
}
|
||||
})
|
||||
|
||||
return mainWindow
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the main window instance
|
||||
*/
|
||||
export function getMainWindow(): BrowserWindow | null {
|
||||
return mainWindow
|
||||
}
|
||||
24
electron/preload/index.ts
Normal file
24
electron/preload/index.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import { contextBridge, ipcRenderer } from "electron"
|
||||
|
||||
/**
|
||||
* Expose safe APIs to the renderer process
|
||||
*/
|
||||
contextBridge.exposeInMainWorld("electronAPI", {
|
||||
// Platform information
|
||||
platform: process.platform,
|
||||
|
||||
// Check if running in Electron
|
||||
isElectron: true,
|
||||
|
||||
// Application version
|
||||
getVersion: () => ipcRenderer.invoke("get-version"),
|
||||
|
||||
// Window controls (optional, for custom title bar)
|
||||
minimize: () => ipcRenderer.send("window-minimize"),
|
||||
maximize: () => ipcRenderer.send("window-maximize"),
|
||||
close: () => ipcRenderer.send("window-close"),
|
||||
|
||||
// File operations
|
||||
openFile: () => ipcRenderer.invoke("dialog-open-file"),
|
||||
saveFile: (data: string) => ipcRenderer.invoke("dialog-save-file", data),
|
||||
})
|
||||
35
electron/preload/settings.ts
Normal file
35
electron/preload/settings.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
/**
|
||||
* Preload script for settings window
|
||||
* Exposes APIs for managing configuration presets
|
||||
*/
|
||||
import { contextBridge, ipcRenderer } from "electron"
|
||||
|
||||
// Expose settings API to the renderer process
|
||||
contextBridge.exposeInMainWorld("settingsAPI", {
|
||||
// Get all presets
|
||||
getPresets: () => ipcRenderer.invoke("config-presets:get-all"),
|
||||
|
||||
// Get current preset ID
|
||||
getCurrentPresetId: () =>
|
||||
ipcRenderer.invoke("config-presets:get-current-id"),
|
||||
|
||||
// Get current preset
|
||||
getCurrentPreset: () => ipcRenderer.invoke("config-presets:get-current"),
|
||||
|
||||
// Save (create or update) a preset
|
||||
savePreset: (preset: {
|
||||
id?: string
|
||||
name: string
|
||||
config: Record<string, string | undefined>
|
||||
}) => ipcRenderer.invoke("config-presets:save", preset),
|
||||
|
||||
// Delete a preset
|
||||
deletePreset: (id: string) =>
|
||||
ipcRenderer.invoke("config-presets:delete", id),
|
||||
|
||||
// Apply a preset (sets environment variables and restarts server)
|
||||
applyPreset: (id: string) => ipcRenderer.invoke("config-presets:apply", id),
|
||||
|
||||
// Close settings window
|
||||
close: () => ipcRenderer.send("settings:close"),
|
||||
})
|
||||
110
electron/settings/index.html
Normal file
110
electron/settings/index.html
Normal file
@@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self';">
|
||||
<title>Settings - Next AI Draw.io</title>
|
||||
<link rel="stylesheet" href="./settings.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Configuration Presets</h1>
|
||||
|
||||
<div class="section">
|
||||
<h2>Presets</h2>
|
||||
<div id="preset-list" class="preset-list">
|
||||
<!-- Presets will be loaded here -->
|
||||
</div>
|
||||
<button id="add-preset-btn" class="btn btn-primary">
|
||||
+ Add New Preset
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add/Edit Preset Modal -->
|
||||
<div id="preset-modal" class="modal-overlay">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h3 id="modal-title">Add Preset</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="preset-form">
|
||||
<input type="hidden" id="preset-id">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="preset-name">Preset Name *</label>
|
||||
<input type="text" id="preset-name" required placeholder="e.g., Work, Personal, Testing">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="ai-provider">AI Provider</label>
|
||||
<select id="ai-provider">
|
||||
<option value="">-- Select Provider --</option>
|
||||
<option value="openai">OpenAI</option>
|
||||
<option value="anthropic">Anthropic (Claude)</option>
|
||||
<option value="google">Google AI (Gemini)</option>
|
||||
<option value="azure">Azure OpenAI</option>
|
||||
<option value="bedrock">AWS Bedrock</option>
|
||||
<option value="openrouter">OpenRouter</option>
|
||||
<option value="deepseek">DeepSeek</option>
|
||||
<option value="siliconflow">SiliconFlow</option>
|
||||
<option value="ollama">Ollama (Local)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="ai-model">Model ID</label>
|
||||
<input type="text" id="ai-model" placeholder="e.g., gpt-4o, claude-sonnet-4-5">
|
||||
<div class="hint">The model identifier to use with the selected provider</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="ai-api-key">API Key</label>
|
||||
<input type="password" id="ai-api-key" placeholder="Your API key">
|
||||
<div class="hint">This will be stored locally on your device</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="ai-base-url">Base URL (Optional)</label>
|
||||
<input type="text" id="ai-base-url" placeholder="https://api.example.com/v1">
|
||||
<div class="hint">Custom API endpoint URL</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="temperature">Temperature (Optional)</label>
|
||||
<input type="text" id="temperature" placeholder="0.7">
|
||||
<div class="hint">Controls randomness (0.0 - 2.0)</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" id="cancel-btn" class="btn btn-secondary">Cancel</button>
|
||||
<button type="button" id="save-btn" class="btn btn-primary">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
<div id="delete-modal" class="modal-overlay">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h3>Delete Preset</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Are you sure you want to delete "<span id="delete-preset-name"></span>"?</p>
|
||||
<p class="delete-warning">This action cannot be undone.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" id="delete-cancel-btn" class="btn btn-secondary">Cancel</button>
|
||||
<button type="button" id="delete-confirm-btn" class="btn btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast notification -->
|
||||
<div id="toast" class="toast"></div>
|
||||
|
||||
<script src="./settings.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
311
electron/settings/settings.css
Normal file
311
electron/settings/settings.css
Normal file
@@ -0,0 +1,311 @@
|
||||
:root {
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f5f5f5;
|
||||
--bg-hover: #e8e8e8;
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #666666;
|
||||
--border-color: #e0e0e0;
|
||||
--accent-color: #0066cc;
|
||||
--accent-hover: #0052a3;
|
||||
--danger-color: #dc3545;
|
||||
--success-color: #28a745;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg-primary: #1a1a1a;
|
||||
--bg-secondary: #2d2d2d;
|
||||
--bg-hover: #3d3d3d;
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #a0a0a0;
|
||||
--border-color: #404040;
|
||||
--accent-color: #4da6ff;
|
||||
--accent-hover: #66b3ff;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
|
||||
sans-serif;
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 560px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.preset-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.preset-card {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.preset-card:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.preset-card.active {
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 1px var(--accent-color);
|
||||
}
|
||||
|
||||
.preset-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.preset-name {
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.preset-badge {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.preset-info {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.preset-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--danger-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 6px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 100;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-overlay.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: var(--bg-primary);
|
||||
border-radius: 12px;
|
||||
width: 90%;
|
||||
max-width: 480px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
|
||||
}
|
||||
|
||||
.form-group .hint {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid var(--border-color);
|
||||
border-top-color: var(--accent-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--text-primary);
|
||||
color: var(--bg-primary);
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
z-index: 200;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.toast.show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.toast.success {
|
||||
background: var(--success-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.toast.error {
|
||||
background: var(--danger-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Inline style replacements */
|
||||
.delete-warning {
|
||||
color: var(--text-secondary);
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
311
electron/settings/settings.js
Normal file
311
electron/settings/settings.js
Normal file
@@ -0,0 +1,311 @@
|
||||
// Settings page JavaScript
|
||||
// This file handles the UI interactions for the settings window
|
||||
|
||||
let presets = []
|
||||
let currentPresetId = null
|
||||
let editingPresetId = null
|
||||
let deletingPresetId = null
|
||||
|
||||
// DOM Elements
|
||||
const presetList = document.getElementById("preset-list")
|
||||
const addPresetBtn = document.getElementById("add-preset-btn")
|
||||
const presetModal = document.getElementById("preset-modal")
|
||||
const deleteModal = document.getElementById("delete-modal")
|
||||
const presetForm = document.getElementById("preset-form")
|
||||
const modalTitle = document.getElementById("modal-title")
|
||||
const toast = document.getElementById("toast")
|
||||
|
||||
// Form fields
|
||||
const presetIdField = document.getElementById("preset-id")
|
||||
const presetNameField = document.getElementById("preset-name")
|
||||
const aiProviderField = document.getElementById("ai-provider")
|
||||
const aiModelField = document.getElementById("ai-model")
|
||||
const aiApiKeyField = document.getElementById("ai-api-key")
|
||||
const aiBaseUrlField = document.getElementById("ai-base-url")
|
||||
const temperatureField = document.getElementById("temperature")
|
||||
|
||||
// Buttons
|
||||
const cancelBtn = document.getElementById("cancel-btn")
|
||||
const saveBtn = document.getElementById("save-btn")
|
||||
const deleteCancelBtn = document.getElementById("delete-cancel-btn")
|
||||
const deleteConfirmBtn = document.getElementById("delete-confirm-btn")
|
||||
|
||||
// Initialize
|
||||
document.addEventListener("DOMContentLoaded", async () => {
|
||||
await loadPresets()
|
||||
setupEventListeners()
|
||||
})
|
||||
|
||||
// Load presets from main process
|
||||
async function loadPresets() {
|
||||
try {
|
||||
presets = await window.settingsAPI.getPresets()
|
||||
currentPresetId = await window.settingsAPI.getCurrentPresetId()
|
||||
renderPresets()
|
||||
} catch (error) {
|
||||
console.error("Failed to load presets:", error)
|
||||
showToast("Failed to load presets", "error")
|
||||
}
|
||||
}
|
||||
|
||||
// Render presets list
|
||||
function renderPresets() {
|
||||
if (presets.length === 0) {
|
||||
presetList.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<p>No presets configured yet.</p>
|
||||
<p>Add a preset to quickly switch between different AI configurations.</p>
|
||||
</div>
|
||||
`
|
||||
return
|
||||
}
|
||||
|
||||
presetList.innerHTML = presets
|
||||
.map((preset) => {
|
||||
const isActive = preset.id === currentPresetId
|
||||
const providerLabel = getProviderLabel(preset.config.AI_PROVIDER)
|
||||
|
||||
return `
|
||||
<div class="preset-card ${isActive ? "active" : ""}" data-id="${preset.id}">
|
||||
<div class="preset-header">
|
||||
<span class="preset-name">${escapeHtml(preset.name)}</span>
|
||||
${isActive ? '<span class="preset-badge">Active</span>' : ""}
|
||||
</div>
|
||||
<div class="preset-info">
|
||||
${providerLabel ? `Provider: ${providerLabel}` : "No provider configured"}
|
||||
${preset.config.AI_MODEL ? ` • Model: ${escapeHtml(preset.config.AI_MODEL)}` : ""}
|
||||
</div>
|
||||
<div class="preset-actions">
|
||||
${!isActive ? `<button class="btn btn-primary btn-sm apply-btn" data-id="${preset.id}">Apply</button>` : ""}
|
||||
<button class="btn btn-secondary btn-sm edit-btn" data-id="${preset.id}">Edit</button>
|
||||
<button class="btn btn-secondary btn-sm delete-btn" data-id="${preset.id}">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
.join("")
|
||||
|
||||
// Add event listeners to buttons
|
||||
presetList.querySelectorAll(".apply-btn").forEach((btn) => {
|
||||
btn.addEventListener("click", (e) => {
|
||||
e.stopPropagation()
|
||||
applyPreset(btn.dataset.id)
|
||||
})
|
||||
})
|
||||
|
||||
presetList.querySelectorAll(".edit-btn").forEach((btn) => {
|
||||
btn.addEventListener("click", (e) => {
|
||||
e.stopPropagation()
|
||||
openEditModal(btn.dataset.id)
|
||||
})
|
||||
})
|
||||
|
||||
presetList.querySelectorAll(".delete-btn").forEach((btn) => {
|
||||
btn.addEventListener("click", (e) => {
|
||||
e.stopPropagation()
|
||||
openDeleteModal(btn.dataset.id)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// Setup event listeners
|
||||
function setupEventListeners() {
|
||||
addPresetBtn.addEventListener("click", () => openAddModal())
|
||||
cancelBtn.addEventListener("click", () => closeModal())
|
||||
saveBtn.addEventListener("click", () => savePreset())
|
||||
deleteCancelBtn.addEventListener("click", () => closeDeleteModal())
|
||||
deleteConfirmBtn.addEventListener("click", () => confirmDelete())
|
||||
|
||||
// Close modal on overlay click
|
||||
presetModal.addEventListener("click", (e) => {
|
||||
if (e.target === presetModal) closeModal()
|
||||
})
|
||||
deleteModal.addEventListener("click", (e) => {
|
||||
if (e.target === deleteModal) closeDeleteModal()
|
||||
})
|
||||
|
||||
// Handle Enter key in form
|
||||
presetForm.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault()
|
||||
savePreset()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Open add modal
|
||||
function openAddModal() {
|
||||
editingPresetId = null
|
||||
modalTitle.textContent = "Add Preset"
|
||||
presetForm.reset()
|
||||
presetIdField.value = ""
|
||||
presetModal.classList.add("show")
|
||||
presetNameField.focus()
|
||||
}
|
||||
|
||||
// Open edit modal
|
||||
function openEditModal(id) {
|
||||
const preset = presets.find((p) => p.id === id)
|
||||
if (!preset) return
|
||||
|
||||
editingPresetId = id
|
||||
modalTitle.textContent = "Edit Preset"
|
||||
|
||||
presetIdField.value = preset.id
|
||||
presetNameField.value = preset.name
|
||||
aiProviderField.value = preset.config.AI_PROVIDER || ""
|
||||
aiModelField.value = preset.config.AI_MODEL || ""
|
||||
aiApiKeyField.value = preset.config.AI_API_KEY || ""
|
||||
aiBaseUrlField.value = preset.config.AI_BASE_URL || ""
|
||||
temperatureField.value = preset.config.TEMPERATURE || ""
|
||||
|
||||
presetModal.classList.add("show")
|
||||
presetNameField.focus()
|
||||
}
|
||||
|
||||
// Close modal
|
||||
function closeModal() {
|
||||
presetModal.classList.remove("show")
|
||||
editingPresetId = null
|
||||
}
|
||||
|
||||
// Open delete modal
|
||||
function openDeleteModal(id) {
|
||||
const preset = presets.find((p) => p.id === id)
|
||||
if (!preset) return
|
||||
|
||||
deletingPresetId = id
|
||||
document.getElementById("delete-preset-name").textContent = preset.name
|
||||
deleteModal.classList.add("show")
|
||||
}
|
||||
|
||||
// Close delete modal
|
||||
function closeDeleteModal() {
|
||||
deleteModal.classList.remove("show")
|
||||
deletingPresetId = null
|
||||
}
|
||||
|
||||
// Save preset
|
||||
async function savePreset() {
|
||||
const name = presetNameField.value.trim()
|
||||
if (!name) {
|
||||
showToast("Please enter a preset name", "error")
|
||||
presetNameField.focus()
|
||||
return
|
||||
}
|
||||
|
||||
const preset = {
|
||||
id: editingPresetId || undefined,
|
||||
name: name,
|
||||
config: {
|
||||
AI_PROVIDER: aiProviderField.value || undefined,
|
||||
AI_MODEL: aiModelField.value.trim() || undefined,
|
||||
AI_API_KEY: aiApiKeyField.value.trim() || undefined,
|
||||
AI_BASE_URL: aiBaseUrlField.value.trim() || undefined,
|
||||
TEMPERATURE: temperatureField.value.trim() || undefined,
|
||||
},
|
||||
}
|
||||
|
||||
// Remove undefined values
|
||||
Object.keys(preset.config).forEach((key) => {
|
||||
if (preset.config[key] === undefined) {
|
||||
delete preset.config[key]
|
||||
}
|
||||
})
|
||||
|
||||
try {
|
||||
saveBtn.disabled = true
|
||||
saveBtn.innerHTML = '<span class="loading"></span>'
|
||||
|
||||
await window.settingsAPI.savePreset(preset)
|
||||
await loadPresets()
|
||||
closeModal()
|
||||
showToast(
|
||||
editingPresetId ? "Preset updated" : "Preset created",
|
||||
"success",
|
||||
)
|
||||
} catch (error) {
|
||||
console.error("Failed to save preset:", error)
|
||||
showToast("Failed to save preset", "error")
|
||||
} finally {
|
||||
saveBtn.disabled = false
|
||||
saveBtn.textContent = "Save"
|
||||
}
|
||||
}
|
||||
|
||||
// Confirm delete
|
||||
async function confirmDelete() {
|
||||
if (!deletingPresetId) return
|
||||
|
||||
try {
|
||||
deleteConfirmBtn.disabled = true
|
||||
deleteConfirmBtn.innerHTML = '<span class="loading"></span>'
|
||||
|
||||
await window.settingsAPI.deletePreset(deletingPresetId)
|
||||
await loadPresets()
|
||||
closeDeleteModal()
|
||||
showToast("Preset deleted", "success")
|
||||
} catch (error) {
|
||||
console.error("Failed to delete preset:", error)
|
||||
showToast("Failed to delete preset", "error")
|
||||
} finally {
|
||||
deleteConfirmBtn.disabled = false
|
||||
deleteConfirmBtn.textContent = "Delete"
|
||||
}
|
||||
}
|
||||
|
||||
// Apply preset
|
||||
async function applyPreset(id) {
|
||||
try {
|
||||
const btn = presetList.querySelector(`.apply-btn[data-id="${id}"]`)
|
||||
if (btn) {
|
||||
btn.disabled = true
|
||||
btn.innerHTML = '<span class="loading"></span>'
|
||||
}
|
||||
|
||||
const result = await window.settingsAPI.applyPreset(id)
|
||||
if (result.success) {
|
||||
currentPresetId = id
|
||||
renderPresets()
|
||||
showToast("Preset applied, server restarting...", "success")
|
||||
} else {
|
||||
showToast(result.error || "Failed to apply preset", "error")
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to apply preset:", error)
|
||||
showToast("Failed to apply preset", "error")
|
||||
}
|
||||
}
|
||||
|
||||
// Get provider display label
|
||||
function getProviderLabel(provider) {
|
||||
const labels = {
|
||||
openai: "OpenAI",
|
||||
anthropic: "Anthropic",
|
||||
google: "Google AI",
|
||||
azure: "Azure OpenAI",
|
||||
bedrock: "AWS Bedrock",
|
||||
openrouter: "OpenRouter",
|
||||
deepseek: "DeepSeek",
|
||||
siliconflow: "SiliconFlow",
|
||||
ollama: "Ollama",
|
||||
}
|
||||
return labels[provider] || provider
|
||||
}
|
||||
|
||||
// Show toast notification
|
||||
function showToast(message, type = "") {
|
||||
toast.textContent = message
|
||||
toast.className = "toast show" + (type ? ` ${type}` : "")
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.remove("show")
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
// Escape HTML to prevent XSS
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement("div")
|
||||
div.textContent = text
|
||||
return div.innerHTML
|
||||
}
|
||||
18
electron/tsconfig.json
Normal file
18
electron/tsconfig.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"module": "CommonJS",
|
||||
"moduleResolution": "node",
|
||||
"lib": ["ES2022"],
|
||||
"outDir": "../dist-electron",
|
||||
"rootDir": ".",
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"resolveJsonModule": true,
|
||||
"declaration": false,
|
||||
"sourceMap": true
|
||||
},
|
||||
"include": ["./**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
5193
package-lock.json
generated
5193
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
22
package.json
22
package.json
@@ -3,6 +3,7 @@
|
||||
"version": "0.4.4",
|
||||
"license": "Apache-2.0",
|
||||
"private": true,
|
||||
"main": "dist-electron/main/index.js",
|
||||
"scripts": {
|
||||
"dev": "next dev --turbopack --port 6002",
|
||||
"build": "next build",
|
||||
@@ -10,7 +11,17 @@
|
||||
"lint": "biome lint .",
|
||||
"format": "biome check --write .",
|
||||
"check": "biome ci",
|
||||
"prepare": "husky"
|
||||
"prepare": "husky",
|
||||
"electron:dev": "node scripts/electron-dev.mjs",
|
||||
"electron:build": "npm run build && npm run electron:compile",
|
||||
"electron:compile": "npx esbuild electron/main/index.ts electron/preload/index.ts electron/preload/settings.ts --bundle --platform=node --outdir=dist-electron --external:electron --sourcemap --packages=external && npx shx cp -r electron/settings dist-electron/",
|
||||
"electron:start": "npx cross-env NODE_ENV=development npx electron .",
|
||||
"electron:prepare": "node scripts/prepare-electron-build.mjs",
|
||||
"dist": "npm run electron:build && npm run electron:prepare && npx electron-builder",
|
||||
"dist:mac": "npm run electron:build && npm run electron:prepare && npx electron-builder --mac",
|
||||
"dist:win": "npm run electron:build && npm run electron:prepare && npx electron-builder --win",
|
||||
"dist:linux": "npm run electron:build && npm run electron:prepare && npx electron-builder --linux",
|
||||
"dist:all": "npm run electron:build && npm run electron:prepare && npx electron-builder --mac --win --linux"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ai-sdk/amazon-bedrock": "^3.0.70",
|
||||
@@ -84,11 +95,18 @@
|
||||
"@types/pako": "^2.0.3",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"concurrently": "^9.2.1",
|
||||
"cross-env": "^10.1.0",
|
||||
"electron": "^39.2.7",
|
||||
"electron-builder": "^26.0.12",
|
||||
"esbuild": "^0.27.2",
|
||||
"eslint": "9.39.1",
|
||||
"eslint-config-next": "16.0.5",
|
||||
"husky": "^9.1.7",
|
||||
"lint-staged": "^16.2.7",
|
||||
"shx": "^0.4.0",
|
||||
"tailwindcss": "^4",
|
||||
"typescript": "^5"
|
||||
"typescript": "^5",
|
||||
"wait-on": "^9.0.3"
|
||||
}
|
||||
}
|
||||
|
||||
16
resources/entitlements.mac.plist
Normal file
16
resources/entitlements.mac.plist
Normal file
@@ -0,0 +1,16 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||
<plist version="1.0">
|
||||
<dict>
|
||||
<key>com.apple.security.cs.allow-jit</key>
|
||||
<true/>
|
||||
<key>com.apple.security.cs.allow-unsigned-executable-memory</key>
|
||||
<true/>
|
||||
<key>com.apple.security.cs.allow-dyld-environment-variables</key>
|
||||
<true/>
|
||||
<key>com.apple.security.network.client</key>
|
||||
<true/>
|
||||
<key>com.apple.security.network.server</key>
|
||||
<true/>
|
||||
</dict>
|
||||
</plist>
|
||||
BIN
resources/icon.png
Normal file
BIN
resources/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
39
scripts/afterPack.cjs
Normal file
39
scripts/afterPack.cjs
Normal file
@@ -0,0 +1,39 @@
|
||||
/**
|
||||
* electron-builder afterPack hook
|
||||
* Copies node_modules to the standalone directory in the packaged app
|
||||
*/
|
||||
|
||||
const { cpSync, existsSync } = require("fs")
|
||||
const path = require("path")
|
||||
|
||||
module.exports = async function (context) {
|
||||
const appOutDir = context.appOutDir
|
||||
const resourcesDir = path.join(
|
||||
appOutDir,
|
||||
context.packager.platform.name === "mac"
|
||||
? `${context.packager.appInfo.productFilename}.app/Contents/Resources`
|
||||
: "resources"
|
||||
)
|
||||
const standaloneDir = path.join(resourcesDir, "standalone")
|
||||
const sourceNodeModules = path.join(
|
||||
context.packager.projectDir,
|
||||
"electron-standalone",
|
||||
"node_modules"
|
||||
)
|
||||
const targetNodeModules = path.join(standaloneDir, "node_modules")
|
||||
|
||||
console.log(`[afterPack] Copying node_modules to ${targetNodeModules}`)
|
||||
|
||||
if (existsSync(sourceNodeModules) && existsSync(standaloneDir)) {
|
||||
cpSync(sourceNodeModules, targetNodeModules, { recursive: true })
|
||||
console.log("[afterPack] node_modules copied successfully")
|
||||
} else {
|
||||
console.error("[afterPack] Source or target directory not found!")
|
||||
console.error(` Source: ${sourceNodeModules} exists: ${existsSync(sourceNodeModules)}`)
|
||||
console.error(` Target dir: ${standaloneDir} exists: ${existsSync(standaloneDir)}`)
|
||||
throw new Error(
|
||||
"[afterPack] Failed: Required directories not found. " +
|
||||
"Ensure 'npm run electron:prepare' was run before building."
|
||||
)
|
||||
}
|
||||
}
|
||||
275
scripts/electron-dev.mjs
Normal file
275
scripts/electron-dev.mjs
Normal file
@@ -0,0 +1,275 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
/**
|
||||
* Development script for running Electron with Next.js
|
||||
* 1. Reads preset configuration (if exists)
|
||||
* 2. Starts Next.js dev server with preset env vars
|
||||
* 3. Waits for it to be ready
|
||||
* 4. Compiles Electron TypeScript
|
||||
* 5. Launches Electron
|
||||
* 6. Watches for preset changes and restarts Next.js
|
||||
*/
|
||||
|
||||
import { spawn } from "node:child_process"
|
||||
import { fileURLToPath } from "node:url"
|
||||
import { existsSync, readFileSync, watch } from "node:fs"
|
||||
import path from "node:path"
|
||||
import os from "node:os"
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url))
|
||||
const rootDir = path.join(__dirname, "..")
|
||||
|
||||
const NEXT_PORT = 6002
|
||||
const NEXT_URL = `http://localhost:${NEXT_PORT}`
|
||||
|
||||
/**
|
||||
* Get the user data path (same as Electron's app.getPath("userData"))
|
||||
*/
|
||||
function getUserDataPath() {
|
||||
const appName = "next-ai-draw-io"
|
||||
switch (process.platform) {
|
||||
case "darwin":
|
||||
return path.join(os.homedir(), "Library", "Application Support", appName)
|
||||
case "win32":
|
||||
return path.join(process.env.APPDATA || path.join(os.homedir(), "AppData", "Roaming"), appName)
|
||||
default:
|
||||
return path.join(os.homedir(), ".config", appName)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load preset configuration from config file
|
||||
*/
|
||||
function loadPresetConfig() {
|
||||
const configPath = path.join(getUserDataPath(), "config-presets.json")
|
||||
|
||||
if (!existsSync(configPath)) {
|
||||
console.log("📋 No preset configuration found, using .env.local")
|
||||
return null
|
||||
}
|
||||
|
||||
try {
|
||||
const content = readFileSync(configPath, "utf-8")
|
||||
const data = JSON.parse(content)
|
||||
|
||||
if (!data.currentPresetId) {
|
||||
console.log("📋 No active preset, using .env.local")
|
||||
return null
|
||||
}
|
||||
|
||||
const preset = data.presets.find(p => p.id === data.currentPresetId)
|
||||
if (!preset) {
|
||||
console.log("📋 Active preset not found, using .env.local")
|
||||
return null
|
||||
}
|
||||
|
||||
console.log(`📋 Using preset: "${preset.name}"`)
|
||||
return preset.config
|
||||
} catch (error) {
|
||||
console.error("Failed to load preset config:", error.message)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Wait for the Next.js server to be ready
|
||||
*/
|
||||
async function waitForServer(url, timeout = 120000) {
|
||||
const start = Date.now()
|
||||
console.log(`Waiting for server at ${url}...`)
|
||||
|
||||
while (Date.now() - start < timeout) {
|
||||
try {
|
||||
const response = await fetch(url)
|
||||
if (response.ok || response.status < 500) {
|
||||
console.log("Server is ready!")
|
||||
return true
|
||||
}
|
||||
} catch {
|
||||
// Server not ready yet
|
||||
}
|
||||
await new Promise((r) => setTimeout(r, 500))
|
||||
process.stdout.write(".")
|
||||
}
|
||||
|
||||
throw new Error(`Timeout waiting for server at ${url}`)
|
||||
}
|
||||
|
||||
/**
|
||||
* Run a command and wait for it to complete
|
||||
*/
|
||||
function runCommand(command, args, options = {}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const proc = spawn(command, args, {
|
||||
cwd: rootDir,
|
||||
stdio: "inherit",
|
||||
shell: true,
|
||||
...options,
|
||||
})
|
||||
|
||||
proc.on("close", (code) => {
|
||||
if (code === 0) {
|
||||
resolve()
|
||||
} else {
|
||||
reject(new Error(`Command failed with code ${code}`))
|
||||
}
|
||||
})
|
||||
|
||||
proc.on("error", reject)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Start Next.js dev server with preset environment
|
||||
*/
|
||||
function startNextServer(presetEnv) {
|
||||
const env = { ...process.env }
|
||||
|
||||
// Apply preset environment variables
|
||||
if (presetEnv) {
|
||||
for (const [key, value] of Object.entries(presetEnv)) {
|
||||
if (value !== undefined && value !== "") {
|
||||
env[key] = value
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const nextProcess = spawn("npm", ["run", "dev"], {
|
||||
cwd: rootDir,
|
||||
stdio: "inherit",
|
||||
shell: true,
|
||||
env,
|
||||
})
|
||||
|
||||
nextProcess.on("error", (err) => {
|
||||
console.error("Failed to start Next.js:", err)
|
||||
})
|
||||
|
||||
return nextProcess
|
||||
}
|
||||
|
||||
/**
|
||||
* Main entry point
|
||||
*/
|
||||
async function main() {
|
||||
console.log("🚀 Starting Electron development environment...\n")
|
||||
|
||||
// Load preset configuration
|
||||
const presetEnv = loadPresetConfig()
|
||||
|
||||
// Start Next.js dev server with preset env
|
||||
console.log("1. Starting Next.js development server...")
|
||||
let nextProcess = startNextServer(presetEnv)
|
||||
|
||||
// Wait for Next.js to be ready
|
||||
try {
|
||||
await waitForServer(NEXT_URL)
|
||||
console.log("")
|
||||
} catch (err) {
|
||||
console.error("\n❌ Next.js server failed to start:", err.message)
|
||||
nextProcess.kill()
|
||||
process.exit(1)
|
||||
}
|
||||
|
||||
// Compile Electron TypeScript
|
||||
console.log("\n2. Compiling Electron code...")
|
||||
try {
|
||||
await runCommand("npm", ["run", "electron:compile"])
|
||||
} catch (err) {
|
||||
console.error("❌ Electron compilation failed:", err.message)
|
||||
nextProcess.kill()
|
||||
process.exit(1)
|
||||
}
|
||||
|
||||
// Start Electron
|
||||
console.log("\n3. Starting Electron...")
|
||||
const electronProcess = spawn("npm", ["run", "electron:start"], {
|
||||
cwd: rootDir,
|
||||
stdio: "inherit",
|
||||
shell: true,
|
||||
env: {
|
||||
...process.env,
|
||||
NODE_ENV: "development",
|
||||
ELECTRON_DEV_URL: NEXT_URL,
|
||||
},
|
||||
})
|
||||
|
||||
// Watch for preset config changes
|
||||
const configPath = path.join(getUserDataPath(), "config-presets.json")
|
||||
let configWatcher = null
|
||||
let restartPending = false
|
||||
|
||||
function setupConfigWatcher() {
|
||||
if (!existsSync(path.dirname(configPath))) {
|
||||
// Directory doesn't exist yet, check again later
|
||||
setTimeout(setupConfigWatcher, 5000)
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
configWatcher = watch(configPath, { persistent: false }, async (eventType) => {
|
||||
if (eventType === "change" && !restartPending) {
|
||||
restartPending = true
|
||||
console.log("\n🔄 Preset configuration changed, restarting Next.js server...")
|
||||
|
||||
// Kill current Next.js process
|
||||
nextProcess.kill()
|
||||
|
||||
// Wait a bit for process to die
|
||||
await new Promise(r => setTimeout(r, 1000))
|
||||
|
||||
// Reload preset and restart
|
||||
const newPresetEnv = loadPresetConfig()
|
||||
nextProcess = startNextServer(newPresetEnv)
|
||||
|
||||
try {
|
||||
await waitForServer(NEXT_URL)
|
||||
console.log("✅ Next.js server restarted with new configuration\n")
|
||||
} catch (err) {
|
||||
console.error("❌ Failed to restart Next.js:", err.message)
|
||||
}
|
||||
|
||||
restartPending = false
|
||||
}
|
||||
})
|
||||
console.log("👀 Watching for preset configuration changes...")
|
||||
} catch (err) {
|
||||
// File might not exist yet, that's ok
|
||||
setTimeout(setupConfigWatcher, 5000)
|
||||
}
|
||||
}
|
||||
|
||||
// Start watching after a delay (config file might not exist yet)
|
||||
setTimeout(setupConfigWatcher, 2000)
|
||||
|
||||
electronProcess.on("close", (code) => {
|
||||
console.log(`\nElectron exited with code ${code}`)
|
||||
if (configWatcher) configWatcher.close()
|
||||
nextProcess.kill()
|
||||
process.exit(code || 0)
|
||||
})
|
||||
|
||||
electronProcess.on("error", (err) => {
|
||||
console.error("Electron error:", err)
|
||||
if (configWatcher) configWatcher.close()
|
||||
nextProcess.kill()
|
||||
process.exit(1)
|
||||
})
|
||||
|
||||
// Handle termination signals
|
||||
const cleanup = () => {
|
||||
console.log("\n🛑 Shutting down...")
|
||||
if (configWatcher) configWatcher.close()
|
||||
electronProcess.kill()
|
||||
nextProcess.kill()
|
||||
process.exit(0)
|
||||
}
|
||||
|
||||
process.on("SIGINT", cleanup)
|
||||
process.on("SIGTERM", cleanup)
|
||||
}
|
||||
|
||||
main().catch((err) => {
|
||||
console.error("Fatal error:", err)
|
||||
process.exit(1)
|
||||
})
|
||||
41
scripts/prepare-electron-build.mjs
Normal file
41
scripts/prepare-electron-build.mjs
Normal file
@@ -0,0 +1,41 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
/**
|
||||
* Prepare standalone directory for Electron packaging
|
||||
* Copies the Next.js standalone output to a temp directory
|
||||
* that electron-builder can properly include
|
||||
*/
|
||||
|
||||
import { cpSync, rmSync, existsSync, mkdirSync } from "node:fs"
|
||||
import { join } from "node:path"
|
||||
import { fileURLToPath } from "node:url"
|
||||
|
||||
const __dirname = fileURLToPath(new URL(".", import.meta.url))
|
||||
const rootDir = join(__dirname, "..")
|
||||
|
||||
const standaloneDir = join(rootDir, ".next", "standalone")
|
||||
const staticDir = join(rootDir, ".next", "static")
|
||||
const targetDir = join(rootDir, "electron-standalone")
|
||||
|
||||
console.log("Preparing Electron build...")
|
||||
|
||||
// Clean target directory
|
||||
if (existsSync(targetDir)) {
|
||||
console.log("Cleaning previous build...")
|
||||
rmSync(targetDir, { recursive: true })
|
||||
}
|
||||
|
||||
// Create target directory
|
||||
mkdirSync(targetDir, { recursive: true })
|
||||
|
||||
// Copy standalone (includes node_modules)
|
||||
console.log("Copying standalone directory...")
|
||||
cpSync(standaloneDir, targetDir, { recursive: true })
|
||||
|
||||
// Copy static files
|
||||
console.log("Copying static files...")
|
||||
const targetStaticDir = join(targetDir, ".next", "static")
|
||||
mkdirSync(targetStaticDir, { recursive: true })
|
||||
cpSync(staticDir, targetStaticDir, { recursive: true })
|
||||
|
||||
console.log("Done! Files prepared in electron-standalone/")
|
||||
@@ -29,5 +29,5 @@
|
||||
".next/types/**/*.ts",
|
||||
".next/dev/types/**/*.ts"
|
||||
],
|
||||
"exclude": ["node_modules", "packages"]
|
||||
"exclude": ["node_modules", "packages", "electron", "dist-electron"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user