@kiberon-labs/behave-graph-flow 1.0.0 → 3.0.0

package/src/components/panels/nodeInputs/index.tsx

@@ -0,0 +1,349 @@
+import React, { useCallback, useMemo } from 'react';
+import { useActiveGraph, GraphProvider } from '@/system/provider';
+import {
+  VscodeTabHeader,
+  VscodeTabPanel,
+  VscodeTabs,
+  VscodeToolbarContainer
+} from '@vscode-elements/react-elements';
+import { useStore } from 'zustand';
+import {
+  findTabInLayout,
+  removeTabFromLayout,
+  addFloatingTab
+} from '@/components/layoutController/utils';
+
+import styles from './index.module.css';
+import { BasePanel } from '../base';
+import { NodeTitleEditor } from './NodeTitleEditor';
+import { MultipleNodesView } from './MultipleNodesView';
+import { SocketGenerators } from './SocketGenerators';
+import { InputsGroup } from './InputsGroup';
+import { OutputsGroup } from './OutputsGroup';
+import { NodeSettings } from './NodeSettings';
+import { useNodeInputsData } from './useNodeInputsData';
+import { useNodeHandlers } from './useNodeHandlers';
+import { EyeClosed, EyeSolid } from 'iconoir-react';
+import { Icon } from '@/components/primitives/icon';
+
+export function NodeInputsPanel() {
+  const system = useActiveGraph()!;
+  const documentation = useStore(
+    system.editor.documentationStore,
+    (x) => x.docs
+  );
+
+  const {
+    allSpecsJson,
+    selectedNodes,
+    selectedNode,
+    nodeSpec,
+    inputsWithControls,
+    outputsWithInfo,
+    matchingGenerators,
+    generatorNode,
+    controls,
+    defaultControl
+  } = useNodeInputsData(system);
+
+  const { handleSaveTitle, handleValueChange } = useNodeHandlers(
+    system,
+    selectedNode
+  );
+
+  const hiddenInputs = useMemo(() => {
+    return selectedNode?.data.annotations?.hiddenInputs ?? {};
+  }, [selectedNode]);
+
+  const hiddenOutputs = useMemo(() => {
+    return selectedNode?.data.annotations?.hiddenOutputs ?? {};
+  }, [selectedNode]);
+
+  const handleToggleInput = useCallback(
+    (inputName: string) => {
+      if (!selectedNode) return;
+
+      const currentHidden = hiddenInputs[inputName] ?? false;
+      const newHiddenInputs = {
+        ...hiddenInputs,
+        [inputName]: !currentHidden
+      };
+
+      system.nodeStore.getState().setNodes((prev) =>
+        prev.map((n) =>
+          n.id === selectedNode.id
+            ? {
+                ...n,
+                data: {
+                  ...(n as any).data,
+                  annotations: {
+                    ...(n as any).data.annotations,
+                    hiddenInputs: newHiddenInputs
+                  }
+                }
+              }
+            : n
+        )
+      );
+    },
+    [selectedNode, hiddenInputs, system]
+  );
+
+  const handleToggleOutput = useCallback(
+    (outputName: string) => {
+      if (!selectedNode) return;
+
+      const currentHidden = hiddenOutputs[outputName] ?? false;
+      const newHiddenOutputs = {
+        ...hiddenOutputs,
+        [outputName]: !currentHidden
+      };
+
+      system.nodeStore.getState().setNodes((prev) =>
+        prev.map((n) =>
+          n.id === selectedNode.id
+            ? {
+                ...n,
+                data: {
+                  ...(n as any).data,
+                  annotations: {
+                    ...(n as any).data.annotations,
+                    hiddenOutputs: newHiddenOutputs
+                  }
+                }
+              }
+            : n
+        )
+      );
+    },
+    [selectedNode, hiddenOutputs, system]
+  );
+
+  const handleToggleAllInputs = useCallback(() => {
+    if (!selectedNode) return;
+
+    const allHidden = inputsWithControls.every(
+      (input) => hiddenInputs[input.name]
+    );
+    const newHiddenInputs: Record<string, boolean> = {};
+
+    inputsWithControls.forEach((input) => {
+      newHiddenInputs[input.name] = !allHidden;
+    });
+
+    system.nodeStore.getState().setNodes((prev) =>
+      prev.map((n) =>
+        n.id === selectedNode.id
+          ? {
+              ...n,
+              data: {
+                ...(n as any).data,
+                annotations: {
+                  ...(n as any).data.annotations,
+                  hiddenInputs: newHiddenInputs
+                }
+              }
+            }
+          : n
+      )
+    );
+  }, [selectedNode, inputsWithControls, hiddenInputs, system]);
+
+  const handleToggleAllOutputs = useCallback(() => {
+    if (!selectedNode) return;
+
+    const allHidden = outputsWithInfo.every(
+      (output) => hiddenOutputs[output.name]
+    );
+    const newHiddenOutputs: Record<string, boolean> = {};
+
+    outputsWithInfo.forEach((output) => {
+      newHiddenOutputs[output.name] = !allHidden;
+    });
+
+    system.nodeStore.getState().setNodes((prev) =>
+      prev.map((n) =>
+        n.id === selectedNode.id
+          ? {
+              ...n,
+              data: {
+                ...(n as any).data,
+                annotations: {
+                  ...(n as any).data.annotations,
+                  hiddenOutputs: newHiddenOutputs
+                }
+              }
+            }
+          : n
+      )
+    );
+  }, [selectedNode, outputsWithInfo, hiddenOutputs, system]);
+
+  const handleShowDocumentation = useCallback(
+    (nodeType: string) => {
+      // Set the selected documentation type
+      system.refStore.getState().setRef('selectedDocumentationType', nodeType);
+
+      // Open documentation browser panel
+      const currentLayout = system.editor.tabStore.getState().layout;
+
+      // Close existing doc browser if open
+      const existingPanel = findTabInLayout(currentLayout, 'docbrowser');
+      let layoutToUse = currentLayout;
+      if (existingPanel) {
+        layoutToUse = removeTabFromLayout(currentLayout, 'docbrowser');
+      }
+
+      // Create new floating panel
+      const tabData = {
+        id: 'docbrowser'
+      };
+
+      const newLayout = addFloatingTab(layoutToUse, tabData, {
+        left: 100,
+        top: 100,
+        width: 600,
+        height: 700
+      });
+
+      system.editor.tabStore.getState().setLayout(newLayout);
+    },
+    [system]
+  );
+
+  const hasDocumentation = useCallback(
+    (nodeType: string) => {
+      const doc = documentation?.get(nodeType);
+      return !!(doc?.markdownDescription || doc?.shortDescription);
+    },
+    [documentation]
+  );
+
+  const getNodeIcon = useCallback(
+    (nodeType: string) => {
+      const doc = documentation?.get(nodeType);
+      return doc?.icon;
+    },
+    [documentation]
+  );
+
+  // Handle multiple node selection
+  if (selectedNodes.length > 1) {
+    return (
+      <MultipleNodesView
+        selectedNodes={selectedNodes}
+        allSpecsJson={allSpecsJson}
+      />
+    );
+  }
+
+  if (!selectedNode || !nodeSpec) {
+    return (
+      <BasePanel>
+        <div className={styles.emptyState}>
+          No node selected. Select a node to edit its inputs.
+        </div>
+      </BasePanel>
+    );
+  }
+
+  return (
+    <BasePanel>
+      <NodeTitleEditor
+        selectedNode={selectedNode}
+        nodeLabel={nodeSpec?.label ?? ''}
+        onSave={handleSaveTitle}
+        nodeType={selectedNode.data.type}
+        nodeIcon={getNodeIcon(selectedNode.data.type)}
+        hasDocumentation={hasDocumentation(selectedNode.data.type)}
+        onShowDocumentation={handleShowDocumentation}
+      />
+
+      <VscodeToolbarContainer className={styles.toolbar}>
+        <VscodeTabs className={styles.tabs}>
+          <VscodeTabHeader>Properties</VscodeTabHeader>
+          <VscodeTabPanel>
+            {inputsWithControls.length > 0 && (
+              <div className={styles.panelHeader}>
+                <span className={styles.panelHeaderLabel}>Inputs</span>
+                <Icon
+                  onClick={handleToggleAllInputs}
+                  title="Toggle all input visibility"
+                >
+                  {inputsWithControls.every(
+                    (input) => hiddenInputs[input.name]
+                  ) ? (
+                    <EyeSolid />
+                  ) : (
+                    <EyeClosed />
+                  )}
+                </Icon>
+              </div>
+            )}
+
+            {generatorNode &&
+              (
+                // Generators read per-graph state via useGraph(); bind them to the
+                // active session since this panel lives outside the graph tab.
+                <GraphProvider value={system}>
+                  <SocketGenerators
+                    generators={matchingGenerators}
+                    generatorNode={generatorNode}
+                  />
+                </GraphProvider>
+              )}
+            {inputsWithControls.length === 0 &&
+              matchingGenerators.length === 0 && (
+                <div className={styles.noInputs}>
+                  This node has no editable inputs.
+                </div>
+              )}
+            <InputsGroup
+              inputs={inputsWithControls}
+              controls={controls}
+              defaultControl={defaultControl}
+              onValueChange={handleValueChange}
+              hiddenInputs={hiddenInputs}
+              onToggleInput={handleToggleInput}
+            />
+          </VscodeTabPanel>
+          <VscodeTabHeader>Outputs</VscodeTabHeader>
+          <VscodeTabPanel>
+            {outputsWithInfo.length > 0 && (
+              <div className={styles.panelHeader}>
+                <span className={styles.panelHeaderLabel}>Outputs</span>
+                <Icon
+                  onClick={handleToggleAllOutputs}
+                  title="Toggle all output visibility"
+                >
+                  {outputsWithInfo.every(
+                    (output) => hiddenOutputs[output.name]
+                  ) ? (
+                    <EyeSolid />
+                  ) : (
+                    <EyeClosed />
+                  )}
+                </Icon>
+              </div>
+            )}
+            {outputsWithInfo.length === 0 && (
+              <div className={styles.noInputs}>This node has no outputs.</div>
+            )}
+            <OutputsGroup
+              outputs={outputsWithInfo}
+              hiddenOutputs={hiddenOutputs}
+              onToggleOutput={handleToggleOutput}
+            />
+          </VscodeTabPanel>
+          <VscodeTabHeader>Settings</VscodeTabHeader>
+          <VscodeTabPanel>
+            <NodeSettings
+              selectedNode={selectedNode}
+              onSave={handleSaveTitle}
+            />
+          </VscodeTabPanel>
+        </VscodeTabs>
+      </VscodeToolbarContainer>
+    </BasePanel>
+  );
+}

