Auto complete functionality in React Web chat for BOT

Question

I am working on a requirement where I have to implement auto complete functionality in React Web Chat. I have created and deployed an Azure Echo Bot and used React Web Chat and directline for the UI. For adding Auto complete, I have created a list of sample utterances which should be rendered when user types something. Below is my App.js code where I have redux store concept from Bot framework webchat.

Here, when I run the code, suggestions list is being rendered in my UI, but the on-click event for selecting a suggestion is not working and also the user's input is not appearing in the chat window.

Can anyone help me with the solution below.

import React, { useMemo,useEffect  } from 'react';
import ReactWebChat, { createDirectLine, createStore } from 'botframework-webchat';

const items = [
  "What is your name?",
  "What is your job?",
  "Who are you?"];
  
function App() {
const [listItems, setlistItems] = React.useState([]); //for creating list of suggested values
const [textValue, setTextValue] = React.useState(''); // for saving the suggested value when user clicks

const store = createStore({},
    store => next => action => {
      if (action.type === 'WEB_CHAT/SET_SEND_BOX') {
        let value = action.payload.text;
        const regex = new RegExp(`^${value}`, 'i');
        let suggestions = items.sort().filter(v => regex.test(v));
        setlistItems(suggestions);
        setTextValue(textValue);
      }
      return next(action);
    }
  ); 
  
 function suggestionSelected(value) {
    setlistItems([]);
    setTextValue(value);
  }
  
 const renderSuggestions = () => {
    if (listItems.length === 0) {
      return null;
    }
    return (
      <div className="srchList">
        <ul>
          {listItems.map((item, idx) => <li key={idx} onClick={() => suggestionSelected(item)}>{item}</li>)}
        </ul>
      </div>
    );
  }
 
 const directLine = useMemo(() => createDirectLine({ secret: '**************' }), []);
 
 return (
    <div>
      <h1> Hello</h1>
      <ReactWebChat
        directLine={directLine}
        store={store}
      />
      <div>{renderSuggestions()}</div>
    </div>
  )
}

export default App;

Can you link to any pages you've used to help you implement auto-complete in Web Chat? — Kyle Delaney, Jun 10 '21 at 21:19
I have taken example from the below stack over question link where at the bottom auto search using Redux and store has been provided. https://stackoverflow.com/questions/60223610/how-to-add-autocomplete-autosuggestion-in-microsoft-botframework-webchat-using-r/60271292 — Sharvani, Jun 11 '21 at 09:54
I have used the below code to update the web chat input box value after user clicks on any auto suggested value. But apparently this is not working. Could you please help me here. store.dispatch({ type: 'WEB_CHAT/SET_SEND_BOX', payload: { text: value, } }); — Sharvani, Jun 11 '21 at 11:48
Just as an update to this question, we have achieved this using custom text box and adding the custom text box to bot instead of the Web chat's default text box. We have implemented auto- complete in the custom text box. — Sharvani, Jun 17 '21 at 07:18

score 0 · Answer 1 · answered Jul 06 '21 at 18:46

In app.js, I have added the below code in ReactWebchat component. Chat component is used for displaying suggestions and custom send box.

function App() {

  const items = [
    ///enter your sample suggestions here
  ];

  const store = createStore();

  const directLine = useMemo(() => createDirectLine({ secret: 'YOUR_SECRET' }), []);

  const styleOptions = {
    hideUploadButton: true,
    hideSendBox: true, //this is important as we are trying to hide default send box 
                       //and create a customized send box
  };

  return (
    <div>
      <h1>Custom </h1>
      <ReactWebChat
        store={store}
        directLine={directLine}
        styleOptions={styleOptions}
      />
      <ChatComponent store={store} suggestion={items} />
    </div>
  );
}

export default App;

In chat component, create a text custom text box, which can take the input from the user and display suggestions ( passed from app.js). On submitting the text to the Bot, below is the code.

 <button onClick={event => {
            event.preventDefault();
            store.dispatch(submitSendBox())
          }}> Submit
 </button>

Auto complete functionality in React Web chat for BOT

1 Answers1