index.tsx

Overview

This file defines a React functional component named YiyanModal which renders a modal dialog to add or configure a large language model (LLM) via a form interface. The modal supports input fields for model type, model name, API credentials (AK and SK), and token limits. It uses Ant Design UI components and integrates form validation, localization support, and asynchronous submission handling.

The component is designed specifically for adding "Yiyan" LLM configurations, as indicated by the inclusion of fields like yiyan_ak and yiyan_sk. Upon submission, the modal validates the form data, optionally adjusts the model type based on user input (such as enabling vision capabilities), and passes the processed data back to a parent component through a callback.

Detailed Documentation

Types and Interfaces

FieldType

• A TypeScript type that extends the interface IAddLlmRequestBody with additional properties specific to this modal form:

  • vision: boolean — a flag indicating whether vision capabilities are enabled for the LLM.

  • yiyan_ak: string — the access key for Yiyan API.

  • yiyan_sk: string — the secret key for Yiyan API.

This type defines the shape of the form data handled by the component.

Component: YiyanModal

const YiyanModal = ({
  visible,
  hideModal,
  onOk,
  loading,
  llmFactory,
}: IModalProps<IAddLlmRequestBody> & { llmFactory: string }) => { ... }

Purpose

YiyanModal is a controlled modal dialog component that renders a form for adding a new LLM configuration. It manages form state, validation, and submission behavior.

Props

• visible: boolean
  Controls the visibility of the modal.

• hideModal: () => void
  Callback to hide or close the modal.

• onOk: (data: IAddLlmRequestBody) => void
  Callback invoked when the form is successfully submitted. Receives the processed form data.

• loading: boolean
  Indicates whether the form submission is in progress, used to display loading states on buttons.

• llmFactory: string
  String identifier for the LLM factory type, used in the modal title and submission data.

Internal Hooks and Utilities

• const [form] = Form.useForm<FieldType>()
  Initializes Ant Design's form instance typed with FieldType for form management.

• const { t } = useTranslate('setting')
  Hook for translation/localization support scoped to the "setting" namespace.

• omit from lodash
  Used to remove the vision property from the form submission data before sending.

Methods

handleOk

const handleOk = async () => { ... }

• Validates all form fields using form.validateFields().

• Adjusts the model_type field:

  • If model_type is "chat" and vision is true, sets model_type to "image2text".

  • Otherwise, retains the selected model_type.

• Constructs a submission data object containing all fields except vision, adds llm_factory from props, and includes max_tokens.

• Logs the submission data to the console.

• Calls the onOk callback with the processed data.

handleKeyDown

const handleKeyDown = async (e: React.KeyboardEvent) => { ... }

• Listens for keyboard events on input fields.

• If the Enter key is pressed, triggers form submission by calling handleOk().

Rendered JSX Structure

• Modal (Ant Design)

  • Props:

    • title — localized string including llmFactory name

    • open — controlled by visible prop

    • onOk — wired to handleOk

    • onCancel — wired to hideModal

    • okButtonProps and confirmLoading — controlled by loading prop for UX feedback

• Form (Ant Design)

  • Layout: vertical, max width 600px, with autocomplete off.

  • Uses form instance for data binding.

• Form Items:

  1. model_type (Select)

     • Options: "chat", "embedding", "rerank"

     • Initial value: "chat"

     • Required field with localized validation message.

  2. llm_name (Input)

     • Required field with localized validation message.

     • Supports submission on Enter key.

  3. yiyan_ak (Input)

     • Required field for Yiyan access key.

     • Supports submission on Enter key.

  4. yiyan_sk (Input)

     • Required field for Yiyan secret key.

     • Supports submission on Enter key.

  5. max_tokens (InputNumber)

     • Required numeric field with validation: must be non-negative.

     • Displays localized messages for required, type, and minimum value validations.

Implementation Details and Algorithms

• Model Type Adjustment Logic:
  When the user selects the "chat" model type and enables the vision boolean (not visible in the form fields here but presumably managed elsewhere or defaulted), the model_type is programmatically changed to "image2text" before submission to reflect a specialized mode combining chat and vision capabilities.

• Form Validation:
  Utilizes Ant Design's form validation system combined with a custom validator on max_tokens to enforce business rules (non-negative integer).

• Localization:
  All labels, placeholder texts, and validation messages are localized using a translation hook, allowing multi-language support.

• Data Sanitization:
  The vision field is omitted from the submission payload, indicating it is used internally but not needed by the back-end API.

Interaction with Other Parts of the System

• Hooks:

  • Uses a custom useTranslate hook to fetch localized strings from the "setting" namespace.

• Interfaces:

  • Imports IModalProps and IAddLlmRequestBody interfaces which define the expected shapes for modal props and the LLM request body respectively.

• Parent Components:

  • The component expects to be controlled by a parent that manages modal visibility (visible) and handles the submission callback (onOk).

• Ant Design Components:

  • Relies heavily on Ant Design's Form, Input, Modal, Select, and InputNumber components for UI consistency and functionality.

• Lodash:

  • Uses omit utility to exclude specific keys from objects.

Usage Example

import React, { useState } from 'react';
import YiyanModal from './index';

const ParentComponent = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleAddLlm = (data) => {
    setLoading(true);
    // Submit data to API or state management
    console.log('Submitted LLM data:', data);
    // After submission
    setLoading(false);
    setModalVisible(false);
  };

  return (
    <>
      <button onClick={() => setModalVisible(true)}>Add LLM</button>
      <YiyanModal
        visible={modalVisible}
        hideModal={() => setModalVisible(false)}
        onOk={handleAddLlm}
        loading={loading}
        llmFactory="Yiyan"
      />
    </>
  );
};

Mermaid Component Diagram

componentDiagram
    component YiyanModal {
      +visible: boolean
      +hideModal(): void
      +onOk(data: IAddLlmRequestBody): void
      +loading: boolean
      +llmFactory: string
    }
    YiyanModal --> Modal : renders
    YiyanModal --> Form : renders
    Form --> Select : model_type
    Form --> Input : llm_name, yiyan_ak, yiyan_sk
    Form --> InputNumber : max_tokens
    YiyanModal ..> useTranslate : localization
    YiyanModal ..> omit : data processing

Summary

index.tsx defines a reusable modal form component that allows users to input and submit configuration details for a Yiyan large language model. It features comprehensive form validation, localization, and dynamic adjustment of model type based on user input. The component is tightly integrated with Ant Design UI components and is intended to be controlled by a parent component managing its visibility and submission lifecycle.