style: update chat background colors and margins for improved UI consistency

src/renderer/src/assets/styles/color.scss

@@ -66,9 +66,9 @@
   --settings-width: 250px;
   --scrollbar-width: 5px;
 
-  --chat-background: #111111;
+  --chat-background: transparent;
-  --chat-background-user: #28b561;
+  --chat-background-user: #232325;
-  --chat-background-assistant: #2c2c2c;
+  --chat-background-assistant: transparent;
   --chat-text-user: var(--color-black);
 
   --list-item-border-radius: 8px;
@@ -133,9 +133,9 @@
   --navbar-background-mac: rgba(255, 255, 255, 0.55);
   --navbar-background: rgba(244, 244, 244);
 
-  --chat-background: #f3f3f3;
+  --chat-background: transparent;
-  --chat-background-user: #95ec69;
+  --chat-background-user: #f3f3f3;
-  --chat-background-assistant: #ffffff;
+  --chat-background-assistant: transparent;
   --chat-text-user: var(--color-text);
 
   --border-width: 0.5px;

src/renderer/src/assets/styles/index.scss

@@ -119,32 +119,21 @@ ul {
   #messages {
     background-color: var(--chat-background);
   }
-  #inputbar {
-    margin: -5px 15px 15px 15px;
-    background: var(--color-background);
-  }
   .system-prompt {
     background-color: var(--chat-background-assistant);
   }
   .message-content-container {
     margin: 5px 0;
     border-radius: 8px;
-    padding: 10px 15px 0 15px;
   }
   .message-thought-container {
     margin-top: 8px;
   }
   .message-user {
-    color: var(--chat-text-user);
+    .message-content-container {
-    .markdown,
+      margin: 5px 0;
-    .anticon,
+      border-radius: 8px 0 8px 8px;
-    .iconfont,
+      padding: 10px 15px 0 15px;
-    .lucide,
-    .message-tokens {
-      color: var(--chat-text-user) !important;
-    }
-    .message-action-button:hover {
-      background-color: var(--color-white-soft);
     }
   }
   .group-grid-container.horizontal,

src/renderer/src/pages/home/Chat.tsx

@@ -132,10 +132,7 @@ const Chat: FC<Props> = (props) => {
 }
 
 const Container = styled.div`
-  display: flex;
-  flex-direction: row;
   height: 100%;
-  flex: 1;
 `
 
 const Main = styled(Flex)`

src/renderer/src/pages/home/HomePage.tsx

@@ -68,15 +68,13 @@ const HomePage: FC = () => {
 }
 
 const Container = styled.div`
+  min-width: 0;
   display: flex;
   flex: 1;
   flex-direction: column;
 `
 
 const ContentContainer = styled.div`
-  display: flex;
-  flex: 1;
-  flex-direction: row;
   overflow: hidden;
 `
 

src/renderer/src/pages/home/Inputbar/Inputbar.tsx

@@ -912,7 +912,7 @@ const InputBarContainer = styled.div`
   border: 0.5px solid var(--color-border);
   transition: all 0.2s ease;
   position: relative;
-  margin: 14px 20px;
+  margin: 16px 16px;
   margin-top: 0;
   border-radius: 15px;
   padding-top: 6px; // 为拖动手柄留出空间

src/renderer/src/pages/home/Messages/Message.tsx

@@ -217,7 +217,7 @@ const MessageContainer = styled.div`
   flex-direction: column;
   position: relative;
   transition: background-color 0.3s ease;
-  padding: 0 20px;
+  padding: 0 24px;
   transform: translateZ(0);
   will-change: transform;
   &.message-highlight {

src/renderer/src/pages/home/Messages/MessageGroup.tsx

@@ -168,7 +168,9 @@ const MessageGroup = ({ messages, topic, registerMessageElement }: Props) => {
         topic,
         index: message.index,
         style: {
-          paddingTop: isGrouped && ['horizontal', 'grid'].includes(multiModelMessageStyle) ? 0 : 15
+          ...(isGrouped && ['horizontal', 'grid'].includes(multiModelMessageStyle)
+            ? { padding: 0 }
+            : { paddingTop: 15 })
         }
       }
 
@@ -202,7 +204,10 @@ const MessageGroup = ({ messages, topic, registerMessageElement }: Props) => {
               </MessageWrapper>
             }
             trigger={gridPopoverTrigger}
-            styles={{ root: { maxWidth: '60vw', minWidth: '550px', overflowY: 'auto', zIndex: 1000 } }}>
+            styles={{
+              root: { maxWidth: '60vw', minWidth: '550px', overflowY: 'auto', zIndex: 1000 },
+              body: { padding: 2 }
+            }}>
             <div style={{ cursor: 'pointer' }}>{messageContent}</div>
           </Popover>
         )
@@ -259,7 +264,7 @@ const GroupContainer = styled.div<{ $isGrouped: boolean; $layout: MultiModelMess
   padding-top: ${({ $isGrouped, $layout }) => ($isGrouped && 'horizontal' === $layout ? '15px' : '0')};
   &.group-container.horizontal,
   &.group-container.grid {
-    padding: 0 20px;
+    padding: 0 24px;
     .message {
       padding: 0;
     }
@@ -317,10 +322,10 @@ const MessageWrapper = styled(Scrollbar)<MessageWrapperProps>`
   width: 100%;
 
   &.horizontal {
-    display: inline-block;
+    height: 100%;
   }
   &.grid {
-    display: inline-block;
+    height: 100%;
   }
   &.fold {
     display: none;
@@ -333,10 +338,9 @@ const MessageWrapper = styled(Scrollbar)<MessageWrapperProps>`
     if ($layout === 'horizontal' && $isGrouped) {
       return css`
         border: 0.5px solid var(--color-border);
-        padding: 10px;
+        padding: 10px 10px 0 10px;
         border-radius: 6px;
         max-height: 600px;
-        margin-bottom: 10px;
       `
     }
     return ''

src/renderer/src/pages/home/Messages/MessageGroupMenuBar.tsx

@@ -104,7 +104,7 @@ const GroupMenuBar = styled.div<{ $layout: MultiModelMessageStyle }>`
   margin: 0 20px;
   padding: 6px 10px;
   border-radius: 6px;
-  margin-top: 10px;
+  margin-top: 6px;
   justify-content: space-between;
   overflow: hidden;
   border: 0.5px solid var(--color-border);