feat: 添加 Tauri 桌面应用

- 创建 packages/desktop 模块
- 实现 Tauri 2.0 + React 桌面应用
- 复用 Web 前端代码
- 添加系统托盘功能
- 实现本地文件访问命令
- 配置 Vite + Tauri 集成
- 更新 .gitignore 添加 Rust/Tauri 相关规则
This commit is contained in:
2025-12-12 13:19:00 +08:00
parent b5d3b7df57
commit 6ef9d95172
86 changed files with 14495 additions and 1 deletions
+20
View File
@@ -3,27 +3,47 @@ node_modules/
# Build output
dist/
*.tsbuildinfo
# Environment files
.env
.env.local
.env.*.local
# IDE
.idea/
.vscode/
*.swp
*.swo
*~
# OS
.DS_Store
Thumbs.db
desktop.ini
# Logs
*.log
npm-debug.log*
pnpm-debug.log*
yarn-debug.log*
yarn-error.log*
# Test coverage
coverage/
.nyc_output/
# Tauri / Rust
packages/desktop/src-tauri/target/
packages/desktop/src-tauri/Cargo.lock
# Tauri generated icons (keep in repo for CI, or regenerate)
# packages/desktop/src-tauri/icons/
# Temporary files
*.tmp
*.temp
.cache/
# AI Open reference code
ai-open/
+3 -1
View File
@@ -12,7 +12,9 @@
"lint": "pnpm -r lint",
"clean": "pnpm -r exec rm -rf dist node_modules",
"server:start": "pnpm --filter @ai-assistant/server start",
"server:dev": "pnpm --filter @ai-assistant/server start:dev"
"server:dev": "pnpm --filter @ai-assistant/server start:dev",
"desktop:dev": "pnpm --filter @ai-assistant/desktop dev",
"desktop:build": "pnpm --filter @ai-assistant/desktop build"
},
"keywords": [
"ai",
+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<rect width="512" height="512" rx="64" fill="#0ea5e9"/>
<text x="256" y="320" font-family="Arial, sans-serif" font-size="280" font-weight="bold" fill="white" text-anchor="middle">AI</text>
</svg>

After

Width:  |  Height:  |  Size: 263 B

+13
View File
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI Assistant</title>
</head>
<body class="bg-gray-900 text-gray-100">
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
+38
View File
@@ -0,0 +1,38 @@
{
"name": "@ai-assistant/desktop",
"version": "1.0.0",
"description": "AI Assistant Desktop Application",
"private": true,
"type": "module",
"scripts": {
"dev": "tauri dev",
"dev:vite": "vite",
"build": "tauri build",
"build:vite": "tsc && vite build",
"build:debug": "tauri build --debug",
"tauri": "tauri"
},
"dependencies": {
"@tauri-apps/api": "^2.1.1",
"@tauri-apps/plugin-dialog": "^2.2.0",
"@tauri-apps/plugin-fs": "^2.2.0",
"@tauri-apps/plugin-shell": "^2.2.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.22.0",
"zustand": "^4.5.0",
"lucide-react": "^0.344.0",
"clsx": "^2.1.0"
},
"devDependencies": {
"@tauri-apps/cli": "^2.1.0",
"@types/react": "^18.3.0",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.18",
"postcss": "^8.4.35",
"tailwindcss": "^3.4.1",
"typescript": "^5.3.3",
"vite": "^5.1.0"
}
}
+6
View File
@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
+30
View File
@@ -0,0 +1,30 @@
[package]
name = "ai-assistant-desktop"
version = "1.0.0"
description = "AI Terminal Assistant Desktop Application"
authors = ["AI Assistant Team"]
edition = "2021"
rust-version = "1.70"
[lib]
name = "ai_assistant_desktop_lib"
crate-type = ["staticlib", "cdylib", "rlib"]
[build-dependencies]
tauri-build = { version = "2", features = [] }
[dependencies]
tauri = { version = "2", features = ["tray-icon"] }
tauri-plugin-shell = "2"
tauri-plugin-fs = "2"
tauri-plugin-dialog = "2"
serde = { version = "1", features = ["derive"] }
serde_json = "1"
tokio = { version = "1", features = ["full"] }
[profile.release]
panic = "abort"
codegen-units = 1
lto = true
opt-level = "s"
strip = true
+3
View File
@@ -0,0 +1,3 @@
fn main() {
tauri_build::build()
}
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
{}
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 503 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 785 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 477 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 655 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 949 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 676 B

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
<background android:drawable="@color/ic_launcher_background"/>
</adaptive-icon>
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="ic_launcher_background">#fff</color>
</resources>
Binary file not shown.
Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 344 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 587 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 587 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 794 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 449 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 782 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 782 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 587 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 980 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 980 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 984 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

+118
View File
@@ -0,0 +1,118 @@
use serde::Serialize;
use std::fs;
use std::path::PathBuf;
use std::sync::mpsc;
use tauri_plugin_dialog::DialogExt;
#[derive(Serialize)]
pub struct AppInfo {
pub name: String,
pub version: String,
pub tauri_version: String,
}
#[tauri::command]
pub fn get_app_info() -> AppInfo {
AppInfo {
name: "AI Assistant".to_string(),
version: env!("CARGO_PKG_VERSION").to_string(),
tauri_version: tauri::VERSION.to_string(),
}
}
#[tauri::command]
pub async fn open_directory_dialog(app: tauri::AppHandle) -> Result<Option<String>, String> {
let (tx, rx) = mpsc::channel();
app.dialog()
.file()
.set_title("Select Working Directory")
.pick_folder(move |path| {
let _ = tx.send(path);
});
match rx.recv() {
Ok(Some(path)) => Ok(Some(path.to_string())),
Ok(None) => Ok(None),
Err(e) => Err(e.to_string()),
}
}
#[derive(Serialize)]
pub struct FileContent {
pub path: String,
pub content: String,
pub size: u64,
}
#[tauri::command]
pub async fn read_local_file(path: String) -> Result<FileContent, String> {
let path_buf = PathBuf::from(&path);
if !path_buf.exists() {
return Err(format!("File not found: {}", path));
}
let metadata = fs::metadata(&path_buf).map_err(|e| e.to_string())?;
if metadata.len() > 10 * 1024 * 1024 {
return Err("File too large (max 10MB)".to_string());
}
let content = fs::read_to_string(&path_buf).map_err(|e| e.to_string())?;
Ok(FileContent {
path,
content,
size: metadata.len(),
})
}
#[derive(Serialize)]
pub struct DirectoryEntry {
pub name: String,
pub path: String,
pub is_dir: bool,
pub size: u64,
}
#[tauri::command]
pub async fn list_directory(path: String) -> Result<Vec<DirectoryEntry>, String> {
let path_buf = PathBuf::from(&path);
if !path_buf.exists() {
return Err(format!("Directory not found: {}", path));
}
if !path_buf.is_dir() {
return Err(format!("Not a directory: {}", path));
}
let mut entries = Vec::new();
let read_dir = fs::read_dir(&path_buf).map_err(|e| e.to_string())?;
for entry in read_dir {
let entry = entry.map_err(|e| e.to_string())?;
let metadata = entry.metadata().map_err(|e| e.to_string())?;
entries.push(DirectoryEntry {
name: entry.file_name().to_string_lossy().to_string(),
path: entry.path().to_string_lossy().to_string(),
is_dir: metadata.is_dir(),
size: metadata.len(),
});
}
entries.sort_by(|a, b| {
if a.is_dir == b.is_dir {
a.name.to_lowercase().cmp(&b.name.to_lowercase())
} else if a.is_dir {
std::cmp::Ordering::Less
} else {
std::cmp::Ordering::Greater
}
});
Ok(entries)
}
+66
View File
@@ -0,0 +1,66 @@
use tauri::{
menu::{Menu, MenuItem},
tray::{MouseButton, MouseButtonState, TrayIconBuilder, TrayIconEvent},
Manager, Runtime,
};
mod commands;
pub fn run() {
tauri::Builder::default()
.plugin(tauri_plugin_shell::init())
.plugin(tauri_plugin_fs::init())
.plugin(tauri_plugin_dialog::init())
.setup(|app| {
setup_tray(app)?;
Ok(())
})
.invoke_handler(tauri::generate_handler![
commands::get_app_info,
commands::open_directory_dialog,
commands::read_local_file,
commands::list_directory,
])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
fn setup_tray<R: Runtime>(app: &tauri::App<R>) -> Result<(), Box<dyn std::error::Error>> {
let show_item = MenuItem::with_id(app, "show", "Show Window", true, None::<&str>)?;
let quit_item = MenuItem::with_id(app, "quit", "Quit", true, None::<&str>)?;
let menu = Menu::with_items(app, &[&show_item, &quit_item])?;
let _tray = TrayIconBuilder::new()
.menu(&menu)
.show_menu_on_left_click(false)
.on_menu_event(|app, event| match event.id.as_ref() {
"show" => {
if let Some(window) = app.get_webview_window("main") {
let _ = window.show();
let _ = window.set_focus();
}
}
"quit" => {
app.exit(0);
}
_ => {}
})
.on_tray_icon_event(|tray, event| {
if let TrayIconEvent::Click {
button: MouseButton::Left,
button_state: MouseButtonState::Up,
..
} = event
{
let app = tray.app_handle();
if let Some(window) = app.get_webview_window("main") {
let _ = window.show();
let _ = window.set_focus();
}
}
})
.build(app)?;
Ok(())
}
+5
View File
@@ -0,0 +1,5 @@
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
fn main() {
ai_assistant_desktop_lib::run()
}
@@ -0,0 +1,55 @@
{
"$schema": "https://schema.tauri.app/config/2",
"productName": "AI Assistant",
"version": "1.0.0",
"identifier": "com.ai-assistant.desktop",
"build": {
"beforeDevCommand": "pnpm dev:vite",
"devUrl": "http://localhost:5199",
"beforeBuildCommand": "pnpm build:vite",
"frontendDist": "../dist"
},
"app": {
"withGlobalTauri": true,
"windows": [
{
"title": "AI Assistant",
"width": 1200,
"height": 800,
"minWidth": 800,
"minHeight": 600,
"resizable": true,
"fullscreen": false,
"center": true
}
],
"security": {
"csp": null
},
"trayIcon": {
"iconPath": "icons/icon.png",
"iconAsTemplate": true
}
},
"bundle": {
"active": true,
"targets": "all",
"icon": [
"icons/32x32.png",
"icons/128x128.png",
"icons/128x128@2x.png",
"icons/icon.icns",
"icons/icon.ico"
],
"macOS": {
"minimumSystemVersion": "10.15"
},
"windows": {
"wix": null,
"nsis": {
"installMode": "currentUser"
}
}
},
"plugins": {}
}
+140
View File
@@ -0,0 +1,140 @@
/**
* App Component
*/
import { useState, useEffect } from 'react';
import { Sidebar } from './components/Sidebar';
import { ChatPage } from './pages/Chat';
import { FileBrowser } from './components/FileBrowser';
import { ConfigPanel } from './components/ConfigPanel';
import { listSessions, createSession, type Session } from './api/client';
export function App() {
const [currentSessionId, setCurrentSessionId] = useState<string | null>(null);
const [isInitializing, setIsInitializing] = useState(true);
const [showFileBrowser, setShowFileBrowser] = useState(false);
const [showConfig, setShowConfig] = useState(false);
// 初始化:加载或创建会话
useEffect(() => {
async function init() {
try {
const { data: sessions } = await listSessions();
if (sessions.length > 0) {
// 选择最近的会话
setCurrentSessionId(sessions[0].id);
} else {
// 创建新会话
const { data: newSession } = await createSession();
setCurrentSessionId(newSession.id);
}
} catch (error) {
console.error('Failed to initialize:', error);
} finally {
setIsInitializing(false);
}
}
init();
}, []);
const handleSelectSession = (id: string) => {
setCurrentSessionId(id);
};
const handleCreateSession = (session: Session) => {
setCurrentSessionId(session.id);
};
if (isInitializing) {
return (
<div className="h-screen flex items-center justify-center bg-gray-900">
<div className="text-center">
<div className="w-8 h-8 border-2 border-primary-500 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
<p className="text-gray-400">Initializing...</p>
</div>
</div>
);
}
return (
<div className="h-screen flex bg-gray-900">
<Sidebar
currentSessionId={currentSessionId}
onSelectSession={handleSelectSession}
onCreateSession={handleCreateSession}
/>
{/* 工具栏按钮 */}
<div className="absolute top-3 right-4 z-10 flex gap-2">
{/* 配置按钮 */}
<button
onClick={() => setShowConfig(true)}
className="p-2 rounded-lg bg-gray-700 text-gray-300 hover:bg-gray-600 transition-colors"
title="Settings"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</button>
{/* 文件浏览器切换按钮 */}
<button
onClick={() => setShowFileBrowser(!showFileBrowser)}
className={`p-2 rounded-lg transition-colors ${
showFileBrowser ? 'bg-blue-600 text-white' : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
}`}
title={showFileBrowser ? 'Hide Files' : 'Show Files'}
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
/>
</svg>
</button>
</div>
<div className="flex-1 flex">
{/* 聊天区域 */}
<div className={`flex-1 ${showFileBrowser ? 'w-1/2' : 'w-full'}`}>
{currentSessionId ? (
<ChatPage key={currentSessionId} sessionId={currentSessionId} />
) : (
<div className="flex-1 flex items-center justify-center h-full">
<p className="text-gray-400">Select or create a session</p>
</div>
)}
</div>
{/* 文件浏览器 */}
{showFileBrowser && (
<div className="w-1/2 border-l border-gray-700">
<FileBrowser
onFileSelect={(path, _content) => {
console.log('Selected file:', path);
}}
/>
</div>
)}
</div>
{/* 配置面板 */}
{showConfig && <ConfigPanel onClose={() => setShowConfig(false)} />}
</div>
);
}
+181
View File
@@ -0,0 +1,181 @@
/**
* API Client for Web
*/
export interface Session {
id: string;
name?: string;
createdAt: string;
updatedAt: string;
status: string;
messageCount: number;
}
export interface Message {
id: string;
role: 'user' | 'assistant' | 'system';
content: string;
timestamp: string;
}
export interface HealthStatus {
status: string;
timestamp: string;
agent: {
coreAvailable: boolean;
};
auth: {
enabled: boolean;
tokenCount: number;
};
stats: {
sessions: number;
websocket: { connections: number };
sse: { connections: number };
};
}
const API_BASE = '/api';
async function request<T>(method: string, path: string, body?: unknown): Promise<T> {
const response = await fetch(`${API_BASE}${path}`, {
method,
headers: {
'Content-Type': 'application/json',
},
body: body ? JSON.stringify(body) : undefined,
});
if (!response.ok) {
const error = await response.json().catch(() => ({ error: response.statusText }));
throw new Error(error.error || `HTTP ${response.status}`);
}
return response.json();
}
// Health
export async function getHealth(): Promise<HealthStatus> {
return request('GET', '/../health');
}
// Sessions
export async function listSessions(): Promise<{ success: boolean; data: Session[] }> {
return request('GET', '/sessions');
}
export async function createSession(name?: string): Promise<{ success: boolean; data: Session }> {
return request('POST', '/sessions', { name });
}
export async function getSession(id: string): Promise<{ success: boolean; data: Session }> {
return request('GET', `/sessions/${id}`);
}
export async function deleteSession(id: string): Promise<{ success: boolean }> {
return request('DELETE', `/sessions/${id}`);
}
// Messages
export async function getMessages(sessionId: string): Promise<{ success: boolean; data: Message[] }> {
return request('GET', `/sessions/${sessionId}/messages`);
}
export async function sendMessage(
sessionId: string,
content: string
): Promise<{ success: boolean; data: Message }> {
return request('POST', `/sessions/${sessionId}/messages`, { content });
}
// WebSocket
export function createWebSocket(sessionId: string): WebSocket {
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const host = window.location.host;
return new WebSocket(`${protocol}//${host}/api/ws/${sessionId}`);
}
// Files
export interface FileInfo {
name: string;
path: string;
type: 'file' | 'directory';
size: number;
modified: string;
extension?: string;
}
export interface FileListResponse {
success: boolean;
data: {
path: string;
absolutePath: string;
parent: string | null;
files: FileInfo[];
};
}
export interface FileReadResponse {
success: boolean;
data: {
path: string;
name: string;
type: string;
size: number;
modified: string;
content: string;
encoding: 'utf-8' | 'base64';
};
}
export interface FileTreeNode {
name: string;
path: string;
type: 'file' | 'directory';
children?: FileTreeNode[];
}
export interface FileTreeResponse {
success: boolean;
data: {
path: string;
tree: FileTreeNode[];
};
}
export async function getWorkingDirectory(): Promise<{ success: boolean; data: { workingDirectory: string; separator: string } }> {
return request('GET', '/files');
}
export async function listFiles(path: string = '.', showHidden: boolean = false): Promise<FileListResponse> {
const params = new URLSearchParams({ path });
if (showHidden) params.set('hidden', 'true');
return request('GET', `/files/list?${params}`);
}
export async function readFile(path: string): Promise<FileReadResponse> {
return request('GET', `/files/read?path=${encodeURIComponent(path)}`);
}
export async function getFileTree(path: string = '.', depth: number = 3): Promise<FileTreeResponse> {
const params = new URLSearchParams({ path, depth: String(depth) });
return request('GET', `/files/tree?${params}`);
}
// Config
export interface ServerConfig {
model: string;
maxTokens: number;
temperature: number;
workdir: string;
allowedPaths: string[];
deniedPaths: string[];
}
export async function getConfig(): Promise<{ success: boolean; data: ServerConfig }> {
return request('GET', '/config');
}
export async function updateConfig(config: Partial<ServerConfig>): Promise<{ success: boolean; data: ServerConfig }> {
return request('PATCH', '/config', config);
}
@@ -0,0 +1,85 @@
/**
* Chat Input Component
*/
import { useState, useRef, useEffect } from 'react';
import { Send, Square } from 'lucide-react';
import clsx from 'clsx';
interface ChatInputProps {
onSend: (content: string) => void;
onCancel: () => void;
isLoading: boolean;
disabled?: boolean;
}
export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputProps) {
const [input, setInput] = useState('');
const textareaRef = useRef<HTMLTextAreaElement>(null);
// 自动调整高度
useEffect(() => {
const textarea = textareaRef.current;
if (textarea) {
textarea.style.height = 'auto';
textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
}
}, [input]);
const handleSubmit = () => {
const trimmed = input.trim();
if (!trimmed || isLoading || disabled) return;
onSend(trimmed);
setInput('');
// 重置高度
if (textareaRef.current) {
textareaRef.current.style.height = 'auto';
}
};
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
handleSubmit();
}
};
return (
<div className="border-t border-gray-700 p-4 bg-gray-900">
<div className="max-w-4xl mx-auto flex gap-2">
<div className="flex-1 relative">
<textarea
ref={textareaRef}
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyDown={handleKeyDown}
placeholder="Type a message... (Shift+Enter for new line)"
disabled={disabled}
rows={1}
className={clsx(
'w-full resize-none rounded-lg border border-gray-600 bg-gray-800 px-4 py-3',
'text-gray-100 placeholder-gray-500',
'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent',
'disabled:opacity-50 disabled:cursor-not-allowed'
)}
/>
</div>
<button
onClick={isLoading ? onCancel : handleSubmit}
disabled={!isLoading && (!input.trim() || disabled)}
className={clsx(
'px-4 py-3 rounded-lg flex items-center justify-center transition-colors',
isLoading
? 'bg-red-600 hover:bg-red-700 text-white'
: 'bg-primary-600 hover:bg-primary-700 text-white',
'disabled:opacity-50 disabled:cursor-not-allowed'
)}
>
{isLoading ? <Square size={20} /> : <Send size={20} />}
</button>
</div>
</div>
);
}
@@ -0,0 +1,80 @@
/**
* Chat Message Component
*/
import { User, Bot } from 'lucide-react';
import clsx from 'clsx';
import type { Message } from '../api/client';
interface ChatMessageProps {
message: Message;
}
export function ChatMessage({ message }: ChatMessageProps) {
const isUser = message.role === 'user';
return (
<div
className={clsx(
'flex gap-4 p-4 rounded-lg',
isUser ? 'bg-gray-800' : 'bg-gray-850'
)}
>
<div
className={clsx(
'w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0',
isUser ? 'bg-primary-600' : 'bg-green-600'
)}
>
{isUser ? <User size={18} /> : <Bot size={18} />}
</div>
<div className="flex-1 min-w-0">
<div className="text-sm text-gray-400 mb-1">
{isUser ? 'You' : 'AI Assistant'}
</div>
<div className="message-content whitespace-pre-wrap break-words">
{message.content}
</div>
</div>
</div>
);
}
interface StreamingMessageProps {
content: string;
}
export function StreamingMessage({ content }: StreamingMessageProps) {
return (
<div className="flex gap-4 p-4 rounded-lg bg-gray-850">
<div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 bg-green-600">
<Bot size={18} />
</div>
<div className="flex-1 min-w-0">
<div className="text-sm text-gray-400 mb-1">AI Assistant</div>
<div className="message-content whitespace-pre-wrap break-words">
{content}
<span className="inline-block w-2 h-4 bg-gray-400 animate-pulse ml-1" />
</div>
</div>
</div>
);
}
export function TypingIndicator() {
return (
<div className="flex gap-4 p-4 rounded-lg bg-gray-850">
<div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 bg-green-600">
<Bot size={18} />
</div>
<div className="flex-1">
<div className="text-sm text-gray-400 mb-1">AI Assistant</div>
<div className="typing-indicator">
<span />
<span />
<span />
</div>
</div>
</div>
);
}
@@ -0,0 +1,264 @@
/**
* ConfigPanel Component
*
* 配置面板组件
*/
import { useState, useEffect } from 'react';
import { getConfig, updateConfig, type ServerConfig } from '../api/client';
interface ConfigPanelProps {
onClose: () => void;
}
// 可用的模型列表
const AVAILABLE_MODELS = [
{ id: 'claude-sonnet-4-20250514', name: 'Claude Sonnet 4' },
{ id: 'claude-3-5-sonnet-20241022', name: 'Claude 3.5 Sonnet' },
{ id: 'claude-3-opus-20240229', name: 'Claude 3 Opus' },
{ id: 'claude-3-haiku-20240307', name: 'Claude 3 Haiku' },
];
export function ConfigPanel({ onClose }: ConfigPanelProps) {
const [config, setConfig] = useState<ServerConfig | null>(null);
const [loading, setLoading] = useState(true);
const [saving, setSaving] = useState(false);
const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState(false);
// 表单状态
const [formData, setFormData] = useState({
model: '',
maxTokens: 8192,
temperature: 0.7,
workdir: '',
});
// 加载配置
useEffect(() => {
async function loadConfig() {
try {
const response = await getConfig();
setConfig(response.data);
setFormData({
model: response.data.model,
maxTokens: response.data.maxTokens,
temperature: response.data.temperature,
workdir: response.data.workdir,
});
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to load config');
} finally {
setLoading(false);
}
}
loadConfig();
}, []);
// 保存配置
const handleSave = async () => {
setSaving(true);
setError(null);
setSuccess(false);
try {
const response = await updateConfig(formData);
setConfig(response.data);
setSuccess(true);
setTimeout(() => setSuccess(false), 2000);
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to save config');
} finally {
setSaving(false);
}
};
// 重置为默认值
const handleReset = () => {
if (config) {
setFormData({
model: config.model,
maxTokens: config.maxTokens,
temperature: config.temperature,
workdir: config.workdir,
});
}
};
if (loading) {
return (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<div className="bg-gray-800 rounded-lg p-6">
<div className="text-gray-400">Loading configuration...</div>
</div>
</div>
);
}
return (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<div className="bg-gray-800 rounded-lg w-full max-w-lg mx-4 max-h-[90vh] overflow-auto">
{/* Header */}
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-700">
<h2 className="text-lg font-semibold">Configuration</h2>
<button
onClick={onClose}
className="p-1 hover:bg-gray-700 rounded transition-colors"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
{/* Content */}
<div className="p-6 space-y-6">
{/* Error message */}
{error && (
<div className="p-3 bg-red-900/50 border border-red-700 rounded-lg text-red-300 text-sm">
{error}
</div>
)}
{/* Success message */}
{success && (
<div className="p-3 bg-green-900/50 border border-green-700 rounded-lg text-green-300 text-sm">
Configuration saved successfully!
</div>
)}
{/* Model */}
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
Model
</label>
<select
value={formData.model}
onChange={(e) => setFormData({ ...formData, model: e.target.value })}
className="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white focus:outline-none focus:border-blue-500"
>
{AVAILABLE_MODELS.map((model) => (
<option key={model.id} value={model.id}>
{model.name}
</option>
))}
</select>
<p className="mt-1 text-xs text-gray-500">
Select the AI model to use for conversations
</p>
</div>
{/* Max Tokens */}
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
Max Tokens: {formData.maxTokens}
</label>
<input
type="range"
min="1024"
max="32768"
step="1024"
value={formData.maxTokens}
onChange={(e) => setFormData({ ...formData, maxTokens: parseInt(e.target.value) })}
className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
/>
<div className="flex justify-between text-xs text-gray-500 mt-1">
<span>1K</span>
<span>8K</span>
<span>16K</span>
<span>32K</span>
</div>
<p className="mt-1 text-xs text-gray-500">
Maximum number of tokens in the response
</p>
</div>
{/* Temperature */}
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
Temperature: {formData.temperature.toFixed(2)}
</label>
<input
type="range"
min="0"
max="1"
step="0.05"
value={formData.temperature}
onChange={(e) => setFormData({ ...formData, temperature: parseFloat(e.target.value) })}
className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
/>
<div className="flex justify-between text-xs text-gray-500 mt-1">
<span>Precise (0)</span>
<span>Balanced (0.5)</span>
<span>Creative (1)</span>
</div>
<p className="mt-1 text-xs text-gray-500">
Controls randomness in responses
</p>
</div>
{/* Working Directory */}
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
Working Directory
</label>
<input
type="text"
value={formData.workdir}
onChange={(e) => setFormData({ ...formData, workdir: e.target.value })}
className="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white focus:outline-none focus:border-blue-500 font-mono text-sm"
placeholder="/path/to/project"
/>
<p className="mt-1 text-xs text-gray-500">
Root directory for file operations
</p>
</div>
{/* Server Info (Read-only) */}
{config && (
<div className="pt-4 border-t border-gray-700">
<h3 className="text-sm font-medium text-gray-400 mb-3">Server Information</h3>
<div className="grid grid-cols-2 gap-4 text-sm">
<div>
<span className="text-gray-500">Allowed Paths:</span>
<span className="ml-2 text-gray-300">
{config.allowedPaths.length || 'All'}
</span>
</div>
<div>
<span className="text-gray-500">Denied Paths:</span>
<span className="ml-2 text-gray-300">
{config.deniedPaths.length || 'None'}
</span>
</div>
</div>
</div>
)}
</div>
{/* Footer */}
<div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-700 bg-gray-800/50">
<button
onClick={handleReset}
className="px-4 py-2 text-sm text-gray-300 hover:text-white transition-colors"
>
Reset
</button>
<button
onClick={onClose}
className="px-4 py-2 text-sm bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors"
>
Cancel
</button>
<button
onClick={handleSave}
disabled={saving}
className="px-4 py-2 text-sm bg-blue-600 hover:bg-blue-500 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{saving ? 'Saving...' : 'Save Changes'}
</button>
</div>
</div>
</div>
);
}
@@ -0,0 +1,236 @@
/**
* FileBrowser Component
*
* 文件浏览器组件
*/
import { useState, useEffect, useCallback } from 'react';
import { listFiles, readFile, type FileInfo } from '../api/client';
interface FileBrowserProps {
onFileSelect?: (path: string, content: string) => void;
className?: string;
}
// 文件图标
const FileIcon = ({ type, extension }: { type: 'file' | 'directory'; extension?: string }) => {
if (type === 'directory') {
return (
<svg className="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
);
}
// 根据扩展名显示不同颜色
const colors: Record<string, string> = {
ts: 'text-blue-400',
tsx: 'text-blue-400',
js: 'text-yellow-300',
jsx: 'text-yellow-300',
json: 'text-yellow-500',
md: 'text-gray-400',
css: 'text-pink-400',
html: 'text-orange-400',
py: 'text-green-400',
go: 'text-cyan-400',
rs: 'text-orange-500',
};
const color = colors[extension || ''] || 'text-gray-400';
return (
<svg className={`w-4 h-4 ${color}`} fill="currentColor" viewBox="0 0 20 20">
<path
fillRule="evenodd"
d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"
clipRule="evenodd"
/>
</svg>
);
};
// 格式化文件大小
const formatSize = (bytes: number): string => {
if (bytes === 0) return '0 B';
const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
};
export function FileBrowser({ onFileSelect, className = '' }: FileBrowserProps) {
const [currentPath, setCurrentPath] = useState('.');
const [files, setFiles] = useState<FileInfo[]>([]);
const [parentPath, setParentPath] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [selectedFile, setSelectedFile] = useState<string | null>(null);
const [fileContent, setFileContent] = useState<string | null>(null);
const [showHidden, setShowHidden] = useState(false);
// 加载目录内容
const loadDirectory = useCallback(async (path: string) => {
setLoading(true);
setError(null);
setSelectedFile(null);
setFileContent(null);
try {
const response = await listFiles(path, showHidden);
setFiles(response.data.files);
setCurrentPath(response.data.path);
setParentPath(response.data.parent);
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to load directory');
} finally {
setLoading(false);
}
}, [showHidden]);
// 初始加载
useEffect(() => {
loadDirectory('.');
}, [loadDirectory]);
// 处理文件/目录点击
const handleItemClick = async (item: FileInfo) => {
if (item.type === 'directory') {
loadDirectory(item.path);
} else {
setSelectedFile(item.path);
try {
const response = await readFile(item.path);
if (response.data.encoding === 'utf-8') {
setFileContent(response.data.content);
onFileSelect?.(item.path, response.data.content);
} else {
setFileContent('[Binary file]');
}
} catch (err) {
setFileContent(`Error: ${err instanceof Error ? err.message : 'Failed to read file'}`);
}
}
};
// 返回上级目录
const handleGoUp = () => {
if (parentPath !== null) {
loadDirectory(parentPath);
}
};
// 刷新
const handleRefresh = () => {
loadDirectory(currentPath);
};
return (
<div className={`flex flex-col h-full bg-gray-900 ${className}`}>
{/* 工具栏 */}
<div className="flex items-center gap-2 p-2 border-b border-gray-700 bg-gray-800">
<button
onClick={handleGoUp}
disabled={parentPath === null}
className="p-1.5 rounded hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
title="Go up"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
</svg>
</button>
<button
onClick={handleRefresh}
className="p-1.5 rounded hover:bg-gray-700"
title="Refresh"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
/>
</svg>
</button>
<div className="flex-1 px-2 py-1 text-sm text-gray-400 bg-gray-900 rounded truncate">
{currentPath}
</div>
<label className="flex items-center gap-1 text-xs text-gray-400 cursor-pointer">
<input
type="checkbox"
checked={showHidden}
onChange={(e) => {
setShowHidden(e.target.checked);
loadDirectory(currentPath);
}}
className="w-3 h-3"
/>
Hidden
</label>
</div>
{/* 文件列表 */}
<div className="flex-1 overflow-auto">
{loading ? (
<div className="flex items-center justify-center h-32 text-gray-400">
Loading...
</div>
) : error ? (
<div className="flex items-center justify-center h-32 text-red-400">
{error}
</div>
) : files.length === 0 ? (
<div className="flex items-center justify-center h-32 text-gray-500">
Empty directory
</div>
) : (
<div className="divide-y divide-gray-800">
{files.map((file) => (
<div
key={file.path}
onClick={() => handleItemClick(file)}
className={`flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-gray-800 ${
selectedFile === file.path ? 'bg-gray-800 border-l-2 border-blue-500' : ''
}`}
>
<FileIcon type={file.type} extension={file.extension} />
<span className="flex-1 truncate text-sm">{file.name}</span>
{file.type === 'file' && (
<span className="text-xs text-gray-500">{formatSize(file.size)}</span>
)}
</div>
))}
</div>
)}
</div>
{/* 文件预览 */}
{selectedFile && fileContent && (
<div className="border-t border-gray-700 max-h-48 overflow-auto">
<div className="sticky top-0 flex items-center justify-between px-3 py-1 bg-gray-800 border-b border-gray-700">
<span className="text-xs text-gray-400 truncate">{selectedFile}</span>
<button
onClick={() => {
setSelectedFile(null);
setFileContent(null);
}}
className="p-1 hover:bg-gray-700 rounded"
>
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<pre className="p-3 text-xs text-gray-300 whitespace-pre-wrap font-mono">
{fileContent.slice(0, 5000)}
{fileContent.length > 5000 && '\n... (truncated)'}
</pre>
</div>
)}
</div>
);
}
+124
View File
@@ -0,0 +1,124 @@
/**
* Sidebar Component
*/
import { useState, useEffect } from 'react';
import { Plus, MessageSquare, Trash2, RefreshCw } from 'lucide-react';
import clsx from 'clsx';
import { listSessions, createSession, deleteSession, type Session } from '../api/client';
interface SidebarProps {
currentSessionId: string | null;
onSelectSession: (id: string) => void;
onCreateSession: (session: Session) => void;
}
export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }: SidebarProps) {
const [sessions, setSessions] = useState<Session[]>([]);
const [isLoading, setIsLoading] = useState(false);
const loadSessions = async () => {
setIsLoading(true);
try {
const { data } = await listSessions();
setSessions(data);
} catch (error) {
console.error('Failed to load sessions:', error);
} finally {
setIsLoading(false);
}
};
const handleCreate = async () => {
try {
const { data } = await createSession();
setSessions((prev) => [data, ...prev]);
onCreateSession(data);
} catch (error) {
console.error('Failed to create session:', error);
}
};
const handleDelete = async (id: string, e: React.MouseEvent) => {
e.stopPropagation();
try {
await deleteSession(id);
setSessions((prev) => prev.filter((s) => s.id !== id));
if (currentSessionId === id) {
const remaining = sessions.filter((s) => s.id !== id);
if (remaining.length > 0) {
onSelectSession(remaining[0].id);
}
}
} catch (error) {
console.error('Failed to delete session:', error);
}
};
useEffect(() => {
loadSessions();
}, []);
return (
<div className="w-64 bg-gray-800 border-r border-gray-700 flex flex-col">
{/* Header */}
<div className="p-4 border-b border-gray-700">
<button
onClick={handleCreate}
className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-primary-600 hover:bg-primary-700 rounded-lg transition-colors"
>
<Plus size={18} />
<span>New Chat</span>
</button>
</div>
{/* Session List */}
<div className="flex-1 overflow-y-auto">
{isLoading ? (
<div className="p-4 text-center text-gray-500">
<RefreshCw className="animate-spin inline-block" size={20} />
</div>
) : sessions.length === 0 ? (
<div className="p-4 text-center text-gray-500">
No conversations yet
</div>
) : (
<div className="p-2 space-y-1">
{sessions.map((session) => (
<div
key={session.id}
onClick={() => onSelectSession(session.id)}
className={clsx(
'flex items-center gap-2 p-3 rounded-lg cursor-pointer group',
'hover:bg-gray-700 transition-colors',
currentSessionId === session.id && 'bg-gray-700'
)}
>
<MessageSquare size={18} className="text-gray-400 flex-shrink-0" />
<div className="flex-1 min-w-0">
<div className="text-sm truncate">
{session.name || `Chat ${session.id.slice(0, 8)}`}
</div>
<div className="text-xs text-gray-500">
{session.messageCount} messages
</div>
</div>
<button
onClick={(e) => handleDelete(session.id, e)}
className="opacity-0 group-hover:opacity-100 p-1 hover:bg-gray-600 rounded transition-all"
>
<Trash2 size={14} className="text-gray-400" />
</button>
</div>
))}
</div>
)}
</div>
{/* Footer */}
<div className="p-4 border-t border-gray-700 text-center text-xs text-gray-500">
AI Assistant v1.0
</div>
</div>
);
}
+165
View File
@@ -0,0 +1,165 @@
/**
* Chat Hook
*
* 管理 WebSocket 连接和消息状态
*/
import { useState, useEffect, useCallback, useRef } from 'react';
import { createWebSocket, getMessages, type Message } from '../api/client';
interface UseChatOptions {
sessionId: string;
onError?: (error: Error) => void;
}
interface ChatState {
messages: Message[];
isConnected: boolean;
isLoading: boolean;
streamingContent: string;
}
export function useChat({ sessionId, onError }: UseChatOptions) {
const [state, setState] = useState<ChatState>({
messages: [],
isConnected: false,
isLoading: false,
streamingContent: '',
});
const wsRef = useRef<WebSocket | null>(null);
const reconnectTimeoutRef = useRef<NodeJS.Timeout>();
// 加载历史消息
const loadMessages = useCallback(async () => {
try {
const { data } = await getMessages(sessionId);
setState((prev) => ({ ...prev, messages: data }));
} catch (error) {
onError?.(error instanceof Error ? error : new Error('Failed to load messages'));
}
}, [sessionId, onError]);
// 连接 WebSocket
const connect = useCallback(() => {
if (wsRef.current?.readyState === WebSocket.OPEN) return;
const ws = createWebSocket(sessionId);
ws.onopen = () => {
setState((prev) => ({ ...prev, isConnected: true }));
};
ws.onclose = () => {
setState((prev) => ({ ...prev, isConnected: false }));
// 自动重连
reconnectTimeoutRef.current = setTimeout(connect, 3000);
};
ws.onerror = () => {
onError?.(new Error('WebSocket connection error'));
};
ws.onmessage = (event) => {
try {
const message = JSON.parse(event.data);
switch (message.type) {
case 'chunk':
setState((prev) => ({
...prev,
streamingContent: prev.streamingContent + (message.payload?.content || ''),
}));
break;
case 'done':
setState((prev) => {
const newMessage: Message = message.payload || {
id: Date.now().toString(),
role: 'assistant',
content: prev.streamingContent,
timestamp: new Date().toISOString(),
};
return {
...prev,
messages: [...prev.messages, newMessage],
streamingContent: '',
isLoading: false,
};
});
break;
case 'message_received':
// 用户消息已确认
setState((prev) => ({
...prev,
messages: [...prev.messages, message.payload],
}));
break;
case 'error':
onError?.(new Error(message.payload?.message || 'Unknown error'));
setState((prev) => ({ ...prev, isLoading: false, streamingContent: '' }));
break;
}
} catch {
// 忽略解析错误
}
};
wsRef.current = ws;
}, [sessionId, onError]);
// 发送消息
const sendMessage = useCallback(
(content: string) => {
if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
onError?.(new Error('WebSocket not connected'));
return;
}
setState((prev) => ({ ...prev, isLoading: true }));
wsRef.current.send(
JSON.stringify({
type: 'message',
sessionId,
payload: { content },
})
);
},
[sessionId, onError]
);
// 取消处理
const cancelProcessing = useCallback(() => {
if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) return;
wsRef.current.send(
JSON.stringify({
type: 'cancel',
sessionId,
})
);
setState((prev) => ({ ...prev, isLoading: false, streamingContent: '' }));
}, [sessionId]);
// 初始化
useEffect(() => {
loadMessages();
connect();
return () => {
clearTimeout(reconnectTimeoutRef.current);
wsRef.current?.close();
};
}, [loadMessages, connect]);
return {
...state,
sendMessage,
cancelProcessing,
reload: loadMessages,
};
}
+40
View File
@@ -0,0 +1,40 @@
import { invoke } from '@tauri-apps/api/core';
export interface AppInfo {
name: string;
version: string;
tauri_version: string;
}
export interface FileContent {
path: string;
content: string;
size: number;
}
export interface DirectoryEntry {
name: string;
path: string;
is_dir: boolean;
size: number;
}
export async function getAppInfo(): Promise<AppInfo> {
return invoke('get_app_info');
}
export async function openDirectoryDialog(): Promise<string | null> {
return invoke('open_directory_dialog');
}
export async function readLocalFile(path: string): Promise<FileContent> {
return invoke('read_local_file', { path });
}
export async function listDirectory(path: string): Promise<DirectoryEntry[]> {
return invoke('list_directory', { path });
}
export function isTauri(): boolean {
return typeof window !== 'undefined' && '__TAURI__' in window;
}
+10
View File
@@ -0,0 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import { App } from './App';
import './styles/index.css';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
+90
View File
@@ -0,0 +1,90 @@
/**
* Chat Page
*/
import { useEffect, useRef } from 'react';
import { Wifi, WifiOff } from 'lucide-react';
import { useChat } from '../hooks/useChat';
import { ChatMessage, StreamingMessage, TypingIndicator } from '../components/ChatMessage';
import { ChatInput } from '../components/ChatInput';
interface ChatPageProps {
sessionId: string;
}
export function ChatPage({ sessionId }: ChatPageProps) {
const {
messages,
isConnected,
isLoading,
streamingContent,
sendMessage,
cancelProcessing,
} = useChat({
sessionId,
onError: (error) => {
console.error('Chat error:', error);
},
});
const messagesEndRef = useRef<HTMLDivElement>(null);
// 自动滚动到底部
useEffect(() => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [messages, streamingContent]);
return (
<div className="flex-1 flex flex-col h-screen">
{/* Header */}
<div className="flex items-center justify-between px-6 py-3 border-b border-gray-700 bg-gray-800">
<h1 className="text-lg font-medium">Chat</h1>
<div className="flex items-center gap-2 text-sm">
{isConnected ? (
<>
<Wifi size={16} className="text-green-500" />
<span className="text-green-500">Connected</span>
</>
) : (
<>
<WifiOff size={16} className="text-red-500" />
<span className="text-red-500">Disconnected</span>
</>
)}
</div>
</div>
{/* Messages */}
<div className="flex-1 overflow-y-auto p-6">
<div className="max-w-4xl mx-auto space-y-4">
{messages.length === 0 && !isLoading && (
<div className="text-center py-20">
<h2 className="text-2xl font-semibold mb-2">Start a conversation</h2>
<p className="text-gray-400">
Type a message below to begin chatting with your AI assistant.
</p>
</div>
)}
{messages.map((message) => (
<ChatMessage key={message.id} message={message} />
))}
{streamingContent && <StreamingMessage content={streamingContent} />}
{isLoading && !streamingContent && <TypingIndicator />}
<div ref={messagesEndRef} />
</div>
</div>
{/* Input */}
<ChatInput
onSend={sendMessage}
onCancel={cancelProcessing}
isLoading={isLoading}
disabled={!isConnected}
/>
</div>
);
}
+78
View File
@@ -0,0 +1,78 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #4b5563;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #6b7280;
}
/* Message content */
.message-content {
@apply max-w-none text-gray-100;
}
.message-content pre {
@apply bg-gray-800 rounded-lg p-4 overflow-x-auto;
}
.message-content code {
@apply bg-gray-800 px-1.5 py-0.5 rounded text-sm;
}
.message-content pre code {
@apply bg-transparent p-0;
}
/* Typing indicator */
.typing-indicator {
display: flex;
gap: 4px;
}
.typing-indicator span {
width: 8px;
height: 8px;
background: #6b7280;
border-radius: 50%;
animation: typing 1.4s infinite ease-in-out;
}
.typing-indicator span:nth-child(1) {
animation-delay: 0s;
}
.typing-indicator span:nth-child(2) {
animation-delay: 0.2s;
}
.typing-indicator span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes typing {
0%,
80%,
100% {
transform: scale(1);
opacity: 0.5;
}
40% {
transform: scale(1.2);
opacity: 1;
}
}
+1
View File
@@ -0,0 +1 @@
/// <reference types="vite/client" />
+25
View File
@@ -0,0 +1,25 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#0ea5e9',
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
950: '#082f49',
},
},
},
},
plugins: [],
};
+25
View File
@@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "ES2022",
"useDefineForClassFields": true,
"lib": ["ES2022", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
+11
View File
@@ -0,0 +1,11 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true,
"strict": true
},
"include": ["vite.config.ts"]
}
+47
View File
@@ -0,0 +1,47 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
const host = process.env.TAURI_DEV_HOST;
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
clearScreen: false,
server: {
port: 5199,
strictPort: true,
host: host || false,
hmr: host
? {
protocol: 'ws',
host,
port: 5200,
}
: undefined,
watch: {
ignored: ['**/src-tauri/**'],
},
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
},
'/health': {
target: 'http://localhost:3000',
changeOrigin: true,
},
},
},
envPrefix: ['VITE_', 'TAURI_'],
build: {
target: process.env.TAURI_PLATFORM === 'windows' ? 'chrome105' : 'safari13',
minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
sourcemap: !!process.env.TAURI_DEBUG,
outDir: 'dist',
},
});
+205
View File
@@ -122,6 +122,67 @@ importers:
specifier: ^4.0.15
version: 4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.19.2)(jiti@1.21.7)(yaml@2.8.2)
packages/desktop:
dependencies:
'@tauri-apps/api':
specifier: ^2.1.1
version: 2.9.1
'@tauri-apps/plugin-dialog':
specifier: ^2.2.0
version: 2.4.2
'@tauri-apps/plugin-fs':
specifier: ^2.2.0
version: 2.4.4
'@tauri-apps/plugin-shell':
specifier: ^2.2.0
version: 2.3.3
clsx:
specifier: ^2.1.0
version: 2.1.1
lucide-react:
specifier: ^0.344.0
version: 0.344.0(react@18.3.1)
react:
specifier: ^18.3.1
version: 18.3.1
react-dom:
specifier: ^18.3.1
version: 18.3.1(react@18.3.1)
react-router-dom:
specifier: ^6.22.0
version: 6.30.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
zustand:
specifier: ^4.5.0
version: 4.5.7(@types/react@18.3.27)(react@18.3.1)
devDependencies:
'@tauri-apps/cli':
specifier: ^2.1.0
version: 2.9.6
'@types/react':
specifier: ^18.3.0
version: 18.3.27
'@types/react-dom':
specifier: ^18.3.0
version: 18.3.7(@types/react@18.3.27)
'@vitejs/plugin-react':
specifier: ^4.2.1
version: 4.7.0(vite@5.4.21(@types/node@22.19.2))
autoprefixer:
specifier: ^10.4.18
version: 10.4.22(postcss@8.5.6)
postcss:
specifier: ^8.4.35
version: 8.5.6
tailwindcss:
specifier: ^3.4.1
version: 3.4.19(yaml@2.8.2)
typescript:
specifier: ^5.3.3
version: 5.9.3
vite:
specifier: ^5.1.0
version: 5.4.21(@types/node@22.19.2)
packages/server:
dependencies:
'@ai-assistant/core':
@@ -799,6 +860,89 @@ packages:
'@standard-schema/spec@1.0.0':
resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
'@tauri-apps/api@2.9.1':
resolution: {integrity: sha512-IGlhP6EivjXHepbBic618GOmiWe4URJiIeZFlB7x3czM0yDHHYviH1Xvoiv4FefdkQtn6v7TuwWCRfOGdnVUGw==}
'@tauri-apps/cli-darwin-arm64@2.9.6':
resolution: {integrity: sha512-gf5no6N9FCk1qMrti4lfwP77JHP5haASZgVbBgpZG7BUepB3fhiLCXGUK8LvuOjP36HivXewjg72LTnPDScnQQ==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [darwin]
'@tauri-apps/cli-darwin-x64@2.9.6':
resolution: {integrity: sha512-oWh74WmqbERwwrwcueJyY6HYhgCksUc6NT7WKeXyrlY/FPmNgdyQAgcLuTSkhRFuQ6zh4Np1HZpOqCTpeZBDcw==}
engines: {node: '>= 10'}
cpu: [x64]
os: [darwin]
'@tauri-apps/cli-linux-arm-gnueabihf@2.9.6':
resolution: {integrity: sha512-/zde3bFroFsNXOHN204DC2qUxAcAanUjVXXSdEGmhwMUZeAQalNj5cz2Qli2elsRjKN/hVbZOJj0gQ5zaYUjSg==}
engines: {node: '>= 10'}
cpu: [arm]
os: [linux]
'@tauri-apps/cli-linux-arm64-gnu@2.9.6':
resolution: {integrity: sha512-pvbljdhp9VOo4RnID5ywSxgBs7qiylTPlK56cTk7InR3kYSTJKYMqv/4Q/4rGo/mG8cVppesKIeBMH42fw6wjg==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
'@tauri-apps/cli-linux-arm64-musl@2.9.6':
resolution: {integrity: sha512-02TKUndpodXBCR0oP//6dZWGYcc22Upf2eP27NvC6z0DIqvkBBFziQUcvi2n6SrwTRL0yGgQjkm9K5NIn8s6jw==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
'@tauri-apps/cli-linux-riscv64-gnu@2.9.6':
resolution: {integrity: sha512-fmp1hnulbqzl1GkXl4aTX9fV+ubHw2LqlLH1PE3BxZ11EQk+l/TmiEongjnxF0ie4kV8DQfDNJ1KGiIdWe1GvQ==}
engines: {node: '>= 10'}
cpu: [riscv64]
os: [linux]
'@tauri-apps/cli-linux-x64-gnu@2.9.6':
resolution: {integrity: sha512-vY0le8ad2KaV1PJr+jCd8fUF9VOjwwQP/uBuTJvhvKTloEwxYA/kAjKK9OpIslGA9m/zcnSo74czI6bBrm2sYA==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
'@tauri-apps/cli-linux-x64-musl@2.9.6':
resolution: {integrity: sha512-TOEuB8YCFZTWVDzsO2yW0+zGcoMiPPwcUgdnW1ODnmgfwccpnihDRoks+ABT1e3fHb1ol8QQWsHSCovb3o2ENQ==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
'@tauri-apps/cli-win32-arm64-msvc@2.9.6':
resolution: {integrity: sha512-ujmDGMRc4qRLAnj8nNG26Rlz9klJ0I0jmZs2BPpmNNf0gM/rcVHhqbEkAaHPTBVIrtUdf7bGvQAD2pyIiUrBHQ==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [win32]
'@tauri-apps/cli-win32-ia32-msvc@2.9.6':
resolution: {integrity: sha512-S4pT0yAJgFX8QRCyKA1iKjZ9Q/oPjCZf66A/VlG5Yw54Nnr88J1uBpmenINbXxzyhduWrIXBaUbEY1K80ZbpMg==}
engines: {node: '>= 10'}
cpu: [ia32]
os: [win32]
'@tauri-apps/cli-win32-x64-msvc@2.9.6':
resolution: {integrity: sha512-ldWuWSSkWbKOPjQMJoYVj9wLHcOniv7diyI5UAJ4XsBdtaFB0pKHQsqw/ItUma0VXGC7vB4E9fZjivmxur60aw==}
engines: {node: '>= 10'}
cpu: [x64]
os: [win32]
'@tauri-apps/cli@2.9.6':
resolution: {integrity: sha512-3xDdXL5omQ3sPfBfdC8fCtDKcnyV7OqyzQgfyT5P3+zY6lcPqIYKQBvUasNvppi21RSdfhy44ttvJmftb0PCDw==}
engines: {node: '>= 10'}
hasBin: true
'@tauri-apps/plugin-dialog@2.4.2':
resolution: {integrity: sha512-lNIn5CZuw8WZOn8zHzmFmDSzg5zfohWoa3mdULP0YFh/VogVdMVWZPcWSHlydsiJhRQYaTNSYKN7RmZKE2lCYQ==}
'@tauri-apps/plugin-fs@2.4.4':
resolution: {integrity: sha512-MTorXxIRmOnOPT1jZ3w96vjSuScER38ryXY88vl5F0uiKdnvTKKTtaEjTEo8uPbl4e3gnUtfsDVwC7h77GQLvQ==}
'@tauri-apps/plugin-shell@2.3.3':
resolution: {integrity: sha512-Xod+pRcFxmOWFWEnqH5yZcA7qwAMuaaDkMR1Sply+F8VfBj++CGnj2xf5UoialmjZ2Cvd8qrvSCbU+7GgNVsKQ==}
'@tavily/core@0.6.0':
resolution: {integrity: sha512-QJQko6BtDWFYNeE7BKFVDMPuKfLJWjRVyQmo5jAhG3A3Xgu1e/EIIRTdWFc5TyFccc8t14zrzPxxUy1YL2/AYg==}
@@ -2395,6 +2539,67 @@ snapshots:
'@standard-schema/spec@1.0.0': {}
'@tauri-apps/api@2.9.1': {}
'@tauri-apps/cli-darwin-arm64@2.9.6':
optional: true
'@tauri-apps/cli-darwin-x64@2.9.6':
optional: true
'@tauri-apps/cli-linux-arm-gnueabihf@2.9.6':
optional: true
'@tauri-apps/cli-linux-arm64-gnu@2.9.6':
optional: true
'@tauri-apps/cli-linux-arm64-musl@2.9.6':
optional: true
'@tauri-apps/cli-linux-riscv64-gnu@2.9.6':
optional: true
'@tauri-apps/cli-linux-x64-gnu@2.9.6':
optional: true
'@tauri-apps/cli-linux-x64-musl@2.9.6':
optional: true
'@tauri-apps/cli-win32-arm64-msvc@2.9.6':
optional: true
'@tauri-apps/cli-win32-ia32-msvc@2.9.6':
optional: true
'@tauri-apps/cli-win32-x64-msvc@2.9.6':
optional: true
'@tauri-apps/cli@2.9.6':
optionalDependencies:
'@tauri-apps/cli-darwin-arm64': 2.9.6
'@tauri-apps/cli-darwin-x64': 2.9.6
'@tauri-apps/cli-linux-arm-gnueabihf': 2.9.6
'@tauri-apps/cli-linux-arm64-gnu': 2.9.6
'@tauri-apps/cli-linux-arm64-musl': 2.9.6
'@tauri-apps/cli-linux-riscv64-gnu': 2.9.6
'@tauri-apps/cli-linux-x64-gnu': 2.9.6
'@tauri-apps/cli-linux-x64-musl': 2.9.6
'@tauri-apps/cli-win32-arm64-msvc': 2.9.6
'@tauri-apps/cli-win32-ia32-msvc': 2.9.6
'@tauri-apps/cli-win32-x64-msvc': 2.9.6
'@tauri-apps/plugin-dialog@2.4.2':
dependencies:
'@tauri-apps/api': 2.9.1
'@tauri-apps/plugin-fs@2.4.4':
dependencies:
'@tauri-apps/api': 2.9.1
'@tauri-apps/plugin-shell@2.3.3':
dependencies:
'@tauri-apps/api': 2.9.1
'@tavily/core@0.6.0':
dependencies:
axios: 1.13.2