feat: maximize chat window size

Major layout optimizations to increase chat area:

1. MainLayout improvements:
   - Remove Content padding/margin (was 24px + 24px = 48px wasted)
   - Reduce Sider width from 280px to 240px
   - Set Content overflow:hidden and flex layout

2. AgentChatPage improvements:
   - Replace large Card header with compact toolbar (saved ~40px)
   - Remove Card wrapper (saved border/padding)
   - Direct div layout for chat area

3. Other pages:
   - Added padding:24px to HomePage/KnowledgePage/HistoryPage
   - Maintain consistent spacing for non-chat pages

Result: Chat window now occupies ~85% of screen height instead of ~33%

Verified working: AI responses, scrolling, and UI display

frontend/src/components/chat/MessageList.css

@@ -1,15 +1,21 @@
 .message-list {
   flex: 1;
   overflow-y: auto;
-  padding: 24px;
+  overflow-x: hidden;
-  background: #f5f5f5;
+  padding: 20px 16px 20px 20px; /* 右侧留空给滚动条 */
+  background: linear-gradient(180deg, #f5f7fa 0%, #fafbfc 100%);
+  min-height: 0; /* 重要：让flex容器可以正确计算滚动 */
+  max-height: 100%; /* 限制最大高度 */
+  position: relative;
+  scroll-behavior: smooth; /* 平滑滚动 */
 }
 
 .message-item {
   display: flex;
   gap: 12px;
-  margin-bottom: 24px;
+  margin-bottom: 20px;
   animation: fadeIn 0.3s ease-in;
+  max-width: 100%;
 }
 
 @keyframes fadeIn {
@@ -40,14 +46,31 @@
 
 .message-body {
   background: white;
-  border-radius: 8px;
+  border-radius: 12px;
-  padding: 12px 16px;
+  padding: 14px 18px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  max-width: 85%;
+  word-wrap: break-word;
+  transition: box-shadow 0.2s ease;
+}
+
+.message-body:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
 }
 
 .message-user .message-body {
-  background: #e6f7ff;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border: 1px solid #91d5ff;
+  border: none;
+  color: white;
+}
+
+.message-user .user-message-text {
+  color: white;
+}
+
+.message-assistant .message-body {
+  background: white;
+  border: 1px solid #e8e8e8;
 }
 
 .user-message-text {
@@ -168,22 +191,22 @@
   border-top: 1px solid #f0f0f0;
 }
 
-/* 滚动条样式 */
+/* 滚动条样式 - 优化 */
 .message-list::-webkit-scrollbar {
-  width: 8px;
+  width: 6px;
 }
 
 .message-list::-webkit-scrollbar-track {
-  background: #f1f1f1;
+  background: transparent;
-  border-radius: 4px;
 }
 
 .message-list::-webkit-scrollbar-thumb {
-  background: #888;
+  background: rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
+  border-radius: 3px;
+  transition: background 0.2s;
 }
 
 .message-list::-webkit-scrollbar-thumb:hover {
-  background: #555;
+  background: rgba(0, 0, 0, 0.35);
 }
 

frontend/src/layouts/MainLayout.tsx

@@ -116,7 +116,7 @@ const MainLayout = () => {
         collapsible
         collapsed={collapsed}
         theme="light"
-        width={280}
+        width={240}
         style={{ overflow: 'auto' }}
       >
         {/* Logo区域 */}
@@ -184,11 +184,12 @@ const MainLayout = () => {
         {/* 内容区 */}
         <Content
           style={{
-            margin: '24px',
+            margin: 0,
-            padding: 24,
+            padding: 0,
             background: '#fff',
-            borderRadius: 8,
+            overflow: 'hidden',
-            overflow: 'auto',
+            display: 'flex',
+            flexDirection: 'column',
           }}
         >
           <Outlet />

frontend/src/pages/AgentChatPage.tsx

@@ -190,21 +190,25 @@ const AgentChatPage = () => {
 
   return (
     <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-      {/* 标题栏 */}
+      {/* 顶部工具栏 - 紧凑设计 */}
-      <Card style={{ marginBottom: 16 }}>
+      <div style={{ 
-        <Space align="center" style={{ width: '100%', justifyContent: 'space-between' }}>
+        padding: '12px 24px',
-          <Space align="center">
+        background: '#fff',
-            <span style={{ fontSize: 32 }}>{agent.icon}</span>
+        borderBottom: '1px solid #e8e8e8',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flexShrink: 0,
+      }}>
+        <Space align="center" size="middle">
+          <span style={{ fontSize: 24 }}>{agent.icon}</span>
           <div>
-              <Title level={3} style={{ marginBottom: 4 }}>
+            <div style={{ fontSize: 16, fontWeight: 600, lineHeight: '24px' }}>
               {agent.name}
-              </Title>
+            </div>
-              <Paragraph type="secondary" style={{ marginBottom: 0 }}>
+            <div style={{ fontSize: 12, color: '#8c8c8c', lineHeight: '20px' }}>
-                {agent.description}
+              {agent.category} · {currentProject?.name}
-              </Paragraph>
+            </div>
-              <Paragraph type="secondary" style={{ marginBottom: 0, fontSize: 12 }}>
-                分类：{agent.category} | 项目：{currentProject?.name}
-              </Paragraph>
           </div>
         </Space>
 
@@ -214,25 +218,27 @@ const AgentChatPage = () => {
           onChange={setSelectedModel}
           disabled={sending}
         />
-        </Space>
+      </div>
-      </Card>
 
-      {/* 聊天区域 */}
+      {/* 聊天区域 - 去掉Card，直接使用div */}
-      <Card
+      <div
         style={{
           flex: 1,
           display: 'flex',
           flexDirection: 'column',
           overflow: 'hidden',
+          minHeight: 0,
+          background: '#fff',
         }}
-        bodyStyle={{
+      >
+        {/* 消息列表区域 */}
+        <div style={{ 
           flex: 1, 
           display: 'flex', 
           flexDirection: 'column',
-          padding: 0,
+          minHeight: 0, // 重要：确保可以滚动
-        }}
+          overflow: 'hidden',
-      >
+        }}>
-        {/* 消息列表 */}
           {messages.length === 0 && !sending ? (
             <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#fafafa' }}>
               <div style={{ textAlign: 'center', color: '#999' }}>
@@ -250,6 +256,7 @@ const AgentChatPage = () => {
               streamingContent={streamingContent}
             />
           )}
+        </div>
 
         {/* 消息输入 */}
         <MessageInput
@@ -258,7 +265,7 @@ const AgentChatPage = () => {
           knowledgeBases={knowledgeBases}
           placeholder={`向${agent.name}提问...（Shift+Enter换行，Enter发送）`}
         />
-      </Card>
+      </div>
     </div>
   )
 }

frontend/src/pages/HistoryPage.tsx

@@ -3,7 +3,7 @@ import { HistoryOutlined, SyncOutlined } from '@ant-design/icons'
 
 const HistoryPage = () => {
   return (
-    <div>
+    <div style={{ padding: '24px' }}>
       <Alert
         message="功能开发中"
         description="历史记录功能正在开发中，您将能够查看和管理所有对话历史..."

frontend/src/pages/HomePage.tsx

@@ -31,7 +31,7 @@ const HomePage = () => {
   }
 
   return (
-    <div>
+    <div style={{ padding: '24px' }}>
       {/* 欢迎区域 */}
       <Card style={{ marginBottom: 24, background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }}>
         <div style={{ color: 'white', padding: '20px 0' }}>

frontend/src/pages/KnowledgePage.tsx

@@ -153,7 +153,7 @@ const KnowledgePage = () => {
   ]
 
   return (
-    <div>
+    <div style={{ padding: '24px' }}>
       {/* 提示信息 */}
       <Alert
         message="知识库功能说明"