@genfeedai/workflow-ui 0.1.0

package/dist/chunk-FT64PCUP.mjs

@@ -0,0 +1,533 @@
+import { Button } from './chunk-7SKSRSS7.mjs';
+import { extractEnumValues, supportsImageInput, validateRequiredSchemaFields, CONNECTION_FIELDS, getSchemaDefaults, getImageDimensions, getVideoMetadata } from './chunk-EFXQT23N.mjs';
+import { useExecutionStore } from './chunk-CSUBLSKZ.mjs';
+import { require_dist, useWorkflowStore } from './chunk-BJ3R5R32.mjs';
+import { useWorkflowUIConfig } from './chunk-FT33LFII.mjs';
+import { __toESM } from './chunk-AC6TWLRT.mjs';
+import { useMemo, useCallback, useRef, useEffect, useState } from 'react';
+import { ChevronDown, Expand, Square, Play } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useShallow } from 'zustand/react/shallow';
+
+function useAIGenNode({
+  nodeId,
+  selectedModel,
+  schemaParams
+}) {
+  const updateNodeData = useWorkflowStore((state) => state.updateNodeData);
+  const schemaProperties = useMemo(() => {
+    const schema = selectedModel?.inputSchema;
+    return schema?.properties;
+  }, [selectedModel?.inputSchema]);
+  const enumValues = useMemo(
+    () => extractEnumValues(
+      selectedModel?.componentSchemas
+    ),
+    [selectedModel?.componentSchemas]
+  );
+  const modelSupportsImageInput = useMemo(
+    () => supportsImageInput(selectedModel?.inputSchema),
+    [selectedModel?.inputSchema]
+  );
+  const componentSchemas = selectedModel?.componentSchemas;
+  const handleSchemaParamChange = useCallback(
+    (key, value) => {
+      const currentNode = useWorkflowStore.getState().getNodeById(nodeId);
+      const currentData = currentNode?.data;
+      updateNodeData(nodeId, {
+        schemaParams: {
+          ...currentData?.schemaParams ?? {},
+          [key]: value
+        }
+      });
+    },
+    [nodeId, updateNodeData]
+  );
+  return {
+    schemaProperties,
+    enumValues,
+    modelSupportsImageInput,
+    handleSchemaParamChange,
+    componentSchemas
+  };
+}
+function useAIGenNodeHeader({
+  modelDisplayName,
+  isProcessing,
+  canGenerate,
+  hasOutput,
+  onModelBrowse,
+  onGenerate,
+  onStop,
+  onExpand
+}) {
+  const titleElement = useMemo(
+    () => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: `flex flex-1 items-center gap-1 text-sm font-medium text-left text-foreground ${isProcessing ? "opacity-50 cursor-default" : "hover:text-foreground/80 cursor-pointer"}`,
+        onClick: () => !isProcessing && onModelBrowse(),
+        title: "Browse models",
+        disabled: isProcessing,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: modelDisplayName }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 shrink-0" })
+        ]
+      }
+    ),
+    [modelDisplayName, isProcessing, onModelBrowse]
+  );
+  const headerActions = useMemo(
+    () => /* @__PURE__ */ jsxs(Fragment, { children: [
+      hasOutput && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onExpand, title: "Expand preview", children: /* @__PURE__ */ jsx(Expand, { className: "h-3 w-3" }) }),
+      isProcessing ? /* @__PURE__ */ jsxs(Button, { variant: "destructive", size: "sm", onClick: onStop, children: [
+        /* @__PURE__ */ jsx(Square, { className: "h-4 w-4 fill-current" }),
+        "Generating"
+      ] }) : /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: canGenerate ? "default" : "secondary",
+          size: "sm",
+          onClick: onGenerate,
+          disabled: !canGenerate,
+          children: [
+            /* @__PURE__ */ jsx(Play, { className: "h-4 w-4 fill-current" }),
+            "Generate"
+          ]
+        }
+      )
+    ] }),
+    [hasOutput, isProcessing, canGenerate, onGenerate, onStop, onExpand]
+  );
+  return { titleElement, headerActions };
+}
+function useAutoLoadModelSchema({
+  currentModel,
+  selectedModel,
+  modelIdMap,
+  onModelSelect
+}) {
+  const { modelSchema } = useWorkflowUIConfig();
+  const hasAttemptedSchemaLoad = useRef(false);
+  useEffect(() => {
+    if (hasAttemptedSchemaLoad.current || selectedModel || !currentModel || !modelSchema) {
+      return;
+    }
+    const modelId = modelIdMap[currentModel];
+    if (!modelId) return;
+    const controller = new AbortController();
+    let isCancelled = false;
+    const loadSchema = async () => {
+      try {
+        const model = await modelSchema.fetchModelSchema(modelId, controller.signal);
+        if (model && !isCancelled) {
+          hasAttemptedSchemaLoad.current = true;
+          onModelSelect(model);
+        }
+      } catch {
+      }
+    };
+    loadSchema();
+    return () => {
+      isCancelled = true;
+      controller.abort();
+    };
+  }, [currentModel, selectedModel, modelIdMap, onModelSelect, modelSchema]);
+}
+
+// src/hooks/useRequiredInputs.ts
+var import_types = __toESM(require_dist());
+function useRequiredInputs(nodeId, nodeType) {
+  const edges = useWorkflowStore((state) => state.edges);
+  return useMemo(() => {
+    const nodeDef = import_types.NODE_DEFINITIONS[nodeType];
+    if (!nodeDef) {
+      return { hasRequiredInputs: true, missingInputs: [], connectionStatus: /* @__PURE__ */ new Map() };
+    }
+    const incomingEdges = edges.filter((e) => e.target === nodeId);
+    const connectedHandles = new Set(incomingEdges.map((e) => e.targetHandle).filter(Boolean));
+    const connectionStatus = /* @__PURE__ */ new Map();
+    const missingInputs = [];
+    for (const input of nodeDef.inputs) {
+      const isConnected = connectedHandles.has(input.id);
+      connectionStatus.set(input.id, isConnected);
+      if (input.required && !isConnected) {
+        missingInputs.push(input.id);
+      }
+    }
+    return {
+      hasRequiredInputs: missingInputs.length === 0,
+      missingInputs,
+      connectionStatus
+    };
+  }, [nodeId, nodeType, edges]);
+}
+
+// src/hooks/useCanGenerate.ts
+var import_types2 = __toESM(require_dist());
+function extractOutputValue(node, handleType) {
+  const data = node.data;
+  if (handleType === "text") {
+    return data.outputText ?? data.prompt;
+  } else if (handleType === "image") {
+    return data.outputImage ?? data.image;
+  } else if (handleType === "video") {
+    return data.outputVideo ?? data.video;
+  } else if (handleType === "audio") {
+    return data.outputAudio ?? data.audio;
+  }
+  return void 0;
+}
+function useCanGenerate({
+  nodeId,
+  nodeType,
+  inputSchema,
+  schemaParams
+}) {
+  const { hasRequiredInputs, missingInputs } = useRequiredInputs(nodeId, nodeType);
+  const getConnectedInputs = useWorkflowStore((state) => state.getConnectedInputs);
+  const incomingEdgesSelector = useCallback(
+    (state) => state.edges.filter((e) => e.target === nodeId),
+    [nodeId]
+  );
+  const incomingEdges = useWorkflowStore(useShallow(incomingEdgesSelector));
+  const connectedOutputsSelector = useCallback(
+    (state) => {
+      const outputs = {};
+      for (const edge of incomingEdges) {
+        const sourceNode = state.nodes.find((n) => n.id === edge.source);
+        if (sourceNode) {
+          outputs[edge.source] = extractOutputValue(sourceNode, edge.sourceHandle);
+        }
+      }
+      return outputs;
+    },
+    [incomingEdges]
+  );
+  useWorkflowStore(useShallow(connectedOutputsSelector));
+  return useMemo(() => {
+    const missingItems = [];
+    for (const inputId of missingInputs) {
+      missingItems.push({
+        type: "connection",
+        field: inputId,
+        message: `Missing connection: ${inputId}`
+      });
+    }
+    const connectedInputs = getConnectedInputs(nodeId);
+    const nodeDef = import_types2.NODE_DEFINITIONS[nodeType];
+    const requiredHandleIds = new Set(
+      nodeDef?.inputs.filter((h) => h.required).map((h) => h.id) ?? []
+    );
+    let hasRequiredData = true;
+    let hasConnectedData = true;
+    if (hasRequiredInputs) {
+      for (const edge of incomingEdges) {
+        const handleId = edge.targetHandle;
+        if (!handleId) continue;
+        if (!connectedInputs.has(handleId)) {
+          hasConnectedData = false;
+          if (requiredHandleIds.has(handleId)) {
+            hasRequiredData = false;
+          }
+        }
+      }
+    }
+    const schemaValidation = validateRequiredSchemaFields(
+      inputSchema,
+      schemaParams ?? {},
+      CONNECTION_FIELDS
+    );
+    for (const field of schemaValidation.missingFields) {
+      missingItems.push({
+        type: "schema",
+        field,
+        message: `Required field: ${field}`
+      });
+    }
+    const canGenerate = hasRequiredInputs && hasRequiredData && schemaValidation.isValid;
+    return {
+      canGenerate,
+      missingItems,
+      hasRequiredConnections: hasRequiredInputs,
+      hasConnectedData,
+      hasRequiredSchemaFields: schemaValidation.isValid
+    };
+  }, [
+    nodeId,
+    nodeType,
+    hasRequiredInputs,
+    missingInputs,
+    inputSchema,
+    schemaParams,
+    getConnectedInputs,
+    incomingEdges
+  ]);
+}
+function useModelSelection({ nodeId, modelMap, fallbackModel }) {
+  const updateNodeData = useWorkflowStore((state) => state.updateNodeData);
+  const handleModelSelect = useCallback(
+    (model) => {
+      const internalModel = modelMap[model.id] ?? fallbackModel;
+      const schemaDefaults = getSchemaDefaults(model.inputSchema);
+      const selectedModel = {
+        provider: model.provider,
+        modelId: model.id,
+        displayName: model.displayName,
+        inputSchema: model.inputSchema,
+        componentSchemas: model.componentSchemas
+      };
+      updateNodeData(nodeId, {
+        model: internalModel,
+        provider: model.provider,
+        selectedModel,
+        schemaParams: schemaDefaults
+      });
+    },
+    [nodeId, modelMap, fallbackModel, updateNodeData]
+  );
+  return { handleModelSelect };
+}
+
+// src/hooks/useNodeExecution.ts
+var import_types3 = __toESM(require_dist());
+function useNodeExecution(nodeId) {
+  const updateNodeData = useWorkflowStore((state) => state.updateNodeData);
+  const executeNode = useExecutionStore((state) => state.executeNode);
+  const stopNodeExecution = useExecutionStore((state) => state.stopNodeExecution);
+  const handleGenerate = useCallback(() => {
+    updateNodeData(nodeId, { status: import_types3.NodeStatusEnum.PROCESSING });
+    executeNode(nodeId);
+  }, [nodeId, executeNode, updateNodeData]);
+  const handleStop = useCallback(() => {
+    stopNodeExecution(nodeId);
+  }, [nodeId, stopNodeExecution]);
+  return { handleGenerate, handleStop };
+}
+function readFileAsBase64(file, nodeId, getMetadata, buildUploadUpdate, updateNodeData, onComplete) {
+  const reader = new FileReader();
+  reader.onload = async (event) => {
+    const dataUrl = event.target?.result;
+    const metadata = await getMetadata(dataUrl);
+    updateNodeData(nodeId, buildUploadUpdate(dataUrl, file.name, metadata));
+  };
+  reader.readAsDataURL(file);
+}
+function useMediaUpload({
+  nodeId,
+  mediaType,
+  initialUrl = "",
+  getMetadata,
+  buildUploadUpdate,
+  buildUrlUpdate,
+  buildRemoveUpdate
+}) {
+  const updateNodeData = useWorkflowStore((state) => state.updateNodeData);
+  const workflowId = useWorkflowStore((state) => state.workflowId);
+  const { fileUpload } = useWorkflowUIConfig();
+  const fileInputRef = useRef(null);
+  const [showUrlInput, setShowUrlInput] = useState(false);
+  const [urlValue, setUrlValue] = useState(initialUrl);
+  const [isUploading, setIsUploading] = useState(false);
+  const getMetadataRef = useRef(getMetadata);
+  getMetadataRef.current = getMetadata;
+  const buildUploadUpdateRef = useRef(buildUploadUpdate);
+  buildUploadUpdateRef.current = buildUploadUpdate;
+  const buildUrlUpdateRef = useRef(buildUrlUpdate);
+  buildUrlUpdateRef.current = buildUrlUpdate;
+  const buildRemoveUpdateRef = useRef(buildRemoveUpdate);
+  buildRemoveUpdateRef.current = buildRemoveUpdate;
+  const handleFileSelect = useCallback(
+    async (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      if (workflowId && fileUpload) {
+        setIsUploading(true);
+        try {
+          const result = await fileUpload.uploadFile(
+            `/files/workflows/${workflowId}/input/${mediaType}`,
+            file
+          );
+          const metadata = await getMetadataRef.current(result.url);
+          updateNodeData(
+            nodeId,
+            buildUploadUpdateRef.current(result.url, result.filename, metadata)
+          );
+        } catch (_error) {
+          readFileAsBase64(
+            file,
+            nodeId,
+            getMetadataRef.current,
+            buildUploadUpdateRef.current,
+            updateNodeData
+          );
+        } finally {
+          setIsUploading(false);
+        }
+      } else {
+        readFileAsBase64(
+          file,
+          nodeId,
+          getMetadataRef.current,
+          buildUploadUpdateRef.current,
+          updateNodeData
+        );
+      }
+    },
+    [nodeId, updateNodeData, workflowId, mediaType, fileUpload]
+  );
+  const handleRemove = useCallback(() => {
+    updateNodeData(nodeId, buildRemoveUpdateRef.current());
+    setUrlValue("");
+  }, [nodeId, updateNodeData]);
+  const handleUrlSubmit = useCallback(async () => {
+    if (!urlValue.trim()) return;
+    try {
+      let metadata;
+      if (mediaType === "image") {
+        metadata = await getImageDimensions(urlValue);
+      } else {
+        const meta = await getVideoMetadata(urlValue);
+        metadata = {
+          duration: meta.duration,
+          width: meta.dimensions.width,
+          height: meta.dimensions.height
+        };
+      }
+      updateNodeData(nodeId, buildUrlUpdateRef.current(urlValue, metadata));
+    } catch (_error) {
+      updateNodeData(nodeId, buildUrlUpdateRef.current(urlValue, null));
+    }
+    setShowUrlInput(false);
+  }, [nodeId, updateNodeData, urlValue, mediaType]);
+  const handleUrlKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        handleUrlSubmit();
+      } else if (e.key === "Escape") {
+        setShowUrlInput(false);
+        setUrlValue(initialUrl);
+      }
+    },
+    [handleUrlSubmit, initialUrl]
+  );
+  return {
+    fileInputRef,
+    showUrlInput,
+    setShowUrlInput,
+    urlValue,
+    setUrlValue,
+    isUploading,
+    handleFileSelect,
+    handleRemove,
+    handleUrlSubmit,
+    handleUrlKeyDown
+  };
+}
+function usePromptAutocomplete({
+  availableVariables,
+  textareaRef,
+  localTemplate,
+  setLocalTemplate,
+  onTemplateCommit
+}) {
+  const [showAutocomplete, setShowAutocomplete] = useState(false);
+  const [autocompletePosition, setAutocompletePosition] = useState({ top: 0, left: 0 });
+  const [autocompleteFilter, setAutocompleteFilter] = useState("");
+  const [selectedAutocompleteIndex, setSelectedAutocompleteIndex] = useState(0);
+  const filteredAutocompleteVars = useMemo(() => {
+    return availableVariables.filter(
+      (v) => v.name.toLowerCase().includes(autocompleteFilter.toLowerCase())
+    );
+  }, [availableVariables, autocompleteFilter]);
+  const handleAutocompleteSelect = useCallback(
+    (varName) => {
+      if (!textareaRef.current) return;
+      const cursorPos = textareaRef.current.selectionStart;
+      const textBeforeCursor = localTemplate.slice(0, cursorPos);
+      const textAfterCursor = localTemplate.slice(cursorPos);
+      const match = textBeforeCursor.match(/@(\w*)$/);
+      if (!match) return;
+      const atPosition = cursorPos - match[0].length;
+      const newTemplate = `${localTemplate.slice(0, atPosition)}@${varName}${textAfterCursor}`;
+      setLocalTemplate(newTemplate);
+      onTemplateCommit?.(newTemplate);
+      setShowAutocomplete(false);
+      const newCursorPos = atPosition + varName.length + 1;
+      setTimeout(() => {
+        if (textareaRef.current) {
+          textareaRef.current.focus();
+          textareaRef.current.setSelectionRange(newCursorPos, newCursorPos);
+        }
+      }, 0);
+    },
+    [localTemplate, textareaRef, setLocalTemplate, onTemplateCommit]
+  );
+  const handleChange = useCallback(
+    (e) => {
+      const newValue = e.target.value;
+      setLocalTemplate(newValue);
+      const cursorPos = e.target.selectionStart;
+      const textBeforeCursor = newValue.slice(0, cursorPos);
+      const match = textBeforeCursor.match(/@(\w*)$/);
+      if (match && textareaRef.current) {
+        setAutocompleteFilter(match[1] || "");
+        setSelectedAutocompleteIndex(0);
+        const lineHeight = 20;
+        const lines = textBeforeCursor.split("\n");
+        const currentLine = lines.length - 1;
+        const top = currentLine * lineHeight + 30;
+        const left = 10;
+        setAutocompletePosition({ top, left });
+        setShowAutocomplete(true);
+      } else {
+        setShowAutocomplete(false);
+      }
+    },
+    [textareaRef, setLocalTemplate]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (!showAutocomplete) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSelectedAutocompleteIndex((prev) => (prev + 1) % filteredAutocompleteVars.length);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSelectedAutocompleteIndex(
+          (prev) => (prev - 1 + filteredAutocompleteVars.length) % filteredAutocompleteVars.length
+        );
+      } else if (e.key === "Enter" || e.key === "Tab") {
+        if (filteredAutocompleteVars.length > 0) {
+          e.preventDefault();
+          handleAutocompleteSelect(filteredAutocompleteVars[selectedAutocompleteIndex].name);
+        }
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        setShowAutocomplete(false);
+      }
+    },
+    [
+      showAutocomplete,
+      filteredAutocompleteVars,
+      selectedAutocompleteIndex,
+      handleAutocompleteSelect
+    ]
+  );
+  const closeAutocomplete = useCallback(() => {
+    setShowAutocomplete(false);
+  }, []);
+  return {
+    showAutocomplete,
+    autocompletePosition,
+    filteredAutocompleteVars,
+    selectedAutocompleteIndex,
+    handleChange,
+    handleKeyDown,
+    handleAutocompleteSelect,
+    closeAutocomplete
+  };
+}
+
+export { useAIGenNode, useAIGenNodeHeader, useAutoLoadModelSchema, useCanGenerate, useMediaUpload, useModelSelection, useNodeExecution, usePromptAutocomplete, useRequiredInputs };