index.tsx

Overview

The index.tsx file defines a React functional component named BedrockModal. This component renders a modal dialog form that collects configuration details required to add a new Bedrock Large Language Model (LLM) connection. It is part of a UI settings module that allows users to input necessary credentials and parameters for integrating Bedrock LLMs into the application.

The modal form includes fields such as model type, model name, AWS Bedrock access keys, region selection, and token limits. It uses Ant Design (antd) components for UI elements and form management, along with a custom translation hook for internationalization. The component validates user inputs, handles form submission, and displays external links for user guidance.

Detailed Documentation

Component: BedrockModal

A React functional component that renders a modal dialog containing a form to add or configure a Bedrock LLM integration.

Props

interface IModalProps<T> {
  visible: boolean;                      // Controls modal visibility
  hideModal: () => void;                 // Callback to close the modal
  onOk?: (data: T) => void;              // Callback fired on successful form submission
  loading?: boolean;                     // Loading state for the OK button
}

interface BedrockModalProps extends IModalProps<IAddLlmRequestBody> {
  llmFactory: string;                    // Identifier for the LLM factory type
}

• visible: Boolean flag controlling whether the modal is shown.

• hideModal: Function called when the modal should be closed (e.g., cancel button).

• onOk: Optional function called with the form data upon successful validation and submission.

• loading: Boolean to indicate if the form submission is in progress.

• llmFactory: String identifier for the type or name of the LLM factory being added (used in UI labels).

Internal Types

type FieldType = IAddLlmRequestBody & {
  bedrock_ak: string;           // AWS access key
  bedrock_sk: string;           // AWS secret key
  bedrock_region: string;       // AWS region
};

This type extends the base interface IAddLlmRequestBody by adding Bedrock-specific credentials and region information.

Hooks and State

• Uses Form.useForm<FieldType>() from Ant Design to manage form state and validation.

• Uses a custom hook useTranslate('setting') for localized strings.

• Uses useMemo to memoize region options derived from a constant list (BedrockRegionList) and translated labels.

Methods

handleOk(): Promise<void>

• Asynchronously validates form fields.

• Constructs a data object combining form values and the llmFactory prop.

• Calls the onOk callback with the data object if validation passes.

const handleOk = async () => {
  const values = await form.validateFields();
  const data = {
    ...values,
    llm_factory: llmFactory,
    max_tokens: values.max_tokens,
  };
  onOk?.(data);
};

Rendered Elements

• Modal: The main container dialog from Ant Design.

  • Title: Localized string including llmFactory.

  • Visibility controlled by visible prop.

  • OK button triggers handleOk.

  • Cancel button triggers hideModal.

  • Footer includes a link to the AWS console and the default modal buttons (OK/Cancel).

• Form: Contains multiple input fields for configuration:

  • model_type: Select between "chat" and "embedding".

  • llm_name: Text input for the Bedrock model name.

  • bedrock_ak: AWS Access Key input.

  • bedrock_sk: AWS Secret Key input.

  • bedrock_region: Dropdown select for AWS regions (from BedrockRegionList).

  • max_tokens: Numeric input with validation for positive values.

Each field uses validation rules including required checks and custom validators (e.g., max_tokens must be a non-negative number).

Usage Example

<BedrockModal
  visible={isModalVisible}
  hideModal={() => setModalVisible(false)}
  onOk={(data) => console.log('Submitted data:', data)}
  loading={isSubmitting}
  llmFactory="Bedrock"
/>

Important Implementation Details

• Internationalization: The component uses a hook useTranslate scoped to the "setting" namespace to fetch translated strings for labels, placeholders, validation messages, and titles.

• Validation: Uses Ant Design's form validation system with custom validators, including asynchronous validation on submission (validateFields).

• Memoization: The list of region options is memoized to prevent unnecessary recalculations on re-renders.

• Form Layout: Uses vertical layout with a max width of 600 pixels for better readability.

• External Link: Footer includes a link to the AWS Console, opening in a new tab to help users manage AWS credentials.

Interaction with Other Parts of the System

• Hooks: Imports useTranslate from a common hooks module for i18n support.

• Interfaces: Uses shared TypeScript interfaces (IModalProps, IAddLlmRequestBody) which define the shape of the data and props.

• Constants: Imports BedrockRegionList which holds the list of valid AWS Bedrock regions.

• UI Library: Uses Ant Design components (Modal, Form, Input, Select, InputNumber, Space, Flex) for consistent styling and behavior.

• Parent Components: Expects to be controlled by a parent component that manages modal visibility and handles the submitted data through the onOk prop.

Visual Diagram

componentDiagram
    component BedrockModal {
        +visible: boolean
        +hideModal(): void
        +onOk(data: IAddLlmRequestBody): void
        +loading: boolean
        +llmFactory: string
        +handleOk(): Promise<void>
    }

    component Form {
        +model_type: Select ("chat" | "embedding")
        +llm_name: Input (string)
        +bedrock_ak: Input (string)
        +bedrock_sk: Input (string)
        +bedrock_region: Select (string)
        +max_tokens: InputNumber (number)
        +validateFields(): Promise<FieldType>
    }

    BedrockModal --> Form : renders
    BedrockModal --> useTranslate : uses for i18n
    BedrockModal --> BedrockRegionList : uses for region options
    BedrockModal --> Modal : container dialog

Summary

The index.tsx file implements the BedrockModal React component, a user interface modal dialog for adding Bedrock LLM configurations. It features a form with validation, internationalized labels, and integration with AWS Bedrock regions and credentials. The component is designed to be reusable and composable within a broader settings UI, allowing users to safely input and submit LLM connection details. The code leverages Ant Design for UI consistency and React hooks for state and performance optimizations.