rewrite-node.tsx

Overview

rewrite-node.tsx defines a React functional component called RewriteNode, which represents a custom node within a flowchart or workflow editor UI built using the @xyflow/react library. This component visually renders a node with two connection handles (input/output points), a header, and a label indicating the selected language model (LLM).

The node is styled dynamically based on the current UI theme (light or dark) and selection state. It integrates with the wider flow-based interface by exposing connection points and rendering data-driven labels and headers.

Component: RewriteNode

Description

RewriteNode is a React component designed to be used within a flow editor UI. It displays a node with:

• Two connection handles, placed on the left and right sides, for creating links to other nodes.

• A header section showing the node's name and label.

• A label indicating the associated Language Model (LLM), fetched from the node's form data.

The component supports theming and selection highlighting, making it visually consistent with the rest of the application.

Import Dependencies

• LLMLabel: UI component to display the language model label.

• useTheme: Custom hook to get the current UI theme (light/dark).

• IRewriteNode: Interface defining the shape of the node's data.

• Handle, NodeProps, Position: Components and types from @xyflow/react to render connection handles and type props.

• classNames: Utility to conditionally join CSS class names.

• lodash.get: Safely access deeply nested object properties.

• LeftHandleStyle, RightHandleStyle: Custom inline styles for the connection handles.

• NodeHeader: Component rendering the node's header information.

• styles: CSS module for styling the node.

Props

The component receives props typed as NodeProps<IRewriteNode>, which extend the generic node props from @xyflow/react with data typed as IRewriteNode.

Return Value

Returns JSX markup representing the node UI.

Usage Example

import { RewriteNode } from './rewrite-node';

// Example node data conforming to IRewriteNode interface
const exampleNodeData = {
  name: 'Rewrite',
  label: 'Text Rewriter',
  form: {
    llm_id: 'gpt-4',
  },
};

<RewriteNode
  id="node-1"
  data={exampleNodeData}
  isConnectable={true}
  selected={false}
/>;

Implementation Details

• Theme Support: The component uses a custom useTheme hook to get the current theme. It conditionally applies CSS classes for dark mode styling.

• Connection Handles: Two Handle components are rendered:

  • Left handle (id="c", positioned on the left) styled with LeftHandleStyle.

  • Right handle (id="b", positioned on the right) styled with RightHandleStyle.

  Both handles use the isConnectable prop to enable or disable interactivity.

• Node Header: The NodeHeader component receives the node's id, name, and label to render the node's title area.

• LLM Label: The LLMLabel component displays the language model associated with the node. It safely retrieves the llm_id from data.form using lodash.get to prevent errors if the path is undefined.

• Styling: Uses CSS modules (index.less) with class names for the node container, header, handles, and text.

Interaction with Other Parts of the System

• Flow Editor (@xyflow/react): RewriteNode integrates as a node in the flow editor, using Handle for connection points.

• Theme Provider: React context or hook (useTheme) provides the current UI theme to maintain consistent styling across the app.

• LLM Selection UI: The LLMLabel component shows the language model chosen via some selection mechanism elsewhere in the app.

• Node Header Component: Shared UI component to render node headers uniformly.

• Styles and Handles: The node relies on local styles and handle styling constants to maintain the visual identity.

Mermaid Component Diagram

componentDiagram
    component RewriteNode {
      +id: string
      +data: IRewriteNode
      +isConnectable: boolean
      +selected: boolean
      --
      +Render handles (Left & Right)
      +Render NodeHeader
      +Render LLMLabel
      +Apply theme styles
    }
    component NodeHeader {
      +id: string
      +name: string
      +label: string
    }
    component LLMLabel {
      +value: string
    }
    component Handle {
      +id: string
      +type: "source"
      +position: Position.Left | Position.Right
      +isConnectable: boolean
      +style: CSSProperties
    }
    RewriteNode --> Handle : uses (2 instances)
    RewriteNode --> NodeHeader : uses
    RewriteNode --> LLMLabel : uses
    RewriteNode --> useTheme : uses

Summary

The rewrite-node.tsx file provides a reusable React component tailored for a visual flow editor. It encapsulates node UI logic, including connection handles, theming, and displaying relevant node metadata such as name, label, and associated language model. By leveraging modular components and styles, it integrates seamlessly into the broader system supporting visual flow construction and management.