refactor(聊天头部): 简化 ChatHeaderInfo 组件
- 移除模型选择器功能及相关 UI - 简化组件 props,只保留助手信息展示 - 清理未使用的导入和状态管理代码
This commit is contained in:
parent
0f8fd2ce1f
commit
4efee3a06a
@ -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>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user