hooks.ts

Overview

The hooks.ts file provides a collection of custom React hooks primarily designed to manage modal dialogs and handle asynchronous operations related to submitting, saving, and deleting configurations for various Large Language Model (LLM) integrations within the application. This includes API key management, system model settings, and adding or deleting LLM providers such as Ollama, Volc Engine, Hunyuan, Tencent Cloud, Google, and others.

Each hook encapsulates state management, modal visibility toggling, loading states, and API interaction logic, promoting reusable and clean UI component code. The file also includes hooks to handle user confirmation for deletion actions.

Detailed Explanations

Types

type SavingParamsState = Omit<IApiKeySavingParams, 'api_key'>;

• SavingParamsState: Defines the shape of API key saving parameters excluding the sensitive api_key string itself. Used internally to hold other saving parameters.

Hook: useSubmitApiKey

Manages the state and logic for submitting and editing API keys.

Returns

• saveApiKeyLoading: boolean — Indicates if the API key save operation is in progress.

• initialApiKey: string — Placeholder for initial API key value (empty string here).

• llmFactory: string | undefined — The LLM factory name associated with current saving params.

• editMode: boolean — Whether the modal is in edit mode.

• onApiKeySavingOk(postBody: ApiKeyPostBody): Promise<void> — Callback to trigger saving the API key.

• apiKeyVisible: boolean — Visibility state of the API key modal.

• hideApiKeyModal(): void — Hides the API key modal.

• showApiKeyModal(savingParams: SavingParamsState, isEdit?: boolean): void — Shows the API key modal with given parameters.

Parameters

• postBody: ApiKeyPostBody — Object containing the API key and related data to save.

Usage Example

const {
  onApiKeySavingOk,
  apiKeyVisible,
  showApiKeyModal,
  hideApiKeyModal,
  saveApiKeyLoading,
  editMode,
  llmFactory,
} = useSubmitApiKey();

// To show the modal for adding/editing API key:
showApiKeyModal({ llm_factory: 'openai' }, true);

// To save the key:
await onApiKeySavingOk({ api_key: 'your-api-key' });

Hook: useSubmitSystemModelSetting

Handles submission and modal state for updating system-level model settings for the tenant.

Returns

• saveSystemModelSettingLoading: boolean — Loading state for saving system settings.

• onSystemSettingSavingOk(payload): Promise<void> — Callback to save settings.

• systemSettingVisible: boolean — Visibility of the system setting modal.

• hideSystemSettingModal(): void — Hide modal.

• showSystemSettingModal(): void — Show modal.

Parameters

• payload: Omit<ISystemModelSettingSavingParams, 'tenant_id' | 'name'> — Partial settings excluding tenant identifiers.

Usage Example

const {
  onSystemSettingSavingOk,
  systemSettingVisible,
  showSystemSettingModal,
  hideSystemSettingModal,
} = useSubmitSystemModelSetting();

// To open the modal:
showSystemSettingModal();

// To save settings:
await onSystemSettingSavingOk({ max_tokens: 4096 });

Hook: useFetchSystemModelSettingOnMount

Fetches system model settings and all LLM options on component mount.

Returns

• systemSetting — Tenant system settings data.

• allOptions — Available LLM options filtered by model type.

Usage Example

const { systemSetting, allOptions } = useFetchSystemModelSettingOnMount();

Hook: useSubmitOllama

Manages the submission modal and logic for adding/editing the "Ollama" LLM.

Returns

• llmAddingLoading: boolean — Loading state during add/edit.

• editMode: boolean — Edit mode flag.

• initialValues: Partial<IAddLlmRequestBody> | undefined — Initial form values for editing.

• onLlmAddingOk(payload: IAddLlmRequestBody): Promise<void> — Callback to submit add/edit.

• llmAddingVisible: boolean — Modal visibility.

• hideLlmAddingModal(): void — Hide modal.

• showLlmAddingModal(llmFactory: string, isEdit?: boolean, modelData?, detailedData?): void — Show modal with optional edit data.

• selectedLlmFactory: string — Currently selected LLM factory.

Parameters

• payload: IAddLlmRequestBody — Data for the LLM being added or edited.

Usage Example

const {
  onLlmAddingOk,
  llmAddingVisible,
  showLlmAddingModal,
  hideLlmAddingModal,
  editMode,
  initialValues,
} = useSubmitOllama();

showLlmAddingModal('ollama', true, undefined, detailedModelData);

await onLlmAddingOk({
  llm_name: 'Ollama Model',
  model_type: 'text',
  api_base: 'https://api.ollama.com',
  max_tokens: 1024,
  api_key: '',
});

Hooks: useSubmitVolcEngine, useSubmitHunyuan, useSubmitTencentCloud, useSubmitSpark, useSubmityiyan, useSubmitFishAudio, useSubmitGoogle, useSubmitBedrock, useSubmitAzure

These hooks follow a similar pattern, each managing modal state and submission logic for different LLM providers:

• Each provides:

  • xxxAddingLoading — Loading boolean.

  • onXxxAddingOk(payload: IAddLlmRequestBody): Promise<void> — Submission callback.

  • xxxAddingVisible — Modal visibility boolean.

  • hideXxxAddingModal(): void — Hide modal function.

  • showXxxAddingModal(): void — Show modal function.

