feat: generate select options for SystemModelSettingModal grouped by type and add llm icon and add upgrade button to UserSettingTeam and replace the icon in the sidebar of the user settings page (#128)

* feat: generate select options for SystemModelSettingModal grouped by type

* feat: add llm icon

* feat: add upgrade button to UserSettingTeam

* feat: replace the icon in the sidebar of the user settings page

web/src/hooks/llmHooks.ts

@@ -7,7 +7,10 @@ import {
 import { useCallback, useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'umi';
 
-export const useFetchLlmList = (modelType?: LlmModelType) => {
+export const useFetchLlmList = (
+  isOnMountFetching: boolean = true,
+  modelType?: LlmModelType,
+) => {
   const dispatch = useDispatch();
 
   const fetchLlmList = useCallback(() => {
@@ -18,15 +21,25 @@ export const useFetchLlmList = (modelType?: LlmModelType) => {
   }, [dispatch, modelType]);
 
   useEffect(() => {
-    fetchLlmList();
-  }, [fetchLlmList]);
+    if (isOnMountFetching) {
+      fetchLlmList();
+    }
+  }, [fetchLlmList, isOnMountFetching]);
+
+  return fetchLlmList;
 };
 
-export const useSelectLlmOptions = () => {
+export const useSelectLlmInfo = () => {
   const llmInfo: IThirdOAIModelCollection = useSelector(
     (state: any) => state.settingModel.llmInfo,
   );
 
+  return llmInfo;
+};
+
+export const useSelectLlmOptions = () => {
+  const llmInfo: IThirdOAIModelCollection = useSelectLlmInfo();
+
   const embeddingModelOptions = useMemo(() => {
     return Object.entries(llmInfo).map(([key, value]) => {
       return {
@@ -43,6 +56,38 @@ export const useSelectLlmOptions = () => {
   return embeddingModelOptions;
 };
 
+export const useSelectLlmOptionsByModelType = () => {
+  const llmInfo: IThirdOAIModelCollection = useSelectLlmInfo();
+
+  const groupOptionsByModelType = (modelType: LlmModelType) => {
+    return Object.entries(llmInfo)
+      .filter(([, value]) =>
+        modelType ? value.some((x) => x.model_type === modelType) : true,
+      )
+      .map(([key, value]) => {
+        return {
+          label: key,
+          options: value
+            .filter((x) => (modelType ? x.model_type === modelType : true))
+            .map((x) => ({
+              label: x.llm_name,
+              value: x.llm_name,
+              disabled: !x.available,
+            })),
+        };
+      });
+  };
+
+  return {
+    [LlmModelType.Chat]: groupOptionsByModelType(LlmModelType.Chat),
+    [LlmModelType.Embedding]: groupOptionsByModelType(LlmModelType.Embedding),
+    [LlmModelType.Image2text]: groupOptionsByModelType(LlmModelType.Image2text),
+    [LlmModelType.Speech2text]: groupOptionsByModelType(
+      LlmModelType.Speech2text,
+    ),
+  };
+};
+
 export const useSelectLlmFactoryList = () => {
   const factoryList: IFactory[] = useSelector(
     (state: any) => state.settingModel.factoryList,

web/src/hooks/userSettingHook.ts

@@ -1,7 +1,8 @@
 import { ITenantInfo } from '@/interfaces/database/knowledge';
 import { IUserInfo } from '@/interfaces/database/userSetting';
+import authorizationUtil from '@/utils/authorizationUtil';
 import { useCallback, useEffect, useMemo } from 'react';
-import { useDispatch, useSelector } from 'umi';
+import { history, useDispatch, useSelector } from 'umi';
 
 export const useFetchUserInfo = () => {
   const dispatch = useDispatch();
@@ -68,8 +69,12 @@ export const useSelectParserList = (): Array<{
 export const useLogout = () => {
   const dispatch = useDispatch(); // TODO: clear redux state
 
-  const logout = useCallback((): number => {
-    return dispatch<any>({ type: 'loginModel/logout' });
+  const logout = useCallback(async () => {
+    const retcode = await dispatch<any>({ type: 'loginModel/logout' });
+    if (retcode === 0) {
+      authorizationUtil.removeAll();
+      history.push('/login');
+    }
   }, [dispatch]);
 
   return logout;