feat: 群组自动选择第一个可用面板

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

@@ -1,6 +1,7 @@
 import { isEnterHotkey } from '@/utils/hot-key';
 import { Input } from 'antd';
 import React, { useCallback, useRef, useState } from 'react';
+import { t } from 'tailchat-shared';
 
 interface ChatInputBoxProps {
   onSendMsg: (msg: string) => void;
@@ -25,11 +26,11 @@ export const ChatInputBox: React.FC<ChatInputBoxProps> = React.memo((props) => {
   );
 
   return (
-    <div className="px-4 pb-2">
+    <div className="px-4 py-2">
       <Input
         ref={inputRef}
         className="outline-none shadow-none border-0 bg-gray-600 py-2.5 px-4 rounded-md"
-        placeholder="输入一些什么"
+        placeholder={t('输入一些什么')}
         value={message}
         onChange={(e) => setMessage(e.target.value)}
         onKeyDown={handleKeyDown}

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

@@ -0,0 +1,28 @@
+import React, { useEffect } from 'react';
+import { useHistory, useParams } from 'react-router';
+import { GroupPanelType, useGroupInfo } from 'tailchat-shared';
+import _isNil from 'lodash/isNil';
+
+export const GroupPanelRedirect: React.FC = React.memo(() => {
+  const { groupId } = useParams<{
+    groupId: string;
+  }>();
+  const history = useHistory();
+
+  const groupInfo = useGroupInfo(groupId);
+  useEffect(() => {
+    if (!Array.isArray(groupInfo?.panels) || groupInfo?.panels.length === 0) {
+      return;
+    }
+
+    const firstAvailablePanel = groupInfo?.panels.find(
+      (panel) => panel.type !== GroupPanelType.GROUP
+    );
+    if (!_isNil(firstAvailablePanel)) {
+      history.replace(`/main/group/${groupId}/${firstAvailablePanel.id}`);
+    }
+  }, [groupInfo]);
+
+  return null;
+});
+GroupPanelRedirect.displayName = 'GroupPanelRedirect';

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import { PageContent } from '../PageContent';
 import { GroupPanelRender } from './Panel';
+import { GroupPanelRedirect } from './PanelRedirect';
 import { Sidebar } from './Sidebar';
 
 export const Group: React.FC = React.memo(() => {
@@ -12,6 +13,11 @@ export const Group: React.FC = React.memo(() => {
           path="/main/group/:groupId/:panelId"
           component={GroupPanelRender}
         />
+        <Route
+          path="/main/group/:groupId"
+          exact={true}
+          component={GroupPanelRedirect}
+        />
       </Switch>
     </PageContent>
   );