Как добавить автозаполнение / автозаполнение в веб-чат Microsoft Botframework с помощью React. js - PullRequest
Новая
       61

Как добавить автозаполнение / автозаполнение в веб-чат Microsoft Botframework с помощью React. js

2 голосов
/ 14 февраля 2020

Я пытаюсь добавить функцию автозаполнения / автозаполнения в мой чат-фреймворк для бот-фреймворков (v-4) с помощью реакции js. В котором я хочу получить входные данные из таблицы azure. Слышал, что не рекомендуется использовать j-запрос внутри React js. Ищете решение, чтобы добавить это.

Я ищу решение, как на рисунке ниже, PFA. И код, который я использовал для React, прикреплен ниже: 

React.js file

import React from 'react';
import { DirectLine, ConnectionStatus } from 'botframework-directlinejs';
import ReactWebChat from 'botframework-webchat';
import './ChatComponent.css';


export default class extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            token: '',
            conversationId:'',
            directLine: {},
            view: false,
            feedBack: null,
            value: '',
            popupContent: '',
            storeValue:''
        };
        this.handleTokenGeneration = this.handleTokenGeneration.bind(this);
        this.handleChange = this.handleChange.bind(this);

    }

    handleTokenGeneration = async () => {
        console.log("handleTokenGeneration");
        const response = await fetch(`api/TokenGenerationService/GetToken`);
        const data = await response.json();
        this.setState({ token: data.categoryObject.token, conversationId: data.categoryObject.conversationId });
        console.log("conversationId");
    };

    async componentDidMount() {
        try {
            await this.handleTokenGeneration();          

        } catch (error) {
            console.log("error in fetchung token");
            console.log(error);
        }

        this.state.directLine = new DirectLine({ token: this.state.token });
        this.setState({ view: true });

    }


    handleChange = (event) => {
        this.setState({ value: event.target.value });
    }

    render() {

        if (!this.state.view) {
            return <div />
        } else {        
            return (             

                <div className="react-container webchat" >
                    <ReactWebChat directLine={this.state.directLine} webSocket={true}  userID='2656' username='res' store={this.state.storeValue} />

                    <footer className="chat-footer" >                     

                        <div className="foot-footer">
                            Was I helpful ?
                            <span className="feedback"  >Yes</span><span>|</span><span className="feedback" >No</span>
                        </div>
                    </footer>
                </div>
            );
        }
    }

}

I'm looking for something like this. Please find the attached file below

1 Ответ

1 голос
/ 18 февраля 2020

Веб-чат использует Redux , который имеет Redux store , который может использовать Redux middleware . В веб-чате есть действие под названием WEB_CHAT/SET_SEND_BOX, которое можно использовать для ответа на то, что пользователь вводит в поле ввода текста, например: 

const store = window.WebChat.createStore(
    {},
    store => next => action => {
        if (action.type === 'WEB_CHAT/SET_SEND_BOX') {
            const user_entered_text = action.payload.text;

            // Use the text to query the Azure database and display suggestions
        }
        return next(action);
    }
);

Когда пользователь нажимает на предложение или нажимая правую клавишу, вы можете использовать это же действие для изменения содержимого текстового поля следующим образом: 

store.dispatch({
    type: 'WEB_CHAT/SET_SEND_BOX',
    payload: {
        text: user_selected_suggestion,
    }
});

В репозитории Web Chat samples , которые могут помочь с использование действий Redux в веб-чате

...