use-show-drawer.tsx

Overview

use-show-drawer.tsx is a React hooks utility module designed to manage the visibility and interactions of multiple drawer components within a graph-based user interface. These drawers include form drawers, debug drawers, run/chat drawers, and log sheets. The file encapsulates logic for showing/hiding these UI elements based on user actions such as node clicks, pane clicks, or graph state changes.

The hooks in this file centralize modal state management, node selection, and interaction handling, serving as a bridge between the graph store (state management for nodes and tools) and UI components responsible for displaying modals/drawers.

Exports and Their Functionalities

1. useShowFormDrawer

Purpose:
Manages the form drawer visibility and selected node/tool state when a user interacts with a node.

Functionality:

• Tracks the currently clicked node and tool ID.

• Shows or hides the form drawer.

• Provides a handler (handleShow) to be called on node click events, which:

  • Checks if the clicked node is a tool node but without a tool dataset attribute, in which case it ignores the click.

  • Otherwise, sets the clicked node and tool IDs and shows the form drawer.

Returns:

• formDrawerVisible (boolean): Whether the form drawer is visible.

• hideFormDrawer (function): Function to hide the form drawer.

• showFormDrawer (function): Handler to show the form drawer on node clicks.

• clickedNode (object | undefined): The currently clicked node object from the graph store.

Usage Example:

const { formDrawerVisible, showFormDrawer, hideFormDrawer, clickedNode } = useShowFormDrawer();

<button onClick={(e) => showFormDrawer(e, nodeId)}>Open Form</button>
{formDrawerVisible && <FormDrawer node={clickedNode} onClose={hideFormDrawer} />}

2. useShowSingleDebugDrawer

Purpose:
Manages the visibility of a "single debug" drawer and ensures the graph is saved before showing the drawer.

Functionality:

• Uses useSaveGraph to save the current graph asynchronously.

• Only shows the debug drawer modal if the save operation returns success (code === 0).

Returns:

• singleDebugDrawerVisible (boolean): Whether the debug drawer is visible.

• hideSingleDebugDrawer (function): Function to hide the debug drawer.

• showSingleDebugDrawer (function): Function to save the graph and show the debug drawer if save succeeds.

Usage Example:

const { singleDebugDrawerVisible, showSingleDebugDrawer, hideSingleDebugDrawer } = useShowSingleDebugDrawer();

<button onClick={showSingleDebugDrawer}>Debug Node</button>
{singleDebugDrawerVisible && <DebugDrawer onClose={hideSingleDebugDrawer} />}

3. useShowDrawer

Purpose:
Coordinates the display logic of multiple drawers including run modal, chat modal, single debug drawer, and form drawer based on application state and user interactions.

Parameters:

• drawerVisible (boolean): Controls whether the overall drawer is visible.

• hideDrawer (function): Callback to hide the drawer.

Functionality:

• Uses multiple modal state hooks (useSetModalState) to control visibility of run and chat modals.

• Uses useShowSingleDebugDrawer and useShowFormDrawer to manage debug and form drawers.

• Uses useGetBeginNodeDataInputs to determine whether to show the run modal or chat modal when the drawer is visible.

• Provides event handlers:

  • onPaneClick: Hides the form drawer when the background pane is clicked.

  • onNodeClick: Handles node clicks to show/hide appropriate drawers:

    • Ignores clicks on excluded nodes (Operator.Note).

    • Shows form drawer on node click.

    • Shows single debug drawer if the debug icon within the node is clicked.

  • hideRunOrChatDrawer: Hides both run and chat modals and triggers the passed hideDrawer callback.

Returns:

• chatVisible, runVisible (booleans): Visibility states of chat and run modals.

• onPaneClick (function): Handler for pane clicks.

• singleDebugDrawerVisible, showSingleDebugDrawer, hideSingleDebugDrawer: Debug drawer state and controls.

• formDrawerVisible, showFormDrawer, hideFormDrawer, clickedNode: Form drawer state and controls.

• onNodeClick (function): Node click event handler.

• hideRunOrChatDrawer (function): Function to hide run/chat drawers and the main drawer.

• showChatModal (function): Directly show the chat modal.

Usage Example:

const { 
  chatVisible, runVisible, onPaneClick, onNodeClick,
  formDrawerVisible, showFormDrawer, hideFormDrawer,
  singleDebugDrawerVisible, showSingleDebugDrawer, hideSingleDebugDrawer,
  hideRunOrChatDrawer
} = useShowDrawer({ drawerVisible, hideDrawer });

// Use these handlers in the graph component and render drawers conditionally

4. useShowLogSheet

Purpose:
Manages the visibility of a log sheet drawer that displays chat logs based on a selected message ID.

Parameters:

