使用 React 为网络聊天机器人定制 UI

Question

我正在做一个项目，我在 Azure 中安装了一个 Bot，我正在尝试使用 React 自定义网络聊天 UI，当用户进入“安排会议”时，会显示一个 React 组件，它允许用户在表单中输入详细信息。提交表单时，数据会发送到机器人。

我看到这可以通过使用 Redux 中间件和一个名为 useSendPostBack 的钩子来解决。但是，由于我是 React 的新手，任何人都可以指导我如何实现这一点以及 useSendPostBack 挂钩如何工作以及我的回声机器人如何接收它。

感谢您的帮助。

Answer 1

useSendPostBack 是一个钩子，因此必须在组件中调用它。可能有一种方法可以通过 Redux 中间件发送提交，但不会使用此挂钩。

Rules of Hooks 还要求您不能有条件地调用挂钩，因此它必须是您在某些组件的顶层调用的东西，例如 FormSubmitted，只有在表格已准备好提交。

一般是recommended that you don't put form state in Redux, but it won't break anything if you do it. You would use the useSelector从react-redux hook 来获取Redux 的表单状态

我不熟悉 BotFramework。可能有更好的方法通过回调函数而不是挂钩来执行此操作。但是您所描述的 - 在 Redux 中存储表单状态并通过 useSendPostBack 提交给机器人 - 可能看起来像这样。

const FormSubmitted = () => {
  // Get form data out of Redux
  const formData = useSelector(state => state.someProperty);
  // Send to bot
  useSendFormBack(formData);

  // I'm not sure how you access the success/failure from the bot
  return (
    <div>Submitting Form...</div>
  )
}

const FormPage = () => {
  const [didSubmit, setDidSubmit] = useState(false);
  
  return didSubmit
    ? <FormSubmitted/> 
    : <FormFields onSubmit={() => setDidSubmit(true)}/>
}

FormFields 是用户编辑表单字段的组件。

如果没有 Redux，您可能希望将提交表单的状态存储在 FormPage.

// Now form data comes from props
const FormSubmitted = ({formData}) => {
  // Send to bot
  useSendFormBack(formData);

  // I'm not sure how you access the success/failure from the bot
  return (
    <div>Submitting Form...</div>
  )
}

const FormPage = () => {
  // Store the whole data object, or null if not submitted
  const [submittedData, setSubmittedData] = useState(null);
  
  // FormSubmitted gets the data as a prop
  // FormFields calls the onSubmit function with the its data as the argument
  return submittedData !== null
    ? <FormSubmitted formData={submittedData}/>
    : <FormFields onSubmit={(data) => setSubmittedData(data)}/>
}

使用 React 为网络聊天机器人定制 UI

Customizing UI for Web Chat Bot using React

middleware

reactjs

react-redux

botframework

react-hooks