feat(ui): 创建共享 UI 组件包
将 web 和 desktop 的重复代码抽取到 @ai-assistant/ui 包: - 添加可配置的 API 客户端 (configureApiClient) - 迁移共享组件: ChatMessage, ChatInput, Sidebar, FileBrowser, ConfigPanel - 迁移共享 hook: useChat - 添加 responsive prop 支持响应式布局 - 更新 web/desktop 依赖并删除重复代码
This commit is contained in:
@@ -13,6 +13,7 @@
|
|||||||
"tauri": "tauri"
|
"tauri": "tauri"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@ai-assistant/ui": "workspace:*",
|
||||||
"@tauri-apps/api": "^2.1.1",
|
"@tauri-apps/api": "^2.1.1",
|
||||||
"@tauri-apps/plugin-dialog": "^2.2.0",
|
"@tauri-apps/plugin-dialog": "^2.2.0",
|
||||||
"@tauri-apps/plugin-fs": "^2.2.0",
|
"@tauri-apps/plugin-fs": "^2.2.0",
|
||||||
|
|||||||
@@ -3,11 +3,15 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import { Sidebar } from './components/Sidebar';
|
import {
|
||||||
|
Sidebar,
|
||||||
|
FileBrowser,
|
||||||
|
ConfigPanel,
|
||||||
|
listSessions,
|
||||||
|
createSession,
|
||||||
|
type Session,
|
||||||
|
} from '@ai-assistant/ui';
|
||||||
import { ChatPage } from './pages/Chat';
|
import { ChatPage } from './pages/Chat';
|
||||||
import { FileBrowser } from './components/FileBrowser';
|
|
||||||
import { ConfigPanel } from './components/ConfigPanel';
|
|
||||||
import { listSessions, createSession, type Session } from './api/client';
|
|
||||||
|
|
||||||
export function App() {
|
export function App() {
|
||||||
const [currentSessionId, setCurrentSessionId] = useState<string | null>(null);
|
const [currentSessionId, setCurrentSessionId] = useState<string | null>(null);
|
||||||
|
|||||||
@@ -1,85 +0,0 @@
|
|||||||
/**
|
|
||||||
* 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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,80 +0,0 @@
|
|||||||
/**
|
|
||||||
* 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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,264 +0,0 @@
|
|||||||
/**
|
|
||||||
* ConfigPanel Component
|
|
||||||
*
|
|
||||||
* 配置面板组件
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { useState, useEffect } from 'react';
|
|
||||||
import { getConfig, updateConfig, type ServerConfig } from '../api/client';
|
|
||||||
|
|
||||||
interface ConfigPanelProps {
|
|
||||||
onClose: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 可用的模型列表
|
|
||||||
const AVAILABLE_MODELS = [
|
|
||||||
{ id: 'claude-sonnet-4-20250514', name: 'Claude Sonnet 4' },
|
|
||||||
{ id: 'claude-3-5-sonnet-20241022', name: 'Claude 3.5 Sonnet' },
|
|
||||||
{ id: 'claude-3-opus-20240229', name: 'Claude 3 Opus' },
|
|
||||||
{ id: 'claude-3-haiku-20240307', name: 'Claude 3 Haiku' },
|
|
||||||
];
|
|
||||||
|
|
||||||
export function ConfigPanel({ onClose }: ConfigPanelProps) {
|
|
||||||
const [config, setConfig] = useState<ServerConfig | null>(null);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [saving, setSaving] = useState(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [success, setSuccess] = useState(false);
|
|
||||||
|
|
||||||
// 表单状态
|
|
||||||
const [formData, setFormData] = useState({
|
|
||||||
model: '',
|
|
||||||
maxTokens: 8192,
|
|
||||||
temperature: 0.7,
|
|
||||||
workdir: '',
|
|
||||||
});
|
|
||||||
|
|
||||||
// 加载配置
|
|
||||||
useEffect(() => {
|
|
||||||
async function loadConfig() {
|
|
||||||
try {
|
|
||||||
const response = await getConfig();
|
|
||||||
setConfig(response.data);
|
|
||||||
setFormData({
|
|
||||||
model: response.data.model,
|
|
||||||
maxTokens: response.data.maxTokens,
|
|
||||||
temperature: response.data.temperature,
|
|
||||||
workdir: response.data.workdir,
|
|
||||||
});
|
|
||||||
} catch (err) {
|
|
||||||
setError(err instanceof Error ? err.message : 'Failed to load config');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
loadConfig();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// 保存配置
|
|
||||||
const handleSave = async () => {
|
|
||||||
setSaving(true);
|
|
||||||
setError(null);
|
|
||||||
setSuccess(false);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await updateConfig(formData);
|
|
||||||
setConfig(response.data);
|
|
||||||
setSuccess(true);
|
|
||||||
setTimeout(() => setSuccess(false), 2000);
|
|
||||||
} catch (err) {
|
|
||||||
setError(err instanceof Error ? err.message : 'Failed to save config');
|
|
||||||
} finally {
|
|
||||||
setSaving(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 重置为默认值
|
|
||||||
const handleReset = () => {
|
|
||||||
if (config) {
|
|
||||||
setFormData({
|
|
||||||
model: config.model,
|
|
||||||
maxTokens: config.maxTokens,
|
|
||||||
temperature: config.temperature,
|
|
||||||
workdir: config.workdir,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
|
||||||
<div className="bg-gray-800 rounded-lg p-6">
|
|
||||||
<div className="text-gray-400">Loading configuration...</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
|
||||||
<div className="bg-gray-800 rounded-lg w-full max-w-lg mx-4 max-h-[90vh] overflow-auto">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-700">
|
|
||||||
<h2 className="text-lg font-semibold">Configuration</h2>
|
|
||||||
<button
|
|
||||||
onClick={onClose}
|
|
||||||
className="p-1 hover:bg-gray-700 rounded transition-colors"
|
|
||||||
>
|
|
||||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<div className="p-6 space-y-6">
|
|
||||||
{/* Error message */}
|
|
||||||
{error && (
|
|
||||||
<div className="p-3 bg-red-900/50 border border-red-700 rounded-lg text-red-300 text-sm">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Success message */}
|
|
||||||
{success && (
|
|
||||||
<div className="p-3 bg-green-900/50 border border-green-700 rounded-lg text-green-300 text-sm">
|
|
||||||
Configuration saved successfully!
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Model */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
|
||||||
Model
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
value={formData.model}
|
|
||||||
onChange={(e) => setFormData({ ...formData, model: e.target.value })}
|
|
||||||
className="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white focus:outline-none focus:border-blue-500"
|
|
||||||
>
|
|
||||||
{AVAILABLE_MODELS.map((model) => (
|
|
||||||
<option key={model.id} value={model.id}>
|
|
||||||
{model.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
<p className="mt-1 text-xs text-gray-500">
|
|
||||||
Select the AI model to use for conversations
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Max Tokens */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
|
||||||
Max Tokens: {formData.maxTokens}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="range"
|
|
||||||
min="1024"
|
|
||||||
max="32768"
|
|
||||||
step="1024"
|
|
||||||
value={formData.maxTokens}
|
|
||||||
onChange={(e) => setFormData({ ...formData, maxTokens: parseInt(e.target.value) })}
|
|
||||||
className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
|
|
||||||
/>
|
|
||||||
<div className="flex justify-between text-xs text-gray-500 mt-1">
|
|
||||||
<span>1K</span>
|
|
||||||
<span>8K</span>
|
|
||||||
<span>16K</span>
|
|
||||||
<span>32K</span>
|
|
||||||
</div>
|
|
||||||
<p className="mt-1 text-xs text-gray-500">
|
|
||||||
Maximum number of tokens in the response
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Temperature */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
|
||||||
Temperature: {formData.temperature.toFixed(2)}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="range"
|
|
||||||
min="0"
|
|
||||||
max="1"
|
|
||||||
step="0.05"
|
|
||||||
value={formData.temperature}
|
|
||||||
onChange={(e) => setFormData({ ...formData, temperature: parseFloat(e.target.value) })}
|
|
||||||
className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
|
|
||||||
/>
|
|
||||||
<div className="flex justify-between text-xs text-gray-500 mt-1">
|
|
||||||
<span>Precise (0)</span>
|
|
||||||
<span>Balanced (0.5)</span>
|
|
||||||
<span>Creative (1)</span>
|
|
||||||
</div>
|
|
||||||
<p className="mt-1 text-xs text-gray-500">
|
|
||||||
Controls randomness in responses
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Working Directory */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
|
||||||
Working Directory
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={formData.workdir}
|
|
||||||
onChange={(e) => setFormData({ ...formData, workdir: e.target.value })}
|
|
||||||
className="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white focus:outline-none focus:border-blue-500 font-mono text-sm"
|
|
||||||
placeholder="/path/to/project"
|
|
||||||
/>
|
|
||||||
<p className="mt-1 text-xs text-gray-500">
|
|
||||||
Root directory for file operations
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Server Info (Read-only) */}
|
|
||||||
{config && (
|
|
||||||
<div className="pt-4 border-t border-gray-700">
|
|
||||||
<h3 className="text-sm font-medium text-gray-400 mb-3">Server Information</h3>
|
|
||||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
|
||||||
<div>
|
|
||||||
<span className="text-gray-500">Allowed Paths:</span>
|
|
||||||
<span className="ml-2 text-gray-300">
|
|
||||||
{config.allowedPaths.length || 'All'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span className="text-gray-500">Denied Paths:</span>
|
|
||||||
<span className="ml-2 text-gray-300">
|
|
||||||
{config.deniedPaths.length || 'None'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Footer */}
|
|
||||||
<div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-700 bg-gray-800/50">
|
|
||||||
<button
|
|
||||||
onClick={handleReset}
|
|
||||||
className="px-4 py-2 text-sm text-gray-300 hover:text-white transition-colors"
|
|
||||||
>
|
|
||||||
Reset
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={onClose}
|
|
||||||
className="px-4 py-2 text-sm bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={handleSave}
|
|
||||||
disabled={saving}
|
|
||||||
className="px-4 py-2 text-sm bg-blue-600 hover:bg-blue-500 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
||||||
>
|
|
||||||
{saving ? 'Saving...' : 'Save Changes'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,236 +0,0 @@
|
|||||||
/**
|
|
||||||
* FileBrowser Component
|
|
||||||
*
|
|
||||||
* 文件浏览器组件
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { useState, useEffect, useCallback } from 'react';
|
|
||||||
import { listFiles, readFile, type FileInfo } from '../api/client';
|
|
||||||
|
|
||||||
interface FileBrowserProps {
|
|
||||||
onFileSelect?: (path: string, content: string) => void;
|
|
||||||
className?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 文件图标
|
|
||||||
const FileIcon = ({ type, extension }: { type: 'file' | 'directory'; extension?: string }) => {
|
|
||||||
if (type === 'directory') {
|
|
||||||
return (
|
|
||||||
<svg className="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 根据扩展名显示不同颜色
|
|
||||||
const colors: Record<string, string> = {
|
|
||||||
ts: 'text-blue-400',
|
|
||||||
tsx: 'text-blue-400',
|
|
||||||
js: 'text-yellow-300',
|
|
||||||
jsx: 'text-yellow-300',
|
|
||||||
json: 'text-yellow-500',
|
|
||||||
md: 'text-gray-400',
|
|
||||||
css: 'text-pink-400',
|
|
||||||
html: 'text-orange-400',
|
|
||||||
py: 'text-green-400',
|
|
||||||
go: 'text-cyan-400',
|
|
||||||
rs: 'text-orange-500',
|
|
||||||
};
|
|
||||||
|
|
||||||
const color = colors[extension || ''] || 'text-gray-400';
|
|
||||||
|
|
||||||
return (
|
|
||||||
<svg className={`w-4 h-4 ${color}`} fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path
|
|
||||||
fillRule="evenodd"
|
|
||||||
d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"
|
|
||||||
clipRule="evenodd"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 格式化文件大小
|
|
||||||
const formatSize = (bytes: number): string => {
|
|
||||||
if (bytes === 0) return '0 B';
|
|
||||||
const k = 1024;
|
|
||||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
|
||||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
||||||
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
export function FileBrowser({ onFileSelect, className = '' }: FileBrowserProps) {
|
|
||||||
const [currentPath, setCurrentPath] = useState('.');
|
|
||||||
const [files, setFiles] = useState<FileInfo[]>([]);
|
|
||||||
const [parentPath, setParentPath] = useState<string | null>(null);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [selectedFile, setSelectedFile] = useState<string | null>(null);
|
|
||||||
const [fileContent, setFileContent] = useState<string | null>(null);
|
|
||||||
const [showHidden, setShowHidden] = useState(false);
|
|
||||||
|
|
||||||
// 加载目录内容
|
|
||||||
const loadDirectory = useCallback(async (path: string) => {
|
|
||||||
setLoading(true);
|
|
||||||
setError(null);
|
|
||||||
setSelectedFile(null);
|
|
||||||
setFileContent(null);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await listFiles(path, showHidden);
|
|
||||||
setFiles(response.data.files);
|
|
||||||
setCurrentPath(response.data.path);
|
|
||||||
setParentPath(response.data.parent);
|
|
||||||
} catch (err) {
|
|
||||||
setError(err instanceof Error ? err.message : 'Failed to load directory');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, [showHidden]);
|
|
||||||
|
|
||||||
// 初始加载
|
|
||||||
useEffect(() => {
|
|
||||||
loadDirectory('.');
|
|
||||||
}, [loadDirectory]);
|
|
||||||
|
|
||||||
// 处理文件/目录点击
|
|
||||||
const handleItemClick = async (item: FileInfo) => {
|
|
||||||
if (item.type === 'directory') {
|
|
||||||
loadDirectory(item.path);
|
|
||||||
} else {
|
|
||||||
setSelectedFile(item.path);
|
|
||||||
try {
|
|
||||||
const response = await readFile(item.path);
|
|
||||||
if (response.data.encoding === 'utf-8') {
|
|
||||||
setFileContent(response.data.content);
|
|
||||||
onFileSelect?.(item.path, response.data.content);
|
|
||||||
} else {
|
|
||||||
setFileContent('[Binary file]');
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
setFileContent(`Error: ${err instanceof Error ? err.message : 'Failed to read file'}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 返回上级目录
|
|
||||||
const handleGoUp = () => {
|
|
||||||
if (parentPath !== null) {
|
|
||||||
loadDirectory(parentPath);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 刷新
|
|
||||||
const handleRefresh = () => {
|
|
||||||
loadDirectory(currentPath);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`flex flex-col h-full bg-gray-900 ${className}`}>
|
|
||||||
{/* 工具栏 */}
|
|
||||||
<div className="flex items-center gap-2 p-2 border-b border-gray-700 bg-gray-800">
|
|
||||||
<button
|
|
||||||
onClick={handleGoUp}
|
|
||||||
disabled={parentPath === null}
|
|
||||||
className="p-1.5 rounded hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
||||||
title="Go up"
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={handleRefresh}
|
|
||||||
className="p-1.5 rounded hover:bg-gray-700"
|
|
||||||
title="Refresh"
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div className="flex-1 px-2 py-1 text-sm text-gray-400 bg-gray-900 rounded truncate">
|
|
||||||
{currentPath}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<label className="flex items-center gap-1 text-xs text-gray-400 cursor-pointer">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={showHidden}
|
|
||||||
onChange={(e) => {
|
|
||||||
setShowHidden(e.target.checked);
|
|
||||||
loadDirectory(currentPath);
|
|
||||||
}}
|
|
||||||
className="w-3 h-3"
|
|
||||||
/>
|
|
||||||
Hidden
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 文件列表 */}
|
|
||||||
<div className="flex-1 overflow-auto">
|
|
||||||
{loading ? (
|
|
||||||
<div className="flex items-center justify-center h-32 text-gray-400">
|
|
||||||
Loading...
|
|
||||||
</div>
|
|
||||||
) : error ? (
|
|
||||||
<div className="flex items-center justify-center h-32 text-red-400">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
) : files.length === 0 ? (
|
|
||||||
<div className="flex items-center justify-center h-32 text-gray-500">
|
|
||||||
Empty directory
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="divide-y divide-gray-800">
|
|
||||||
{files.map((file) => (
|
|
||||||
<div
|
|
||||||
key={file.path}
|
|
||||||
onClick={() => handleItemClick(file)}
|
|
||||||
className={`flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-gray-800 ${
|
|
||||||
selectedFile === file.path ? 'bg-gray-800 border-l-2 border-blue-500' : ''
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<FileIcon type={file.type} extension={file.extension} />
|
|
||||||
<span className="flex-1 truncate text-sm">{file.name}</span>
|
|
||||||
{file.type === 'file' && (
|
|
||||||
<span className="text-xs text-gray-500">{formatSize(file.size)}</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 文件预览 */}
|
|
||||||
{selectedFile && fileContent && (
|
|
||||||
<div className="border-t border-gray-700 max-h-48 overflow-auto">
|
|
||||||
<div className="sticky top-0 flex items-center justify-between px-3 py-1 bg-gray-800 border-b border-gray-700">
|
|
||||||
<span className="text-xs text-gray-400 truncate">{selectedFile}</span>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
setSelectedFile(null);
|
|
||||||
setFileContent(null);
|
|
||||||
}}
|
|
||||||
className="p-1 hover:bg-gray-700 rounded"
|
|
||||||
>
|
|
||||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<pre className="p-3 text-xs text-gray-300 whitespace-pre-wrap font-mono">
|
|
||||||
{fileContent.slice(0, 5000)}
|
|
||||||
{fileContent.length > 5000 && '\n... (truncated)'}
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,124 +0,0 @@
|
|||||||
/**
|
|
||||||
* 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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,7 +1,16 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom/client';
|
import ReactDOM from 'react-dom/client';
|
||||||
|
import { configureApiClient } from '@ai-assistant/ui';
|
||||||
import { App } from './App';
|
import { App } from './App';
|
||||||
import './styles/index.css';
|
import './styles/index.css';
|
||||||
|
import '@ai-assistant/ui/styles';
|
||||||
|
|
||||||
|
// 配置 API 客户端：Tauri 应用需要完整的后端 URL
|
||||||
|
configureApiClient({
|
||||||
|
baseUrl: 'http://localhost:3000/api',
|
||||||
|
wsBaseUrl: 'ws://localhost:3000/api',
|
||||||
|
healthUrl: 'http://localhost:3000/health',
|
||||||
|
});
|
||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
|
|||||||
@@ -4,9 +4,13 @@
|
|||||||
|
|
||||||
import { useEffect, useRef } from 'react';
|
import { useEffect, useRef } from 'react';
|
||||||
import { Wifi, WifiOff } from 'lucide-react';
|
import { Wifi, WifiOff } from 'lucide-react';
|
||||||
import { useChat } from '../hooks/useChat';
|
import {
|
||||||
import { ChatMessage, StreamingMessage, TypingIndicator } from '../components/ChatMessage';
|
useChat,
|
||||||
import { ChatInput } from '../components/ChatInput';
|
ChatMessage,
|
||||||
|
StreamingMessage,
|
||||||
|
TypingIndicator,
|
||||||
|
ChatInput,
|
||||||
|
} from '@ai-assistant/ui';
|
||||||
|
|
||||||
interface ChatPageProps {
|
interface ChatPageProps {
|
||||||
sessionId: string;
|
sessionId: string;
|
||||||
|
|||||||
@@ -1,6 +1,10 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
export default {
|
export default {
|
||||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
content: [
|
||||||
|
'./index.html',
|
||||||
|
'./src/**/*.{js,ts,jsx,tsx}',
|
||||||
|
'../ui/src/**/*.{js,ts,jsx,tsx}',
|
||||||
|
],
|
||||||
darkMode: 'class',
|
darkMode: 'class',
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
|
|||||||
@@ -0,0 +1,33 @@
|
|||||||
|
{
|
||||||
|
"name": "@ai-assistant/ui",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "AI Terminal Assistant Shared UI Components",
|
||||||
|
"type": "module",
|
||||||
|
"main": "dist/index.js",
|
||||||
|
"types": "dist/index.d.ts",
|
||||||
|
"exports": {
|
||||||
|
".": {
|
||||||
|
"import": "./dist/index.js",
|
||||||
|
"types": "./dist/index.d.ts"
|
||||||
|
},
|
||||||
|
"./styles": "./src/styles/index.css"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"build": "tsc",
|
||||||
|
"dev": "tsc --watch",
|
||||||
|
"typecheck": "tsc --noEmit"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^18.0.0",
|
||||||
|
"react-dom": "^18.0.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"clsx": "^2.1.0",
|
||||||
|
"lucide-react": "^0.344.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.3.0",
|
||||||
|
"@types/react-dom": "^18.3.0",
|
||||||
|
"typescript": "^5.3.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,45 +1,70 @@
|
|||||||
/**
|
/**
|
||||||
* API Client for Web
|
* Configurable API Client
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export interface Session {
|
import type {
|
||||||
id: string;
|
Session,
|
||||||
name?: string;
|
Message,
|
||||||
createdAt: string;
|
HealthStatus,
|
||||||
updatedAt: string;
|
FileListResponse,
|
||||||
status: string;
|
FileReadResponse,
|
||||||
messageCount: number;
|
FileTreeResponse,
|
||||||
|
ServerConfig,
|
||||||
|
} from './types.js';
|
||||||
|
|
||||||
|
// Re-export types
|
||||||
|
export type {
|
||||||
|
Session,
|
||||||
|
Message,
|
||||||
|
HealthStatus,
|
||||||
|
FileInfo,
|
||||||
|
FileListResponse,
|
||||||
|
FileReadResponse,
|
||||||
|
FileTreeNode,
|
||||||
|
FileTreeResponse,
|
||||||
|
ServerConfig,
|
||||||
|
} from './types.js';
|
||||||
|
|
||||||
|
// API Configuration
|
||||||
|
interface ApiConfig {
|
||||||
|
baseUrl: string;
|
||||||
|
wsBaseUrl: () => string;
|
||||||
|
healthUrl: () => string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Message {
|
let apiConfig: ApiConfig = {
|
||||||
id: string;
|
baseUrl: '/api',
|
||||||
role: 'user' | 'assistant' | 'system';
|
wsBaseUrl: () => {
|
||||||
content: string;
|
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||||
timestamp: string;
|
return `${protocol}//${window.location.host}/api`;
|
||||||
}
|
},
|
||||||
|
healthUrl: () => '/health',
|
||||||
|
};
|
||||||
|
|
||||||
export interface HealthStatus {
|
/**
|
||||||
status: string;
|
* Configure API client for different environments
|
||||||
timestamp: string;
|
*/
|
||||||
agent: {
|
export function configureApiClient(config: {
|
||||||
coreAvailable: boolean;
|
baseUrl: string;
|
||||||
};
|
wsBaseUrl: string | (() => string);
|
||||||
auth: {
|
healthUrl?: string | (() => string);
|
||||||
enabled: boolean;
|
}) {
|
||||||
tokenCount: number;
|
apiConfig = {
|
||||||
};
|
baseUrl: config.baseUrl,
|
||||||
stats: {
|
wsBaseUrl:
|
||||||
sessions: number;
|
typeof config.wsBaseUrl === 'function'
|
||||||
websocket: { connections: number };
|
? config.wsBaseUrl
|
||||||
sse: { connections: number };
|
: () => config.wsBaseUrl as string,
|
||||||
|
healthUrl: config.healthUrl
|
||||||
|
? typeof config.healthUrl === 'function'
|
||||||
|
? config.healthUrl
|
||||||
|
: () => config.healthUrl as string
|
||||||
|
: () => '/health',
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tauri 应用需要完整的后端 URL
|
|
||||||
const API_BASE = 'http://localhost:3000/api';
|
|
||||||
|
|
||||||
async function request<T>(method: string, path: string, body?: unknown): Promise<T> {
|
async function request<T>(method: string, path: string, body?: unknown): Promise<T> {
|
||||||
const response = await fetch(`${API_BASE}${path}`, {
|
const response = await fetch(`${apiConfig.baseUrl}${path}`, {
|
||||||
method,
|
method,
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
@@ -57,7 +82,8 @@ async function request<T>(method: string, path: string, body?: unknown): Promise
|
|||||||
|
|
||||||
// Health
|
// Health
|
||||||
export async function getHealth(): Promise<HealthStatus> {
|
export async function getHealth(): Promise<HealthStatus> {
|
||||||
const response = await fetch('http://localhost:3000/health');
|
const healthUrl = apiConfig.healthUrl();
|
||||||
|
const response = await fetch(healthUrl);
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
throw new Error(`HTTP ${response.status}`);
|
throw new Error(`HTTP ${response.status}`);
|
||||||
}
|
}
|
||||||
@@ -82,7 +108,9 @@ export async function deleteSession(id: string): Promise<{ success: boolean }> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Messages
|
// Messages
|
||||||
export async function getMessages(sessionId: string): Promise<{ success: boolean; data: Message[] }> {
|
export async function getMessages(
|
||||||
|
sessionId: string
|
||||||
|
): Promise<{ success: boolean; data: Message[] }> {
|
||||||
return request('GET', `/sessions/${sessionId}/messages`);
|
return request('GET', `/sessions/${sessionId}/messages`);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -95,63 +123,22 @@ export async function sendMessage(
|
|||||||
|
|
||||||
// WebSocket
|
// WebSocket
|
||||||
export function createWebSocket(sessionId: string): WebSocket {
|
export function createWebSocket(sessionId: string): WebSocket {
|
||||||
// Tauri 应用直接连接后端
|
const wsBase = apiConfig.wsBaseUrl();
|
||||||
return new WebSocket(`ws://localhost:3000/api/ws/${sessionId}`);
|
return new WebSocket(`${wsBase}/ws/${sessionId}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Files
|
// Files
|
||||||
export interface FileInfo {
|
export async function getWorkingDirectory(): Promise<{
|
||||||
name: string;
|
|
||||||
path: string;
|
|
||||||
type: 'file' | 'directory';
|
|
||||||
size: number;
|
|
||||||
modified: string;
|
|
||||||
extension?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface FileListResponse {
|
|
||||||
success: boolean;
|
success: boolean;
|
||||||
data: {
|
data: { workingDirectory: string; separator: string };
|
||||||
path: string;
|
}> {
|
||||||
absolutePath: string;
|
|
||||||
parent: string | null;
|
|
||||||
files: FileInfo[];
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface FileReadResponse {
|
|
||||||
success: boolean;
|
|
||||||
data: {
|
|
||||||
path: string;
|
|
||||||
name: string;
|
|
||||||
type: string;
|
|
||||||
size: number;
|
|
||||||
modified: string;
|
|
||||||
content: string;
|
|
||||||
encoding: 'utf-8' | 'base64';
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface FileTreeNode {
|
|
||||||
name: string;
|
|
||||||
path: string;
|
|
||||||
type: 'file' | 'directory';
|
|
||||||
children?: FileTreeNode[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface FileTreeResponse {
|
|
||||||
success: boolean;
|
|
||||||
data: {
|
|
||||||
path: string;
|
|
||||||
tree: FileTreeNode[];
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getWorkingDirectory(): Promise<{ success: boolean; data: { workingDirectory: string; separator: string } }> {
|
|
||||||
return request('GET', '/files');
|
return request('GET', '/files');
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function listFiles(path: string = '.', showHidden: boolean = false): Promise<FileListResponse> {
|
export async function listFiles(
|
||||||
|
path: string = '.',
|
||||||
|
showHidden: boolean = false
|
||||||
|
): Promise<FileListResponse> {
|
||||||
const params = new URLSearchParams({ path });
|
const params = new URLSearchParams({ path });
|
||||||
if (showHidden) params.set('hidden', 'true');
|
if (showHidden) params.set('hidden', 'true');
|
||||||
return request('GET', `/files/list?${params}`);
|
return request('GET', `/files/list?${params}`);
|
||||||
@@ -167,19 +154,12 @@ export async function getFileTree(path: string = '.', depth: number = 3): Promis
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Config
|
// Config
|
||||||
export interface ServerConfig {
|
|
||||||
model: string;
|
|
||||||
maxTokens: number;
|
|
||||||
temperature: number;
|
|
||||||
workdir: string;
|
|
||||||
allowedPaths: string[];
|
|
||||||
deniedPaths: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getConfig(): Promise<{ success: boolean; data: ServerConfig }> {
|
export async function getConfig(): Promise<{ success: boolean; data: ServerConfig }> {
|
||||||
return request('GET', '/config');
|
return request('GET', '/config');
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function updateConfig(config: Partial<ServerConfig>): Promise<{ success: boolean; data: ServerConfig }> {
|
export async function updateConfig(
|
||||||
|
config: Partial<ServerConfig>
|
||||||
|
): Promise<{ success: boolean; data: ServerConfig }> {
|
||||||
return request('PATCH', '/config', config);
|
return request('PATCH', '/config', config);
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
/**
|
||||||
|
* Shared API Types
|
||||||
|
*/
|
||||||
|
|
||||||
|
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 };
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FileInfo {
|
||||||
|
name: string;
|
||||||
|
path: string;
|
||||||
|
type: 'file' | 'directory';
|
||||||
|
size: number;
|
||||||
|
modified: string;
|
||||||
|
extension?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FileListResponse {
|
||||||
|
success: boolean;
|
||||||
|
data: {
|
||||||
|
path: string;
|
||||||
|
absolutePath: string;
|
||||||
|
parent: string | null;
|
||||||
|
files: FileInfo[];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FileReadResponse {
|
||||||
|
success: boolean;
|
||||||
|
data: {
|
||||||
|
path: string;
|
||||||
|
name: string;
|
||||||
|
type: string;
|
||||||
|
size: number;
|
||||||
|
modified: string;
|
||||||
|
content: string;
|
||||||
|
encoding: 'utf-8' | 'base64';
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FileTreeNode {
|
||||||
|
name: string;
|
||||||
|
path: string;
|
||||||
|
type: 'file' | 'directory';
|
||||||
|
children?: FileTreeNode[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FileTreeResponse {
|
||||||
|
success: boolean;
|
||||||
|
data: {
|
||||||
|
path: string;
|
||||||
|
tree: FileTreeNode[];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ServerConfig {
|
||||||
|
model: string;
|
||||||
|
maxTokens: number;
|
||||||
|
temperature: number;
|
||||||
|
workdir: string;
|
||||||
|
allowedPaths: string[];
|
||||||
|
deniedPaths: string[];
|
||||||
|
}
|
||||||
+37
-16
@@ -1,7 +1,7 @@
|
|||||||
/**
|
/**
|
||||||
* Chat Input Component
|
* Chat Input Component
|
||||||
*
|
*
|
||||||
* 响应式输入框：适配移动端键盘和触摸操作
|
* 支持响应式：responsive=true 时适配移动端键盘和触摸操作
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { useState, useRef, useEffect } from 'react';
|
import { useState, useRef, useEffect } from 'react';
|
||||||
@@ -13,9 +13,17 @@ interface ChatInputProps {
|
|||||||
onCancel: () => void;
|
onCancel: () => void;
|
||||||
isLoading: boolean;
|
isLoading: boolean;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
|
/** 是否启用响应式布局（移动端适配） */
|
||||||
|
responsive?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputProps) {
|
export function ChatInput({
|
||||||
|
onSend,
|
||||||
|
onCancel,
|
||||||
|
isLoading,
|
||||||
|
disabled,
|
||||||
|
responsive = false,
|
||||||
|
}: ChatInputProps) {
|
||||||
const [input, setInput] = useState('');
|
const [input, setInput] = useState('');
|
||||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||||
|
|
||||||
@@ -24,11 +32,11 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
|
|||||||
const textarea = textareaRef.current;
|
const textarea = textareaRef.current;
|
||||||
if (textarea) {
|
if (textarea) {
|
||||||
textarea.style.height = 'auto';
|
textarea.style.height = 'auto';
|
||||||
// 移动端最大高度稍小
|
// 响应式模式下移动端最大高度稍小
|
||||||
const maxHeight = window.innerWidth < 768 ? 120 : 200;
|
const maxHeight = responsive && window.innerWidth < 768 ? 120 : 200;
|
||||||
textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
|
textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
|
||||||
}
|
}
|
||||||
}, [input]);
|
}, [input, responsive]);
|
||||||
|
|
||||||
const handleSubmit = () => {
|
const handleSubmit = () => {
|
||||||
const trimmed = input.trim();
|
const trimmed = input.trim();
|
||||||
@@ -44,7 +52,7 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||||
// 移动端 Enter 直接发送，桌面端 Shift+Enter 换行
|
// Enter 发送，Shift+Enter 换行
|
||||||
if (e.key === 'Enter' && !e.shiftKey) {
|
if (e.key === 'Enter' && !e.shiftKey) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
handleSubmit();
|
handleSubmit();
|
||||||
@@ -52,7 +60,12 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="border-t border-gray-700 p-3 md:p-4 bg-gray-900 safe-area-pb">
|
<div
|
||||||
|
className={clsx(
|
||||||
|
'border-t border-gray-700 bg-gray-900',
|
||||||
|
responsive ? 'p-3 md:p-4 safe-area-pb' : 'p-4'
|
||||||
|
)}
|
||||||
|
>
|
||||||
<div className="max-w-4xl mx-auto flex gap-2">
|
<div className="max-w-4xl mx-auto flex gap-2">
|
||||||
<div className="flex-1 relative">
|
<div className="flex-1 relative">
|
||||||
<textarea
|
<textarea
|
||||||
@@ -60,13 +73,17 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
|
|||||||
value={input}
|
value={input}
|
||||||
onChange={(e) => setInput(e.target.value)}
|
onChange={(e) => setInput(e.target.value)}
|
||||||
onKeyDown={handleKeyDown}
|
onKeyDown={handleKeyDown}
|
||||||
placeholder="Type a message..."
|
placeholder={
|
||||||
|
responsive
|
||||||
|
? 'Type a message...'
|
||||||
|
: 'Type a message... (Shift+Enter for new line)'
|
||||||
|
}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
rows={1}
|
rows={1}
|
||||||
className={clsx(
|
className={clsx(
|
||||||
'w-full resize-none rounded-lg border border-gray-600 bg-gray-800',
|
'w-full resize-none rounded-lg border border-gray-600 bg-gray-800',
|
||||||
'px-3 py-2.5 md:px-4 md:py-3',
|
responsive ? 'px-3 py-2.5 md:px-4 md:py-3' : 'px-4 py-3',
|
||||||
'text-base md:text-sm', // 移动端使用 16px 防止缩放
|
responsive ? 'text-base md:text-sm' : 'text-sm', // 移动端使用 16px 防止缩放
|
||||||
'text-gray-100 placeholder-gray-500',
|
'text-gray-100 placeholder-gray-500',
|
||||||
'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent',
|
'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent',
|
||||||
'disabled:opacity-50 disabled:cursor-not-allowed'
|
'disabled:opacity-50 disabled:cursor-not-allowed'
|
||||||
@@ -77,8 +94,10 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
|
|||||||
onClick={isLoading ? onCancel : handleSubmit}
|
onClick={isLoading ? onCancel : handleSubmit}
|
||||||
disabled={!isLoading && (!input.trim() || disabled)}
|
disabled={!isLoading && (!input.trim() || disabled)}
|
||||||
className={clsx(
|
className={clsx(
|
||||||
'px-3 py-2.5 md:px-4 md:py-3 rounded-lg flex items-center justify-center transition-colors',
|
'rounded-lg flex items-center justify-center transition-colors',
|
||||||
'min-w-[44px] min-h-[44px]', // 最小触摸目标 44x44
|
responsive
|
||||||
|
? 'px-3 py-2.5 md:px-4 md:py-3 min-w-[44px] min-h-[44px]' // 最小触摸目标 44x44
|
||||||
|
: 'px-4 py-3',
|
||||||
isLoading
|
isLoading
|
||||||
? 'bg-red-600 hover:bg-red-700 active:bg-red-800 text-white'
|
? 'bg-red-600 hover:bg-red-700 active:bg-red-800 text-white'
|
||||||
: 'bg-primary-600 hover:bg-primary-700 active:bg-primary-800 text-white',
|
: 'bg-primary-600 hover:bg-primary-700 active:bg-primary-800 text-white',
|
||||||
@@ -88,10 +107,12 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
|
|||||||
{isLoading ? <Square size={20} /> : <Send size={20} />}
|
{isLoading ? <Square size={20} /> : <Send size={20} />}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{/* 移动端提示文字 */}
|
{/* 响应式模式下桌面端显示提示文字 */}
|
||||||
<p className="hidden md:block text-xs text-gray-500 text-center mt-2">
|
{responsive && (
|
||||||
Press Enter to send, Shift+Enter for new line
|
<p className="hidden md:block text-xs text-gray-500 text-center mt-2">
|
||||||
</p>
|
Press Enter to send, Shift+Enter for new line
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
+1
-1
@@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
import { User, Bot } from 'lucide-react';
|
import { User, Bot } from 'lucide-react';
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import type { Message } from '../api/client';
|
import type { Message } from '../api/client.js';
|
||||||
|
|
||||||
interface ChatMessageProps {
|
interface ChatMessageProps {
|
||||||
message: Message;
|
message: Message;
|
||||||
+102
-42
@@ -1,14 +1,17 @@
|
|||||||
/**
|
/**
|
||||||
* ConfigPanel Component
|
* ConfigPanel Component
|
||||||
*
|
*
|
||||||
* 配置面板：移动端全屏显示，桌面端居中弹窗
|
* 支持响应式：responsive=true 时移动端全屏显示，桌面端居中弹窗
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import { getConfig, updateConfig, type ServerConfig } from '../api/client';
|
import clsx from 'clsx';
|
||||||
|
import { getConfig, updateConfig, type ServerConfig } from '../api/client.js';
|
||||||
|
|
||||||
interface ConfigPanelProps {
|
interface ConfigPanelProps {
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
|
/** 是否启用响应式布局（移动端全屏面板） */
|
||||||
|
responsive?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 可用的模型列表
|
// 可用的模型列表
|
||||||
@@ -19,7 +22,7 @@ const AVAILABLE_MODELS = [
|
|||||||
{ id: 'claude-3-haiku-20240307', name: 'Claude 3 Haiku' },
|
{ id: 'claude-3-haiku-20240307', name: 'Claude 3 Haiku' },
|
||||||
];
|
];
|
||||||
|
|
||||||
export function ConfigPanel({ onClose }: ConfigPanelProps) {
|
export function ConfigPanel({ onClose, responsive = false }: ConfigPanelProps) {
|
||||||
const [config, setConfig] = useState<ServerConfig | null>(null);
|
const [config, setConfig] = useState<ServerConfig | null>(null);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [saving, setSaving] = useState(false);
|
const [saving, setSaving] = useState(false);
|
||||||
@@ -96,26 +99,58 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 bg-black/50 flex items-end md:items-center justify-center z-50">
|
<div
|
||||||
{/* 移动端：从底部滑出的全屏面板；桌面端：居中弹窗 */}
|
className={clsx(
|
||||||
<div className="bg-gray-800 w-full md:w-full md:max-w-lg md:mx-4 max-h-full md:max-h-[90vh] overflow-auto rounded-t-2xl md:rounded-lg">
|
'fixed inset-0 bg-black/50 flex z-50',
|
||||||
|
responsive ? 'items-end md:items-center justify-center' : 'items-center justify-center'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{/* 响应式模式：移动端从底部滑出的全屏面板；桌面端：居中弹窗 */}
|
||||||
|
{/* 非响应式：固定居中弹窗 */}
|
||||||
|
<div
|
||||||
|
className={clsx(
|
||||||
|
'bg-gray-800 max-h-[90vh] overflow-auto',
|
||||||
|
responsive
|
||||||
|
? 'w-full md:w-full md:max-w-lg md:mx-4 rounded-t-2xl md:rounded-lg'
|
||||||
|
: 'rounded-lg w-full max-w-lg mx-4'
|
||||||
|
)}
|
||||||
|
>
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="sticky top-0 flex items-center justify-between px-4 md:px-6 py-4 border-b border-gray-700 bg-gray-800 z-10">
|
<div
|
||||||
{/* 移动端拖动指示器 */}
|
className={clsx(
|
||||||
<div className="absolute top-2 left-1/2 -translate-x-1/2 w-10 h-1 bg-gray-600 rounded-full md:hidden" />
|
'sticky top-0 flex items-center justify-between border-b border-gray-700 bg-gray-800 z-10',
|
||||||
<h2 className="text-lg font-semibold mt-2 md:mt-0">Configuration</h2>
|
responsive ? 'px-4 md:px-6 py-4' : 'px-6 py-4'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{/* 响应式模式下移动端拖动指示器 */}
|
||||||
|
{responsive && (
|
||||||
|
<div className="absolute top-2 left-1/2 -translate-x-1/2 w-10 h-1 bg-gray-600 rounded-full md:hidden" />
|
||||||
|
)}
|
||||||
|
<h2 className={clsx('text-lg font-semibold', responsive && 'mt-2 md:mt-0')}>
|
||||||
|
Configuration
|
||||||
|
</h2>
|
||||||
<button
|
<button
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
className="p-2 hover:bg-gray-700 active:bg-gray-600 rounded-lg transition-colors min-w-[44px] min-h-[44px] flex items-center justify-center"
|
className={clsx(
|
||||||
|
'hover:bg-gray-700 rounded transition-colors',
|
||||||
|
responsive
|
||||||
|
? 'p-2 active:bg-gray-600 rounded-lg min-w-[44px] min-h-[44px] flex items-center justify-center'
|
||||||
|
: 'p-1'
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M6 18L18 6M6 6l12 12"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Content */}
|
{/* Content */}
|
||||||
<div className="p-4 md:p-6 space-y-6">
|
<div className={clsx('space-y-6', responsive ? 'p-4 md:p-6' : 'p-6')}>
|
||||||
{/* Error message */}
|
{/* Error message */}
|
||||||
{error && (
|
{error && (
|
||||||
<div className="p-3 bg-red-900/50 border border-red-700 rounded-lg text-red-300 text-sm">
|
<div className="p-3 bg-red-900/50 border border-red-700 rounded-lg text-red-300 text-sm">
|
||||||
@@ -132,13 +167,14 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
|
|||||||
|
|
||||||
{/* Model */}
|
{/* Model */}
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
<label className="block text-sm font-medium text-gray-300 mb-2">Model</label>
|
||||||
Model
|
|
||||||
</label>
|
|
||||||
<select
|
<select
|
||||||
value={formData.model}
|
value={formData.model}
|
||||||
onChange={(e) => setFormData({ ...formData, model: e.target.value })}
|
onChange={(e) => setFormData({ ...formData, model: e.target.value })}
|
||||||
className="w-full px-3 py-3 md:py-2 bg-gray-900 border border-gray-700 rounded-lg text-white text-base md:text-sm focus:outline-none focus:border-blue-500"
|
className={clsx(
|
||||||
|
'w-full bg-gray-900 border border-gray-700 rounded-lg text-white focus:outline-none focus:border-blue-500',
|
||||||
|
responsive ? 'px-3 py-3 md:py-2 text-base md:text-sm' : 'px-3 py-2'
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
{AVAILABLE_MODELS.map((model) => (
|
{AVAILABLE_MODELS.map((model) => (
|
||||||
<option key={model.id} value={model.id}>
|
<option key={model.id} value={model.id}>
|
||||||
@@ -163,7 +199,10 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
|
|||||||
step="1024"
|
step="1024"
|
||||||
value={formData.maxTokens}
|
value={formData.maxTokens}
|
||||||
onChange={(e) => setFormData({ ...formData, maxTokens: parseInt(e.target.value) })}
|
onChange={(e) => setFormData({ ...formData, maxTokens: parseInt(e.target.value) })}
|
||||||
className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer touch-pan-x"
|
className={clsx(
|
||||||
|
'w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer',
|
||||||
|
responsive && 'touch-pan-x'
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
<div className="flex justify-between text-xs text-gray-500 mt-1">
|
<div className="flex justify-between text-xs text-gray-500 mt-1">
|
||||||
<span>1K</span>
|
<span>1K</span>
|
||||||
@@ -188,49 +227,54 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
|
|||||||
step="0.05"
|
step="0.05"
|
||||||
value={formData.temperature}
|
value={formData.temperature}
|
||||||
onChange={(e) => setFormData({ ...formData, temperature: parseFloat(e.target.value) })}
|
onChange={(e) => setFormData({ ...formData, temperature: parseFloat(e.target.value) })}
|
||||||
className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer touch-pan-x"
|
className={clsx(
|
||||||
|
'w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer',
|
||||||
|
responsive && 'touch-pan-x'
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
<div className="flex justify-between text-xs text-gray-500 mt-1">
|
<div className="flex justify-between text-xs text-gray-500 mt-1">
|
||||||
<span>Precise</span>
|
<span>{responsive ? 'Precise' : 'Precise (0)'}</span>
|
||||||
<span>Balanced</span>
|
<span>{responsive ? 'Balanced' : 'Balanced (0.5)'}</span>
|
||||||
<span>Creative</span>
|
<span>{responsive ? 'Creative' : 'Creative (1)'}</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="mt-1 text-xs text-gray-500">
|
<p className="mt-1 text-xs text-gray-500">Controls randomness in responses</p>
|
||||||
Controls randomness in responses
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Working Directory */}
|
{/* Working Directory */}
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
<label className="block text-sm font-medium text-gray-300 mb-2">Working Directory</label>
|
||||||
Working Directory
|
|
||||||
</label>
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={formData.workdir}
|
value={formData.workdir}
|
||||||
onChange={(e) => setFormData({ ...formData, workdir: e.target.value })}
|
onChange={(e) => setFormData({ ...formData, workdir: e.target.value })}
|
||||||
className="w-full px-3 py-3 md:py-2 bg-gray-900 border border-gray-700 rounded-lg text-white text-base md:text-sm focus:outline-none focus:border-blue-500 font-mono"
|
className={clsx(
|
||||||
|
'w-full bg-gray-900 border border-gray-700 rounded-lg text-white focus:outline-none focus:border-blue-500 font-mono',
|
||||||
|
responsive ? 'px-3 py-3 md:py-2 text-base md:text-sm' : 'px-3 py-2 text-sm'
|
||||||
|
)}
|
||||||
placeholder="/path/to/project"
|
placeholder="/path/to/project"
|
||||||
/>
|
/>
|
||||||
<p className="mt-1 text-xs text-gray-500">
|
<p className="mt-1 text-xs text-gray-500">Root directory for file operations</p>
|
||||||
Root directory for file operations
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Server Info (Read-only) */}
|
{/* Server Info (Read-only) */}
|
||||||
{config && (
|
{config && (
|
||||||
<div className="pt-4 border-t border-gray-700">
|
<div className="pt-4 border-t border-gray-700">
|
||||||
<h3 className="text-sm font-medium text-gray-400 mb-3">Server Information</h3>
|
<h3 className="text-sm font-medium text-gray-400 mb-3">Server Information</h3>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
|
<div
|
||||||
<div className="flex justify-between md:block">
|
className={clsx(
|
||||||
|
'text-sm',
|
||||||
|
responsive ? 'grid grid-cols-1 md:grid-cols-2 gap-3' : 'grid grid-cols-2 gap-4'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className={responsive ? 'flex justify-between md:block' : ''}>
|
||||||
<span className="text-gray-500">Allowed Paths:</span>
|
<span className="text-gray-500">Allowed Paths:</span>
|
||||||
<span className="md:ml-2 text-gray-300">
|
<span className={clsx('text-gray-300', responsive ? 'md:ml-2' : 'ml-2')}>
|
||||||
{config.allowedPaths.length || 'All'}
|
{config.allowedPaths.length || 'All'}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between md:block">
|
<div className={responsive ? 'flex justify-between md:block' : ''}>
|
||||||
<span className="text-gray-500">Denied Paths:</span>
|
<span className="text-gray-500">Denied Paths:</span>
|
||||||
<span className="md:ml-2 text-gray-300">
|
<span className={clsx('text-gray-300', responsive ? 'md:ml-2' : 'ml-2')}>
|
||||||
{config.deniedPaths.length || 'None'}
|
{config.deniedPaths.length || 'None'}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -239,24 +283,40 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Footer - 移动端固定在底部 */}
|
{/* Footer */}
|
||||||
<div className="sticky bottom-0 flex flex-col-reverse md:flex-row items-stretch md:items-center justify-end gap-2 md:gap-3 p-4 md:px-6 md:py-4 border-t border-gray-700 bg-gray-800 safe-area-pb">
|
<div
|
||||||
|
className={clsx(
|
||||||
|
'sticky bottom-0 border-t border-gray-700 bg-gray-800',
|
||||||
|
responsive
|
||||||
|
? 'flex flex-col-reverse md:flex-row items-stretch md:items-center justify-end gap-2 md:gap-3 p-4 md:px-6 md:py-4 safe-area-pb'
|
||||||
|
: 'flex items-center justify-end gap-3 px-6 py-4 bg-gray-800/50'
|
||||||
|
)}
|
||||||
|
>
|
||||||
<button
|
<button
|
||||||
onClick={handleReset}
|
onClick={handleReset}
|
||||||
className="px-4 py-3 md:py-2 text-sm text-gray-300 hover:text-white active:bg-gray-700 rounded-lg transition-colors"
|
className={clsx(
|
||||||
|
'text-sm text-gray-300 hover:text-white transition-colors',
|
||||||
|
responsive ? 'px-4 py-3 md:py-2 active:bg-gray-700 rounded-lg' : 'px-4 py-2'
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
Reset
|
Reset
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
className="px-4 py-3 md:py-2 text-sm bg-gray-700 hover:bg-gray-600 active:bg-gray-500 rounded-lg transition-colors"
|
className={clsx(
|
||||||
|
'text-sm bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors',
|
||||||
|
responsive ? 'px-4 py-3 md:py-2 active:bg-gray-500' : 'px-4 py-2'
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={handleSave}
|
onClick={handleSave}
|
||||||
disabled={saving}
|
disabled={saving}
|
||||||
className="px-4 py-3 md:py-2 text-sm bg-blue-600 hover:bg-blue-500 active:bg-blue-700 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-medium"
|
className={clsx(
|
||||||
|
'text-sm bg-blue-600 hover:bg-blue-500 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed',
|
||||||
|
responsive ? 'px-4 py-3 md:py-2 active:bg-blue-700 font-medium' : 'px-4 py-2'
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
{saving ? 'Saving...' : 'Save Changes'}
|
{saving ? 'Saving...' : 'Save Changes'}
|
||||||
</button>
|
</button>
|
||||||
+1
-1
@@ -5,7 +5,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import { useState, useEffect, useCallback } from 'react';
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
import { listFiles, readFile, type FileInfo } from '../api/client';
|
import { listFiles, readFile, type FileInfo } from '../api/client.js';
|
||||||
|
|
||||||
interface FileBrowserProps {
|
interface FileBrowserProps {
|
||||||
onFileSelect?: (path: string, content: string) => void;
|
onFileSelect?: (path: string, content: string) => void;
|
||||||
@@ -1,21 +1,28 @@
|
|||||||
/**
|
/**
|
||||||
* Sidebar Component
|
* Sidebar Component
|
||||||
*
|
*
|
||||||
* 响应式侧边栏：桌面端固定显示，移动端抽屉式菜单
|
* 支持响应式：responsive=true 时桌面端固定显示，移动端抽屉式菜单
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import { Plus, MessageSquare, Trash2, RefreshCw, Menu, X } from 'lucide-react';
|
import { Plus, MessageSquare, Trash2, RefreshCw, Menu, X } from 'lucide-react';
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import { listSessions, createSession, deleteSession, type Session } from '../api/client';
|
import { listSessions, createSession, deleteSession, type Session } from '../api/client.js';
|
||||||
|
|
||||||
interface SidebarProps {
|
interface SidebarProps {
|
||||||
currentSessionId: string | null;
|
currentSessionId: string | null;
|
||||||
onSelectSession: (id: string) => void;
|
onSelectSession: (id: string) => void;
|
||||||
onCreateSession: (session: Session) => void;
|
onCreateSession: (session: Session) => void;
|
||||||
|
/** 是否启用响应式布局（移动端抽屉式菜单） */
|
||||||
|
responsive?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }: SidebarProps) {
|
export function Sidebar({
|
||||||
|
currentSessionId,
|
||||||
|
onSelectSession,
|
||||||
|
onCreateSession,
|
||||||
|
responsive = false,
|
||||||
|
}: SidebarProps) {
|
||||||
const [sessions, setSessions] = useState<Session[]>([]);
|
const [sessions, setSessions] = useState<Session[]>([]);
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
@@ -37,7 +44,7 @@ export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }:
|
|||||||
const { data } = await createSession();
|
const { data } = await createSession();
|
||||||
setSessions((prev) => [data, ...prev]);
|
setSessions((prev) => [data, ...prev]);
|
||||||
onCreateSession(data);
|
onCreateSession(data);
|
||||||
setIsOpen(false); // 创建后关闭侧边栏
|
if (responsive) setIsOpen(false); // 响应式模式下创建后关闭侧边栏
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Failed to create session:', error);
|
console.error('Failed to create session:', error);
|
||||||
}
|
}
|
||||||
@@ -61,7 +68,7 @@ export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }:
|
|||||||
|
|
||||||
const handleSelectSession = (id: string) => {
|
const handleSelectSession = (id: string) => {
|
||||||
onSelectSession(id);
|
onSelectSession(id);
|
||||||
setIsOpen(false); // 选择后关闭侧边栏
|
if (responsive) setIsOpen(false); // 响应式模式下选择后关闭侧边栏
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -73,6 +80,69 @@ export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }:
|
|||||||
setIsOpen(false);
|
setIsOpen(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 非响应式模式：简单的固定侧边栏
|
||||||
|
if (!responsive) {
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式模式：移动端抽屉 + 桌面端固定
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* 移动端菜单按钮 */}
|
{/* 移动端菜单按钮 */}
|
||||||
@@ -130,9 +200,7 @@ export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }:
|
|||||||
<RefreshCw className="animate-spin inline-block" size={20} />
|
<RefreshCw className="animate-spin inline-block" size={20} />
|
||||||
</div>
|
</div>
|
||||||
) : sessions.length === 0 ? (
|
) : sessions.length === 0 ? (
|
||||||
<div className="p-4 text-center text-gray-500">
|
<div className="p-4 text-center text-gray-500">No conversations yet</div>
|
||||||
No conversations yet
|
|
||||||
</div>
|
|
||||||
) : (
|
) : (
|
||||||
<div className="p-2 space-y-1">
|
<div className="p-2 space-y-1">
|
||||||
{sessions.map((session) => (
|
{sessions.map((session) => (
|
||||||
@@ -151,9 +219,7 @@ export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }:
|
|||||||
<div className="text-sm truncate">
|
<div className="text-sm truncate">
|
||||||
{session.name || `Chat ${session.id.slice(0, 8)}`}
|
{session.name || `Chat ${session.id.slice(0, 8)}`}
|
||||||
</div>
|
</div>
|
||||||
<div className="text-xs text-gray-500">
|
<div className="text-xs text-gray-500">{session.messageCount} messages</div>
|
||||||
{session.messageCount} messages
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
onClick={(e) => handleDelete(session.id, e)}
|
onClick={(e) => handleDelete(session.id, e)}
|
||||||
@@ -5,7 +5,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import { useState, useEffect, useCallback, useRef } from 'react';
|
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||||
import { createWebSocket, getMessages, type Message } from '../api/client';
|
import { createWebSocket, getMessages, type Message } from '../api/client.js';
|
||||||
|
|
||||||
interface UseChatOptions {
|
interface UseChatOptions {
|
||||||
sessionId: string;
|
sessionId: string;
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
/**
|
||||||
|
* @ai-assistant/ui - Shared UI Components
|
||||||
|
*
|
||||||
|
* 共享 UI 组件库，供 web 和 desktop 包使用
|
||||||
|
*/
|
||||||
|
|
||||||
|
// API Client
|
||||||
|
export {
|
||||||
|
configureApiClient,
|
||||||
|
getHealth,
|
||||||
|
listSessions,
|
||||||
|
createSession,
|
||||||
|
getSession,
|
||||||
|
deleteSession,
|
||||||
|
getMessages,
|
||||||
|
sendMessage,
|
||||||
|
createWebSocket,
|
||||||
|
getWorkingDirectory,
|
||||||
|
listFiles,
|
||||||
|
readFile,
|
||||||
|
getFileTree,
|
||||||
|
getConfig,
|
||||||
|
updateConfig,
|
||||||
|
} from './api/client.js';
|
||||||
|
|
||||||
|
// Types
|
||||||
|
export type {
|
||||||
|
Session,
|
||||||
|
Message,
|
||||||
|
HealthStatus,
|
||||||
|
FileInfo,
|
||||||
|
FileListResponse,
|
||||||
|
FileReadResponse,
|
||||||
|
FileTreeNode,
|
||||||
|
FileTreeResponse,
|
||||||
|
ServerConfig,
|
||||||
|
} from './api/client.js';
|
||||||
|
|
||||||
|
// Components
|
||||||
|
export { ChatMessage, StreamingMessage, TypingIndicator } from './components/ChatMessage.js';
|
||||||
|
export { ChatInput } from './components/ChatInput.js';
|
||||||
|
export { Sidebar } from './components/Sidebar.js';
|
||||||
|
export { FileBrowser } from './components/FileBrowser.js';
|
||||||
|
export { ConfigPanel } from './components/ConfigPanel.js';
|
||||||
|
|
||||||
|
// Hooks
|
||||||
|
export { useChat } from './hooks/useChat.js';
|
||||||
@@ -0,0 +1,115 @@
|
|||||||
|
/**
|
||||||
|
* Shared UI Styles
|
||||||
|
*
|
||||||
|
* 共享样式，供 web 和 desktop 包使用
|
||||||
|
* 注意：使用此文件时，宿主项目需要配置 Tailwind CSS
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* iOS Safe Area Support */
|
||||||
|
@supports (padding-bottom: env(safe-area-inset-bottom)) {
|
||||||
|
.safe-area-pb {
|
||||||
|
padding-bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Prevent pull-to-refresh on mobile */
|
||||||
|
html {
|
||||||
|
overscroll-behavior: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Touch action optimization */
|
||||||
|
.touch-pan-x {
|
||||||
|
touch-action: pan-x;
|
||||||
|
}
|
||||||
|
|
||||||
|
.touch-pan-y {
|
||||||
|
touch-action: pan-y;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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 {
|
||||||
|
max-width: none;
|
||||||
|
color: #f3f4f6; /* text-gray-100 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content pre {
|
||||||
|
background: #1f2937; /* bg-gray-800 */
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding: 1rem;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content code {
|
||||||
|
background: #1f2937; /* bg-gray-800 */
|
||||||
|
padding: 0.125rem 0.375rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content pre code {
|
||||||
|
background: transparent;
|
||||||
|
padding: 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* bg-gray-850 custom color */
|
||||||
|
.bg-gray-850 {
|
||||||
|
background-color: #1a1f2a;
|
||||||
|
}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2022",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"declaration": true,
|
||||||
|
"declarationMap": true,
|
||||||
|
"outDir": "dist",
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src"],
|
||||||
|
"exclude": ["node_modules", "dist"]
|
||||||
|
}
|
||||||
@@ -10,6 +10,7 @@
|
|||||||
"typecheck": "tsc --noEmit"
|
"typecheck": "tsc --noEmit"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@ai-assistant/ui": "workspace:*",
|
||||||
"clsx": "^2.1.0",
|
"clsx": "^2.1.0",
|
||||||
"lucide-react": "^0.344.0",
|
"lucide-react": "^0.344.0",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
|
|||||||
@@ -5,11 +5,15 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import { useState, useEffect, useCallback } from 'react';
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
import { Sidebar } from './components/Sidebar';
|
import {
|
||||||
|
Sidebar,
|
||||||
|
FileBrowser,
|
||||||
|
ConfigPanel,
|
||||||
|
listSessions,
|
||||||
|
createSession,
|
||||||
|
type Session,
|
||||||
|
} from '@ai-assistant/ui';
|
||||||
import { ChatPage } from './pages/Chat';
|
import { ChatPage } from './pages/Chat';
|
||||||
import { FileBrowser } from './components/FileBrowser';
|
|
||||||
import { ConfigPanel } from './components/ConfigPanel';
|
|
||||||
import { listSessions, createSession, type Session } from './api/client';
|
|
||||||
|
|
||||||
export function App() {
|
export function App() {
|
||||||
const [currentSessionId, setCurrentSessionId] = useState<string | null>(null);
|
const [currentSessionId, setCurrentSessionId] = useState<string | null>(null);
|
||||||
@@ -76,6 +80,7 @@ export function App() {
|
|||||||
currentSessionId={currentSessionId}
|
currentSessionId={currentSessionId}
|
||||||
onSelectSession={handleSelectSession}
|
onSelectSession={handleSelectSession}
|
||||||
onCreateSession={handleCreateSession}
|
onCreateSession={handleCreateSession}
|
||||||
|
responsive
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* 工具栏按钮 - 移动端右移避开菜单按钮 */}
|
{/* 工具栏按钮 - 移动端右移避开菜单按钮 */}
|
||||||
@@ -126,7 +131,12 @@ export function App() {
|
|||||||
{/* 聊天区域 */}
|
{/* 聊天区域 */}
|
||||||
<div className={`flex-1 min-w-0 ${showFileBrowser ? 'hidden md:block md:w-1/2' : 'w-full'}`}>
|
<div className={`flex-1 min-w-0 ${showFileBrowser ? 'hidden md:block md:w-1/2' : 'w-full'}`}>
|
||||||
{currentSessionId ? (
|
{currentSessionId ? (
|
||||||
<ChatPage key={currentSessionId} sessionId={currentSessionId} onSessionNotFound={handleSessionNotFound} />
|
<ChatPage
|
||||||
|
key={currentSessionId}
|
||||||
|
sessionId={currentSessionId}
|
||||||
|
onSessionNotFound={handleSessionNotFound}
|
||||||
|
responsive
|
||||||
|
/>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex-1 flex items-center justify-center h-full">
|
<div className="flex-1 flex items-center justify-center h-full">
|
||||||
<p className="text-gray-400">Select or create a session</p>
|
<p className="text-gray-400">Select or create a session</p>
|
||||||
@@ -172,7 +182,7 @@ export function App() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 配置面板 */}
|
{/* 配置面板 */}
|
||||||
{showConfig && <ConfigPanel onClose={() => setShowConfig(false)} />}
|
{showConfig && <ConfigPanel onClose={() => setShowConfig(false)} responsive />}
|
||||||
|
|
||||||
{/* 移动端底部文件按钮 */}
|
{/* 移动端底部文件按钮 */}
|
||||||
<button
|
<button
|
||||||
|
|||||||
@@ -1,181 +0,0 @@
|
|||||||
/**
|
|
||||||
* API Client for Web
|
|
||||||
*/
|
|
||||||
|
|
||||||
export interface Session {
|
|
||||||
id: string;
|
|
||||||
name?: string;
|
|
||||||
createdAt: string;
|
|
||||||
updatedAt: string;
|
|
||||||
status: string;
|
|
||||||
messageCount: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Message {
|
|
||||||
id: string;
|
|
||||||
role: 'user' | 'assistant' | 'system';
|
|
||||||
content: string;
|
|
||||||
timestamp: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface HealthStatus {
|
|
||||||
status: string;
|
|
||||||
timestamp: string;
|
|
||||||
agent: {
|
|
||||||
coreAvailable: boolean;
|
|
||||||
};
|
|
||||||
auth: {
|
|
||||||
enabled: boolean;
|
|
||||||
tokenCount: number;
|
|
||||||
};
|
|
||||||
stats: {
|
|
||||||
sessions: number;
|
|
||||||
websocket: { connections: number };
|
|
||||||
sse: { connections: number };
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const API_BASE = '/api';
|
|
||||||
|
|
||||||
async function request<T>(method: string, path: string, body?: unknown): Promise<T> {
|
|
||||||
const response = await fetch(`${API_BASE}${path}`, {
|
|
||||||
method,
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: body ? JSON.stringify(body) : undefined,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
const error = await response.json().catch(() => ({ error: response.statusText }));
|
|
||||||
throw new Error(error.error || `HTTP ${response.status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
return response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Health
|
|
||||||
export async function getHealth(): Promise<HealthStatus> {
|
|
||||||
return request('GET', '/../health');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sessions
|
|
||||||
export async function listSessions(): Promise<{ success: boolean; data: Session[] }> {
|
|
||||||
return request('GET', '/sessions');
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function createSession(name?: string): Promise<{ success: boolean; data: Session }> {
|
|
||||||
return request('POST', '/sessions', { name });
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getSession(id: string): Promise<{ success: boolean; data: Session }> {
|
|
||||||
return request('GET', `/sessions/${id}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function deleteSession(id: string): Promise<{ success: boolean }> {
|
|
||||||
return request('DELETE', `/sessions/${id}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Messages
|
|
||||||
export async function getMessages(sessionId: string): Promise<{ success: boolean; data: Message[] }> {
|
|
||||||
return request('GET', `/sessions/${sessionId}/messages`);
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function sendMessage(
|
|
||||||
sessionId: string,
|
|
||||||
content: string
|
|
||||||
): Promise<{ success: boolean; data: Message }> {
|
|
||||||
return request('POST', `/sessions/${sessionId}/messages`, { content });
|
|
||||||
}
|
|
||||||
|
|
||||||
// WebSocket
|
|
||||||
export function createWebSocket(sessionId: string): WebSocket {
|
|
||||||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
||||||
const host = window.location.host;
|
|
||||||
return new WebSocket(`${protocol}//${host}/api/ws/${sessionId}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Files
|
|
||||||
export interface FileInfo {
|
|
||||||
name: string;
|
|
||||||
path: string;
|
|
||||||
type: 'file' | 'directory';
|
|
||||||
size: number;
|
|
||||||
modified: string;
|
|
||||||
extension?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface FileListResponse {
|
|
||||||
success: boolean;
|
|
||||||
data: {
|
|
||||||
path: string;
|
|
||||||
absolutePath: string;
|
|
||||||
parent: string | null;
|
|
||||||
files: FileInfo[];
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface FileReadResponse {
|
|
||||||
success: boolean;
|
|
||||||
data: {
|
|
||||||
path: string;
|
|
||||||
name: string;
|
|
||||||
type: string;
|
|
||||||
size: number;
|
|
||||||
modified: string;
|
|
||||||
content: string;
|
|
||||||
encoding: 'utf-8' | 'base64';
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface FileTreeNode {
|
|
||||||
name: string;
|
|
||||||
path: string;
|
|
||||||
type: 'file' | 'directory';
|
|
||||||
children?: FileTreeNode[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface FileTreeResponse {
|
|
||||||
success: boolean;
|
|
||||||
data: {
|
|
||||||
path: string;
|
|
||||||
tree: FileTreeNode[];
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getWorkingDirectory(): Promise<{ success: boolean; data: { workingDirectory: string; separator: string } }> {
|
|
||||||
return request('GET', '/files');
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function listFiles(path: string = '.', showHidden: boolean = false): Promise<FileListResponse> {
|
|
||||||
const params = new URLSearchParams({ path });
|
|
||||||
if (showHidden) params.set('hidden', 'true');
|
|
||||||
return request('GET', `/files/list?${params}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function readFile(path: string): Promise<FileReadResponse> {
|
|
||||||
return request('GET', `/files/read?path=${encodeURIComponent(path)}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getFileTree(path: string = '.', depth: number = 3): Promise<FileTreeResponse> {
|
|
||||||
const params = new URLSearchParams({ path, depth: String(depth) });
|
|
||||||
return request('GET', `/files/tree?${params}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Config
|
|
||||||
export interface ServerConfig {
|
|
||||||
model: string;
|
|
||||||
maxTokens: number;
|
|
||||||
temperature: number;
|
|
||||||
workdir: string;
|
|
||||||
allowedPaths: string[];
|
|
||||||
deniedPaths: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getConfig(): Promise<{ success: boolean; data: ServerConfig }> {
|
|
||||||
return request('GET', '/config');
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function updateConfig(config: Partial<ServerConfig>): Promise<{ success: boolean; data: ServerConfig }> {
|
|
||||||
return request('PATCH', '/config', config);
|
|
||||||
}
|
|
||||||
@@ -1,219 +0,0 @@
|
|||||||
/**
|
|
||||||
* 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;
|
|
||||||
onSessionNotFound?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ChatState {
|
|
||||||
messages: Message[];
|
|
||||||
isConnected: boolean;
|
|
||||||
isLoading: boolean;
|
|
||||||
streamingContent: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useChat({ sessionId, onError, onSessionNotFound }: UseChatOptions) {
|
|
||||||
const [state, setState] = useState<ChatState>({
|
|
||||||
messages: [],
|
|
||||||
isConnected: false,
|
|
||||||
isLoading: false,
|
|
||||||
streamingContent: '',
|
|
||||||
});
|
|
||||||
|
|
||||||
const wsRef = useRef<WebSocket | null>(null);
|
|
||||||
const reconnectTimeoutRef = useRef<NodeJS.Timeout>();
|
|
||||||
const reconnectAttemptsRef = useRef(0);
|
|
||||||
const maxReconnectAttempts = 5;
|
|
||||||
// 标记是否正在主动关闭连接（切换 session 时）
|
|
||||||
const isClosingRef = useRef(false);
|
|
||||||
|
|
||||||
// 用 ref 存储回调，避免依赖变化导致无限循环
|
|
||||||
const onErrorRef = useRef(onError);
|
|
||||||
const onSessionNotFoundRef = useRef(onSessionNotFound);
|
|
||||||
onErrorRef.current = onError;
|
|
||||||
onSessionNotFoundRef.current = onSessionNotFound;
|
|
||||||
|
|
||||||
// 加载历史消息
|
|
||||||
const loadMessages = useCallback(async () => {
|
|
||||||
try {
|
|
||||||
const { data } = await getMessages(sessionId);
|
|
||||||
setState((prev) => ({ ...prev, messages: data }));
|
|
||||||
} catch (error) {
|
|
||||||
// 会话不存在（404 或 "Session not found"），通知上层重新创建
|
|
||||||
const msg = error instanceof Error ? error.message : '';
|
|
||||||
if (msg.includes('404') || msg.toLowerCase().includes('not found')) {
|
|
||||||
onSessionNotFoundRef.current?.();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
onErrorRef.current?.(error instanceof Error ? error : new Error('Failed to load messages'));
|
|
||||||
}
|
|
||||||
}, [sessionId]);
|
|
||||||
|
|
||||||
// 连接 WebSocket
|
|
||||||
const connect = useCallback(() => {
|
|
||||||
// 如果正在关闭，不要连接
|
|
||||||
if (isClosingRef.current) return;
|
|
||||||
// 如果已经连接，不要重复连接
|
|
||||||
if (wsRef.current?.readyState === WebSocket.OPEN) return;
|
|
||||||
// 如果正在连接中，不要重复连接
|
|
||||||
if (wsRef.current?.readyState === WebSocket.CONNECTING) return;
|
|
||||||
|
|
||||||
const ws = createWebSocket(sessionId);
|
|
||||||
|
|
||||||
ws.onopen = () => {
|
|
||||||
reconnectAttemptsRef.current = 0; // 连接成功，重置重连次数
|
|
||||||
setState((prev) => ({ ...prev, isConnected: true }));
|
|
||||||
};
|
|
||||||
|
|
||||||
ws.onclose = () => {
|
|
||||||
setState((prev) => ({ ...prev, isConnected: false }));
|
|
||||||
// 主动关闭时不重连
|
|
||||||
if (isClosingRef.current) {
|
|
||||||
isClosingRef.current = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// 限制重连次数
|
|
||||||
if (reconnectAttemptsRef.current < maxReconnectAttempts) {
|
|
||||||
reconnectAttemptsRef.current++;
|
|
||||||
reconnectTimeoutRef.current = setTimeout(connect, 3000);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
ws.onerror = () => {
|
|
||||||
// 主动关闭时不报错
|
|
||||||
if (isClosingRef.current) return;
|
|
||||||
onErrorRef.current?.(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':
|
|
||||||
onErrorRef.current?.(new Error(message.payload?.message || 'Unknown error'));
|
|
||||||
setState((prev) => ({ ...prev, isLoading: false, streamingContent: '' }));
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// 忽略解析错误
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
wsRef.current = ws;
|
|
||||||
}, [sessionId]);
|
|
||||||
|
|
||||||
// 发送消息
|
|
||||||
const sendMessage = useCallback(
|
|
||||||
(content: string) => {
|
|
||||||
if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
|
|
||||||
onErrorRef.current?.(new Error('WebSocket not connected'));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setState((prev) => ({ ...prev, isLoading: true }));
|
|
||||||
|
|
||||||
wsRef.current.send(
|
|
||||||
JSON.stringify({
|
|
||||||
type: 'message',
|
|
||||||
sessionId,
|
|
||||||
payload: { content },
|
|
||||||
})
|
|
||||||
);
|
|
||||||
},
|
|
||||||
[sessionId]
|
|
||||||
);
|
|
||||||
|
|
||||||
// 取消处理
|
|
||||||
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(() => {
|
|
||||||
// 重置状态
|
|
||||||
isClosingRef.current = false;
|
|
||||||
setState({
|
|
||||||
messages: [],
|
|
||||||
isConnected: false,
|
|
||||||
isLoading: false,
|
|
||||||
streamingContent: '',
|
|
||||||
});
|
|
||||||
reconnectAttemptsRef.current = 0;
|
|
||||||
|
|
||||||
loadMessages();
|
|
||||||
connect();
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
clearTimeout(reconnectTimeoutRef.current);
|
|
||||||
// 标记为主动关闭，避免触发错误回调和重连
|
|
||||||
isClosingRef.current = true;
|
|
||||||
// 只关闭已建立的连接
|
|
||||||
if (wsRef.current) {
|
|
||||||
const ws = wsRef.current;
|
|
||||||
// 清除引用，防止后续操作
|
|
||||||
wsRef.current = null;
|
|
||||||
// 只有在 OPEN 或 CONNECTING 状态才关闭
|
|
||||||
if (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING) {
|
|
||||||
ws.close();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, [loadMessages, connect]);
|
|
||||||
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
sendMessage,
|
|
||||||
cancelProcessing,
|
|
||||||
reload: loadMessages,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -2,6 +2,7 @@ import React from 'react';
|
|||||||
import ReactDOM from 'react-dom/client';
|
import ReactDOM from 'react-dom/client';
|
||||||
import { App } from './App';
|
import { App } from './App';
|
||||||
import './styles/index.css';
|
import './styles/index.css';
|
||||||
|
import '@ai-assistant/ui/styles';
|
||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
|
|||||||
@@ -4,16 +4,21 @@
|
|||||||
|
|
||||||
import { useEffect, useRef } from 'react';
|
import { useEffect, useRef } from 'react';
|
||||||
import { Wifi, WifiOff } from 'lucide-react';
|
import { Wifi, WifiOff } from 'lucide-react';
|
||||||
import { useChat } from '../hooks/useChat';
|
import {
|
||||||
import { ChatMessage, StreamingMessage, TypingIndicator } from '../components/ChatMessage';
|
useChat,
|
||||||
import { ChatInput } from '../components/ChatInput';
|
ChatMessage,
|
||||||
|
StreamingMessage,
|
||||||
|
TypingIndicator,
|
||||||
|
ChatInput,
|
||||||
|
} from '@ai-assistant/ui';
|
||||||
|
|
||||||
interface ChatPageProps {
|
interface ChatPageProps {
|
||||||
sessionId: string;
|
sessionId: string;
|
||||||
onSessionNotFound?: () => void;
|
onSessionNotFound?: () => void;
|
||||||
|
responsive?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function ChatPage({ sessionId, onSessionNotFound }: ChatPageProps) {
|
export function ChatPage({ sessionId, onSessionNotFound, responsive = false }: ChatPageProps) {
|
||||||
const {
|
const {
|
||||||
messages,
|
messages,
|
||||||
isConnected,
|
isConnected,
|
||||||
@@ -86,6 +91,7 @@ export function ChatPage({ sessionId, onSessionNotFound }: ChatPageProps) {
|
|||||||
onCancel={cancelProcessing}
|
onCancel={cancelProcessing}
|
||||||
isLoading={isLoading}
|
isLoading={isLoading}
|
||||||
disabled={!isConnected}
|
disabled={!isConnected}
|
||||||
|
responsive={responsive}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,6 +1,10 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
export default {
|
export default {
|
||||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
content: [
|
||||||
|
'./index.html',
|
||||||
|
'./src/**/*.{js,ts,jsx,tsx}',
|
||||||
|
'../ui/src/**/*.{js,ts,jsx,tsx}',
|
||||||
|
],
|
||||||
darkMode: 'class',
|
darkMode: 'class',
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
|
|||||||
Generated
+46
-14
@@ -114,16 +114,19 @@ importers:
|
|||||||
version: 10.0.0
|
version: 10.0.0
|
||||||
'@vitest/coverage-v8':
|
'@vitest/coverage-v8':
|
||||||
specifier: ^4.0.15
|
specifier: ^4.0.15
|
||||||
version: 4.0.15(vitest@4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.19.2)(jiti@1.21.7)(yaml@2.8.2))
|
version: 4.0.15(vitest@4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2))
|
||||||
typescript:
|
typescript:
|
||||||
specifier: ^5.6.0
|
specifier: ^5.6.0
|
||||||
version: 5.9.3
|
version: 5.9.3
|
||||||
vitest:
|
vitest:
|
||||||
specifier: ^4.0.15
|
specifier: ^4.0.15
|
||||||
version: 4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.19.2)(jiti@1.21.7)(yaml@2.8.2)
|
version: 4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2)
|
||||||
|
|
||||||
packages/desktop:
|
packages/desktop:
|
||||||
dependencies:
|
dependencies:
|
||||||
|
'@ai-assistant/ui':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../ui
|
||||||
'@tauri-apps/api':
|
'@tauri-apps/api':
|
||||||
specifier: ^2.1.1
|
specifier: ^2.1.1
|
||||||
version: 2.9.1
|
version: 2.9.1
|
||||||
@@ -166,7 +169,7 @@ importers:
|
|||||||
version: 18.3.7(@types/react@18.3.27)
|
version: 18.3.7(@types/react@18.3.27)
|
||||||
'@vitejs/plugin-react':
|
'@vitejs/plugin-react':
|
||||||
specifier: ^4.2.1
|
specifier: ^4.2.1
|
||||||
version: 4.7.0(vite@5.4.21(@types/node@22.19.2))
|
version: 4.7.0(vite@5.4.21(@types/node@22.19.2)(terser@5.44.1))
|
||||||
autoprefixer:
|
autoprefixer:
|
||||||
specifier: ^10.4.18
|
specifier: ^10.4.18
|
||||||
version: 10.4.22(postcss@8.5.6)
|
version: 10.4.22(postcss@8.5.6)
|
||||||
@@ -212,10 +215,38 @@ importers:
|
|||||||
version: 5.9.3
|
version: 5.9.3
|
||||||
vitest:
|
vitest:
|
||||||
specifier: ^4.0.15
|
specifier: ^4.0.15
|
||||||
version: 4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.19.2)(jiti@1.21.7)(yaml@2.8.2)
|
version: 4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2)
|
||||||
|
|
||||||
|
packages/ui:
|
||||||
|
dependencies:
|
||||||
|
clsx:
|
||||||
|
specifier: ^2.1.0
|
||||||
|
version: 2.1.1
|
||||||
|
lucide-react:
|
||||||
|
specifier: ^0.344.0
|
||||||
|
version: 0.344.0(react@18.3.1)
|
||||||
|
react:
|
||||||
|
specifier: ^18.0.0
|
||||||
|
version: 18.3.1
|
||||||
|
react-dom:
|
||||||
|
specifier: ^18.0.0
|
||||||
|
version: 18.3.1(react@18.3.1)
|
||||||
|
devDependencies:
|
||||||
|
'@types/react':
|
||||||
|
specifier: ^18.3.0
|
||||||
|
version: 18.3.27
|
||||||
|
'@types/react-dom':
|
||||||
|
specifier: ^18.3.0
|
||||||
|
version: 18.3.7(@types/react@18.3.27)
|
||||||
|
typescript:
|
||||||
|
specifier: ^5.3.3
|
||||||
|
version: 5.9.3
|
||||||
|
|
||||||
packages/web:
|
packages/web:
|
||||||
dependencies:
|
dependencies:
|
||||||
|
'@ai-assistant/ui':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../ui
|
||||||
clsx:
|
clsx:
|
||||||
specifier: ^2.1.0
|
specifier: ^2.1.0
|
||||||
version: 2.1.1
|
version: 2.1.1
|
||||||
@@ -243,7 +274,7 @@ importers:
|
|||||||
version: 18.3.7(@types/react@18.3.27)
|
version: 18.3.7(@types/react@18.3.27)
|
||||||
'@vitejs/plugin-react':
|
'@vitejs/plugin-react':
|
||||||
specifier: ^4.2.1
|
specifier: ^4.2.1
|
||||||
version: 4.7.0(vite@5.4.21(@types/node@22.19.2))
|
version: 4.7.0(vite@5.4.21(@types/node@22.19.2)(terser@5.44.1))
|
||||||
autoprefixer:
|
autoprefixer:
|
||||||
specifier: ^10.4.18
|
specifier: ^10.4.18
|
||||||
version: 10.4.22(postcss@8.5.6)
|
version: 10.4.22(postcss@8.5.6)
|
||||||
@@ -4520,7 +4551,7 @@ snapshots:
|
|||||||
|
|
||||||
'@vercel/oidc@3.0.5': {}
|
'@vercel/oidc@3.0.5': {}
|
||||||
|
|
||||||
'@vitejs/plugin-react@4.7.0(vite@5.4.21(@types/node@22.19.2))':
|
'@vitejs/plugin-react@4.7.0(vite@5.4.21(@types/node@22.19.2)(terser@5.44.1))':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/core': 7.28.5
|
'@babel/core': 7.28.5
|
||||||
'@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.5)
|
'@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.5)
|
||||||
@@ -4532,7 +4563,7 @@ snapshots:
|
|||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
|
|
||||||
'@vitest/coverage-v8@4.0.15(vitest@4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.19.2)(jiti@1.21.7)(yaml@2.8.2))':
|
'@vitest/coverage-v8@4.0.15(vitest@4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2))':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@bcoe/v8-coverage': 1.0.2
|
'@bcoe/v8-coverage': 1.0.2
|
||||||
'@vitest/utils': 4.0.15
|
'@vitest/utils': 4.0.15
|
||||||
@@ -4545,7 +4576,7 @@ snapshots:
|
|||||||
obug: 2.1.1
|
obug: 2.1.1
|
||||||
std-env: 3.10.0
|
std-env: 3.10.0
|
||||||
tinyrainbow: 3.0.3
|
tinyrainbow: 3.0.3
|
||||||
vitest: 4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.19.2)(jiti@1.21.7)(yaml@2.8.2)
|
vitest: 4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2)
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
|
|
||||||
@@ -4558,13 +4589,13 @@ snapshots:
|
|||||||
chai: 6.2.1
|
chai: 6.2.1
|
||||||
tinyrainbow: 3.0.3
|
tinyrainbow: 3.0.3
|
||||||
|
|
||||||
'@vitest/mocker@4.0.15(vite@7.2.7(@types/node@22.19.2)(jiti@1.21.7)(yaml@2.8.2))':
|
'@vitest/mocker@4.0.15(vite@7.2.7(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2))':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@vitest/spy': 4.0.15
|
'@vitest/spy': 4.0.15
|
||||||
estree-walker: 3.0.3
|
estree-walker: 3.0.3
|
||||||
magic-string: 0.30.21
|
magic-string: 0.30.21
|
||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
vite: 7.2.7(@types/node@22.19.2)(jiti@1.21.7)(yaml@2.8.2)
|
vite: 7.2.7(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2)
|
||||||
|
|
||||||
'@vitest/pretty-format@4.0.15':
|
'@vitest/pretty-format@4.0.15':
|
||||||
dependencies:
|
dependencies:
|
||||||
@@ -6254,7 +6285,7 @@ snapshots:
|
|||||||
fsevents: 2.3.3
|
fsevents: 2.3.3
|
||||||
terser: 5.44.1
|
terser: 5.44.1
|
||||||
|
|
||||||
vite@7.2.7(@types/node@22.19.2)(jiti@1.21.7)(yaml@2.8.2):
|
vite@7.2.7(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2):
|
||||||
dependencies:
|
dependencies:
|
||||||
esbuild: 0.25.12
|
esbuild: 0.25.12
|
||||||
fdir: 6.5.0(picomatch@4.0.3)
|
fdir: 6.5.0(picomatch@4.0.3)
|
||||||
@@ -6266,12 +6297,13 @@ snapshots:
|
|||||||
'@types/node': 22.19.2
|
'@types/node': 22.19.2
|
||||||
fsevents: 2.3.3
|
fsevents: 2.3.3
|
||||||
jiti: 1.21.7
|
jiti: 1.21.7
|
||||||
|
terser: 5.44.1
|
||||||
yaml: 2.8.2
|
yaml: 2.8.2
|
||||||
|
|
||||||
vitest@4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.19.2)(jiti@1.21.7)(yaml@2.8.2):
|
vitest@4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2):
|
||||||
dependencies:
|
dependencies:
|
||||||
'@vitest/expect': 4.0.15
|
'@vitest/expect': 4.0.15
|
||||||
'@vitest/mocker': 4.0.15(vite@7.2.7(@types/node@22.19.2)(jiti@1.21.7)(yaml@2.8.2))
|
'@vitest/mocker': 4.0.15(vite@7.2.7(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2))
|
||||||
'@vitest/pretty-format': 4.0.15
|
'@vitest/pretty-format': 4.0.15
|
||||||
'@vitest/runner': 4.0.15
|
'@vitest/runner': 4.0.15
|
||||||
'@vitest/snapshot': 4.0.15
|
'@vitest/snapshot': 4.0.15
|
||||||
@@ -6288,7 +6320,7 @@ snapshots:
|
|||||||
tinyexec: 1.0.2
|
tinyexec: 1.0.2
|
||||||
tinyglobby: 0.2.15
|
tinyglobby: 0.2.15
|
||||||
tinyrainbow: 3.0.3
|
tinyrainbow: 3.0.3
|
||||||
vite: 7.2.7(@types/node@22.19.2)(jiti@1.21.7)(yaml@2.8.2)
|
vite: 7.2.7(@types/node@22.19.2)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2)
|
||||||
why-is-node-running: 2.3.0
|
why-is-node-running: 2.3.0
|
||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
'@opentelemetry/api': 1.9.0
|
'@opentelemetry/api': 1.9.0
|
||||||
|
|||||||
Reference in New Issue
Block a user