From c9125edb896cfdd93d8883b2df338b0fd0ab9a81 Mon Sep 17 00:00:00 2001
From: xintaofei <itpkcn@gmail.com>
Date: Wed, 11 Mar 2026 14:57:45 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BC=9A=E8=AF=9D=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=E6=A1=86=E5=9C=A8=E5=BD=93=E5=89=8D=E4=BC=9A=E8=AF=9D?=
 =?UTF-8?q?=E5=AE=BD=E5=BA=A6=E4=B8=8D=E8=B6=B3=E6=97=B6=E7=9A=84=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chat/message-input.tsx         | 78 +++++++++++++------
 src/components/chat/mode-selector.tsx         |  6 +-
 .../chat/session-config-selector.tsx          |  6 +-
 3 files changed, 61 insertions(+), 29 deletions(-)

diff --git a/src/components/chat/message-input.tsx b/src/components/chat/message-input.tsx
index f704005..1100ed9 100644
--- a/src/components/chat/message-input.tsx
+++ b/src/components/chat/message-input.tsx
@@ -7,8 +7,9 @@ import { open } from "@tauri-apps/plugin-dialog"
 import Image from "next/image"
 import { useTranslations } from "next-intl"
 import { Button } from "@/components/ui/button"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
 import { Textarea } from "@/components/ui/textarea"
-import { FileSearch, Plus, Send, Square, X } from "lucide-react"
+import { Ellipsis, FileSearch, Plus, Send, Square, X } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { readFileBase64 } from "@/lib/tauri"
 import { disposeTauriListener } from "@/lib/tauri-listener"
@@ -327,6 +328,8 @@ export function MessageInput({
     hasModes && Boolean(effectiveModeId) && !hasConfigOptions
   const showModeLoading = modeLoading && !hasConfigOptions && !showModeSelector
   const showConfigLoading = configOptionsLoading && !hasConfigOptions
+  const hasAnySelector =
+    showConfigLoading || hasConfigOptions || showModeLoading || showModeSelector
   const imageAttachments = useMemo(
     () =>
       attachments.filter(
@@ -996,6 +999,32 @@ export function MessageInput({
   const bottomPaddingClass = "pb-10"
   const showDragActive = isDragActive && !disabled && !isPrompting
 
+  const selectorItems = (
+    <>
+      {showConfigLoading && (
+        <SelectorLoadingChip label={t("loadingSettings")} />
+      )}
+      {hasConfigOptions &&
+        availableConfigOptions.map((option) => (
+          <SessionConfigSelector
+            key={option.id}
+            option={option}
+            onSelect={(configId, valueId) =>
+              onConfigOptionChange?.(configId, valueId)
+            }
+          />
+        ))}
+      {showModeLoading && <SelectorLoadingChip label={t("loadingMode")} />}
+      {showModeSelector && (
+        <ModeSelector
+          modes={availableModes}
+          selectedModeId={effectiveModeId!}
+          onSelect={handleModeSelect}
+        />
+      )}
+    </>
+  )
+
   return (
     <div
       ref={containerRef}
@@ -1091,8 +1120,8 @@ export function MessageInput({
           {t("dropFilesToAttach")}
         </div>
       )}
-      <div className="absolute left-2 right-24 bottom-2 flex flex-col gap-1">
-        <div className="flex items-center gap-1 overflow-x-auto">
+      <div className="@container absolute left-2 right-24 bottom-2">
+        <div className="flex items-center gap-1">
           <Button
             onClick={handlePickFiles}
             disabled={disabled || isPrompting}
@@ -1103,26 +1132,29 @@ export function MessageInput({
           >
             <Plus className="size-4" />
           </Button>
-          {showConfigLoading && (
-            <SelectorLoadingChip label={t("loadingSettings")} />
-          )}
-          {hasConfigOptions &&
-            availableConfigOptions.map((option) => (
-              <SessionConfigSelector
-                key={option.id}
-                option={option}
-                onSelect={(configId, valueId) =>
-                  onConfigOptionChange?.(configId, valueId)
-                }
-              />
-            ))}
-          {showModeLoading && <SelectorLoadingChip label={t("loadingMode")} />}
-          {showModeSelector && effectiveModeId && (
-            <ModeSelector
-              modes={availableModes}
-              selectedModeId={effectiveModeId}
-              onSelect={handleModeSelect}
-            />
+          {/* 宽屏内联显示，窄屏（<300px）通过"更多"气泡显示 */}
+          <div className="hidden @[300px]:contents">
+            {selectorItems}
+          </div>
+          {hasAnySelector && (
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6 shrink-0 @[300px]:hidden"
+                >
+                  <Ellipsis className="size-4" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent
+                side="top"
+                align="start"
+                className="flex w-auto flex-col gap-1 rounded-xl p-1"
+              >
+                {selectorItems}
+              </PopoverContent>
+            </Popover>
           )}
         </div>
       </div>
diff --git a/src/components/chat/mode-selector.tsx b/src/components/chat/mode-selector.tsx
index 85f84b6..925d082 100644
--- a/src/components/chat/mode-selector.tsx
+++ b/src/components/chat/mode-selector.tsx
@@ -34,11 +34,11 @@ export function ModeSelector({
         <Button
           variant="ghost"
           size="xs"
-          className={cn("gap-1", isActive && "text-primary")}
+          className={cn("gap-1 min-w-0", isActive && "text-primary")}
           title={selectedMode?.description ?? selectedMode?.name}
         >
-          {label}
-          <ChevronUp className="size-3" />
+          <span className="truncate">{label}</span>
+          <ChevronUp className="size-3 shrink-0" />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent side="top" align="start" className="min-w-72">
diff --git a/src/components/chat/session-config-selector.tsx b/src/components/chat/session-config-selector.tsx
index 6742aeb..781088f 100644
--- a/src/components/chat/session-config-selector.tsx
+++ b/src/components/chat/session-config-selector.tsx
@@ -39,11 +39,11 @@ export function SessionConfigSelector({
         <Button
           variant="ghost"
           size="xs"
-          className={cn("gap-1 shrink-0", isActive && "text-primary")}
+          className={cn("gap-1 min-w-0", isActive && "text-primary")}
           title={option.description ?? option.name}
         >
-          {label}
-          <ChevronUp className="size-3" />
+          <span className="truncate">{label}</span>
+          <ChevronUp className="size-3 shrink-0" />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent side="top" align="start" className="min-w-72">