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

package/src/components/nodes/behave/Node.tsx

@@ -0,0 +1,176 @@
+import type { NodeSpecJSON } from '@kiberon-labs/behave-graph';
+import { useMemo, useState } from 'react';
+import { useEdges, type NodeProps } from 'reactflow';
+import { useStore } from 'zustand';
+import { useChangeNodeData } from '../../../hooks/useChangeNodeData.js';
+import { isHandleConnected } from '../../../util/isHandleConnected.js';
+import InputSocket from '../../sockets/input/index.js';
+import NodeContainer from './NodeContainer.js';
+import OutputSocket from '../../sockets/output/index.js';
+import { configureSockets } from '@/util/sockets.js';
+import { BaseNodeWrapper } from '../wrapper/index.js';
+import { useSystem } from '@/system/provider.js';
+import type { SpecificNode } from '@/store/specific';
+import type { SocketGeneratorNode } from '@/store/socketGenerator';
+import styles from './Node.module.css';
+import type { IBehaveNode } from '@/types/nodes.js';
+
+export type BehaveNodeProps = NodeProps<IBehaveNode['data']> & {
+  spec: NodeSpecJSON;
+  allSpecs: NodeSpecJSON[];
+};
+
+export const Node = ({
+  id,
+  data,
+  spec,
+  selected,
+  allSpecs
+}: BehaveNodeProps) => {
+  const system = useSystem();
+  const edges = useEdges();
+  const handleChange = useChangeNodeData(id);
+  const [socketsVisible, _setSocketsVisible] = useState(true);
+  const specifics = useStore(system.specificStore, (s) => s.specifics);
+  const titleBarActions = useStore(
+    system.specificStore,
+    (s) => s.titleBarActions
+  );
+  const generators = useStore(system.socketGeneratorStore, (s) => s.generators);
+  const generatorLocation = useStore(
+    system.systemSettings,
+    (s) => s.generatorLocation
+  );
+
+  // Early return if spec is not available yet
+  if (!spec) {
+    return null;
+  }
+
+  const { pairs, valueInputs } = useMemo(
+    () => configureSockets(data.configuration, spec, data.dynamicPorts),
+    [data.configuration, spec, data.dynamicPorts]
+  );
+
+  const matchingSpecifics = useMemo(() => {
+    if (!spec) return [];
+    return specifics.filter((x) => x.check(spec));
+  }, [spec, specifics]);
+
+  const matchingGenerators = useMemo(() => {
+    if (!spec || generatorLocation !== 'inline') return [];
+    return generators.filter((x) => x.check(spec));
+  }, [spec, generators, generatorLocation]);
+
+  const specificNode: SpecificNode = useMemo(
+    () => ({
+      id,
+      data,
+      spec,
+      selected: !!selected
+    }),
+    [data, id, selected, spec]
+  );
+
+  const generatorNode: SocketGeneratorNode = useMemo(
+    () => ({
+      id,
+      data,
+      spec,
+      selected: !!selected
+    }),
+    [data, id, selected, spec]
+  );
+
+  const hiddenInputs = useMemo(() => {
+    return data.annotations?.hiddenInputs ?? {};
+  }, [data.annotations]);
+
+  const hiddenOutputs = useMemo(() => {
+    return data.annotations?.hiddenOutputs ?? {};
+  }, [data.annotations]);
+
+  const shouldShowInput = (inputName: string) => {
+    const isConnected = isHandleConnected(edges, id, inputName, 'target');
+    const isHidden = hiddenInputs[inputName] ?? false;
+    return !isHidden || isConnected;
+  };
+
+  const shouldShowOutput = (outputName: string) => {
+    const isConnected = isHandleConnected(edges, id, outputName, 'source');
+    const isHidden = hiddenOutputs[outputName] ?? false;
+    return !isHidden || isConnected;
+  };
+
+  return (
+    <BaseNodeWrapper metadata={data.annotations}>
+      <NodeContainer
+        title={spec.label}
+        category={spec.category}
+        selected={selected}
+        titleBarActions={titleBarActions[spec.type]}
+      >
+        {pairs.map(([input, output], ix) => {
+          const showInput = !input || shouldShowInput(input.name);
+          const showOutput = !output || shouldShowOutput(output.name);
+          if (!showInput && !showOutput) return null;
+          return (
+            <div key={ix} className={styles.pairRow}>
+              {input && (
+                <InputSocket
+                  {...input}
+                  hide={!showInput}
+                  specJSON={allSpecs}
+                  value={input.defaultValue}
+                  onChange={handleChange}
+                  connected={isHandleConnected(edges, id, input.name, 'target')}
+                />
+              )}
+              {output && (
+                <OutputSocket
+                  {...output}
+                  hide={!showOutput}
+                  specJSON={allSpecs}
+                  connected={isHandleConnected(
+                    edges,
+                    id,
+                    output.name,
+                    'source'
+                  )}
+                />
+              )}
+            </div>
+          );
+        })}
+        {valueInputs.map((input, ix) => {
+          if (!shouldShowInput(input.name)) return null;
+
+          return (
+            <div key={`valueInput-${ix}`} className={styles.valueInputRow}>
+              <InputSocket
+                {...input}
+                specJSON={allSpecs}
+                hide={!socketsVisible}
+                value={input.defaultValue}
+                onChange={handleChange}
+                connected={isHandleConnected(edges, id, input.name, 'target')}
+              />
+            </div>
+          );
+        })}
+
+        {matchingGenerators.map((generator) => {
+          const GeneratorRenderer = generator.render;
+          return (
+            <GeneratorRenderer key={generator.name} node={generatorNode} />
+          );
+        })}
+
+        {matchingSpecifics.map((specific) => {
+          const SpecificRenderer = specific.render;
+          return <SpecificRenderer key={specific.name} node={specificNode} />;
+        })}
+      </NodeContainer>
+    </BaseNodeWrapper>
+  );
+};

