index.less

Overview

The index.less file is a stylesheet written in LESS, a CSS preprocessor language, used to define the styling and layout for a user interface related to flow lists and agent templates within a web application. It provides structured and reusable style rules for various UI components including wrappers, cards, buttons, modals, and text elements.

This file controls the visual presentation of key areas such as the flow list container, top header sections, flow card containers, template boxes, and modal dialogs. It ensures consistent typography, spacing, alignment, and interactivity cues across these components.

Detailed Explanation of Style Blocks

1. .flowListWrapper

2. .topWrapper

3. .flowCardContainer

4. .templatesBox

5. .agentTemplateModal

6. .agentTemplateModalWrapper

Important Implementation Details

Interaction with Other Parts of the System

Usage Examples

While this file is a stylesheet and does not contain executable code, here is an example of how classes defined here might be used in a React component:

import React from 'react';
import './index.less';

function FlowListHeader() {
  return (
    <div className="topWrapper">
      <div>
        <h1 className="title">Flow List</h1>
        <p className="description">Manage your flows and templates here.</p>
      </div>
      <button className="filterButton">Filter</button>
    </div>
  );
}

function AgentTemplateModal({ selected }) {
  return (
    <div className="agentTemplateModal">
      <div className={`flowTemplateCard ${selected ? 'selectedFlowTemplateCard' : ''}`}>
        {/* Template content */}
        <button className="useButton">Use Template</button>
      </div>
    </div>
  );
}

Visual Diagram of Structure

flowchart TD
    FLW[.flowListWrapper]
    TW[.topWrapper]
    TW --> |contains| TITLE[.title]
    TW --> |contains| DESC[.description]
    TW --> |contains| TOPBTN[.topButton]
    TW --> |contains| FILTBTN[.filterButton]

    FCC[.flowCardContainer]
    FCC --> |contains| KNOWEMPTY[.knowledgeEmpty]

    TB[.templatesBox]

    ATM[.agentTemplateModal]
    ATM --> ANTMD[Ant Design Modal Content (:global(.ant-modal-content))]
    ATM --> AGDESC[.agentDescription]
    ATM --> CMDC[.createModalContent]
    ATM --> ATW[.agentTitleWrapper]
    ATM --> FTC[.flowTemplateCard]
    FTC --> SELFTC[.selectedFlowTemplateCard]
    FTC --> USEBTN[.useButton]

    ATMW[.agentTemplateModalWrapper]

    %% Relationships
    FLW --> TW
    FLW --> FCC
    FLW --> TB
    FLW --> ATM
    ATM --> ATMW

Summary

The index.less file is a core styling resource that defines the layout and appearance of flow list and agent template UI elements in a web application. It uses LESS features such as variables, nesting, and mixins to maintain consistency and modularity. Integration with Ant Design components is evident, and the styles support interactive features like selection highlights and modals. This file works closely with React (or other UI framework) component files and shared theme variables to deliver a cohesive user experience.