reactjs - 如何在 ReactJS 中使用 react-simple-chatbot 制作聊天机器人组件

Question

我正在尝试使用react-simple-chatbot库在动态 ReactJS 中制作 React-Simple-Chatbot 组件。

我想要做的是在步骤数组中动态设置消息属性。

任何有关如何最好地做到这一点的建议将不胜感激。

这是代码片段：

import React from "react";
import ChatBot from "react-simple-chatbot";

function CustomChatbot(props) {

  const steps = [{
      id: "Greet",
      message: props.data,
      trigger: "Ask Name"
    },
    {
      id: "Ask Name",
      message: "Please type your name?",
      trigger: "Waiting user input for name"
    },
    {
      id: "Waiting user input for name",
      user: true,
      //trigger: "Asking options to eat"
      trigger: (input) => {
        props.eventHandler(input.value);
        return "Asking options to eat"
      }
    },
    {
      id: "Asking options to eat",
      message: "Hi {previousValue}, Please click on what you want to buy...?",
      trigger: "Displaying options to eat"
    },
    {
      id: "Displaying options to eat",
      options: [{
          value: "pizza",
          label: "Jeans",
          trigger: "Asking for Tomatoes in Pizza"
        },
        {
          value: "burger",
          label: "Jacket",
          trigger: "Burger Not available"
        }
      ]
    },
    {
      id: "Burger Not available",
      message: "Sorry, We don't have burger available at the moment. Would you like to try our pizza?",
      trigger: "Asking for pizza after burger"
    },
    {
      id: "Asking for pizza after burger",
      options: [{
          value: true,
          label: "Yes",
          trigger: "Asking for Tomatoes in Pizza"
        },
        {
          value: "false",
          label: "No",
          trigger: "Done"
        }
      ]
    }
  ]

    return (<ChatBot steps={steps} {...config} />);
  }

  export default CustomChatbot;
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

标签： reactjsreact-routerchatchatbot