index.tsx

Overview

This file defines a React functional component named TencentCloudModal. It provides a modal dialog interface for adding a new Language Model (LLM) configuration specifically for Tencent Cloud services. The modal contains a form allowing users to select model types, specify model names, and enter Tencent Cloud credentials (Secret ID and Secret Key). Upon form submission, the collected data is passed back to a parent component or handler.

This component is built using React with TypeScript, leveraging the Ant Design (antd) UI library for layout and form controls, along with custom hooks and interfaces imported from the project.

Component: TencentCloudModal

Purpose

TencentCloudModal renders a modal dialog with a form to configure and add Tencent Cloud LLM settings. It handles user input validation, displays loading states during submission, and provides links to Tencent Cloud documentation for user reference.

Props

The component accepts the following props:

Internal Types

• FieldType: Extends IAddLlmRequestBody with two additional fields for Tencent Cloud credentials:

  • TencentCloud_sid: string

  • TencentCloud_sk: string

Internal State

• Uses Form.useForm() from antd to manage form state and validation.

Key Functions

handleOk

• Description: Triggered when user confirms the modal (clicks OK or presses Enter). Validates the form fields, prepares the data object by merging form values and additional fields (llm_factory, max_tokens), and invokes the onOk callback with the resulting data.

• Parameters: None (uses internal form state).

• Returns: Promise (async function).

• Usage: Called on OK button click or Enter key press inside inputs.

handleKeyDown

• Description: Listens for keyboard events on form inputs. If the Enter key is pressed, triggers handleOk to submit the form.

• Parameters: e: React.KeyboardEvent - Keyboard event from input field.

• Returns: Promise

Rendered Elements

• Modal: From antd, wrapping the form.

  • Title is localized using useTranslate hook with key 'addLlmTitle' and injected llmFactory name.

  • Footer customized to include a link to Tencent Cloud API documentation on the left and the default OK/Cancel buttons on the right.

  • Loading state tied to the loading prop.

• Form: Contains the following fields:

  • model_type (Select): Fixed single option "speech2text".

  • llm_name (Select): Multiple preset model names covering different languages and dialects.

  • TencentCloud_sid (Input): For Tencent Cloud Secret ID.

  • TencentCloud_sk (Input): For Tencent Cloud Secret Key.

All fields have validation rules requiring non-empty input and display localized error messages.

Usage Example

import TencentCloudModal from './index.tsx';

const MyComponent = () => {
  const [visible, setVisible] = React.useState(false);
  const [loading, setLoading] = React.useState(false);

  const handleAddLlm = async (data: IAddLlmRequestBody) => {
    setLoading(true);
    try {
      // Submit data to backend or state management
      console.log('LLM Data:', data);
    } finally {
      setLoading(false);
      setVisible(false);
    }
  };

  return (
    <>
      <button onClick={() => setVisible(true)}>Add Tencent Cloud LLM</button>
      <TencentCloudModal
        visible={visible}
        hideModal={() => setVisible(false)}
        onOk={handleAddLlm}
        loading={loading}
        llmFactory="TencentCloud"
      />
    </>
  );
};

Important Implementation Details

• Form Validation & Submission: Uses antd's form validation APIs (validateFields) to ensure required fields are filled before submission.

• Data Preparation: Uses lodash's omit to remove unwanted keys if any (though in this snippet, no keys are explicitly omitted - omit(values) returns all fields except undefined ones). Adds extra fields such as llm_factory and a hardcoded max_tokens value of 16000 before submission.

• Keyboard Accessibility: Submits the form when the Enter key is pressed in any input field.

• Translation Support: Uses a custom hook useTranslate scoped under 'setting' to provide localized labels, placeholders, titles, and messages.

• UX Considerations: Displays a loading state on the OK button and disables it during submission to prevent duplicate requests.

• External Reference Link: Provides direct user access to Tencent Cloud API documentation in the modal footer.

Interaction with Other Parts of the System

• Hooks: Imports useTranslate from @/hooks/common-hooks to handle localization.

• Interfaces: Uses IModalProps and IAddLlmRequestBody from the project's interfaces to strongly type props and form data.

• Parent Component: Expects parent components to control modal visibility, handle the submitted data via onOk, and manage loading states.

• External Libraries: Relies on Ant Design for UI components and form management, lodash for utility functions.

Visual Diagram

componentDiagram
    direction LR
    TencentCloudModal -- uses --> Form
    TencentCloudModal -- uses --> Modal
    TencentCloudModal -- uses --> Select
    TencentCloudModal -- uses --> Input
    TencentCloudModal -- uses --> useTranslate
    TencentCloudModal -- uses --> omit (lodash)
    TencentCloudModal -- props --> IModalProps
    TencentCloudModal -- props --> IAddLlmRequestBody

    Form o-- "Field: model_type"
    Form o-- "Field: llm_name"
    Form o-- "Field: TencentCloud_sid"
    Form o-- "Field: TencentCloud_sk"

    Modal --> Footer: Custom link + OK/Cancel buttons

Summary

index.tsx defines the TencentCloudModal React component that encapsulates the UI and logic for adding Tencent Cloud LLM configurations. It provides a user-friendly modal form with validation, localization, and submit handling, integrating seamlessly into larger applications requiring Tencent Cloud LLM service setup.

This component is reusable and configurable through props, relying on project-wide hooks and interfaces to maintain consistency and type safety. Its implementation balances UX considerations (loading states, keyboard accessibility) with clear data handling patterns for integration with backend or state management systems.