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

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

@@ -0,0 +1,92 @@
+import React, { useState, useEffect } from 'react';
+import { VscodeDivider, VscodeTextarea } from '@vscode-elements/react-elements';
+import { description } from '@/annotations';
+import type { IBehaveNode } from '@/types/nodes.js';
+import styles from './index.module.css';
+
+interface NodeSettingsProps {
+  selectedNode: IBehaveNode;
+  onSave: (annotationKey: string, value: string) => void;
+}
+
+export const NodeSettings: React.FC<NodeSettingsProps> = ({
+  selectedNode,
+  onSave
+}) => {
+  const annotations = selectedNode.data?.annotations;
+  const currentDescription = annotations?.[description] ?? '';
+  const [descriptionDraft, setDescriptionDraft] = useState(currentDescription);
+
+  useEffect(() => {
+    setDescriptionDraft(currentDescription);
+  }, [currentDescription]);
+
+  const handleSaveDescription = (rawDescription: string) => {
+    onSave(description, rawDescription);
+  };
+
+  return (
+    <div className={styles.stackGap2}>
+      <div className={styles.stackGap2Padded}>
+        <div className={styles.settingsRow}>
+          <div>Type</div>
+          <div>{selectedNode.data.type}</div>
+        </div>
+        <div className={styles.settingsRow}>
+          <div>ID</div>
+          <div>{selectedNode.id}</div>
+        </div>
+
+        <VscodeDivider />
+
+        <div className={styles.descriptionSection}>
+          <div className={styles.descriptionTitle}>Description</div>
+          <VscodeTextarea
+            placeholder="No description provided."
+            className={styles.descriptionTextarea}
+            value={descriptionDraft}
+            onInput={(e: any) => setDescriptionDraft(e?.target?.value ?? '')}
+            onBlur={() => {
+              handleSaveDescription(descriptionDraft);
+            }}
+            onKeyDown={(e: any) => {
+              if (e?.key === 'Escape') {
+                e?.preventDefault?.();
+                setDescriptionDraft('');
+              }
+            }}
+            rows={4}
+          />
+        </div>
+
+        <VscodeDivider />
+
+        <div className={styles.annotationsSection}>
+          <div className={styles.annotationsTitle}>Annotations</div>
+          {annotations == null ? (
+            <div className={styles.annotationsEmpty}>No annotations.</div>
+          ) : typeof annotations === 'string' ||
+            typeof annotations === 'number' ||
+            typeof annotations === 'boolean' ? (
+            <div className={styles.annotationsValue}>{String(annotations)}</div>
+          ) : Array.isArray(annotations) &&
+            annotations.every(
+              (x) => typeof x === 'string' || typeof x === 'number'
+            ) ? (
+            <ul className={styles.annotationsList}>
+              {annotations.map((x, i) => (
+                <li key={i} className={styles.annotationsListItem}>
+                  {String(x)}
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <pre className={styles.annotationsPre}>
+              {JSON.stringify(annotations, null, 2)}
+            </pre>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,125 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { VscodeTextfield } from '@vscode-elements/react-elements';
+import { InfoCircle } from 'iconoir-react';
+import { annotatedTitle } from '@/annotations';
+import type { IBehaveNode } from '@/types/nodes.js';
+import styles from './index.module.css';
+
+interface NodeTitleEditorProps {
+  selectedNode: IBehaveNode;
+  nodeLabel: string;
+  onSave: (annotationKey: string, value: string) => void;
+  nodeType?: string;
+  nodeIcon?: React.ReactNode;
+  hasDocumentation?: boolean;
+  onShowDocumentation?: (nodeType: string) => void;
+}
+
+export const NodeTitleEditor: React.FC<NodeTitleEditorProps> = ({
+  selectedNode,
+  nodeLabel,
+  onSave,
+  nodeType,
+  nodeIcon,
+  hasDocumentation,
+  onShowDocumentation
+}) => {
+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+  const [titleDraft, setTitleDraft] = useState('');
+
+  const annotations = (selectedNode as any)?.data?.annotations;
+
+  const annotationTitle = React.useMemo(() => {
+    if (
+      !annotations ||
+      typeof annotations !== 'object' ||
+      Array.isArray(annotations)
+    )
+      return undefined;
+    const title = annotations?.[annotatedTitle];
+    return typeof title === 'string' ? title : undefined;
+  }, [annotations]);
+
+  const displayedTitle = React.useMemo(() => {
+    const trimmed = annotationTitle?.trim();
+    return trimmed ? trimmed : nodeLabel;
+  }, [annotationTitle, nodeLabel]);
+
+  useEffect(() => {
+    setIsEditingTitle(false);
+    setTitleDraft('');
+  }, [selectedNode.id]);
+
+  const handleSaveTitle = (rawTitle: string) => {
+    onSave(annotatedTitle, rawTitle);
+    setIsEditingTitle(false);
+  };
+
+  const handleShowDocs = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (onShowDocumentation && nodeType) {
+        onShowDocumentation(nodeType);
+      }
+    },
+    [onShowDocumentation, nodeType]
+  );
+
+  if (!isEditingTitle) {
+    return (
+      <>
+        <div className={styles.panelTitleContainer}>
+          {nodeIcon && <div className={styles.nodeTitleIcon}>{nodeIcon}</div>}
+          <div
+            className={styles.panelTitle}
+            onDoubleClick={() => {
+              setTitleDraft(displayedTitle);
+              setIsEditingTitle(true);
+            }}
+            title="Double-click to rename"
+          >
+            {displayedTitle}
+          </div>
+          {hasDocumentation && onShowDocumentation && (
+            <button
+              className={styles.infoButton}
+              onClick={handleShowDocs}
+              title="Show documentation"
+            >
+              <InfoCircle />
+            </button>
+          )}
+        </div>
+        <div className={styles.panelId}>{selectedNode.id}</div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <div className={styles.panelTitleEdit}>
+        <VscodeTextfield
+          className={styles.panelTitleTextfield}
+          value={titleDraft}
+          onInput={(e: any) => setTitleDraft(e?.target?.value ?? '')}
+          onBlur={() => {
+            handleSaveTitle(titleDraft);
+          }}
+          onKeyDown={(e: any) => {
+            if (e?.key === 'Enter') {
+              e?.preventDefault?.();
+              handleSaveTitle(titleDraft);
+            }
+
+            if (e?.key === 'Escape') {
+              e?.preventDefault?.();
+              setIsEditingTitle(false);
+              setTitleDraft('');
+            }
+          }}
+        />
+      </div>
+      <div className={styles.panelId}>{selectedNode.id}</div>
+    </>
+  );
+};

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import styles from './index.module.css';
+import { EyeClosed, EyeSolid } from 'iconoir-react';
+import { Icon } from '@/components/primitives/icon';
+
+export interface OutputItem {
+  name: string;
+  valueType: string;
+  connected: boolean;
+}
+
+interface OutputsGroupProps {
+  outputs: OutputItem[];
+  hiddenOutputs?: Record<string, boolean>;
+  onToggleOutput?: (outputName: string) => void;
+}
+
+export const OutputsGroup: React.FC<OutputsGroupProps> = ({
+  outputs,
+  hiddenOutputs = {},
+  onToggleOutput
+}) => {
+  if (outputs.length === 0) return null;
+  return (
+    <div className={styles.stackColPadded}>
+      {outputs.map((output) => {
+        const isHidden = hiddenOutputs[output.name] ?? false;
+
+        return (
+          <div key={output.name} className={styles.inputWithToggle}>
+            {onToggleOutput && (
+              <Icon
+                onClick={() => onToggleOutput(output.name)}
+                title={isHidden ? 'Show output on node' : 'Hide output on node'}
+              >
+                {isHidden ? <EyeClosed /> : <EyeSolid />}
+              </Icon>
+            )}
+            <div className={styles.inputControlWrapper}>
+              <div className={styles.inputRow}>
+                <div className={styles.inputMeta}>
+                  <div className={styles.inputName} title={output.valueType}>
+                    {output.name}
+                  </div>
+                  <div className={styles.inputSubtext}>
+                    {output.connected ? 'Connected' : output.valueType}
+                  </div>
+                </div>
+                <div>
+                  {output.connected ? (
+                    <div className={styles.connectedMessage}>
+                      Socket is connected
+                    </div>
+                  ) : (
+                    <div className={styles.connectedMessage}>Not connected</div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { VscodeCollapsible } from '@vscode-elements/react-elements';
+import type {
+  SocketGenerator,
+  SocketGeneratorNode
+} from '@/store/socketGenerator';
+import styles from './index.module.css';
+
+interface SocketGeneratorsProps {
+  generators: SocketGenerator[];
+  generatorNode: SocketGeneratorNode;
+}
+
+export const SocketGenerators: React.FC<SocketGeneratorsProps> = ({
+  generators,
+  generatorNode
+}) => {
+  if (generators.length === 0) return null;
+
+  return (
+    <VscodeCollapsible title="Socket Generator" open>
+      <div className={styles.stackColPadded}>
+        {generators.map((generator) => {
+          const GeneratorRenderer = generator.render;
+          return (
+            <GeneratorRenderer key={generator.name} node={generatorNode} />
+          );
+        })}
+      </div>
+    </VscodeCollapsible>
+  );
+};

package/src/components/panels/nodeInputs/index.module.css

@@ -0,0 +1,284 @@
+.panel {
+    display: flex;
+    flex: 1 1 0%;
+    flex-direction: column;
+    gap: 0.5rem;
+    height: 100%;
+    padding: 0.5rem;
+}
+
+.panelScrollable {
+    display: flex;
+    flex: 1 1 0%;
+    flex-direction: column;
+    gap: 0.5rem;
+    height: 100%;
+    margin-bottom: 0.25rem;
+    overflow: auto;
+    padding: 0.5rem;
+}
+
+.listGap1 {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.stackGap2 {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.stackCol {
+    display: flex;
+    flex-direction: column;
+}
+
+.cardPadding {
+    padding: 0.5rem;
+}
+
+.sectionTitle {
+    font-size: 1.05em;
+    font-weight: 600;
+}
+
+.nodeCard {
+    padding: 0.5rem;
+    border: 1px solid var(--color-neutral-stroke-subtle);
+    border-radius: var(--component-spacing-xs);
+}
+
+.nodeCardTitle {
+    font-weight: bold;
+    font-size: 0.9em;
+}
+
+.nodeCardMeta {
+    font-size: 0.8em;
+    opacity: 0.7;
+}
+
+.emptyState {
+    font-size: 0.9em;
+    font-style: italic;
+    opacity: 0.7;
+    text-align: center;
+    padding: 2rem;
+}
+
+.panelTitle {
+    font-size: 1.05em;
+    text-align: center;
+    font-weight: 600;
+    cursor: text;
+    flex: 1;
+}
+
+.panelTitleContainer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    position: relative;
+}
+
+.nodeTitleIcon {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    opacity: 0.8;
+}
+
+.nodeTitleIcon svg,
+.nodeTitleIcon img {
+    width: 18px;
+    height: 18px;
+}
+
+.infoButton {
+    opacity: 0.5;
+    transition: opacity 0.2s;
+    padding: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 0.25rem;
+    background: transparent;
+    border: none;
+    color: var(--colors-fg);
+}
+
+.infoButton:hover {
+    background: var(--vscode-button-secondaryBackground, #313131);
+    opacity: 1 !important;
+}
+
+.infoButton svg {
+    width: 16px;
+    height: 16px;
+}
+
+.panelTitleEdit {
+    display: flex;
+    justify-content: center;
+}
+
+.panelTitleTextfield {
+    width: 100%;
+}
+
+.tabs {
+    width: 100%;
+}
+
+.panelId {
+    font-size: 0.6em;
+    opacity: 0.5;
+    text-align: center;
+    font-weight: 400;
+}
+
+.toolbar {
+    width: 100%;
+}
+
+.noInputs {
+    font-size: 0.9em;
+    font-style: italic;
+    opacity: 0.7;
+    padding: 0.75rem;
+}
+
+.stackColPadded {
+    display: flex;
+    flex-direction: column;
+    padding: 0.2em;
+}
+
+.inputRow {
+    display: grid;
+    grid-template-columns: minmax(120px, 1fr) minmax(160px, 1fr);
+    align-items: center;
+    gap: 0.4em;
+    padding: 0.2em;
+}
+
+.inputMeta {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.inputName {
+    font-size: 0.9em;
+    font-weight: 600;
+    text-transform: capitalize;
+}
+
+.inputSubtext {
+    font-size: 0.75em;
+    opacity: 0.7;
+}
+
+.connectedMessage {
+    font-size: 0.85em;
+    font-style: italic;
+    opacity: 0.7;
+}
+
+.stackGap2Padded {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.2em;
+}
+
+.settingsRow {
+    display: flex;
+    justify-content: space-between;
+    gap: 0.4em;
+}
+
+.annotationsSection {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2em;
+}
+
+.annotationsTitle {
+    font-size: 0.95em;
+    font-weight: 600;
+}
+
+.annotationsEmpty {
+    font-size: 0.85em;
+    font-style: italic;
+    opacity: 0.7;
+}
+
+.annotationsValue {
+    font-size: 0.85em;
+}
+
+.annotationsList {
+    margin: 0;
+    padding-left: 1.25rem;
+}
+
+.annotationsListItem {
+    font-size: 0.85em;
+}
+
+.annotationsPre {
+    margin: 0;
+    padding: 0.2em;
+    border: 1px solid var(--color-neutral-stroke-subtle);
+    border-radius: 0.2em;
+    background: var(--color-neutral-background-strong);
+    font-size: 0.8em;
+    overflow: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.panelHeader {
+    display: flex;
+    justify-content: flex-end;
+    padding: 0.25rem 0.5rem;
+    border-bottom: 1px solid var(--color-neutral-stroke-subtle);
+}
+
+
+
+.inputWithToggle {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.25rem;
+}
+
+.visibilityToggle {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0.25rem;
+    font-size: 0.85em;
+    opacity: 0.5;
+    transition: opacity 0.2s;
+    flex-shrink: 0;
+    margin-top: 0.2em;
+}
+
+.visibilityToggle:hover {
+    opacity: 1;
+}
+
+.inputControlWrapper {
+    flex: 1;
+    min-width: 0;
+}