React聊天机器人自动滚动到底部功能实现求助

方法1：利用MessageList组件内置方法 #

你使用的MessageList属于react-chat-ui库，它自带scrollToBottom方法，通过useRef获取组件实例后，就能在消息更新时触发滚动。

修改步骤： #

1. 导入useRef和useEffect钩子
2. 创建引用绑定到MessageList
3. 监听messages状态变化，自动调用滚动方法

修改后的完整代码片段：

import { useState, useRef, useEffect } from 'react';

function App() {
  const [messages, setMessages] = useState([
    {
      message: "Hello there! I'm your Health Assistant, designed to make your wait more comfortable and informative. Whether you have questions about your health, need general information, or just want a friendly chat, I'm here for you. Feel free to ask me anything, and let's make your time in the waiting room as pleasant as possible!",
      sentTime: "just now",
      sender: "ChatGPT"
    }
  ]);

  const [isTyping, setIsTyping] = useState(false);
  const messageListRef = useRef(null); // 创建组件引用

  // 监听消息变化，自动滚动到底部
  useEffect(() => {
    if (messageListRef.current) {
      messageListRef.current.scrollToBottom();
    }
  }, [messages]);

  const handleSend = async (message) => {
    const newMessage = {
      message,
      direction: 'outgoing',
      sender: "user"
    };

    const newMessages = [...messages, newMessage];
    setMessages(newMessages);

    setIsTyping(true);
    await processMessageToChatGPT(newMessages);
  };

  async function processMessageToChatGPT(chatMessages) {
    let apiMessages = chatMessages.map((messageObject) => {
      let role = "";
      if (messageObject.sender === "ChatGPT") {
        role = "assistant";
      } else {
        role = "user";
      }
      return { role: role, content: messageObject.message}
    });

    const apiRequestBody = {
      "model": "gpt-4",
      "messages": [
        systemMessage,
        ...apiMessages
      ]
    }

    await fetch("https://api.openai.com/v1/chat/completions", 
    {
      method: "POST",
      headers: {
        "Authorization": "Bearer " + API_KEY,
        "Content-Type": "application/json"
      },
      body: JSON.stringify(apiRequestBody)
    }).then((data) => {
      return data.json();
    }).then((data) => {
      setMessages([...chatMessages, {
        message: data.choices[0].message.content,
        sender: "ChatGPT"
      }]);
      setIsTyping(false);
    });
  }

  return (
    <div className="App">
      <div style={{ position:"relative", height: "550px", width: "900px"  }}>
        <MainContainer>
          <ChatContainer>
            {/* 绑定ref到MessageList */}
            <MessageList 
              ref={messageListRef}
              scrollBehavior="smooth" 
              typingIndicator={isTyping ? <TypingIndicator content="Chatbot is typing" /> : null}
            >
              {messages.map((message, i) => {
                return <Message key={i} model={message} />;
              })}
            </MessageList>
            <MessageInput placeholder="Type message here" onSend={handleSend} attachButton={false} />
          </ChatContainer>
        </MainContainer>
      </div>
    </div>
  );
}

export default App

方法2：手动操作滚动容器（兼容更多场景） #

如果内置方法不生效，可以直接获取聊天容器的DOM元素，手动设置滚动位置：

核心修改部分： #

function App() {
  // ... 其他状态不变
  const chatContainerRef = useRef(null);

  useEffect(() => {
    if (chatContainerRef.current) {
      const container = chatContainerRef.current;
      container.scrollTop = container.scrollHeight;
    }
  }, [messages]);

  return (
    // ... 其他结构不变
    <ChatContainer ref={chatContainerRef}>
      {/* MessageList和MessageInput保持不变 */}
    </ChatContainer>
    // ...
  )
}

注意事项： #

• 确保聊天容器（如ChatContainer或MessageList）设置了固定高度和overflow-y: auto样式，否则不会出现滚动条，滚动操作无效。
• 两种方法都是依赖messages状态变化触发滚动，用户发送消息和机器人回复都会自动触发。

内容的提问来源于stack exchange，提问作者Mana Samiee