Автозаполнение с помощью веб-чата BotFramework - PullRequest
Новая
       47

Автозаполнение с помощью веб-чата BotFramework

1 голос
/ 10 мая 2019

Я хочу автозаполнение в WebChat моего BotFramework, я могу использовать flexdatalist для реализации этой функции на <input> тегах, но как я могу изменить свойства SendBox?

Вот пример того, как работает flexdatalist: 

<input 
  type='text'
  placeholder='Type your message...'
  class='flexdatalist'
  data-data='link/to/json'
  data-search-in='name'
  data-visible-properties='["name","intent"]'
  data-selection-required='true'
  data-min-length='1'
  name='suggest_questions'
/>

Результат здесь

Команда разработчиков в настоящее время работает над "автозаполнением" (источник: Github ), прогресс можно отслеживать на Github

1 Ответ

1 голос
/ 11 мая 2019

Не рекомендуется объединять React, в котором написано WebChat, и JQuery, поскольку React не распознает любые изменения, внесенные JQuery. При этом вы можете добавить flexdatalist в поле ввода WebChat, но вам также необходимо отправить действия в хранилище WebChat, чтобы уведомить его об изменениях. Смотрите фрагменты кода ниже. 

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>One Bot to Rule Them All</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.0.min.js"></script>

    <link href="/jquery-flexdatalist-2.2.4/jquery.flexdatalist.css" rel="stylesheet" type="text/css">
    <script src="/jquery-flexdatalist-2.2.4/jquery.flexdatalist.min.js"></script>

    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>


    <style>
      html, body { height: 100% }
      body { 
        margin: 0;
       }

      #webchat,
      #webchat > * {
        height: 100%;
      }
    </style>
  </head>
  <body>

    <div id="webchat" role="main"></div>

    <script>

      (async function() {

        const res = await fetch('http://localhost:3978/directline/token', { method: 'POST' });
        const { token }  = await res.json();

        const store = window.WebChat.createStore({},
            ({ dispatch }) => next => action => {
              if (action.type === 'DIRECT_LINE/POST_ACTIVITY') {
                // Clear the input field when the message is sent
                $("input[data-id='webchat-sendbox-input']").val("")
              }
          return next(action);
        });        

        window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ token }),
        store,
      }, document.getElementById('webchat'));

      $("input[data-id='webchat-sendbox-input']").flexdatalist({
        minLength: 1,
        searchIn: 'name',
        data: 'countries.json'
      });

      $("input[data-id='webchat-sendbox-input']").on('select:flexdatalist', (event, set, options) => 
        store.dispatch({ 
          type: 'WEB_CHAT/SET_SEND_BOX', 
          payload: { 
            text: set.name
          }
        })
      );

      $("input[data-id='webchat-sendbox-input']").on('change:flexdatalist', (event, set, options) => {
          console.log(event)
          store.dispatch({ 
            type: 'WEB_CHAT/SET_SEND_BOX', 
            payload: { 
              text: set.value
            }
          })
        }
      );

      })().catch(err => console.log(err));

    </script>
  </body>

Обратите внимание, что следующий подход отключает отправку сообщения, когда пользователь нажимает клавишу ввода, поэтому пользователь должен нажать кнопку отправки. К сожалению, я не смог найти для этого функциональную тренировку.

Надеюсь, это поможет!

...