retrieval-node.tsx

Overview

retrieval-node.tsx defines a React functional component RetrievalNode which renders a customizable, interactive node in a flow or graph interface. This node visually represents a retrieval operation related to knowledge bases within a larger flow system (likely a knowledge or data flow editor). It integrates with theming, fetches knowledge base details asynchronously, and displays a list of related knowledge bases with avatars and names.

Key functionalities include:

• Visualization of a flow node with connection handles for linking nodes.

• Display of associated knowledge bases fetched from an external source.

• Pagination toggle to show/hide extended knowledge base entries.

• Theming support (light/dark modes).

• Selection highlighting.

This component is intended to be used within an interactive flow system, leveraging libraries like @xyflow/react for node/handle management and Ant Design (antd) for UI elements.

Detailed Explanation

Component: RetrievalNode

function RetrievalNode({
  id,
  data,
  isConnectable = true,
  selected,
}: NodeProps<IRetrievalNode>)

Parameters

• id: string
  Unique identifier of the node instance within the flow.

• data: IRetrievalNode
  Node-specific data adhering to the IRetrievalNode interface. Expected to contain at least:

  • name: string - Display name of the node.

  • label: string - Label to show in the header.

  • form.kb_ids: string[] - Array of knowledge base IDs linked to this node.

• isConnectable: boolean (optional, default true)
  Whether the node's handles are connectable to other nodes.

• selected: boolean
  Whether the node is currently selected (for UI highlighting).

Returns

• JSX Element representing the retrieval node UI.

Usage Example

<RetrievalNode
  id="node-123"
  data={{
    name: "Retrieval Node 1",
    label: "Retrieve KB",
    form: { kb_ids: ["kb1", "kb2", "kb3", "kb4"] }
  }}
  isConnectable={true}
  selected={false}
/>

Implementation Details

State and Hooks

• Theme Context:
  Uses useTheme() hook to apply light or dark mode CSS classes.

• Fetching Knowledge List:
  Utilizes useFetchKnowledgeList(true) hook to retrieve all knowledge base entries (likely asynchronous). This hook returns a list of all knowledge bases available in the system.

• Memoization:
  Uses useMemo to map the form.kb_ids from the node data to the full knowledge base objects (name, avatar, id) fetched from the global knowledge list. This avoids recomputations unless dependencies change.

• Local State:
  showAllKnowledge boolean state controls whether to show all knowledge bases or only a preview (first 3).

UI Structure

• Handles:
  Two connection handles from @xyflow/react:

  • Left handle (id="c", position Left) with custom style LeftHandleStyle.

  • Right handle (id="b", position Right) with custom style RightHandleStyle.

• Header:
  Renders a child component NodeHeader passing node id, name, and label. Applies conditional styling if any knowledge bases exist.

• Knowledge Bases List:
  Shows up to 3 knowledge bases by default; if more exist, a "Show more" button toggles expansion.

• Avatars and Names:
  Each knowledge base is represented with an Ant Design Avatar (with fallback icon UserOutlined), and the base name alongside.

• Styling:
  Utilizes CSS modules (imported as styles) alongside conditional classNames depending on theme and selection status.

Event Handling

• The "Show more" button toggles the showAllKnowledge state without letting the click event propagate to parent elements, preventing unintended side effects.

Interaction with Other System Parts

• Theming System:
  Connects to the app's theme context via useTheme() to adapt styles.

• Knowledge Base Data Layer:
  Pulls knowledge base data from the global store or API through useFetchKnowledgeList hook.

• Flow System:
  Integrates with @xyflow/react's flow rendering ecosystem, leveraging its Handle and NodeProps types for consistent node connection behavior.

• UI Components:
  Depends on Ant Design components (Avatar, Button, Flex) for layout and visuals.

• Styling:
  Uses scoped CSS module styles from index.less and custom handle styles from handle-icon files.

• Child Component:
  Uses NodeHeader component to render the node's header section.

Mermaid Component Diagram

componentDiagram
    component RetrievalNode {
      +id: string
      +data: IRetrievalNode
      +isConnectable: boolean
      +selected: boolean
    }
    component NodeHeader
    component Handle_Left
    component Handle_Right
    component Avatar
    component Button_ShowMore
    component useTheme
    component useFetchKnowledgeList

    RetrievalNode --> NodeHeader : renders header
    RetrievalNode --> Handle_Left : left connection handle
    RetrievalNode --> Handle_Right : right connection handle
    RetrievalNode --> Avatar : displays knowledge base avatars
    RetrievalNode --> Button_ShowMore : toggles knowledge list view
    RetrievalNode ..> useTheme : consumes theme context
    RetrievalNode ..> useFetchKnowledgeList : fetches knowledge bases

Summary

The RetrievalNode component is a specialized React node for a flow-based UI that visually represents retrieval operations tied to multiple knowledge bases. It combines asynchronous data fetching, theming, and dynamic UI toggling to provide an interactive node with connection handles and expandable knowledge base listings.

This file is a key UI building block in the flow editor, enabling users to see and interact with knowledge base retrieval points within a larger data or knowledge graph. Its modular design and integration with hooks and libraries make it reusable and maintainable.

If you need further detailed explanations or integration guidance, feel free to ask!