使用 BotFramework 的 WebChat 自动完成

Question

我想在我的 BotFramework 的 WebChat 上自动完成，我可以使用 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'
/>

结果是here

开发团队目前正在开发 "auto-complete box"（来源：Github), progression can be tracked on Github

Answer 1

不建议将编写 WebChat 的 React 与 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>

请注意，采用这种方法会在用户按下回车键时禁止发送消息，因此用户必须按下发送按钮。不幸的是，我找不到适合它的功能锻炼。

希望对您有所帮助！

使用 BotFramework 的 WebChat 自动完成

Auto completion with the BotFramework's WebChat

botframework

web-chat