feat: 完善 Server 层并添加 CLI 和 Web 前端
Server 层增强: - 添加 Agent 适配层，支持动态加载 core 模块 - 实现 Token 认证机制，支持本地/远程模式 - WebSocket 集成 Agent 实时对话 CLI 模块 (packages/cli): - serve 命令启动 HTTP Server - attach 命令连接远程 Server - API Client 封装 Web 前端 (packages/web): - React 18 + Vite + Tailwind CSS - 会话管理侧边栏 - WebSocket 实时聊天界面 - 流式消息显示
This commit is contained in:
@@ -0,0 +1,2 @@
|
||||
#!/usr/bin/env bun
|
||||
import '../dist/index.js';
|
||||
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"name": "@ai-assistant/cli",
|
||||
"version": "1.0.0",
|
||||
"description": "AI Terminal Assistant CLI",
|
||||
"type": "module",
|
||||
"main": "./dist/index.js",
|
||||
"types": "./dist/index.d.ts",
|
||||
"bin": {
|
||||
"ai-assistant": "./bin/ai-assistant.js"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsc",
|
||||
"dev": "bun run src/index.ts",
|
||||
"start": "bun run dist/index.js",
|
||||
"serve": "bun run src/index.ts serve",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ai-assistant/server": "workspace:*",
|
||||
"commander": "^12.1.0",
|
||||
"chalk": "^5.3.0",
|
||||
"ora": "^8.0.1",
|
||||
"inquirer": "^9.2.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/bun": "^1.1.0",
|
||||
"@types/node": "^20.11.0",
|
||||
"typescript": "^5.3.3"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"bin"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,190 @@
|
||||
/**
|
||||
* API Client
|
||||
*
|
||||
* 用于连接远程 Server 的客户端
|
||||
*/
|
||||
|
||||
export interface ClientConfig {
|
||||
/** 服务器地址 */
|
||||
baseUrl: string;
|
||||
/** 认证 token */
|
||||
token?: string;
|
||||
/** 请求超时 (ms) */
|
||||
timeout?: number;
|
||||
}
|
||||
|
||||
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 };
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* API Client 类
|
||||
*/
|
||||
export class APIClient {
|
||||
private baseUrl: string;
|
||||
private token?: string;
|
||||
private timeout: number;
|
||||
|
||||
constructor(config: ClientConfig) {
|
||||
this.baseUrl = config.baseUrl.replace(/\/$/, '');
|
||||
this.token = config.token;
|
||||
this.timeout = config.timeout || 30000;
|
||||
}
|
||||
|
||||
/**
|
||||
* 发送 HTTP 请求
|
||||
*/
|
||||
private async request<T>(
|
||||
method: string,
|
||||
path: string,
|
||||
body?: unknown
|
||||
): Promise<T> {
|
||||
const url = `${this.baseUrl}${path}`;
|
||||
const headers: Record<string, string> = {
|
||||
'Content-Type': 'application/json',
|
||||
};
|
||||
|
||||
if (this.token) {
|
||||
headers['Authorization'] = `Bearer ${this.token}`;
|
||||
}
|
||||
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(() => controller.abort(), this.timeout);
|
||||
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
method,
|
||||
headers,
|
||||
body: body ? JSON.stringify(body) : undefined,
|
||||
signal: controller.signal,
|
||||
});
|
||||
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({ error: response.statusText })) as { error?: string };
|
||||
throw new Error(errorData.error || `HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
return response.json() as Promise<T>;
|
||||
} catch (error) {
|
||||
clearTimeout(timeoutId);
|
||||
if (error instanceof Error && error.name === 'AbortError') {
|
||||
throw new Error('Request timeout');
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Health
|
||||
// ============================================================================
|
||||
|
||||
async health(): Promise<HealthStatus> {
|
||||
return this.request('GET', '/health');
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Sessions
|
||||
// ============================================================================
|
||||
|
||||
async listSessions(): Promise<{ success: boolean; data: Session[] }> {
|
||||
return this.request('GET', '/api/sessions');
|
||||
}
|
||||
|
||||
async createSession(name?: string): Promise<{ success: boolean; data: Session }> {
|
||||
return this.request('POST', '/api/sessions', { name });
|
||||
}
|
||||
|
||||
async getSession(id: string): Promise<{ success: boolean; data: Session }> {
|
||||
return this.request('GET', `/api/sessions/${id}`);
|
||||
}
|
||||
|
||||
async deleteSession(id: string): Promise<{ success: boolean }> {
|
||||
return this.request('DELETE', `/api/sessions/${id}`);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Messages
|
||||
// ============================================================================
|
||||
|
||||
async getMessages(sessionId: string): Promise<{ success: boolean; data: Message[] }> {
|
||||
return this.request('GET', `/api/sessions/${sessionId}/messages`);
|
||||
}
|
||||
|
||||
async sendMessage(
|
||||
sessionId: string,
|
||||
content: string
|
||||
): Promise<{ success: boolean; data: Message }> {
|
||||
return this.request('POST', `/api/sessions/${sessionId}/messages`, { content });
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// WebSocket
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 创建 WebSocket 连接
|
||||
*/
|
||||
connectWebSocket(sessionId: string): WebSocket {
|
||||
const wsUrl = this.baseUrl
|
||||
.replace(/^http/, 'ws')
|
||||
.concat(`/api/ws/${sessionId}`);
|
||||
|
||||
const url = this.token
|
||||
? `${wsUrl}?token=${encodeURIComponent(this.token)}`
|
||||
: wsUrl;
|
||||
|
||||
return new WebSocket(url);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// SSE
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 获取 SSE URL (用于外部 EventSource 连接)
|
||||
*/
|
||||
getSSEUrl(sessionId: string): string {
|
||||
const sseUrl = `${this.baseUrl}/api/sessions/${sessionId}/events`;
|
||||
return this.token
|
||||
? `${sseUrl}?token=${encodeURIComponent(this.token)}`
|
||||
: sseUrl;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建 API Client
|
||||
*/
|
||||
export function createClient(config: ClientConfig): APIClient {
|
||||
return new APIClient(config);
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
/**
|
||||
* Client Module
|
||||
*/
|
||||
|
||||
export { APIClient, createClient } from './api.js';
|
||||
export type { ClientConfig, Session, Message, HealthStatus } from './api.js';
|
||||
@@ -0,0 +1,236 @@
|
||||
/**
|
||||
* Attach Command
|
||||
*
|
||||
* 连接到远程 Server
|
||||
*/
|
||||
|
||||
import type { Command } from 'commander';
|
||||
import chalk from 'chalk';
|
||||
import ora from 'ora';
|
||||
import { createClient } from '../client/index.js';
|
||||
|
||||
export function registerAttachCommand(program: Command): void {
|
||||
program
|
||||
.command('attach')
|
||||
.description('Connect to a remote AI Assistant server')
|
||||
.argument('<url>', 'Server URL (e.g., http://192.168.1.100:3000)')
|
||||
.option('-t, --token <token>', 'Authentication token')
|
||||
.option('-s, --session <id>', 'Session ID to connect to')
|
||||
.action(async (url: string, options) => {
|
||||
const { token, session: sessionId } = options;
|
||||
|
||||
const spinner = ora('Connecting to server...').start();
|
||||
|
||||
try {
|
||||
// 创建客户端
|
||||
const client = createClient({
|
||||
baseUrl: url,
|
||||
token,
|
||||
});
|
||||
|
||||
// 检查服务器健康状态
|
||||
const health = await client.health();
|
||||
spinner.succeed(`Connected to server at ${url}`);
|
||||
|
||||
console.log(chalk.gray('─'.repeat(50)));
|
||||
console.log(chalk.bold('Server Status:'));
|
||||
console.log(` Status: ${chalk.green(health.status)}`);
|
||||
console.log(` Agent: ${health.agent.coreAvailable ? chalk.green('Available') : chalk.yellow('Not available')}`);
|
||||
console.log(` Auth: ${health.auth.enabled ? chalk.yellow('Enabled') : chalk.gray('Disabled')}`);
|
||||
console.log(` Sessions: ${health.stats.sessions}`);
|
||||
console.log(` WebSocket: ${health.stats.websocket.connections} connections`);
|
||||
console.log(chalk.gray('─'.repeat(50)));
|
||||
|
||||
// 如果指定了 session，连接到该 session
|
||||
if (sessionId) {
|
||||
await connectToSession(client, sessionId);
|
||||
} else {
|
||||
// 显示可用 sessions 或创建新的
|
||||
await showSessionMenu(client);
|
||||
}
|
||||
} catch (error) {
|
||||
spinner.fail('Failed to connect to server');
|
||||
if (error instanceof Error) {
|
||||
console.error(chalk.red(`Error: ${error.message}`));
|
||||
}
|
||||
process.exit(1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function connectToSession(client: ReturnType<typeof createClient>, sessionId: string): Promise<void> {
|
||||
const spinner = ora(`Connecting to session ${sessionId}...`).start();
|
||||
|
||||
try {
|
||||
// 获取 session 信息
|
||||
const { data: session } = await client.getSession(sessionId);
|
||||
spinner.succeed(`Connected to session: ${session.name || session.id}`);
|
||||
|
||||
// 获取历史消息
|
||||
const { data: messages } = await client.getMessages(sessionId);
|
||||
|
||||
if (messages.length > 0) {
|
||||
console.log(chalk.gray('\n─── Recent Messages ───'));
|
||||
const recentMessages = messages.slice(-5);
|
||||
for (const msg of recentMessages) {
|
||||
const prefix = msg.role === 'user' ? chalk.blue('You: ') : chalk.green('AI: ');
|
||||
const content = msg.content.length > 100
|
||||
? msg.content.slice(0, 100) + '...'
|
||||
: msg.content;
|
||||
console.log(prefix + content);
|
||||
}
|
||||
console.log(chalk.gray('───────────────────────\n'));
|
||||
}
|
||||
|
||||
// 启动交互式会话
|
||||
await startInteractiveSession(client, sessionId);
|
||||
} catch (error) {
|
||||
spinner.fail('Failed to connect to session');
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
async function showSessionMenu(client: ReturnType<typeof createClient>): Promise<void> {
|
||||
const { default: inquirer } = await import('inquirer');
|
||||
|
||||
// 获取可用 sessions
|
||||
const { data: sessions } = await client.listSessions();
|
||||
|
||||
const choices = [
|
||||
{ name: chalk.green('+ Create new session'), value: 'new' },
|
||||
...sessions.map((s) => ({
|
||||
name: `${s.name || s.id} (${s.messageCount} messages)`,
|
||||
value: s.id,
|
||||
})),
|
||||
];
|
||||
|
||||
const { selection } = await inquirer.prompt([
|
||||
{
|
||||
type: 'list',
|
||||
name: 'selection',
|
||||
message: 'Select a session:',
|
||||
choices,
|
||||
},
|
||||
]);
|
||||
|
||||
if (selection === 'new') {
|
||||
const { name } = await inquirer.prompt([
|
||||
{
|
||||
type: 'input',
|
||||
name: 'name',
|
||||
message: 'Session name (optional):',
|
||||
},
|
||||
]);
|
||||
|
||||
const { data: newSession } = await client.createSession(name || undefined);
|
||||
console.log(chalk.green(`Created new session: ${newSession.id}`));
|
||||
await startInteractiveSession(client, newSession.id);
|
||||
} else {
|
||||
await connectToSession(client, selection);
|
||||
}
|
||||
}
|
||||
|
||||
async function startInteractiveSession(
|
||||
client: ReturnType<typeof createClient>,
|
||||
sessionId: string
|
||||
): Promise<void> {
|
||||
const { createInterface } = await import('readline');
|
||||
|
||||
console.log(chalk.gray('Type your message and press Enter. Type /quit to exit.\n'));
|
||||
|
||||
// 连接 WebSocket
|
||||
const ws = client.connectWebSocket(sessionId);
|
||||
|
||||
let currentResponse = '';
|
||||
|
||||
ws.onopen = () => {
|
||||
console.log(chalk.gray('[Connected to WebSocket]'));
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
try {
|
||||
const message = JSON.parse(event.data as string);
|
||||
|
||||
switch (message.type) {
|
||||
case 'chunk':
|
||||
process.stdout.write(message.payload?.content || '');
|
||||
currentResponse += message.payload?.content || '';
|
||||
break;
|
||||
case 'done':
|
||||
if (currentResponse) {
|
||||
console.log('\n');
|
||||
currentResponse = '';
|
||||
}
|
||||
break;
|
||||
case 'error':
|
||||
console.error(chalk.red(`\nError: ${message.payload?.message}`));
|
||||
break;
|
||||
}
|
||||
} catch {
|
||||
// 忽略解析错误
|
||||
}
|
||||
};
|
||||
|
||||
ws.onerror = (error) => {
|
||||
console.error(chalk.red('WebSocket error:', error));
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
console.log(chalk.gray('[Disconnected from WebSocket]'));
|
||||
process.exit(0);
|
||||
};
|
||||
|
||||
// 创建交互式 readline
|
||||
const rl = createInterface({
|
||||
input: process.stdin,
|
||||
output: process.stdout,
|
||||
});
|
||||
|
||||
const prompt = () => {
|
||||
rl.question(chalk.blue('You: '), async (input) => {
|
||||
const trimmed = input.trim();
|
||||
|
||||
if (trimmed === '/quit' || trimmed === '/exit') {
|
||||
console.log(chalk.gray('Goodbye!'));
|
||||
ws.close();
|
||||
rl.close();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!trimmed) {
|
||||
prompt();
|
||||
return;
|
||||
}
|
||||
|
||||
// 通过 WebSocket 发送消息
|
||||
ws.send(JSON.stringify({
|
||||
type: 'message',
|
||||
sessionId,
|
||||
payload: { content: trimmed },
|
||||
}));
|
||||
|
||||
process.stdout.write(chalk.green('AI: '));
|
||||
|
||||
// 等待响应完成后再提示
|
||||
const waitForDone = () => {
|
||||
if (currentResponse === '') {
|
||||
prompt();
|
||||
} else {
|
||||
setTimeout(waitForDone, 100);
|
||||
}
|
||||
};
|
||||
setTimeout(waitForDone, 500);
|
||||
});
|
||||
};
|
||||
|
||||
// 等待 WebSocket 连接
|
||||
await new Promise<void>((resolve) => {
|
||||
if (ws.readyState === WebSocket.OPEN) {
|
||||
resolve();
|
||||
} else {
|
||||
ws.onopen = () => resolve();
|
||||
}
|
||||
});
|
||||
|
||||
prompt();
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
/**
|
||||
* Commands Module
|
||||
*/
|
||||
|
||||
export { registerServeCommand } from './serve.js';
|
||||
export { registerAttachCommand } from './attach.js';
|
||||
@@ -0,0 +1,55 @@
|
||||
/**
|
||||
* Serve Command
|
||||
*
|
||||
* 启动 HTTP Server
|
||||
*/
|
||||
|
||||
import type { Command } from 'commander';
|
||||
|
||||
export function registerServeCommand(program: Command): void {
|
||||
program
|
||||
.command('serve')
|
||||
.description('Start the AI Assistant server')
|
||||
.option('-p, --port <port>', 'Port to listen on', '3000')
|
||||
.option('-H, --host <host>', 'Host to bind to', '127.0.0.1')
|
||||
.option('--auth', 'Enable authentication')
|
||||
.option('--no-auth', 'Disable authentication')
|
||||
.option('-t, --token <token>', 'Set authentication token')
|
||||
.action(async (options) => {
|
||||
const { port, host, auth, token } = options;
|
||||
|
||||
// 动态导入 server 模块
|
||||
const { app, websocket, startServer } = await import('@ai-assistant/server');
|
||||
|
||||
// 初始化并打印启动信息
|
||||
await startServer({
|
||||
port: parseInt(port, 10),
|
||||
host,
|
||||
auth,
|
||||
token,
|
||||
});
|
||||
|
||||
// 启动 Bun 服务器
|
||||
const server = Bun.serve({
|
||||
port: parseInt(port, 10),
|
||||
hostname: host,
|
||||
fetch: app.fetch,
|
||||
websocket,
|
||||
});
|
||||
|
||||
console.log(`Server running at http://${host}:${port}`);
|
||||
|
||||
// 优雅关闭
|
||||
process.on('SIGINT', () => {
|
||||
console.log('\nShutting down server...');
|
||||
server.stop();
|
||||
process.exit(0);
|
||||
});
|
||||
|
||||
process.on('SIGTERM', () => {
|
||||
console.log('\nShutting down server...');
|
||||
server.stop();
|
||||
process.exit(0);
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
#!/usr/bin/env bun
|
||||
/**
|
||||
* AI Assistant CLI
|
||||
*
|
||||
* 命令行入口
|
||||
*/
|
||||
|
||||
import { Command } from 'commander';
|
||||
import { registerServeCommand, registerAttachCommand } from './commands/index.js';
|
||||
|
||||
const program = new Command();
|
||||
|
||||
program
|
||||
.name('ai-assistant')
|
||||
.description('AI Terminal Assistant - Your AI-powered coding companion')
|
||||
.version('1.0.0');
|
||||
|
||||
// 注册命令
|
||||
registerServeCommand(program);
|
||||
registerAttachCommand(program);
|
||||
|
||||
// 默认命令 (无参数时的行为)
|
||||
program
|
||||
.action(() => {
|
||||
program.help();
|
||||
});
|
||||
|
||||
// 解析命令行参数
|
||||
program.parse(process.argv);
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./dist",
|
||||
"rootDir": "./src",
|
||||
"declaration": true,
|
||||
"declarationMap": true
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
@@ -0,0 +1,249 @@
|
||||
/**
|
||||
* Agent Adapter
|
||||
*
|
||||
* 将 core 模块的 Agent 适配到 Server 环境
|
||||
* 处理流式输出、事件推送等
|
||||
*
|
||||
* 使用接口定义避免直接依赖 @ai-assistant/core 类型
|
||||
*/
|
||||
|
||||
import type { SessionStatus } from '../types.js';
|
||||
import { getSessionManager } from '../session/manager.js';
|
||||
import { broadcastToSession } from '../ws.js';
|
||||
import { emitStatusEvent, emitLogEvent } from '../sse.js';
|
||||
|
||||
// ============================================================================
|
||||
// Core 模块接口定义（避免直接依赖 @ai-assistant/core 类型）
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Agent 实例接口
|
||||
*/
|
||||
interface AgentInstance {
|
||||
setRegistry(registry: unknown): void;
|
||||
chat(message: string, onStream?: (chunk: string) => void): Promise<string>;
|
||||
getToolCount(): { core: number; discovered: number; total: number };
|
||||
getContextUsageFormatted(): string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Agent 构造函数接口
|
||||
*/
|
||||
interface AgentConstructor {
|
||||
new (config: unknown): AgentInstance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Tool Registry 接口
|
||||
*/
|
||||
interface ToolRegistry {
|
||||
getCoreTools(): unknown[];
|
||||
getAllTools(): unknown[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Core 模块接口
|
||||
*/
|
||||
interface CoreModule {
|
||||
Agent: AgentConstructor;
|
||||
toolRegistry: ToolRegistry;
|
||||
loadConfig: () => unknown;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 模块状态
|
||||
// ============================================================================
|
||||
|
||||
// Core 模块引用
|
||||
let coreModule: CoreModule | null = null;
|
||||
|
||||
// Agent 实例缓存（每个 session 一个）
|
||||
const agentCache: Map<string, AgentInstance> = new Map();
|
||||
|
||||
// ============================================================================
|
||||
// 公共 API
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 初始化 core 模块
|
||||
*/
|
||||
export async function initCore(): Promise<boolean> {
|
||||
try {
|
||||
// 使用变量避免 TypeScript 静态分析 import 路径
|
||||
const corePath = '@ai-assistant/core';
|
||||
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
||||
const core = (await import(/* webpackIgnore: true */ corePath)) as unknown as CoreModule;
|
||||
|
||||
// 验证模块结构
|
||||
if (!core.Agent || !core.toolRegistry || !core.loadConfig) {
|
||||
console.warn('[Agent] Core module missing required exports');
|
||||
return false;
|
||||
}
|
||||
|
||||
coreModule = core;
|
||||
console.log('[Agent] Core module loaded');
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.warn('[Agent] Core module not available:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查 core 模块是否可用
|
||||
*/
|
||||
export function isCoreAvailable(): boolean {
|
||||
return coreModule !== null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取或创建 Agent 实例
|
||||
*/
|
||||
export function getOrCreateAgent(sessionId: string): AgentInstance | null {
|
||||
if (!coreModule) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// 检查缓存
|
||||
if (agentCache.has(sessionId)) {
|
||||
return agentCache.get(sessionId)!;
|
||||
}
|
||||
|
||||
// 创建新 Agent
|
||||
const config = coreModule.loadConfig();
|
||||
const agent = new coreModule.Agent(config);
|
||||
agent.setRegistry(coreModule.toolRegistry);
|
||||
|
||||
agentCache.set(sessionId, agent);
|
||||
return agent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 销毁 Agent 实例
|
||||
*/
|
||||
export function destroyAgent(sessionId: string): void {
|
||||
agentCache.delete(sessionId);
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理用户消息并流式返回响应
|
||||
*/
|
||||
export async function processMessage(sessionId: string, content: string): Promise<void> {
|
||||
const sessionManager = getSessionManager();
|
||||
|
||||
// 更新状态
|
||||
sessionManager.updateStatus(sessionId, 'busy' as SessionStatus);
|
||||
emitStatusEvent(sessionId, 'processing', { message: '正在处理...' });
|
||||
|
||||
// 获取 Agent
|
||||
const agent = getOrCreateAgent(sessionId);
|
||||
|
||||
if (!agent) {
|
||||
// Core 模块不可用，返回占位响应
|
||||
broadcastToSession(sessionId, {
|
||||
type: 'chunk',
|
||||
sessionId,
|
||||
payload: {
|
||||
content: 'Agent core module not available. Please build @ai-assistant/core first.',
|
||||
},
|
||||
});
|
||||
|
||||
const assistantMessage = sessionManager.addMessage(sessionId, {
|
||||
role: 'assistant',
|
||||
content: 'Agent core module not available. Please build @ai-assistant/core first.',
|
||||
});
|
||||
|
||||
broadcastToSession(sessionId, {
|
||||
type: 'done',
|
||||
sessionId,
|
||||
payload: assistantMessage,
|
||||
});
|
||||
|
||||
sessionManager.updateStatus(sessionId, 'idle' as SessionStatus);
|
||||
emitStatusEvent(sessionId, 'idle');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 调用 Agent 的 chat 方法，使用流式回调
|
||||
const response = await agent.chat(content, (chunk: string) => {
|
||||
// 推送流式内容
|
||||
broadcastToSession(sessionId, {
|
||||
type: 'chunk',
|
||||
sessionId,
|
||||
payload: { content: chunk },
|
||||
});
|
||||
|
||||
// 检测工具调用
|
||||
if (chunk.includes('[调用工具:')) {
|
||||
const match = chunk.match(/\[调用工具: (.+?)\]/);
|
||||
if (match) {
|
||||
emitLogEvent(sessionId, 'info', `调用工具: ${match[1]}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 保存助手消息
|
||||
const assistantMessage = sessionManager.addMessage(sessionId, {
|
||||
role: 'assistant',
|
||||
content: response,
|
||||
});
|
||||
|
||||
// 发送完成消息
|
||||
broadcastToSession(sessionId, {
|
||||
type: 'done',
|
||||
sessionId,
|
||||
payload: assistantMessage,
|
||||
});
|
||||
|
||||
emitStatusEvent(sessionId, 'idle');
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : String(error);
|
||||
|
||||
// 发送错误
|
||||
broadcastToSession(sessionId, {
|
||||
type: 'error',
|
||||
sessionId,
|
||||
payload: { message: errorMessage },
|
||||
});
|
||||
|
||||
emitLogEvent(sessionId, 'error', errorMessage);
|
||||
} finally {
|
||||
sessionManager.updateStatus(sessionId, 'idle' as SessionStatus);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消正在进行的处理
|
||||
*/
|
||||
export function cancelProcessing(sessionId: string): void {
|
||||
// TODO: 实现取消逻辑
|
||||
// 目前 AI SDK 的 streamText 不支持取消
|
||||
const sessionManager = getSessionManager();
|
||||
sessionManager.updateStatus(sessionId, 'idle' as SessionStatus);
|
||||
emitStatusEvent(sessionId, 'cancelled');
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 Agent 统计信息
|
||||
*/
|
||||
export function getAgentStats(sessionId: string): {
|
||||
available: boolean;
|
||||
toolCount?: { core: number; discovered: number; total: number };
|
||||
contextUsage?: string;
|
||||
} {
|
||||
if (!coreModule) {
|
||||
return { available: false };
|
||||
}
|
||||
|
||||
const agent = agentCache.get(sessionId);
|
||||
if (!agent) {
|
||||
return { available: true };
|
||||
}
|
||||
|
||||
return {
|
||||
available: true,
|
||||
toolCount: agent.getToolCount(),
|
||||
contextUsage: agent.getContextUsageFormatted(),
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
/**
|
||||
* Agent Module
|
||||
*
|
||||
* 导出 Agent 适配器
|
||||
*/
|
||||
|
||||
export {
|
||||
initCore,
|
||||
isCoreAvailable,
|
||||
getOrCreateAgent,
|
||||
destroyAgent,
|
||||
processMessage,
|
||||
cancelProcessing,
|
||||
getAgentStats,
|
||||
} from './adapter.js';
|
||||
@@ -0,0 +1,25 @@
|
||||
/**
|
||||
* Auth Module
|
||||
*
|
||||
* 导出认证相关功能
|
||||
*/
|
||||
|
||||
export {
|
||||
// 类型
|
||||
type AuthConfig,
|
||||
type AuthContext,
|
||||
// Token 操作
|
||||
generateToken,
|
||||
maskToken,
|
||||
validateToken,
|
||||
extractToken,
|
||||
// 配置
|
||||
initAuth,
|
||||
getAuthConfig,
|
||||
addToken,
|
||||
removeToken,
|
||||
setAuthEnabled,
|
||||
// 中间件
|
||||
authMiddleware,
|
||||
getAuthContext,
|
||||
} from './token.js';
|
||||
@@ -0,0 +1,263 @@
|
||||
/**
|
||||
* Token Authentication
|
||||
*
|
||||
* 简单的 Token 认证机制
|
||||
* - 本地模式 (127.0.0.1): 无需认证
|
||||
* - 远程模式: 需要 Bearer Token
|
||||
*/
|
||||
|
||||
import { createMiddleware } from 'hono/factory';
|
||||
import type { Context, Next } from 'hono';
|
||||
|
||||
// ============================================================================
|
||||
// 类型定义
|
||||
// ============================================================================
|
||||
|
||||
export interface AuthConfig {
|
||||
/** 是否启用认证 (远程模式下自动启用) */
|
||||
enabled: boolean;
|
||||
/** 有效的 token 列表 */
|
||||
tokens: string[];
|
||||
/** 跳过认证的路径 */
|
||||
skipPaths: string[];
|
||||
}
|
||||
|
||||
export interface AuthContext {
|
||||
/** 是否已认证 */
|
||||
authenticated: boolean;
|
||||
/** 使用的 token (脱敏) */
|
||||
tokenHint?: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 默认配置
|
||||
// ============================================================================
|
||||
|
||||
const defaultConfig: AuthConfig = {
|
||||
enabled: false,
|
||||
tokens: [],
|
||||
skipPaths: ['/health', '/api/health'],
|
||||
};
|
||||
|
||||
// 当前配置
|
||||
let authConfig: AuthConfig = { ...defaultConfig };
|
||||
|
||||
// ============================================================================
|
||||
// Token 生成
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 生成随机 token
|
||||
*/
|
||||
export function generateToken(length: number = 32): string {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
let token = '';
|
||||
const randomValues = new Uint8Array(length);
|
||||
crypto.getRandomValues(randomValues);
|
||||
for (let i = 0; i < length; i++) {
|
||||
token += chars[randomValues[i] % chars.length];
|
||||
}
|
||||
return token;
|
||||
}
|
||||
|
||||
/**
|
||||
* 脱敏 token (只显示前4位和后4位)
|
||||
*/
|
||||
export function maskToken(token: string): string {
|
||||
if (token.length <= 8) {
|
||||
return '****';
|
||||
}
|
||||
return `${token.slice(0, 4)}...${token.slice(-4)}`;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 配置管理
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 初始化认证配置
|
||||
*/
|
||||
export function initAuth(config: Partial<AuthConfig> = {}): AuthConfig {
|
||||
authConfig = {
|
||||
...defaultConfig,
|
||||
...config,
|
||||
};
|
||||
return authConfig;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取认证配置
|
||||
*/
|
||||
export function getAuthConfig(): AuthConfig {
|
||||
return { ...authConfig };
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加 token
|
||||
*/
|
||||
export function addToken(token: string): void {
|
||||
if (!authConfig.tokens.includes(token)) {
|
||||
authConfig.tokens.push(token);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除 token
|
||||
*/
|
||||
export function removeToken(token: string): void {
|
||||
const index = authConfig.tokens.indexOf(token);
|
||||
if (index !== -1) {
|
||||
authConfig.tokens.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 启用/禁用认证
|
||||
*/
|
||||
export function setAuthEnabled(enabled: boolean): void {
|
||||
authConfig.enabled = enabled;
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查是否为本地请求
|
||||
*/
|
||||
function isLocalRequest(c: Context): boolean {
|
||||
// 获取客户端 IP
|
||||
const forwarded = c.req.header('x-forwarded-for');
|
||||
const realIp = c.req.header('x-real-ip');
|
||||
|
||||
// 如果有代理头，检查原始 IP
|
||||
if (forwarded) {
|
||||
const clientIp = forwarded.split(',')[0].trim();
|
||||
return isLocalIP(clientIp);
|
||||
}
|
||||
|
||||
if (realIp) {
|
||||
return isLocalIP(realIp);
|
||||
}
|
||||
|
||||
// Bun/Hono 环境下获取连接 IP
|
||||
// 这需要 server 层传递，目前假设本地
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查是否为本地 IP
|
||||
*/
|
||||
function isLocalIP(ip: string): boolean {
|
||||
return (
|
||||
ip === '127.0.0.1' ||
|
||||
ip === '::1' ||
|
||||
ip === 'localhost' ||
|
||||
ip.startsWith('192.168.') ||
|
||||
ip.startsWith('10.') ||
|
||||
ip.startsWith('172.16.') ||
|
||||
ip.startsWith('172.17.') ||
|
||||
ip.startsWith('172.18.') ||
|
||||
ip.startsWith('172.19.') ||
|
||||
ip.startsWith('172.2') ||
|
||||
ip.startsWith('172.30.') ||
|
||||
ip.startsWith('172.31.')
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 认证验证
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 验证 token
|
||||
*/
|
||||
export function validateToken(token: string): boolean {
|
||||
return authConfig.tokens.includes(token);
|
||||
}
|
||||
|
||||
/**
|
||||
* 从请求中提取 token
|
||||
*/
|
||||
export function extractToken(c: Context): string | null {
|
||||
// 1. 从 Authorization header 提取
|
||||
const authHeader = c.req.header('Authorization');
|
||||
if (authHeader?.startsWith('Bearer ')) {
|
||||
return authHeader.slice(7);
|
||||
}
|
||||
|
||||
// 2. 从 query parameter 提取 (用于 WebSocket)
|
||||
const queryToken = c.req.query('token');
|
||||
if (queryToken) {
|
||||
return queryToken;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Hono 中间件
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 认证中间件
|
||||
*/
|
||||
export const authMiddleware = createMiddleware(async (c: Context, next: Next) => {
|
||||
// 检查是否跳过认证
|
||||
const path = c.req.path;
|
||||
if (authConfig.skipPaths.some((p) => path.startsWith(p))) {
|
||||
await next();
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果认证未启用，跳过
|
||||
if (!authConfig.enabled) {
|
||||
c.set('auth', { authenticated: true } as AuthContext);
|
||||
await next();
|
||||
return;
|
||||
}
|
||||
|
||||
// 本地请求跳过认证
|
||||
if (isLocalRequest(c)) {
|
||||
c.set('auth', { authenticated: true } as AuthContext);
|
||||
await next();
|
||||
return;
|
||||
}
|
||||
|
||||
// 提取 token
|
||||
const token = extractToken(c);
|
||||
|
||||
if (!token) {
|
||||
return c.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'Authentication required',
|
||||
message: 'Please provide a valid token in the Authorization header',
|
||||
},
|
||||
401
|
||||
);
|
||||
}
|
||||
|
||||
// 验证 token
|
||||
if (!validateToken(token)) {
|
||||
return c.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'Invalid token',
|
||||
message: 'The provided token is not valid',
|
||||
},
|
||||
401
|
||||
);
|
||||
}
|
||||
|
||||
// 设置认证上下文
|
||||
c.set('auth', {
|
||||
authenticated: true,
|
||||
tokenHint: maskToken(token),
|
||||
} as AuthContext);
|
||||
|
||||
await next();
|
||||
});
|
||||
|
||||
/**
|
||||
* 获取当前请求的认证上下文
|
||||
*/
|
||||
export function getAuthContext(c: Context): AuthContext {
|
||||
return c.get('auth') || { authenticated: false };
|
||||
}
|
||||
@@ -8,35 +8,71 @@
|
||||
* bun run packages/server/src/bin/server.ts
|
||||
* bun run packages/server/src/bin/server.ts --port 8080
|
||||
* bun run packages/server/src/bin/server.ts --host 0.0.0.0 --port 3000
|
||||
* bun run packages/server/src/bin/server.ts --auth --token mytoken
|
||||
*/
|
||||
|
||||
import { app, websocket, startServer } from '../index.js';
|
||||
|
||||
// 解析命令行参数
|
||||
function parseArgs(): { port: number; host: string } {
|
||||
function parseArgs(): { port: number; host: string; auth?: boolean; token?: string } {
|
||||
const args = process.argv.slice(2);
|
||||
let port = 3000;
|
||||
let host = '127.0.0.1';
|
||||
let auth: boolean | undefined;
|
||||
let token: string | undefined;
|
||||
|
||||
for (let i = 0; i < args.length; i++) {
|
||||
if (args[i] === '--port' || args[i] === '-p') {
|
||||
port = parseInt(args[i + 1], 10) || 3000;
|
||||
i++;
|
||||
} else if (args[i] === '--host' || args[i] === '-h') {
|
||||
} else if (args[i] === '--host' || args[i] === '-H') {
|
||||
host = args[i + 1] || '127.0.0.1';
|
||||
i++;
|
||||
} else if (args[i] === '--auth') {
|
||||
auth = true;
|
||||
} else if (args[i] === '--no-auth') {
|
||||
auth = false;
|
||||
} else if (args[i] === '--token' || args[i] === '-t') {
|
||||
token = args[i + 1];
|
||||
i++;
|
||||
} else if (args[i] === '--help' || args[i] === '-h') {
|
||||
console.log(`
|
||||
AI Assistant Server
|
||||
|
||||
Usage:
|
||||
bun run server.ts [options]
|
||||
|
||||
Options:
|
||||
-p, --port <port> Port to listen on (default: 3000)
|
||||
-H, --host <host> Host to bind to (default: 127.0.0.1)
|
||||
--auth Enable authentication
|
||||
--no-auth Disable authentication
|
||||
-t, --token <token> Set authentication token
|
||||
-h, --help Show this help message
|
||||
|
||||
Examples:
|
||||
# Local development (no auth)
|
||||
bun run server.ts
|
||||
|
||||
# Remote server with auth
|
||||
bun run server.ts --host 0.0.0.0 --auth
|
||||
|
||||
# Custom token
|
||||
bun run server.ts --host 0.0.0.0 --token mysecrettoken
|
||||
`);
|
||||
process.exit(0);
|
||||
}
|
||||
}
|
||||
|
||||
return { port, host };
|
||||
return { port, host, auth, token };
|
||||
}
|
||||
|
||||
// 主函数
|
||||
async function main() {
|
||||
const { port, host } = parseArgs();
|
||||
const { port, host, auth, token } = parseArgs();
|
||||
|
||||
// 打印启动信息
|
||||
startServer({ port, host });
|
||||
// 初始化并打印启动信息
|
||||
await startServer({ port, host, auth, token });
|
||||
|
||||
// 启动 Bun 服务器
|
||||
const server = Bun.serve({
|
||||
@@ -46,7 +82,7 @@ async function main() {
|
||||
websocket,
|
||||
});
|
||||
|
||||
console.log(`Server started at http://${host}:${port}`);
|
||||
console.log(`Server running at http://${host}:${port}`);
|
||||
|
||||
// 优雅关闭
|
||||
process.on('SIGINT', () => {
|
||||
|
||||
@@ -18,6 +18,16 @@ import {
|
||||
} from './ws.js';
|
||||
import { handleSSE, getSSEStats } from './sse.js';
|
||||
import { getSessionManager } from './session/manager.js';
|
||||
import { initCore, isCoreAvailable, getAgentStats } from './agent/index.js';
|
||||
import {
|
||||
authMiddleware,
|
||||
initAuth,
|
||||
getAuthConfig,
|
||||
generateToken,
|
||||
addToken,
|
||||
setAuthEnabled,
|
||||
maskToken,
|
||||
} from './auth/index.js';
|
||||
|
||||
// 创建 Hono 应用
|
||||
const app = new Hono();
|
||||
@@ -36,15 +46,26 @@ app.use(
|
||||
})
|
||||
);
|
||||
|
||||
// 健康检查
|
||||
// 认证中间件 (在 CORS 之后)
|
||||
app.use('*', authMiddleware);
|
||||
|
||||
// 健康检查 (跳过认证)
|
||||
app.get('/health', (c) => {
|
||||
const sessionManager = getSessionManager();
|
||||
const wsStats = getConnectionStats();
|
||||
const sseStats = getSSEStats();
|
||||
const authConfig = getAuthConfig();
|
||||
|
||||
return c.json({
|
||||
status: 'ok',
|
||||
timestamp: new Date().toISOString(),
|
||||
agent: {
|
||||
coreAvailable: isCoreAvailable(),
|
||||
},
|
||||
auth: {
|
||||
enabled: authConfig.enabled,
|
||||
tokenCount: authConfig.tokens.length,
|
||||
},
|
||||
stats: {
|
||||
sessions: sessionManager.count(),
|
||||
websocket: wsStats,
|
||||
@@ -119,6 +140,10 @@ app.onError((err, c) => {
|
||||
export interface ServerOptions {
|
||||
port?: number;
|
||||
host?: string;
|
||||
/** 是否启用认证 (远程模式自动启用) */
|
||||
auth?: boolean;
|
||||
/** 预设的 token */
|
||||
token?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -135,12 +160,51 @@ export function createServer(options: ServerOptions = {}) {
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化服务器（加载 core 模块等）
|
||||
*/
|
||||
export async function initServer(options: ServerOptions = {}): Promise<void> {
|
||||
// 尝试加载 core 模块
|
||||
const coreLoaded = await initCore();
|
||||
if (coreLoaded) {
|
||||
console.log('[Server] Core module initialized');
|
||||
} else {
|
||||
console.warn('[Server] Core module not available, running in limited mode');
|
||||
}
|
||||
|
||||
// 初始化认证
|
||||
const { host = '127.0.0.1', auth, token } = options;
|
||||
const isRemote = host !== '127.0.0.1' && host !== 'localhost';
|
||||
const authEnabled = auth !== undefined ? auth : isRemote;
|
||||
|
||||
initAuth({
|
||||
enabled: authEnabled,
|
||||
tokens: [],
|
||||
skipPaths: ['/health', '/api/health'],
|
||||
});
|
||||
|
||||
// 如果启用认证，生成或使用提供的 token
|
||||
if (authEnabled) {
|
||||
const serverToken = token || generateToken();
|
||||
addToken(serverToken);
|
||||
console.log(`[Auth] Authentication enabled`);
|
||||
console.log(`[Auth] Token: ${serverToken}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 启动服务器 (Bun 环境)
|
||||
*/
|
||||
export function startServer(options: ServerOptions = {}): void {
|
||||
export async function startServer(options: ServerOptions = {}): Promise<void> {
|
||||
const { port = 3000, host = '127.0.0.1' } = options;
|
||||
|
||||
// 初始化
|
||||
await initServer(options);
|
||||
|
||||
const coreStatus = isCoreAvailable() ? '✅ Core loaded' : '⚠️ Core not available';
|
||||
const authConfig = getAuthConfig();
|
||||
const authStatus = authConfig.enabled ? '🔐 Enabled' : '🔓 Disabled';
|
||||
|
||||
console.log(`
|
||||
╔════════════════════════════════════════════╗
|
||||
║ AI Assistant Server ║
|
||||
@@ -149,6 +213,8 @@ export function startServer(options: ServerOptions = {}): void {
|
||||
║ WebSocket: ws://${host}:${port}/api/ws/:sessionId
|
||||
║ SSE: http://${host}:${port}/api/sessions/:id/events
|
||||
║ Health: http://${host}:${port}/health
|
||||
║ Agent: ${coreStatus}
|
||||
║ Auth: ${authStatus}
|
||||
╚════════════════════════════════════════════╝
|
||||
`);
|
||||
|
||||
@@ -170,4 +236,21 @@ export {
|
||||
emitFileChangeEvent,
|
||||
} from './sse.js';
|
||||
export { broadcastToSession } from './ws.js';
|
||||
export {
|
||||
initCore,
|
||||
isCoreAvailable,
|
||||
getAgentStats,
|
||||
processMessage,
|
||||
cancelProcessing,
|
||||
} from './agent/index.js';
|
||||
export {
|
||||
initAuth,
|
||||
getAuthConfig,
|
||||
generateToken,
|
||||
addToken,
|
||||
removeToken,
|
||||
setAuthEnabled,
|
||||
validateToken,
|
||||
maskToken,
|
||||
} from './auth/index.js';
|
||||
export * from './types.js';
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
|
||||
import type { WSContext } from 'hono/ws';
|
||||
import { getSessionManager } from './session/manager.js';
|
||||
import { processMessage, cancelProcessing } from './agent/index.js';
|
||||
import type { ClientMessage, ServerMessage } from './types.js';
|
||||
|
||||
// 存储活跃的 WebSocket 连接
|
||||
@@ -103,9 +104,10 @@ export async function handleWebSocketMessage(
|
||||
switch (message.type) {
|
||||
case 'message': {
|
||||
// 用户发送消息
|
||||
const content = message.payload?.content || '';
|
||||
const userMessage = sessionManager.addMessage(sessionId, {
|
||||
role: 'user',
|
||||
content: message.payload?.content || '',
|
||||
content,
|
||||
});
|
||||
|
||||
if (userMessage) {
|
||||
@@ -116,48 +118,22 @@ export async function handleWebSocketMessage(
|
||||
payload: userMessage,
|
||||
});
|
||||
|
||||
// 更新状态为处理中
|
||||
sessionManager.updateStatus(sessionId, 'busy');
|
||||
|
||||
// TODO: 调用 Agent 处理消息并流式返回
|
||||
// 这里需要集成 core 模块的 Agent
|
||||
// const agent = createAgent();
|
||||
// for await (const chunk of agent.stream(message.payload.content)) {
|
||||
// broadcastToSession(sessionId, {
|
||||
// type: 'chunk',
|
||||
// sessionId,
|
||||
// payload: { content: chunk },
|
||||
// });
|
||||
// }
|
||||
|
||||
// 模拟响应 (后续替换为真实 Agent 调用)
|
||||
setTimeout(() => {
|
||||
const assistantMessage = sessionManager.addMessage(sessionId, {
|
||||
role: 'assistant',
|
||||
content: 'This is a placeholder response. Agent integration coming soon.',
|
||||
});
|
||||
|
||||
broadcastToSession(sessionId, {
|
||||
type: 'done',
|
||||
sessionId,
|
||||
payload: assistantMessage,
|
||||
});
|
||||
|
||||
sessionManager.updateStatus(sessionId, 'idle');
|
||||
}, 1000);
|
||||
// 调用 Agent 处理消息（异步，不阻塞）
|
||||
processMessage(sessionId, content).catch((error) => {
|
||||
console.error('[WS] Agent processing error:', error);
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
case 'cancel': {
|
||||
// 取消当前操作
|
||||
// TODO: 实现取消逻辑
|
||||
cancelProcessing(sessionId);
|
||||
broadcastToSession(sessionId, {
|
||||
type: 'cancelled',
|
||||
sessionId,
|
||||
payload: { message: 'Operation cancelled' },
|
||||
});
|
||||
sessionManager.updateStatus(sessionId, 'idle');
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "@ai-assistant/web",
|
||||
"version": "1.0.0",
|
||||
"description": "AI Terminal Assistant Web UI",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"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": {
|
||||
"@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"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,74 @@
|
||||
/**
|
||||
* App Component
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Sidebar } from './components/Sidebar';
|
||||
import { ChatPage } from './pages/Chat';
|
||||
import { listSessions, createSession, type Session } from './api/client';
|
||||
|
||||
export function App() {
|
||||
const [currentSessionId, setCurrentSessionId] = useState<string | null>(null);
|
||||
const [isInitializing, setIsInitializing] = useState(true);
|
||||
|
||||
// 初始化：加载或创建会话
|
||||
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}
|
||||
/>
|
||||
|
||||
{currentSessionId ? (
|
||||
<ChatPage key={currentSessionId} sessionId={currentSessionId} />
|
||||
) : (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<p className="text-gray-400">Select or create a session</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
/**
|
||||
* 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}`);
|
||||
}
|
||||
@@ -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,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>
|
||||
);
|
||||
}
|
||||
@@ -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,
|
||||
};
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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 prose prose-invert max-w-none;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -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: [],
|
||||
};
|
||||
@@ -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" }]
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import path from 'path';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, './src'),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
port: 5173,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:3000',
|
||||
changeOrigin: true,
|
||||
},
|
||||
'/health': {
|
||||
target: 'http://localhost:3000',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
Generated
+1816
-11
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"module": "NodeNext",
|
||||
"moduleResolution": "NodeNext",
|
||||
"lib": ["ES2022"],
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": false,
|
||||
"declaration": true,
|
||||
"declarationMap": true
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user