use-create-agent.ts

Overview

The use-create-agent.ts file defines a custom React hook named useCreateAgentOrPipeline. This hook encapsulates the logic and state management necessary for creating an "Agent" or a "Pipeline" entity within the application. Primarily, it provides a clean interface to initiate the creation process, manage loading and modal visibility states, and handle form submissions related to agent or pipeline creation.

The hook leverages other hooks and utilities such as useSetAgent for agent API interactions and useSetModalState for modal visibility control, ensuring separation of concerns and reusability.

Detailed Explanation

useCreateAgentOrPipeline Hook

Purpose

To provide UI components with the necessary state and functions to create agents or pipelines, control modal visibility, and track loading states during these operations.

Returns

An object containing:

• loading (boolean): Indicates whether the creation operation is currently in progress.

• creatingVisible (boolean): Controls the visibility of the creation modal.

• hideCreatingModal (() => void): Function to hide the creation modal.

• showCreatingModal (() => void): Function to show the creation modal.

• handleCreateAgentOrPipeline ((data: FormSchemaType) => Promise<void>): Async function to handle form submission to create an agent or pipeline based on provided form data.

Internal Functions

createAgent(name: string): Promise<{code: number; [key: string]: any}>

• Parameters:

  • name (string): The name of the agent to be created.

• Returns:

  • A promise resolving to the response of setAgent, which includes at least a code property indicating success (0) or failure.

• Description:

  • Uses the setAgent function from the useSetAgent hook to create a new agent.

  • Initializes the agent with a title and an empty DSL (Domain Specific Language) structure (EmptyDsl).

• Usage Example:

  const response = await createAgent("My New Agent");
  if (response.code === 0) {
    console.log("Agent created successfully");
  }
  

handleCreateAgentOrPipeline(data: FormSchemaType): Promise<void>

• Parameters:

  • data (FormSchemaType): The form data object, which includes properties like name and type.

• Returns:

  • A Promise resolving to void after processing the creation request.

• Description:

  • Determines the type of creation requested (agent or pipeline) based on the type field in the form data.

  • Currently, only handles creation when data.type is FlowType.Agent.

  • Calls createAgent with the supplied name.

  • Upon successful creation (ret.code === 0), it hides the creation modal.

• Usage Example:

  await handleCreateAgentOrPipeline({ name: "Agent X", type: FlowType.Agent });
  

Important Implementation Details

• Modal State Management:

  • The hook uses useSetModalState to manage the visibility of the creation modal. This provides showModal and hideModal functions renamed here as showCreatingModal and hideCreatingModal.

• Agent Creation API:

  • The useSetAgent hook exposes the setAgent function to create or update agent data asynchronously. This encapsulates the API request logic.

• DSL Initialization:

  • Agents are initialized with an empty DSL (EmptyDsl), imported from the agent request hooks. This ensures newly created agents start with a clean configuration.

• Flow Type Handling:

  • The hook references a FlowType enumeration to differentiate between creating an "Agent" or a "Pipeline". Currently, only the "Agent" flow is implemented.

Interaction with Other Parts of the System

• Hooks:

  • useSetAgent (from @/hooks/use-agent-request): Provides agent creation capability and loading state.

  • useSetModalState (from @/hooks/common-hooks): Controls modal visibility for the UI.

• Constants:

  • FlowType (from ../constant): Enum to distinguish between different flow types, such as Agent or Pipeline.

• Interfaces:

  • DSL (from @/interfaces/database/agent): Type definition for the agent DSL structure.

  • FormSchemaType (from ../create-agent-form): Defines the shape of the form data used for agent/pipeline creation.

This hook is typically used in UI components responsible for rendering the creation modal and handling user input for creating agents or pipelines. It abstracts the asynchronous creation logic and UI state management, allowing components to remain focused on presentation.

Example Usage in a React Component

import React from 'react';
import { useCreateAgentOrPipeline } from './use-create-agent';
import { FlowType } from '../constant';

function CreateAgentModal() {
  const {
    loading,
    creatingVisible,
    showCreatingModal,
    hideCreatingModal,
    handleCreateAgentOrPipeline,
  } = useCreateAgentOrPipeline();

  const onSubmit = async (formData) => {
    await handleCreateAgentOrPipeline(formData);
  };

  return (
    <>
      <button onClick={showCreatingModal}>Create Agent</button>
      {creatingVisible && (
        <Modal onClose={hideCreatingModal}>
          <AgentForm 
            loading={loading}
            onSubmit={onSubmit}
            defaultType={FlowType.Agent}
          />
        </Modal>
      )}
    </>
  );
}

Mermaid Diagram

flowchart TD
    A[useCreateAgentOrPipeline Hook]
    A --> B[useSetAgent Hook]
    A --> C[useSetModalState Hook]
    A --> D[createAgent(name)]
    A --> E[handleCreateAgentOrPipeline(data)]

    B --> F[setAgent({title, dsl})]
    C --> G[showModal()]
    C --> H[hideModal()]

    E --> |if data.type == FlowType.Agent| D
    D --> |returns promise with code| E
    E --> |on success (code===0)| H

Summary

The use-create-agent.ts file is a utility hook that centralizes the creation logic for agents and pipelines. It cleanly encapsulates API calls, loading states, and modal visibility, making it easier for UI components to manage creation workflows with minimal boilerplate. While currently only supporting agent creation, the structure allows extension for pipeline creation in the future. It interacts with other hooks and interface definitions to maintain strong typing and modularity within the application.