是否可以使用 onclick 方法填充网络聊天中的输入栏

Question

我正在尝试向用户显示热门问题列表，当他们单击它们时我希望他们填充输入栏and/or通过直线连接将消息发送到机器人。

我尝试使用 ReactDOM.getRootNode() 并跟踪输入节点并设置 .value 属性，但这不会填充该字段。我假设有某种形式的验证可以防止这种情况发生。

此外，如果我在控制台记录输入节点，然后将其保存为控制台屏幕中的全局变量，我可以那样更改值，但实际上无法发送消息，按回车键或发送箭头什么都不做。虽然 suggestedActions 选项似乎适用于这个特定的应用程序，但我不能将它用于这个用例。

const [chosenOption, setChosenOption] = useState(null);

const getRootNode = (componentRoot) =>{
        let root = ReactDom.findDOMNode(componentRoot)
        let inputBar = root.lastChild.lastChild.firstChild.firstChild
        console.log('Initial Console log ',inputBar)
        setInputBar(inputBar)
    }

//in render method
{(inputBar && chosenOption) && (inputBar.value = chosenOption)}

这是我试图用来查找节点的函数，所选选项按预期工作，但我无法以可用的方式更改值。

我希望用户单击 <p> 元素，该元素会更改 chosenOption 值，并为该选项填充输入栏 and/or 通过直线连接向机器人发送该消息。 What I'm trying to accomplish

Answer 1

您可以使用 Web Chat 的商店来调度事件以设置发送框 (WEB_CHAT/SET_SEND_BOX) 或在单击项目时发送消息 (WEB_CHAT/SEND_MESSAGE)。看看下面的代码片段。

简单HTML

<body>
<div class="container">
  <div class="details">
    <p>Hello World!</p>
    <p>My name is TJ</p>
    <p>I am from Denver</p>
  </div>
  <div class="wrapper">
    <div id="webchat" class="webchat" role="main"></div>
    </div>
</div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

<script>
    // Initialize Web Chat store
    const store = window.WebChat.createStore();

    // Get all paragraph elements and add on click listener
    const paragraphs = document.getElementsByTagName("p");

    for (const paragraph of paragraphs) {
      paragraph.addEventListener('click', ({ target: { textContent: text }}) => {
        // Dispatch set send box event
        store.dispatch({
          type: 'WEB_CHAT/SET_SEND_BOX',
          payload: {
            text
          }
        });
      });
    }

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

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

      document.querySelector('#webchat > *').focus();
    })().catch(err => console.error(err));
  </script>
</body>

React 版本

import React, { useState, useEffect } from 'react';
import ReactWebChat, { createDirectLine, createStore } from 'botframework-webchat';

const WebChat = props => {
  const [directLine, setDirectLine] = useState();

  useEffect(() => {
    const initializeDirectLine = async () => {
      const res = await fetch('http://localhost:3978/directline/token', { method: 'POST' });
      const { token } = await res.json();
      setDirectLine(createDirectLine({ token }));
    };
    initializeDirectLine();

  }, []);

  return directLine
    ? <ReactWebChat directLine={directLine} {...props} />
    : "Connecting..."
}

export default () => {
  const [store] = useState(createStore());
  const items = ["Hello World!", "My name is TJ.", "I am from Denver."]

  const click = ({target: { textContent: text }}) => {
    store.dispatch({
      type: 'WEB_CHAT/SET_SEND_BOX',
      payload: {
        text
      }
    });
  }

  return (
    <div>
      <div>
        { items.map((item, index) => <p key={index} onClick={click}>{ item }</p>) }
      </div>
      <WebChat store={store} />
    </div>
  )
};

截图

有关详细信息，请查看 Programmatic Post as Activity 网络聊天示例。

希望对您有所帮助！

是否可以使用 onclick 方法填充网络聊天中的输入栏

Is it possible to populate the input bar in webchat with an onclick method

web-chat