From e1bfac3da08098a2dc2e426befab02519d1ab40e Mon Sep 17 00:00:00 2001
From: ZhenYi <434836402@qq.com>
Date: Mon, 18 May 2026 21:15:05 +0800
Subject: [PATCH] refactor(ui): remove excessive hover/focus/shadow effects
 from chat page

---
 src/app/chat/ChatConversationList.tsx |  4 ++--
 src/app/chat/ChatHeader.tsx           |  4 ----
 src/app/chat/ChatMessageBubble.tsx    | 16 ++++++++--------
 src/app/chat/ChatMessageInput.tsx     |  6 +++---
 src/app/chat/ChatMessageList.tsx      |  6 +++---
 src/app/chat/ChatModelSelector.tsx    |  4 ++--
 src/app/chat/ChatSlashCommandMenu.tsx |  4 ++--
 src/components/ui/card.tsx            |  2 +-
 src/components/ui/input-group.tsx     |  2 +-
 9 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/src/app/chat/ChatConversationList.tsx b/src/app/chat/ChatConversationList.tsx
index 7dd0683..6a1468a 100644
--- a/src/app/chat/ChatConversationList.tsx
+++ b/src/app/chat/ChatConversationList.tsx
@@ -187,7 +187,7 @@ export function ChatConversationList({
         <div className="flex items-center gap-0.5">
           <button
             onClick={() => setIsSearchOpen(!isSearchOpen)}
-            className="flex size-8 items-center justify-center rounded-full transition-colors hover:bg-[var(--hover-bg)]"
+            className="flex size-8 items-center justify-center rounded-full"
             style={{ color: "var(--text-muted)" }}
             title={t("navigation.search_shortcut")}
           >
@@ -196,7 +196,7 @@ export function ChatConversationList({
           <button
             onClick={handleNew}
             disabled={createMutation.isPending}
-            className="flex size-8 items-center justify-center rounded-full transition-colors hover:bg-[var(--hover-bg)]"
+            className="flex size-8 items-center justify-center rounded-full"
             style={{ color: "var(--text-secondary)" }}
             title={t("chat.header.new_chat")}
           >
diff --git a/src/app/chat/ChatHeader.tsx b/src/app/chat/ChatHeader.tsx
index 77d29cf..bb6f68e 100644
--- a/src/app/chat/ChatHeader.tsx
+++ b/src/app/chat/ChatHeader.tsx
@@ -31,10 +31,6 @@ export function ChatHeader({
   return (
     <div
       className="sticky top-0 z-10 flex h-12 shrink-0 items-center justify-between border-b border-border/60 bg-background/85 px-4 backdrop-blur-xl supports-[backdrop-filter]:bg-background/70"
-      style={{
-        boxShadow:
-          "0 1px 0 color-mix(in oklch, var(--border) 60%, transparent)",
-      }}
     >
       <div className="flex min-w-0 items-center gap-2.5">
         <Button
diff --git a/src/app/chat/ChatMessageBubble.tsx b/src/app/chat/ChatMessageBubble.tsx
index 449c635..993662b 100644
--- a/src/app/chat/ChatMessageBubble.tsx
+++ b/src/app/chat/ChatMessageBubble.tsx
@@ -209,7 +209,7 @@ export const ChatMessageBubble = memo(function ChatMessageBubble({
   }
 
   return (
-    <div className="group mx-auto flex w-full max-w-3xl gap-4 rounded-2xl border border-transparent px-4 py-4 transition-colors hover:border-[var(--border-subtle)] hover:bg-[var(--surface-secondary)]/40">
+    <div className="group mx-auto flex w-full max-w-3xl gap-4 rounded-2xl border border-transparent px-4 py-4">
       {/* Avatar */}
       <div className="shrink-0 pt-0.5">
         {isUser ? (
@@ -409,7 +409,7 @@ export const ChatMessageBubble = memo(function ChatMessageBubble({
         {message.version_number > 1 && (
           <button
             onClick={() => setShowVersions(!showVersions)}
-            className="mt-2 inline-flex items-center gap-2 rounded-full border border-[var(--border-subtle)] bg-[var(--surface-secondary)] px-2.5 py-1 text-[11px] text-muted-foreground transition-colors hover:border-[var(--border-default)] hover:bg-[var(--surface-elevated)]"
+            className="mt-2 inline-flex items-center gap-2 rounded-full border border-[var(--border-subtle)] bg-[var(--surface-secondary)] px-2.5 py-1 text-[11px] text-muted-foreground"
           >
             <span className="font-medium text-[var(--text-primary)]">
               v{message.version_number}
@@ -427,7 +427,7 @@ export const ChatMessageBubble = memo(function ChatMessageBubble({
                 <button
                   key={v.id}
                   onClick={() => handleSwitchVersion(v.version_number)}
-                  className="flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left transition-colors hover:bg-[var(--hover-bg)]"
+                  className="flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left"
                   style={{
                     color:
                       v.version_number === message.version_number
@@ -467,7 +467,7 @@ export const ChatMessageBubble = memo(function ChatMessageBubble({
           <div className="mt-2 flex flex-wrap items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
             <button
               onClick={handleStartEdit}
-              className="inline-flex items-center gap-1 rounded-full border border-transparent px-2.5 py-1 text-[11px] transition-colors hover:border-[var(--border-subtle)] hover:bg-[var(--surface-elevated)]"
+              className="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-[11px]"
               style={{ color: "var(--text-muted)" }}
             >
               <Pencil className="size-3" />
@@ -476,7 +476,7 @@ export const ChatMessageBubble = memo(function ChatMessageBubble({
             {onRegenerate && (
               <button
                 onClick={handleRegenerate}
-                className="inline-flex items-center gap-1 rounded-full border border-transparent px-2.5 py-1 text-[11px] transition-colors hover:border-[var(--border-subtle)] hover:bg-[var(--surface-elevated)]"
+                className="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-[11px]"
                 style={{ color: "var(--text-muted)" }}
               >
                 <RefreshCw className="size-3" />
@@ -491,7 +491,7 @@ export const ChatMessageBubble = memo(function ChatMessageBubble({
           <div className="mt-2 flex flex-wrap items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
             <button
               onClick={handleCopyAnswer}
-              className="inline-flex items-center gap-1 rounded-full border border-transparent px-2.5 py-1 text-[11px] transition-colors hover:border-[var(--border-subtle)] hover:bg-[var(--surface-elevated)]"
+              className="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-[11px]"
               style={{ color: "var(--text-muted)" }}
             >
               {copied === "answer" ? (
@@ -504,7 +504,7 @@ export const ChatMessageBubble = memo(function ChatMessageBubble({
             {hasThinking && (
               <button
                 onClick={handleCopyFull}
-                className="inline-flex items-center gap-1 rounded-full border border-transparent px-2.5 py-1 text-[11px] transition-colors hover:border-[var(--border-subtle)] hover:bg-[var(--surface-elevated)]"
+                className="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-[11px]"
                 style={{ color: "var(--text-muted)" }}
               >
                 {copied === "full" ? (
@@ -517,7 +517,7 @@ export const ChatMessageBubble = memo(function ChatMessageBubble({
             )}
             <button
               onClick={handleFork}
-              className="inline-flex items-center gap-1 rounded-full border border-transparent px-2.5 py-1 text-[11px] transition-colors hover:border-[var(--border-subtle)] hover:bg-[var(--surface-elevated)]"
+              className="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-[11px]"
               style={{ color: "var(--text-muted)" }}
             >
               <GitFork className="size-3" />
diff --git a/src/app/chat/ChatMessageInput.tsx b/src/app/chat/ChatMessageInput.tsx
index 384efc6..9f83d91 100644
--- a/src/app/chat/ChatMessageInput.tsx
+++ b/src/app/chat/ChatMessageInput.tsx
@@ -346,7 +346,7 @@ export function ChatMessageInput({
 
         {showModelWarning && (
           <div
-            className="absolute -top-11 right-0 left-0 flex animate-bounce items-center justify-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium shadow-sm"
+            className="absolute -top-11 right-0 left-0 flex animate-bounce items-center justify-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium"
             style={{
               backgroundColor: "var(--accent-muted)",
               color: "var(--accent)",
@@ -359,7 +359,7 @@ export function ChatMessageInput({
           </div>
         )}
 
-        <Card className="overflow-hidden border border-[var(--border-subtle)] bg-[var(--surface-secondary)]/80 shadow-lg backdrop-blur">
+        <Card className="overflow-hidden border border-[var(--border-subtle)] bg-[var(--surface-secondary)]/80 backdrop-blur">
           <PromptInput onSubmit={handleSubmit}>
             <PromptInputBody>
               {selectedContexts.length > 0 && (
@@ -381,7 +381,7 @@ export function ChatMessageInput({
                       </span>
                       <button
                         type="button"
-                        className="inline-flex items-center justify-center rounded-full opacity-70 transition-opacity hover:opacity-100"
+                        className="inline-flex items-center justify-center rounded-full opacity-70 transition-opacity"
                         onClick={() =>
                           setSelectedContexts((current) =>
                             current.filter(
diff --git a/src/app/chat/ChatMessageList.tsx b/src/app/chat/ChatMessageList.tsx
index 5f940eb..f5cde29 100644
--- a/src/app/chat/ChatMessageList.tsx
+++ b/src/app/chat/ChatMessageList.tsx
@@ -178,7 +178,7 @@ export function ChatMessageList({
             {PROMPT_SUGGESTIONS.map((s, i) => (
               <button
                 key={i}
-                className="flex items-start gap-2.5 rounded-2xl border border-[var(--border-subtle)] bg-[var(--surface-ground)] p-4 text-left transition-all duration-200 hover:-translate-y-0.5 hover:border-[var(--border-default)] hover:bg-[var(--surface-elevated)] hover:shadow-sm"
+                className="flex items-start gap-2.5 rounded-2xl border border-[var(--border-subtle)] bg-[var(--surface-ground)] p-4 text-left"
                 style={{
                   color: "var(--text-secondary)",
                 }}
@@ -217,7 +217,7 @@ export function ChatMessageList({
     >
       {isStreaming && userScrolledUp && (
         <div
-          className="absolute bottom-3 left-1/2 z-10 -translate-x-1/2 cursor-pointer rounded-full border px-4 py-1.5 shadow-lg transition-all hover:scale-105"
+          className="absolute bottom-3 left-1/2 z-10 -translate-x-1/2 cursor-pointer rounded-full border px-4 py-1.5"
           style={{
             backgroundColor: "var(--surface-elevated)",
             borderColor: "var(--border-subtle)",
@@ -401,7 +401,7 @@ function StreamingBubble({
   return (
     <div
       ref={contentRef}
-      className="mx-auto flex w-full max-w-3xl gap-4 rounded-2xl border border-[var(--border-subtle)] bg-[var(--surface-secondary)]/70 px-4 py-3 shadow-sm backdrop-blur"
+      className="mx-auto flex w-full max-w-3xl gap-4 rounded-2xl border border-[var(--border-subtle)] bg-[var(--surface-secondary)]/70 px-4 py-3 backdrop-blur"
     >
       <div className="shrink-0 pt-0.5">
         <StreamingModelAvatar modelName={selectedModel?.model_name} size={28} />
diff --git a/src/app/chat/ChatModelSelector.tsx b/src/app/chat/ChatModelSelector.tsx
index 3f09191..caaa4bb 100644
--- a/src/app/chat/ChatModelSelector.tsx
+++ b/src/app/chat/ChatModelSelector.tsx
@@ -135,7 +135,7 @@ export function ChatModelSelector({
   return (
     <ModelSelector open={open} onOpenChange={setOpen}>
       <ModelSelectorTrigger asChild>
-        <button className="inline-flex items-center gap-2 rounded-full border border-[var(--border-subtle)] bg-[var(--surface-elevated)] px-3 py-1.5 text-xs font-medium text-[var(--text-primary)] shadow-sm transition-all hover:-translate-y-0.5 hover:border-[var(--border-default)] hover:bg-[var(--surface-secondary)]">
+        <button className="inline-flex items-center gap-2 rounded-full border border-[var(--border-subtle)] bg-[var(--surface-elevated)] px-3 py-1.5 text-xs font-medium text-[var(--text-primary)]">
           {selectedModel ? (
             <ModelAvatar modelName={selectedModel.model_name} size={18} />
           ) : (
@@ -155,7 +155,7 @@ export function ChatModelSelector({
 
       <ModelSelectorContent
         title={t("chat.model_selector.search_placeholder")}
-        className="w-[min(92vw,38rem)] overflow-hidden rounded-2xl border border-[var(--border-subtle)] bg-[var(--surface-elevated)] p-0 shadow-2xl"
+        className="w-[min(92vw,38rem)] overflow-hidden rounded-2xl border border-[var(--border-subtle)] bg-[var(--surface-elevated)] p-0"
       >
         <div className="flex items-center justify-between gap-3 border-b border-[var(--border-subtle)] bg-[var(--surface-secondary)]/70 px-4 py-3">
           <div className="min-w-0">
diff --git a/src/app/chat/ChatSlashCommandMenu.tsx b/src/app/chat/ChatSlashCommandMenu.tsx
index 04f4b43..98a36a2 100644
--- a/src/app/chat/ChatSlashCommandMenu.tsx
+++ b/src/app/chat/ChatSlashCommandMenu.tsx
@@ -38,7 +38,7 @@ export function ChatSlashCommandMenu({
 
   return (
     <div
-      className="absolute inset-x-0 bottom-full z-20 mb-2 overflow-hidden rounded-2xl border shadow-2xl"
+      className="absolute inset-x-0 bottom-full z-20 mb-2 overflow-hidden rounded-2xl border"
       style={{
         backgroundColor: "var(--surface-elevated)",
         borderColor: "var(--border-subtle)",
@@ -76,7 +76,7 @@ export function ChatSlashCommandMenu({
                   type="button"
                   onMouseEnter={() => onHoverIndex(index)}
                   onClick={() => onPickItem(item)}
-                  className="flex w-full items-start justify-between gap-3 rounded-xl px-3 py-2 text-left transition-colors"
+                  className="flex w-full items-start justify-between gap-3 rounded-xl px-3 py-2 text-left"
                   style={{
                     backgroundColor:
                       activeIndex === index ? "var(--hover-bg)" : "transparent",
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 40cac5f..2dd6626 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -12,7 +12,7 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
         className
       )}
       {...props}
diff --git a/src/components/ui/input-group.tsx b/src/components/ui/input-group.tsx
index 256ba4b..3ef9ec9 100644
--- a/src/components/ui/input-group.tsx
+++ b/src/components/ui/input-group.tsx
@@ -14,7 +14,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="input-group"
       role="group"
       className={cn(
-        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg outline-none has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
         className
       )}
       {...props}