• Parameters:

  • payload: IAddLlmRequestBody — LLM add configuration.

Usage Example (for Volc Engine)

const {
  volcAddingLoading,
  onVolcAddingOk,
  volcAddingVisible,
  hideVolcAddingModal,
  showVolcAddingModal,
} = useSubmitVolcEngine();

showVolcAddingModal();

await onVolcAddingOk({
  llm_name: 'Volc Engine Model',
  model_type: 'text',
  api_base: 'https://api.volcengine.com',
  max_tokens: 2048,
  api_key: 'secret',
});

Hook: useHandleDeleteLlm

Provides a handler for deleting a specific LLM instance by name, using a confirmation modal.

Parameters

• llmFactory: string — The LLM factory name to identify the LLM provider.

Returns

• handleDeleteLlm(name: string): () => void — A function that when called, shows a delete confirmation modal and deletes the specified LLM if confirmed.

Usage Example

const { handleDeleteLlm } = useHandleDeleteLlm('openai');

<button onClick={handleDeleteLlm('gpt-4')}>Delete GPT-4</button>

Hook: useHandleDeleteFactory

Provides a handler for deleting an entire LLM factory, with confirmation.

Parameters

• llmFactory: string — The factory to delete.

Returns

• handleDeleteFactory(): void — Function that triggers the confirmation and deletes the factory if confirmed.

Usage Example

const { handleDeleteFactory } = useHandleDeleteFactory('openai');

<button onClick={handleDeleteFactory}>Delete OpenAI Factory</button>

Important Implementation Details

• Modal State Handling: All modal visibility states are managed using useSetModalState() from common-hooks, abstracting away the boilerplate of show/hide state toggling.

• Async Operations: All API interactions (save, add, delete) use async callbacks with loading states returned from hooks like useAddLlm, useSaveApiKey, etc., enabling UI components to show loading indicators.

• Edit Mode Support: For adding/editing LLMs (especially useSubmitOllama), the hook supports initializing form values when editing an existing model.

• Delete Confirmation: Deletion handlers use useShowDeleteConfirm() to prompt the user before performing destructive actions.

• Payload Cleaning: For example, useSubmitOllama removes empty API keys from the payload before sending to the backend.

• Separation by LLM Provider: Each LLM provider has its own hook for submitting configurations, allowing provider-specific logic or UI differences if needed.

Interaction with Other Parts of the System

• Imports hooks from:

  • common-hooks: For modal state and confirmation dialog management.

  • llm-hooks: For API calls and LLM-specific logic.

  • user-setting-hooks: To fetch tenant information.

• Uses interfaces like IAddLlmRequestBody and utility functions like getRealModelName from app-wide utilities.

• These hooks are intended to be used by React components responsible for rendering modals and forms related to LLM configurations.

• The hooks abstract communication with backend APIs for LLM management and system settings, enabling UI components to remain declarative and focused on rendering.

Mermaid Diagram: Flowchart of Main Functions and Their Relationships

flowchart TD
    subgraph API Key Management
        A1[useSubmitApiKey]
    end

    subgraph System Settings
        B1[useSubmitSystemModelSetting]
        B2[useFetchSystemModelSettingOnMount]
    end

    subgraph LLM Adding / Editing
        C1[useSubmitOllama]
        C2[useSubmitVolcEngine]
        C3[useSubmitHunyuan]
        C4[useSubmitTencentCloud]
        C5[useSubmitSpark]
        C6[useSubmityiyan]
        C7[useSubmitFishAudio]
        C8[useSubmitGoogle]
        C9[useSubmitBedrock]
        C10[useSubmitAzure]
    end

    subgraph Deletion
        D1[useHandleDeleteLlm]
        D2[useHandleDeleteFactory]
    end

    A1 -->|calls| useSaveApiKey
    B1 -->|calls| useSaveTenantInfo
    B2 -->|calls| useFetchTenantInfo & useSelectLlmOptionsByModelType
    C1 -->|calls| useAddLlm & useSetModalState
    C2 -->|calls| useAddLlm & useSetModalState
    C3 -->|calls| useAddLlm & useSetModalState
    C4 -->|calls| useAddLlm & useSetModalState
    C5 -->|calls| useAddLlm & useSetModalState
    C6 -->|calls| useAddLlm & useSetModalState
    C7 -->|calls| useAddLlm & useSetModalState
    C8 -->|calls| useAddLlm & useSetModalState
    C9 -->|calls| useAddLlm & useSetModalState
    C10 -->|calls| useAddLlm & useSetModalState
    D1 -->|calls| useDeleteLlm & useShowDeleteConfirm
    D2 -->|calls| useDeleteFactory & useShowDeleteConfirm

Summary

The hooks.ts file modularizes and encapsulates the complex UI state and backend communication logic for managing LLM integrations and system model settings. By providing specialized hooks for each LLM provider and operation type (add/edit/delete/configure), it enables React components to be clean, declarative, and focused on user interaction rather than implementation details.

This file interacts closely with the application's API layers (via llm-hooks and others) and provides a consistent modal experience by leveraging common modal and confirmation hooks. It is a central piece in the system’s extensibility for adding new LLM providers and configuring system-wide settings securely and efficiently.