From 3a0898634f6fd29c3763ec0b3f43857aac0391fa Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Mon, 24 Nov 2025 15:54:26 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B0=86=E6=BB=9A=E5=8A=A8=E4=BA=8B?= =?UTF-8?q?=E4=BB=B6=E7=A7=BB=E4=B8=9C=E5=88=B0=E7=BB=84=E4=BB=B6=E5=86=85?= =?UTF-8?q?=E9=83=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/AgentChat/components/ChatArea/index.js | 15 +++++++++------ src/views/AgentChat/index.js | 6 +----- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/views/AgentChat/components/ChatArea/index.js b/src/views/AgentChat/components/ChatArea/index.js index 4d44e8ce..71b48d87 100644 --- a/src/views/AgentChat/components/ChatArea/index.js +++ b/src/views/AgentChat/components/ChatArea/index.js @@ -1,7 +1,7 @@ // src/views/AgentChat/components/ChatArea/index.js // 中间聊天区域组件 -import React from 'react'; +import React, { useRef, useEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Box, @@ -56,7 +56,6 @@ import MessageRenderer from './MessageRenderer'; * @param {Function} props.onToggleRightSidebar - 切换右侧栏回调 * @param {Function} props.onNewSession - 新建会话回调 * @param {string} props.userAvatar - 用户头像 URL - * @param {RefObject} props.messagesEndRef - 消息列表底部引用 * @param {RefObject} props.inputRef - 输入框引用 * @param {RefObject} props.fileInputRef - 文件上传输入引用 * @returns {JSX.Element} @@ -78,10 +77,15 @@ const ChatArea = ({ onToggleRightSidebar, onNewSession, userAvatar, - messagesEndRef, inputRef, fileInputRef, }) => { + // Auto-scroll 功能:当消息列表更新时,自动滚动到底部 + const messagesEndRef = useRef(null); + + useEffect(() => { + messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); + }, [messages]); return ( {/* 顶部标题栏 - 深色毛玻璃 */} @@ -214,7 +218,6 @@ const ChatArea = ({ {/* 消息列表 */} @@ -253,7 +256,7 @@ const ChatArea = ({ animate="animate" exit={{ opacity: 0, y: 20 }} > - + @@ -308,7 +311,7 @@ const ChatArea = ({ borderTop="1px solid" borderColor="rgba(255, 255, 255, 0.1)" px={6} - py={4} + py={1} boxShadow="0 -8px 32px 0 rgba(31, 38, 135, 0.37)" > diff --git a/src/views/AgentChat/index.js b/src/views/AgentChat/index.js index 4344a1c2..b103b369 100644 --- a/src/views/AgentChat/index.js +++ b/src/views/AgentChat/index.js @@ -16,7 +16,7 @@ import ChatArea from './components/ChatArea'; import RightSidebar from './components/RightSidebar'; // 自定义 Hooks -import { useAgentSessions, useAgentChat, useFileUpload, useAutoScroll } from './hooks'; +import { useAgentSessions, useAgentChat, useFileUpload } from './hooks'; /** * Agent Chat - 主组件(HeroUI v3 深色主题) @@ -82,9 +82,6 @@ const AgentChat = () => { loadSessions, }); - // 自动滚动 Hook - const { messagesEndRef } = useAutoScroll(messages); - // ==================== 输入框引用(保留在主组件)==================== const inputRef = React.useRef(null); @@ -134,7 +131,6 @@ const AgentChat = () => { onToggleRightSidebar={() => setIsRightSidebarOpen(true)} onNewSession={createNewSession} userAvatar={user?.avatar} - // messagesEndRef={messagesEndRef} inputRef={inputRef} fileInputRef={fileInputRef} />