更新AI聊天页面样式

app/components/chat/chat-input.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 import { Input, Button, Upload, Tooltip, message as antdMessage, Space } from 'antd';
-import { SendOutlined, StopOutlined, PaperClipOutlined, PictureOutlined } from '@ant-design/icons';
+import { StopOutlined, PictureOutlined, CommentOutlined } from '@ant-design/icons';
 import type { VisionFile } from '../../types/dify_chat';
 import '../../styles/components/chat-with-llm/chat-input.css';
 
@@ -184,7 +184,8 @@ export default function ChatInput({
                         icon={<PictureOutlined />}
                         size="small"
                         disabled={isDisabled}
-                        className="text-gray-500 hover:text-blue-500"
+                        className="chat-upload-button"
+                        shape="circle"
                     />
                 </Tooltip>
             </Upload>
@@ -192,21 +193,19 @@ export default function ChatInput({
     };
 
     return (
-        <div className="border-t border-gray-200 bg-white p-4">
+        <div className="bg-white p-4">
             <div className="max-w-4xl mx-auto">
                 {/* 文件预览 */}
                 {renderFilePreview()}
 
-                {/* 输入区域 */}
-                <div className="relative">
-                    <div className="flex items-end gap-2">
+                {/* 输入区域 - 方块容器 */}
+                <div className="chat-input-box">
+                    <div className="chat-input-content">
                         {/* 上传按钮 */}
-                        <div className="flex items-end pb-1">
-                            {renderUploadButton()}
-                        </div>
+                        {renderUploadButton()}
 
                         {/* 文本输入 */}
-                        <div className="flex-1">
+                        <div className="chat-input-textarea-wrapper">
                             <TextArea
                                 ref={textareaRef}
                                 value={message}
@@ -216,13 +215,12 @@ export default function ChatInput({
                                 placeholder={placeholder}
                                 disabled={disabled}
                                 autoSize={{ minRows: 1, maxRows: 6 }}
-                                className="resize-none"
-                                style={{ paddingRight: '50px' }}
+                                className="chat-input-textarea"
                             />
                         </div>
 
                         {/* 发送/停止按钮 */}
-                        <div className="flex items-end pb-1">
+                        <div className="chat-input-button">
                             {isResponding ? (
                                 <Tooltip title="停止生成">
                                     <Button
@@ -231,24 +229,25 @@ export default function ChatInput({
                                         icon={<StopOutlined />}
                                         onClick={handleStop}
                                         disabled={disabled}
-                                        size="large"
+                                        size="small"
+                                        shape="circle"
                                     />
                                 </Tooltip>
                             ) : (
                                 <Tooltip title="发送消息 (Enter)">
                                     <Button
                                         type="primary"
-                                        icon={<SendOutlined />}
+                                        icon={<CommentOutlined style={{ fontSize: '30px' }} />}
                                         onClick={handleSubmit}
                                         disabled={disabled || !message.trim()}
-                                        size="large"
+                                        size="small"
+                                        shape="circle"
+                                        className='chat-input-button-send'
                                     />
                                 </Tooltip>
                             )}
                         </div>
                     </div>
-
-                    {/* 字符计数和提示 */}
                 </div>
             </div>
         </div>