@saltcorn/builder 1.6.0-alpha.12 → 1.6.0-alpha.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "1.6.0-alpha.12",
+  "version": "1.6.0-alpha.13",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",
@@ -30,7 +30,7 @@
     "@fortawesome/free-solid-svg-icons": "5.15.2",
     "@fortawesome/react-fontawesome": "0.1.14",
     "@monaco-editor/react": "4.7.0",
-    "@saltcorn/common-code": "1.6.0-alpha.12",
+    "@saltcorn/common-code": "1.6.0-alpha.13",
     "@tippyjs/react": "4.2.6",
     "babel-jest": "^29.7.0",
     "babel-loader": "9.2.1",

package/src/components/Builder.js

@@ -73,6 +73,7 @@ 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";
 
 const { Provider } = optionsCtx;
@@ -353,6 +354,113 @@ const SettingsPanel = ({ isEnlarged, setIsEnlarged }) => {
     );
   };
 
+  const [generating, setGenerating] = useState(false);
+  const [generateError, setGenerateError] = useState(null);
+
+  // 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 d-flex justify-content-between align-items-center">
@@ -409,8 +517,9 @@ const SettingsPanel = ({ isEnlarged, setIsEnlarged }) => {
                 {t("Clone")}
               </button>
             )}
-            <hr className="my-2" />
-            {selected.settings && React.createElement(selected.settings)}
+            <div className="mt-2">
+              {selected.settings && React.createElement(selected.settings)}
+            </div>            
           </Fragment>
         ) : (
           t("No element selected")
@@ -582,7 +691,7 @@ const AddColumnButton = () => {
 const DEVICE_WIDTHS = {
   desktop: null,
   tablet: 768,
-  mobile: 375,
+  mobile: 576,
 };
 
 const DevicePreviewToolbar = ({ previewDevice, setPreviewDevice }) => {
@@ -766,6 +875,7 @@ const Builder = ({ options, layout, mode }) => {
           ListColumn,
           ListColumns,
           LibraryElem,
+          Prompt,
         }}
       >
         <Provider value={options}>
@@ -852,10 +962,10 @@ const Builder = ({ options, layout, mode }) => {
                     <div className="device-preview-scroll-area">
                       <div
                         className={`device-preview-canvas-wrapper ${
-                          previewDevice !== "desktop" ? "device-preview-constrained" : ""
+                          previewDevice !== "desktop" && options.mode !== "list" ? "device-preview-constrained" : ""
                         }`}
                         style={{
-                          maxWidth: DEVICE_WIDTHS[previewDevice]
+                          maxWidth: options.mode !== "list" && DEVICE_WIDTHS[previewDevice]
                             ? `${DEVICE_WIDTHS[previewDevice]}px`
                             : "none",
                         }}
@@ -873,10 +983,6 @@ const Builder = ({ options, layout, mode }) => {
                   </div>
                   <div className="col-sm-auto builder-sidebar">
                     <div style={{ width: isEnlarged ? "28rem" : "16rem" }}>
-                      <DevicePreviewToolbar
-                        previewDevice={previewDevice}
-                        setPreviewDevice={setPreviewDevice}
-                      />
                       {document.getElementById("builder-header-actions") &&
                         createPortal(
                           <Fragment>
@@ -890,6 +996,12 @@ const Builder = ({ options, layout, mode }) => {
                               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")

package/src/components/Toolbox.js

@@ -29,6 +29,7 @@ import { View } from "./elements/View";
 import { SearchBar } from "./elements/SearchBar";
 import { Link } from "./elements/Link";
 import { Page } from "./elements/Page";
+import { Prompt } from "./elements/Prompt";
 import optionsCtx from "./context";
 import {
   BoundingBox,
@@ -581,8 +582,64 @@ const TableElem = ({ connectors }) => {
   );
 };
 
+const PromptContainerElem = ({ connectors }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon="fas fa-robot"
+      title={t("Generate with AI")}
+      label={t("Generate")}
+    >
+      <Prompt promptType="container" promptText="" />
+    </WrapElem>
+  );
+};
+
+const PromptViewElem = ({ connectors }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon="fas fa-eye"
+      title={t("Prompt View")}
+      label={t("Prompt View")}
+    >
+      <Prompt promptType="view" promptText="" />
+    </WrapElem>
+  );
+};
+
+const PromptFieldElem = ({ connectors }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon="fas fa-i-cursor"
+      title={t("Prompt Field")}
+      label={t("Prompt Field")}
+    >
+      <Prompt promptType="field" promptText="" />
+    </WrapElem>
+  );
+};
+
+const PromptActionElem = ({ connectors }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon="fas fa-bolt"
+      title={t("Prompt Action")}
+      label={t("Prompt Action")}
+    >
+      <Prompt promptType="action" promptText="" />
+    </WrapElem>
+  );
+};
+
 const chunkToolBox = (elems, expanded) => {
-  const chunks = chunk(elems, expanded ? 3 : 2);
+  const chunks = chunk(elems.filter(Boolean), expanded ? 3 : 2);
   return chunks.map((es, ix) => (
     <div className="toolbar-row" key={ix}>
       {es.map((e, j) => (
@@ -638,6 +695,10 @@ const ToolboxShow = ({ expanded }) => {
       <DropMenuElem connectors={connectors} />,
       <TableElem connectors={connectors} />,
       <PageElem connectors={connectors} pages={pages} />,
+      options.has_copilot_generate && <PromptContainerElem connectors={connectors} />,
+      // <PromptViewElem connectors={connectors} />,
+      // <PromptFieldElem connectors={connectors} />,
+      // <PromptActionElem connectors={connectors} />,
     ],
     expanded
   );
@@ -696,6 +757,10 @@ const ToolboxList = ({ expanded }) => {
         <DropMenuElem connectors={connectors} />
       ),
       //  <TableElem connectors={connectors} />,
+      options.has_copilot_generate && <PromptContainerElem connectors={connectors} />,
+      // <PromptViewElem connectors={connectors} />,
+      // <PromptFieldElem connectors={connectors} />,
+      // <PromptActionElem connectors={connectors} />,
       options.allowMultipleElementsPerColumn &&
         !disable_toolbox?.line_break && (
           <LineBreakElem connectors={connectors} />
@@ -750,6 +815,10 @@ const ToolboxFilter = ({ expanded }) => {
       <TableElem connectors={connectors} />,
       <DropMenuElem connectors={connectors} />,
       <PageElem connectors={connectors} pages={pages} />,
+      options.has_copilot_generate && <PromptContainerElem connectors={connectors} />,
+      // <PromptViewElem connectors={connectors} />,
+      // <PromptFieldElem connectors={connectors} />,
+      // <PromptActionElem connectors={connectors} />,
     ],
     expanded
   );
@@ -787,6 +856,10 @@ const ToolboxEdit = ({ expanded }) => {
       <DropMenuElem connectors={connectors} />,
       <TableElem connectors={connectors} />,
       <ViewLinkElem connectors={connectors} options={options} />,
+      options.has_copilot_generate && <PromptContainerElem connectors={connectors} />,
+      // <PromptViewElem connectors={connectors} />,
+      // <PromptFieldElem connectors={connectors} />,
+      // <PromptActionElem connectors={connectors} />,
     ],
     expanded
   );
@@ -819,6 +892,10 @@ const ToolboxPage = ({ expanded }) => {
       <DropMenuElem connectors={connectors} />,
       <PageElem connectors={connectors} pages={pages} />,
       <TableElem connectors={connectors} />,
+      options.has_copilot_generate && <PromptContainerElem connectors={connectors} />,
+      // <PromptViewElem connectors={connectors} />,
+      // <PromptFieldElem connectors={connectors} />,
+      // <PromptActionElem connectors={connectors} />,
     ],
     expanded
   );

package/src/components/elements/BoxModelEditor.js

@@ -7,6 +7,12 @@
 import React, { useContext, Fragment, useState } from "react";
 import useTranslation from "../../hooks/useTranslation";
 import { SettingsRow, SettingsSectionHeaderRow, bstyleopt } from "./utils";
+import PreviewCtx from "../preview_context";
+import {
+  getDeviceSizeNode,
+  getDeviceSizeSetProp,
+  getDisplaySize,
+} from "../../utils/responsive_utils";
 /* 
 Contains code from https://github.com/tpaksu/boxmodel
 Copyright (c) 2017 Taha Paksu
@@ -24,6 +30,7 @@ export /**
  */
 const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
   const { t } = useTranslation();
+  const { previewDevice } = useContext(PreviewCtx);
   const [selectedCategory, setSelectedCategory] = useState(false);
   const [selectedDirection, setSelectedDirection] = useState(false);
   const selectedProperty = !selectedCategory
@@ -35,7 +42,13 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
     setSelectedCategory(c);
     setSelectedDirection(d);
   };
-  //console.log(node.style);
+  const isDesktop = !previewDevice || previewDevice === "desktop";
+  const deviceLabel = previewDevice === "mobile"
+    ? ` (${t("mobile")})`
+    : previewDevice === "tablet"
+      ? ` (${t("tablet")})`
+      : "";
+
   const style = node.style;
   return (
     <Fragment>
@@ -147,13 +160,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                             autoComplete="off"
                             name="boxmodel-ex-1_width"
                             size="3"
-                            value={
-                              sizeWithStyle
-                                ? style["width"]
-                                : node.width
-                                  ? `${node.width}${node.widthUnit || "px"}`
-                                  : ""
-                            }
+                            value={getDisplaySize(node, "width", previewDevice, sizeWithStyle)}
                           />
                           x
                           <input
@@ -162,13 +169,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                             autoComplete="off"
                             name="boxmodel-ex-1_height"
                             size="3"
-                            value={
-                              sizeWithStyle
-                                ? style["height"]
-                                : node.height
-                                  ? `${node.height}${node.heightUnit || "px"}`
-                                  : ""
-                            }
+                            value={getDisplaySize(node, "height", previewDevice, sizeWithStyle)}
                           />
                         </div>
                         <span
@@ -276,13 +277,13 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
               <SettingsRow
                 field={{
                   name: "width",
-                  label: t("width"),
+                  label: t("width") + deviceLabel,
                   type: "DimUnits",
                   horiz: true,
                 }}
-                node={node}
-                setProp={setProp}
-                isStyle={!!sizeWithStyle}
+                node={isDesktop ? node : getDeviceSizeNode(node, "width", previewDevice)}
+                setProp={isDesktop ? setProp : getDeviceSizeSetProp(setProp, "width", previewDevice)}
+                isStyle={isDesktop ? !!sizeWithStyle : true}
               />
               <SettingsRow
                 field={{
@@ -307,10 +308,10 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                 isStyle={true}
               />
               <SettingsRow
-                field={{ name: "height", label: t("height"), type: "DimUnits" }}
-                node={node}
-                setProp={setProp}
-                isStyle={!!sizeWithStyle}
+                field={{ name: "height", label: t("height") + deviceLabel, type: "DimUnits" }}
+                node={isDesktop ? node : getDeviceSizeNode(node, "height", previewDevice)}
+                setProp={isDesktop ? setProp : getDeviceSizeSetProp(setProp, "height", previewDevice)}
+                isStyle={isDesktop ? !!sizeWithStyle : true}
               />
               <SettingsRow
                 field={{

package/src/components/elements/Card.js

@@ -75,7 +75,27 @@ const Card = ({
   const {
     selected,
     connectors: { connect, drag },
-  } = useNode((node) => ({ selected: node.events.selected }));
+    mobileWidth,
+    tabletWidth,
+    mobileHeight,
+    tabletHeight,
+  } = useNode((node) => ({
+    selected: node.events.selected,
+    _style: node.data.props.style,
+    mobileWidth: node.data.props.mobileWidth,
+    tabletWidth: node.data.props.tabletWidth,
+    mobileHeight: node.data.props.mobileHeight,
+    tabletHeight: node.data.props.tabletHeight,
+  }));
+  const { previewDevice } = useContext(previewCtx);
+  const deviceSizeOverrides = {};
+  if (previewDevice === "mobile") {
+    if (mobileWidth) deviceSizeOverrides.width = mobileWidth;
+    if (mobileHeight) deviceSizeOverrides.height = mobileHeight;
+  } else if (previewDevice === "tablet") {
+    if (tabletWidth) deviceSizeOverrides.width = tabletWidth;
+    if (tabletHeight) deviceSizeOverrides.height = tabletHeight;
+  }
 
   return (
     <div
@@ -105,6 +125,7 @@ const Card = ({
               }deg, ${gradStartColor}, ${gradEndColor})`,
             }
           : {}),
+        ...deviceSizeOverrides,
       }}
       ref={(dom) => connect(drag(dom))}
     >
@@ -486,6 +507,10 @@ const fields = [
   { label: "Title Right", name: "titleRight", type: "Nodes", nodeID: "titleRight" },
   { label: "Footer", name: "footer", type: "Nodes", nodeID: "cardfooter" },
   { name: "style", default: {} },
+  { name: "mobileWidth" },
+  { name: "tabletWidth" },
+  { name: "mobileHeight" },
+  { name: "tabletHeight" },
   { label: "Class", name: "class", type: "String", canBeFormula: true },
   { name: "hAlign" },
   { name: "bgType" },

package/src/components/elements/Columns.js

@@ -20,6 +20,7 @@ import {
 } from "./utils";
 import { BoxModelEditor } from "./BoxModelEditor";
 import { ArrayManager } from "./ArrayManager";
+import { getAlignClass } from "../../utils/responsive_utils";
 import {
   AlignTop,
   AlignMiddle,
@@ -81,7 +82,7 @@ const BREAKPOINT_MIN_WIDTH = {
 const PREVIEW_DEVICE_WIDTH = {
   desktop: Infinity,
   tablet: 768,
-  mobile: 375,
+  mobile: 576,
 };
 
 const getColClass = (width, breakpoint, previewDevice) => {
@@ -114,6 +115,8 @@ const Columns = ({
   gx,
   gy,
   aligns,
+  mobileAligns,
+  tabletAligns,
   vAligns,
   colClasses,
   colStyles,
@@ -123,15 +126,34 @@ const Columns = ({
   const {
     selected,
     connectors: { connect, drag },
-  } = useNode((node) => ({ selected: node.events.selected }));
+    mobileWidth,
+    tabletWidth,
+    mobileHeight,
+    tabletHeight,
+  } = useNode((node) => ({
+    selected: node.events.selected,
+    _style: node.data.props.style,
+    mobileWidth: node.data.props.mobileWidth,
+    tabletWidth: node.data.props.tabletWidth,
+    mobileHeight: node.data.props.mobileHeight,
+    tabletHeight: node.data.props.tabletHeight,
+  }));
   const { previewDevice } = useContext(PreviewCtx);
+  const canvasStyle = { ...reactifyStyles(style || {}) };
+  if (previewDevice === "mobile") {
+    if (mobileWidth) canvasStyle.width = mobileWidth;
+    if (mobileHeight) canvasStyle.height = mobileHeight;
+  } else if (previewDevice === "tablet") {
+    if (tabletWidth) canvasStyle.width = tabletWidth;
+    if (tabletHeight) canvasStyle.height = tabletHeight;
+  }
   return (
     <div
       className={`row builder-columns ${customClass || ""} ${selected ? "selected-node" : ""} ${
         typeof gx !== "undefined" && gx !== null ? `gx-${gx}` : ""
       } ${typeof gy !== "undefined" && gy !== null ? `gy-${gy}` : ""}`}
       ref={(dom) => connect(drag(dom))}
-      style={reactifyStyles(style || {})}
+      style={canvasStyle}
     >
       {ntimes(ncols, (ix) => (
         <div
@@ -140,8 +162,8 @@ const Columns = ({
             getWidth(widths, ix),
             breakpoints?.[ix],
             previewDevice
-          )} text-${
-            aligns?.[ix]
+          )} ${
+            getAlignClass(aligns, mobileAligns, tabletAligns, ix, previewDevice)
           } align-items-${vAligns?.[ix]} ${colClasses?.[ix] || ""}`}
           style={parseStyles(colStyles?.[ix] || "")}
         >
@@ -162,16 +184,23 @@ export /**
  */
 const ColumnsSettings = () => {
   const { t } = useTranslation();
+  const { previewDevice } = useContext(PreviewCtx);
   const node = useNode((node) => ({
     widths: node.data.props.widths,
     ncols: node.data.props.ncols,
     breakpoints: node.data.props.breakpoints,
     style: node.data.props.style,
+    mobileWidth: node.data.props.mobileWidth,
+    tabletWidth: node.data.props.tabletWidth,
+    mobileHeight: node.data.props.mobileHeight,
+    tabletHeight: node.data.props.tabletHeight,
     setting_col_n: node.data.props.setting_col_n,
     gx: node.data.props.gx,
     gy: node.data.props.gy,
     vAligns: node.data.props.vAligns,
     aligns: node.data.props.aligns,
+    mobileAligns: node.data.props.mobileAligns,
+    tabletAligns: node.data.props.tabletAligns,
     colClasses: node.data.props.colClasses,
     colStyles: node.data.props.colStyles,
     customClass: node.data.props.customClass,
@@ -186,14 +215,24 @@ const ColumnsSettings = () => {
     setting_col_n,
     vAligns,
     aligns,
+    mobileAligns,
+    tabletAligns,
     colClasses,
     colStyles,
     customClass,
     currentSettingsTab,
   } = node;
+
+  const activeAlignProp =
+    previewDevice === "mobile" ? "mobileAligns" :
+    previewDevice === "tablet" ? "tabletAligns" : "aligns";
+  const activeAligns =
+    previewDevice === "mobile" ? mobileAligns :
+    previewDevice === "tablet" ? tabletAligns : aligns;
+
   const colSetsNode = {
     vAlign: vAligns?.[setting_col_n],
-    hAlign: aligns?.[setting_col_n],
+    hAlign: activeAligns?.[setting_col_n],
     colClass: colClasses?.[setting_col_n] || "",
     colStyle: colStyles?.[setting_col_n] || "",
   };
@@ -208,7 +247,7 @@ const ColumnsSettings = () => {
           setProp={setProp}
           countProp={"ncols"}
           currentProp={"setting_col_n"}
-          managedArrays={["widths", "breakpoints", "aligns", "vAligns", "colClasses", "colStyles"]}
+          managedArrays={["widths", "breakpoints", "aligns", "mobileAligns", "tabletAligns", "vAligns", "colClasses", "colStyles"]}
           manageContents={true}
           contentsKey={"besides"}
           initialAddProps={{
@@ -293,7 +332,9 @@ const ColumnsSettings = () => {
             <SettingsRow
               field={{
                 name: "hAlign",
-                label: t("Horizontal"),
+                label: previewDevice !== "desktop"
+                  ? `${t("Horizontal")} (${previewDevice})`
+                  : t("Horizontal"),
                 type: "btn_select",
                 options: [
                   { value: "start", title: t("Left"), label: <AlignStart /> },
@@ -305,8 +346,8 @@ const ColumnsSettings = () => {
               setProp={setProp}
               onChange={(k, v) =>
                 setProp((prop) => {
-                  if (!prop.aligns) prop.aligns = [];
-                   prop.aligns[setting_col_n] = v;
+                  if (!prop[activeAlignProp]) prop[activeAlignProp] = [];
+                  prop[activeAlignProp][setting_col_n] = v;
                 })
               }
             />