feat: 为通用消息列表增加消息头

client/shared/i18n/langs/en-US/translation.json

@@ -312,6 +312,7 @@
   "kfa493f3f": "Reply",
   "kfaddd61d": "Chat Service",
   "kfbecf2a7": "Are you sure you want to delete the panel group [{{name}}] and all subordinate panels",
+  "kfc07c0a4": "Here is the beginning of all messages, please feel free to speak up.",
   "kfd340bbc": "Manage members",
   "kfe731dfc": "Action"
 }

client/shared/i18n/langs/zh-CN/translation.json

@@ -312,6 +312,7 @@
   "kfa493f3f": "回复",
   "kfaddd61d": "聊天服务",
   "kfbecf2a7": "确定要删除面板组 【{{name}}】 以及下级的所有面板么",
+  "kfc07c0a4": "这里是所有消息的开始，请畅所欲言。",
   "kfd340bbc": "管理成员",
   "kfe731dfc": "操作"
 }

client/web/src/components/ChatBox/ChatMessageList/ChatMessageHeader.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Icon } from 'tailchat-design';
+import { t } from 'tailchat-shared';
+
+export const ChatMessageHeader: React.FC<{
+  title: React.ReactNode;
+}> = React.memo((props) => {
+  return (
+    <div className="px-5 pb-4">
+      <div className="font-extrabold mb-2 text-2xl flex items-center space-x-1">
+        <Icon icon="mdi:pound" />
+        <div>{props.title}</div>
+      </div>
+      <div className="text-base opacity-80">
+        {t('这里是所有消息的开始，请畅所欲言。')}
+      </div>
+    </div>
+  );
+});
+ChatMessageHeader.displayName = 'ChatMessageHeader';

client/web/src/components/ChatBox/ChatMessageList/NormalList.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import { sharedEvent } from 'tailchat-shared';
+import { ChatMessageHeader } from './ChatMessageHeader';
 import { buildMessageItemRow } from './Item';
 import type { MessageListProps } from './types';
 
@@ -60,6 +61,11 @@ export const NormalMessageList: React.FC<MessageListProps> = React.memo(
             buildMessageItemRow(arr, index)
           )}
         </div>
+
+        {/* 因为是倒过来的，因此要前面的要放在后面 */}
+        {props.title && !props.hasMoreMessage && (
+          <ChatMessageHeader title={props.title} />
+        )}
       </div>
     );
   }

client/web/src/components/ChatBox/ChatMessageList/types.ts

@@ -2,6 +2,7 @@ import type { ChatMessage } from 'tailchat-shared';
 
 export interface MessageListProps {
   messages: ChatMessage[];
+  title?: React.ReactNode;
   isLoadingMore: boolean;
   hasMoreMessage: boolean;
   onLoadMore: () => Promise<void>;

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

@@ -11,16 +11,18 @@ import { useMessageAck } from './useMessageAck';
 type ChatBoxProps =
   | {
       converseId: string;
+      converseTitle?: React.ReactNode;
       isGroup: false;
       groupId?: string;
     }
   | {
       converseId: string;
+      converseTitle?: React.ReactNode;
       isGroup: true;
       groupId: string;
     };
 const ChatBoxInner: React.FC<ChatBoxProps> = React.memo((props) => {
-  const { converseId, isGroup } = props;
+  const { converseId, converseTitle, isGroup } = props;
   const {
     messages,
     loading,
@@ -47,6 +49,7 @@ const ChatBoxInner: React.FC<ChatBoxProps> = React.memo((props) => {
     <div className="w-full h-full flex flex-col select-text">
       <ChatMessageList
         key={converseId}
+        title={converseTitle}
         messages={messages}
         isLoadingMore={isLoadingMore}
         hasMoreMessage={hasMoreMessage}

client/web/src/components/Panel/group/TextPanel.tsx

@@ -72,7 +72,7 @@ export const TextPanel: React.FC<TextPanelProps> = React.memo(
     const panelInfo = useGroupPanelInfo(groupId, panelId);
     const { disabled, placeholder } = useChatInputInfo(groupId);
 
-    if (panelInfo === undefined) {
+    if (!panelInfo) {
       return null;
     }
 
@@ -86,7 +86,12 @@ export const TextPanel: React.FC<TextPanelProps> = React.memo(
           disabled={disabled}
           placeholder={placeholder}
         >
-          <ChatBox converseId={panelId} isGroup={true} groupId={groupId} />
+          <ChatBox
+            converseId={panelId}
+            converseTitle={panelInfo.name}
+            isGroup={true}
+            groupId={groupId}
+          />
         </ChatInputMentionsContextProvider>
       </GroupPanelWrapper>
     );

client/web/src/components/Panel/personal/ConversePanel.tsx

@@ -53,9 +53,13 @@ export const ConversePanel: React.FC<ConversePanelProps> = React.memo(
       return <OpenedPanelTip onClosePanelWindow={closePanelWindow} />;
     }
 
+    const converseHeader = converse && (
+      <ConversePanelTitle converse={converse} />
+    );
+
     return (
       <CommonPanelWrapper
-        header={converse && <ConversePanelTitle converse={converse} />}
+        header={converseHeader}
         actions={(setRightPanel) => {
           if (!converse) {
             return [];
@@ -134,7 +138,11 @@ export const ConversePanel: React.FC<ConversePanelProps> = React.memo(
           ]);
         }}
       >
-        <ChatBox converseId={converseId} isGroup={false} />
+        <ChatBox
+          converseId={converseId}
+          converseTitle={converseHeader}
+          isGroup={false}
+        />
       </CommonPanelWrapper>
     );
   }