@enumura/chatbot-flow-editor/dist/assets/ImportDialog-BhTRO8uN.js

Visual chatbot flow editor - Development tool for creating conversational flows

import { j as jsxRuntimeExports, p as parseImportedJson } from "./index-BV-DVq2p.js";
import { useState, useRef } from "react";
import { S as SimpleDialog } from "./Dialog-C2qkkdLN.js";
const ImportDialog = ({ open, onClose, onImport }) => {
  const [importJson, setImportJson] = useState("");
  const [error, setError] = useState(null);
  const fileInputRef = useRef(null);
  const handleFileChange = (event) => {
    const file = event.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        if (e.target?.result) {
          setImportJson(e.target.result);
          setError(null);
        }
      };
      reader.onerror = () => {
        setError("Failed to read file");
      };
      reader.readAsText(file);
    }
  };
  const handleImport = () => {
    const parsedFlow = parseImportedJson(importJson);
    if (parsedFlow) {
      onImport(parsedFlow);
      setImportJson("");
      setError(null);
    } else {
      setError("Invalid JSON format. Node array is required.");
    }
  };
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    SimpleDialog,
    {
      open,
      onClose,
      title: "Import JSON",
      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: handleImport,
            disabled: !importJson.trim(),
            children: "Import"
          }
        )
      ] }),
      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.jsx(
          "button",
          {
            className: "px-3 py-2 border rounded-md w-full text-center",
            onClick: () => fileInputRef.current?.click(),
            children: "Select a JSON file"
          }
        ),
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          "input",
          {
            type: "file",
            ref: fileInputRef,
            className: "hidden",
            accept: ".json",
            onChange: handleFileChange
          }
        ),
        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium", children: "Or paste JSON directly" }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            "textarea",
            {
              className: "w-full px-3 py-2 border rounded-md",
              value: importJson,
              onChange: (e) => {
                setImportJson(e.target.value);
                setError(null);
              },
              placeholder: '[{"id":1,"title":"Example","options":[]}]',
              rows: 10
            }
          )
        ] })
      ] })
    }
  );
};
export {
  ImportDialog as default
};