use-user-setting-request.tsx

Overview

use-user-setting-request.tsx is a React hooks module providing a comprehensive set of custom hooks to interact with user settings, tenant management, system tokens, and Langfuse configuration in a web application. These hooks encapsulate API calls related to user and tenant information, system tokens management, tenant user administration, system status/version retrieval, and Langfuse configuration management.

The file leverages React Query (@tanstack/react-query) for data fetching, caching, and mutations, Ant Design (antd) for UI modal dialogs, and i18next for internationalization. It integrates with a centralized userService that abstracts API endpoints. The hooks provide an idiomatic React interface to perform CRUD and fetch operations, handle loading states, and present user feedback via messages and modals.

Detailed Explanation of Exports

Enum: UserSettingApiAction

Defines string constants representing API action keys used in React Query hooks for query/mutation keys.

Hook: useFetchUserInfo

Fetches the current user's information.

• Returns: { data: IUserInfo, loading: boolean }

• Behavior: On successful fetch, updates the app's language using i18n.changeLanguage based on user's preferred language.

• Example:

const { data: userInfo, loading } = useFetchUserInfo();

if (!loading) {
  console.log(userInfo.name);
}

Hook: useFetchTenantInfo(showEmptyModelWarn?: boolean)

Fetches tenant information.

• Parameters:

  • showEmptyModelWarn (optional, default: false): If true and required model IDs are missing, shows a warning modal.

• Returns: { data: ITenantInfo, loading: boolean }

• Behavior: Warns the user if critical model IDs (embd_id, llm_id) are missing, and redirects to model settings page.

• Example:

const { data: tenantInfo, loading } = useFetchTenantInfo(true);

Hook: useSelectParserList

Derives a list of parser options for UI selects from tenant information.

• Returns: Array<{ value: string; label: string }>

• Behavior: Parses parser_ids string from tenant info into a list of {value, label} pairs.

Hook: useSaveSetting

Mutates (saves) user settings.

• Returns: { data: number, loading: boolean, saveSetting: (userInfo: Partial<IUserInfo> | { new_password: string }) => Promise<number> }

• Side Effects: Shows success message on completion, invalidates cached user info.

• Example:

const { saveSetting, loading } = useSaveSetting();

await saveSetting({ new_password: 'newpass123' });

Hook: useFetchSystemVersion

Fetches the current system version.

• Returns: { version: string, loading: boolean, fetchSystemVersion: () => Promise<void> }

• Note: Does not automatically fetch on mount; requires manual invocation.

Hook: useFetchSystemStatus

Fetches the current system status.

• Returns: { systemStatus: ISystemStatus, loading: boolean, fetchSystemStatus: () => Promise<void> }

• Note: Requires manual invocation to fetch status.

Hook: useFetchManualSystemTokenList

Fetches a list of system tokens using mutation (manual fetch).

• Returns: { data: IToken[], loading: boolean, fetchSystemTokenList: () => Promise<IToken[]> }

Hook: useFetchSystemTokenList

Fetches a list of system tokens via query (auto fetching).

• Returns: { data: IToken[], loading: boolean, refetch: () => Promise<IToken[]> }

Hook: useRemoveSystemToken

Removes a system token.

• Returns: { data: any[], loading: boolean, removeToken: (token: string) => Promise<any[]> }

• Side Effects: Shows success message and invalidates system token list cache.

Hook: useCreateSystemToken

Creates a new system token.

• Returns: { data: any[], loading: boolean, createToken: (params: Record<string, any>) => Promise<any[]> }

• Side Effects: Invalidates system token list cache on success.

Hook: useListTenantUser

Lists users in the current tenant.

• Returns: { data: ITenantUser[], loading: boolean, refetch: () => Promise<ITenantUser[]> }

• Depends On: Current tenant ID from useFetchTenantInfo.

Hook: useAddTenantUser

Adds a user to the current tenant.

• Returns: { data: number, loading: boolean, addTenantUser: (email: string) => Promise<number> }

• Side Effects: Invalidates tenant user list cache on success.

Hook: useDeleteTenantUser

Deletes a user from a tenant.

• Parameters: { userId: string; tenantId?: string }

• Returns: { data: any[], loading: boolean, deleteTenantUser: (params) => Promise<any[]> }

• Side Effects: Shows success message and invalidates tenant user and tenant list caches.

Hook: useListTenant

Lists tenants.

• Returns: { data: ITenant[], loading: boolean, refetch: () => Promise<ITenant[]> }

• Depends On: Current tenant ID from useFetchTenantInfo.

Hook: useAgreeTenant

Approves a tenant by tenant ID.

• Returns: { data: any[], loading: boolean, agreeTenant: (tenantId: string) => Promise<any[]> }

• Side Effects: Displays success message and invalidates tenant list cache.

Hook: useSetLangfuseConfig

Sets Langfuse configuration.

• Returns: { data: number, loading: boolean, setLangfuseConfig: (params: ISetLangfuseConfigRequestBody) => Promise<number> }

• Side Effects: Shows success message on success.

Hook: useDeleteLangfuseConfig

Deletes Langfuse configuration.

• Returns: { data: number, loading: boolean, deleteLangfuseConfig: () => Promise<number> }

