自动完成：如何用您自己的 react-select 元素替换 Webchat 的输入字段

Question

我有一个 React 应用程序，我想用我自己的 select 元素替换 Webchat 的输入栏（我正在使用 react-select）。

这是网络聊天下的 select 元素：

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

编辑感谢@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

遗憾的是，目前没有简单的方法来替换网络聊天的文本输入，但是 issue GitHub 关于未来自定义发送框的可能性有一个开放。

尽管目前没有支持的方法来替换发送框，但无需分叉存储库的一种选择是隐藏发送框并在网络聊天下方呈现一个自定义发送框。但是，如果您采用这种方法，除了将 Web Chat 的存储绑定到组件状态之外，您还必须处理建议的操作、文件附件和语音功能。您还会失去很多 Web Chat 的样式选项。

如果这仍然是您想要追求的目标，这里有一些代码片段可以帮助您入门。

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

应用程序

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;

希望对您有所帮助！

自动完成：如何用您自己的 react-select 元素替换 Webchat 的输入字段

Auto-completion : How to replace the input field of the Webchat with your own react-select element

reactjs

react-select

web-chat

botframework

WebChat.js

ImprovedSendBox.js