keyword-node.tsx

Overview

keyword-node.tsx defines a React functional component named KeywordNode that represents a visual node in a flow-based interface (likely a workflow or logic editor). This component is designed to be used within a node graph editor powered by @xyflow/react, facilitating connections between nodes via handles on the left and right sides.

The node visually displays:

• A header section with node name and label.

• A label representing a Large Language Model (LLM) identifier.

• Connection handles for linking nodes on the left and right.

The component supports theming (light/dark) and selection highlighting, making it visually consistent within the overall UI theme and interactive node graph.

Detailed Explanation

KeywordNode Component

export function KeywordNode({
  id,
  data,
  isConnectable = true,
  selected,
}: NodeProps<IKeywordNode>)

Purpose

KeywordNode renders a single node element in a flowchart or graph editor. It represents a "keyword" logic node that can be connected to other nodes via handles.

Parameters

• id: string
  Unique identifier for the node instance.

• data: IKeywordNode
  An object containing the node's data. The interface IKeywordNode is imported and expected to contain at least the following properties (inferred from usage):

  • name (string): The display name of the node.

  • label (string): A label string shown in the node header.

  • form.llm_id (string | undefined): Nested property accessed via lodash get to provide an LLM identifier for display.

• isConnectable: boolean (optional, defaults to true)
  Indicates whether the node handles can be connected to other nodes.

• selected: boolean
  Indicates if the node is currently selected, used to apply visual styles.

Return Value

Returns a React JSX element representing the node UI.

Usage Example

import { KeywordNode } from './keyword-node';

// Inside a flow graph component render method
<KeywordNode
  id="node-1"
  data={{ name: 'Keyword Extractor', label: 'Extractor', form: { llm_id: 'gpt-4' } }}
  isConnectable={true}
  selected={false}
/>

Implementation Details

• Styling and Theming:
  The component uses CSS modules (index.less) for scoped styles and applies conditional classes based on the current theme (dark or default) and selection state.
  The theme is retrieved via a custom hook useTheme().

• Node Structure:
  The node is wrapped in a <section> element styled as a logic node. It contains:

  • Two Handle components from @xyflow/react positioned on the left and right sides, serving as connection points for edges in the graph. Each handle has a unique ID ("c" on the left and "b" on the right), which may be used by the flow engine for connection logic.

  • A NodeHeader component displaying the node's name and label.

  • An LLMLabel component that displays the llm_id extracted from data.form.llm_id using lodash's get method to safely access nested properties.

• Handles Styling:
  The handles use custom styles imported as LeftHandleStyle and RightHandleStyle from a sibling module handle-icon.tsx. This suggests the handles have custom icons or CSS applied, ensuring visual consistency and clarity on the graph.

• Data Safety:
  The use of get(data, 'form.llm_id') avoids runtime errors if form or llm_id is undefined, gracefully rendering a fallback or empty label if missing.

Interaction with Other Parts of the Application

• Flow System (@xyflow/react):
  The component integrates tightly with the flow library by using its Handle elements and Position enum, enabling node connectivity in the graph UI.

• Theme Provider:
  Uses useTheme from the app's theme provider to adapt styles dynamically based on user-selected themes.

• Node Header (./node-header):
  Imports and uses NodeHeader to render the top label section of the node, encapsulating header UI logic.

• LLM Label (@/components/llm-select/llm-label):
  Displays the LLM identifier inside the node, possibly representing the AI model associated with the keyword node's logic.

• Handle Icon Styles (./handle-icon):
  Provides custom styles (likely icons or colors) for the node's connection handles.

• CSS Modules (index.less):
  Local styles scoped to this node component for consistent and isolated styling.

Summary of the Component Structure

Mermaid Component Diagram

componentDiagram
    component KeywordNode {
      +id: string
      +data: IKeywordNode
      +isConnectable: boolean
      +selected: boolean
      +render(): JSX.Element
    }
    component NodeHeader {
      +id: string
      +name: string
      +label: string
      +render(): JSX.Element
    }
    component LLMLabel {
      +value: string | undefined
      +render(): JSX.Element
    }
    component Handle {
      +id: string
      +type: source | target
      +position: Position
      +isConnectable: boolean
      +style: CSSProperties
      +render(): JSX.Element
    }
    component useTheme {
      +theme: string
    }
    KeywordNode --> NodeHeader : renders
    KeywordNode --> LLMLabel : renders
    KeywordNode --> Handle : renders (left and right)
    KeywordNode --> useTheme : uses

Important Notes

• This component is purely presentational and relies on the flow library (@xyflow/react) for interactive behavior like connecting nodes.

• The use of specific IDs for handles ("c" and "b") implies a convention in the flow system for identifying connection points, which other parts of the system must respect when creating edges.

• CSS Modules and theming ensure that the node visually integrates well into the application and respects user preferences for dark mode or selection highlighting.

Summary

keyword-node.tsx provides a reusable, themed React component representing a keyword logic node within a flow editor UI. It integrates with flow handles for connectivity, displays node metadata via a header and LLM label, and respects theme and selection states for consistent UX. This file is a key UI building block for constructing and visualizing logic workflows that involve keyword nodes linked to language models or other entities.