feat: 会话面板抬头

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

@@ -22,6 +22,7 @@
   "k35abe359": "Lobby",
   "k35f486ba": "Nickname",
   "k35f990b0": "View Detail",
+  "k36722a78": "Conversation with <1></1>",
   "k3b4b656d": "About",
   "k3bbf3bbd": "Register Account",
   "k3c502edb": "E-mail can not be empty",
@@ -64,6 +65,7 @@
   "k7fc7e508": "Dark Mode",
   "k821ff85a": "Common",
   "k8582af3f": "Refuse",
+  "k8849b674": "Multiplayer conversations with <1></1> and <4></4>",
   "k89df1d1e": "The network is abnormal",
   "k8abdba5c": "Has been sent",
   "k8acbe00": "Current service available",
@@ -120,6 +122,7 @@
   "kdd6c18f8": "Service exception",
   "ke17b2c87": "Do not upload pictures that violate local laws and regulations",
   "ke187440d": "Panel type cannot be empty",
+  "kea50b8e9": "Multi-person conversation with <1>{{membersEl}}</1> and others",
   "kecbd7449": "Delete",
   "ked2baf28": "Loading...",
   "ked5385d5": "Create Panel",

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

@@ -22,6 +22,7 @@
   "k35abe359": "大厅",
   "k35f486ba": "用户昵称",
   "k35f990b0": "查看详情",
+  "k36722a78": "与 <1></1> 的会话",
   "k3b4b656d": "关于",
   "k3bbf3bbd": "注册账号",
   "k3c502edb": "邮箱不能为空",
@@ -64,6 +65,7 @@
   "k7fc7e508": "暗黑模式",
   "k821ff85a": "通用",
   "k8582af3f": "拒绝",
+  "k8849b674": "与 <1></1> 和 <4></4> 的多人会话",
   "k89df1d1e": "网络出现异常",
   "k8abdba5c": "已发送",
   "k8acbe00": "当前服务可用",
@@ -120,6 +122,7 @@
   "kdd6c18f8": "服务异常",
   "ke17b2c87": "请勿上传违反当地法律法规的图片",
   "ke187440d": "面板类型不能为空",
+  "kea50b8e9": "与 <1>{{membersEl}}</1> 等人的多人会话",
   "kecbd7449": "删除",
   "ked2baf28": "加载中...",
   "ked5385d5": "创建面板",

shared/index.tsx

@@ -122,6 +122,7 @@ export { createStore } from './redux/store';
 export type { AppStore, AppState, AppDispatch } from './redux/store';
 
 // utils
+export { joinArray } from './utils/array-helper';
 export {
   shouldShowMessageTime,
   getMessageTimeDiff,

shared/utils/__tests__/array-helper.spec.ts

@@ -0,0 +1,14 @@
+import { joinArray } from '../array-helper';
+
+describe('array-helper', () => {
+  test('joinArray', () => {
+    expect(joinArray([1, 2, 3], '5')).toMatchObject([1, '5', 2, '5', 3]);
+    expect(joinArray([{ a: 1 }, { a: 2 }, { a: 3 }], '5')).toMatchObject([
+      { a: 1 },
+      '5',
+      { a: 2 },
+      '5',
+      { a: 3 },
+    ]);
+  });
+});

shared/utils/array-helper.ts

@@ -0,0 +1,17 @@
+import _flatten from 'lodash/flatten';
+
+/**
+ * 类似于join，但是返回一个数组
+ * join会将元素强制转化为字符串
+ */
+export function joinArray<T, K>(arr: T[], separator: K): (T | K)[] {
+  return _flatten(
+    arr.map((item, i) => {
+      if (i === 0) {
+        return [item];
+      } else {
+        return [separator, item];
+      }
+    })
+  );
+}

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

@@ -0,0 +1,60 @@
+import { ChatBox } from '@/components/ChatBox';
+import React from 'react';
+import { joinArray, Trans, useAppSelector, useUserId } from 'tailchat-shared';
+import { PanelCommonHeader } from '../common/Header';
+import _without from 'lodash/without';
+import _take from 'lodash/take';
+import { UserName } from '@/components/UserName';
+
+function useConverseTitle(converseId: string): React.ReactNode {
+  const members = useAppSelector(
+    (state) => state.chat.converses[converseId]?.members ?? []
+  );
+  const userId = useUserId();
+  const otherMembers = _without<string>(members, userId ?? '');
+  const len = otherMembers.length;
+
+  if (len === 1) {
+    return (
+      <Trans>
+        与 <UserName userId={otherMembers[0]} /> 的会话
+      </Trans>
+    );
+  } else if (len === 2) {
+    return (
+      <Trans>
+        与 <UserName userId={otherMembers[0]} /> 和{' '}
+        <UserName userId={otherMembers[1]} /> 的多人会话
+      </Trans>
+    );
+  } else {
+    const membersEl = joinArray(
+      _take(otherMembers, 2).map((uid) => <UserName key={uid} userId={uid} />),
+      <span>，</span>
+    );
+    return (
+      <Trans>
+        与 <span>{{ membersEl }}</span> 等人的多人会话
+      </Trans>
+    );
+  }
+}
+
+interface ConversePanelProps {
+  converseId: string;
+}
+export const ConversePanel: React.FC<ConversePanelProps> = React.memo(
+  ({ converseId }) => {
+    const title = useConverseTitle(converseId);
+
+    return (
+      <div className="flex flex-col overflow-hidden flex-1">
+        <PanelCommonHeader actions={[]}>{title}</PanelCommonHeader>
+        <div className="flex-1 overflow-hidden">
+          <ChatBox converseId={converseId} isGroup={false} />
+        </div>
+      </div>
+    );
+  }
+);
+ConversePanel.displayName = 'ConversePanel';

web/src/routes/Main/Content/Personal/Converse/index.tsx

@@ -1,4 +1,4 @@
-import { ChatBox } from '@/components/ChatBox';
+import { ConversePanel } from '@/components/Panel/personal/ConversePanel';
 import React from 'react';
 import { useParams } from 'react-router';
 
@@ -6,13 +6,9 @@ interface UserConversePanelParams {
   converseId: string;
 }
 
-export const ConversePanel: React.FC = React.memo(() => {
+export const PersonalConverse: React.FC = React.memo(() => {
   const params = useParams<UserConversePanelParams>();
 
-  return (
+  return <ConversePanel converseId={params.converseId} />;
-    <div className="w-full h-full overflow-hidden">
-      <ChatBox converseId={params.converseId} isGroup={false} />
-    </div>
-  );
 });
-ConversePanel.displayName = 'ConversePanel';
+PersonalConverse.displayName = 'PersonalConverse';

web/src/routes/Main/Content/Personal/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { PageContent } from '../PageContent';
-import { ConversePanel } from './Converse';
+import { PersonalConverse } from './Converse';
 import { FriendPanel } from './Friends';
 import { PluginsPanel } from './Plugins';
 import { PersonalSidebar } from './Sidebar';
@@ -16,7 +16,7 @@ export const Personal: React.FC = React.memo(() => {
 
         <Route
           path="/main/personal/converse/:converseId"
-          component={ConversePanel}
+          component={PersonalConverse}
         />
 
         <Redirect to="/main/personal/friends" />