@kiberon-labs/behave-graph-flow 1.0.0 → 2.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,87 @@
+.container {
+    min-width: 120px;
+    border-radius: 4px;
+
+    color: var(--vscode-editorWidget-foreground, var(--vscode-foreground));
+    font-size: 0.8125rem;
+    background-color: #2b2b2b;
+
+    border: 1px solid var(--vscode-editorWidget-border, var(--vscode-input-border, rgba(128, 128, 128, 0.35)));
+    box-sizing: border-box;
+
+    --node-accent: var(--vscode-focusBorder, #0078d4);
+}
+
+.selected {
+    box-shadow: 0 0 0 1px var(--vscode-focusBorder, #0078d4);
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    min-height: 24px;
+
+    padding: 4px 8px;
+
+    background-color: var(--vscode-sideBarSectionHeader-background, var(--vscode-editorWidget-background, var(--vscode-editor-background)));
+    border-bottom: 1px solid var(--vscode-editorWidget-border, var(--vscode-input-border, rgba(128, 128, 128, 0.35)));
+
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+
+    border-left: 5px solid var(--node-accent);
+}
+
+.title {
+    flex: 1 1 auto;
+    min-width: 0;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    color: var(--vscode-foreground);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.actions {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: 5em;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    padding-top: 6px;
+    padding-bottom: 6px;
+}
+
+.red {
+    --node-accent: #d16969;
+}
+
+.green {
+    --node-accent: #89d185;
+}
+
+.lime {
+    --node-accent: #b5cea8;
+}
+
+.purple {
+    --node-accent: #c586c0;
+}
+
+.blue {
+    --node-accent: #4fc1ff;
+}
+
+.gray {
+    --node-accent: var(--vscode-descriptionForeground, #cccccc);
+}
+
+.white {
+    --node-accent: var(--vscode-foreground, #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/comment/FormatToolbar.tsx

@@ -0,0 +1,118 @@
+import styles from './styles.module.css';
+import type { Editor } from '@tiptap/react';
+import { Code, List, NumberedListLeft, Quote } from 'iconoir-react';
+
+interface FormatToolbarProps {
+  editor: Editor;
+}
+
+export const FormatToolbar = ({ editor }: FormatToolbarProps) => {
+  return (
+    <div className={styles.bubbleMenu}>
+      <div className={styles.menuBar}>
+        <button
+          type="button"
+          onClick={() => editor.chain().focus().toggleBold().run()}
+          className={editor.isActive('bold') ? styles.isActive : ''}
+          title="Bold"
+        >
+          <strong>B</strong>
+        </button>
+        <button
+          type="button"
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+          className={editor.isActive('italic') ? styles.isActive : ''}
+          title="Italic"
+        >
+          <em>I</em>
+        </button>
+        <button
+          type="button"
+          onClick={() => editor.chain().focus().toggleStrike().run()}
+          className={editor.isActive('strike') ? styles.isActive : ''}
+          title="Strikethrough"
+        >
+          <s>S</s>
+        </button>
+        <button
+          type="button"
+          onClick={() => editor.chain().focus().toggleCode().run()}
+          className={editor.isActive('code') ? styles.isActive : ''}
+          title="Code"
+        >
+          <Code />
+        </button>
+        <div className={styles.separator} />
+        <button
+          type="button"
+          onClick={() =>
+            editor.chain().focus().toggleHeading({ level: 1 }).run()
+          }
+          className={
+            editor.isActive('heading', { level: 1 }) ? styles.isActive : ''
+          }
+          title="Heading 1"
+        >
+          H1
+        </button>
+        <button
+          type="button"
+          onClick={() =>
+            editor.chain().focus().toggleHeading({ level: 2 }).run()
+          }
+          className={
+            editor.isActive('heading', { level: 2 }) ? styles.isActive : ''
+          }
+          title="Heading 2"
+        >
+          H2
+        </button>
+        <button
+          type="button"
+          onClick={() =>
+            editor.chain().focus().toggleHeading({ level: 3 }).run()
+          }
+          className={
+            editor.isActive('heading', { level: 3 }) ? styles.isActive : ''
+          }
+          title="Heading 3"
+        >
+          H3
+        </button>
+        <div className={styles.separator} />
+        <button
+          type="button"
+          onClick={() => editor.chain().focus().toggleBulletList().run()}
+          className={editor.isActive('bulletList') ? styles.isActive : ''}
+          title="Bullet List"
+        >
+          <List />
+        </button>
+        <button
+          type="button"
+          onClick={() => editor.chain().focus().toggleOrderedList().run()}
+          className={editor.isActive('orderedList') ? styles.isActive : ''}
+          title="Numbered List"
+        >
+          <NumberedListLeft />
+        </button>
+        <button
+          type="button"
+          onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+          className={editor.isActive('codeBlock') ? styles.isActive : ''}
+          title="Code Block"
+        >
+          <Code />
+        </button>
+        <button
+          type="button"
+          onClick={() => editor.chain().focus().toggleBlockquote().run()}
+          className={editor.isActive('blockquote') ? styles.isActive : ''}
+          title="Quote"
+        >
+          <Quote />
+        </button>
+      </div>
+    </div>
+  );
+};

package/src/components/nodes/comment/comment.tsx

@@ -0,0 +1,103 @@
+import styles from './styles.module.css';
+import { memo, useEffect, useRef, useState } from 'react';
+import { NodeResizer, type OnResize } from 'reactflow';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { useChangeNodeData } from '@/hooks/useChangeNodeData';
+import { BaseNodeWrapper } from '../wrapper';
+import { Markdown } from 'tiptap-markdown';
+import type { ICommentNode } from '@/types/nodes';
+import { FormatToolbar } from './FormatToolbar';
+import type { NodeProps } from 'reactflow';
+
+const CommentNodeRaw = ({
+  data,
+  selected,
+  id
+}: NodeProps<ICommentNode['data']>) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const handleNodeChange = useChangeNodeData(id);
+
+  const editor = useEditor({
+    extensions: [StarterKit, Markdown],
+    content: data.text || '> Comment',
+    editable: isEditing,
+    editorProps: {
+      attributes: {
+        class: 'prose prose-sm focus:outline-none w-full h-full nodrag',
+        style: `font-size: ${data.fontSize || 'medium'}; padding: 0.5rem;`
+      }
+    },
+    onUpdate: ({ editor }) => {
+      const markdown = (
+        editor.storage as { markdown?: { getMarkdown(): string } }
+      ).markdown;
+      if (markdown) {
+        handleNodeChange('text', markdown.getMarkdown());
+      }
+    }
+  });
+
+  useEffect(() => {
+    if (editor) {
+      editor.setEditable(isEditing);
+    }
+  }, [isEditing, editor]);
+
+  useEffect(() => {
+    if (editor && data.fontSize) {
+      const editorElement = editor.view.dom as HTMLElement;
+      editorElement.style.fontSize = data.fontSize;
+    }
+  }, [data.fontSize, editor]);
+
+  const onResize: OnResize = (event, params) => {
+    if (!containerRef.current) return;
+    containerRef.current.style.height = `${params.height}px`;
+    containerRef.current.style.width = `${params.width}px`;
+  };
+
+  const handleDoubleClick = () => {
+    setIsEditing(true);
+    setTimeout(() => {
+      editor?.commands.focus();
+    }, 0);
+  };
+
+  const handleBlur = (e: React.FocusEvent) => {
+    // Check if the new focus target is within the editor
+    const relatedTarget = e.relatedTarget as Node;
+    if (containerRef.current?.contains(relatedTarget)) {
+      return; // Don't close if focus is moving within the editor
+    }
+
+    setTimeout(() => {
+      setIsEditing(false);
+    }, 200);
+  };
+
+  return (
+    <BaseNodeWrapper metadata={data.annotations}>
+      <div className={styles.commentNode}>
+        <NodeResizer
+          onResize={onResize}
+          color="#ff0071"
+          isVisible={selected || false}
+        />
+
+        <div
+          ref={containerRef}
+          className={styles.editorContainer}
+          onDoubleClick={handleDoubleClick}
+          onBlur={handleBlur}
+        >
+          {editor && isEditing && <FormatToolbar editor={editor} />}
+          <EditorContent editor={editor} className={styles.editorContent} />
+        </div>
+      </div>
+    </BaseNodeWrapper>
+  );
+};
+
+export const CommentNode = memo(CommentNodeRaw);

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

@@ -0,0 +1,150 @@
+.commentNode {
+    background: var(--colors-bgSurface);
+    color: white;
+    border-radius: 2px;
+    border: 1px solid var(--vscode-textBlockQuote-border);
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.editorContainer {
+    background: var(--vscode-editor-background);
+    padding: 10px;
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.editorContent {
+    width: 100%;
+    height: 100%;
+    min-height: 100px;
+    cursor: text;
+    overflow: auto;
+}
+
+.editorContent :global(.ProseMirror) {
+    outline: none;
+    width: 100%;
+    height: 100%;
+    color: var(--vscode-editor-foreground);
+}
+
+.editorContent :global(.ProseMirror p) {
+    margin: 0.5em 0;
+}
+
+.editorContent :global(.ProseMirror h1) {
+    font-size: 2em;
+    font-weight: bold;
+    margin: 0.67em 0;
+}
+
+.editorContent :global(.ProseMirror h2) {
+    font-size: 1.5em;
+    font-weight: bold;
+    margin: 0.75em 0;
+}
+
+.editorContent :global(.ProseMirror h3) {
+    font-size: 1.17em;
+    font-weight: bold;
+    margin: 0.83em 0;
+}
+
+.editorContent :global(.ProseMirror ul),
+.editorContent :global(.ProseMirror ol) {
+    padding-left: 1.5em;
+    margin: 0.5em 0;
+}
+
+.editorContent :global(.ProseMirror code) {
+    background: var(--vscode-textCodeBlock-background);
+    padding: 0.125em 0.25em;
+    border-radius: 3px;
+    font-family: var(--vscode-editor-font-family);
+}
+
+.editorContent :global(.ProseMirror pre) {
+    background: var(--vscode-textCodeBlock-background);
+    padding: 0.75em;
+    border-radius: 4px;
+    overflow-x: auto;
+    margin: 0.5em 0;
+}
+
+.editorContent :global(.ProseMirror pre code) {
+    background: none;
+    padding: 0;
+}
+
+.editorContent :global(.ProseMirror blockquote) {
+    border-left: 3px solid var(--vscode-textBlockQuote-border);
+    padding-left: 1em;
+    margin: 0.5em 0;
+    font-style: italic;
+}
+
+.bubbleMenu {
+    position: absolute;
+    top: -45px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--vscode-editorWidget-background);
+    border: 1px solid var(--vscode-editorWidget-border);
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    padding: 4px;
+    z-index: 1000;
+    animation: fadeIn 0.15s ease;
+    pointer-events: auto;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateX(-50%) translateY(-5px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0);
+    }
+}
+
+.menuBar {
+    display: flex;
+    gap: 2px;
+    align-items: center;
+}
+
+.menuBar button {
+    background: transparent;
+    border: none;
+    color: var(--vscode-foreground);
+    padding: 4px 8px;
+    cursor: pointer;
+    border-radius: 3px;
+    font-size: 13px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.15s;
+}
+
+.menuBar button:hover {
+    background: var(--vscode-list-hoverBackground);
+}
+
+.menuBar button.isActive {
+    background: var(--vscode-list-activeSelectionBackground);
+    color: var(--vscode-list-activeSelectionForeground);
+}
+
+.separator {
+    width: 1px;
+    height: 20px;
+    background: var(--vscode-editorWidget-border);
+    margin: 0 4px;
+}