feat: remove model header constant in chat model picker

Author: chenyme

frontend/components/ui/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "h-8 w-full min-w-0 rounded-md border border-input/40 bg-transparent px-3 py-1 text-xs shadow-none transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-8 file:border-0 file:bg-transparent file:text-xs file:font-medium file:text-foreground placeholder:text-xs placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-xs dark:bg-input/30",
+        "h-8 w-full min-w-0 rounded-md border border-input/40 bg-transparent px-3 py-1 text-xs shadow-none transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-8 file:border-0 file:bg-transparent file:text-xs file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-xs dark:bg-input/30",
         "focus-visible:border-ring/60 focus-visible:ring-[1px] focus-visible:ring-ring/40",
         "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
         className

frontend/components/ui/textarea.tsx

@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex field-sizing-content min-h-16 w-full rounded-md border border-input/40 bg-transparent px-3 py-2 text-xs shadow-none transition-[color,box-shadow] outline-none placeholder:text-muted-foreground placeholder:text-xs focus-visible:border-ring/60 focus-visible:ring-[1px] focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input/40 bg-transparent px-3 py-2 text-xs shadow-none transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring/60 focus-visible:ring-[1px] focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}

frontend/features/chat/components/sections/chat-model-picker.tsx

@@ -20,7 +20,7 @@ import { cn } from "@/lib/utils";
 const MODEL_MENU_MAX_HEIGHT = 320;
 const MODEL_MENU_VENDOR_ROW_HEIGHT = 28;
 const MODEL_MENU_MODEL_ROW_HEIGHT = 28;
-const MODEL_MENU_MODEL_HEADER_HEIGHT = 28;
+const MODEL_MENU_MODEL_PANEL_CHROME_HEIGHT = 12;
 const MODEL_MENU_TEXT_WIDTH_UNIT = 7;
 const MODEL_MENU_CONTENT_GAP_WIDTH = 56;
 const MODEL_MENU_VIEWPORT_GUTTER = 24;
@@ -549,7 +549,7 @@ export function ChatModelPicker({
       return resolveModelMenuMaxHeight(
         activeDesktopVendorGroup?.items.length ?? 0,
         MODEL_MENU_MODEL_ROW_HEIGHT,
-        MODEL_MENU_MODEL_HEADER_HEIGHT + 12,
+        MODEL_MENU_MODEL_PANEL_CHROME_HEIGHT,
       );
     },
     [activeDesktopVendorGroup, desktopModelPanelLayout],
@@ -662,23 +662,23 @@ export function ChatModelPicker({
       desktopModelMenuWidthValue,
       Math.max(0, window.innerWidth - MODEL_MENU_COLLISION_GUTTER * 2),
     );
-    const headerAndPaddingHeight = MODEL_MENU_MODEL_HEADER_HEIGHT + 12;
+    const panelChromeHeight = MODEL_MENU_MODEL_PANEL_CHROME_HEIGHT;
     const contentHeight = Math.min(activeDesktopVendorGroup.items.length * MODEL_MENU_MODEL_ROW_HEIGHT, MODEL_MENU_MAX_HEIGHT);
     const initialListHeight = Math.min(
       contentHeight,
       Math.max(
         MODEL_MENU_MODEL_ROW_HEIGHT,
-        window.innerHeight - menuRect.top - MODEL_MENU_COLLISION_GUTTER - headerAndPaddingHeight,
+        window.innerHeight - menuRect.top - MODEL_MENU_COLLISION_GUTTER - panelChromeHeight,
       ),
     );
-    const initialPanelHeight = headerAndPaddingHeight + initialListHeight;
+    const initialPanelHeight = panelChromeHeight + initialListHeight;
     const y = Math.min(
       Math.max(menuRect.top, MODEL_MENU_COLLISION_GUTTER),
       Math.max(MODEL_MENU_COLLISION_GUTTER, window.innerHeight - initialPanelHeight - MODEL_MENU_COLLISION_GUTTER),
     );
     const listMaxHeight = Math.min(
       contentHeight,
-      Math.max(MODEL_MENU_MODEL_ROW_HEIGHT, window.innerHeight - y - MODEL_MENU_COLLISION_GUTTER - headerAndPaddingHeight),
+      Math.max(MODEL_MENU_MODEL_ROW_HEIGHT, window.innerHeight - y - MODEL_MENU_COLLISION_GUTTER - panelChromeHeight),
     );
     const rightX = menuRect.right + MODEL_MENU_PANEL_GAP;
     const leftX = menuRect.left - MODEL_MENU_PANEL_GAP - panelWidth;
@@ -898,17 +898,6 @@ export function ChatModelPicker({
               width: desktopModelPanelLayout.width,
             }}
           >
-            <div className="flex h-7 items-center justify-between gap-3 px-2">
-              <span className="flex min-w-0 items-center gap-2">
-                <LobeHubIcon iconUrl={resolveLobeHubIconURL(activeDesktopVendorGroup.icon)} label={activeDesktopVendorGroup.label} />
-                <span className="truncate text-[11px] font-medium text-foreground">
-                  {activeDesktopVendorGroup.label}
-                </span>
-              </span>
-              <span className="text-[10px] font-medium text-muted-foreground">
-                {activeDesktopVendorGroup.items.length}
-              </span>
-            </div>
             <ModelMenuScrollContainer maxHeight={desktopModelMenuMaxHeight}>
               <div className="flex flex-col gap-0.5">
                 {activeDesktopVendorGroup.items.map((item) => (