From aea43cfc104c7a4fef88c62681e0f4fcd2aadea7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Wed, 22 Jul 2026 11:03:44 +0800
Subject: [PATCH] style: update editor agent conversation selection UI

---
 .../EditorAgentConversationPanelView.tsx      | 82 ++++++++++++-------
 1 file changed, 54 insertions(+), 28 deletions(-)

diff --git a/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.tsx b/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.tsx
index 80ae0a832..d047a8965 100644
--- a/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.tsx
+++ b/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.tsx
@@ -1,5 +1,6 @@
 import {
   Bot,
+  ChevronDown,
   Loader2,
   MessageCircle,
   Paperclip,
@@ -251,6 +252,7 @@ export function EditorAgentConversationPanelView({
   const effectiveProjectId = hasConversationMounted ? projectId : null;
   const {
     conversations,
+    activeConversation,
     activeConversationId,
     messages,
     isLoadingConversations,
@@ -308,6 +310,9 @@ export function EditorAgentConversationPanelView({
   const hasProject = Boolean(projectId?.trim());
   const isConversationBusy = isWaiting || isToolCallActionPending;
   const hasCurrentConversationContent = messages.length > 0;
+  const isConversationSelectDisabled =
+    !conversations.length || isLoadingConversations || isConversationBusy;
+  const currentConversationTitle = activeConversation?.title ?? '新对话';
 
   const handleCreateConversation = () => {
     void createConversation()
@@ -525,35 +530,56 @@ export function EditorAgentConversationPanelView({
       >
         <header className="flex items-center gap-2 border-b border-slate-200 bg-white/90 px-3 py-3">
           <Bot className="h-5 w-5 text-slate-700" aria-hidden="true" />
-          <select
-            className="min-w-0 flex-1 rounded-full border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
-            aria-label="当前对话"
-            value={activeConversationId ?? ''}
-            disabled={
-              !conversations.length ||
-              isLoadingConversations ||
-              isConversationBusy
-            }
-            onChange={(event) => {
-              const nextConversationId = event.currentTarget.value;
-              if (nextConversationId) {
-                void selectConversation(nextConversationId);
-              }
-            }}
+          <div
+            className="relative min-w-0 flex-1 rounded-full focus-within:ring-2 focus-within:ring-slate-300"
+            title={currentConversationTitle}
           >
-            {conversations.length ? (
-              conversations.map((conversation) => (
-                <option
-                  key={conversation.conversationId}
-                  value={conversation.conversationId}
-                >
-                  {conversation.title}
-                </option>
-              ))
-            ) : (
-              <option value="">新对话</option>
-            )}
-          </select>
+            <div
+              className={`pointer-events-none flex h-9 w-full items-center rounded-full border border-slate-200 bg-white px-3 pr-10 text-sm ${
+                isConversationSelectDisabled
+                  ? 'text-slate-400'
+                  : 'text-slate-800'
+              }`}
+              aria-hidden="true"
+            >
+              <span
+                className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap"
+                data-testid="active-conversation-title"
+              >
+                {currentConversationTitle}
+              </span>
+              <ChevronDown
+                className="absolute right-[10px] top-1/2 h-4 w-4 -translate-y-1/2"
+                data-testid="conversation-switch-chevron"
+                aria-hidden="true"
+              />
+            </div>
+            <select
+              className="absolute inset-0 z-10 h-full w-full cursor-pointer appearance-none opacity-0 disabled:cursor-not-allowed"
+              aria-label="当前对话"
+              value={activeConversationId ?? ''}
+              disabled={isConversationSelectDisabled}
+              onChange={(event) => {
+                const nextConversationId = event.currentTarget.value;
+                if (nextConversationId) {
+                  void selectConversation(nextConversationId);
+                }
+              }}
+            >
+              {conversations.length ? (
+                conversations.map((conversation) => (
+                  <option
+                    key={conversation.conversationId}
+                    value={conversation.conversationId}
+                  >
+                    {conversation.title}
+                  </option>
+                ))
+              ) : (
+                <option value="">新对话</option>
+              )}
+            </select>
+          </div>
           <button
             type="button"
             className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-slate-900 text-white disabled:opacity-45"