https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/

• 자세한 사용법은 공식 문서에서 확인!!

widget 사용이유

• chatbot에 이미지, 버튼 등과 같은 요소를 추가하기 위해, 사용자에게 텍스트 이외의 ui를 보여주기 위해 사용한다.

기본적인 사용법

1. 사용하고 싶은 widget에 대한 컴포넌트 생성

예시 코드

const AddButton = () => {
  return (
    <div>
      <button>추가</button>
    </div>
  );
};

export default AddButton;

2. config 파일에 widget 등록

import DogPicture from '../components/AddButton.jsx"

const config = {
  initialMessages: [createChatBotMessage("Hi!")],
  widgets: [
    {
      widgetName: 'addButton',
      widgetFunc: (props) => <AddButton {...props} />,
    },
  ],
};

• widgetName : ActionProvider에서 접근하기 위한 이름
• widgetFunc : 컴포넌트 이름

3. ActionProvider에서 widget 사용하기

import React from 'react';

const ActionProvider = ({ createChatBotMessage, setState, children }) => {
  const handleHello = () => {
    const botMessage = createChatBotMessage('Hello. Nice to meet you.');

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

  const handleAdd = () => {
    const botMessage = createChatBotMessage(
      "해당 내용을 추가하시겠습니까?",
      {
        widget: 'addButton',
      }
    );

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

  // Put the handleHello and handleDog function in the actions object to pass to the MessageParser
  return (
    <div>
      {React.Children.map(children, (child) => {
        return React.cloneElement(child, {
          actions: {
            handleHello,
            handleAdd,
          },
        });
      })}
    </div>
  );
};

export default ActionProvider;

• widget : 여기에는 사용할 widget 이름이 온다.

handleAdd 액션이 실행되게 되면 텍스트 아래에 widget이 생기게 된다.

추가 사항

{
	widget: "checkWidget",
	widgetProps: {
		addData: data, // 데이터를 위젯에 넘긴다
	},
}

• widgetProps를 통해 추가적인 데이터를 widget으로 넘겨 줄 수 있다. addData는 함수의 인자로서 넘어와서 사용된다.
• DOM으로 접근하기 위해서는 state의 messages에서 접근하면 된다.!