리액트 react-chatbot-kit

react-chatbot-kit를 간단히 사용

참고 링크 : https://fredrikoseberg.github.io/react-chatbot-kit-docs/

npm install react-chatbot-kit

1. 챗봇 설정 (config.js)

초기 챗봇 설정을 담당하는 파일입니다. 여기서는 챗봇이 처음 로드될 때 표시될 기본 메시지를 설정합니다.

import { createChatBotMessage } from 'react-chatbot-kit';

const config = {
  initialMessages: [createChatBotMessage(`Hello world`)],
};

export default config;

설명: 이 코드는 챗봇이 사용자와의 대화를 시작할 때 "Hello world"라는 메시지를 자동으로 보냅니다.

2. 액션 제공자 (ActionProvider.jsx)

챗봇이 수행할 수 있는 다양한 액션(동작)을 정의하는 컴포넌트입니다.

import React from 'react';

const ActionProvider = ({ createChatBotMessage, setState, children }) => {
  const handleHello = () => {
    const botMessage = createChatBotMessage('나도 반가웡');

    setState(prev => ({
      ...prev,
      messages: [...prev.messages, botMessage]
    }));
  };

  const handleUnknownMessage = () => {
    const botMessage = createChatBotMessage('죄송해요 무슨 말씀이신지 잘 모르겠어요 ㅜㅜ');

    setState(prev => ({
      ...prev,
      messages: [...prev.messages, botMessage]
    }));
  };

  return (
    <div>
      {React.Children.map(children, (child) => {
        return React.cloneElement(child, {
          actions: { handleHello, handleUnknownMessage },
        });
      })}
    </div>
  );
};

export default ActionProvider;

설명: ActionProvider는 handleHello와 handleUnknownMessage 두 가지 액션을 정의합니다. 사용자의 인사에 반응하거나 알 수 없는 메시지에 대응하는 메시지를 추가합니다.

3. 메시지 파서 (MessageParser.jsx)

사용자의 입력을 해석하고 적절한 액션을 수행하는 로직을 포함합니다.

import React from 'react';

const MessageParser = ({ children, actions }) => {
  const parse = (message) => {
    if (message.includes('안녕')) {
      actions.handleHello();
    } else {
      actions.handleUnknownMessage();
    }
  };

  return (
    <div>
      {React.Children.map(children, (child) => {
        return React.cloneElement(child, {
          parse: parse,
          actions,
        });
      })}
    </div>
  );
};

export default MessageParser;

설명: MessageParser는 사용자의 입력을 분석하여 "안녕"이 포함되어 있으면 handleHello 액션을, 그렇지 않으면 handleUnknownMessage 액션을 실행합니다.

4. 챗봇 컴포넌트 초기화

챗봇의 주요 컴포넌트를 초기화하고 모든 설정을 연결합니다.

import config from '../bot/config.js';
import MessageParser from '../bot/Messageparser.js';
import ActionProvider from '../bot/ActionProvider.js';

const MyComponent = () => {
  return (
    <div>
      <Chatbot
        config={config}
        messageParser={MessageParser}
        actionProvider={ActionProvider}
      />
    </div>
  );
};

설명: 이 컴포넌트는 Chatbot을 사용하여 페이지에 챗봇을 표시하고, config, ActionProvider, 그리고 MessageParser를 연결하여 챗봇이 올바르게 작동하도록 설정합니다.