@teamsparta/chat-ui/dist/component/ChatArea.js

simple chat-ui

import React, { useEffect } from "react";
import * as S from "./ChatArea.style";
import { formatDate, formatTime } from "../common/date";
import MessageFeedback from "./MessageFeedback";
const ChatArea = ({
  initialImage,
  useRef,
  handleThumbUp,
  handleThumbDown,
  messages,
  scrollToBottom,
  theme
}) => {
  useEffect(() => {
    scrollToBottom();
  }, [messages]);
  const groupedMessages = groupMessagesByDate(messages);
  return /*#__PURE__*/React.createElement(S.ChatArea, {
    ref: useRef,
    theme: theme
  }, Object.keys(groupedMessages).map((date, index) => renderMessagesForDate(index, initialImage, handleThumbUp, handleThumbDown, date, groupedMessages[date], theme)));
};
export default ChatArea;
function groupMessagesByDate(messages) {
  const grouped = {};
  messages.forEach(message => {
    const date = formatDate(message.date);
    if (!grouped[date]) {
      grouped[date] = [];
    }
    grouped[date].push(message);
  });
  return grouped;
}
function renderMessagesForDate(index, initialProfileImage, handleThumbUp, handleThumbDown, date, messages, theme) {
  return /*#__PURE__*/React.createElement("div", {
    key: index
  }, date !== "undefined" && /*#__PURE__*/React.createElement(S.DateTextContainer, null, /*#__PURE__*/React.createElement(S.DateTextLine, {
    theme: theme
  }), /*#__PURE__*/React.createElement(S.DateText, null, date), /*#__PURE__*/React.createElement(S.DateTextLine, {
    theme: theme
  })), messages.map((message, index) => renderMessages(initialProfileImage, handleThumbUp, handleThumbDown, message, index, theme)));
}
function renderMessages(initialProfileImage, handleThumbUp, handleThumbDown, message, index, theme) {
  if (message.role === "peer") {
    return (
      /*#__PURE__*/
      /* 세로로 단락 구분하는 컨테이너 */
      React.createElement(S.PeerChatBubbleContainer, {
        key: index
      }, /*#__PURE__*/React.createElement(S.ProfileImage, {
        src: message.profileSrc ? message.profileSrc : initialProfileImage
      }), /*#__PURE__*/React.createElement(S.ColumnContainer, {
        key: index
      }, /*#__PURE__*/React.createElement(S.FlexContainer, null, /*#__PURE__*/React.createElement(S.WhiteChatBubble, {
        theme: theme
      }, message.content), /*#__PURE__*/React.createElement(S.TimeStamp, null, formatTime(message.date.getHours(), message.date.getMinutes()))), /*#__PURE__*/React.createElement(MessageFeedback, {
        theme: theme,
        handleThumbUp: handleThumbUp,
        handleThumbDown: handleThumbDown
      })))
    );
  } else if (message.role === "user") {
    return /*#__PURE__*/React.createElement(S.UserChatBubbleContainer, {
      key: index
    }, /*#__PURE__*/React.createElement(S.TimeStamp, null, formatTime(message.date.getHours(), message.date.getMinutes())), /*#__PURE__*/React.createElement(S.RedChatBubble, {
      theme: theme
    }, message.content));
  } else if (message.role === "custom") {
    return /*#__PURE__*/React.createElement(S.CustomChatBubbleContainer, {
      key: index
    }, message.content);
  }
}