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

package/src/store/chat.ts

@@ -0,0 +1,73 @@
+import { create } from 'zustand';
+
+export interface AgentConfig {
+  model?: string;
+  systemPrompt?: string;
+}
+
+export interface ChatMessage {
+  id: string;
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+  timestamp: Date;
+  isStreaming?: boolean;
+}
+
+export type ChatStore = {
+  messages: ChatMessage[];
+  agent: AgentConfig | undefined;
+  isStreaming: boolean;
+  inputValue: string;
+
+  setAgent: (agent: AgentConfig) => void;
+  clearAgent: () => void;
+  addMessage: (message: ChatMessage) => void;
+  updateStreamingMessage: (id: string, content: string) => void;
+  finalizeStreamingMessage: (id: string) => void;
+  setIsStreaming: (streaming: boolean) => void;
+  setInputValue: (value: string) => void;
+  clearMessages: () => void;
+};
+
+let messageCounter = 0;
+
+export function createMessageId(): string {
+  messageCounter += 1;
+  return `msg-${Date.now()}-${String(messageCounter)}`;
+}
+
+export const chatStoreFactory = () =>
+  create<ChatStore>((set) => ({
+    messages: [],
+    agent: undefined,
+    isStreaming: false,
+    inputValue: '',
+
+    setAgent: (agent: AgentConfig) => set({ agent }),
+    clearAgent: () => set({ agent: undefined }),
+
+    addMessage: (message: ChatMessage) =>
+      set((state) => ({
+        messages: [...state.messages, message]
+      })),
+
+    updateStreamingMessage: (id: string, content: string) =>
+      set((state) => ({
+        messages: state.messages.map((msg) =>
+          msg.id === id ? { ...msg, content } : msg
+        )
+      })),
+
+    finalizeStreamingMessage: (id: string) =>
+      set((state) => ({
+        messages: state.messages.map((msg) =>
+          msg.id === id ? { ...msg, isStreaming: false } : msg
+        )
+      })),
+
+    setIsStreaming: (streaming: boolean) => set({ isStreaming: streaming }),
+
+    setInputValue: (value: string) => set({ inputValue: value }),
+
+    clearMessages: () => set({ messages: [] })
+  }));

package/src/store/controls.tsx

@@ -0,0 +1,62 @@
+import { AnyControl } from '@/components/controls/any';
+import { BooleanControl } from '@/components/controls/boolean';
+import { NumberControl } from '@/components/controls/number';
+import { StringControl } from '@/components/controls/string';
+import { ColorControl } from '@/components/controls/colorPicker';
+import {
+  Cube,
+  Droplet,
+  EaseCurveControlPoints,
+  Hashtag,
+  InputOutput,
+  SelectPoint3d,
+  Text
+} from 'iconoir-react';
+import { create } from 'zustand';
+
+export interface ControlProps<T = any> {
+  value: T;
+  onChange: (value: T) => void;
+  valueType?: string;
+}
+
+export type ControlComponent<T = any> = React.FC<ControlProps<T>>;
+
+export type ControlsStore = {
+  icons: Record<string, React.ComponentType>;
+  controls: Record<string, React.FC<ControlProps>>;
+  defaultControl: React.FC<ControlProps>;
+  registerControl: (name: string, control: React.FC<ControlProps>) => void;
+};
+
+export const controlsStoreFactory = () =>
+  create<ControlsStore>((set) => ({
+    // store the component references (not instantiated elements)
+    defaultIcon: SelectPoint3d,
+
+    defaultControl: AnyControl,
+    controls: {
+      color: ColorControl,
+      string: StringControl,
+      number: NumberControl,
+      float: NumberControl,
+      integer: NumberControl,
+      boolean: BooleanControl
+    },
+    icons: {
+      color: Droplet,
+      curve: EaseCurveControlPoints,
+      string: Text,
+      boolean: InputOutput,
+      float: Hashtag,
+      integer: Hashtag,
+      object: Cube
+    },
+    registerControl: (name: string, control: React.FC<ControlProps>) =>
+      set((state) => ({
+        controls: {
+          ...state.controls,
+          [name]: control
+        }
+      }))
+  }));

package/src/store/documentation.tsx

