feat: 模型未配置,添加禁用功能, 修复对话记录滚动问题

Author: guanweiwang

ui/src/components/sidebar/index.tsx

@@ -6,6 +6,7 @@ import { Modal } from '@c-x/ui';
 import { useMemo, useState } from 'react';
 import Qrcode from '@/assets/images/qrcode.png';
 import Version from './version';
+import { useCommonContext } from '@/hooks/context';
 
 const ADMIN_MENUS = [
   {
@@ -14,48 +15,55 @@ const ADMIN_MENUS = [
     pathname: 'dashboard',
     icon: 'icon-yibiaopan',
     show: true,
+    disabled: false,
   },
   {
     label: '对话记录',
     value: '/chat',
     pathname: 'chat',
     icon: 'icon-duihuajilu1',
     show: true,
+    disabled: false,
   },
   {
     label: '补全记录',
     value: '/completion',
     pathname: 'completion',
     icon: 'icon-buquanjilu',
     show: true,
+    disabled: false,
   },
   {
     label: '代码安全',
     value: '/code-security',
     pathname: 'code-security',
     icon: 'icon-daimaanquan1',
     show: true,
+    disabled: false,
   },
   {
     label: '模型管理',
     value: '/model',
     pathname: 'model',
     icon: 'icon-moxingguanli',
     show: true,
+    disabled: false,
   },
   {
     label: '成员管理',
     value: '/user-management',
     pathname: 'user-management',
     icon: 'icon-yonghuguanli1',
     show: true,
+    disabled: false,
   },
   {
     label: '管理员',
     value: '/admin',
     pathname: 'admin',
     icon: 'icon-guanliyuan1',
     show: true,
+    disabled: false,
   },
 ];
 
@@ -66,20 +74,23 @@ const USER_MENUS = [
     pathname: '/user/dashboard',
     icon: 'icon-yibiaopan',
     show: true,
+    disabled: false,
   },
   {
     label: '对话记录',
     value: '/user/chat',
     pathname: '/user/chat',
     icon: 'icon-duihuajilu1',
     show: true,
+    disabled: false,
   },
   {
     label: '补全记录',
     value: '/user/completion',
     pathname: '/user/completion',
     icon: 'icon-buquanjilu',
     show: true,
+    disabled: false,
   },
   // {
   //   label: '设置',
@@ -111,12 +122,15 @@ const Sidebar = () => {
   const { pathname } = useLocation();
   const theme = useTheme();
   const [showQrcode, setShowQrcode] = useState(false);
+  const { isConfigModel } = useCommonContext();
   const menus = useMemo(() => {
     if (pathname.startsWith('/user/')) {
       return USER_MENUS;
     }
-    return ADMIN_MENUS;
-  }, [pathname]);
+    return isConfigModel
+      ? ADMIN_MENUS.map((item) => ({ ...item, disabled: false }))
+      : ADMIN_MENUS.map((item) => ({ ...item, disabled: true }));
+  }, [pathname, isConfigModel]);
 
   return (
     <Stack
@@ -178,9 +192,15 @@ const Sidebar = () => {
                 zIndex: isActive ? 2 : 1,
                 color: isActive ? '#FFFFFF' : 'text.primary',
               }}
+              onClick={(e) => {
+                if (it.disabled) {
+                  e.preventDefault();
+                }
+              }}
             >
               <Button
                 variant={isActive ? 'contained' : 'text'}
+                disabled={it.pathname === 'model' ? false : it.disabled}
                 sx={{
                   width: '100%',
                   height: 50,

ui/src/context/index.tsx

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-import { DomainUser, DomainAdminUser } from '@/api/types';
+import { DomainUser, DomainAdminUser, DomainModel } from '@/api/types';
 
 export const AuthContext = createContext<
   [
@@ -20,6 +20,13 @@ export const AuthContext = createContext<
 ]);
 
 export const CommonContext = createContext<{
-  contactModalOpen: boolean;
-  setContactModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}>({ contactModalOpen: false, setContactModalOpen: () => {} });
+  coderModel: DomainModel[];
+  llmModel: DomainModel[];
+  isConfigModel: boolean;
+  refreshModel: () => void;
+}>({
+  coderModel: [],
+  llmModel: [],
+  isConfigModel: false,
+  refreshModel: () => {},
+});

ui/src/main.tsx

@@ -9,15 +9,15 @@ import '@/assets/styles/markdown.css';
 import { ThemeProvider } from '@c-x/ui';
 import { getUserProfile } from '@/api/UserManage';
 import { getAdminProfile } from '@/api/Admin';
+import { getMyModelList } from '@/api/Model';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { AuthContext } from './context';
-import { DomainUser, DomainAdminUser } from './api/types';
+import { AuthContext, CommonContext } from './context';
+import { DomainUser, DomainAdminUser, DomainModel } from './api/types';
 import { lightTheme } from './theme';
 import router from './router';
 import { getRedirectUrl } from './utils';
