feat: 多人会话添加成员

shared/index.tsx

@@ -74,7 +74,11 @@ export {
 
 // model
 export { fetchAvailableServices } from './model/common';
-export { createDMConverse, updateAck } from './model/converse';
+export {
+  createDMConverse,
+  appendDMConverseMembers,
+  updateAck,
+} from './model/converse';
 export {
   addFriendRequest,
   cancelFriendRequest,

shared/model/converse.ts

@@ -21,6 +21,24 @@ export async function createDMConverse(
   return data;
 }
 
+/**
+ * 在多人会话中添加成员
+ */
+export async function appendDMConverseMembers(
+  converseId: string,
+  memberIds: string[]
+) {
+  const { data } = await request.post(
+    '/api/chat/converse/appendDMConverseMembers',
+    {
+      converseId,
+      memberIds,
+    }
+  );
+
+  return data;
+}
+
 /**
  * 获取会话信息
  * @param converseId 会话ID

shared/redux/setup.ts

@@ -8,7 +8,7 @@ import { ChatMessage, fetchConverseLastMessages } from '../model/message';
 import { socketEventListeners } from '../manager/socket';
 import { showToasts } from '../manager/ui';
 import { t } from '../i18n';
-import { fetchUserAck } from '../model/converse';
+import { ChatConverseInfo, fetchUserAck } from '../model/converse';
 
 /**
  * 初始化 Redux 上下文
@@ -125,6 +125,13 @@ function listenNotify(socket: AppSocket, store: AppStore) {
     );
   });
 
+  socket.listen<ChatConverseInfo>(
+    'chat.converse.updateDMConverse',
+    (converse) => {
+      store.dispatch(chatActions.setConverseInfo(converse));
+    }
+  );
+
   socket.listen<GroupInfo>('group.add', (groupInfo) => {
     store.dispatch(groupActions.appendGroups([groupInfo]));
   });

web/src/components/Panel/group/Wrapper.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { t, useGroupPanel } from 'tailchat-shared';
 import _isNil from 'lodash/isNil';
 import { Icon } from '@iconify/react';
-import { Button } from 'antd';
+import { Button, Tooltip } from 'antd';
 import { MembersPanel } from './MembersPanel';
 import { CommonPanelWrapper } from '../common/Wrapper';
 
@@ -25,21 +25,22 @@ export const GroupPanelWrapper: React.FC<GroupPanelWrapperProps> = React.memo(
       <CommonPanelWrapper
         header={panelInfo.name}
         actions={(setRightPanel) => [
-          <Button
-            key="members"
-            icon={
-              <Icon
-                className="anticon text-2xl"
-                icon="mdi:account-supervisor-outline"
-              />
-            }
-            onClick={() =>
-              setRightPanel({
-                name: t('成员'),
-                panel: <MembersPanel groupId={props.groupId} />,
-              })
-            }
-          />,
+          <Tooltip key="members" title={t('成员列表')}>
+            <Button
+              icon={
+                <Icon
+                  className="anticon text-2xl"
+                  icon="mdi:account-supervisor-outline"
+                />
+              }
+              onClick={() =>
+                setRightPanel({
+                  name: t('成员'),
+                  panel: <MembersPanel groupId={props.groupId} />,
+                })
+              }
+            />
+          </Tooltip>,
         ]}
       >
         {props.children}

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

@@ -1,8 +1,7 @@
 import { ChatBox } from '@/components/ChatBox';
-import { LoadingSpinner } from '@/components/LoadingSpinner';
 import { UserListItem } from '@/components/UserListItem';
 import { Icon } from '@iconify/react';
-import { Button } from 'antd';
+import { Button, Tooltip } from 'antd';
 import React from 'react';
 import {
   ChatConverseState,
@@ -12,14 +11,16 @@ import {
 } from 'tailchat-shared';
 import { CommonPanelWrapper } from '../common/Wrapper';
 import _compact from 'lodash/compact';
+import { openModal } from '@/components/Modal';
+import { AppendDMConverseMembers } from '@/components/modals/AppendDMConverseMembers';
 
-const ConversePanelHeader: React.FC<{ converse: ChatConverseState }> =
+const ConversePanelTitle: React.FC<{ converse: ChatConverseState }> =
   React.memo(({ converse }) => {
     const name = useDMConverseName(converse);
 
     return t('与 {{name}} 的会话', { name });
   });
-ConversePanelHeader.displayName = 'ConversePanelHeader';
+ConversePanelTitle.displayName = 'ConversePanelTitle';
 
 const ConversePanelMembers: React.FC<{ members: string[] }> = React.memo(
   ({ members }) => {
@@ -45,30 +46,51 @@ export const ConversePanel: React.FC<ConversePanelProps> = React.memo(
 
     return (
       <CommonPanelWrapper
-        header={converse && <ConversePanelHeader converse={converse} />}
+        header={converse && <ConversePanelTitle converse={converse} />}
         actions={(setRightPanel) => {
           if (!converse) {
             return [];
           }
 
           return _compact([
-            // 当成员数大于2时，显示成员列表按钮
-            converse.members.length > 2 && (
+            <Tooltip key="add" title={t('邀请成员')}>
               <Button
-                key="members"
                 icon={
                   <Icon
                     className="anticon text-2xl"
-                    icon="mdi:account-supervisor-outline"
+                    icon="mdi:account-multiple-plus-outline"
                   />
                 }
                 onClick={() =>
-                  setRightPanel({
-                    name: t('成员'),
-                    panel: <ConversePanelMembers members={converse.members} />,
-                  })
+                  openModal(
+                    <AppendDMConverseMembers
+                      converseId={converse._id}
+                      withoutUserIds={converse.members}
+                    />
+                  )
                 }
               />
+            </Tooltip>,
+            // 当成员数大于2时，显示成员列表按钮
+            converse.members.length > 2 && (
+              <Tooltip key="members" title={t('成员列表')}>
+                <Button
+                  icon={
+                    <Icon
+                      className="anticon text-2xl"
+                      icon="mdi:account-supervisor-outline"
+                    />
+                  }
+                  onClick={() =>
+                    setRightPanel({
+                      name: t('成员'),
+                      panel: (
+                        <ConversePanelMembers members={converse.members} />
+                      ),
+                    })
+                  }
+                />
+              </Tooltip>
             ),
           ]);
         }}

web/src/components/modals/AppendDMConverseMembers.tsx

@@ -0,0 +1,41 @@
+import { Button } from 'antd';
+import React, { useState } from 'react';
+import { appendDMConverseMembers, t, useAsyncFn } from 'tailchat-shared';
+import { FriendPicker } from '../FriendPicker';
+import { closeModal, ModalWrapper } from '../Modal';
+
+interface AppendDMConverseMembersProps {
+  converseId: string;
+  /**
+   * 排除的用户id
+   * 在选择好友时会进行过滤
+   */
+  withoutUserIds?: string[];
+}
+export const AppendDMConverseMembers: React.FC<AppendDMConverseMembersProps> =
+  React.memo((props) => {
+    const { converseId, withoutUserIds = [] } = props;
+    const [selectedFriendIds, setSelectedFriendIds] = useState<string[]>([]);
+
+    const [{ loading }, handleConfirm] = useAsyncFn(async () => {
+      await appendDMConverseMembers(converseId, [...selectedFriendIds]);
+      closeModal();
+    }, [converseId, selectedFriendIds]);
+
+    return (
+      <ModalWrapper title={t('邀请好友加入会话')}>
+        <FriendPicker
+          withoutUserIds={withoutUserIds}
+          selectedIds={selectedFriendIds}
+          onChange={setSelectedFriendIds}
+        />
+
+        <div className="text-right">
+          <Button type="primary" loading={loading} onClick={handleConfirm}>
+            {t('确认')}
+          </Button>
+        </div>
+      </ModalWrapper>
+    );
+  });
+AppendDMConverseMembers.displayName = 'AppendDMConverseMembers';

web/src/components/modals/CreateDMConverse.tsx

@@ -5,14 +5,14 @@ import { createDMConverse, t, useAsyncFn } from 'tailchat-shared';
 import { FriendPicker } from '../FriendPicker';
 import { closeModal, ModalWrapper } from '../Modal';
 
-interface CreateDMCOnverseProps {
+interface CreateDMConverseProps {
   /**
    * 排除的用户id
    * 在选择好友时会进行过滤
    */
   withoutUserIds?: string[];
 }
-export const CreateDMConverse: React.FC<CreateDMCOnverseProps> = React.memo(
+export const CreateDMConverse: React.FC<CreateDMConverseProps> = React.memo(
   (props) => {
     const { withoutUserIds = [] } = props;
     const [selectedFriendIds, setSelectedFriendIds] = useState<string[]>([]);