react-chatbot-kit 기본 사용법

React-chatbot-kit

• React 기반의 챗봇을 쉽게 개발할 수 있도록 도와주는 오픈소스 라이브러리
  
• 참조 링크 : https://fredrikoseberg.github.io/react-chatbot-kit-docs/
• 참고 블로그 : https://velog.io/@sjw05360/리액트-react-chatbot-kit

사용법

1. 설치 코드

npm install react-chatbot-kit

2. 기본적인 3가지 구성요소

2-1. MessageParser

• 사용자가 입력한 메시지를 분석하는 역할
• 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: 사용자 메시지를 분석하고 알맞은 액션을 호출하는 역할.
  • React.Children.map: children을 순차적으로 처리하며, 각 자식 컴포넌트에 parse와 actions를 추가.
  • parse: 사용자가 보낸 메시지를 파싱하여 대응하는 액션을 처리

2-2. ActionProvider

• 챗봇이 응답할 동작을 정의하는 역할
• 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: 사용자 메시지에 대한 응답을 생성하고, 상태를 업데이트하여 챗봇의 대화 흐름을 관리.
  • createChatBotMessage: 챗봇의 응답 메시지를 생성하는 함수.
  • setState: 챗봇 상태를 업데이트하는 함수. 새로운 메시지를 상태에 추가.
  • handleHello: 사용자가 "안녕"이라고 입력했을 때 챗봇의 반응을 처리하는 함수.
  • handleUnknownMessage: 챗봇이 이해할 수 없는 메시지를 처리하는 함수.
  • React.Children.map: 자식 컴포넌트에 액션을 전달하여, 자식 컴포넌트에서 액션을 사용할 수 있게 하는 메서드.

2-3. Config

• 설정을 정의하는 부분
• config.js

  import { createChatBotMessage } from "react-chatbot-kit";
  
  const config = {
    initialMessages: [createChatBotMessage(`Hello world`)],
  };
  
  export default config;

  • initialMessages: 챗봇이 로드될 때 처음으로 표시할 메시지를 설정하는 배열입니다.
  • createChatBotMessage: 주어진 텍스트를 챗봇 메시지 객체로 변환하는 함수입니다.

3. Chatbot

• react-chatbot-kit를 사용하여 챗봇 UI를 설정하고 표시하는 컴포넌트

import React from "react";
import Chatbot from "react-chatbot-kit";

import config from "../chatbot/config";
import MessageParser from "../chatbot/MessageParser";
import ActionProvider from "../chatbot/ActionProvider";

import "react-chatbot-kit/build/main.css";

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

export default ChatBot;

• Chatbot: 챗봇의 UI 및 동작을 관리하는 기본 컴포넌트.
• config: 챗봇의 초기 메시지 및 설정을 포함하는 객체.
• MessageParser: 사용자의 메시지를 분석하여 적절한 액션을 호출하는 컴포넌트.
• ActionProvider: 사용자의 입력에 대한 챗봇의 반응을 정의하는 컴포넌트.
• 스타일: react-chatbot-kit의 기본 스타일을 포함한 CSS 파일.