flow.ts
Overview
The flow.ts file defines TypeScript types and interfaces primarily used to model a domain-specific language (DSL) for building and managing flow-based applications or workflows. It focuses on representing flow components, nodes, operators, and graph structures, which are essential for constructing, manipulating, and visualizing complex flows or pipelines, likely in a low-code/no-code or AI/ML orchestration environment.
This file does not contain executable logic (e.g., functions or classes with methods) but provides a comprehensive type system that ensures type safety and clear contracts across the flow-related modules of the system. The definitions here are foundational for flow creation, editing, execution, and visualization using React-based UI components (as indicated by imports from @xyflow/react).
Detailed Explanation of Types and Interfaces
1. Core DSL and Flow Structures
DSLComponents
export type DSLComponents = Record<string, IOperator>;
Purpose: Represents a map of component/operator IDs to their corresponding operator definitions.
Usage: Used within the DSL to look up operator details by their unique string keys.
DSL
export interface DSL {
components: DSLComponents;
history: any[];
path?: string[][];
answer?: any[];
graph?: IGraph;
messages: Message[];
reference: IReference[];
globals: Record<string, any>;
retrieval: IReference[];
}
Purpose: The main structure representing the DSL state.
Properties:
components: The set of operators/components defined in the DSL.history: An array representing the historical states or changes.path: Optional nested array of strings indicating paths or branches in the flow.answer: Optional array holding answers or outputs.graph: Optional graph structure (nodes and edges) representing the flow visually or logically.messages: Array ofMessageobjects (likely chat or system messages).reference: Array of references (IReference), possibly external data or context.globals: Global key-value store for variables or settings.retrieval: Array of references involved in retrieval operations.
IOperator
export interface IOperator {
obj: IOperatorNode;
downstream: string[];
upstream: string[];
parent_id?: string;
}
Purpose: Represents a component/operator node in the flow.
Properties:
obj: The operator node details.downstream: Array of IDs of operators that consume this operator's output.upstream: Array of IDs of operators providing inputs to this operator.parent_id: Optional ID referencing a parent operator (for nested flows).
IOperatorNode
export interface IOperatorNode {
component_name: string;
params: Record<string, unknown>;
}
Purpose: Defines the operator's detailed configuration.
Properties:
component_name: The name/type of the component/operator.params: Arbitrary parameters controlling operator behavior.
2. Flow Metadata Interfaces
IFlow
export declare interface IFlow {
avatar?: string;
canvas_type: null;
create_date: string;
create_time: number;
description: string;
dsl: DSL;
id: string;
title: string;
update_date: string;
update_time: number;
user_id: string;
permission: string;
nickname: string;
}
Purpose: Represents a user-created flow instance.
Usage: Stores metadata about a flow including creation/modification timestamps, user info, permission levels, and the embedded DSL structure.
IFlowTemplate
export interface IFlowTemplate {
avatar: string;
canvas_type: string;
create_date: string;
create_time: number;
description: {
en: string;
zh: string;
};
dsl: DSL;
id: string;
title: {
en: string;
zh: string;
};
update_date: string;
update_time: number;
}
Purpose: Similar to
IFlowbut designed as a template with multilingual support (en,zh) for description and title.Usage: Enables reuse of flows with localized metadata.
3. Form Interfaces for Operator Configuration
These interfaces represent the expected shape of configuration forms for various operator types:
IGenerateForm
export interface IGenerateForm {
max_tokens?: number;
temperature?: number;
top_p?: number;
presence_penalty?: number;
frequency_penalty?: number;
cite?: boolean;
prompt: number;
llm_id: string;
parameters: { key: string; component_id: string };
}
Purpose: Captures parameters for text generation operators, likely invoking language models.
Parameters:
max_tokens,temperature,top_p,presence_penalty,frequency_penalty: Controls for generation behavior.cite: Whether to include citations.prompt: Numeric identifier or count related to the prompt.llm_id: Identifier of the language model used.parameters: Key-component mapping for additional configuration.
ICategorizeItem and ICategorizeItemResult
export interface ICategorizeItem {
name: string;
description?: string;
examples?: string;
to?: string;
index: number;
}
export type ICategorizeItemResult = Record<
string,
Omit<ICategorizeItem, 'name'>
>;
Purpose: Defines category items for classification tasks.
ICategorizeItemResultmaps category names to their details except the name itself.
ICategorizeForm
export interface ICategorizeForm extends IGenerateForm {
category_description: ICategorizeItemResult;
}
Extends
IGenerateFormwith category descriptions for classification-related operators.
IRelevantForm
export interface IRelevantForm extends IGenerateForm {
yes: string;
no: string;
}
Adds
yesandnolabels for relevance classification scenarios.
ISwitchForm and Related Interfaces
export interface ISwitchCondition {
items: ISwitchItem[];
logical_operator: string;
to: string[] | string;
}
export interface ISwitchItem {
cpn_id: string;
operator: string;
value: string;
}
export interface ISwitchForm {
conditions: ISwitchCondition[];
end_cpn_id: string;
no: string;
}
Purpose: Models conditional branching logic:
ISwitchItem: Single condition item.ISwitchCondition: Groups conditions with logical operators (e.g., AND, OR).ISwitchForm: Complete switch with multiple conditions, an end component ID, and a "no" branch.
IBeginForm
export interface IBeginForm {
prologue?: string;
}
Represents optional introductory text or setup for the beginning node.
IRetrievalForm
export interface IRetrievalForm {
similarity_threshold?: number;
keywords_similarity_weight?: number;
top_n?: number;
top_k?: number;
rerank_id?: string;
empty_response?: string;
kb_ids: string[];
}
Parameters for retrieval-based operators, including thresholds, reranking, and knowledge base IDs.
ICodeForm
export interface ICodeForm {
inputs?: Array<{ name?: string; component_id?: string }>;
lang: string;
script?: string;
}
Defines code execution nodes with inputs, programming language, and script content.
4. Node Types and Graph Structure
BaseNodeData<TForm>
export type BaseNodeData<TForm extends any> = {
label: string; // operator type
name: string; // operator name
color?: string;
form?: TForm;
};
Base data shape for nodes with generic form data.
BaseNode<T>
export type BaseNode<T = any> = Node<BaseNodeData<T>>;
Wraps
BaseNodeDatainto aNodetype imported from@xyflow/react, integrating with React flow visualization.
Specialized Node Types
Examples include:
IBeginNode = BaseNode<IBeginForm>IRetrievalNode = BaseNode<IRetrievalForm>IGenerateNode = BaseNode<IGenerateForm>ICategorizeNode = BaseNode<ICategorizeForm>ISwitchNode = BaseNode<ISwitchForm>ICodeNode = BaseNode<ICodeForm>(Others are generic
BaseNodewithout specific form)
RAGFlowNodeType
export type RAGFlowNodeType =
| IBeginNode
| IRetrievalNode
| IGenerateNode
| ICategorizeNode
| ISwitchNode
| IRagNode
| IRelevantNode
| ILogicNode
| INoteNode
| IMessageNode
| IRewriteNode
| IInvokeNode
| ITemplateNode
| IEmailNode
| IIterationNode
| IIterationStartNode
| IKeywordNode;
Union of all supported node types in the flow graph.
IGraph
export interface IGraph {
nodes: RAGFlowNodeType[];
edges: Edge[];
}
Represents the entire flow graph with nodes and edges.
EdgeandNodeare imported from@xyflow/reactand represent graph connections and nodes respectively.
Important Implementation Details and Algorithms
Type-Driven Design: This file relies heavily on TypeScript's advanced typing features, including generics, unions, and mapped types, to enforce correct usage patterns and enable rich editor support.
Separation of Concerns: Forms are separated into distinct interfaces to model operator-specific configuration, promoting modularity.
Graph Integration: The use of
NodeandEdgefrom@xyflow/reactindicates tight integration with a React-based graph visualization framework, allowing these types to directly support rendering and editing flows within the UI.Multi-language and Localized Support:
IFlowTemplateincludes fields for English and Chinese, showing internationalization considerations.Flexible Operator Relationships:
IOperatorsupports upstream and downstream links and optional parent-child relationships, enabling complex flow topologies including nested subflows.
Interaction with Other Parts of the System
@xyflow/react: Provides React components/types for nodes and edges, used to visually represent the flow graph../chat: ImportsIReferenceandMessageinterfaces that are used as part of the DSL for messaging and referencing data, likely linked to chat or conversational AI features integrated into the flow.Flow Execution and UI Modules: These types serve as the backbone for flow editors, runners, validators, and storage modules that create, manipulate, and execute flows.
Persistence and API Layers: Interfaces like
IFlowandIFlowTemplateare likely serialized/deserialized during API communication for saving/loading flows and templates.
Usage Examples
Example 1: Defining a simple generate node
const generateNode: IGenerateNode = {
id: "node-1",
data: {
label: "Generate",
name: "Text Generator",
form: {
max_tokens: 100,
temperature: 0.7,
prompt: 1,
llm_id: "gpt-4",
parameters: { key: "param1", component_id: "comp123" },
},
color: "#00FF00",
},
position: { x: 100, y: 200 },
};
Example 2: Creating a simple flow graph
const graph: IGraph = {
nodes: [generateNode],
edges: [],
};
Mermaid Class Diagram
classDiagram
class DSL {
+DSLComponents components
+any[] history
+string[][]? path
+any[]? answer
+IGraph? graph
+Message[] messages
+IReference[] reference
+Record~string, any~ globals
+IReference[] retrieval
}
class IOperator {
+IOperatorNode obj
+string[] downstream
+string[] upstream
+string? parent_id
}
class IOperatorNode {
+string component_name
+Record~string, unknown~ params
}
class IFlow {
+string? avatar
+null canvas_type
+string create_date
+number create_time
+string description
+DSL dsl
+string id
+string title
+string update_date
+number update_time
+string user_id
+string permission
+string nickname
}
class IGraph {
+RAGFlowNodeType[] nodes
+Edge[] edges
}
class BaseNodeData~TForm~ {
+string label
+string name
+string? color
+TForm? form
}
class BaseNode~T~ {
+BaseNodeData~T~ data
}
DSL "1" *-- "*" IOperator : components
IOperator "1" *-- "1" IOperatorNode : obj
IFlow "1" *-- "1" DSL : dsl
IGraph "1" *-- "*" BaseNode : nodes
IGraph "1" *-- "*" Edge : edges
BaseNode "1" *-- "1" BaseNodeData : data
Summary
The flow.ts file is a critical type definition module that:
Models a DSL for flow-based systems, including operators, nodes, and graphs.
Defines rich metadata for flows and templates with internationalization.
Supports detailed operator configuration via specialized forms.
Integrates with React-based graph visualization components.
Enables complex, nested, and conditional flow structures.
This file provides the foundation for flow construction, validation, visualization, and execution in the broader system.
If you require documentation for specific related files or higher-level architecture, please provide those files or context.