feat: 回复消息的显示

shared/index.tsx

@@ -141,6 +141,7 @@ export {
   version,
 } from './utils/environment';
 export { getTextColorHex, isValidStr } from './utils/string-helper';
+export { MessageHelper } from './utils/message-helper';
 export { uploadFile } from './utils/upload-helper';
 export type { UploadFileResult } from './utils/upload-helper';
 export { sleep } from './utils/utils';

shared/utils/message-helper.ts

@@ -5,6 +5,7 @@ import type {
 } from '../model/message';
 import _isNil from 'lodash/isNil';
 import _set from 'lodash/set';
+import _get from 'lodash/get';
 import _pick from 'lodash/pick';
 
 const replyMsgFields = ['_id', 'content', 'author'] as const;
@@ -17,6 +18,18 @@ export class MessageHelper {
     this.payload = { ...origin };
   }
 
+  /**
+   * 判断消息体内是否有回复信息
+   */
+  hasReply(): ReplyMsgType | false {
+    const reply = _get(this.payload, ['meta', 'reply']);
+    if (_isNil(reply)) {
+      return false;
+    }
+
+    return reply;
+  }
+
   setReplyMsg(replyMsg: ReplyMsgType) {
     if (_isNil(replyMsg)) {
       return;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   ChatMessage,
   formatShortTime,
@@ -11,6 +11,9 @@ import { useRenderPluginMessageInterpreter } from './useRenderPluginMessageInter
 import { getMessageRender } from '@/plugin/common';
 import { Icon } from '@iconify/react';
 import { Dropdown, Menu } from 'antd';
+import { MessageHelper } from 'tailchat-shared';
+import { UserName } from '@/components/UserName';
+import './item.less';
 
 /**
  * 消息的会话信息
@@ -29,6 +32,27 @@ function useChatMessageItemAction(payload: ChatMessage): React.ReactElement {
   );
 }
 
+const MessageQuote: React.FC<{ payload: ChatMessage }> = React.memo(
+  ({ payload }) => {
+    const quote = useMemo(
+      () => new MessageHelper(payload).hasReply(),
+      [payload]
+    );
+
+    if (quote === false) {
+      return null;
+    }
+
+    return (
+      <div className="chat-message-item_quote border-l-4 pl-2 opacity-80">
+        {t('回复')} <UserName userId={String(quote.author)} />:{' '}
+        <span>{getMessageRender(quote.content)}</span>
+      </div>
+    );
+  }
+);
+MessageQuote.displayName = 'MessageQuote';
+
 interface ChatMessageItemProps {
   showAvatar: boolean;
   payload: ChatMessage;
@@ -41,7 +65,7 @@ export const ChatMessageItem: React.FC<ChatMessageItemProps> = React.memo(
     const actions = useChatMessageItemAction(payload);
 
     return (
-      <div className="flex px-2 group hover:bg-black hover:bg-opacity-10 relative">
+      <div className="chat-message-item flex px-2 group hover:bg-black hover:bg-opacity-10 relative">
         {/* 头像 */}
         <div className="w-18 flex items-start justify-center pt-0.5">
           {showAvatar ? (
@@ -65,6 +89,8 @@ export const ChatMessageItem: React.FC<ChatMessageItemProps> = React.memo(
           )}
 
           <div className="leading-6 break-words">
+            <MessageQuote payload={payload} />
+
             <span>{getMessageRender(payload.content)}</span>
 
             {/* 解释器按钮 */}

web/src/components/ChatBox/ChatMessageList/item.less

@@ -0,0 +1,7 @@
+.chat-message-item {
+  .chat-message-item_quote {
+    img {
+      max-height: 60px !important;
+    }
+  }
+}

web/src/styles/antd/overwrite.less

@@ -21,6 +21,12 @@
   }
 }
 
+.ant-image {
+  .ant-image-mask {
+    overflow: hidden;
+  }
+}
+
 .ant-image-preview-img {
   display: inline;
 }