Как реализовать представление автозаполнения текста на адаптивной карте - PullRequest
Новая
       49

Как реализовать представление автозаполнения текста на адаптивной карте

0 голосов
/ 07 января 2020

У меня есть сценарий использования, в котором я должен показывать ответы от API пользователю, поскольку он вводит текстовое представление на адаптивной карте, у меня есть бот, использующий Microsoft Bot Framework, мой чат-бот в настоящее время работает в веб-клиент, но я хочу, чтобы эта функциональность также работала на Microsoft Teams и других платформах (в которых поддерживается адаптивная карта). Adaptive Card не поддерживает представление AutoComplete, пока что оно находится там.

Итак, я ищу обходной путь для реализации этой функции в моем боте.

Ответы [ 2 ]

1 голос
/ 09 января 2020

Хотя Adaptive Cards на данный момент не поддерживают просмотр автозаполнения, вместо использования Adaptive Cards вы можете создать наш собственный компонент и использовать attachmentMiddleware для перехвата этих карт. Вы можете добавить поле ввода с вашими логами автозаполнения c в вашем пользовательском рендерере.

  • См. этот образец для реализации вышеупомянутых логи c.

Пример кода: 

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Web Chat: Custom attachment with GitHub Stargazers</title>

    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/react-redux@7.1.0/dist/react-redux.min.js"></script>

    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <style>
      html, body { height: 100% }
      body { margin: 0 }

      #webchat {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="webchat" role="main"></div>
    <script type="text/babel">
     const GitHubRepositoryAttachment = props =>
       <div style={{ fontFamily: '\'Calibri\', \'Helvetica Neue\', Arial, sans-serif', margin: 20, textAlign: 'center' }}>
         <svg height="64" viewBox="0 0 16 16" version="1.1" width="64" aria-hidden="true"><path fillRule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
         <p>
           <a href={ `https://github.com/${ encodeURI(props.owner) }/${ encodeURI(props.repo) }` } target="_blank">{ props.owner }/<br />{ props.repo }</a>
         </p>
       </div>;

      (async function () {

        const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
        const { token } = await res.json();
        const { ReactWebChat } = window.WebChat;
       const attachmentMiddleware = () => next => card => {
         switch (card.attachment.contentType) {
           case 'application/vnd.microsoft.botframework.samples.github-repository':
             return <GitHubRepositoryAttachment owner={ card.attachment.content.owner } repo={ card.attachment.content.repo } />;

           default:
             return next(card);
         }
       };

        window.ReactDOM.render(
          <ReactWebChat
           attachmentMiddleware={ attachmentMiddleware }
            directLine={ window.WebChat.createDirectLine({ token }) }
          />,
          document.getElementById('webchat')
        );

        store.dispatch({
          type: 'WEB_CHAT/SET_SEND_BOX',
          payload: { text: 'sample:github-repository' }
        });

        document.querySelector('#webchat > *').focus();
      })().catch(err => console.error(err));
    </script>
  </body>
</html>
  • Также см. этот SO ответ на Автозаполнение с помощью веб-чата Botframework , где вы можете добавить flexdatalist в поле ввода WebChat, но вы также должны отправлять действия в хранилище WebChat для сообщите об изменениях.

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

0 голосов
/ 07 января 2020

Если ваш основной вариант использования - Команды, то у вас есть другая опция, но она будет работать только в командах - это использовать модуль задач. По сути, Модули задач - это особый вид всплывающих окон в командах. У вас есть два варианта того, что отображается в модуле задач:

  1. Адаптивная карта
  2. Любая пользовательская веб-страница, которая в основном просто вставляется во всплывающее окно

Итак, вы можете посмотреть, используя вариант 2 выше, встраивая все, что вы хотите в веб-страницу, включая «автозаполнение». Позже, если / когда Adaptive Cards предлагает то, что вам нужно, вы можете просто изменить то, что показывается пользователю, с вашей пользовательской веб-страницы на Adaptive Card.

Вы можете прочитать больше о Модулях задач и с чего начать, на Что такое Модули задач .

Конечно, как я уже сказал, Модули задач работают только в командах, так что это не поможет вашему другому сценарию ios, но, возможно, вы можете использовать обычные адаптивные карты там и делать Модуль задач, если вы обнаружили, что клиент использует Microsoft Teams.

...