@enumura/chatbot-flow-editor/dist/assets/EditOptionDialog-Bo6TMFaf.js

Visual chatbot flow editor - Development tool for creating conversational flows

import { j as jsxRuntimeExports } from "./index-BV-DVq2p.js";
import { useState, useEffect } from "react";
import { S as SimpleDialog } from "./Dialog-C2qkkdLN.js";
const EditOptionDialog = ({
  open,
  onClose,
  flow,
  initialLabel = "",
  initialNextId = "",
  isEditing,
  onSaveOption
}) => {
  const [optionLabel, setOptionLabel] = useState(initialLabel);
  const [nextNodeId, setNextNodeId] = useState(initialNextId);
  const [error, setError] = useState(null);
  useEffect(() => {
    if (open) {
      setOptionLabel(initialLabel);
      setNextNodeId(initialNextId);
      setError(null);
    }
  }, [open, initialLabel, initialNextId]);
  const validateAndSubmit = () => {
    if (!optionLabel.trim()) {
      setError("Please enter an option label");
      return;
    }
    if (!nextNodeId) {
      setError("Please enter a node ID");
      return;
    }
    const targetNode = flow.find(
      (node) => node.id.toString() === nextNodeId || node.hierarchyPath === nextNodeId
    );
    if (!targetNode) {
      setError("The specified node ID does not exist");
      return;
    }
    onSaveOption(optionLabel, targetNode.id);
    setError(null);
  };
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    SimpleDialog,
    {
      open,
      onClose,
      title: isEditing ? "Edit Option" : "Add Option",
      footer: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          "button",
          {
            className: "px-3 py-1 border rounded-md",
            onClick: onClose,
            children: "Cancel"
          }
        ),
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          "button",
          {
            className: "px-3 py-1 bg-blue-600 text-white rounded-md",
            onClick: validateAndSubmit,
            children: "Save"
          }
        )
      ] }),
      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
        error && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-red-50 text-red-600 p-2 rounded text-sm", children: error }),
        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium", children: "Option Label" }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            "input",
            {
              className: "w-full px-3 py-2 border rounded-md",
              value: optionLabel,
              onChange: (e) => setOptionLabel(e.target.value),
              placeholder: "Enter option text",
              autoFocus: true
            }
          )
        ] }),
        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium", children: "Next Node ID" }),
          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex space-x-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
            "input",
            {
              className: "w-full px-3 py-2 border rounded-md",
              type: "text",
              value: nextNodeId,
              onChange: (e) => setNextNodeId(e.target.value),
              placeholder: "Enter ID of the next node to display (e.g., 1-1-1)"
            }
          ) })
        ] })
      ] })
    }
  );
};
export {
  EditOptionDialog as default
};