Автозаполнение: как заменить поле ввода в чате на ваш собственный элемент реагировать

Question

У меня есть приложение React, и я хочу заменить панель ввода веб-чата своим собственным элементом выбора (я использую реагирование-выбор).

Вот элемент выбора под веб-чатом:

return (
    <div className="WebChat" >
      <ReactWebChat //WebChat
        className={ `${ className || '' } web-chat` }
        directLine={ this.createDirectLine(token) }
        store={ store }
        styleSet={ styleSet } />
      <Select //my select element
        autoFocus="true"
        className="basic-single"
        classNamePrefix="select"
        defaultValue={'default'}
        isClearable={isClearable}
        isSearchable={isSearchable}
        name="Questions"
        options={groupedQuestions}
        closeMenuOnScroll= "true"
        placeholder="Example"
      />
     </div>
);

edit Спасибо @tdurnford, вот моя реализация:

WebChat.js

import React from 'react'
import { createStore } from 'botframework-webchat'
import WebChatReact from './WebChatReact'
+import Searchbox from "./ImprovedSendBox"
+import setSendBox from "botframework-webchat-core/lib/actions/setSendBox";
+import submitSendBox from "botframework-webchat-core/lib/actions/submitSendBox";

import './WebChat.css'

export default class extends React.Component {
  constructor(props) {
    super(props);

    this.handleFetchToken = this.handleFetchToken.bind(this);

    const store = createStore({}, ({ dispatch }) => next => action => {
      if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
        dispatch({
         type: 'WEB_CHAT/SEND_EVENT',
         payload: {
           name: 'webchat/join',
           value: { }
         }
        });
        setTimeout(() => {
          dispatch({
            type: 'WEB_CHAT/SEND_MESSAGE',
            payload: { text:'Démarrer' }
          }
          );
        }, 1000);
      }
+      if (action.type === 'WEB_CHAT/SET_SEND_BOX') {
+       this.setState({
+          searchValue: action.payload.text,
+        })
+      }
      return next(action);
    });

    this.state = {
      store,
      token: null,
+      searchValue: "",
+      searchSelection: "",
    };
  }

+  handleSearchInput = (e, { action }, store) => {
+    if (
+      action === "menu-close" ||
+      action === "input-blur" ||
+      action === "set-value"
+    ) {
+      return;
+    } else {
+      this.setState({ searchValue: e });
+    }
+    store.dispatch(setSendBox(e));
+  };

+  handleSearchSelection = (selection, store) => {
+    this.setState({
+      searchSelection: selection ? selection.label : "", //Clear Button à fix
+      searchValue: selection ? selection.label : ""
+    });
+    if (selection != null){
+      store.dispatch(setSendBox(selection.label));
+    }
+  };

  async handleFetchToken() {
    if (!this.state.token) {
      const res = await fetch('https://directline.botframework.com/v3/directline/conversations', {
      method: 'POST',
      headers: {
        "Authorization": "secret token ;)"
      }});
      const { token } = await res.json();
      this.setState(() => ({ token }));
    }
  }

  render() {
    const { state: {
      store,
      token,
+      searchValue,
+      searchSelection
    } } = this;


    return (
      <div className="WebChat">
        <WebChatReact
          className="react-web-chat"
          onFetchToken={ this.handleFetchToken }
          store={ store }
          token={ token }
        />

+        <form className="form-inline">
+          <Searchbox
+            className="select"
+            value={searchSelection}
+            onChange={e => this.handleSearchSelection(e, store)}
+            inputValue={searchValue}
+            onInputChange={(e, action) => this.handleSearchInput(e, action, store)}
+          />
+          <button
+            id="submit"
+            onClick={ event => {
+              event.preventDefault();
+              store.dispatch(submitSendBox())
+            }}
+          >
+            Submit
+          </button>
+        </form>
      </div>
    );
  }
}

ImprovedSendBox.js

Можно найти на Github

результат: Если у вас есть какие-либо вопросы, не стесняйтесь задавать мне:)

Answer 1

К сожалению, в настоящее время не существует простого способа заменить текстовый ввод в веб-чате, но на GitHub есть проблема , касающаяся возможности настройки окна отправки в будущем.

Несмотря на то, что в настоящее время не существует поддерживаемого метода замены поля отправки, одним из вариантов без форка репо было бы скрыть поле отправки и отобразить пользовательский прямо под веб-чатом. Однако, если вы будете следовать этому подходу, вам придется обрабатывать предлагаемые действия, вложения файлов и речевые функции в дополнение к привязке хранилища веб-чата к состоянию компонентов. Вы также потеряли бы много вариантов стиля Веб-чата.

Если вы по-прежнему хотите заниматься этим, вот несколько фрагментов кода, с которых можно начать.

SimpleSendBox

import React from 'react';
import setSendBox from "botframework-webchat-core/lib/actions/setSendBox";
import submitSendBox from "botframework-webchat-core/lib/actions/submitSendBox";


export default ({ store, value }) => (
  <div>
    <form>
      <input 
        onChange={ ({ target: { value }}) => store.dispatch(setSendBox(value)) } 
        placeholder="Type your message..." 
        value={ value }
      />
      <button 
        onClick={ event => {
          event.preventDefault();
          store.dispatch(submitSendBox())
        }} 
      >
        Submit
      </button>
    </form>
  </div>
)

App

import React, { Component } from 'react';
import WebChat from './WebChat';
import SimpleSendBox from './SimpleSendBox'
import { createStore } from 'botframework-webchat';
import './App.css';

class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      store: createStore({},
        () => next => action => {
          if (action.type === 'WEB_CHAT/SET_SEND_BOX') {
            this.setState({ value: action.payload.text })
          }
          return next(action);
        }),
      value: ""
    }
  }

  render() {
    return (
    <>
      <WebChat store={ this.state.store } styleOptions={{ hideSendBox: true }} />
      <SimpleSendBox store={ this.state.store } value={ this.state.value }/>
    </>
    );
  }
}

export default App;

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