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

【问题标题】：Auto complete functionality in React Web chat for BOT用于 BOT 的 React Web 聊天中的自动完成功能
【发布时间】：2021-07-07 02:46:23
【问题描述】：

我正在处理一个要求，我必须在 React Web Chat 中实现自动完成功能。我创建并部署了一个 Azure Echo Bot，并为 UI 使用了 React Web Chat 和 directline。为了添加自动完成，我创建了一个示例话语列表，当用户键入内容时应该呈现这些示例话语。下面是我的 App.js 代码，其中我有来自 Bot 框架 webchat 的 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;

【问题讨论】：

您可以链接到您用来帮助您在网络聊天中实现自动完成的任何页面吗？
我从下面的问题链接堆栈中获取了示例，其中底部提供了使用 Redux 和存储的自动搜索。 stackoverflow.com/questions/60223610/…
在用户点击任何自动建议的值后，我已使用以下代码更新网络聊天输入框的值。但显然这不起作用。你能帮我吗？ store.dispatch({ type: 'WEB_CHAT/SET_SEND_BOX', payload: { text: value, } });
作为对这个问题的更新，我们使用自定义文本框并将自定义文本框添加到机器人而不是网络聊天的默认文本框来实现这一点。我们已经在自定义文本框中实现了自动完成。
你想把它作为答案发布吗？

标签： reactjs react-redux botframework web-chat

【解决方案1】：

在 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 传递）。将文本提交给 Bot，下面是代码。

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

【讨论】：