-import { Loading } from '@c-x/ui';
 
 dayjs.locale('zh-cn');
 dayjs.extend(duration);
@@ -26,12 +26,56 @@ dayjs.extend(relativeTime);
 const App = () => {
   const [user, setUser] = useState<DomainUser | DomainAdminUser | null>(null);
   const [loading, setLoading] = useState(true);
+  const [coderModel, setCoderModel] = useState<DomainModel[]>([]);
+  const [llmModel, setLlmModel] = useState<DomainModel[]>([]);
+  const [isConfigModel, setIsConfigModel] = useState(false);
 
   const onGotoRedirect = (source: 'user' | 'admin') => {
     const redirectUrl = getRedirectUrl(source);
     window.location.href = redirectUrl.href;
   };
 
+  const getModelList = () => {
+    return Promise.all([
+      getMyModelList({
+        model_type: 'coder',
+      }),
+      getMyModelList({
+        model_type: 'llm',
+      }),
+    ])
+      .then((res) => {
+        setCoderModel(res[0] || []);
+        setLlmModel(res[1] || []);
+        return res;
+      })
+      .then(handleModelConfig);
+  };
+
+  const handleModelConfig = (res: [DomainModel[], DomainModel[]]) => {
+    if ((res[0] || [])?.length == 0 || (res[1] || [])?.length == 0) {
+      if (location.pathname !== '/model') {
+        window.location.href = '/model';
+      }
+      setIsConfigModel(false);
+      return false;
+    } else {
+      const isActive =
+        res[0].every((item) => item.is_active) &&
+        res[1].every((item) => item.is_active);
+      if (isActive) {
+        setIsConfigModel(true);
+        return true;
+      } else {
+        if (location.pathname !== '/model') {
+          window.location.href = '/model';
+        }
+        setIsConfigModel(false);
+        return false;
+      }
+    }
+  };
+
   const getUser = () => {
     setLoading(true);
     if (location.pathname.startsWith('/user')) {
@@ -49,9 +93,13 @@ const App = () => {
       return getAdminProfile()
         .then((res) => {
           setUser(res);
-          if (location.pathname.startsWith('/login')) {
-            onGotoRedirect('admin');
-          }
+          getModelList().then((res) => {
+            if (res) {
+              if (location.pathname.startsWith('/login')) {
+                onGotoRedirect('admin');
+              }
+            }
+          });
         })
         .finally(() => {
           setLoading(false);
@@ -71,18 +119,27 @@ const App = () => {
 
   return (
     <ThemeProvider theme={lightTheme}>
-      <AuthContext.Provider
-        value={[
-          user,
-          {
-            loading,
-            setUser,
-            refreshUser: getUser,
-          },
-        ]}
+      <CommonContext.Provider
+        value={{
+          coderModel,
+          llmModel,
+          isConfigModel,
+          refreshModel: getModelList,
+        }}
       >
-        <RouterProvider router={router} />
-      </AuthContext.Provider>
+        <AuthContext.Provider
+          value={[
+            user,
+            {
+              loading,
+              setUser,
+              refreshUser: getUser,
+            },
+          ]}
+        >
+          <RouterProvider router={router} />
+        </AuthContext.Provider>
+      </CommonContext.Provider>
     </ThemeProvider>
   );
 };

ui/src/pages/chat/index.tsx

@@ -4,7 +4,16 @@ import { getListChatRecord } from '@/api/Billing';
 import dayjs from 'dayjs';
 
 import Card from '@/components/card';
-import { Autocomplete, Box, FormControl, InputLabel, MenuItem, Select, Stack, TextField } from '@mui/material';
+import {
+  Autocomplete,
+  Box,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  Stack,
+  TextField,
+} from '@mui/material';
 import StyledLabel from '@/components/label';
 
 import ChatDetailModal from './chatDetailModal';
@@ -180,7 +189,14 @@ const Chat = () => {
             label='工作模式'
             value={filterMode}
             onChange={(e) =>
-              setfilterMode(e.target.value as 'code' | 'ask' | 'architect' | 'debug' | 'orchestrator')
+              setfilterMode(
+                e.target.value as
+                  | 'code'
+                  | 'ask'
+                  | 'architect'
+                  | 'debug'
+                  | 'orchestrator'
+              )
             }
           >
             <MenuItem value=''>全部</MenuItem>
@@ -193,7 +209,7 @@ const Chat = () => {
         </FormControl>
       </Stack>
       <Table
-        height='100%'
+        height='calc(100% - 52px)'
         sx={{ mx: -2 }}
         PaginationProps={{
           sx: {

ui/src/pages/dashboard/index.tsx

@@ -87,6 +87,7 @@ const Dashboard = () => {
           size='small'
           onChange={(e) => setTimeRange(e.target.value as TimeRange)}
           sx={{ fontSize: 14 }}
+          disabled
         >
           <MenuItem value='24h'>最近 24 小时</MenuItem>
           <MenuItem value='90d'>最近 90 天</MenuItem>