Customizing UI for Web Chat Bot using React

Question

I am working on a project where I have an Bot hoisted in Azure and I am trying to customize the web chat UI using React where when user enters "schedule meeting" a react component is shown which allows users to input details in a form. On form submission, the data is sent to the bot.

I have seen this can be solved by using Redux Middleware and a hook called useSendPostBack. But, since I am new to React, can anyone guide me on how to achieve this and also how the useSendPostBack hook works and how my echo bot receives it.

Thanks for your help.

Answer 1

useSendPostBack is a hook so it has to be called in a component. There might be a way to send a submission through Redux middleware but it will not be with this hook.

The Rules of Hooks also require that you cannot call a hook conditionally, so it would have to be something that you call at the top-level of some component like FormSubmitted which you render only when the form is ready for submission.

It's generally 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 hook from react-redux to get the form state out of Redux.

I'm not familiar with BotFramework. There might be a better way to do this through a callback function instead of a hook. But what you are describing -- store form state in Redux and submit to bot via useSendPostBack -- might look something like this.

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 is some component where the user edits the form fields.

Without Redux you would want to store the state of the submitted form in the 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)}/>
}