用于 BOT 的 React Web 聊天中的自动完成功能

如何解决用于 BOT 的 React Web 聊天中的自动完成功能

我正在处理一项要求，我必须在 React Web Chat 中实现自动完成功能。我已经创建并部署了一个 Azure Echo Bot，并在 UI 中使用了 React Web Chat 和 directline。为了添加自动完成，我创建了一个示例话语列表，当用户输入内容时应该呈现这些话语。下面是我的 App.js 代码，其中包含来自 Bot 框架网络聊天的 redux 存储概念。

在这里，当我运行代码时，建议列表正在我的 UI 中呈现，但是用于选择建议的点击事件不起作用，并且用户的输入也没有出现在聊天窗口中。

谁能帮我解决下面的问题。

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;

解决方法

在 app.js 中，我在 ReactWebchat 组件中添加了以下代码。聊天组件用于显示建议和自定义发送框。

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;

在聊天组件中，创建一个文本自定义文本框，它可以接受用户的输入并显示建议（从 app.js 传递）。将文本提交给机器人后，代码如下。

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