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

开发团队目前正在开发“自动完成框”（来源：Github），可以跟踪进度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>

请注意，采用这种方法后，当用户按下Enter键时，将无法发送消息，因此用户必须按下发送按钮。不幸的是，我无法为此进行功能锻炼。

希望这会有所帮助！

使用BotFramework的WebChat自动完成

1 个答案: