优化模型选择弹窗视觉细节与图标样式

components/multimodal-input.tsx

@@ -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)]">
+      <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-[312px] space-y-1 overflow-y-auto pr-1">
+        <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",
+                "h-11 rounded-[14px] px-3 text-[#2f3640] [&>span:first-child]:hidden",
-                "focus:bg-[#dfe2e6] focus:text-[#1f2937]",
+                "focus:bg-[#d9dde3] focus:text-[#1f2937]",
-                "data-[state=checked]:bg-[#dfe2e6] data-[state=checked]: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]">
+                      <span className="flex h-5 w-5 items-center justify-center">
-                        {model.id === "auto" ? "A" : model.displayName.slice(0, 1)}
+                        {(() => {
+                          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 ? (
+                {optimisticModelId === model.id ? (
-                  <span className="text-sm font-semibold text-[#1f2937]">✓</span>
+                  <span className="text-[18px] font-semibold text-[#1f2937]">✓</span>
                 ) : null}
               </span>
             </SelectItem>