@saltcorn/builder 1.6.0-alpha.9 → 1.6.0-beta.2

package/src/components/Builder.js

@@ -9,12 +9,12 @@ import React, {
   useContext,
   useState,
   Fragment,
-  useRef,
-  memo,
+  useRef
 } from "react";
+import { createPortal } from "react-dom";
 import useTranslation from "../hooks/useTranslation";
 import { Editor, Frame, Element, Selector, useEditor, DefaultEventHandlers } from "@craftjs/core";
-import { Layers, useLayer } from "@craftjs/layers"
+import { Layers } from "@craftjs/layers"
 import { Text } from "./elements/Text";
 import { Field } from "./elements/Field";
 import { JoinField } from "./elements/JoinField";
@@ -49,7 +49,6 @@ import { Link } from "./elements/Link";
 import { View } from "./elements/View";
 import { Container } from "./elements/Container";
 import { Column } from "./elements/Column";
-// import { Layers } from "saltcorn-craft-layers-noeye";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faCopy,
@@ -58,20 +57,22 @@ import {
   faTrashAlt,
   faSave,
   faExclamationTriangle,
-  faPlus,
-  faChevronDown,
-  faChevronUp
+  faPlus
 } from "@fortawesome/free-solid-svg-icons";
 import {
   faCaretSquareLeft,
   faCaretSquareRight,
 } from "@fortawesome/free-regular-svg-icons";
 import { Accordion, ErrorBoundary } from "./elements/utils";
+import { Display, Tablet, Phone } from "react-bootstrap-icons";
 import { InitNewElement, Library, LibraryElem } from "./Library";
 import { RenderNode } from "./RenderNode";
 import { ListColumn } from "./elements/ListColumn";
 import { ListColumns } from "./elements/ListColumns";
+import { Prompt } from "./elements/Prompt";
 import { recursivelyCloneToElems } from "./elements/Clone";
+import { Page } from "./elements/Page";
+import CustomLayer from "./elements/CustomLayer";
 
 const { Provider } = optionsCtx;
 
@@ -92,11 +93,6 @@ const getSelectedNodes = (selected) => {
   return [selected];
 };
 
-const getFirstSelected = (selected) => {
-  const nodes = getSelectedNodes(selected);
-  return nodes.length > 0 ? nodes[0] : null;
-};
-
 /**
  *
  * @returns {div}
@@ -104,7 +100,7 @@ const getFirstSelected = (selected) => {
  * @subcategory components
  * @namespace
  */
