feat: 优化聊天 UI

Co-authored-by: Copilot <copilot@github.com>

src/App.tsx

@@ -464,7 +464,7 @@ function AppContent() {
       return undefined
     }
 
-    const timeoutId = window.setTimeout(() => setNotice(null), 2600)
+    const timeoutId = window.setTimeout(() => setNotice(null), 600)
     return () => window.clearTimeout(timeoutId)
   }, [notice])
 
@@ -1677,7 +1677,7 @@ function AppContent() {
         onDeleteSession={deleteSession}
       />
 
-      <main className="main-panel min-w-0">
+      <main className="main-panel relative min-w-0">
         <header className="topbar border-b bg-background/95 px-3 py-2 backdrop-blur">
           <div className="topbar-left">
             <Button
@@ -1721,10 +1721,10 @@ function AppContent() {
         </header>
 
         {notice ? (
-          <div className="notice-wrap px-4 pt-3">
+          <div className="notice-wrap pointer-events-none absolute left-0 right-0 top-14 z-20 px-4 bg-background">
             <div
               className={cn(
-                "rounded-lg border px-3 py-2 text-sm",
+                "rounded-lg border px-3 py-2 text-sm shadow-sm",
                 notice.tone === "success" &&
                   "border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
                 notice.tone === "warning" &&

src/components/app/chat-view.tsx

@@ -452,9 +452,9 @@ function MessageItem({
   return (
     <article
       className={cn(
-        "message-row flex",
+        "message-row flex flex-col",
         message.role === "tool" && "gap-3",
-        isUserMessage ? "justify-end" : "justify-start"
+        isUserMessage ? "items-end" : "items-start"
       )}
     >
       {message.role === "tool" ? (
@@ -466,11 +466,11 @@ function MessageItem({
         className={cn(
           "message-bubble min-w-0",
           isUserMessage &&
-            "message-bubble-user max-w-[min(720px,88%)] px-4 py-3 text-foreground",
+          "message-bubble-user max-w-[min(720px,88%)] px-4 py-3 text-foreground",
           message.role === "assistant" &&
-            "message-bubble-assistant max-w-[min(760px,100%)] px-0 py-1 pl-2",
+          "message-bubble-assistant max-w-[min(760px,100%)] px-0 py-1 pl-2",
           message.role === "tool" &&
-            "message-bubble-tool max-w-[min(760px,90%)] rounded-lg border bg-background px-3 py-3"
+          "message-bubble-tool max-w-[min(760px,90%)] rounded-lg border bg-background px-3 py-3"
         )}
       >
         <div className="mb-2 flex flex-wrap items-center gap-2 text-xs opacity-75">
@@ -541,8 +541,8 @@ function MessageItem({
               </div>
             ) : null}
             {!message.content.trim() &&
-            !message.reasoningContent?.trim() &&
+              !message.reasoningContent?.trim() &&
-            !message.toolCalls?.length ? (
+              !message.toolCalls?.length ? (
               <MarkdownMessage content="..." />
             ) : null}
           </>
@@ -572,54 +572,54 @@ function MessageItem({
             {usage ? <span>Token {usage}</span> : null}
           </div>
         ) : null}
-        {!editing ? (
-          <div
-            className={cn(
-              "message-actions mt-2 flex flex-wrap gap-1",
-              isUserMessage ? "justify-end" : "justify-start"
-            )}
-          >
-            <Button
-              type="button"
-              size="icon-xs"
-              variant={isUserMessage ? "secondary" : "ghost"}
-              title="复制消息"
-              onClick={() => onCopy(getMessageCopyContent(message))}
-            >
-              <Copy />
-            </Button>
-            {isUserMessage ? (
-              <Button
-                type="button"
-                size="icon-xs"
-                variant="secondary"
-                title="编辑消息"
-                onClick={() => onEdit(message)}
-              >
-                <Edit3 />
-              </Button>
-            ) : null}
-            <Button
-              type="button"
-              size="icon-xs"
-              variant={isUserMessage ? "secondary" : "ghost"}
-              title="从此处分叉会话"
-              onClick={() => onFork(message.id)}
-            >
-              <GitFork />
-            </Button>
-            <Button
-              type="button"
-              size="icon-xs"
-              variant={isUserMessage ? "secondary" : "ghost"}
-              title="删除消息"
-              onClick={() => onDelete(message.id)}
-            >
-              <Trash2 />
-            </Button>
-          </div>
-        ) : null}
       </div>
+      {!editing ? (
+        <div
+          className={cn(
+            "message-actions mt-2 flex flex-wrap gap-1",
+            isUserMessage ? "justify-end" : "justify-start"
+          )}
+        >
+          <Button
+            type="button"
+            size="icon-xs"
+            variant={isUserMessage ? "secondary" : "ghost"}
+            title="复制消息"
+            onClick={() => onCopy(getMessageCopyContent(message))}
+          >
+            <Copy />
+          </Button>
+          {isUserMessage ? (
+            <Button
+              type="button"
+              size="icon-xs"
+              variant="secondary"
+              title="编辑消息"
+              onClick={() => onEdit(message)}
+            >
+              <Edit3 />
+            </Button>
+          ) : null}
+          <Button
+            type="button"
+            size="icon-xs"
+            variant={isUserMessage ? "secondary" : "ghost"}
+            title="从此处分叉会话"
+            onClick={() => onFork(message.id)}
+          >
+            <GitFork />
+          </Button>
+          <Button
+            type="button"
+            size="icon-xs"
+            variant={isUserMessage ? "secondary" : "ghost"}
+            title="删除消息"
+            onClick={() => onDelete(message.id)}
+          >
+            <Trash2 />
+          </Button>
+        </div>
+      ) : null}
     </article>
   )
 }