Функциональность автозаполнения в веб-чате React для BOT

Я работаю над требованием, в котором мне нужно реализовать функцию автозаполнения в React Web Chat. Я создал и развернул Azure Echo Bot и использовал React Web Chat и прямую линию для пользовательского интерфейса. Для добавления автозавершения я создал список образцов высказываний, которые должны отображаться, когда пользователь что-то вводит. Ниже приведен мой код App.js, в котором у меня есть концепция магазина redux из веб-чата Bot framework.

Здесь, когда я запускаю код, список предложений отображается в моем пользовательском интерфейсе, но событие по щелчку для выбора предложения не работает, а также ввод пользователя не отображается в окне чата.

Может ли кто-нибудь помочь мне с решением ниже.

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;

reactjs react-redux botframework web-chat
person Sharvani    schedule 10.06.2021    source источник
comment
Можете ли вы ссылаться на любые страницы, которые вы использовали, чтобы помочь вам реализовать автозаполнение в веб-чате?   -  person Kyle Delaney    schedule 11.06.2021
comment
Я взял пример из приведенного ниже стека по ссылке с вопросом, где внизу был предоставлен автоматический поиск с использованием Redux и хранилища. stackoverflow.com/questions/60223610/   -  person Sharvani    schedule 11.06.2021
comment
Я использовал приведенный ниже код, чтобы обновить значение поля ввода веб-чата после того, как пользователь щелкнет любое автоматически предложенное значение. Но, видимо, это не работает. Не могли бы вы помочь мне здесь. ‹Code› store.dispatch ({type: 'WEB_CHAT / SET_SEND_BOX', полезная нагрузка: {text: value,}});   -  person Sharvani    schedule 11.06.2021
comment
В качестве обновления этого вопроса мы достигли этого, используя настраиваемое текстовое поле и добавив настраиваемое текстовое поле для бота вместо текстового поля по умолчанию для веб-чата. Мы реализовали автозаполнение в настраиваемом текстовом поле.   -  person Sharvani    schedule 17.06.2021
comment
Хотели бы вы опубликовать это в качестве ответа?   -  person Kyle Delaney    schedule 17.06.2021
comment
Вы все еще работаете над этим?   -  person Kyle Delaney    schedule 22.06.2021

Ответы (1)


arrow_upward
0
arrow_downward

В 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>
person Sharvani    schedule 06.07.2021