keyword-node.tsx

Overview

keyword-node.tsx defines a React functional component that renders a specialized node UI element, called KeywordNode, for a flow-based interface. This node visually represents a keyword entity within a graph or flow editor, displaying its name, label, and associated language model (LLM) information. It supports interactive connection handles to link with other nodes, and dynamically adapts its styling based on theme and selection state.

The component leverages hooks and utilities from the surrounding application ecosystem and a third-party flow library (@xyflow/react) to integrate seamlessly into a node-based workflow editor.

Detailed Explanation

Exports

InnerKeywordNode (React Functional Component)
KeywordNode (Memoized version of InnerKeywordNode for performance optimization)

`InnerKeywordNode` Component

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

Purpose

Renders the visual structure of a keyword node, including:

Connection handles on left and right for linking with other nodes.
Node header displaying the node's name and label.
A label for the associated LLM (language model) used.
Theme-aware styling and selection indication.

Parameters

id: string
Unique identifier for the node instance.
data: IKeywordNode
The data object representing the keyword node. It includes properties such as name, label, and nested form data (including llm_id).
isConnectable: boolean (optional, default = true)
Indicates whether the node’s handles can be connected to other nodes.
selected: boolean (optional)
Indicates whether the node is currently selected in the UI.

Return Value

A React element representing the keyword node UI.

Usage Example

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

const nodeData = {
  name: 'Keyword Node 1',
  label: 'Important',
  form: { llm_id: 'llm-123' },
};

<KeywordNode
  id="node-1"
  data={nodeData}
  isConnectable={true}
  selected={false}
/>

Implementation Details

Theme Context:
Uses useTheme() hook to get current UI theme (dark or other) and apply conditional styles.
Handles:
Uses <Handle> components from @xyflow/react to render connection points: one on the left (id="c") and one on the right (id="b"), with distinct styles imported from handle-icon.ts. Both handles are of type "source", meaning they can initiate connections.
Node Header:
Renders a NodeHeader component with node ID, name, and label.
LLM Label:
Displays the LLM associated with the node using the LLMLabel component, fetching the LLM ID from data.form.llm_id safely using Lodash's get function.
Styling:
Uses CSS modules (index.less) and classnames to conditionally apply styles based on theme and selection.
Memoization:
KeywordNode is a memoized version of InnerKeywordNode using React's memo to avoid unnecessary re-renders when props don't change.

Imported Modules and Their Roles

Import	Purpose
`LLMLabel`	Displays language model label based on `llm_id`.
`useTheme`	Provides current UI theme to apply conditional styling.
`IKeywordNode`	Type interface for the keyword node data.
`{ Handle, NodeProps, Position }` from `@xyflow/react`	Core building blocks for node handles and props typing.
`classNames`	Utility to conditionally join CSS class names.
`get` from `lodash`	Safe getter for nested properties (`data.form.llm_id`).
`memo` from `react`	Optimization to memoize the component.
`LeftHandleStyle`, `RightHandleStyle`	Inline styles for left and right handles respectively.
`styles` from `./index.less`	CSS module for scoped styling.
`NodeHeader`	Subcomponent rendering the node's header information.

Interaction with Other Parts of the System

Flow Editor:
This component is designed to be used within a flow or graph editor UI built on @xyflow/react. It represents a node entity that users can connect to other nodes via handles.
Theme Provider:
Integrates with a global theme context (useTheme) to adapt appearance dynamically.
LLM Selection:
Displays selected language model info via LLMLabel, suggesting integration with LLM selection and configuration components elsewhere in the app.
NodeHeader Component:
The node header is separated into its own reusable component (NodeHeader), allowing consistent header rendering across different node types.
Styling and Handles:
Uses shared styles and handle icon styles to maintain visual consistency across node types.

Visual Diagram

classDiagram
    class InnerKeywordNode {
        +id: string
        +data: IKeywordNode
        +isConnectable: boolean
        +selected: boolean
        +render(): JSX.Element
    }

    class KeywordNode {
        +InnerKeywordNode
        +memoizedRender(): JSX.Element
    }

    InnerKeywordNode <|-- KeywordNode

    class Handle {
        +id: string
        +type: "source" | "target"
        +position: Position
        +isConnectable: boolean
        +className: string
        +style: React.CSSProperties
    }

    class NodeHeader {
        +id: string
        +name: string
        +label: string
        +render(): JSX.Element
    }

    class LLMLabel {
        +value: string
        +render(): JSX.Element
    }

    InnerKeywordNode o-- Handle : "2 instances (left and right)"
    InnerKeywordNode o-- NodeHeader : "1 instance"
    InnerKeywordNode o-- LLMLabel : "1 instance"

Summary

keyword-node.tsx provides a reusable, theme-aware React node component for a flow editor.
It visually represents keyword entities with connection handles, a header, and LLM info.
The component is memoized for performance.
It relies on external components and hooks for theming and node structure.
Styling is modular and dynamic based on theme and selection state.

This file is a key UI building block for constructing interactive and visually consistent node-based workflows involving keyword data and language models.