package/src/components/nodes/behave/NodeContainer.module.css

@@ -0,0 +1,88 @@
+.container {
+    min-width: 120px;
+    border-radius: var(--ds-node-radius, 4px);
+
+    color: var(--ds-widget-fg, var(--ds-fg));
+    font-size: var(--fs-body, 0.8125rem);
+    background-color: var(--ds-widget-bg, #2b2b2b);
+
+    border: 1px solid var(--ds-border-subtle, var(--ds-input-border, rgba(128, 128, 128, 0.35)));
+    box-sizing: border-box;
+
+    --node-accent: var(--ds-focus-border, #0078d4);
+}
+
+.selected {
+    box-shadow: 0 0 0 1px var(--ds-focus-border, #0078d4);
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    min-height: 22px;
+
+    padding: 3px 8px;
+
+    background-color: var(--ds-section-header-bg, var(--ds-widget-bg, var(--ds-editor-bg)));
+    border-bottom: 1px solid var(--ds-border-subtle, var(--ds-input-border, rgba(128, 128, 128, 0.35)));
+
+    border-top-left-radius: var(--ds-node-radius, 4px);
+    border-top-right-radius: var(--ds-node-radius, 4px);
+
+    border-left: 3px solid var(--node-accent);
+}
+
+.title {
+    flex: 1 1 auto;
+    min-width: 0;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    color: var(--ds-fg);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.actions {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: auto;
+    padding-left: 8px;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+
+.red {
+    --node-accent: var(--ds-node-red, #d16969);
+}
+
+.green {
+    --node-accent: var(--ds-node-green, #89d185);
+}
+
+.lime {
+    --node-accent: var(--ds-node-lime, #b5cea8);
+}
+
+.purple {
+    --node-accent: var(--ds-node-purple, #c586c0);
+}
+
+.blue {
+    --node-accent: var(--ds-node-blue, #4fc1ff);
+}
+
+.gray {
+    --node-accent: var(--ds-fg-muted, #cccccc);
+}
+
+.white {
+    --node-accent: var(--ds-fg, #cccccc);
+}

package/src/components/nodes/behave/NodeContainer.tsx

@@ -0,0 +1,46 @@
+import { NodeCategory, type NodeSpecJSON } from '@kiberon-labs/behave-graph';
+import cx from 'classnames';
+import React, { type PropsWithChildren } from 'react';
+
+import { categoryColorMap } from '../../../util/colors.js';
+
+import styles from './NodeContainer.module.css';
+
+type NodeProps = {
+  title: string;
+  category?: NodeSpecJSON['category'];
+  selected?: boolean;
+  titleBarActions?: React.ReactElement;
+};
+
+const NodeContainer: React.FC<PropsWithChildren<NodeProps>> = ({
+  title,
+  category = NodeCategory.None,
+  selected,
+  titleBarActions,
+  children
+}) => {
+  let colorName = categoryColorMap[category];
+  if (colorName === undefined) {
+    colorName = 'red';
+  }
+
+  const colorClass = styles[colorName];
+  const hasActions = Boolean(titleBarActions);
+
+  return (
+    <div
+      className={cx(styles.container, colorClass, selected && styles.selected)}
+    >
+      <div className={styles.header}>
+        <div className={styles.title}>{title}</div>
+        {hasActions && (
+          <div className={cx(styles.actions, 'nodrag')}>{titleBarActions}</div>
+        )}
+      </div>
+      <div className={styles.content}>{children}</div>
+    </div>
+  );
+};
+
+export default NodeContainer;

package/src/components/nodes/behave/index.tsx

@@ -0,0 +1,14 @@
+import type { NodeProps } from 'reactflow';
+import { Node } from './Node';
+import { useSystem } from '@/system/provider.js';
+import { useStore } from 'zustand';
+import type { IBehaveNode } from '@/types/nodes.js';
+
+export const BehaveNode = (props: NodeProps<IBehaveNode['data']>) => {
+  const sys = useSystem();
+  const allSpecs = useStore(sys.specStore, (s) => s.specs);
+  const specDict = useStore(sys.specStore, (s) => s.specDict);
+  return (
+    <Node spec={specDict[props.data.type]!} allSpecs={allSpecs} {...props} />
+  );
+};

package/src/components/nodes/group/index.tsx

@@ -0,0 +1,109 @@
+import {
+  type NodeProps,
+  NodeToolbar,
+  getNodesBounds,
+  useStore
+} from 'reactflow';
+import { NodeResizer } from '@reactflow/node-resizer';
+import { useCallback, type ComponentType } from 'react';
+import { VscodeButton } from '@vscode-elements/react-elements';
+import { useGraph } from '@/system/provider';
+import type { IGroupNode } from '@/types/nodes';
+
+const lineStyle = { borderColor: 'white' };
+const padding = 25;
+
+function GroupNode(props: NodeProps<IGroupNode['data']>) {
+  const { id, data } = props;
+  const system = useGraph();
+  const { minWidth, minHeight, hasChildNodes } = useStore((store) => {
+    const childNodes = Array.from(store.nodeInternals.values()).filter(
+      (n) => n.parentId === id
+    );
+    const rect = getNodesBounds(childNodes);
+
+    return {
+      minWidth: rect.width + padding * 2,
+      minHeight: rect.height + padding * 2,
+      hasChildNodes: childNodes.length > 0
+    };
+  }, isEqual);
+
+  const onDelete = useCallback(() => {
+    system.actionStore.getState().actions.deleteNodes([id]);
+  }, [system, id]);
+
+  const onDetach = useCallback(() => {
+    system.actionStore.getState().actions.ungroupNodes(id);
+  }, [system, id]);
+
+  const onColorChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      system.actionStore
+        .getState()
+        .actions.updateGroupColor(id, e.target.value);
+    },
+    [system, id]
+  );
+
+  return (
+    <div
+      style={{
+        height: '100%',
+        width: '100%',
+        position: 'relative',
+        background: `${data.color || '#FF0000'}40`
+      }}
+    >
+      <NodeResizer
+        lineStyle={lineStyle}
+        minWidth={minWidth}
+        minHeight={minHeight}
+      />
+
+      <NodeToolbar className="nodrag">
+        <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+          <input
+            type="color"
+            value={data.color || '#FF0000'}
+            onChange={onColorChange}
+            style={{
+              width: '32px',
+              height: '28px',
+              border: '1px solid var(--ds-input-border)',
+              borderRadius: '4px',
+              cursor: 'pointer',
+              backgroundColor: 'transparent'
+            }}
+            title="Change group color"
+          />
+          <VscodeButton secondary onClick={onDelete}>
+            Delete
+          </VscodeButton>
+          {hasChildNodes && (
+            <VscodeButton secondary onClick={onDetach}>
+              Ungroup
+            </VscodeButton>
+          )}
+        </div>
+      </NodeToolbar>
+    </div>
+  );
+}
+
+GroupNode as ComponentType<NodeProps<IGroupNode['data']>>;
+type IsEqualCompareObj = {
+  minWidth: number;
+  minHeight: number;
+  hasChildNodes: boolean;
+};
+
+function isEqual(prev: IsEqualCompareObj, next: IsEqualCompareObj): boolean {
+  return (
+    prev.minWidth === next.minWidth &&
+    prev.minHeight === next.minHeight &&
+    prev.hasChildNodes === next.hasChildNodes
+  );
+}
+
+export default GroupNode as ComponentType<NodeProps<IGroupNode['data']>>;

package/src/components/nodes/wrapper/index.tsx

@@ -0,0 +1,73 @@
+import React, { useMemo } from 'react';
+import styles from './styles.module.css';
+import { ErrorBoundary } from 'react-error-boundary';
+import classNames from 'classnames';
+import {
+  annotatedTitle,
+  description,
+  executing,
+  hidden,
+  pinned
+} from '@/annotations';
+import { MessageText, PinSolid } from 'iconoir-react';
+
+interface NodeProps {
+  icon?: React.ReactNode;
+  subtitle?: string;
+  error?: Error | null;
+  isAsync?: boolean;
+  children?: React.ReactNode;
+  controls?: React.ReactNode;
+  style?: React.CSSProperties;
+  metadata?: Record<string, any>;
+}
+
+export const BaseNodeWrapper = (props: NodeProps) => {
+  const { icon, metadata, subtitle, error, children, controls, ...rest } =
+    props;
+
+  const title = metadata?.[annotatedTitle];
+  const isExecuting = metadata?.[executing];
+  const isHidden = metadata?.[hidden];
+  const isPinned = metadata?.[pinned];
+  const hasDescription = metadata?.[description];
+
+  return (
+    <ErrorBoundary fallback={<div>Error occurred</div>}>
+      <div
+        className={classNames(
+          styles.nodeWrapper,
+          error && styles.error,
+          isExecuting && styles.executing,
+          isHidden && styles.hidden,
+          isPinned && styles.pinned
+        )}
+      >
+        <div
+          className={classNames(!isPinned && 'reactflow-draggable-handle')}
+          {...rest}
+        >
+          <div className={styles.header}>
+            <div className={styles.headerContent}>
+              {icon}
+              <div className={styles.titleContainer}>
+                <span className={styles.title}>{title}</span>
+                {subtitle && (
+                  <span className={styles.subtitle}>{subtitle}</span>
+                )}
+              </div>
+            </div>
+            <div className={styles.controls}>{controls}</div>
+            <div className={styles.icons}>
+              {hasDescription && <MessageText className={styles.smallIcon} />}
+              {isPinned && <PinSolid className={styles.smallIcon} />}
+            </div>
+          </div>
+
+          <div />
+          {children}
+        </div>
+      </div>
+    </ErrorBoundary>
+  );
+};

package/src/components/nodes/wrapper/styles.module.css

@@ -0,0 +1,87 @@
+.nodeWrapper {
+    position: relative;
+    box-shadow: var(--shadows-contextMenu);
+    border-radius: var(--component-radii-md);
+    background: var(--color-neutral-canvas-default-bg);
+    border: 1px solid var(--color-neutral-stroke-subtle);
+    flex: 1;
+    display: flex;
+}
+
+.nodeWrapper.error {
+    --nodeBorderColor: var(--color-danger-surface-default-idle-fg-default);
+    --nodeBgColor: var(--color-danger-surface-default-idle-bg);
+    --nodeTextColor: var(--color-danger-surface-default-idle-fg-default);
+}
+
+.nodeWrapper.executing {
+    border-color: var(--ds-focus-border);
+    box-shadow: 0 0 8px var(--ds-focus-border);
+    animation: pulse-border 1s ease-in-out infinite;
+}
+
+.nodeWrapper.hidden {
+    opacity: 0.1;
+}
+
+.nodeWrapper.pinned {
+    cursor: not-allowed;
+    border-color: var(--ds-warning);
+}
+
+.smallIcon {
+    width: 1em;
+    height: 1em;
+}
+
+@keyframes pulse-border {
+
+    0%,
+    100% {
+        box-shadow: 0 0 8px var(--ds-focus-border);
+    }
+
+    50% {
+        box-shadow: 0 0 16px var(--ds-focus-border);
+    }
+}
+
+.icons {
+    display: flex;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: absolute;
+    top: -1.25em;
+    width: 100%;
+}
+
+.headerContent {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+.titleContainer {
+    display: flex;
+    flex-direction: column;
+}
+
+.controls {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.title {
+    font: var(--font-body-sm);
+    color: var(--color-neutral-canvas-minimal-fg-default);
+}
+
+.subtitle {
+    font: var(--font-body-xs);
+    color: var(--color-neutral-canvas-minimal-fg-subtle);
+}
+

package/src/components/notifications/NotificationProvider.tsx

@@ -0,0 +1,81 @@
+import React, { useEffect } from 'react';
+import toast, { Toaster } from 'react-hot-toast';
+import { useSystem } from '@/system/provider';
+
+/**
+ * NotificationProvider listens to pubsub notification events and displays toasts
+ */
+export const NotificationProvider: React.FC = () => {
+  const system = useSystem();
+
+  useEffect(() => {
+    // Subscribe to notification events
+    const token = system.pubsub.subscribe('notification', (_, data) => {
+      const { type, message, options } = data;
+
+      switch (type) {
+        case 'success':
+          toast.success(message, options);
+          break;
+        case 'error':
+          toast.error(message, options);
+          break;
+        case 'loading':
+          toast.loading(message, options);
+          break;
+        case 'info':
+        default:
+          toast(message, options);
+          break;
+      }
+    });
+
+    // Subscribe to notification dismiss events
+    const dismissToken = system.pubsub.subscribe(
+      'notification:dismiss',
+      (_, data) => {
+        if (data.toastId) {
+          toast.dismiss(data.toastId);
+        } else {
+          toast.dismiss();
+        }
+      }
+    );
+
+    // Cleanup subscriptions on unmount
+    return () => {
+      if (token) {
+        system.pubsub.unsubscribe(token);
+      }
+      if (dismissToken) {
+        system.pubsub.unsubscribe(dismissToken);
+      }
+    };
+  }, [system.pubsub]);
+
+  return (
+    <Toaster
+      position="bottom-right"
+      toastOptions={{
+        duration: 4000,
+        style: {
+          background: 'var(--colors-bgSecondary, #2a2a2a)',
+          color: 'var(--colors-text, #ffffff)',
+          border: '1px solid var(--colors-border, #404040)'
+        },
+        success: {
+          iconTheme: {
+            primary: 'var(--colors-success, #22c55e)',
+            secondary: 'var(--colors-bgSecondary, #2a2a2a)'
+          }
+        },
+        error: {
+          iconTheme: {
+            primary: 'var(--colors-error, #ef4444)',
+            secondary: 'var(--colors-bgSecondary, #2a2a2a)'
+          }
+        }
+      }}
+    />
+  );
+};

package/src/components/notifications/index.ts

@@ -0,0 +1,2 @@
+export * from './NotificationProvider';
+export * from './utils';