Интегрировать чатбот для реагирования на применение

Автор оригинала: DhananjayKumar.

Недавно я получил требование интеграции React-Simple-Chatbot к существующему приложению реагирования. Задача была понять расположение существующего применения и небольшое количество кривой обучения на React-Simple-Thatbot. Макет приложений не был очень впечатляющим, и мне нужно было немного изменить его, чтобы получить желаемый результат. Таким образом, вместо изменения существующего приложения я разработаю макет с помощью отображения сетки и фиксированные стили положения. Когда приложение работает, выглядит как ниже –

Настольный вид на рабочий стол

Просмотр телефона

Этот пост поможет всем тем, кто борьба от выкладывания приложения и, наконец, интегрирует простой чатбот в существующее приложение. Полный источник можно скачать из репозитория Git React-Chatbot Отказ

Установите следующие 2 пакеты –

"react-simple-chatbot": "^0.6.1",
"styled-components": "^4.3.2"

Вы можете запустить следующую команду в терминале

npm install react-native-chatbot --save
npm install styled-components --save

SimpleForm .js.

import React, { Component } from 'react';
import ChatBot from 'react-simple-chatbot';
import Review from './Review';

class SimpleForm extends Component {
    render() {
      return (
         {
                if (isNaN(value)) {
                  return 'value must be a number';
                } else if (value < 0) {
                  return 'value must be positive';
                } else if (value > 120) {
                  return `${value}? Come on!`;
                }
  
                return true;
              },
            },
            {
              id: '7',
              message: 'Great! Check out your summary',
              trigger: 'review',
            },
            {
              id: 'review',
              component: ,
              asMessage: true,
              trigger: 'update',
            },
            {
              id: 'update',
              message: 'Would you like to update some field?',
              trigger: 'update-question',
            },
            {
              id: 'update-question',
              options: [
                { value: 'yes', label: 'Yes', trigger: 'update-yes' },
                { value: 'no', label: 'No', trigger: 'end-message' },
              ],
            },
            {
              id: 'update-yes',
              message: 'What field would you like to update?',
              trigger: 'update-fields',
            },
            {
              id: 'update-fields',
              options: [
                { value: 'name', label: 'Name', trigger: 'update-name' },
                { value: 'gender', label: 'Gender', trigger: 'update-gender' },
                { value: 'age', label: 'Age', trigger: 'update-age' },
              ],
            },
            {
              id: 'update-name',
              update: 'name',
              trigger: '7',
            },
            {
              id: 'update-gender',
              update: 'gender',
              trigger: '7',
            },
            {
              id: 'update-age',
              update: 'age',
              trigger: '7',
            },
            {
              id: 'end-message',
              message: 'Thanks! Your data was submitted successfully!',
              end: true,
            },
          ]}
        />
      );
    }
  }
  
  export default SimpleForm;

В шаге ID «Review» вы могли бы заметить в конце пользовательского ввода, мы визуализируем компонент обзора. Важным моментом следует отметить здесь – пользовательские входы передаются на этот компонент в качестве реквизита.

Обзор .js.

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';

const Review = (props)  => {
  const [state, setState] = useState({ name: '', gender: '', age: ''});
  
  useEffect(() => {
    const { steps } = props;
    const { name, gender, age } = steps;
    setState({ name, gender, age });
  }, [props])

    const { name, gender, age } = state;
    return (
      
        Summary
        
          
            
              Name
              {name.value}
            
            
              Gender
              {gender.value}
            
            
              Age
              {age.value}
            
          
        
      
    );
}

Review.propTypes = {
  steps: PropTypes.object,
};

Review.defaultProps = {
  steps: undefined,
};

export default Review;

API Справочник четбов и шагов можно найти здесь Отказ

Сначала посмотрите код компонента приложений и его стиль и объяснит ключевые точки позже.

App.js.

import React, { useState } from 'react';
import SimpleForm from './SimpleForm';
import './App.css';

const App = (props) => {
  let [showChat, setShowChat] = useState(false);

  const startChat = () => { setShowChat(true); }
  const hideChat = () => { setShowChat(false); }

    return (
      <>
      
        My Application!!!
      
      
        
          My Navigation
        
        
          
            Content of my application will go here.....
            Sample content to fill the gap as much as possible. Sample content to fill the gap as much as possible.
            Sample content to fill the gap as much as possible.Sample content to fill the gap as much as possible.
            More content to fill the available area of the main contect. More content to fill the available area of the main contect.
            More content to fill the available area of the main contect.More content to fill the available area of the main contect. 
          
        
      
      Footer
      
        
          
              
        {/*  {showChat ?  : null}  */}
        
          {!showChat 
            ?  
            : }
        
            
      
    )
}

export default App;

App.csss.

body {
    font-size: 20px;
}
.header {
    position: fixed;
    top: 0;
    width: 100%;
    text-align: center;
    background-color: rgb(28, 18, 78);
    color: white;
    padding: 20px;
}

.main {
    display: grid;
    height: 800px;    
    padding-top: 130px;
    /* grid-template-columns: 1fr 6fr; */
    grid-template-columns: repeat(auto-fit, minmax(479px, auto));
}

.nav {
    background-color: rgba(115, 110, 192, 0.466);
    text-align: center;
}

.content {
    background-color: rgba(160, 157, 195, 0.466);
}

.footer {
    height: 400px;
    text-align: center;
    padding: 20px;
    background-color: rgb(223, 223, 223);
}

.bot {
    bottom: 0;
    right : 0;
    position: fixed;
    width: 350px;
}

.btn {
    font-size: 20px;
    float: right;
    width: 100%;
    padding: 8px;
    background-color: rgb(183, 0, 255)
}

Объяснение –

Здесь div с классом ‘Bot’ обертывают простую форму и кнопку внизу. Дисплей стиль упаковки DIV переключается, чтобы скрыть/шоу на основе состояния ShowChat. Мы не хотим размонтировать компонент здесь, потому что если мы размонтируем/монтируем, то история чата будет потеряна. Вы можете увидеть прокомментированный код ниже, который устанавливается/размонтированный на основе значения ShowChat. Кроме того, кнопки щелкают, чтобы общаться … «Нажмите, чтобы скрыть …» динамически устанавливаются на основе состояния ShowChat.


        
          
              
        {/*  {showChat ?  : null}  */}
        
          {!showChat 
            ?  
            : }

Теперь я объясню часть CSS, я устанавливаю положение: фиксированное и верхнее: 0 в класс заголовка. Причина в том, чтобы я заголовок, чтобы оставаться видимым, когда пользователь прокручивается вниз.

position: fixed;
top: 0;

Встроенный с вышеуказанной логикой, я устанавливаю класс Bot, чтобы быть закрепленным с 0 дном и 0 справа.

.bot {
    bottom: 0;
    right : 0;
    position: fixed;
    width: 350px;
}

Еще один интересный класс, который требует внимания, является «главным». Вы можете заметить, что я делаю NAV и CONTENT, чтобы все еще отзывчивать вместе с поддержанием ширины 30% – 70% для NAV и контента соответственно на рабочем столе.

Summary

My Application!!!

My Navigation

Content of my application will go here.....

Читайте ещё по теме: