From 15741c3b2e35a7f0c548a15efd4c58896c021d0e Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Sat, 29 Oct 2022 16:18:03 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=E9=80=9A=E7=94=A8=E6=B6=88?= =?UTF-8?q?=E6=81=AF=E5=88=97=E8=A1=A8=E5=A2=9E=E5=8A=A0=E6=B6=88=E6=81=AF?= =?UTF-8?q?=E5=A4=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shared/i18n/langs/en-US/translation.json | 1 + .../shared/i18n/langs/zh-CN/translation.json | 1 + .../ChatMessageList/ChatMessageHeader.tsx | 20 +++++++++++++++++++ .../ChatBox/ChatMessageList/NormalList.tsx | 6 ++++++ .../ChatBox/ChatMessageList/types.ts | 1 + client/web/src/components/ChatBox/index.tsx | 5 ++++- .../src/components/Panel/group/TextPanel.tsx | 9 +++++++-- .../Panel/personal/ConversePanel.tsx | 12 +++++++++-- 8 files changed, 50 insertions(+), 5 deletions(-) create mode 100644 client/web/src/components/ChatBox/ChatMessageList/ChatMessageHeader.tsx diff --git a/client/shared/i18n/langs/en-US/translation.json b/client/shared/i18n/langs/en-US/translation.json index ca727fe4..9cc4be19 100644 --- a/client/shared/i18n/langs/en-US/translation.json +++ b/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" } diff --git a/client/shared/i18n/langs/zh-CN/translation.json b/client/shared/i18n/langs/zh-CN/translation.json index 375aae90..b2e2dc49 100644 --- a/client/shared/i18n/langs/zh-CN/translation.json +++ b/client/shared/i18n/langs/zh-CN/translation.json @@ -312,6 +312,7 @@ "kfa493f3f": "回复", "kfaddd61d": "聊天服务", "kfbecf2a7": "确定要删除面板组 【{{name}}】 以及下级的所有面板么", + "kfc07c0a4": "这里是所有消息的开始，请畅所欲言。", "kfd340bbc": "管理成员", "kfe731dfc": "操作" } diff --git a/client/web/src/components/ChatBox/ChatMessageList/ChatMessageHeader.tsx b/client/web/src/components/ChatBox/ChatMessageList/ChatMessageHeader.tsx new file mode 100644 index 00000000..fbbe221a --- /dev/null +++ b/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 ( +
+
+ +
{props.title}
+
+
+ {t('这里是所有消息的开始，请畅所欲言。')} +
+
+ ); +}); +ChatMessageHeader.displayName = 'ChatMessageHeader'; diff --git a/client/web/src/components/ChatBox/ChatMessageList/NormalList.tsx b/client/web/src/components/ChatBox/ChatMessageList/NormalList.tsx index 112b6bd0..55377f5f 100644 --- a/client/web/src/components/ChatBox/ChatMessageList/NormalList.tsx +++ b/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 = React.memo( buildMessageItemRow(arr, index) )} + + {/* 因为是倒过来的，因此要前面的要放在后面 */} + {props.title && !props.hasMoreMessage && ( + + )} ); } diff --git a/client/web/src/components/ChatBox/ChatMessageList/types.ts b/client/web/src/components/ChatBox/ChatMessageList/types.ts index de6a0303..0c24d767 100644 --- a/client/web/src/components/ChatBox/ChatMessageList/types.ts +++ b/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; diff --git a/client/web/src/components/ChatBox/index.tsx b/client/web/src/components/ChatBox/index.tsx index 3e3e4064..1ba48da3 100644 --- a/client/web/src/components/ChatBox/index.tsx +++ b/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 = React.memo((props) => { - const { converseId, isGroup } = props; + const { converseId, converseTitle, isGroup } = props; const { messages, loading, @@ -47,6 +49,7 @@ const ChatBoxInner: React.FC = React.memo((props) => {
= 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 = React.memo( disabled={disabled} placeholder={placeholder} > - + ); diff --git a/client/web/src/components/Panel/personal/ConversePanel.tsx b/client/web/src/components/Panel/personal/ConversePanel.tsx index 3ef94ea6..874d7e5f 100644 --- a/client/web/src/components/Panel/personal/ConversePanel.tsx +++ b/client/web/src/components/Panel/personal/ConversePanel.tsx @@ -53,9 +53,13 @@ export const ConversePanel: React.FC = React.memo( return ; } + const converseHeader = converse && ( + + ); + return ( } + header={converseHeader} actions={(setRightPanel) => { if (!converse) { return []; @@ -134,7 +138,11 @@ export const ConversePanel: React.FC = React.memo( ]); }} > - + ); }