lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化模型选择弹窗视觉细节与图标样式
Some checks failed
Lint / build (20) (push) Has been cancelled
Details
Playwright Tests / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Your Name 2026-02-14 21:09:32 +08:00
parent 7cebce517c
commit b1ce1aeefe
1 changed files with 35 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
components/multimodal-input.tsx
View File

@ -1,13 +1,16 @@
"use client";
import type { UseChatHelpers } from "@ai-sdk/react";
import { Bot, ImageIcon, Sparkles, Video } from "lucide-react";
// 动态模型类型定义
type DynamicModel = {
id: string;
modelId?: string;
displayName: string;
avatarUrl?: string | null;
description: string | null;
providerType?: string;
supportsVision: boolean;
isDefault: boolean;
providerName: string;
@ -1059,9 +1062,11 @@ function PureModelSelectorCompact({
// 定义自动模式
const autoModel: DynamicModel = {
id: "auto",
modelId: "auto",
displayName: "Agent模式",
avatarUrl: null,
description: "根据您的意图自动选择最合适的模型",
providerType: "system",
supportsVision: true,
isDefault: false,
providerName: "System",
@ -1178,40 +1183,58 @@ function PureModelSelectorCompact({
<ChevronDownIcon size={16} />
</Button>
</Trigger>
<PromptInputModelSelectContent className="w-[248px] max-h-[340px] overflow-hidden rounded-[18px] border border-[#cfd4dc] bg-[#f3f4f6] p-1.5 shadow-[0_8px_20px_rgba(15,23,42,0.13)]">
<div className="max-h-[312px] space-y-1 overflow-y-auto pr-1">
<PromptInputModelSelectContent className="!w-[286px] max-h-[372px] overflow-hidden rounded-[22px] border border-[#bfc6cf] bg-[#f2f3f5] p-2 shadow-[0_10px_24px_rgba(15,23,42,0.12)]">
<div className="max-h-[338px] space-y-1 overflow-y-auto pr-1">
{displayModels.map((model) => (
<SelectItem
key={model.id}
value={model.id}
className={cn(
"h-9 rounded-xl px-2.5 text-[#2f3640] [&>span:first-child]:hidden",
"focus:bg-[#dfe2e6] focus:text-[#1f2937]",
"data-[state=checked]:bg-[#dfe2e6] data-[state=checked]:text-[#1f2937]",
"h-11 rounded-[14px] px-3 text-[#2f3640] [&>span:first-child]:hidden",
"focus:bg-[#d9dde3] focus:text-[#1f2937]",
"data-[state=checked]:bg-[#d2d7de] data-[state=checked]:text-[#1f2937]",
model.isSubModel ? "pl-8" : ""
)}
>
<span className="flex w-full items-center justify-between gap-2">
<span className="flex min-w-0 items-center gap-2">
<span className="h-5 w-5 overflow-hidden rounded-full border border-[#d4d9df] bg-white">
<span className="flex h-5 w-5 items-center justify-center text-[#2f3640]">
{model.avatarUrl ? (
<img
src={model.avatarUrl}
alt={model.displayName}
className="h-full w-full object-cover"
className="h-5 w-5 rounded-full object-cover"
/>
) : (
<span className="flex h-full w-full items-center justify-center text-[9px] font-medium text-[#6b7280]">
{model.id === "auto" ? "A" : model.displayName.slice(0, 1)}
<span className="flex h-5 w-5 items-center justify-center">
{(() => {
const providerType = model.providerType || "";
if (providerType === "volcano-video" || providerType === "qianwen-video" || providerType === "fal-video") {
return <Video className="h-4 w-4" strokeWidth={2.2} />;
}
if (
providerType === "gemini" ||
providerType === "volcano-vision" ||
providerType === "alibaba-image" ||
providerType === "ruxa-image" ||
providerType === "fal-image"
) {
return <ImageIcon className="h-4 w-4" strokeWidth={2.2} />;
}
if (providerType === "system") {
return <Sparkles className="h-4 w-4" strokeWidth={2.2} />;
}
return <Bot className="h-4 w-4" strokeWidth={2.2} />;
})()}
</span>
)}
</span>
<span className="truncate text-[12px] font-medium leading-none">
<span className="truncate text-[13px] font-medium leading-none">
{model.isSubModel ? `└ ${model.displayName}` : model.displayName}
</span>
</span>
{selectedModel?.id === model.id ? (
<span className="text-sm font-semibold text-[#1f2937]">✓</span>
{optimisticModelId === model.id ? (
<span className="text-[18px] font-semibold text-[#1f2937]">✓</span>
) : null}
</span>
</SelectItem>