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,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" />
|
||||
Reference in New Issue
Block a user