refactor(聊天头部): 简化 ChatHeaderInfo 组件

- 移除模型选择器功能及相关 UI
- 简化组件 props,只保留助手信息展示
- 清理未使用的导入和状态管理代码
This commit is contained in:
gaoziman 2025-12-24 23:10:48 +08:00
parent 0f8fd2ce1f
commit 4efee3a06a
2 changed files with 2 additions and 138 deletions

View File

@ -552,13 +552,10 @@ export default function ChatPage({ params }: PageProps) {
</div>
</div>
{/* 第二行:助手和模型信息 */}
{/* 第二行:助手信息 */}
<div className="pl-12">
<ChatHeaderInfo
assistant={conversation?.assistant || null}
currentModel={selectedModelId}
models={modelOptions}
onModelChange={handleModelChange}
/>
</div>
</header>

View File

@ -1,8 +1,6 @@
'use client';
import { useState, useRef, useEffect } from 'react';
import { ChevronDown, Check, Bot } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Bot } from 'lucide-react';
import { IconRenderer } from '@/components/ui/IconRenderer';
interface Assistant {
@ -12,71 +10,13 @@ interface Assistant {
description: string | null;
}
interface Model {
id: string;
name: string;
displayName: string;
tag?: string;
}
interface ChatHeaderInfoProps {
assistant: Assistant | null;
currentModel: string;
models: Model[];
onModelChange: (modelId: string) => Promise<void>;
}
export function ChatHeaderInfo({
assistant,
currentModel,
models,
onModelChange,
}: ChatHeaderInfoProps) {
const [isModelMenuOpen, setIsModelMenuOpen] = useState(false);
const [isChanging, setIsChanging] = useState(false);
const [showSuccess, setShowSuccess] = useState(false);
const menuRef = useRef<HTMLDivElement>(null);
// 点击外部关闭菜单
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
setIsModelMenuOpen(false);
}
};
if (isModelMenuOpen) {
document.addEventListener('mousedown', handleClickOutside);
}
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [isModelMenuOpen]);
// 处理模型切换
const handleModelSelect = async (modelId: string) => {
if (modelId === currentModel || isChanging) return;
try {
setIsChanging(true);
await onModelChange(modelId);
setIsModelMenuOpen(false);
// 显示成功提示
setShowSuccess(true);
setTimeout(() => {
setShowSuccess(false);
}, 2000);
} catch (error) {
console.error('Failed to change model:', error);
} finally {
setIsChanging(false);
}
};
// 获取当前模型的显示名称
const currentModelInfo = models.find((m) => m.id === currentModel);
const modelDisplayName = currentModelInfo?.displayName || currentModel;
return (
<div className="flex items-center gap-2 text-sm">
{/* 助手信息 */}
@ -98,79 +38,6 @@ export function ChatHeaderInfo({
</>
)}
</div>
{/* 分隔符 */}
<span className="text-[var(--color-text-quaternary)]">·</span>
{/* 模型选择器 */}
<div className="relative" ref={menuRef}>
<button
onClick={() => setIsModelMenuOpen(!isModelMenuOpen)}
disabled={isChanging}
className={cn(
'flex items-center gap-1 px-2 py-1 rounded-md transition-colors',
'text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)]',
isChanging && 'opacity-50 cursor-not-allowed'
)}
>
<span className="max-w-[280px] truncate">{currentModel}</span>
<ChevronDown
size={14}
className={cn(
'flex-shrink-0 transition-transform',
isModelMenuOpen && 'rotate-180'
)}
/>
</button>
{/* 模型下拉菜单 */}
{isModelMenuOpen && (
<div className="absolute left-0 top-full mt-1 bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded-lg shadow-lg py-1 z-30 min-w-[280px] max-h-[400px] overflow-y-auto">
<div className="px-3 py-2 text-xs font-medium text-[var(--color-text-tertiary)] uppercase tracking-wider border-b border-[var(--color-border)]">
</div>
{models.map((model) => (
<button
key={model.id}
onClick={() => handleModelSelect(model.id)}
disabled={isChanging}
className={cn(
'w-full px-3 py-2.5 text-left text-sm flex items-center justify-between gap-2 transition-colors',
model.id === currentModel
? 'bg-[var(--color-primary-light)] text-[var(--color-primary)]'
: 'text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)]',
isChanging && 'opacity-50'
)}
>
<div className="flex flex-col gap-0.5 min-w-0">
<span className="font-medium truncate">{model.displayName}</span>
<span className="text-xs text-[var(--color-text-tertiary)] truncate">
{model.id}
</span>
</div>
<div className="flex items-center gap-2 flex-shrink-0">
{model.tag && (
<span className="px-1.5 py-0.5 text-xs bg-[var(--color-primary-light)] text-[var(--color-primary)] rounded">
{model.tag}
</span>
)}
{model.id === currentModel && (
<Check size={16} className="text-[var(--color-primary)]" />
)}
</div>
</button>
))}
</div>
)}
</div>
{/* 成功提示 */}
{showSuccess && (
<div className="flex items-center gap-1 text-green-600 text-xs animate-fade-in">
<Check size={14} />
<span></span>
</div>
)}
</div>
);
}