Можно ли заполнить панель ввода в веб-чате методом onclick - PullRequest
Новая
       7

Можно ли заполнить панель ввода в веб-чате методом onclick

0 голосов
/ 01 июля 2019

Я пытаюсь отобразить список популярных вопросов для пользователя, когда они нажимают на них, я хочу, чтобы они заполняли панель ввода и / или отправляли сообщение боту через прямое соединение.

Я попытался использовать ReactDOM.getRootNode () и отследить входной узел и установить атрибут .value, но это не заполняет поле.Я предполагаю, что существует какая-то форма проверки, которая предотвращает это.

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

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>, который изменяет значение selectedOption, и для этого выбора заполнил строку ввода и / или отправил это сообщение боту через прямое соединение. Чего я пытаюсь достичь

1 Ответ

1 голос
/ 01 июля 2019

Вы можете использовать хранилище веб-чата для отправки событий, чтобы установить поле отправки (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>

Реагирующая версия 

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>
  )
};

Скриншот

enter image description here

Для получения более подробной информации, посмотрите Программная публикация в виде действия Пример веб-чата.

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

...