feat(features): 添加核心功能组件
- ModelSelector: 模型选择下拉框组件 - ToolsDropdown: 工具管理下拉框组件 - MessageBubble: 聊天消息气泡组件 - QuickActions: 快捷操作按钮组件 - Welcome: 欢迎页问候组件 - ChatInput: 聊天输入框组件，集成模型选择和工具管理
This commit is contained in:
gaoziman
parent
5347bc7c2f
commit
c2a48986b4
126
src/components/features/ChatInput.tsx
Normal file
126
src/components/features/ChatInput.tsx
Normal file
@ -0,0 +1,126 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Plus, Clock, ArrowUp } from 'lucide-react';
|
||||
import { ModelSelector } from './ModelSelector';
|
||||
import { ToolsDropdown } from './ToolsDropdown';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { Model, Tool } from '@/types';
|
||||
|
||||
interface ChatInputProps {
|
||||
models: Model[];
|
||||
selectedModel: Model;
|
||||
onModelSelect: (model: Model) => void;
|
||||
tools: Tool[];
|
||||
onToolToggle: (toolId: string) => void;
|
||||
onEnableAllTools: (enabled: boolean) => void;
|
||||
onSend: (message: string) => void;
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ChatInput({
|
||||
models,
|
||||
selectedModel,
|
||||
onModelSelect,
|
||||
tools,
|
||||
onToolToggle,
|
||||
onEnableAllTools,
|
||||
onSend,
|
||||
placeholder = 'How can I help you today?',
|
||||
className,
|
||||
}: ChatInputProps) {
|
||||
const [message, setMessage] = useState('');
|
||||
|
||||
const handleSend = () => {
|
||||
if (message.trim()) {
|
||||
onSend(message);
|
||||
setMessage('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSend();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn('w-full max-w-[var(--input-max-width)] mx-auto', className)}>
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col bg-white border border-[var(--color-border)] rounded-[18px] p-4 shadow-[var(--shadow-input)]',
|
||||
'transition-all duration-150',
|
||||
'focus-within:border-[var(--color-border-focus)] focus-within:shadow-[var(--shadow-input-focus)]'
|
||||
)}
|
||||
>
|
||||
{/* 第一行：输入区域 */}
|
||||
<div className="w-full mb-3">
|
||||
<input
|
||||
type="text"
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={placeholder}
|
||||
className="w-full border-none outline-none text-base text-[var(--color-text-primary)] bg-transparent py-2 placeholder:text-[var(--color-text-placeholder)]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 第二行：功能按钮区域 */}
|
||||
<div className="flex items-center justify-between w-full">
|
||||
{/* 左侧按钮 */}
|
||||
<div className="flex items-center gap-1">
|
||||
{/* 添加附件 */}
|
||||
<button
|
||||
className="w-8 h-8 flex items-center justify-center rounded-lg text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-secondary)] transition-colors"
|
||||
title="Add attachment"
|
||||
>
|
||||
<Plus size={20} />
|
||||
</button>
|
||||
|
||||
{/* 工具下拉 */}
|
||||
<ToolsDropdown
|
||||
tools={tools}
|
||||
onToolToggle={onToolToggle}
|
||||
onEnableAllToggle={onEnableAllTools}
|
||||
/>
|
||||
|
||||
{/* 历史记录 */}
|
||||
<button
|
||||
className="w-8 h-8 flex items-center justify-center rounded-lg text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-secondary)] transition-colors"
|
||||
title="History"
|
||||
>
|
||||
<Clock size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 右侧按钮 */}
|
||||
<div className="flex items-center gap-3">
|
||||
{/* 模型选择器 */}
|
||||
<ModelSelector
|
||||
models={models}
|
||||
selectedModel={selectedModel}
|
||||
onSelect={onModelSelect}
|
||||
/>
|
||||
|
||||
{/* 发送按钮 */}
|
||||
<button
|
||||
onClick={handleSend}
|
||||
disabled={!message.trim()}
|
||||
className={cn(
|
||||
'w-[38px] h-[38px] flex items-center justify-center bg-[var(--color-primary)] text-white rounded-xl transition-all duration-150',
|
||||
message.trim()
|
||||
? 'hover:bg-[var(--color-primary-hover)] hover:-translate-y-0.5'
|
||||
: 'opacity-50 cursor-not-allowed'
|
||||
)}
|
||||
title="Send message"
|
||||
>
|
||||
<ArrowUp size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
140
src/components/features/MessageBubble.tsx
Normal file
140
src/components/features/MessageBubble.tsx
Normal file
@ -0,0 +1,140 @@
|
||||
'use client';
|
||||
|
||||
import { Copy, ThumbsUp, ThumbsDown, RefreshCw } from 'lucide-react';
|
||||
import { Avatar } from '@/components/ui/Avatar';
|
||||
import { AILogo } from '@/components/ui/AILogo';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { Message, User } from '@/types';
|
||||
|
||||
interface MessageBubbleProps {
|
||||
message: Message;
|
||||
user?: User;
|
||||
}
|
||||
|
||||
export function MessageBubble({ message, user }: MessageBubbleProps) {
|
||||
const isUser = message.role === 'user';
|
||||
|
||||
// 简单的 Markdown 渲染
|
||||
const renderContent = (content: string) => {
|
||||
// 处理代码块
|
||||
const parts = content.split(/(`[^`]+`)/g);
|
||||
return parts.map((part, index) => {
|
||||
if (part.startsWith('`') && part.endsWith('`')) {
|
||||
return (
|
||||
<code
|
||||
key={index}
|
||||
className="bg-red-50 text-red-700 px-1.5 py-0.5 rounded text-sm font-mono"
|
||||
>
|
||||
{part.slice(1, -1)}
|
||||
</code>
|
||||
);
|
||||
}
|
||||
// 处理粗体
|
||||
const boldParts = part.split(/(\*\*[^*]+\*\*)/g);
|
||||
return boldParts.map((boldPart, boldIndex) => {
|
||||
if (boldPart.startsWith('**') && boldPart.endsWith('**')) {
|
||||
return (
|
||||
<strong key={`${index}-${boldIndex}`} className="font-semibold">
|
||||
{boldPart.slice(2, -2)}
|
||||
</strong>
|
||||
);
|
||||
}
|
||||
return <span key={`${index}-${boldIndex}`}>{boldPart}</span>;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
if (isUser) {
|
||||
return (
|
||||
<div className="flex justify-end items-start gap-3 mb-8 animate-fade-in">
|
||||
<div className="max-w-[70%]">
|
||||
<div className="bg-[var(--color-message-user)] text-[var(--color-text-primary)] px-4 py-3 rounded-[18px] text-base leading-relaxed">
|
||||
{message.content}
|
||||
</div>
|
||||
</div>
|
||||
{user && <Avatar name={user.name} size="md" />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-start gap-4 mb-8 animate-fade-in">
|
||||
{/* AI 图标 */}
|
||||
<div className="flex-shrink-0 mt-4">
|
||||
<AILogo size={28} />
|
||||
</div>
|
||||
|
||||
{/* 消息内容 */}
|
||||
<div className="flex-1 max-w-full">
|
||||
<div className="bg-[var(--color-message-assistant-bg)] border border-[var(--color-message-assistant-border)] rounded-2xl px-6 py-5 shadow-sm">
|
||||
<div className="text-base text-[var(--color-text-primary)] leading-[1.8] whitespace-pre-wrap">
|
||||
{message.content.split('\n\n').map((paragraph, index) => {
|
||||
// 处理列表
|
||||
if (paragraph.startsWith('- ') || paragraph.startsWith('* ')) {
|
||||
const items = paragraph.split('\n');
|
||||
return (
|
||||
<ul key={index} className="list-disc pl-5 my-3 space-y-2">
|
||||
{items.map((item, i) => (
|
||||
<li key={i} className="leading-relaxed">
|
||||
{renderContent(item.replace(/^[-*]\s/, ''))}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
// 处理有序列表
|
||||
if (/^\d+\.\s/.test(paragraph)) {
|
||||
const items = paragraph.split('\n');
|
||||
return (
|
||||
<ol key={index} className="list-decimal pl-5 my-3 space-y-2">
|
||||
{items.map((item, i) => (
|
||||
<li key={i} className="leading-relaxed marker:text-[var(--color-primary)] marker:font-medium">
|
||||
{renderContent(item.replace(/^\d+\.\s/, ''))}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<p key={index} className="mb-4 last:mb-0">
|
||||
{renderContent(paragraph)}
|
||||
</p>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<div className="flex items-center gap-1 mt-4 pt-3">
|
||||
<ActionButton icon={Copy} title="Copy" />
|
||||
<ActionButton icon={ThumbsUp} title="Good response" />
|
||||
<ActionButton icon={ThumbsDown} title="Bad response" />
|
||||
<ActionButton icon={RefreshCw} title="Regenerate" />
|
||||
</div>
|
||||
|
||||
{/* 免责声明 */}
|
||||
<div className="text-xs text-[var(--color-text-tertiary)] text-right mt-2">
|
||||
cchcode can make mistakes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ActionButtonProps {
|
||||
icon: React.ComponentType<{ size?: number }>;
|
||||
title: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
function ActionButton({ icon: Icon, title, onClick }: ActionButtonProps) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className="w-8 h-8 flex items-center justify-center rounded-lg text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-secondary)] transition-colors"
|
||||
title={title}
|
||||
>
|
||||
<Icon size={16} />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
80
src/components/features/ModelSelector.tsx
Normal file
80
src/components/features/ModelSelector.tsx
Normal file
@ -0,0 +1,80 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import { ChevronDown } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { Model } from '@/types';
|
||||
|
||||
interface ModelSelectorProps {
|
||||
models: Model[];
|
||||
selectedModel: Model;
|
||||
onSelect: (model: Model) => void;
|
||||
}
|
||||
|
||||
export function ModelSelector({ models, selectedModel, onSelect }: ModelSelectorProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// 点击外部关闭
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={cn('relative', isOpen && 'model-selector--open')} ref={dropdownRef}>
|
||||
{/* 触发按钮 */}
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="flex items-center gap-1 px-2 py-1 text-sm font-medium text-[var(--color-text-secondary)] rounded-lg hover:bg-[var(--color-bg-hover)] transition-colors"
|
||||
>
|
||||
<span>{selectedModel.name}</span>
|
||||
<ChevronDown
|
||||
size={16}
|
||||
className={cn('transition-transform duration-150', isOpen && 'rotate-180')}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{/* 下拉菜单 */}
|
||||
<div
|
||||
className={cn(
|
||||
'absolute bottom-full right-0 mb-2 min-w-[160px] bg-white border border-[var(--color-border)] rounded-xl shadow-lg p-1 z-50',
|
||||
'transition-all duration-150',
|
||||
isOpen
|
||||
? 'opacity-100 visible translate-y-0'
|
||||
: 'opacity-0 invisible translate-y-2'
|
||||
)}
|
||||
>
|
||||
{models.map((model) => {
|
||||
const isSelected = model.id === selectedModel.id;
|
||||
return (
|
||||
<button
|
||||
key={model.id}
|
||||
onClick={() => {
|
||||
onSelect(model);
|
||||
setIsOpen(false);
|
||||
}}
|
||||
className="flex items-center justify-between w-full px-3 py-2 rounded-lg hover:bg-[var(--color-bg-hover)] transition-colors"
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
'font-medium text-sm',
|
||||
isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--color-text-primary)]'
|
||||
)}
|
||||
>
|
||||
{model.name}
|
||||
</span>
|
||||
<span className="text-xs text-[var(--color-text-tertiary)]">{model.tag}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
45
src/components/features/QuickActions.tsx
Normal file
45
src/components/features/QuickActions.tsx
Normal file
@ -0,0 +1,45 @@
|
||||
'use client';
|
||||
|
||||
import { Code, PenTool, GraduationCap, Home, Sparkles } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { QuickAction } from '@/types';
|
||||
|
||||
const iconMap: Record<string, React.ComponentType<{ size?: number; className?: string }>> = {
|
||||
Code,
|
||||
PenTool,
|
||||
GraduationCap,
|
||||
Home,
|
||||
Sparkles,
|
||||
};
|
||||
|
||||
interface QuickActionsProps {
|
||||
actions: QuickAction[];
|
||||
onSelect: (action: QuickAction) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function QuickActions({ actions, onSelect, className }: QuickActionsProps) {
|
||||
return (
|
||||
<div className={cn('flex flex-wrap justify-center gap-3 mt-6', className)}>
|
||||
{actions.map((action) => {
|
||||
const Icon = iconMap[action.icon];
|
||||
return (
|
||||
<button
|
||||
key={action.id}
|
||||
onClick={() => onSelect(action)}
|
||||
className={cn(
|
||||
'flex items-center gap-2 px-4 py-2',
|
||||
'bg-white border border-[var(--color-border)] rounded-full',
|
||||
'text-sm text-[var(--color-text-secondary)]',
|
||||
'hover:bg-[var(--color-bg-tertiary)] hover:text-[var(--color-text-primary)]',
|
||||
'transition-all duration-150'
|
||||
)}
|
||||
>
|
||||
{Icon && <Icon size={16} className="quick-action__icon" />}
|
||||
<span>{action.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
105
src/components/features/ToolsDropdown.tsx
Normal file
105
src/components/features/ToolsDropdown.tsx
Normal file
@ -0,0 +1,105 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import { Wrench, Search, Terminal, Globe, Check } from 'lucide-react';
|
||||
import { Toggle } from '@/components/ui/Toggle';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { Tool } from '@/types';
|
||||
|
||||
const iconMap: Record<string, React.ComponentType<{ size?: number; className?: string }>> = {
|
||||
Search,
|
||||
Terminal,
|
||||
Globe,
|
||||
};
|
||||
|
||||
interface ToolsDropdownProps {
|
||||
tools: Tool[];
|
||||
onToolToggle: (toolId: string) => void;
|
||||
onEnableAllToggle: (enabled: boolean) => void;
|
||||
}
|
||||
|
||||
export function ToolsDropdown({ tools, onToolToggle, onEnableAllToggle }: ToolsDropdownProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const enabledCount = tools.filter((t) => t.enabled).length;
|
||||
const allEnabled = enabledCount > 0;
|
||||
|
||||
// 点击外部关闭
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
{/* 触发按钮 */}
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className={cn(
|
||||
'w-8 h-8 flex items-center justify-center rounded-lg transition-colors',
|
||||
enabledCount > 0
|
||||
? 'text-[var(--color-primary)] bg-[var(--color-primary-light)]'
|
||||
: 'text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-secondary)]'
|
||||
)}
|
||||
title="Tools"
|
||||
>
|
||||
<Wrench size={20} />
|
||||
</button>
|
||||
{enabledCount > 0 && (
|
||||
<span className="absolute -top-0.5 -right-0.5 min-w-4 h-4 bg-[var(--color-primary)] text-white text-[10px] font-semibold rounded-full flex items-center justify-center px-1">
|
||||
{enabledCount}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 下拉菜单 */}
|
||||
<div
|
||||
className={cn(
|
||||
'absolute bottom-full left-0 mb-2 min-w-[220px] bg-white border border-[var(--color-border)] rounded-xl shadow-lg p-2 z-50',
|
||||
'transition-all duration-150',
|
||||
isOpen
|
||||
? 'opacity-100 visible translate-y-0'
|
||||
: 'opacity-0 invisible translate-y-2'
|
||||
)}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-3 py-2 border-b border-[var(--color-border-light)] mb-2">
|
||||
<span className="text-sm font-medium text-[var(--color-text-primary)]">Enable Tools</span>
|
||||
<Toggle checked={allEnabled} onChange={onEnableAllToggle} />
|
||||
</div>
|
||||
|
||||
{/* 工具列表 */}
|
||||
{tools.map((tool) => {
|
||||
const Icon = iconMap[tool.icon];
|
||||
return (
|
||||
<button
|
||||
key={tool.id}
|
||||
onClick={() => onToolToggle(tool.id)}
|
||||
className="flex items-center gap-3 w-full px-3 py-2 rounded-lg hover:bg-[var(--color-bg-hover)] transition-colors"
|
||||
>
|
||||
{Icon && <Icon size={20} className="text-[var(--color-text-tertiary)]" />}
|
||||
<span className="flex-1 text-sm text-[var(--color-text-primary)] text-left">
|
||||
{tool.name}
|
||||
</span>
|
||||
<Check
|
||||
size={16}
|
||||
className={cn(
|
||||
'text-[var(--color-primary)] transition-opacity',
|
||||
tool.enabled ? 'opacity-100' : 'opacity-0'
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
25
src/components/features/Welcome.tsx
Normal file
25
src/components/features/Welcome.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
'use client';
|
||||
|
||||
import { AILogo } from '@/components/ui/AILogo';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface WelcomeProps {
|
||||
greeting: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function Welcome({ greeting, className }: WelcomeProps) {
|
||||
return (
|
||||
<div className={cn('text-center animate-fade-in', className)}>
|
||||
{/* 装饰图标 */}
|
||||
<div className="flex justify-center mb-6">
|
||||
<AILogo size={48} />
|
||||
</div>
|
||||
|
||||
{/* 问候语 */}
|
||||
<h1 className="text-4xl font-normal text-[var(--color-text-primary)]">
|
||||
{greeting}
|
||||
</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user