• Side Effects: Shows success message on success.

Hook: useFetchLangfuseConfig

Fetches Langfuse configuration.

• Returns: { data: ILangfuseConfig | undefined, loading: boolean }

Important Implementation Details

• React Query Integration:
  The file extensively uses useQuery for fetching data that should be cached and automatically updated, and useMutation for operations that modify data. Query keys are standardized using the UserSettingApiAction enum for consistency.

• Internationalization Support:
  After fetching the user info, it updates the current language dynamically using i18n.changeLanguage, linking the backend user settings to frontend presentation.

• Security & Sanitization:
  When showing modal content with HTML, the content is sanitized using DOMPurify to prevent XSS attacks.

• Modal Warnings and Navigation:
  Tenant info fetching can trigger modal warnings if required configuration is missing, and redirects users to the relevant settings page (/user-setting/model).

• Optimistic UI & Cache Invalidation:
  After mutations (like adding or deleting tenant users or tokens), relevant queries are invalidated to refresh cached data and update the UI seamlessly.

• Dependency on Tenant Info:
  Several hooks depend on the current tenant ID fetched via useFetchTenantInfo. This design centralizes tenant context and avoids passing tenant IDs explicitly across components.

Interaction with Other Parts of the System

• userService API Layer:
  All backend API calls are abstracted through functions in userService and related imports, facilitating API communication.

• UI Components:
  The file imports message and Modal from UI libraries for user feedback and warnings.

• Routing:
  Uses history from umi to programmatically navigate the user on certain conditions.

• Application State & Cache:
  Utilizes React Query's cache and query invalidation features to keep data consistent across the app.

• Internationalization:
  Hooks use useTranslation from react-i18next for localized messages and dynamic language switching.

Usage Example Summary

Typical usage involves importing the desired hook and using it within React components:

import { useFetchUserInfo, useSaveSetting } from '@/hooks/use-user-setting-request';

function ProfileSettings() {
  const { data: userInfo, loading } = useFetchUserInfo();
  const { saveSetting, loading: saving } = useSaveSetting();

  const onChangePassword = async (newPassword: string) => {
    await saveSetting({ new_password: newPassword });
  };

  if (loading) return <div>Loading...</div>;

  return <div>Welcome, {userInfo.name}</div>;
}

Mermaid Diagram: Component Interaction Diagram

classDiagram
    class useFetchUserInfo {
        +data: IUserInfo
        +loading: boolean
    }
    class useFetchTenantInfo {
        +data: ITenantInfo
        +loading: boolean
    }
    class useSaveSetting {
        +saveSetting(userInfo)
        +loading: boolean
    }
    class useFetchSystemVersion {
        +fetchSystemVersion()
        +version: string
        +loading: boolean
    }
    class useFetchSystemStatus {
        +fetchSystemStatus()
        +systemStatus: ISystemStatus
        +loading: boolean
    }
    class useFetchSystemTokenList {
        +data: IToken[]
        +loading: boolean
        +refetch()
    }
    class useRemoveSystemToken {
        +removeToken(token)
        +loading: boolean
    }
    class useCreateSystemToken {
        +createToken(params)
        +loading: boolean
    }
    class useListTenantUser {
        +data: ITenantUser[]
        +loading: boolean
        +refetch()
    }
    class useAddTenantUser {
        +addTenantUser(email)
        +loading: boolean
    }
    class useDeleteTenantUser {
        +deleteTenantUser(params)
        +loading: boolean
    }
    class useListTenant {
        +data: ITenant[]
        +loading: boolean
        +refetch()
    }
    class useAgreeTenant {
        +agreeTenant(tenantId)
        +loading: boolean
    }
    class useSetLangfuseConfig {
        +setLangfuseConfig(params)
        +loading: boolean
    }
    class useDeleteLangfuseConfig {
        +deleteLangfuseConfig()
        +loading: boolean
    }
    class useFetchLangfuseConfig {
        +data: ILangfuseConfig
        +loading: boolean
    }

    useSaveSetting ..> useFetchUserInfo : invalidates
    useRemoveSystemToken ..> useFetchSystemTokenList : invalidates
    useCreateSystemToken ..> useFetchSystemTokenList : invalidates
    useAddTenantUser ..> useListTenantUser : invalidates
    useDeleteTenantUser ..> useListTenantUser : invalidates
    useDeleteTenantUser ..> useListTenant : invalidates
    useAgreeTenant ..> useListTenant : invalidates
    useListTenantUser --> useFetchTenantInfo : depends on tenantId
    useAddTenantUser --> useFetchTenantInfo : depends on tenantId
    useDeleteTenantUser --> useFetchTenantInfo : depends on tenantId
    useListTenant --> useFetchTenantInfo : depends on tenantId

Summary

use-user-setting-request.tsx is a critical integration layer that abstracts and manages all data operations and mutations related to user settings, tenant management, system tokens, and Langfuse configuration. It provides a clean, reactive interface for components to interact with backend APIs while ensuring data consistency, feedback, and user experience through internationalization and UI messaging.

This modular design promotes separation of concerns, reusability, and maintainability in a complex multi-tenant user management system.