@@ -0,0 +1,69 @@
+import { create } from 'zustand';
+import type React from 'react';
+
+/**
+ * Documentation metadata for a node type
+ */
+export type NodeDocumentation = {
+  /** The node type this documentation applies to */
+  type: string;
+  /** Optional icon to display for the node */
+  icon?: React.ReactNode;
+  /** Short description (one line) */
+  shortDescription?: string;
+  /** Tags for categorization and search */
+  tags?: string[];
+  /** Long rich markdown description */
+  markdownDescription?: string;
+};
+
+export type DocumentationStore = {
+  /** Map of node type to documentation */
+  docs: Map<string, NodeDocumentation>;
+  /** Set documentation for a specific node type */
+  setDocumentation: (
+    type: string,
+    doc: Omit<NodeDocumentation, 'type'>
+  ) => void;
+  /** Set documentation for multiple node types at once */
+  setMultipleDocumentation: (docs: NodeDocumentation[]) => void;
+  /** Get documentation for a specific node type */
+  getDocumentation: (type: string) => NodeDocumentation | undefined;
+  /** Clear all documentation */
+  clearDocumentation: () => void;
+  /** Remove documentation for a specific type */
+  removeDocumentation: (type: string) => void;
+};
+
+export const documentationStoreFactory = () => {
+  return create<DocumentationStore>((set, get) => ({
+    docs: new Map(),
+
+    setDocumentation: (type: string, doc: Omit<NodeDocumentation, 'type'>) =>
+      set((state) => {
+        const newDocs = new Map(state.docs);
+        newDocs.set(type, { type, ...doc });
+        return { docs: newDocs };
+      }),
+
+    setMultipleDocumentation: (docs: NodeDocumentation[]) =>
+      set((state) => {
+        const newDocs = new Map(state.docs);
+        for (const doc of docs) {
+          newDocs.set(doc.type, doc);
+        }
+        return { docs: newDocs };
+      }),
+
+    getDocumentation: (type: string) => get().docs.get(type),
+
+    clearDocumentation: () => set({ docs: new Map() }),
+
+    removeDocumentation: (type: string) =>
+      set((state) => {
+        const newDocs = new Map(state.docs);
+        newDocs.delete(type);
+        return { docs: newDocs };
+      })
+  }));
+};

package/src/store/events.tsx

@@ -0,0 +1,116 @@
+import { create } from 'zustand';
+import type {
+  CustomEventJSON,
+  CustomEventParameterJSON
+} from '@kiberon-labs/behave-graph';
+export type ExtendedCustomEventJSON = CustomEventJSON & {
+  readonly?: boolean;
+};
+
+export type EventsStore = {
+  customEvents: Record<string, ExtendedCustomEventJSON>;
+  setCustomEvents: (
+    customEvents: Record<string, ExtendedCustomEventJSON>
+  ) => void;
+  getCustomEvents: () => ExtendedCustomEventJSON[];
+  addCustomEvent: (customEvent: ExtendedCustomEventJSON) => void;
+  removeCustomEvent: (id: string) => void;
+
+  addParameter: (
+    eventId: string,
+    parameter?: Partial<CustomEventParameterJSON>
+  ) => void;
+  updateParameter: (
+    eventId: string,
+    index: number,
+    patch: Partial<CustomEventParameterJSON>
+  ) => void;
+  removeParameter: (eventId: string, index: number) => void;
+};
+
+export const eventsStoreFactory = () =>
+  create<EventsStore>((set, get) => ({
+    customEvents: {},
+    setCustomEvents: (customEvents) => {
+      set({ customEvents });
+    },
+    getCustomEvents: () => Object.values(get().customEvents ?? {}),
+
+    addCustomEvent: (customEvent) => {
+      set((t) => ({
+        customEvents: { ...t.customEvents, [customEvent.id]: customEvent }
+      }));
+    },
+
+    removeCustomEvent: (id) => {
+      const current = get().customEvents ?? {};
+      const next = { ...current };
+      delete next[String(id)];
+
+      set({ customEvents: next });
+    },
+    addParameter: (eventId, parameter) => {
+      const current = get().customEvents;
+
+      const newEvent = current[eventId];
+      if (!newEvent) return;
+
+      const withUpdated = {
+        ...newEvent,
+        parameters: [
+          ...((newEvent.parameters ?? []) as CustomEventParameterJSON[]),
+          {
+            name: parameter?.name ? String(parameter.name) : 'param',
+            valueTypeName: parameter?.valueTypeName
+              ? String(parameter.valueTypeName)
+              : 'string',
+            defaultValue: parameter?.defaultValue
+          }
+        ]
+      } as CustomEventJSON;
+      set({
+        customEvents: {
+          ...current,
+          [eventId]: withUpdated
+        }
+      });
+    },
+
+    updateParameter: (eventId, index, patch) => {
+      const current = get().customEvents;
+
+      const ev = current[eventId];
+      if (!ev) return;
+
+      set({
+        customEvents: {
+          ...current,
+          [eventId]: {
+            ...ev,
+            parameters: ev.parameters?.map((param, i) => {
+              if (i !== index) return param;
+
+              return { ...param, ...patch };
+            })
+          }
+        }
+      });
+    },
+
+    removeParameter: (eventId, index) => {
+      const current = get().customEvents;
+
+      const ev = current[eventId];
+      if (!ev) return;
+
+      set({
+        customEvents: {
+          ...current,
+          [eventId]: {
+            ...ev,
+            parameters: ev.parameters?.filter((_, i) => i !== index) ?? []
+          }
+        }
+      });
+    }
+  }));

