Feat: Optimize the style of the chat page. (#13429)

### What problem does this PR solve?

Feat: Optimize the style of the chat page.
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/message-input/next.tsx

@@ -14,6 +14,7 @@ import {
 } from '@/components/file-upload';
 import { Button } from '@/components/ui/button';
 import { Textarea } from '@/components/ui/textarea';
+import { cn } from '@/lib/utils';
 import { t } from 'i18next';
 import {
   Atom,
@@ -246,8 +247,10 @@ export function NextMessageInput({
               <Button
                 type="button"
                 size="sm"
-                variant={enableThinking ? 'accent' : 'transparent'}
-                className="border-0 h-7 text-sm"
+                variant={'outline'}
+                className={cn('border-0 h-7 text-sm bg-bg-card', {
+                  'bg-text-primary text-bg-base': enableThinking,
+                })}
                 onClick={handleThinkingToggle}
                 data-testid="chat-detail-thinking-toggle"
               >

web/src/components/message-item/group-button.tsx

@@ -56,7 +56,10 @@ export const AssistantGroupButton = ({
 
   return (
     <>
-      <div className="flex gap-1" role="toolbar">
+      <div
+        className="flex gap-1 opacity-0 transition-opacity group-hover:opacity-100"
+        role="toolbar"
+      >
         <CopyToClipboard text={content} className="border-0" size="icon-xs" />
 
         {showLoudspeaker && (
@@ -152,7 +155,7 @@ export const UserGroupButton = ({
   const { t } = useTranslation();
 
   return (
-    <div className="flex gap-1">
+    <div className="flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
       <CopyToClipboard text={content} className="border-0" size="icon-xs" />
 
       {regenerateMessage && (

web/src/components/message-item/index.tsx

@@ -99,7 +99,7 @@ const MessageItem = ({
         })}
       >
         <div
-          className={classNames(styles.messageItemContent, {
+          className={classNames(styles.messageItemContent, 'group', {
             [styles.messageItemContentReverse]: item.role === MessageType.User,
           })}
         >

web/src/components/ui/button.tsx

@@ -55,6 +55,8 @@ const buttonVariants = cva(
           focus-visible:text-text-primary focus-visible:bg-border-button focus-visible:border-border-button
         `,
 
+        icon: 'bg-transparent text-foreground hover:bg-transparent/80',
+
         transparent: `
           text-text-secondary bg-transparent border-0.5 border-border-button
           hover:text-text-primary hover:bg-border-button