• setCurrentMessageId (function): Function to set the current message ID in the chat log cache.

Functionality:

• Sets the selected message ID and shows the log sheet modal.

Returns:

• logSheetVisible (boolean): Whether the log sheet is visible.

• hideLogSheet (function): Hide function for the log sheet.

• showLogSheet (function): Function to show the log sheet with a given message ID.

Usage Example:

const { logSheetVisible, showLogSheet, hideLogSheet } = useShowLogSheet({ setCurrentMessageId });

<button onClick={() => showLogSheet('msg123')}>Show Log</button>
{logSheetVisible && <LogSheet messageId={currentMessageId} onClose={hideLogSheet} />}

5. useHideFormSheetOnNodeDeletion

Purpose:
Automatically hides the form drawer if the currently clicked node is deleted from the graph.

Parameters:

• hideFormDrawer (function): Function to hide the form drawer.

Functionality:

• Watches the graph store's nodes and the currently clicked node ID.

• If the clicked node ID no longer exists in the nodes list, hides the form drawer.

Returns:

• None (side-effect hook).

Usage Example:

useHideFormSheetOnNodeDeletion({ hideFormDrawer });

Important Implementation Details

• State Management:
  The file heavily relies on a centralized graph store (useGraphStore) to retrieve and update the state of nodes and clicked elements. Modal visibility is managed via a custom hook useSetModalState, which abstracts modal show/hide state and methods.

• Node Interaction Logic:
  The onNodeClick handler in useShowDrawer handles complex logic:

  • Prevents opening form drawer for nodes labeled as excluded (e.g., notes).

  • Detects clicks on debug-play icons within nodes by inspecting dataset attributes on event targets.

  • Ensures debug drawer shows only after graph is saved successfully.

• Conditional Drawer Display:
  When the overall drawer (drawerVisible) is toggled, it chooses between showing a run modal or chat modal depending on whether initial node inputs exist.

• External Dependencies:

  • lodash/get is used for safe nested property access on event targets.

  • Constants like Operator.Tool and Operator.Note define special node types.

  • Custom hooks like useCacheChatLog, useGetBeginNodeDataInputs, and useSaveGraph provide domain-specific logic related to chat logs, graph inputs, and saving graph state respectively.

Interaction With Other Parts of the System

• Graph Store (useGraphStore):
  Provides state and setters for the current clicked node, clicked tool, and node retrieval.

• Modal State Hook (useSetModalState):
  Manages open/close state of all drawer modals.

• Graph Save (useSaveGraph):
  Ensures the graph is saved before showing debug UI.

• Chat Log Cache (useCacheChatLog):
  Manages current message ID for displaying chat logs.

• Constants (Operator):
  Defines node types and helps determine logic for node interactions.

This file thus acts as a coordination layer between graph state, UI modal states, and domain-specific logic for displaying various drawers in response to user interactions.

Visual Diagram

componentDiagram
    component useShowFormDrawer {
        +formDrawerVisible: boolean
        +hideFormDrawer(): void
        +showFormDrawer(e: MouseEvent, nodeId: string): void
        +clickedNode: Node | undefined
    }
    component useShowSingleDebugDrawer {
        +singleDebugDrawerVisible: boolean
        +showSingleDebugDrawer(): Promise<void>
        +hideSingleDebugDrawer(): void
    }
    component useShowDrawer {
        +chatVisible: boolean
        +runVisible: boolean
        +onPaneClick(): void
        +onNodeClick(e, node): void
        +formDrawerVisible: boolean
        +showFormDrawer(e, nodeId): void
        +hideFormDrawer(): void
        +singleDebugDrawerVisible: boolean
        +showSingleDebugDrawer(): Promise<void>
        +hideSingleDebugDrawer(): void
        +hideRunOrChatDrawer(): void
        +showChatModal(): void
    }
    component useShowLogSheet {
        +logSheetVisible: boolean
        +showLogSheet(messageId: string): void
        +hideLogSheet(): void
    }
    component useHideFormSheetOnNodeDeletion

    useShowDrawer --> useShowFormDrawer : uses
    useShowDrawer --> useShowSingleDebugDrawer : uses
    useShowDrawer --> useSetModalState : uses (for run/chat modals)
    useShowSingleDebugDrawer --> useSaveGraph : uses
    useShowLogSheet --> useSetModalState : uses
    useHideFormSheetOnNodeDeletion --> useGraphStore : observes

Summary

This file provides a cohesive set of React hooks that manage complex UI drawer visibility and behavior for a graph-based interface, abstracting event handling, modal state, and graph state synchronization. It helps keep the UI responsive to user interactions while ensuring data consistency (e.g., saving graph before debug) and improves separation of concerns by encapsulating modal and node interaction logic in reusable hooks.