-const SettingsPanel = () => {
+const SettingsPanel = ({ isEnlarged, setIsEnlarged }) => {
   const { t } = useTranslation();
   const options = useContext(optionsCtx);
 
@@ -160,6 +156,15 @@ const SettingsPanel = () => {
     const tagName = target.tagName.toLowerCase();
     const hasSelection = selectedCount > 0;
     if ((tagName === "body" || tagName === "button") && hasSelection) {
+      if (!selected && selectedCount > 1 && (keyCode === 8 || keyCode === 46)) {
+        const currentSelected = query.getEvent("selected");
+        const nodeIds = getSelectedNodes(currentSelected)
+          .map((nodeId) => (typeof nodeId === "string" ? nodeId : nodeId?.id))
+          .filter((nodeId) => nodeId && nodeId !== "ROOT");
+        nodeIds.forEach((nodeId) => {
+          try { actions.delete(nodeId); } catch (e) { /* node may already be deleted */ }
+        });
+      }
       if (selected) {
         if ((keyCode === 8 || keyCode === 46) && selected.id === "ROOT") {
           deleteChildren();
@@ -298,6 +303,14 @@ const SettingsPanel = () => {
         actions.history.redo();
       }
     }
+    if ((tagName === "body" || tagName === "button") &&
+        (event.ctrlKey || event.metaKey) && event.keyCode == 65) {
+      event.preventDefault();
+      const rootChildren = query.node("ROOT").childNodes();
+      if (rootChildren.length > 0) {
+        actions.selectNode(rootChildren);
+      }
+    }
   };
   useEffect(() => {
     window.addEventListener("keydown", handleUserKeyPress);
@@ -334,15 +347,181 @@ const SettingsPanel = () => {
     );
   };
 
+  const [generating, setGenerating] = useState(false);
+  const [generateError, setGenerateError] = useState(null);
+
+  // Regenerate modal state
+  const [showRegenerateModal, setShowRegenerateModal] = useState(false);
+  const [regeneratePrompt, setRegeneratePrompt] = useState("");
+  const [regenerating, setRegenerating] = useState(false);
+  const [regenerateError, setRegenerateError] = useState(null);
+
+  const handleRegenerate = async () => {
+    if (!regeneratePrompt.trim() || !selected) return;
+    setRegenerating(true);
+    setRegenerateError(null);
+    try {
+      const selectedNode = query.node(selected.id).get();
+      const existingJson = craftToSaltcorn(
+        JSON.parse(query.serialize()),
+        selected.id
+      );
+      const res = await fetch("/viewedit/copilot-generate-layout", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "CSRF-Token": options.csrfToken,
+          "X-Requested-With": "XMLHttpRequest",
+        },
+        body: JSON.stringify({
+          prompt: regeneratePrompt,
+          mode: options.mode,
+          table: options.tableName,
+          existing: existingJson,
+        }),
+      });
+      const data = await res.json();
+      if (data.error) {
+        setRegenerateError(data.error);
+      } else if (data.layout) {
+        const parentId = selectedNode.data.parent || "ROOT";
+        const siblings = query.node(parentId).childNodes();
+        const sibIx = siblings.findIndex((sib) => sib === selected.id);
+        actions.delete(selected.id);
+        layoutToNodes(data.layout, query, actions, parentId, options, sibIx);
+        setShowRegenerateModal(false);
+        setRegeneratePrompt("");
+      }
+    } catch (err) {
+      setRegenerateError(err.message || "Regeneration failed");
+    } finally {
+      setRegenerating(false);
+    }
+  };
+
+  // Find prompt nodes: check children of selected, or siblings if selected is a Prompt
+  const findPromptContext = () => {
+    if (!selected) return { promptNodes: [], targetParent: null };
+    const isSelectedPrompt = selected.displayName === "Prompt";
+
+    if (isSelectedPrompt && selected.parent) {
+      // Selected node is a Prompt — find all Prompt siblings in same parent
+      try {
+        const siblingIds = query.node(selected.parent).childNodes();
+        const promptIds = siblingIds.filter((id) => {
+          const n = query.node(id).get();
+          return n?.data?.displayName === "Prompt";
+        });
+        return { promptNodes: promptIds, targetParent: selected.parent };
+      } catch {
+        return { promptNodes: [], targetParent: null };
+      }
+    }
+
+    // Selected node is a container — check its direct children
+    if (selected.children && selected.children.length > 0) {
+      const promptIds = selected.children.filter((id) => {
+        try {
+          const n = query.node(id).get();
+          return n?.data?.displayName === "Prompt";
+        } catch {
+          return false;
+        }
+      });
+      if (promptIds.length > 0) {
+        return { promptNodes: promptIds, targetParent: selected.id };
+      }
+    }
+
+    // Check linked nodes (e.g. Card's inner Column)
+    try {
+      const nodeData = query.node(selected.id).get();
+      const linkedNodes = nodeData?.data?.linkedNodes;
+      if (linkedNodes) {
+        for (const linkedId of Object.values(linkedNodes)) {
+          const linkedChildIds = query.node(linkedId).childNodes();
+          const promptIds = linkedChildIds.filter((id) => {
+            try {
+              const n = query.node(id).get();
+              return n?.data?.displayName === "Prompt";
+            } catch {
+              return false;
+            }
+          });
+          if (promptIds.length > 0) {
+            return { promptNodes: promptIds, targetParent: linkedId };
+          }
+        }
+      }
+    } catch {
+      // ignore
+    }
+
+    return { promptNodes: [], targetParent: null };
+  };
+
+  const { promptNodes, targetParent } = selected
+    ? findPromptContext()
+    : { promptNodes: [], targetParent: null };
+  const hasPromptNodes = promptNodes.length > 0;
+
+  const handleGenerate = async () => {
+    setGenerating(true);
+    setGenerateError(null);
+    try {
+      const prompts = promptNodes.map((childId) => {
+        const n = query.node(childId).get();
+        const { promptType, promptText } = n.data.props;
+        return `[${promptType}]: ${promptText}`;
+      });
+      const combinedPrompt = prompts.join("\n");
+
+      const res = await fetch("/viewedit/copilot-generate-layout", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "CSRF-Token": options.csrfToken,
+          "X-Requested-With": "XMLHttpRequest",
+        },
+        body: JSON.stringify({
+          prompt: combinedPrompt,
+          mode: options.mode,
+          table: options.tableName,
+        }),
+      });
+      const data = await res.json();
+      if (data.error) {
+        setGenerateError(data.error);
+      } else if (data.layout) {
+        promptNodes.forEach((id) => actions.delete(id));
+        layoutToNodes(data.layout, query, actions, targetParent, options);
+      }
+    } catch (err) {
+      setGenerateError(err.message || "Generation failed");
+    } finally {
+      setGenerating(false);
+    }
+  };
+
   return (
     <div className="settings-panel card mt-1">
-      <div className="card-header px-2 py-1">
-        {selected && selected.displayName ? (
-          <Fragment>
-            <b>{selected.displayName}</b> settings
-          </Fragment>
-        ) : (
-          t("Settings")
+      <div className="card-header px-2 py-1 d-flex justify-content-between align-items-center">
+        <div>
+          {selected && selected.displayName ? (
+            <Fragment>
+              <b>{selected.displayName}</b> settings
+            </Fragment>
+          ) : (
+            t("Settings")
+          )}
+        </div>
+        {setIsEnlarged && (
+          <FontAwesomeIcon
+            icon={isEnlarged ? faCaretSquareRight : faCaretSquareLeft}
+            className="fa-lg builder-expand-toggle-right"
+            onClick={() => setIsEnlarged(!isEnlarged)}
+            title={isEnlarged ? t("Shrink") : t("Enlarge")}
+          />
         )}
       </div>
       <div className="card-body p-2">
@@ -373,15 +552,76 @@ const SettingsPanel = () => {
             ) : (
               <button
                 title={t("Duplicate element with its children")}
-                className="btn btn-sm btn-secondary ms-2 duplicate-element-builder"
+                className="btn btn-sm btn-secondary ms-1 duplicate-element-builder"
                 onClick={duplicate}
               >
                 <FontAwesomeIcon icon={faCopy} className="me-1" />
                 {t("Clone")}
               </button>
             )}
-            <hr className="my-2" />
-            {selected.settings && React.createElement(selected.settings)}
+            {options.has_copilot_generate && selected.isDeletable && (
+              <button
+                className="btn btn-sm btn-secondary ms-1"
+                onClick={() => setShowRegenerateModal(true)}
+              >
+                {t("Edit with AI")}
+              </button>
+            )}
+            <div className="mt-2">
+              {selected.settings && React.createElement(selected.settings)}
+            </div>
+            {showRegenerateModal && (
+              <div className="modal d-block" tabIndex="-1" style={{ backgroundColor: "rgba(0,0,0,0.5)" }}>
+                <div className="modal-dialog">
+                  <div className="modal-content">
+                    <div className="modal-header">
+                      <h5 className="modal-title">{t("Generate Element")}</h5>
+                      <button
+                        type="button"
+                        className="btn-close"
+                        onClick={() => {
+                          setShowRegenerateModal(false);
+                          setRegenerateError(null);
+                        }}
+                      ></button>
+                    </div>
+                    <div className="modal-body">
+                      <p className="text-muted small">
+                        {t("Describe how you want to regenerate the selected element.")}
+                      </p>
+                      <textarea
+                        className="form-control"
+                        rows={3}
+                        value={regeneratePrompt}
+                        onChange={(e) => setRegeneratePrompt(e.target.value)}
+                        placeholder={t("Enter your prompt...")}
+                      />
+                      {regenerateError && (
+                        <div className="alert alert-danger mt-2 mb-0">{regenerateError}</div>
+                      )}
+                    </div>
+                    <div className="modal-footer">
+                      <button
+                        className="btn btn-secondary"
+                        onClick={() => {
+                          setShowRegenerateModal(false);
+                          setRegenerateError(null);
+                        }}
+                      >
+                        {t("Cancel")}
+                      </button>
+                      <button
+                        className="btn btn-primary"
+                        onClick={handleRegenerate}
+                        disabled={regenerating || !regeneratePrompt.trim()}
+                      >
+                        {regenerating ? t("Generating...") : t("Generate")}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
           </Fragment>
         ) : (
           t("No element selected")
@@ -417,113 +657,6 @@ function useWindowDimensions() {
   return windowDimensions;
 }
 
-/**
- * Custom Layer Component for Craft.js Layers panel
- * Must be defined outside Builder component and memoized to prevent infinite re-renders
- * Added defensive checks for layer properties
- * @category saltcorn-builder
- * @subcategory components
- * @namespace
- */
-
-const hiddenColumnParents = new Set(["Card", "Container", "Tabs", "Table"]);
-
-const CustomLayerComponent = memo(({ children }) => {
-  const {
-    id,
-    depth,
-    expanded,
-    hovered,
-    actions: { toggleLayer, setExpandedState },
-    connectors: { layer, drag },
-  } = useLayer((layer) => {
-      return {
-        hovered: layer?.event?.hovered,
-        expanded: layer?.expanded,
-      };
-  });
-
-  const { displayName, hasNodes, isHiddenColumn } = useEditor((state) => {
-      const node = state.nodes[id];
-      const data = node?.data;
-
-      let name = data?.displayName || data?.name || id;
-      if (name === "ROOT" || name === "Canvas") {
-          name = data?.name || name;
-      }
-
-      const nodes = data?.nodes;
-      const linkedNodes = data?.linkedNodes;
-      const hasChildren = (nodes && nodes.length > 0) || (linkedNodes && Object.keys(linkedNodes).length > 0);
-
-      // Check if this Column is a linked node of a Card/Container/Tabs/Table
-      let shouldHide = false;
-      if (name === "Column" && data?.parent) {
-          const parentNode = state.nodes[data.parent];
-          const parentName = parentNode?.data?.displayName || parentNode?.data?.name;
-          if (hiddenColumnParents.has(parentName)) {
-              const parentLinked = parentNode?.data?.linkedNodes;
-              if (parentLinked && Object.values(parentLinked).includes(id)) {
-                  shouldHide = true;
-              }
-          }
-      }
-
-      return {
-          displayName: name,
-          hasNodes: hasChildren,
-          isHiddenColumn: shouldHide
-      };
-  });
-
-  // Auto-expand hidden linked-node Columns so their children are always
-  // visible through the transparent wrapper. Uses setExpandedState(true)
-  // instead of toggleLayer() — it's idempotent (no-op when already true),
-  // so it won't conflict with craft.js internals or cause toggle loops.
-  useEffect(() => {
-    if (isHiddenColumn && !expanded) {
-      setExpandedState(true);
-    }
-  }, [isHiddenColumn, expanded, setExpandedState]);
-
-  if (isHiddenColumn) {
-    return (
-      <div
-        ref={(dom) => { layer(dom); drag(dom); }}
-        style={{ marginLeft: "-20px" }}
-      >
-        {children}
-      </div>
-    );
-  }
-
-  return (
-    <div>
-        <div
-          ref={(dom) => { layer(dom); drag(dom); }}
-          className={`builder-layer-node ${hovered ? "hovered" : ""}`}
-          style={{
-            paddingLeft: `${depth * 20 + 10}px`,
-          }}
-        >
-          <span className="layer-name" style={{ flexGrow: 1 }}>{displayName}</span>
-
-          {hasNodes && (
-             <span
-               onClick={(e) => {
-                 e.stopPropagation();
-                 toggleLayer();
-               }}
-             >
-               <FontAwesomeIcon icon={expanded ? faChevronUp : faChevronDown} fontSize={14} className="float-end fa-lg" />
-             </span>
-          )}
-        </div>
-      {children}
-    </div>
-  );
-});
-
 const AddColumnButton = () => {
   const { t } = useTranslation();
   const { query, actions } = useEditor(() => {});
@@ -545,6 +678,38 @@ const AddColumnButton = () => {
   );
 };
 
+const DEVICE_WIDTHS = {
+  desktop: null,
+  tablet: 768,
+  mobile: 576,
+};
+
+const DevicePreviewToolbar = ({ previewDevice, setPreviewDevice }) => {
+  const { t } = useTranslation();
+  const devices = [
+    { key: "desktop", icon: Display, label: t("Desktop") },
+    { key: "tablet", icon: Tablet, label: t("Tablet") },
+    { key: "mobile", icon: Phone, label: t("Mobile") },
+  ];
+
+  return (
+    <div className="device-preview-toolbar">
+      {devices.map(({ key, icon: Icon, label }) => (
+        <button
+          key={key}
+          className={`btn btn-sm ${
+            previewDevice === key ? "btn-primary" : "btn-outline-secondary"
+          } device-preview-btn`}
+          onClick={() => setPreviewDevice(key)}
+          title={label}
+        >
+          <Icon size={16} />
+        </button>
+      ))}
+    </div>
+  );
+};
+
 /**
  * @returns {Fragment}
  * @category saltcorn-builder
@@ -559,26 +724,26 @@ const HistoryPanel = () => {
   }));
 
   return (
-    <Fragment>
-      {canUndo && (
-        <button
-          className="btn btn-sm btn-secondary ms-2 me-2 undo-builder"
-          title={t("Undo")}
-          onClick={() => actions.history.undo()}
-        >
-          <FontAwesomeIcon icon={faUndo} />
-        </button>
-      )}
-      {canRedo && (
-        <button
-          className="btn btn-sm btn-secondary redo-builder"
-          title={t("Redo")}
-          onClick={() => actions.history.redo()}
-        >
-          <FontAwesomeIcon icon={faRedo} />
-        </button>
-      )}
-    </Fragment>
+    <div className="d-flex gap-1">
+      <button
+        className="btn btn-sm btn-secondary redo-builder"
+        title={t("Redo")}
+        onClick={() => actions.history.redo()}
+        disabled={!canRedo}
+        style={!canRedo ? { opacity: 0.4, pointerEvents: "none" } : {}}
+      >
+        <FontAwesomeIcon icon={faRedo} />
+      </button>
+       <button
+        className="btn btn-sm btn-secondary undo-builder"
+        title={t("Undo")}
+        onClick={() => actions.history.undo()}
+        disabled={!canUndo}
+        style={!canUndo ? { opacity: 0.4, pointerEvents: "none" } : {}}
+      >
+        <FontAwesomeIcon icon={faUndo} />
+      </button>
+    </div>
   );
 };
 
@@ -595,7 +760,7 @@ const NextButton = ({ layout }) => {
   const options = useContext(optionsCtx);
 
   useEffect(() => {
-    layoutToNodes(layout, query, actions, "ROOT", options);
+    layoutToNodes(layout, query, actions.history.ignore(), "ROOT", options);
   }, []);
 
   /**
@@ -644,6 +809,7 @@ const Builder = ({ options, layout, mode }) => {
   const [isEnlarged, setIsEnlarged] = useState(false);
   const [isLeftEnlarged, setIsLeftEnlarged] = useState(false);
   const [relationsCache, setRelationsCache] = useState({});
+  const [previewDevice, setPreviewDevice] = useState("desktop");
   const { windowWidth, windowHeight } = useWindowDimensions();
 
   const [builderHeight, setBuilderHeight] = useState(0);
@@ -660,6 +826,9 @@ const Builder = ({ options, layout, mode }) => {
 
   const canvasHeight =
     Math.max(windowHeight - builderTop, builderHeight, 600) - 10;
+
+  const smallSidebarWidth = options.isRTL ? '17.5rem' : '16.5rem'
+
   return (
     <ErrorBoundary>
       <Editor
@@ -699,11 +868,13 @@ const Builder = ({ options, layout, mode }) => {
           ListColumn,
           ListColumns,
           LibraryElem,
+          Prompt,
+          Page
         }}
       >
         <Provider value={options}>
           <PreviewCtx.Provider
-            value={{ previews, setPreviews, uploadedFiles, setUploadedFiles }}
+            value={{ previews, setPreviews, uploadedFiles, setUploadedFiles, previewDevice }}
           >
             <RelationsCtx.Provider
               value={{
@@ -717,7 +888,7 @@ const Builder = ({ options, layout, mode }) => {
                   layoutToNodes,
                 }}
               >
-                <div className="row" ref={ref} style={{ marginTop: "-5px" }}>
+                <div className="row" ref={ref} style={{ marginTop: "-5px" }} dir={options.isRTL ? "rtl" : "ltr"}>
                   <div
                     className={`col-sm-auto left-builder-col ${
                       isLeftEnlarged
@@ -767,9 +938,9 @@ const Builder = ({ options, layout, mode }) => {
                       </div>
                       {showLayers && (
                         <div className="card-body p-0 builder-layers">
-                          <Layers 
+                          <Layers
                             expandRootOnLoad={true}
-                            renderLayer={CustomLayerComponent} 
+                            renderLayer={CustomLayer}
                           />
                         </div>
                       )}
@@ -782,40 +953,53 @@ const Builder = ({ options, layout, mode }) => {
                       options.mode !== "list" ? "emptymsg" : ""
                     }`}
                   >
-                    <div>
-                      <Frame>
-                        {options.mode === "list" ? (
-                          <Element canvas is={ListColumns}></Element>
-                        ) : (
-                          <Element canvas is={Column}></Element>
-                        )}
-                      </Frame>
-                      {options.mode === "list" ? <AddColumnButton /> : null}
+                    <div className="device-preview-scroll-area">
+                      <div
+                        className={`device-preview-canvas-wrapper ${
+                          previewDevice !== "desktop" && options.mode !== "list" ? "device-preview-constrained" : ""
+                        }`}
+                        style={{
+                          maxWidth: options.mode !== "list" && DEVICE_WIDTHS[previewDevice]
+                            ? `${DEVICE_WIDTHS[previewDevice]}px`
+                            : "none",
+                        }}
+                      >
+                        <Frame>
+                          {options.mode === "list" ? (
+                            <Element canvas is={ListColumns}></Element>
+                          ) : (
+                            <Element canvas is={Column}></Element>
+                          )}
+                        </Frame>
+                        {options.mode === "list" ? <AddColumnButton /> : null}
+                      </div>
                     </div>
                   </div>
                   <div className="col-sm-auto builder-sidebar">
-                    <div style={{ width: isEnlarged ? "28rem" : "16rem" }}>
-                      <NextButton layout={layout} />
-                      <HistoryPanel />
-                      <FontAwesomeIcon
-                        icon={faSave}
-                        className={savingState.isSaving ? "d-inline" : "d-none"}
-                      />
-                      <FontAwesomeIcon
-                        icon={faExclamationTriangle}
-                        color="#ff0033"
-                        className={savingState.error ? "d-inline" : "d-none"}
-                      />
-                      <FontAwesomeIcon
-                        icon={
-                          isEnlarged ? faCaretSquareRight : faCaretSquareLeft
-                        }
-                        className={
-                          "float-end me-2 mt-1 fa-lg builder-expand-toggle-right"
-                        }
-                        onClick={() => setIsEnlarged(!isEnlarged)}
-                        title={isEnlarged ? t("Shrink") : t("Enlarge")}
-                      />
+                    <div style={{ width: isEnlarged ? "28rem" : smallSidebarWidth }}>
+                      {document.getElementById("builder-header-actions") &&
+                        createPortal(
+                          <Fragment>
+                            <FontAwesomeIcon
+                              icon={faSave}
+                              className={savingState.isSaving ? "d-inline" : "d-none"}
+                            />
+                            <FontAwesomeIcon
+                              icon={faExclamationTriangle}
+                              color="#ff0033"
+                              className={savingState.error ? "d-inline" : "d-none"}
+                            />
+                            <HistoryPanel />
+                            {options.mode !== "list" && (
+                              <DevicePreviewToolbar
+                                previewDevice={previewDevice}
+                                setPreviewDevice={setPreviewDevice}
+                              />
+                            )}
+                            <NextButton layout={layout} />
+                          </Fragment>,
+                          document.getElementById("builder-header-actions")
+                        )}
                       <div
                         className={` ${
                           savingState.error ? "d-block" : "d-none"
@@ -823,7 +1007,7 @@ const Builder = ({ options, layout, mode }) => {
                       >
                         {t("your work is not being saved")}
                       </div>
-                      <SettingsPanel />
+                      <SettingsPanel isEnlarged={isEnlarged} setIsEnlarged={setIsEnlarged} />
                     </div>
                   </div>
                 </div>