聊天机器人组件

桌面浅色模式 移动浅色模式
DesktopChatbotLight
MobileChatbotLight
桌面深色模式 移动深色模式
DesktopChatbotDark
MobileChatbotDark

Chatbot 组件提供了一个动态交互式的聊天界面，供用户与 AI 聊天机器人交流。它渲染用户和聊天机器人之间的聊天消息，包括模拟聊天机器人输入响应和自动滚动到最新消息等功能。

实时预览链接

组件代码链接

前提条件

确保您的项目中安装了 @neo4j-ndl 库才能使用此 Chatbot 组件。

用法

要将 Chatbot 组件集成到您的应用中，首先需要导入它

import Chatbot from './path/to/Chatbot';

接下来，在您的应用的组件树中渲染 Chatbot 组件，提供必要的 props

<Chatbot messages={listMessages} />

listMessages 应该是一个消息对象的数组，您希望在初始时显示这些消息。

组件 Props

Chatbot 组件接受以下 props

名称 描述 必需

messages

聊天机器人将渲染的消息对象数组。每个消息对象应包含 id、user、message 和 datetime 字段。还可以包含一个可选的 isTyping 布尔值来模拟聊天机器人正在输入响应。

是

消息对象结构

messages 数组 prop 中的每个消息对象应遵循此结构

{
  id: number; // Unique identifier for the message
  user: string; // "user" for user messages, "chatbot" for chatbot messages
  message: string; // The message text
  datetime: string; // Timestamp of the message
  isTyping?: boolean; // Optional, simulates typing effect for chatbot messages
}

关键组件

状态和副作用处理

该组件使用 React 的 useState hook 来管理

  • listMessages：要显示的当前消息列表。

  • inputMessage：用户当前输入的文本。

它还使用 useEffect hook，借助 messagesEndRef 引用，在添加新消息时自动滚动到消息列表底部。

提交消息

当用户提交消息时

  1. 阻止默认表单提交行为。

  2. 检查消息是否不为空。

  3. 将用户的消息添加到 listMessages state 中。

  4. 清空输入字段。

  5. 使用 simulateTypingEffect 模拟聊天机器人响应。

模拟输入效果

simulateTypingEffect 函数模拟聊天机器人正在输入响应，逐个字符显示。一旦消息完全“输入完毕”，它会更新消息以表明聊天机器人已完成输入。

示例

下面是使用带有初始消息的 Chatbot 组件的基本示例

const listMessages = [
  {
    id: 1,
    user: 'user',
    message: 'Hello, chatbot!',
    datetime: '01/01/2024 00:00:00',
  },
  {
    id: 2,
    user: 'chatbot',
    message: 'Hello! How can I assist you today?',
    datetime: '01/01/2024 00:00:00',
  },
];

<Chatbot messages={listMessages} />

这将渲染一个包含两个初始消息的聊天界面，一条来自用户，一条来自聊天机器人。

组件集成

将 Chatbot 组件集成到现有应用中非常简单。确保为其提供必要的 messages prop 来初始化聊天历史。该组件在内部处理用户输入和聊天机器人响应，提供开箱即用的完整聊天界面体验。

如果您已经有一个负责生成聊天机器人响应的后端应用，并且希望将其与此 Chatbot 组件集成，这里有一个示例

首先，我们将设置一个新的状态 gettingResponse，它将指示我们当前是否正在从后端获取响应

const [gettingResponse, setGettingResponse] = useState(false);

然后，我们将定义一个新的函数 fetchResponseFromAPI，它将负责根据用户的消息从后端获取聊天机器人的响应

const fetchResponseFromAPI = async () => {
    setGettingResponse(true);
    const requestBody = {
      message: inputMessage
    };

    try {
      const response = await fetch(`<URI_TO_YOUR_BACKEND_API>`, {
        method: 'POST',
        headers: {
          'accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(requestBody),
      });
      const data = await response.json();
      setGettingResponse(false);
      return data.content;
    } catch (error) {
      console.error("API call failed:", error);
      return "Sorry, something went wrong.";
    } finally {
      setGettingResponse(false);
    }
  };
理想情况下，您会考虑使用一个框架来管理状态、缓存和 hooks，例如 tanstack/react-query，并为您的后端 API 调用添加身份验证和授权

然后我们需要做的就是在用户提交消息时调用此函数，获取响应，并模拟输入效果：在我们的 handleSubmit 函数中

const chatbotReply = await fetchResponseFromAPI();
simulateTypingEffect(chatbotReply);

完整示例可在此处找到

© . All rights reserved.