package/src/components/panels/nodeInputs/useNodeHandlers.ts

@@ -0,0 +1,76 @@
+import { useCallback } from 'react';
+import type { IBehaveNode } from '@/types/nodes';
+import type { GraphSession } from '@/system/graphSession';
+
+export function useNodeHandlers(
+  system: GraphSession,
+  selectedNode: IBehaveNode | null
+) {
+  const handleSaveTitle = useCallback(
+    (annotationKey: string, rawValue: string) => {
+      if (!selectedNode) return;
+
+      const trimmed = rawValue.trim();
+
+      const currentAnnotations = (selectedNode as any)?.data
+        ?.annotations as unknown;
+      const isPlainObject =
+        !!currentAnnotations &&
+        typeof currentAnnotations === 'object' &&
+        !Array.isArray(currentAnnotations);
+
+      const nextAnnotations: Record<string, any> = isPlainObject
+        ? { ...(currentAnnotations as any) }
+        : {};
+      if (!trimmed) {
+        delete nextAnnotations[annotationKey];
+      } else {
+        nextAnnotations[annotationKey] = trimmed;
+      }
+
+      const updatedNode = {
+        ...selectedNode,
+        data: {
+          ...selectedNode.data,
+          annotations: nextAnnotations
+        }
+      };
+
+      system.nodeStore
+        .getState()
+        .setNodes((prev) =>
+          prev.map((n) => (n.id === selectedNode.id ? updatedNode : n))
+        );
+    },
+    [selectedNode, system.nodeStore]
+  );
+
+  const handleValueChange = useCallback(
+    (inputName: string, newValue: any) => {
+      if (!selectedNode) return;
+
+      const updatedNode = {
+        ...selectedNode,
+        data: {
+          ...selectedNode.data,
+          ports: {
+            ...selectedNode.data.ports,
+            [inputName]: newValue
+          }
+        }
+      };
+
+      system.nodeStore
+        .getState()
+        .setNodes((prev) =>
+          prev.map((n) => (n.id === selectedNode.id ? updatedNode : n))
+        );
+    },
+    [selectedNode, system.nodeStore]
+  );
+
+  return {
+    handleSaveTitle,
+    handleValueChange
+  };
+}

