@teamsparta/chat-ui/src/sample/ChatContainerSample.jsx

simple chat-ui

import { ChatContainer, MessageManager } from "../lib";
import CustomBannerSample from "./CustomChatSample";
import React from "react";

const ChatContainerSample = () => {
  const messageManager = MessageManager.getInstance();
  const handleSend = async (query) => {
    messageManager.addUserMessage(query);
    await new Promise((resolve) => setTimeout(resolve, 5000)); // 5초 기다립니다.
    messageManager.addPeerMessage("답장입니다.");
  };

  const config = {
    initialMessages: [
      {
        role: "custom",
        content: <CustomBannerSample />,
      },
      {
        role: "peer",
        profileSrc: "/rtan_profile.png",
        content:
          "안녕하세요! 강의 내용 중 이해가 되지 않거나, 진행이 어려운 부분이 있다면 르탄봇에게 언제든지 물어보세요!",
        date: new Date(),
      },
    ],
    profileConfig: {
      name: "척척박사 르탄봇",
      status: "online",
      description: "바로 응답",
      profileImage: "/rtan_profile.png",
      theme: "dark",
      handleThumbUp: () => {
        console.log("thumb up");
      },
      handleThumbDown: () => {
        console.log("thumb down");
      },
    },
    presetQuestions: [
      {
        title: "자주 묻는 질문",
        style: "highlight",
        handler: () => {
          handleSend("자주 묻는 질문");
        },
      },
      {
        title: "안녕하세요.",
        handler: () => {
          handleSend("안녕하세요.");
        },
      },
    ],
  };
  const buttonClick = () => {
    messageManager.addPeerMessage("답장입니다.");
  };
  const buttonClick2 = () => {
    messageManager.addCustomMessage(<CustomBannerSample />);
  };
  const buttonClick3 = () => {
    messageManager.streamPeerMessage("스트림 메시지입니다.");
  };

  return (
    <div style={{ height: "800px" }}>
      <button onClick={buttonClick}>답장 추가하기</button>
      <button onClick={buttonClick2}>커스텀 채팅 추가</button>
      <button onClick={buttonClick3}>스트림 채팅 추가</button>
      <ChatContainer config={config} handleSendMessage={handleSend} />
    </div>
  );
};

export default ChatContainerSample;