package/src/store/flow.tsx

@@ -0,0 +1,245 @@
+import { CustomEdge } from '@/components/edges';
+import type { System } from '@/system';
+import { behaveToFlow } from '@/transformers/behaveToFlow';
+import { flowToBehave } from '@/transformers/flowToBehave';
+import { autoLayout } from '@/util/autoLayout';
+import { hasPositionMetaData } from '@/util/hasPositionMetaData';
+import type { GraphJSON } from '@kiberon-labs/behave-graph';
+import {
+  applyEdgeChanges,
+  type Edge,
+  type Node,
+  type EdgeChange,
+  type NodeChange,
+  applyNodeChanges as nativeNodeChanges,
+  type EdgeProps,
+  type NodeProps
+} from 'reactflow';
+import { create } from 'zustand';
+import { nonDeletable } from '@/annotations';
+import GroupNode from '@/components/nodes/group';
+import { CommentNode } from '@/components/nodes/comment/comment';
+import { BehaveNode } from '@/components/nodes/behave';
+
+export type FlowStore = {
+  graphJson: GraphJSON | null;
+  setGraph: (graph: GraphJSON, options?: { skipLayout?: boolean }) => void;
+  getGraph: () => GraphJSON;
+  nodeTypes: Record<string, React.ComponentType<NodeProps>>;
+  edgeTypes: Record<string, React.ComponentType<EdgeProps>>;
+  invalidateCache: () => void;
+  registerNodeType: (
+    type: string,
+    component: React.ComponentType<NodeProps>
+  ) => void;
+  registerEdgeType: (
+    type: string,
+    component: React.ComponentType<EdgeProps>
+  ) => void;
+};
+
+// const specJson = useStore(sys.specStore, (s) => s.specs);
+// const [customNodeTypes, setCustomNodeTypes] = useState<NodeTypes>();
+// useEffect(() => {
+//   if (!specJson) return;
+//   const customNodeTypes: Record<
+//     AnyNodeType,
+//     React.ComponentType<any>
+//   > = getCustomNodeTypes(specJson);
+
+//   customNodeTypes['commentNode'] = CommentNode;
+//   customNodeTypes['group'] = GroupNode;
+//   // customNodeTypes['behaveNode:ai'] = AINode;
+
+//   setCustomNodeTypes(customNodeTypes);
+// }, [specJson]);
+
+export const flowStoreFactory = (system: System) => {
+  const flowStore = create<FlowStore>((set, get) => ({
+    graphJson: null,
+    nodeTypes: {
+      group: GroupNode,
+      commentNode: CommentNode,
+      behaveNode: BehaveNode
+    },
+    invalidateCache: () => set({ graphJson: null }),
+    getGraph: () => {
+      const cached = get().graphJson;
+      if (cached) {
+        return cached;
+      }
+
+      const nodes = system.nodeStore.getState().nodes;
+      const edges = system.edgeStore.getState().edges;
+      const _variables = system.variableStore.getState().variables;
+      const specs = system.specStore.getState().specs;
+
+      const computed = flowToBehave(system, nodes, edges, specs);
+
+      set({ graphJson: computed });
+      return computed;
+    },
+
+    setGraph: (graphJson: GraphJSON, options?: { skipLayout?: boolean }) => {
+      system.eventsStore
+        .getState()
+        .setCustomEvents(
+          Object.fromEntries(
+            (graphJson.customEvents ?? []).map((evt) => [evt.id, evt])
+          )
+        );
+
+      // Parse variables from JSON directly (no need to instantiate graph)
+      const variables: Record<string, any> = {};
+      if (graphJson.variables) {
+        graphJson.variables.forEach((varJson) => {
+          const valueType =
+            system.registry.getState().values[varJson.valueTypeName];
+          const initialValue = valueType?.deserialize
+            ? valueType.deserialize(varJson.initialValue)
+            : varJson.initialValue;
+
+          variables[varJson.id] = {
+            id: varJson.id,
+            name: varJson.name,
+            valueTypeName: varJson.valueTypeName,
+            initialValue
+          };
+        });
+      }
+
+      // Only convert and set nodes/edges if not skipping layout
+      // (when loading UIGraphJSON, nodes/edges are already set by deseralize)
+      if (!options?.skipLayout) {
+        const [nodes, edges] = behaveToFlow(graphJson);
+
+        if (!hasPositionMetaData(graphJson)) {
+          autoLayout(nodes, edges);
+        }
+        system.nodeStore.getState().setNodes(nodes);
+        system.edgeStore.getState().setEdges(edges);
+      }
+
+      // custom events stored in system.eventsStore
+      system.variableStore.getState().setVariables(variables);
+      get().invalidateCache();
+    },
+    edgeTypes: {
+      default: CustomEdge as React.ComponentType<EdgeProps>
+    },
+
+    registerNodeType(type: string, component: React.ComponentType<NodeProps>) {
+      set((state) => ({
+        nodeTypes: {
+          ...state.nodeTypes,
+          [type]: component
+        }
+      }));
+    },
+    registerEdgeType(type: string, component: React.ComponentType<EdgeProps>) {
+      set((state) => ({
+        edgeTypes: {
+          ...state.edgeTypes,
+          [type]: component
+        }
+      }));
+    }
+  }));
+
+  system.nodeStore.subscribe(() => {
+    flowStore.getState().invalidateCache();
+  });
+
+  system.eventsStore.subscribe(() => {
+    flowStore.getState().invalidateCache();
+  });
+
+  return flowStore;
+};
+
+export type NodeStore = {
+  nodes: Node[];
+  addNode: (node: Node) => void;
+  setNodes: (nodes: Node[] | ((existing: Node[]) => Node[])) => void;
+  clearNodes: () => void;
+  applyNodeChanges: (changes: NodeChange[]) => void;
+};
+
+export const nodeStoreFactory = (system: System) =>
+  create<NodeStore>((set) => ({
+    nodes: [],
+    addNode(node) {
+      set((x) => ({ nodes: [...x.nodes, node] }));
+      system.pubsub.publish('node:added', node);
+    },
+    applyNodeChanges(changes: NodeChange[]) {
+      set((p) => {
+        // Filter out remove changes for nodes with nonDeletable annotation
+        const filteredChanges = changes.filter((change) => {
+          if (change.type === 'remove') {
+            const node = p.nodes.find((n) => n.id === change.id);
+            if (node?.data?.metadata?.[nonDeletable]) {
+              return false;
+            }
+            // Publish nodeRemoved event for deletable nodes
+            if (node) {
+              system.pubsub.publish('node:removed', node);
+            }
+          }
+          return true;
+        });
+        return {
+          nodes: nativeNodeChanges(filteredChanges, p.nodes)
+        };
+      });
+    },
+    setNodes(nodes) {
+      set((p) => ({
+        nodes: typeof nodes === 'function' ? nodes(p.nodes) : nodes
+      }));
+    },
+    clearNodes() {
+      set(() => ({ nodes: [] }));
+    }
+  }));
+
+export type EdgeStore = {
+  edges: Edge[];
+  addEdge: (edge: Edge) => void;
+  setEdges: (edges: Edge[]) => void;
+  clearEdges: () => void;
+  applyEdgeChanges: (changes: EdgeChange[]) => void;
+};
+
+export const edgeStoreFactory = (_system: System) =>
+  create<EdgeStore>((set) => ({
+    edges: [],
+
+    addEdge(edge) {
+      set((x) => ({ edges: [...x.edges, edge] }));
+    },
+    applyEdgeChanges(changes: EdgeChange[]) {
+      set((p) => {
+        // Publish events for edge removals
+        changes.forEach((change) => {
+          if (change.type === 'remove') {
+            const edge = p.edges.find((e) => e.id === change.id);
+            if (edge) {
+              _system.pubsub.publish('edge:removed', edge);
+            }
+          }
+        });
+        return {
+          edges: applyEdgeChanges(changes, p.edges)
+        };
+      });
+    },
+
+    setEdges(edges) {
+      set(() => ({ edges }));
+    },
+
+    clearEdges() {
+      set(() => ({ edges: [] }));
+    }
+  }));

