fix: sidebar menu visibility, model selector cleanup, time format
- Sidebar: restore DropdownMenu for session actions, fix long titles pushing button off-screen (add w-0 flex-1, w-full on content div) - Model selector: remove SiliconFlow models, DeepSeek only (deepseek-reasoner default, deepseek-chat alternative) - Message timestamp: change from HH:mm to yyyy/M/d HH:mm format - Default model changed to deepseek-reasoner Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -15,7 +15,7 @@ import { knowledgeBaseAPI } from "@/lib/api";
|
|||||||
export default function ChatInterface() {
|
export default function ChatInterface() {
|
||||||
const [inputMessage, setInputMessage] = useState("");
|
const [inputMessage, setInputMessage] = useState("");
|
||||||
const [isComposing, setIsComposing] = useState(false);
|
const [isComposing, setIsComposing] = useState(false);
|
||||||
const [selectedModel, setSelectedModel] = useState("deepseek-chat");
|
const [selectedModel, setSelectedModel] = useState("deepseek-reasoner");
|
||||||
const [selectedKnowledgeBases, setSelectedKnowledgeBases] = useState<string[]>([]);
|
const [selectedKnowledgeBases, setSelectedKnowledgeBases] = useState<string[]>([]);
|
||||||
const [systemKnowledgeBases, setSystemKnowledgeBases] = useState<KnowledgeBase[]>([]);
|
const [systemKnowledgeBases, setSystemKnowledgeBases] = useState<KnowledgeBase[]>([]);
|
||||||
const [userKnowledgeBases, setUserKnowledgeBases] = useState<KnowledgeBase[]>([]);
|
const [userKnowledgeBases, setUserKnowledgeBases] = useState<KnowledgeBase[]>([]);
|
||||||
|
|||||||
@@ -253,7 +253,7 @@ export default function MessageItem({ message, selectedModel }: MessageItemProps
|
|||||||
)}
|
)}
|
||||||
<span className="text-[10px] text-muted-foreground/50 mx-1">
|
<span className="text-[10px] text-muted-foreground/50 mx-1">
|
||||||
{message.created_at
|
{message.created_at
|
||||||
? format(new Date(new Date(message.created_at).getTime() + 8 * 60 * 60 * 1000), "HH:mm")
|
? format(new Date(message.created_at), "yyyy/M/d HH:mm")
|
||||||
: ""}
|
: ""}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -8,10 +8,9 @@ import {
|
|||||||
DropdownMenuItem,
|
DropdownMenuItem,
|
||||||
DropdownMenuTrigger,
|
DropdownMenuTrigger,
|
||||||
DropdownMenuSeparator,
|
DropdownMenuSeparator,
|
||||||
DropdownMenuLabel,
|
|
||||||
} from "@/components/ui/dropdown-menu";
|
} from "@/components/ui/dropdown-menu";
|
||||||
import { Badge } from "@/components/ui/badge";
|
import { Badge } from "@/components/ui/badge";
|
||||||
import { ChevronDown, Cpu, Zap, Sparkles, Brain } from "lucide-react";
|
import { ChevronDown, Cpu, Sparkles, Brain } from "lucide-react";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
export interface ModelOption {
|
export interface ModelOption {
|
||||||
@@ -29,55 +28,25 @@ interface ModelSelectorProps {
|
|||||||
className?: string;
|
className?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const modelGroups = [
|
const models: ModelOption[] = [
|
||||||
{
|
{
|
||||||
|
id: "deepseek-reasoner",
|
||||||
|
name: "DeepSeek-R1",
|
||||||
|
description: "深度推理模型,适合复杂分析任务",
|
||||||
provider: "deepseek-official",
|
provider: "deepseek-official",
|
||||||
label: "DeepSeek 官方",
|
providerLabel: "DeepSeek",
|
||||||
models: [
|
icon: Brain,
|
||||||
{
|
|
||||||
id: "deepseek-chat",
|
|
||||||
name: "DeepSeek-V3",
|
|
||||||
description: "DeepSeek 最新通用模型,速度快、能力强",
|
|
||||||
provider: "deepseek-official",
|
|
||||||
providerLabel: "DeepSeek",
|
|
||||||
icon: Sparkles,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "deepseek-reasoner",
|
|
||||||
name: "DeepSeek-R1",
|
|
||||||
description: "深度推理模型,适合复杂分析任务",
|
|
||||||
provider: "deepseek-official",
|
|
||||||
providerLabel: "DeepSeek",
|
|
||||||
icon: Brain,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
provider: "siliconflow",
|
id: "deepseek-chat",
|
||||||
label: "SiliconFlow(硅基流动)",
|
name: "DeepSeek-V3",
|
||||||
models: [
|
description: "通用模型,速度快、能力强",
|
||||||
{
|
provider: "deepseek-official",
|
||||||
id: "deepseek-ai/DeepSeek-V3",
|
providerLabel: "DeepSeek",
|
||||||
name: "DeepSeek-V3",
|
icon: Sparkles,
|
||||||
description: "通过硅基流动调用,稳定的推理能力",
|
|
||||||
provider: "siliconflow",
|
|
||||||
providerLabel: "硅基流动",
|
|
||||||
icon: Sparkles,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "Qwen/QwQ-32B",
|
|
||||||
name: "QwQ-32B",
|
|
||||||
description: "Qwen 推理模型,高效准确",
|
|
||||||
provider: "siliconflow",
|
|
||||||
providerLabel: "硅基流动",
|
|
||||||
icon: Zap,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const allModels = modelGroups.flatMap((g) => g.models);
|
|
||||||
|
|
||||||
export default function ModelSelector({
|
export default function ModelSelector({
|
||||||
selectedModel,
|
selectedModel,
|
||||||
onModelChange,
|
onModelChange,
|
||||||
@@ -86,7 +55,7 @@ export default function ModelSelector({
|
|||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
|
||||||
const selectedModelData =
|
const selectedModelData =
|
||||||
allModels.find((model) => model.id === selectedModel) || allModels[0];
|
models.find((model) => model.id === selectedModel) || models[0];
|
||||||
const IconComponent = selectedModelData.icon || Cpu;
|
const IconComponent = selectedModelData.icon || Cpu;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -107,51 +76,44 @@ export default function ModelSelector({
|
|||||||
<ChevronDown className="w-3 h-3 ml-1 opacity-50" />
|
<ChevronDown className="w-3 h-3 ml-1 opacity-50" />
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent align="start" className="w-72">
|
<DropdownMenuContent align="start" className="w-64">
|
||||||
<div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
|
<div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
|
||||||
选择AI模型
|
选择AI模型
|
||||||
</div>
|
</div>
|
||||||
<DropdownMenuSeparator />
|
<DropdownMenuSeparator />
|
||||||
{modelGroups.map((group) => (
|
{models.map((model) => {
|
||||||
<div key={group.provider}>
|
const ModelIcon = model.icon || Cpu;
|
||||||
<DropdownMenuLabel className="text-xs text-muted-foreground/70 font-normal px-2 pt-2">
|
const isSelected = model.id === selectedModel;
|
||||||
{group.label}
|
|
||||||
</DropdownMenuLabel>
|
|
||||||
{group.models.map((model) => {
|
|
||||||
const ModelIcon = model.icon || Cpu;
|
|
||||||
const isSelected = model.id === selectedModel;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
key={model.id}
|
key={model.id}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
onModelChange(model.id);
|
onModelChange(model.id);
|
||||||
setIsOpen(false);
|
setIsOpen(false);
|
||||||
}}
|
}}
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex items-start space-x-3 p-3 cursor-pointer",
|
"flex items-start space-x-3 p-3 cursor-pointer",
|
||||||
isSelected && "bg-muted/50"
|
isSelected && "bg-muted/50"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<ModelIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<span className="font-medium text-sm">{model.name}</span>
|
||||||
|
{isSelected && (
|
||||||
|
<Badge variant="secondary" className="text-xs">
|
||||||
|
已选择
|
||||||
|
</Badge>
|
||||||
)}
|
)}
|
||||||
>
|
</div>
|
||||||
<ModelIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
|
<p className="text-xs text-muted-foreground mt-0.5">
|
||||||
<div className="flex-1 min-w-0">
|
{model.description}
|
||||||
<div className="flex items-center space-x-2">
|
</p>
|
||||||
<span className="font-medium text-sm">{model.name}</span>
|
</div>
|
||||||
{isSelected && (
|
</DropdownMenuItem>
|
||||||
<Badge variant="secondary" className="text-xs">
|
);
|
||||||
已选择
|
})}
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<p className="text-xs text-muted-foreground mt-0.5">
|
|
||||||
{model.description}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -12,7 +12,14 @@ import {
|
|||||||
Trash2,
|
Trash2,
|
||||||
Download,
|
Download,
|
||||||
Search,
|
Search,
|
||||||
|
MoreVertical,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/ui/dropdown-menu";
|
||||||
import {
|
import {
|
||||||
Dialog,
|
Dialog,
|
||||||
DialogContent,
|
DialogContent,
|
||||||
@@ -109,106 +116,97 @@ export default function Sidebar({ onClose }: SidebarProps) {
|
|||||||
const groups = groupSessionsByDate(filteredSessions());
|
const groups = groupSessionsByDate(filteredSessions());
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="flex flex-col h-full">
|
||||||
<div className="flex flex-col h-full">
|
{/* Header */}
|
||||||
{/* Header */}
|
<div className="px-3 pt-4 pb-3 space-y-3 border-b border-border/30">
|
||||||
<div className="px-3 pt-4 pb-3 space-y-3 border-b border-border/30">
|
<div className="flex items-center justify-between px-1">
|
||||||
<div className="flex items-center justify-between px-1">
|
<span className="text-sm font-semibold text-foreground">对话</span>
|
||||||
<span className="text-sm font-semibold text-foreground">对话</span>
|
<Button onClick={handleNewChat} size="sm" variant="ghost" className="h-7 w-7 p-0 hover:bg-primary/10 hover:text-primary">
|
||||||
<Button onClick={handleNewChat} size="sm" variant="ghost" className="h-7 w-7 p-0 hover:bg-primary/10 hover:text-primary">
|
|
||||||
<Plus className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div className="relative">
|
|
||||||
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
|
|
||||||
<Input
|
|
||||||
placeholder="搜索"
|
|
||||||
value={searchQuery}
|
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
|
||||||
className="pl-8 h-8 text-sm bg-muted/30 border border-border/20 focus-visible:ring-1 focus-visible:border-primary/30"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Session list with date groups */}
|
|
||||||
<ScrollArea className="flex-1 px-2">
|
|
||||||
<div className="pb-4">
|
|
||||||
{groups.map(group => (
|
|
||||||
<div key={group.label} className="mb-3">
|
|
||||||
<div className="px-2 py-1.5 text-xs font-medium text-muted-foreground/70 uppercase tracking-wider">
|
|
||||||
{group.label}
|
|
||||||
</div>
|
|
||||||
<div className="space-y-0.5">
|
|
||||||
{group.sessions.map(session => (
|
|
||||||
<div
|
|
||||||
key={session.id}
|
|
||||||
className="relative rounded-lg cursor-pointer transition-colors hover:bg-muted/50"
|
|
||||||
style={{
|
|
||||||
backgroundColor: currentSession?.id === session.id ? 'var(--muted)' : undefined,
|
|
||||||
color: currentSession?.id === session.id ? 'var(--foreground)' : undefined
|
|
||||||
}}
|
|
||||||
onClick={() => handleSelectSession(session.id)}
|
|
||||||
>
|
|
||||||
{/* Title row */}
|
|
||||||
<div className="flex items-center gap-2 px-2.5 py-2 pr-28">
|
|
||||||
<MessageSquare className="w-3.5 h-3.5 text-muted-foreground flex-shrink-0" />
|
|
||||||
<span className="text-sm truncate">{session.title}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Action buttons — absolute positioned, always visible */}
|
|
||||||
<div
|
|
||||||
className="absolute right-1.5 top-1/2 -translate-y-1/2 flex items-center gap-1"
|
|
||||||
onClick={(e) => e.stopPropagation()}
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
className="inline-flex items-center justify-center w-7 h-7 rounded-md text-gray-500 hover:text-gray-800 hover:bg-gray-200 transition-colors"
|
|
||||||
title="重命名"
|
|
||||||
onClick={() => { setEditingSession(session.id); setEditTitle(session.title); }}
|
|
||||||
>
|
|
||||||
<Edit2 className="w-3.5 h-3.5" />
|
|
||||||
</button>
|
|
||||||
<ExportDialog sessionId={session.id} sessionTitle={session.title} onClose={() => {}}>
|
|
||||||
<button
|
|
||||||
className="inline-flex items-center justify-center w-7 h-7 rounded-md text-gray-500 hover:text-gray-800 hover:bg-gray-200 transition-colors"
|
|
||||||
title="导出"
|
|
||||||
>
|
|
||||||
<Download className="w-3.5 h-3.5" />
|
|
||||||
</button>
|
|
||||||
</ExportDialog>
|
|
||||||
<button
|
|
||||||
className="inline-flex items-center justify-center w-7 h-7 rounded-md text-gray-500 hover:text-red-600 hover:bg-red-50 transition-colors"
|
|
||||||
title="删除"
|
|
||||||
onClick={() => setDeleteSessionId(session.id)}
|
|
||||||
>
|
|
||||||
<Trash2 className="w-3.5 h-3.5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{sessions.length === 0 && (
|
|
||||||
<div className="text-center py-12">
|
|
||||||
<MessageSquare className="w-8 h-8 text-muted-foreground/40 mx-auto mb-2" />
|
|
||||||
<p className="text-xs text-muted-foreground">开始新的对话</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</ScrollArea>
|
|
||||||
|
|
||||||
{/* Footer — new chat button with distinct background */}
|
|
||||||
<div className="px-3 py-3 border-t border-border/30 bg-muted/20">
|
|
||||||
<Button
|
|
||||||
onClick={handleNewChat}
|
|
||||||
variant="outline"
|
|
||||||
className="w-full h-9 text-sm justify-center gap-2 border-dashed border-border/50 hover:bg-primary/5 hover:text-primary hover:border-primary/30"
|
|
||||||
>
|
|
||||||
<Plus className="w-4 h-4" />
|
<Plus className="w-4 h-4" />
|
||||||
新对话
|
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="relative">
|
||||||
|
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
|
||||||
|
<Input
|
||||||
|
placeholder="搜索"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
className="pl-8 h-8 text-sm bg-muted/30 border border-border/20 focus-visible:ring-1 focus-visible:border-primary/30"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Session list */}
|
||||||
|
<ScrollArea className="flex-1 px-2">
|
||||||
|
<div className="pb-4 w-full">
|
||||||
|
{groups.map(group => (
|
||||||
|
<div key={group.label} className="mb-3">
|
||||||
|
<div className="px-2 py-1.5 text-xs font-medium text-muted-foreground/70 uppercase tracking-wider">
|
||||||
|
{group.label}
|
||||||
|
</div>
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
{group.sessions.map(session => (
|
||||||
|
<div
|
||||||
|
key={session.id}
|
||||||
|
className={`group relative flex items-center gap-2 px-2.5 py-2 rounded-lg cursor-pointer transition-colors hover:bg-muted/50 overflow-hidden ${
|
||||||
|
currentSession?.id === session.id ? 'bg-muted' : ''
|
||||||
|
}`}
|
||||||
|
onClick={() => handleSelectSession(session.id)}
|
||||||
|
>
|
||||||
|
<MessageSquare className="w-3.5 h-3.5 text-muted-foreground flex-shrink-0" />
|
||||||
|
<span className="text-sm truncate min-w-0 w-0 flex-1">{session.title}</span>
|
||||||
|
|
||||||
|
{/* Dropdown menu — visible on hover */}
|
||||||
|
<div className="flex-shrink-0" onClick={(e) => e.stopPropagation()}>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<button className="h-6 w-6 inline-flex items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-all">
|
||||||
|
<MoreVertical className="w-3.5 h-3.5" />
|
||||||
|
</button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end" onClick={(e) => e.stopPropagation()}>
|
||||||
|
<DropdownMenuItem onSelect={() => { setEditingSession(session.id); setEditTitle(session.title); }}>
|
||||||
|
<Edit2 className="w-4 h-4 mr-2" />
|
||||||
|
重命名
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<ExportDialog sessionId={session.id} sessionTitle={session.title}>
|
||||||
|
<DropdownMenuItem onSelect={(e) => e.preventDefault()}>
|
||||||
|
<Download className="w-4 h-4 mr-2" />
|
||||||
|
导出
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</ExportDialog>
|
||||||
|
<DropdownMenuItem onSelect={() => setDeleteSessionId(session.id)} className="text-destructive">
|
||||||
|
<Trash2 className="w-4 h-4 mr-2" />
|
||||||
|
删除
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{sessions.length === 0 && (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<MessageSquare className="w-8 h-8 text-muted-foreground/40 mx-auto mb-2" />
|
||||||
|
<p className="text-xs text-muted-foreground">开始新的对话</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div className="px-3 py-3 border-t border-border/30 bg-muted/20">
|
||||||
|
<Button
|
||||||
|
onClick={handleNewChat}
|
||||||
|
variant="outline"
|
||||||
|
className="w-full h-9 text-sm justify-center gap-2 border-dashed border-border/50 hover:bg-primary/5 hover:text-primary hover:border-primary/30"
|
||||||
|
>
|
||||||
|
<Plus className="w-4 h-4" />
|
||||||
|
新对话
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Rename dialog */}
|
{/* Rename dialog */}
|
||||||
@@ -222,7 +220,7 @@ export default function Sidebar({ onClose }: SidebarProps) {
|
|||||||
value={editTitle}
|
value={editTitle}
|
||||||
onChange={(e) => setEditTitle(e.target.value)}
|
onChange={(e) => setEditTitle(e.target.value)}
|
||||||
placeholder="对话名称"
|
placeholder="对话名称"
|
||||||
onKeyDown={(e) => { if (e.key === 'Enter' && editTitle.trim()) handleSaveRename(); }}
|
onKeyDown={(e) => { if (e.key === "Enter" && editTitle.trim()) handleSaveRename(); }}
|
||||||
autoFocus
|
autoFocus
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -246,6 +244,6 @@ export default function Sidebar({ onClose }: SidebarProps) {
|
|||||||
</DialogFooter>
|
</DialogFooter>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
</>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user