[react-chatbot-kit] 챗봇 구현하기 - 2

 

이전 글 : 2022.06.07 - [react-chatbot-kit] 챗봇 구현하기 - 1

챗봇 테스트해보기

🥪 react-chatbot-kit 라이브러리 설치하기

npm install react-chatbot-kit

 

🥪 필요한 파일들 생성하기

챗봇을 사용하기 위해 필요한 파일 세 개를 만들어보자! 먼저 루트 디렉토리에 bot 폴더를 만들어 하위에 필요한 파일들을 만들어줄 것이다. 

왼쪽과 같이 ActionProvider.js, config.js, MessageParser.js 파일을 생성해준다. 공식 문서를 참고해 파일들의 기본적인 내용을 채워준다.(MessageParser.js 파일의 경우 공식 문서에서 export default 부분이 누락되어있다.)

 

// bot/ActionProvider.js
class ActionProvider {
  constructor(createChatbotMessage, setStateFunc, createClientMessage) {
    this.createChatbotMessage = createChatbotMessage;
    this.setState = setStateFunc;
    this.createClientMessage = createClientMessage;
  }
}

export default ActionProvider;

 

// bot/config.js
import { createChatBotMessage } from "react-chatbot-kit";

const config = {
  initialMessages: [
    createChatBotMessage(
      "안녕하세요! 궁금한 내용을 입력해주세요."
    ),
  ],
};

export default config;

 

// bot/MessageParser.js
class MessageParser {
  constructor(actionProvider, state) {
    this.actionProvider = actionProvider;
    this.state = state;
  }

  parse(message) {
    console.log(message);
  }
}

export default MessageParser;

 

🥪 챗봇 초기화하기

챗봇을 화면에 띄워보기 위해 _app.tsx 파일을 수정해보자! 챗봇 관련 디펜던시들을 임포트 해주고 위에서 만들어준 파일 세 개도 임포트 해준다.

// pages/_app.tsx
import type { AppProps } from "next/app";
import Chatbot from "react-chatbot-kit";

import config from "../bot/config.js";
import MessageParser from "../bot/MessageParser.js";
import ActionProvider from "../bot/ActionProvider.js";

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

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Chatbot
        config={config}
        messageParser={MessageParser}
        actionProvider={ActionProvider}
      />
    </>
  );
}

export default MyApp;

 

여기까지 하고 실행시켜보면(npm run dev) 다음과 같은 결과를 얻을 수 있다!

기본 페이지 아래에 챗봇이 위치하는 걸 볼 수 있는데 다음 포스트에선 위치와 디자인을 변경해보자.

 

 

🐱‍👤 참고 : https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/getting-started