package/src/store/graphRunnerClient.ts

@@ -0,0 +1,110 @@
+import { createStore } from 'zustand/vanilla';
+import type { GraphRunnerClient } from '../plugin/graphrunner/client';
+import type {
+  AuthCredentials,
+  GraphRunnerCapabilities,
+  ServerVariable,
+  ServerEvent
+} from '../plugin/graphrunner/types';
+import type { NodeSpecJSON } from '@kiberon-labs/behave-graph';
+
+export interface ConnectionConfig {
+  url: string;
+  auth: AuthCredentials;
+  autoReconnect: boolean;
+}
+
+export interface ConnectionInfo {
+  serverId: string | null;
+  userId: string | null;
+  sessionId: string | null;
+  authenticated: boolean;
+  capabilities: GraphRunnerCapabilities | null;
+}
+
+export interface GraphRunnerClientStore {
+  // Connection state
+  connectionState:
+    | 'disconnected'
+    | 'connecting'
+    | 'authenticating'
+    | 'connected';
+  connectionConfig: ConnectionConfig;
+  connectionInfo: ConnectionInfo;
+  error: string | null;
+
+  // Client instance
+  client: GraphRunnerClient | null;
+
+  // Server metadata
+  serverVariables: ServerVariable[];
+  serverEvents: ServerEvent[];
+  nodeTypes: NodeSpecJSON[];
+
+  // Actions
+  setConnectionConfig: (config: Partial<ConnectionConfig>) => void;
+  setClient: (client: GraphRunnerClient | null) => void;
+  setConnectionState: (
+    state: 'disconnected' | 'connecting' | 'authenticating' | 'connected'
+  ) => void;
+  setConnectionInfo: (info: Partial<ConnectionInfo>) => void;
+  setError: (error: string | null) => void;
+  setServerVariables: (variables: ServerVariable[]) => void;
+  setServerEvents: (events: ServerEvent[]) => void;
+  setNodeTypes: (nodeTypes: NodeSpecJSON[]) => void;
+  clearServerMetadata: () => void;
+}
+
+export const graphRunnerClientStoreFactory = () => {
+  return createStore<GraphRunnerClientStore>((set) => ({
+    // Initial state
+    connectionState: 'disconnected',
+    connectionConfig: {
+      url: '',
+      auth: { type: 'none' },
+      autoReconnect: true
+    },
+    connectionInfo: {
+      serverId: null,
+      userId: null,
+      sessionId: null,
+      authenticated: false,
+      capabilities: null
+    },
+    error: null,
+    client: null,
+    serverVariables: [],
+    serverEvents: [],
+    nodeTypes: [],
+
+    // Actions
+    setConnectionConfig: (config) =>
+      set((state) => ({
+        connectionConfig: { ...state.connectionConfig, ...config }
+      })),
+
+    setClient: (client) => set({ client }),
+
+    setConnectionState: (connectionState) => set({ connectionState }),
+
+    setConnectionInfo: (info) =>
+      set((state) => ({
+        connectionInfo: { ...state.connectionInfo, ...info }
+      })),
+
+    setError: (error) => set({ error }),
+
+    setServerVariables: (serverVariables) => set({ serverVariables }),
+
+    setServerEvents: (serverEvents) => set({ serverEvents }),
+
+    setNodeTypes: (nodeTypes) => set({ nodeTypes }),
+
+    clearServerMetadata: () =>
+      set({
+        serverVariables: [],
+        serverEvents: [],
+        nodeTypes: []
+      })
+  }));
+};