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:
@@ -0,0 +1,118 @@
|
||||
/**
|
||||
* Chat Input Component
|
||||
*
|
||||
* 支持响应式：responsive=true 时适配移动端键盘和触摸操作
|
||||
*/
|
||||
|
||||
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;
|
||||
/** 是否启用响应式布局（移动端适配） */
|
||||
responsive?: boolean;
|
||||
}
|
||||
|
||||
export function ChatInput({
|
||||
onSend,
|
||||
onCancel,
|
||||
isLoading,
|
||||
disabled,
|
||||
responsive = false,
|
||||
}: ChatInputProps) {
|
||||
const [input, setInput] = useState('');
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
// 自动调整高度
|
||||
useEffect(() => {
|
||||
const textarea = textareaRef.current;
|
||||
if (textarea) {
|
||||
textarea.style.height = 'auto';
|
||||
// 响应式模式下移动端最大高度稍小
|
||||
const maxHeight = responsive && window.innerWidth < 768 ? 120 : 200;
|
||||
textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
|
||||
}
|
||||
}, [input, responsive]);
|
||||
|
||||
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) => {
|
||||
// Enter 发送，Shift+Enter 换行
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSubmit();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<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="flex-1 relative">
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={
|
||||
responsive
|
||||
? 'Type a message...'
|
||||
: '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',
|
||||
responsive ? 'px-3 py-2.5 md:px-4 md:py-3' : 'px-4 py-3',
|
||||
responsive ? 'text-base md:text-sm' : 'text-sm', // 移动端使用 16px 防止缩放
|
||||
'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(
|
||||
'rounded-lg flex items-center justify-center transition-colors',
|
||||
responsive
|
||||
? 'px-3 py-2.5 md:px-4 md:py-3 min-w-[44px] min-h-[44px]' // 最小触摸目标 44x44
|
||||
: 'px-4 py-3',
|
||||
isLoading
|
||||
? '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',
|
||||
'disabled:opacity-50 disabled:cursor-not-allowed'
|
||||
)}
|
||||
>
|
||||
{isLoading ? <Square size={20} /> : <Send size={20} />}
|
||||
</button>
|
||||
</div>
|
||||
{/* 响应式模式下桌面端显示提示文字 */}
|
||||
{responsive && (
|
||||
<p className="hidden md:block text-xs text-gray-500 text-center mt-2">
|
||||
Press Enter to send, Shift+Enter for new line
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
/**
|
||||
* Chat Message Component
|
||||
*/
|
||||
|
||||
import { User, Bot } from 'lucide-react';
|
||||
import clsx from 'clsx';
|
||||
import type { Message } from '../api/client.js';
|
||||
|
||||
interface ChatMessageProps {
|
||||
message: Message;
|
||||
}
|
||||
|
||||
export function ChatMessage({ message }: ChatMessageProps) {
|
||||
const isUser = message.role === 'user';
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
'flex gap-4 p-4 rounded-lg',
|
||||
isUser ? 'bg-gray-800' : 'bg-gray-850'
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
'w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0',
|
||||
isUser ? 'bg-primary-600' : 'bg-green-600'
|
||||
)}
|
||||
>
|
||||
{isUser ? <User size={18} /> : <Bot size={18} />}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm text-gray-400 mb-1">
|
||||
{isUser ? 'You' : 'AI Assistant'}
|
||||
</div>
|
||||
<div className="message-content whitespace-pre-wrap break-words">
|
||||
{message.content}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface StreamingMessageProps {
|
||||
content: string;
|
||||
}
|
||||
|
||||
export function StreamingMessage({ content }: StreamingMessageProps) {
|
||||
return (
|
||||
<div className="flex gap-4 p-4 rounded-lg bg-gray-850">
|
||||
<div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 bg-green-600">
|
||||
<Bot size={18} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm text-gray-400 mb-1">AI Assistant</div>
|
||||
<div className="message-content whitespace-pre-wrap break-words">
|
||||
{content}
|
||||
<span className="inline-block w-2 h-4 bg-gray-400 animate-pulse ml-1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function TypingIndicator() {
|
||||
return (
|
||||
<div className="flex gap-4 p-4 rounded-lg bg-gray-850">
|
||||
<div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 bg-green-600">
|
||||
<Bot size={18} />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="text-sm text-gray-400 mb-1">AI Assistant</div>
|
||||
<div className="typing-indicator">
|
||||
<span />
|
||||
<span />
|
||||
<span />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,327 @@
|
||||
/**
|
||||
* ConfigPanel Component
|
||||
*
|
||||
* 支持响应式：responsive=true 时移动端全屏显示，桌面端居中弹窗
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import clsx from 'clsx';
|
||||
import { getConfig, updateConfig, type ServerConfig } from '../api/client.js';
|
||||
|
||||
interface ConfigPanelProps {
|
||||
onClose: () => void;
|
||||
/** 是否启用响应式布局（移动端全屏面板） */
|
||||
responsive?: boolean;
|
||||
}
|
||||
|
||||
// 可用的模型列表
|
||||
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, responsive = false }: 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={clsx(
|
||||
'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 */}
|
||||
<div
|
||||
className={clsx(
|
||||
'sticky top-0 flex items-center justify-between border-b border-gray-700 bg-gray-800 z-10',
|
||||
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
|
||||
onClick={onClose}
|
||||
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">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className={clsx('space-y-6', responsive ? 'p-4 md:p-6' : 'p-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={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) => (
|
||||
<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.toLocaleString()}
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
min="1024"
|
||||
max="32768"
|
||||
step="1024"
|
||||
value={formData.maxTokens}
|
||||
onChange={(e) => setFormData({ ...formData, maxTokens: parseInt(e.target.value) })}
|
||||
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">
|
||||
<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={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">
|
||||
<span>{responsive ? 'Precise' : 'Precise (0)'}</span>
|
||||
<span>{responsive ? 'Balanced' : 'Balanced (0.5)'}</span>
|
||||
<span>{responsive ? 'Creative' : '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={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"
|
||||
/>
|
||||
<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={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={clsx('text-gray-300', responsive ? 'md:ml-2' : 'ml-2')}>
|
||||
{config.allowedPaths.length || 'All'}
|
||||
</span>
|
||||
</div>
|
||||
<div className={responsive ? 'flex justify-between md:block' : ''}>
|
||||
<span className="text-gray-500">Denied Paths:</span>
|
||||
<span className={clsx('text-gray-300', responsive ? 'md:ml-2' : 'ml-2')}>
|
||||
{config.deniedPaths.length || 'None'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<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
|
||||
onClick={handleReset}
|
||||
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
|
||||
</button>
|
||||
<button
|
||||
onClick={onClose}
|
||||
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
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
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'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,236 @@
|
||||
/**
|
||||
* FileBrowser Component
|
||||
*
|
||||
* 文件浏览器组件
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { listFiles, readFile, type FileInfo } from '../api/client.js';
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,244 @@
|
||||
/**
|
||||
* Sidebar Component
|
||||
*
|
||||
* 支持响应式：responsive=true 时桌面端固定显示，移动端抽屉式菜单
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Plus, MessageSquare, Trash2, RefreshCw, Menu, X } from 'lucide-react';
|
||||
import clsx from 'clsx';
|
||||
import { listSessions, createSession, deleteSession, type Session } from '../api/client.js';
|
||||
|
||||
interface SidebarProps {
|
||||
currentSessionId: string | null;
|
||||
onSelectSession: (id: string) => void;
|
||||
onCreateSession: (session: Session) => void;
|
||||
/** 是否启用响应式布局（移动端抽屉式菜单） */
|
||||
responsive?: boolean;
|
||||
}
|
||||
|
||||
export function Sidebar({
|
||||
currentSessionId,
|
||||
onSelectSession,
|
||||
onCreateSession,
|
||||
responsive = false,
|
||||
}: SidebarProps) {
|
||||
const [sessions, setSessions] = useState<Session[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isOpen, setIsOpen] = 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);
|
||||
if (responsive) setIsOpen(false); // 响应式模式下创建后关闭侧边栏
|
||||
} 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);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectSession = (id: string) => {
|
||||
onSelectSession(id);
|
||||
if (responsive) setIsOpen(false); // 响应式模式下选择后关闭侧边栏
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadSessions();
|
||||
}, []);
|
||||
|
||||
// 点击遮罩层关闭
|
||||
const handleOverlayClick = () => {
|
||||
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 (
|
||||
<>
|
||||
{/* 移动端菜单按钮 */}
|
||||
<button
|
||||
onClick={() => setIsOpen(true)}
|
||||
className="fixed top-3 left-3 z-40 p-2 rounded-lg bg-gray-800 text-gray-300 hover:bg-gray-700 transition-colors md:hidden"
|
||||
aria-label="Open menu"
|
||||
>
|
||||
<Menu size={20} />
|
||||
</button>
|
||||
|
||||
{/* 遮罩层 - 仅移动端 */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 z-40 md:hidden"
|
||||
onClick={handleOverlayClick}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 侧边栏 */}
|
||||
<div
|
||||
className={clsx(
|
||||
'fixed md:static inset-y-0 left-0 z-50',
|
||||
'w-64 bg-gray-800 border-r border-gray-700 flex flex-col',
|
||||
'transform transition-transform duration-300 ease-in-out',
|
||||
'md:transform-none',
|
||||
isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
|
||||
)}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="p-4 border-b border-gray-700">
|
||||
<div className="flex items-center justify-between mb-3 md:hidden">
|
||||
<span className="text-lg font-semibold">Sessions</span>
|
||||
<button
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="p-1 hover:bg-gray-700 rounded transition-colors"
|
||||
aria-label="Close menu"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
<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={() => handleSelectSession(session.id)}
|
||||
className={clsx(
|
||||
'flex items-center gap-2 p-3 rounded-lg cursor-pointer group',
|
||||
'hover:bg-gray-700 transition-colors',
|
||||
'active:bg-gray-600', // 触摸反馈
|
||||
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 md:opacity-0"
|
||||
aria-label="Delete session"
|
||||
>
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user