package/src/components/panels/nodeInputs/useNodeInputsData.ts

@@ -0,0 +1,153 @@
+import { useMemo } from 'react';
+import { useStore } from 'zustand';
+import { configureSockets } from '@/util/sockets';
+import { isHandleConnected } from '@/util/isHandleConnected';
+import type { IBehaveNode } from '@/types/nodes';
+import type { GraphSession } from '@/system/graphSession';
+
+export function useNodeInputsData(system: GraphSession) {
+  const selectedNodeId = useStore(
+    system.selectionStore,
+    (x) => x.selectedNodeId
+  );
+  const nodes = useStore(system.nodeStore, (x) => x.nodes);
+  const edges = useStore(system.edgeStore, (x) => x.edges);
+  const controls = useStore(system.controlStore, (x) => x.controls);
+  const defaultControl = useStore(system.controlStore, (x) => x.defaultControl);
+  const generators = useStore(
+    system.editor.socketGeneratorStore,
+    (s) => s.generators
+  );
+  const generatorLocation = useStore(
+    system.editor.systemSettings,
+    (s) => s.generatorLocation
+  );
+
+  const allSpecsJson = useStore(system.editor.specStore, (x) => x.specs);
+
+  const selectedNodes = useMemo(() => {
+    return nodes.filter(
+      (n) => (n as IBehaveNode).type == 'behaveNode' && n.selected
+    );
+  }, [nodes]);
+
+  const selectedNode = useMemo(() => {
+    if (!selectedNodeId) return null;
+    return nodes.find(
+      (n) => (n as IBehaveNode).type === 'behaveNode' && n.id === selectedNodeId
+    ) as IBehaveNode | null;
+  }, [selectedNodeId, nodes]);
+
+  const nodeSpec = useMemo(() => {
+    if (!selectedNode) return null;
+    return allSpecsJson.find((spec) => spec.type === selectedNode.data.type);
+  }, [selectedNode, allSpecsJson]);
+
+  const inputsWithControls = useMemo(() => {
+    if (!selectedNode || !nodeSpec) return [];
+
+    const { pairs, valueInputs } = configureSockets(
+      selectedNode.data.configuration,
+      nodeSpec,
+      selectedNode.data.dynamicPorts
+    );
+    const inputs: Array<{
+      name: string;
+      valueType: string;
+      defaultValue?: any;
+      choices?: Array<{ text: string; value: any }>;
+      value: any;
+      connected: boolean;
+    }> = [];
+
+    for (const [input] of pairs) {
+      if (input && input.valueType !== 'flow') {
+        inputs.push({
+          name: input.name,
+          valueType: input.valueType,
+          defaultValue: input.defaultValue,
+          choices: input.choices,
+          value: selectedNode.data.ports?.[input.name] ?? input.defaultValue,
+          connected: isHandleConnected(
+            edges,
+            selectedNode.id,
+            input.name,
+            'target'
+          )
+        });
+      }
+    }
+
+    for (const input of valueInputs) {
+      inputs.push({
+        name: input.name,
+        valueType: input.valueType,
+        defaultValue: input.defaultValue,
+        choices: input.choices,
+        value: selectedNode.data.ports?.[input.name] ?? input.defaultValue,
+        connected: isHandleConnected(
+          edges,
+          selectedNode.id,
+          input.name,
+          'target'
+        )
+      });
+    }
+
+    return inputs;
+  }, [selectedNode, nodeSpec, edges]);
+
+  const outputsWithInfo = useMemo(() => {
+    if (!selectedNode || !nodeSpec) return [];
+
+    // `valueOutputs` already contains every non-flow output. (The `pairs` from
+    // configureSockets also carry these value outputs in their second slot ,
+    // iterating both would render each value output twice and collide on the
+    // React key, e.g. `provider` / `agent`.)
+    const { valueOutputs } = configureSockets(
+      selectedNode.data.configuration,
+      nodeSpec,
+      selectedNode.data.dynamicPorts
+    );
+
+    return valueOutputs.map((output) => ({
+      name: output.name,
+      valueType: output.valueType,
+      connected: isHandleConnected(
+        edges,
+        selectedNode.id,
+        output.name,
+        'source'
+      )
+    }));
+  }, [selectedNode, nodeSpec, edges]);
+
+  const matchingGenerators = useMemo(() => {
+    if (!nodeSpec || generatorLocation !== 'panel') return [];
+    return generators.filter((x) => x.check(nodeSpec));
+  }, [nodeSpec, generators, generatorLocation]);
+
+  const generatorNode = useMemo(() => {
+    if (!selectedNode || !nodeSpec) return null;
+    return {
+      id: selectedNode.id,
+      data: selectedNode.data,
+      spec: nodeSpec,
+      selected: !!selectedNode.selected
+    };
+  }, [selectedNode, nodeSpec]);
+
+  return {
+    allSpecsJson,
+    selectedNodes,
+    selectedNode,
+    nodeSpec,
+    inputsWithControls,
+    outputsWithInfo,
+
+    matchingGenerators,
+    generatorNode,
+    controls,
+    defaultControl
+  };
+}

