refactor: 群组会话发送消息

shared/helper/converse-helper.ts

@@ -1,4 +1,5 @@
 import { getCachedConverseInfo } from '../cache/cache';
+import { t } from '../i18n';
 import type { ChatConverseInfo } from '../model/converse';
 import { appendUserDMConverse } from '../model/user';
 
@@ -9,7 +10,11 @@ export async function ensureDMConverse(
   converseId: string
 ): Promise<ChatConverseInfo> {
   const converse = await getCachedConverseInfo(converseId);
-  await appendUserDMConverse(converseId);
+  if (converse === null) {
+    // TODO
+    throw new Error(t('找不到私信会话'));
+  }
+  await appendUserDMConverse(converseId); // 添加到私人会话列表
 
   return converse;
 }

shared/redux/hooks/useConverseMessage.ts

@@ -13,7 +13,12 @@ import { useAppDispatch, useAppSelector } from './useAppSelector';
 /**
  * 会话消息管理
  */
-export function useConverseMessage(converseId: string) {
+interface ConverseContext {
+  converseId: string;
+  isGroup: boolean;
+}
+export function useConverseMessage(context: ConverseContext) {
+  const { converseId, isGroup } = context;
   const converse = useAppSelector((state) => state.chat.converses[converseId]);
   const dispatch = useAppDispatch();
   const messages = converse?.messages ?? [];
@@ -21,10 +26,23 @@ export function useConverseMessage(converseId: string) {
   const { loading, error } = useAsync(async () => {
     if (!converse) {
       // 如果是一个新会话(或者当前会话列表中没有)
-
-      // Step 1. 创建会话 并确保私信列表中存在该会话
-      const converse = await ensureDMConverse(converseId);
-      dispatch(chatActions.setConverseInfo(converse));
+      if (!isGroup) {
+        // 如果是私信会话
+        // Step 1. 创建会话 并确保私信列表中存在该会话
+        const converse = await ensureDMConverse(converseId);
+        dispatch(chatActions.setConverseInfo(converse));
+      } else {
+        // 如果是群组会话(文本频道)
+        // Step 1. 确保群组会话存在
+        dispatch(
+          chatActions.setConverseInfo({
+            _id: converseId,
+            name: '',
+            type: 'Group',
+            members: [],
+          })
+        );
+      }
 
       // Step 2. 拉取消息
       const messages = await fetchConverseMessage(converseId);
@@ -35,7 +53,7 @@ export function useConverseMessage(converseId: string) {
         })
       );
     }
-  }, [converse, converseId]);
+  }, [converse, converseId, isGroup]);
 
   const handleSendMessage = useCallback(async (payload: SendMessagePayload) => {
     // TODO: 增加临时消息, 对网络环境不佳的状态进行优化

shared/redux/setup.ts

@@ -31,8 +31,8 @@ function initial(socket: AppSocket, store: AppStore) {
     store.dispatch(userActions.setFriendRequests(data));
   });
 
-  socket.request<UserDMList>('user.dmlist.getAllConverse').then((data) => {
-    data.converseIds.forEach(async (converseId) => {
+  socket.request<string[]>('user.dmlist.getAllConverse').then((data) => {
+    (data ?? []).forEach(async (converseId) => {
       // TODO: 待优化, 可以在后端一次性返回
 
       const converse = await getCachedConverseInfo(converseId);

web/src/components/ChatBox/index.tsx

@@ -23,12 +23,23 @@ const ChatBoxPlaceholder: React.FC = React.memo(() => {
 });
 ChatBoxPlaceholder.displayName = 'ChatBoxPlaceholder';
 
-export const ChatBox: React.FC<{
-  converseId: string;
-}> = React.memo((props) => {
-  const { messages, loading, error, handleSendMessage } = useConverseMessage(
-    props.converseId
-  );
+type ChatBoxProps =
+  | {
+      converseId: string;
+      isGroup: false;
+      groupId?: string;
+    }
+  | {
+      converseId: string;
+      isGroup: true;
+      groupId: string;
+    };
+export const ChatBox: React.FC<ChatBoxProps> = React.memo((props) => {
+  const { converseId, isGroup } = props;
+  const { messages, loading, error, handleSendMessage } = useConverseMessage({
+    converseId,
+    isGroup,
+  });
 
   if (loading) {
     return <ChatBoxPlaceholder />;
@@ -46,6 +57,7 @@ export const ChatBox: React.FC<{
         onSendMsg={(msg) =>
           handleSendMessage({
             converseId: props.converseId,
+            groupId: props.groupId,
             content: msg,
           })
         }

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

@@ -2,10 +2,12 @@ import { ChatBox } from '@/components/ChatBox';
 import React from 'react';
 
 interface TextPanelProps {
+  groupId: string;
   panelId: string;
 }
-export const TextPanel: React.FC<TextPanelProps> = React.memo(({ panelId }) => {
-  // return <ChatBox converseId={panelId} />;
-  return <div>TODO: panelId: {panelId}</div>;
-});
+export const TextPanel: React.FC<TextPanelProps> = React.memo(
+  ({ groupId, panelId }) => {
+    return <ChatBox converseId={panelId} isGroup={true} groupId={groupId} />;
+  }
+);
 TextPanel.displayName = 'TextPanel';

web/src/routes/Main/Content/Group/Panel.tsx

@@ -17,7 +17,7 @@ export const GroupPanelRender: React.FC = React.memo(() => {
   }
 
   if (panelInfo.type === GroupPanelType.TEXT) {
-    return <TextPanel panelId={panelInfo.id} />;
+    return <TextPanel groupId={groupId} panelId={panelInfo.id} />;
   }
 
   return <Alert message="未知的面板类型" />;

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

@@ -11,7 +11,7 @@ export const ConversePanel: React.FC = React.memo(() => {
 
   return (
     <div className="w-full h-full overflow-hidden">
-      <ChatBox converseId={params.converseId} />
+      <ChatBox converseId={params.converseId} isGroup={false} />
     </div>
   );
 });