feat: 将滚动事件移东到组件内部
This commit is contained in:
@@ -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 (
|
||||
<Flex flex={1} direction="column">
|
||||
{/* 顶部标题栏 - 深色毛玻璃 */}
|
||||
@@ -214,7 +218,6 @@ const ChatArea = ({
|
||||
{/* 消息列表 */}
|
||||
<Box
|
||||
flex={1}
|
||||
p={6}
|
||||
bgGradient="linear(to-b, rgba(17, 24, 39, 0.5), rgba(17, 24, 39, 0.3))"
|
||||
overflowY="auto"
|
||||
>
|
||||
@@ -253,7 +256,7 @@ const ChatArea = ({
|
||||
animate="animate"
|
||||
exit={{ opacity: 0, y: 20 }}
|
||||
>
|
||||
<Box px={6} py={3}>
|
||||
<Box px={6}>
|
||||
<Box maxW="896px" mx="auto">
|
||||
<HStack fontSize="xs" color="gray.500" mb={2} fontWeight="medium" spacing={1}>
|
||||
<Sparkles className="w-3 h-3" />
|
||||
@@ -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)"
|
||||
>
|
||||
<Box maxW="896px" mx="auto">
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user