feat(ui): 集成 shadcn/ui 原语、Framer Motion 动画和 Sonner Toast
- 添加 shadcn/ui 风格原语组件 (Button, Input, Dialog, Select, Slider, Switch, Tooltip) - 集成 Framer Motion 动画库，添加动画预设 - 集成 Sonner Toast 通知系统 - 改造 ChatMessage 添加淡入动画和复制按钮 - 改造 Sidebar 添加动画、空状态引导和骨架屏 - 改造 ConfigPanel 使用新原语组件 - 优化 Chat 页面空状态和连接状态指示器 - 添加 tailwindcss-animate 插件
This commit is contained in:
@@ -18,12 +18,13 @@
|
||||
"@tauri-apps/plugin-dialog": "^2.2.0",
|
||||
"@tauri-apps/plugin-fs": "^2.2.0",
|
||||
"@tauri-apps/plugin-shell": "^2.2.0",
|
||||
"clsx": "^2.1.0",
|
||||
"framer-motion": "^12.23.26",
|
||||
"lucide-react": "^0.344.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.22.0",
|
||||
"zustand": "^4.5.0",
|
||||
"lucide-react": "^0.344.0",
|
||||
"clsx": "^2.1.0"
|
||||
"zustand": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tauri-apps/cli": "^2.1.0",
|
||||
|
||||
@@ -7,6 +7,7 @@ import {
|
||||
Sidebar,
|
||||
FileBrowser,
|
||||
ConfigPanel,
|
||||
Toaster,
|
||||
listSessions,
|
||||
createSession,
|
||||
type Session,
|
||||
@@ -102,6 +103,9 @@ export function App() {
|
||||
|
||||
{/* 配置面板 */}
|
||||
{showConfig && <ConfigPanel onClose={() => setShowConfig(false)} />}
|
||||
|
||||
{/* Toast 通知 */}
|
||||
<Toaster />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,8 @@
|
||||
*/
|
||||
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { Wifi, WifiOff } from 'lucide-react';
|
||||
import { WifiOff, MessageSquare, Settings, FolderOpen } from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
useChat,
|
||||
ChatMessage,
|
||||
@@ -47,6 +48,66 @@ export function ChatPage({
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, [messages, streamingContent]);
|
||||
|
||||
// 空状态组件
|
||||
const EmptyState = () => (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="text-center py-20"
|
||||
>
|
||||
<div className="w-16 h-16 mx-auto mb-6 rounded-full bg-gradient-to-br from-primary-500/20 to-primary-600/20 flex items-center justify-center">
|
||||
<MessageSquare size={32} className="text-primary-400" />
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl font-semibold mb-2 bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
|
||||
Start a conversation
|
||||
</h2>
|
||||
|
||||
<p className="text-gray-400 mb-6 max-w-md mx-auto">
|
||||
Ask me anything about coding, debugging, or software development.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-2">
|
||||
{['Help me debug this code', 'Explain this function', 'Write a test'].map((suggestion) => (
|
||||
<motion.button
|
||||
key={suggestion}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
onClick={() => sendMessage(suggestion)}
|
||||
className="px-3 py-1.5 bg-gray-800 hover:bg-gray-700 rounded-full text-sm text-gray-300 transition-colors"
|
||||
>
|
||||
"{suggestion}"
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
// 连接状态指示器
|
||||
const ConnectionStatus = () => (
|
||||
<div className="flex items-center gap-1.5 text-sm">
|
||||
{isConnected ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="flex items-center gap-1.5"
|
||||
>
|
||||
<span className="relative flex h-2.5 w-2.5">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
|
||||
<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500" />
|
||||
</span>
|
||||
<span className="text-green-400">Connected</span>
|
||||
</motion.div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1.5 text-red-400">
|
||||
<WifiOff size={16} />
|
||||
<span>Disconnected</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex flex-col h-screen">
|
||||
{/* Header */}
|
||||
@@ -54,50 +115,29 @@ export function ChatPage({
|
||||
<h1 className="text-lg font-medium">Chat</h1>
|
||||
<div className="flex items-center gap-3">
|
||||
{/* 连接状态 */}
|
||||
<div className="flex items-center gap-1.5 text-sm">
|
||||
{isConnected ? (
|
||||
<>
|
||||
<Wifi size={16} className="text-green-500" />
|
||||
<span className="text-green-500">Connected</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<WifiOff size={16} className="text-red-500" />
|
||||
<span className="text-red-500">Disconnected</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<ConnectionStatus />
|
||||
|
||||
{/* 工具栏按钮 */}
|
||||
{(onOpenConfig || onToggleFileBrowser) && (
|
||||
<div className="flex items-center gap-1.5 border-l border-gray-600 pl-3">
|
||||
{/* 配置按钮 */}
|
||||
{onOpenConfig && (
|
||||
<button
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
onClick={onOpenConfig}
|
||||
className="p-1.5 rounded-lg text-gray-400 hover:text-gray-200 hover:bg-gray-700 transition-colors"
|
||||
title="Settings"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
|
||||
/>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<Settings size={20} />
|
||||
</motion.button>
|
||||
)}
|
||||
|
||||
{/* 文件浏览器按钮 */}
|
||||
{onToggleFileBrowser && (
|
||||
<button
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
onClick={onToggleFileBrowser}
|
||||
className={`p-1.5 rounded-lg transition-colors ${
|
||||
showFileBrowser
|
||||
@@ -106,15 +146,8 @@ export function ChatPage({
|
||||
}`}
|
||||
title={showFileBrowser ? 'Hide Files' : 'Show Files'}
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<FolderOpen size={20} />
|
||||
</motion.button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@@ -124,18 +157,13 @@ export function ChatPage({
|
||||
{/* Messages */}
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
<div className="max-w-4xl mx-auto space-y-4">
|
||||
{messages.length === 0 && !isLoading && (
|
||||
<div className="text-center py-20">
|
||||
<h2 className="text-2xl font-semibold mb-2">Start a conversation</h2>
|
||||
<p className="text-gray-400">
|
||||
Type a message below to begin chatting with your AI assistant.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{messages.length === 0 && !isLoading && <EmptyState />}
|
||||
|
||||
{messages.map((message) => (
|
||||
<ChatMessage key={message.id} message={message} />
|
||||
))}
|
||||
<AnimatePresence mode="popLayout">
|
||||
{messages.map((message) => (
|
||||
<ChatMessage key={message.id} message={message} />
|
||||
))}
|
||||
</AnimatePresence>
|
||||
|
||||
{streamingContent && <StreamingMessage content={streamingContent} />}
|
||||
|
||||
|
||||
@@ -23,7 +23,21 @@ export default {
|
||||
950: '#082f49',
|
||||
},
|
||||
},
|
||||
keyframes: {
|
||||
'accordion-down': {
|
||||
from: { height: '0' },
|
||||
to: { height: 'var(--radix-accordion-content-height)' },
|
||||
},
|
||||
'accordion-up': {
|
||||
from: { height: 'var(--radix-accordion-content-height)' },
|
||||
to: { height: '0' },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
'accordion-down': 'accordion-down 0.2s ease-out',
|
||||
'accordion-up': 'accordion-up 0.2s ease-out',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
plugins: [require('tailwindcss-animate')],
|
||||
};
|
||||
|
||||
@@ -22,12 +22,24 @@
|
||||
"react-dom": "^18.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"clsx": "^2.1.0",
|
||||
"lucide-react": "^0.344.0"
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
"@radix-ui/react-popover": "^1.1.15",
|
||||
"@radix-ui/react-select": "^2.2.6",
|
||||
"@radix-ui/react-slider": "^1.3.6",
|
||||
"@radix-ui/react-switch": "^1.2.6",
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"framer-motion": "^12.23.26",
|
||||
"lucide-react": "^0.344.0",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^3.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.0",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"typescript": "^5.3.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,8 +2,11 @@
|
||||
* Chat Message Component
|
||||
*/
|
||||
|
||||
import { User, Bot } from 'lucide-react';
|
||||
import clsx from 'clsx';
|
||||
import { User, Bot, Copy, Check } from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useState } from 'react';
|
||||
import { cn } from '../utils/cn';
|
||||
import { fadeInUp, smoothTransition } from '../utils/animations';
|
||||
import type { Message } from '../api/client.js';
|
||||
|
||||
interface ChatMessageProps {
|
||||
@@ -12,16 +15,28 @@ interface ChatMessageProps {
|
||||
|
||||
export function ChatMessage({ message }: ChatMessageProps) {
|
||||
const isUser = message.role === 'user';
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const handleCopy = async () => {
|
||||
await navigator.clipboard.writeText(message.content);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
'flex gap-4 p-4 rounded-lg',
|
||||
isUser ? 'bg-gray-800' : 'bg-gray-850'
|
||||
<motion.div
|
||||
variants={fadeInUp}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
transition={smoothTransition}
|
||||
className={cn(
|
||||
'group flex gap-4 p-4 rounded-lg',
|
||||
isUser ? 'bg-gray-800' : 'bg-gray-800/50'
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
className={cn(
|
||||
'w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0',
|
||||
isUser ? 'bg-primary-600' : 'bg-green-600'
|
||||
)}
|
||||
@@ -29,14 +44,23 @@ export function ChatMessage({ message }: ChatMessageProps) {
|
||||
{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 className="flex items-center justify-between mb-1">
|
||||
<span className="text-sm text-gray-400">
|
||||
{isUser ? 'You' : 'AI Assistant'}
|
||||
</span>
|
||||
<button
|
||||
onClick={handleCopy}
|
||||
className="opacity-0 group-hover:opacity-100 p-1 rounded text-gray-500 hover:text-gray-300 hover:bg-gray-700 transition-all"
|
||||
title="Copy message"
|
||||
>
|
||||
{copied ? <Check size={14} className="text-green-500" /> : <Copy size={14} />}
|
||||
</button>
|
||||
</div>
|
||||
<div className="message-content whitespace-pre-wrap break-words">
|
||||
{message.content}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -46,7 +70,12 @@ interface StreamingMessageProps {
|
||||
|
||||
export function StreamingMessage({ content }: StreamingMessageProps) {
|
||||
return (
|
||||
<div className="flex gap-4 p-4 rounded-lg bg-gray-850">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={smoothTransition}
|
||||
className="flex gap-4 p-4 rounded-lg bg-gray-800/50"
|
||||
>
|
||||
<div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 bg-green-600">
|
||||
<Bot size={18} />
|
||||
</div>
|
||||
@@ -54,27 +83,45 @@ export function StreamingMessage({ content }: StreamingMessageProps) {
|
||||
<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" />
|
||||
<motion.span
|
||||
animate={{ opacity: [1, 0] }}
|
||||
transition={{ duration: 0.8, repeat: Infinity, repeatType: 'reverse' }}
|
||||
className="inline-block w-2 h-4 bg-primary-400 ml-1 rounded-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export function TypingIndicator() {
|
||||
return (
|
||||
<div className="flex gap-4 p-4 rounded-lg bg-gray-850">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={smoothTransition}
|
||||
className="flex gap-4 p-4 rounded-lg bg-gray-800/50"
|
||||
>
|
||||
<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 className="flex items-center gap-1 h-6">
|
||||
{[0, 1, 2].map((i) => (
|
||||
<motion.span
|
||||
key={i}
|
||||
animate={{ y: [0, -4, 0] }}
|
||||
transition={{
|
||||
duration: 0.6,
|
||||
repeat: Infinity,
|
||||
delay: i * 0.15,
|
||||
}}
|
||||
className="w-2 h-2 rounded-full bg-gray-400"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,7 +5,16 @@
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import clsx from 'clsx';
|
||||
import { X } from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { toast } from 'sonner';
|
||||
import { cn } from '../utils/cn';
|
||||
import { modalOverlay, modalContent, smoothTransition } from '../utils/animations';
|
||||
import { Button } from '../primitives/Button';
|
||||
import { Input } from '../primitives/Input';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../primitives/Select';
|
||||
import { Slider } from '../primitives/Slider';
|
||||
import { Skeleton } from './Skeleton';
|
||||
import { getConfig, updateConfig, type ServerConfig } from '../api/client.js';
|
||||
|
||||
interface ConfigPanelProps {
|
||||
@@ -22,12 +31,17 @@ const AVAILABLE_MODELS = [
|
||||
{ id: 'claude-3-haiku-20240307', name: 'Claude 3 Haiku' },
|
||||
];
|
||||
|
||||
// Temperature 语义标签
|
||||
function getTemperatureLabel(value: number): string {
|
||||
if (value <= 0.3) return 'Precise';
|
||||
if (value <= 0.7) return 'Balanced';
|
||||
return 'Creative';
|
||||
}
|
||||
|
||||
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({
|
||||
@@ -50,7 +64,7 @@ export function ConfigPanel({ onClose, responsive = false }: ConfigPanelProps) {
|
||||
workdir: response.data.workdir,
|
||||
});
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load config');
|
||||
toast.error(err instanceof Error ? err.message : 'Failed to load config');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -61,16 +75,13 @@ export function ConfigPanel({ onClose, responsive = false }: ConfigPanelProps) {
|
||||
// 保存配置
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
setSuccess(false);
|
||||
|
||||
try {
|
||||
const response = await updateConfig(formData);
|
||||
setConfig(response.data);
|
||||
setSuccess(true);
|
||||
setTimeout(() => setSuccess(false), 2000);
|
||||
toast.success('Settings saved');
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to save config');
|
||||
toast.error(err instanceof Error ? err.message : 'Failed to save config');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
@@ -85,243 +96,238 @@ export function ConfigPanel({ onClose, responsive = false }: ConfigPanelProps) {
|
||||
temperature: config.temperature,
|
||||
workdir: config.workdir,
|
||||
});
|
||||
toast.info('Settings reset');
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
// Loading 骨架屏
|
||||
const LoadingSkeleton = () => (
|
||||
<div className="space-y-6 p-6">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="space-y-2">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-10 w-full" />
|
||||
</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>
|
||||
);
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
<motion.div
|
||||
variants={modalOverlay}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
transition={{ duration: 0.2 }}
|
||||
className={cn(
|
||||
'fixed inset-0 bg-black/50 flex z-50',
|
||||
responsive ? 'items-end md:items-center justify-center' : 'items-center justify-center'
|
||||
)}
|
||||
onClick={onClose}
|
||||
>
|
||||
<motion.div
|
||||
variants={modalContent}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
transition={smoothTransition}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className={cn(
|
||||
'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={cn(
|
||||
'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={cn('text-lg font-semibold', responsive && 'mt-2 md:mt-0')}>
|
||||
Settings
|
||||
</h2>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={onClose}
|
||||
className={cn(
|
||||
responsive && 'min-w-[44px] min-h-[44px]'
|
||||
)}
|
||||
>
|
||||
<X size={20} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
{loading ? (
|
||||
<LoadingSkeleton />
|
||||
) : (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className={cn('space-y-6', responsive ? 'p-4 md:p-6' : 'p-6')}
|
||||
>
|
||||
{/* Model */}
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-gray-300">Model</label>
|
||||
<Select
|
||||
value={formData.model}
|
||||
onValueChange={(value) => setFormData({ ...formData, model: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a model" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{AVAILABLE_MODELS.map((model) => (
|
||||
<SelectItem key={model.id} value={model.id}>
|
||||
{model.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-xs text-gray-500">
|
||||
Select the AI model to use for conversations
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Max Tokens */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-sm font-medium text-gray-300">Max Tokens</label>
|
||||
<span className="text-sm text-primary-400 font-medium">
|
||||
{formData.maxTokens.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
<Slider
|
||||
min={1024}
|
||||
max={32768}
|
||||
step={1024}
|
||||
value={[formData.maxTokens]}
|
||||
onValueChange={(value) => setFormData({ ...formData, maxTokens: value[0] })}
|
||||
/>
|
||||
<div className="flex justify-between text-xs text-gray-500">
|
||||
<span>1K</span>
|
||||
<span>8K</span>
|
||||
<span>16K</span>
|
||||
<span>32K</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">
|
||||
Maximum number of tokens in the response
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Temperature */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-sm font-medium text-gray-300">Temperature</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-gray-400">{getTemperatureLabel(formData.temperature)}</span>
|
||||
<span className="text-sm text-primary-400 font-medium">
|
||||
{formData.temperature.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Slider
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.05}
|
||||
value={[formData.temperature]}
|
||||
onValueChange={(value) => setFormData({ ...formData, temperature: value[0] })}
|
||||
/>
|
||||
<div className="flex justify-between text-xs text-gray-500">
|
||||
<span>Precise</span>
|
||||
<span>Balanced</span>
|
||||
<span>Creative</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">Controls randomness in responses</p>
|
||||
</div>
|
||||
|
||||
{/* Working Directory */}
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-gray-300">Working Directory</label>
|
||||
<Input
|
||||
value={formData.workdir}
|
||||
onChange={(e) => setFormData({ ...formData, workdir: e.target.value })}
|
||||
className="font-mono"
|
||||
placeholder="/path/to/project"
|
||||
/>
|
||||
<p className="text-xs text-gray-500">Root directory for file operations</p>
|
||||
</div>
|
||||
|
||||
{/* Server Info */}
|
||||
{config && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="pt-4 border-t border-gray-700"
|
||||
>
|
||||
<h3 className="text-sm font-medium text-gray-400 mb-3">Server Information</h3>
|
||||
<div
|
||||
className={cn(
|
||||
'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={cn('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={cn('text-gray-300', responsive ? 'md:ml-2' : 'ml-2')}>
|
||||
{config.deniedPaths.length || 'None'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Footer */}
|
||||
<div
|
||||
className={cn(
|
||||
'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
|
||||
variant="ghost"
|
||||
onClick={handleReset}
|
||||
className={cn(responsive && 'justify-center')}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={onClose}
|
||||
className={cn(responsive && 'justify-center')}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={saving || loading}
|
||||
className={cn(responsive && 'justify-center')}
|
||||
>
|
||||
{saving ? 'Saving...' : 'Save Changes'}
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,9 +5,13 @@
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Plus, MessageSquare, Trash2, RefreshCw, Menu, X } from 'lucide-react';
|
||||
import clsx from 'clsx';
|
||||
import { Plus, MessageSquare, Trash2, Menu, X, MessageCircle } from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { toast } from 'sonner';
|
||||
import { cn } from '../utils/cn';
|
||||
import { fadeInUp, smoothTransition } from '../utils/animations';
|
||||
import { listSessions, createSession, deleteSession, type Session } from '../api/client.js';
|
||||
import { SessionSkeleton } from './Skeleton';
|
||||
|
||||
interface SidebarProps {
|
||||
currentSessionId: string | null;
|
||||
@@ -34,6 +38,7 @@ export function Sidebar({
|
||||
setSessions(data);
|
||||
} catch (error) {
|
||||
console.error('Failed to load sessions:', error);
|
||||
toast.error('Failed to load sessions');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
@@ -44,9 +49,11 @@ export function Sidebar({
|
||||
const { data } = await createSession();
|
||||
setSessions((prev) => [data, ...prev]);
|
||||
onCreateSession(data);
|
||||
if (responsive) setIsOpen(false); // 响应式模式下创建后关闭侧边栏
|
||||
toast.success('Session created');
|
||||
if (responsive) setIsOpen(false);
|
||||
} catch (error) {
|
||||
console.error('Failed to create session:', error);
|
||||
toast.error('Failed to create session');
|
||||
}
|
||||
};
|
||||
|
||||
@@ -55,6 +62,7 @@ export function Sidebar({
|
||||
try {
|
||||
await deleteSession(id);
|
||||
setSessions((prev) => prev.filter((s) => s.id !== id));
|
||||
toast.success('Session deleted');
|
||||
if (currentSessionId === id) {
|
||||
const remaining = sessions.filter((s) => s.id !== id);
|
||||
if (remaining.length > 0) {
|
||||
@@ -63,117 +71,97 @@ export function Sidebar({
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to delete session:', error);
|
||||
toast.error('Failed to delete session');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectSession = (id: string) => {
|
||||
onSelectSession(id);
|
||||
if (responsive) setIsOpen(false); // 响应式模式下选择后关闭侧边栏
|
||||
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>
|
||||
// 空状态组件
|
||||
const EmptyState = () => (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={smoothTransition}
|
||||
className="p-6 text-center"
|
||||
>
|
||||
<div className="w-12 h-12 mx-auto mb-4 rounded-full bg-gray-700/50 flex items-center justify-center">
|
||||
<MessageCircle size={24} className="text-gray-500" />
|
||||
</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"
|
||||
<p className="text-gray-400 mb-4">No conversations yet</p>
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
onClick={handleCreate}
|
||||
className="text-primary-400 text-sm hover:text-primary-300 transition-colors"
|
||||
>
|
||||
<Menu size={20} />
|
||||
</button>
|
||||
Create your first chat
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
{/* 遮罩层 - 仅移动端 */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 z-40 md:hidden"
|
||||
onClick={handleOverlayClick}
|
||||
/>
|
||||
// 会话列表项
|
||||
const SessionItem = ({ session }: { session: Session }) => (
|
||||
<motion.div
|
||||
layout
|
||||
variants={fadeInUp}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
transition={smoothTransition}
|
||||
onClick={() => handleSelectSession(session.id)}
|
||||
className={cn(
|
||||
'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'
|
||||
)}
|
||||
|
||||
{/* 侧边栏 */}
|
||||
<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'
|
||||
)}
|
||||
>
|
||||
<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>
|
||||
<motion.button
|
||||
initial={{ opacity: 0 }}
|
||||
whileHover={{ scale: 1.1 }}
|
||||
onClick={(e) => handleDelete(session.id, e)}
|
||||
className="opacity-0 group-hover:opacity-100 p-1 hover:bg-gray-600 rounded transition-opacity"
|
||||
aria-label="Delete session"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="p-4 border-b border-gray-700">
|
||||
<Trash2 size={14} className="text-gray-400" />
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
// 加载状态
|
||||
const LoadingState = () => (
|
||||
<div className="p-2 space-y-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<SessionSkeleton key={i} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
// 侧边栏内容
|
||||
const SidebarContent = () => (
|
||||
<>
|
||||
{/* Header */}
|
||||
<div className="p-4 border-b border-gray-700">
|
||||
{responsive && (
|
||||
<div className="flex items-center justify-between mb-3 md:hidden">
|
||||
<span className="text-lg font-semibold">Sessions</span>
|
||||
<button
|
||||
@@ -184,60 +172,102 @@ export function Sidebar({
|
||||
<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>
|
||||
)}
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
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>
|
||||
</motion.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">
|
||||
{/* Session List */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{isLoading ? (
|
||||
<LoadingState />
|
||||
) : sessions.length === 0 ? (
|
||||
<EmptyState />
|
||||
) : (
|
||||
<div className="p-2 space-y-1">
|
||||
<AnimatePresence mode="popLayout">
|
||||
{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>
|
||||
<SessionItem key={session.id} session={session} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-4 border-t border-gray-700 text-center text-xs text-gray-500">
|
||||
AI Assistant v1.0
|
||||
{/* Footer */}
|
||||
<div className="p-4 border-t border-gray-700 text-center text-xs text-gray-500">
|
||||
AI Assistant v1.0
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
// 非响应式模式
|
||||
if (!responsive) {
|
||||
return (
|
||||
<div className="w-64 bg-gray-800 border-r border-gray-700 flex flex-col">
|
||||
<SidebarContent />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 响应式模式
|
||||
return (
|
||||
<>
|
||||
{/* 移动端菜单按钮 */}
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
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} />
|
||||
</motion.button>
|
||||
|
||||
{/* 遮罩层 */}
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="fixed inset-0 bg-black/50 z-40 md:hidden"
|
||||
onClick={handleOverlayClick}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* 侧边栏 */}
|
||||
<motion.div
|
||||
initial={false}
|
||||
animate={{ x: isOpen ? 0 : '-100%' }}
|
||||
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
|
||||
className={cn(
|
||||
'fixed md:static inset-y-0 left-0 z-50',
|
||||
'w-64 bg-gray-800 border-r border-gray-700 flex flex-col',
|
||||
'md:transform-none md:translate-x-0'
|
||||
)}
|
||||
style={{ transform: 'none' }}
|
||||
>
|
||||
<div className="hidden md:flex flex-col h-full">
|
||||
<SidebarContent />
|
||||
</div>
|
||||
<div className="flex md:hidden flex-col h-full">
|
||||
<SidebarContent />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 桌面端固定侧边栏 */}
|
||||
<div className="hidden md:flex w-64 bg-gray-800 border-r border-gray-700 flex-col">
|
||||
<SidebarContent />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
import { cn } from '../utils/cn';
|
||||
|
||||
interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {}
|
||||
|
||||
export function Skeleton({ className, ...props }: SkeletonProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn('animate-pulse rounded-md bg-gray-700', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function MessageSkeleton() {
|
||||
return (
|
||||
<div className="flex gap-3 animate-pulse">
|
||||
<div className="w-8 h-8 rounded-full bg-gray-700" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="h-4 bg-gray-700 rounded w-1/4" />
|
||||
<div className="h-4 bg-gray-700 rounded w-3/4" />
|
||||
<div className="h-4 bg-gray-700 rounded w-1/2" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function SessionSkeleton() {
|
||||
return (
|
||||
<div className="px-2 py-2 animate-pulse">
|
||||
<div className="h-10 bg-gray-700 rounded-lg" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function FileSkeleton() {
|
||||
return (
|
||||
<div className="px-3 py-2 animate-pulse">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 bg-gray-700 rounded" />
|
||||
<div className="h-4 bg-gray-700 rounded flex-1" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { Toaster as SonnerToaster } from 'sonner';
|
||||
|
||||
export function Toaster() {
|
||||
return (
|
||||
<SonnerToaster
|
||||
position="top-right"
|
||||
toastOptions={{
|
||||
style: {
|
||||
background: '#1f2937',
|
||||
border: '1px solid #374151',
|
||||
color: '#f3f4f6',
|
||||
},
|
||||
}}
|
||||
richColors
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -36,12 +36,24 @@ export type {
|
||||
ServerConfig,
|
||||
} from './api/client.js';
|
||||
|
||||
// Primitives (shadcn/ui style)
|
||||
export * from './primitives/index.js';
|
||||
|
||||
// Utils
|
||||
export { cn } from './utils/cn.js';
|
||||
export * from './utils/animations.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';
|
||||
export { Toaster } from './components/Toaster.js';
|
||||
export { Skeleton, MessageSkeleton, SessionSkeleton, FileSkeleton } from './components/Skeleton.js';
|
||||
|
||||
// Toast function (re-export from sonner)
|
||||
export { toast } from 'sonner';
|
||||
|
||||
// Hooks
|
||||
export { useChat } from './hooks/useChat.js';
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
import { forwardRef } from 'react';
|
||||
import { cva, type VariantProps } from 'class-variance-authority';
|
||||
import { cn } from '../utils/cn';
|
||||
|
||||
const buttonVariants = cva(
|
||||
'inline-flex items-center justify-center rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 disabled:pointer-events-none disabled:opacity-50',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'bg-primary-600 text-white hover:bg-primary-700',
|
||||
secondary: 'bg-gray-700 text-gray-100 hover:bg-gray-600',
|
||||
ghost: 'hover:bg-gray-800 text-gray-300',
|
||||
destructive: 'bg-red-600 text-white hover:bg-red-700',
|
||||
outline: 'border border-gray-600 bg-transparent hover:bg-gray-800',
|
||||
},
|
||||
size: {
|
||||
default: 'h-10 px-4 py-2',
|
||||
sm: 'h-8 px-3 text-xs',
|
||||
lg: 'h-12 px-6',
|
||||
icon: 'h-10 w-10',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'default',
|
||||
size: 'default',
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {}
|
||||
|
||||
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, ...props }, ref) => {
|
||||
return (
|
||||
<button
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
Button.displayName = 'Button';
|
||||
|
||||
export { buttonVariants };
|
||||
@@ -0,0 +1,95 @@
|
||||
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
||||
import { X } from 'lucide-react';
|
||||
import { forwardRef } from 'react';
|
||||
import { cn } from '../utils/cn';
|
||||
|
||||
export const Dialog = DialogPrimitive.Root;
|
||||
export const DialogTrigger = DialogPrimitive.Trigger;
|
||||
export const DialogPortal = DialogPrimitive.Portal;
|
||||
export const DialogClose = DialogPrimitive.Close;
|
||||
|
||||
export const DialogOverlay = forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Overlay
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
||||
|
||||
export const DialogContent = forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%] rounded-lg border border-gray-700 bg-gray-800 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary-500">
|
||||
<X className="h-4 w-4" />
|
||||
</DialogPrimitive.Close>
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
));
|
||||
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
||||
|
||||
export function DialogHeader({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div
|
||||
className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function DialogFooter({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div
|
||||
className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export const DialogTitle = forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn('text-lg font-semibold text-gray-100', className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
||||
|
||||
export const DialogDescription = forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn('text-sm text-gray-400', className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
||||
@@ -0,0 +1,21 @@
|
||||
import { forwardRef } from 'react';
|
||||
import { cn } from '../utils/cn';
|
||||
|
||||
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
|
||||
|
||||
export const Input = forwardRef<HTMLInputElement, InputProps>(
|
||||
({ className, type, ...props }, ref) => {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
'flex h-10 w-full rounded-lg border border-gray-600 bg-gray-800 px-3 py-2 text-sm text-gray-100 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
Input.displayName = 'Input';
|
||||
@@ -0,0 +1,134 @@
|
||||
import * as SelectPrimitive from '@radix-ui/react-select';
|
||||
import { Check, ChevronDown, ChevronUp } from 'lucide-react';
|
||||
import { forwardRef } from 'react';
|
||||
import { cn } from '../utils/cn';
|
||||
|
||||
export const Select = SelectPrimitive.Root;
|
||||
export const SelectGroup = SelectPrimitive.Group;
|
||||
export const SelectValue = SelectPrimitive.Value;
|
||||
|
||||
export const SelectTrigger = forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<SelectPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'flex h-10 w-full items-center justify-between rounded-lg border border-gray-600 bg-gray-800 px-3 py-2 text-sm text-gray-100 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDown className="h-4 w-4 opacity-50" />
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
));
|
||||
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
||||
|
||||
export const SelectScrollUpButton = forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
ref={ref}
|
||||
className={cn('flex cursor-default items-center justify-center py-1', className)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
));
|
||||
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
||||
|
||||
export const SelectScrollDownButton = forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
ref={ref}
|
||||
className={cn('flex cursor-default items-center justify-center py-1', className)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
));
|
||||
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
|
||||
|
||||
export const SelectContent = forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
|
||||
>(({ className, children, position = 'popper', ...props }, ref) => (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-lg border border-gray-600 bg-gray-800 text-gray-100 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
|
||||
position === 'popper' &&
|
||||
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
|
||||
className
|
||||
)}
|
||||
position={position}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
className={cn(
|
||||
'p-1',
|
||||
position === 'popper' &&
|
||||
'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</SelectPrimitive.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPrimitive.Portal>
|
||||
));
|
||||
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
||||
|
||||
export const SelectLabel = forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
||||
|
||||
export const SelectItem = forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<SelectPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-gray-700 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<SelectPrimitive.ItemIndicator>
|
||||
<Check className="h-4 w-4" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</span>
|
||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||
</SelectPrimitive.Item>
|
||||
));
|
||||
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
||||
|
||||
export const SelectSeparator = forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn('-mx-1 my-1 h-px bg-gray-700', className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
||||
@@ -0,0 +1,20 @@
|
||||
import * as SliderPrimitive from '@radix-ui/react-slider';
|
||||
import { forwardRef } from 'react';
|
||||
import { cn } from '../utils/cn';
|
||||
|
||||
export const Slider = forwardRef<
|
||||
React.ElementRef<typeof SliderPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SliderPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn('relative flex w-full touch-none select-none items-center', className)}
|
||||
{...props}
|
||||
>
|
||||
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-gray-700">
|
||||
<SliderPrimitive.Range className="absolute h-full bg-primary-500" />
|
||||
</SliderPrimitive.Track>
|
||||
<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary-500 bg-gray-900 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900 disabled:pointer-events-none disabled:opacity-50" />
|
||||
</SliderPrimitive.Root>
|
||||
));
|
||||
Slider.displayName = SliderPrimitive.Root.displayName;
|
||||
@@ -0,0 +1,24 @@
|
||||
import * as SwitchPrimitive from '@radix-ui/react-switch';
|
||||
import { forwardRef } from 'react';
|
||||
import { cn } from '../utils/cn';
|
||||
|
||||
export const Switch = forwardRef<
|
||||
React.ElementRef<typeof SwitchPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SwitchPrimitive.Root
|
||||
className={cn(
|
||||
'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-600 data-[state=unchecked]:bg-gray-700',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
<SwitchPrimitive.Thumb
|
||||
className={cn(
|
||||
'pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
|
||||
)}
|
||||
/>
|
||||
</SwitchPrimitive.Root>
|
||||
));
|
||||
Switch.displayName = SwitchPrimitive.Root.displayName;
|
||||
@@ -0,0 +1,23 @@
|
||||
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
||||
import { forwardRef } from 'react';
|
||||
import { cn } from '../utils/cn';
|
||||
|
||||
export const TooltipProvider = TooltipPrimitive.Provider;
|
||||
export const Tooltip = TooltipPrimitive.Root;
|
||||
export const TooltipTrigger = TooltipPrimitive.Trigger;
|
||||
|
||||
export const TooltipContent = forwardRef<
|
||||
React.ElementRef<typeof TooltipPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
|
||||
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||
<TooltipPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
'z-50 overflow-hidden rounded-md bg-gray-900 px-3 py-1.5 text-sm text-gray-100 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
||||
@@ -0,0 +1,34 @@
|
||||
export { Button, buttonVariants, type ButtonProps } from './Button';
|
||||
export { Input, type InputProps } from './Input';
|
||||
export {
|
||||
Dialog,
|
||||
DialogPortal,
|
||||
DialogOverlay,
|
||||
DialogClose,
|
||||
DialogTrigger,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogFooter,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
} from './Dialog';
|
||||
export {
|
||||
Select,
|
||||
SelectGroup,
|
||||
SelectValue,
|
||||
SelectTrigger,
|
||||
SelectContent,
|
||||
SelectLabel,
|
||||
SelectItem,
|
||||
SelectSeparator,
|
||||
SelectScrollUpButton,
|
||||
SelectScrollDownButton,
|
||||
} from './Select';
|
||||
export { Slider } from './Slider';
|
||||
export { Switch } from './Switch';
|
||||
export {
|
||||
TooltipProvider,
|
||||
Tooltip,
|
||||
TooltipTrigger,
|
||||
TooltipContent,
|
||||
} from './Tooltip';
|
||||
@@ -0,0 +1,88 @@
|
||||
import type { Variants, Transition } from 'framer-motion';
|
||||
|
||||
// 基础过渡配置
|
||||
export const springTransition: Transition = {
|
||||
type: 'spring',
|
||||
stiffness: 400,
|
||||
damping: 30,
|
||||
};
|
||||
|
||||
export const smoothTransition: Transition = {
|
||||
duration: 0.2,
|
||||
ease: 'easeOut',
|
||||
};
|
||||
|
||||
// 淡入上滑
|
||||
export const fadeInUp: Variants = {
|
||||
initial: { opacity: 0, y: 10 },
|
||||
animate: { opacity: 1, y: 0 },
|
||||
exit: { opacity: 0, y: -10 },
|
||||
};
|
||||
|
||||
// 右滑入
|
||||
export const slideInRight: Variants = {
|
||||
initial: { opacity: 0, x: 20 },
|
||||
animate: { opacity: 1, x: 0 },
|
||||
exit: { opacity: 0, x: 20 },
|
||||
};
|
||||
|
||||
// 左滑入
|
||||
export const slideInLeft: Variants = {
|
||||
initial: { opacity: 0, x: -20 },
|
||||
animate: { opacity: 1, x: 0 },
|
||||
exit: { opacity: 0, x: -20 },
|
||||
};
|
||||
|
||||
// 缩放淡入
|
||||
export const scaleIn: Variants = {
|
||||
initial: { opacity: 0, scale: 0.95 },
|
||||
animate: { opacity: 1, scale: 1 },
|
||||
exit: { opacity: 0, scale: 0.95 },
|
||||
};
|
||||
|
||||
// 列表项 stagger
|
||||
export const staggerContainer: Variants = {
|
||||
animate: {
|
||||
transition: {
|
||||
staggerChildren: 0.05,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const staggerItem: Variants = {
|
||||
initial: { opacity: 0, y: 10 },
|
||||
animate: { opacity: 1, y: 0 },
|
||||
exit: { opacity: 0, y: -10 },
|
||||
};
|
||||
|
||||
// 弹性缩放（按钮点击）
|
||||
export const tapScale = {
|
||||
whileHover: { scale: 1.02 },
|
||||
whileTap: { scale: 0.98 },
|
||||
};
|
||||
|
||||
// 图标按钮弹性
|
||||
export const iconButtonTap = {
|
||||
whileHover: { scale: 1.1 },
|
||||
whileTap: { scale: 0.9 },
|
||||
};
|
||||
|
||||
// 侧边栏滑入
|
||||
export const sidebarSlide: Variants = {
|
||||
initial: { x: '-100%' },
|
||||
animate: { x: 0 },
|
||||
exit: { x: '-100%' },
|
||||
};
|
||||
|
||||
// 弹窗
|
||||
export const modalOverlay: Variants = {
|
||||
initial: { opacity: 0 },
|
||||
animate: { opacity: 1 },
|
||||
exit: { opacity: 0 },
|
||||
};
|
||||
|
||||
export const modalContent: Variants = {
|
||||
initial: { opacity: 0, scale: 0.95, y: -20 },
|
||||
animate: { opacity: 1, scale: 1, y: 0 },
|
||||
exit: { opacity: 0, scale: 0.95, y: -20 },
|
||||
};
|
||||
@@ -0,0 +1,6 @@
|
||||
import { type ClassValue, clsx } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
@@ -12,6 +12,7 @@
|
||||
"dependencies": {
|
||||
"@ai-assistant/ui": "workspace:*",
|
||||
"clsx": "^2.1.0",
|
||||
"framer-motion": "^12.23.26",
|
||||
"lucide-react": "^0.344.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
Sidebar,
|
||||
FileBrowser,
|
||||
ConfigPanel,
|
||||
Toaster,
|
||||
listSessions,
|
||||
createSession,
|
||||
type Session,
|
||||
@@ -159,6 +160,9 @@ export function App() {
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Toast 通知 */}
|
||||
<Toaster />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,8 @@
|
||||
*/
|
||||
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { Wifi, WifiOff } from 'lucide-react';
|
||||
import { WifiOff, MessageSquare, Settings, FolderOpen } from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
useChat,
|
||||
ChatMessage,
|
||||
@@ -52,6 +53,66 @@ export function ChatPage({
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, [messages, streamingContent]);
|
||||
|
||||
// 空状态组件
|
||||
const EmptyState = () => (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="text-center py-20"
|
||||
>
|
||||
<div className="w-16 h-16 mx-auto mb-6 rounded-full bg-gradient-to-br from-primary-500/20 to-primary-600/20 flex items-center justify-center">
|
||||
<MessageSquare size={32} className="text-primary-400" />
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl font-semibold mb-2 bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
|
||||
Start a conversation
|
||||
</h2>
|
||||
|
||||
<p className="text-gray-400 mb-6 max-w-md mx-auto">
|
||||
Ask me anything about coding, debugging, or software development.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-2">
|
||||
{['Help me debug this code', 'Explain this function', 'Write a test'].map((suggestion) => (
|
||||
<motion.button
|
||||
key={suggestion}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
onClick={() => sendMessage(suggestion)}
|
||||
className="px-3 py-1.5 bg-gray-800 hover:bg-gray-700 rounded-full text-sm text-gray-300 transition-colors"
|
||||
>
|
||||
"{suggestion}"
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
// 连接状态指示器
|
||||
const ConnectionStatus = () => (
|
||||
<div className="flex items-center gap-1.5 text-sm">
|
||||
{isConnected ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="flex items-center gap-1.5"
|
||||
>
|
||||
<span className="relative flex h-2.5 w-2.5">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
|
||||
<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500" />
|
||||
</span>
|
||||
<span className="text-green-400 hidden sm:inline">Connected</span>
|
||||
</motion.div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1.5 text-red-400">
|
||||
<WifiOff size={16} />
|
||||
<span className="hidden sm:inline">Disconnected</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex flex-col h-screen">
|
||||
{/* Header */}
|
||||
@@ -59,50 +120,29 @@ export function ChatPage({
|
||||
<h1 className="text-lg font-medium">Chat</h1>
|
||||
<div className="flex items-center gap-3">
|
||||
{/* 连接状态 */}
|
||||
<div className="flex items-center gap-1.5 text-sm">
|
||||
{isConnected ? (
|
||||
<>
|
||||
<Wifi size={16} className="text-green-500" />
|
||||
<span className="text-green-500 hidden sm:inline">Connected</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<WifiOff size={16} className="text-red-500" />
|
||||
<span className="text-red-500 hidden sm:inline">Disconnected</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<ConnectionStatus />
|
||||
|
||||
{/* 工具栏按钮 */}
|
||||
{(onOpenConfig || onToggleFileBrowser) && (
|
||||
<div className="flex items-center gap-1.5 border-l border-gray-600 pl-3">
|
||||
{/* 配置按钮 */}
|
||||
{onOpenConfig && (
|
||||
<button
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
onClick={onOpenConfig}
|
||||
className="p-1.5 rounded-lg text-gray-400 hover:text-gray-200 hover:bg-gray-700 transition-colors"
|
||||
title="Settings"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
|
||||
/>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<Settings size={20} />
|
||||
</motion.button>
|
||||
)}
|
||||
|
||||
{/* 文件浏览器按钮 - 仅桌面端显示 */}
|
||||
{onToggleFileBrowser && (
|
||||
<button
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
onClick={onToggleFileBrowser}
|
||||
className={`hidden md:block p-1.5 rounded-lg transition-colors ${
|
||||
showFileBrowser
|
||||
@@ -111,15 +151,8 @@ export function ChatPage({
|
||||
}`}
|
||||
title={showFileBrowser ? 'Hide Files' : 'Show Files'}
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<FolderOpen size={20} />
|
||||
</motion.button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@@ -129,18 +162,13 @@ export function ChatPage({
|
||||
{/* Messages */}
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
<div className="max-w-4xl mx-auto space-y-4">
|
||||
{messages.length === 0 && !isLoading && (
|
||||
<div className="text-center py-20">
|
||||
<h2 className="text-2xl font-semibold mb-2">Start a conversation</h2>
|
||||
<p className="text-gray-400">
|
||||
Type a message below to begin chatting with your AI assistant.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{messages.length === 0 && !isLoading && <EmptyState />}
|
||||
|
||||
{messages.map((message) => (
|
||||
<ChatMessage key={message.id} message={message} />
|
||||
))}
|
||||
<AnimatePresence mode="popLayout">
|
||||
{messages.map((message) => (
|
||||
<ChatMessage key={message.id} message={message} />
|
||||
))}
|
||||
</AnimatePresence>
|
||||
|
||||
{streamingContent && <StreamingMessage content={streamingContent} />}
|
||||
|
||||
|
||||
@@ -23,7 +23,21 @@ export default {
|
||||
950: '#082f49',
|
||||
},
|
||||
},
|
||||
keyframes: {
|
||||
'accordion-down': {
|
||||
from: { height: '0' },
|
||||
to: { height: 'var(--radix-accordion-content-height)' },
|
||||
},
|
||||
'accordion-up': {
|
||||
from: { height: 'var(--radix-accordion-content-height)' },
|
||||
to: { height: '0' },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
'accordion-down': 'accordion-down 0.2s ease-out',
|
||||
'accordion-up': 'accordion-up 0.2s ease-out',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
plugins: [require('tailwindcss-animate')],
|
||||
};
|
||||
|
||||
Generated
+1005
-1
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user