@teamsparta/chat-ui/src/lib/component/ChatArea.jsx

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 (
    <S.ChatArea ref={useRef} theme={theme}>
      {Object.keys(groupedMessages).map((date, index) =>
        renderMessagesForDate(
          index,
          initialImage,
          handleThumbUp,
          handleThumbDown,
          date,
          groupedMessages[date],
          theme,
        ),
      )}
    </S.ChatArea>
  );
};

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 (
    <div key={index}>
      {date !== "undefined" && (
        <S.DateTextContainer>
          <S.DateTextLine theme={theme} />
          <S.DateText>{date}</S.DateText>
          <S.DateTextLine theme={theme} />
        </S.DateTextContainer>
      )}
      {messages.map((message, index) =>
        renderMessages(
          initialProfileImage,
          handleThumbUp,
          handleThumbDown,
          message,
          index,
          theme,
        ),
      )}
    </div>
  );
}
function renderMessages(
  initialProfileImage,
  handleThumbUp,
  handleThumbDown,
  message,
  index,
  theme,
) {
  if (message.role === "peer") {
    return (
      /* 세로로 단락 구분하는 컨테이너 */
      <S.PeerChatBubbleContainer key={index}>
        <S.ProfileImage
          src={message.profileSrc ? message.profileSrc : initialProfileImage}
        />
        <S.ColumnContainer key={index}>
          <S.FlexContainer>
            <S.WhiteChatBubble theme={theme}>
              {message.content}
            </S.WhiteChatBubble>
            <S.TimeStamp>
              {formatTime(message.date.getHours(), message.date.getMinutes())}
            </S.TimeStamp>
          </S.FlexContainer>
          <MessageFeedback
            theme={theme}
            handleThumbUp={handleThumbUp}
            handleThumbDown={handleThumbDown}
          />
          {/*  여기1*/}
        </S.ColumnContainer>
      </S.PeerChatBubbleContainer>
    );
  } else if (message.role === "user") {
    return (
      <S.UserChatBubbleContainer key={index}>
        <S.TimeStamp>
          {formatTime(message.date.getHours(), message.date.getMinutes())}
        </S.TimeStamp>
        <S.RedChatBubble theme={theme}>{message.content}</S.RedChatBubble>
      </S.UserChatBubbleContainer>
    );
  } else if (message.role === "custom") {
    return (
      <S.CustomChatBubbleContainer key={index}>
        {message.content}
      </S.CustomChatBubbleContainer>
    );
  }
}