package/src/components/panels/nodePicker/index.tsx

@@ -0,0 +1,115 @@
+import React, { useCallback, useMemo } from 'react';
+import { useActiveGraph } from '@/system/provider';
+import { useStore } from 'zustand';
+import { NodePicker } from '@/components/contextMenus/NodePicker';
+import type { ExtendedNodeSpecJSON } from '@/components/contextMenus/NodePicker';
+import type { XYPosition } from 'reactflow';
+import { v4 as uuidv4 } from 'uuid';
+import {
+  removeTabFromLayout,
+  addFloatingTab,
+  findTabInLayout
+} from '@/components/layoutController/utils';
+
+export function NodePickerPanel() {
+  const sys = useActiveGraph()!;
+  const specJson = useStore(sys.editor.specStore, (x) => x.specs);
+  const documentation = useStore(sys.editor.documentationStore, (x) => x.docs);
+  const reactflowRef = useStore(sys.refStore, (x) => x.refs.reactflow);
+  const screenPosition = useStore(
+    sys.refStore,
+    (x) => x.refs.nodePickerPosition
+  );
+
+  // Convert screen position to flow position
+  const flowPosition = useMemo(() => {
+    if (reactflowRef && screenPosition && reactflowRef.screenToFlowPosition) {
+      return reactflowRef.screenToFlowPosition(screenPosition);
+    }
+    return { x: 0, y: 0 };
+  }, [reactflowRef, screenPosition]);
+
+  // For now, we'll use undefined which means no filtering
+  const nodePickFilters = undefined;
+  const closeNodePicker = useCallback(() => {
+    const currentLayout = sys.editor.tabStore.getState().layout;
+    const newLayout = removeTabFromLayout(currentLayout, 'nodepicker');
+    sys.editor.tabStore.getState().setLayout(newLayout);
+  }, [sys]);
+
+  const handleShowDocumentation = useCallback(
+    (nodeType: string) => {
+      // Set the selected documentation type
+      sys.refStore.getState().setRef('selectedDocumentationType', nodeType);
+
+      // Open documentation browser panel
+      const currentLayout = sys.editor.tabStore.getState().layout;
+
+      // Close existing doc browser if open
+      const existingPanel = findTabInLayout(currentLayout, 'docbrowser');
+      let layoutToUse = currentLayout;
+      if (existingPanel) {
+        layoutToUse = removeTabFromLayout(currentLayout, 'docbrowser');
+      }
+
+      // Create new floating panel
+      const tabData = {
+        id: 'docbrowser'
+      };
+
+      const newLayout = addFloatingTab(layoutToUse, tabData, {
+        left: 100,
+        top: 100,
+        width: 600,
+        height: 700
+      });
+
+      sys.editor.tabStore.getState().setLayout(newLayout);
+    },
+    [sys]
+  );
+
+  const handleAddNode = useCallback(
+    (spec: ExtendedNodeSpecJSON, position: XYPosition) => {
+      const newNode = {
+        id: uuidv4(),
+        type: spec.nodeType ?? 'behaveNode',
+        position,
+        data: {
+          configuration: {},
+          type: spec.type,
+          ports: {}
+        }
+      };
+
+      sys.undoManager.execute({
+        name: `Add node (${spec.type})`,
+        execute: () => {
+          sys.nodeStore.getState().addNode(newNode);
+        },
+        undo: () => {
+          sys.nodeStore
+            .getState()
+            .setNodes((existing) =>
+              existing.filter((n) => n.id !== newNode.id)
+            );
+        }
+      });
+
+      closeNodePicker();
+    },
+    [closeNodePicker, sys]
+  );
+
+  return (
+    <NodePicker
+      position={flowPosition}
+      filters={nodePickFilters}
+      onPickNode={handleAddNode}
+      onClose={closeNodePicker}
+      specJSON={specJson}
+      documentation={documentation}
+      onShowDocumentation={handleShowDocumentation}
+    />
+  );
+}