feat: 聊天框消息

shared/index.tsx

@@ -71,5 +71,10 @@ export { createStore } from './redux/store';
 export type { AppStore, AppDispatch } from './redux/store';
 
 // utils
-export { getTextColorHex } from './utils/string-helper';
+export {
+  shouldShowMessageTime,
+  getMessageTimeDiff,
+  formatShortTime,
+} from './utils/date-helper';
 export { isBrowser, isNavigator } from './utils/environment';
+export { getTextColorHex } from './utils/string-helper';

shared/utils/date-helper.ts

@@ -12,7 +12,7 @@ dayjs.locale('zh-cn');
 /**
  * 是否为当天
  */
-export function isToday(date: Date): boolean {
+export function isToday(date: dayjs.ConfigType): boolean {
   return dayjs(date).isSame(dayjs(), 'd');
 }
 
@@ -22,9 +22,24 @@ export function isToday(date: Date): boolean {
 export function getMessageTimeDiff(input: Date): string {
   const date = dayjs(input);
 
-  if (isToday(input)) {
+  if (isToday(date)) {
     return date.fromNow();
   } else {
     return date.format('YYYY-MM-DD HH:mm:ss');
   }
 }
+
+/**
+ * 是否应该显示消息时间
+ * 间隔时间大于十五分钟则显示
+ */
+export function shouldShowMessageTime(date1: Date, date2: Date): boolean {
+  return Math.abs(date1.valueOf() - date2.valueOf()) > 15 * 60 * 1000;
+}
+
+/**
+ * 格式化为 小时:分钟
+ */
+export function formatShortTime(date: dayjs.ConfigType): string {
+  return dayjs(date).format('HH:mm');
+}

web/src/components/ChatBox/ChatMessageList/Item.tsx

@@ -1,5 +1,11 @@
 import React from 'react';
-import { ChatMessage, useCachedUserInfo } from 'pawchat-shared';
+import {
+  ChatMessage,
+  formatShortTime,
+  useCachedUserInfo,
+} from 'pawchat-shared';
+import { Avatar } from '@/components/Avatar';
+import clsx from 'clsx';
 
 interface ChatMessageItemProps {
   showAvatar: boolean;
@@ -11,8 +17,23 @@ export const ChatMessageItem: React.FC<ChatMessageItemProps> = React.memo(
     const userInfo = useCachedUserInfo(payload.author ?? '');
 
     return (
-      <div>
-        {userInfo.nickname}: {payload.content}
+      <div
+        className={clsx('flex px-2 group hover:bg-black hover:bg-opacity-10')}
+      >
+        <div className="w-18 flex items-center justify-center">
+          {showAvatar ? (
+            <Avatar size={40} src={userInfo.avatar} name={userInfo.nickname} />
+          ) : (
+            <div className="hidden group-hover:block opacity-40">
+              {formatShortTime(payload.createdAt)}
+            </div>
+          )}
+        </div>
+        <div className="flex flex-col">
+          {showAvatar && <div className="font-bold">{userInfo.nickname}</div>}
+
+          <div className="leading-6">{payload.content}</div>
+        </div>
       </div>
     );
   }

web/src/components/ChatBox/ChatMessageList/index.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
-import type { ChatMessage } from 'pawchat-shared';
+import {
+  ChatMessage,
+  getMessageTimeDiff,
+  shouldShowMessageTime,
+} from 'pawchat-shared';
 import { ChatMessageItem } from './Item';
+import { Divider } from 'antd';
 
 interface ChatMessageListProps {
   messages: ChatMessage[];
@@ -9,13 +14,41 @@ export const ChatMessageList: React.FC<ChatMessageListProps> = React.memo(
   (props) => {
     return (
       <div className="flex-1 overflow-y-scroll">
-        {props.messages.map((message) => (
-          <ChatMessageItem
-            key={message._id}
-            showAvatar={true}
-            payload={message}
-          />
-        ))}
+        {props.messages.map((message, index, arr) => {
+          let showDate = true;
+          let showAvatar = true;
+          const messageCreatedAt = new Date(message.createdAt ?? '');
+          if (index > 0) {
+            // 当不是第一条数据时
+
+            // 进行时间合并
+            const prevMessage = arr[index - 1];
+            if (
+              !shouldShowMessageTime(
+                new Date(prevMessage.createdAt ?? ''),
+                messageCreatedAt
+              )
+            ) {
+              showDate = false;
+            }
+
+            // 进行头像合并(在同一时间块下)
+            if (showDate === false) {
+              showAvatar = prevMessage.author !== message.author;
+            }
+          }
+
+          return (
+            <div key={message._id}>
+              {showDate && (
+                <Divider className="text-sm opacity-40 px-6 font-normal select-none">
+                  {getMessageTimeDiff(messageCreatedAt)}
+                </Divider>
+              )}
+              <ChatMessageItem showAvatar={showAvatar} payload={message} />
+            </div>
+          );
+        })}
       </div>
     );
   }