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>
|
</div>
|
||||||
|
|
||||||
{/* 第二行:助手和模型信息 */}
|
{/* 第二行:助手信息 */}
|
||||||
<div className="pl-12">
|
<div className="pl-12">
|
||||||
<ChatHeaderInfo
|
<ChatHeaderInfo
|
||||||
assistant={conversation?.assistant || null}
|
assistant={conversation?.assistant || null}
|
||||||
currentModel={selectedModelId}
|
|
||||||
models={modelOptions}
|
|
||||||
onModelChange={handleModelChange}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@ -1,8 +1,6 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState, useRef, useEffect } from 'react';
|
import { Bot } from 'lucide-react';
|
||||||
import { ChevronDown, Check, Bot } from 'lucide-react';
|
|
||||||
import { cn } from '@/lib/utils';
|
|
||||||
import { IconRenderer } from '@/components/ui/IconRenderer';
|
import { IconRenderer } from '@/components/ui/IconRenderer';
|
||||||
|
|
||||||
interface Assistant {
|
interface Assistant {
|
||||||
@ -12,71 +10,13 @@ interface Assistant {
|
|||||||
description: string | null;
|
description: string | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Model {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
displayName: string;
|
|
||||||
tag?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ChatHeaderInfoProps {
|
interface ChatHeaderInfoProps {
|
||||||
assistant: Assistant | null;
|
assistant: Assistant | null;
|
||||||
currentModel: string;
|
|
||||||
models: Model[];
|
|
||||||
onModelChange: (modelId: string) => Promise<void>;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function ChatHeaderInfo({
|
export function ChatHeaderInfo({
|
||||||
assistant,
|
assistant,
|
||||||
currentModel,
|
|
||||||
models,
|
|
||||||
onModelChange,
|
|
||||||
}: ChatHeaderInfoProps) {
|
}: 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 (
|
return (
|
||||||
<div className="flex items-center gap-2 text-sm">
|
<div className="flex items-center gap-2 text-sm">
|
||||||
{/* 助手信息 */}
|
{/* 助手信息 */}
|
||||||
@ -98,79 +38,6 @@ export function ChatHeaderInfo({
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user