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

package/src/components/elements/Container.js

@@ -135,11 +135,21 @@ const Container = ({
   const {
     selected,
     connectors: { connect, drag },
-  } = useNode((node) => ({ selected: node.events.selected }));
+    mobileWidth,
+    tabletWidth,
+    mobileHeight,
+    tabletHeight,
+  } = useNode((node) => ({
+    selected: node.events.selected,
+    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 BP_MIN = { "": 0, sm: 576, md: 768, lg: 992, xl: 1200 };
-  const DEVICE_W = { desktop: Infinity, tablet: 768, mobile: 375 };
+  const DEVICE_W = { desktop: Infinity, tablet: 768, mobile: 576 };
   {
     const dw = DEVICE_W[previewDevice] || Infinity;
     if (minScreenWidth && dw < (BP_MIN[minScreenWidth] || 0)) {
@@ -175,7 +185,7 @@ const Container = ({
       style: {
         ...parseStyles(customCSS || ""),
         ...reactifyStyles(style, transform, rotate),
-        display,
+        ...(display && display !== "block" ? { display } : {}),
         minHeight: minHeight ? `${minHeight}${minHeightUnit || "px"}` : null,
         ...(bgType === "Image" && bgFileId
           ? {
@@ -207,16 +217,20 @@ const Container = ({
               color: textColor,
             }
           : {}),
-        ...(typeof height !== "undefined"
+        ...(height
           ? {
               height: `${height}${heightUnit || "px"}`,
             }
           : {}),
-        ...(typeof width !== "undefined"
+        ...(width
           ? {
               width: `${width}${widthUnit || "px"}`,
             }
           : {}),
+        ...(previewDevice === "mobile" && mobileWidth ? { width: mobileWidth } : {}),
+        ...(previewDevice === "mobile" && mobileHeight ? { height: mobileHeight } : {}),
+        ...(previewDevice === "tablet" && tabletWidth ? { width: tabletWidth } : {}),
+        ...(previewDevice === "tablet" && tabletHeight ? { height: tabletHeight } : {}),
       },
     },
     <Element canvas id="container-canvas" is={Column}>
@@ -238,6 +252,10 @@ const ContainerSettings = () => {
     minHeight: node.data.props.minHeight,
     height: node.data.props.height,
     width: node.data.props.width,
+    mobileWidth: node.data.props.mobileWidth,
+    tabletWidth: node.data.props.tabletWidth,
+    mobileHeight: node.data.props.mobileHeight,
+    tabletHeight: node.data.props.tabletHeight,
     minHeightUnit: node.data.props.minHeightUnit,
     heightUnit: node.data.props.heightUnit,
     widthUnit: node.data.props.widthUnit,
@@ -1259,6 +1277,10 @@ Container.craft = {
       { name: "minHeight", default: 20 },
       { name: "height" },
       { name: "width" },
+      { name: "mobileWidth" },
+      { name: "tabletWidth" },
+      { name: "mobileHeight" },
+      { name: "tabletHeight" },
       { name: "click_action" },
       { name: "url", canBeFormula: true },
       { name: "hoverColor" },

package/src/components/elements/Prompt.js

@@ -0,0 +1,285 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/Prompt
+ * @subcategory components / elements
+ */
+
+import React, { useState, useContext, Fragment } from "react";
+import { useNode, useEditor } from "@craftjs/core";
+import useTranslation from "../../hooks/useTranslation";
+import optionsCtx from "../context";
+import StorageCtx from "../storage_context";
+
+const PROMPT_ICONS = {
+  container: "fas fa-box",
+  view: "fas fa-eye",
+  field: "fas fa-i-cursor",
+  action: "fas fa-bolt",
+};
+
+const PROMPT_LABELS = {
+  container: "Container",
+  view: "View",
+  field: "Field",
+  action: "Action",
+};
+
+export const Prompt = ({ promptType, promptText }) => {
+  const {
+    connectors: { connect, drag },
+    selected,
+    actions: { setProp },
+    id,
+    parent,
+  } = useNode((state) => ({
+    selected: state.events.selected,
+    parent: state.data.parent,
+  }));
+
+  const { query, actions: editorActions } = useEditor();
+  const options = useContext(optionsCtx);
+  const { layoutToNodes } = useContext(StorageCtx);
+  const { t } = useTranslation();
+
+  const [generating, setGenerating] = useState(false);
+
+  const icon = PROMPT_ICONS[promptType] || "fas fa-robot";
+
+  const handleGenerate = async (e) => {
+    e.stopPropagation();
+    if (!promptText.trim()) return;
+
+    setGenerating(true);
+    setProp((props) => {
+      props.generateError = null;
+    });
+
+    try {
+      const combinedPrompt = `[${promptType}]: ${promptText}`;
+
+      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) {
+        setProp((props) => {
+          props.generateError = data.error;
+        });
+      } else if (data.layout) {
+        editorActions.delete(id);
+        layoutToNodes(data.layout, query, editorActions, parent, options);
+      }
+    } catch (err) {
+      setProp((props) => {
+        props.generateError = err.message || "Generation failed";
+      });
+    } finally {
+      setGenerating(false);
+    }
+  };
+
+  return (
+    <div
+      ref={(dom) => connect(drag(dom))}
+      className={`prompt-placeholder ${selected ? "selected-node" : ""}`}
+      style={{
+        border: "2px dashed #6c8ebf",
+        borderRadius: "8px",
+        padding: "12px",
+        margin: "4px 0",
+        backgroundColor: "#e8f0fe",
+        minHeight: "60px",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "6px",
+          marginBottom: "6px",
+          fontWeight: "bold",
+          fontSize: "13px",
+          color: "#1a73e8",
+        }}
+      >
+        <i className={icon}></i>
+        <span>{t("Prompt")}</span>
+      </div>
+      <textarea
+        rows="3"
+        className="form-control form-control-sm"
+        style={{
+          fontSize: "13px",
+          backgroundColor: "transparent",
+          border: "1px solid #b0c4de",
+          resize: "vertical",
+          marginBottom: "8px",
+        }}
+        value={promptText}
+        placeholder={t("Describe what you want to generate...")}
+        onChange={(e) =>
+          setProp((props) => {
+            props.promptText = e.target.value;
+          })
+        }
+        onClick={(e) => e.stopPropagation()}
+      />
+      <button
+        className="btn btn-sm btn-success w-100"
+        onClick={handleGenerate}
+        disabled={generating || !promptText.trim()}
+        style={{ fontSize: "12px" }}
+      >
+        {generating ? (
+          <Fragment>
+            <span
+              className="spinner-border spinner-border-sm me-1"
+              role="status"
+            ></span>
+            {t("Generating...")}
+          </Fragment>
+        ) : (
+          <Fragment>
+            <i className="fas fa-robot me-1"></i>
+            {t("Generate")}
+          </Fragment>
+        )}
+      </button>
+    </div>
+  );
+};
+
+const PromptSettings = () => {
+  const { t } = useTranslation();
+  const {
+    actions: { setProp },
+    promptType,
+    promptText,
+    generateError,
+    id,
+    parent,
+  } = useNode((node) => ({
+    promptType: node.data.props.promptType,
+    promptText: node.data.props.promptText,
+    generateError: node.data.props.generateError,
+    id: node.id,
+    parent: node.data.parent,
+  }));
+
+  const { query, actions: editorActions } = useEditor();
+  const options = useContext(optionsCtx);
+  const { layoutToNodes } = useContext(StorageCtx);
+
+  const [generating, setGenerating] = useState(false);
+
+  const handleGenerate = async () => {
+    if (!promptText.trim()) return;
+
+    setGenerating(true);
+    setProp((props) => {
+      props.generateError = null;
+    });
+
+    try {
+      const combinedPrompt = `[${promptType}]: ${promptText}`;
+
+      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) {
+        setProp((props) => {
+          props.generateError = data.error;
+        });
+      } else if (data.layout) {
+        editorActions.delete(id);
+        layoutToNodes(data.layout, query, editorActions, parent, options);
+      }
+    } catch (err) {
+      setProp((props) => {
+        props.generateError = err.message || "Generation failed";
+      });
+    } finally {
+      setGenerating(false);
+    }
+  };
+
+  return (
+    <div>
+      <div className="mb-2">
+        <label className="form-label">{t("Prompt")}</label>
+        <textarea
+          rows="4"
+          className="form-control"
+          value={promptText}
+          placeholder={t("Describe what you want to generate...")}
+          onChange={(e) =>
+            setProp((props) => {
+              props.promptText = e.target.value;
+            })
+          }
+        />
+        {generateError && (
+          <div className="text-danger small mt-1">{generateError}</div>
+        )}
+      </div>
+      <div className="mb-2">
+        <button
+          className="btn btn-sm btn-success w-100"
+          onClick={handleGenerate}
+          disabled={generating || !promptText.trim()}
+        >
+          {generating ? (
+            <Fragment>
+              <span
+                className="spinner-border spinner-border-sm me-1"
+                role="status"
+              ></span>
+              {t("Generating...")}
+            </Fragment>
+          ) : (
+            <Fragment>
+              <i className="fas fa-robot me-1"></i>
+              {t("Generate")}
+            </Fragment>
+          )}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+Prompt.craft = {
+  displayName: "Prompt",
+  defaultProps: {
+    promptType: "container",
+    promptText: "",
+  },
+  related: {
+    settings: PromptSettings,
+    segment_type: "prompt",
+    fields: ["promptType", "promptText"],
+  },
+};

package/src/components/elements/Text.js

@@ -19,8 +19,10 @@ import {
   SettingsRow,
   setAPropGen,
 } from "./utils";
+import { getDeviceValue } from "../../utils/responsive_utils";
 import ContentEditable from "react-contenteditable";
 import optionsCtx from "../context";
+import PreviewCtx from "../preview_context";
 import { CKEditor } from "ckeditor4-react";
 import FontIconPicker from "@fonticonpicker/react-fonticonpicker";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -89,6 +91,8 @@ const Text = ({
   font,
   style,
   customClass,
+  mobileFontSize,
+  tabletFontSize,
 }) => {
   const {
     connectors: { connect, drag },
@@ -99,6 +103,19 @@ const Text = ({
     dragged: state.events.dragged,
   }));
   const [editable, setEditable] = useState(false);
+  const { previewDevice } = useContext(PreviewCtx);
+
+  const baseStyle = {
+    ...(font ? { fontFamily: font } : {}),
+    ...reactifyStyles(style || {}),
+  };
+  const activeFontSize = getDeviceValue(
+    baseStyle.fontSize,
+    tabletFontSize,
+    mobileFontSize,
+    previewDevice
+  );
+  if (activeFontSize) baseStyle.fontSize = activeFontSize;
 
   useEffect(() => {
     !selected && setEditable(false);
@@ -112,10 +129,7 @@ const Text = ({
       } ${selected ? "selected-node" : ""}`}
       ref={(dom) => connect(drag(dom))}
       onDoubleClick={(e) => selected && setEditable(true)}
-      style={{
-        ...(font ? { fontFamily: font } : {}),
-        ...reactifyStyles(style || {}),
-      }}
+      style={baseStyle}
     >
       <DynamicFontAwesomeIcon icon={icon} className="me-1" />
       {isFormula.text ? (
@@ -158,6 +172,7 @@ export /**
  */
 const TextSettings = () => {
   const { t } = useTranslation();
+  const { previewDevice } = useContext(PreviewCtx);
   const node = useNode((node) => ({
     id: node.id,
     text: node.data.props.text,
@@ -170,6 +185,8 @@ const TextSettings = () => {
     icon: node.data.props.icon,
     font: node.data.props.font,
     style: node.data.props.style,
+    mobileFontSize: node.data.props.mobileFontSize,
+    tabletFontSize: node.data.props.tabletFontSize,
   }));
   const {
     actions: { setProp },
@@ -183,6 +200,8 @@ const TextSettings = () => {
     font,
     style,
     customClass,
+    mobileFontSize,
+    tabletFontSize,
   } = node;
   const { mode, fields, icons } = useContext(optionsCtx);
   const setAProp = setAPropGen(setProp);
@@ -269,16 +288,41 @@ const TextSettings = () => {
             node={node}
             setProp={setProp}
           />
-          <SettingsRow
-            field={{
-              name: "font-size",
-              label: t("Font size"),
-              type: "DimUnits",
-            }}
-            node={node}
-            setProp={setProp}
-            isStyle={true}
-          />
+          {previewDevice === "desktop" ? (
+            <SettingsRow
+              field={{
+                name: "font-size",
+                label: t("Font size"),
+                type: "DimUnits",
+              }}
+              node={node}
+              setProp={setProp}
+              isStyle={true}
+            />
+          ) : (
+            <SettingsRow
+              field={{
+                name: "font-size",
+                label: `${t("Font size")} (${previewDevice})`,
+                type: "DimUnits",
+              }}
+              node={{
+                ...node,
+                style: {
+                  "font-size": previewDevice === "mobile" ? mobileFontSize : tabletFontSize,
+                },
+              }}
+              setProp={(fn) => {
+                // Write to mobileFontSize/tabletFontSize instead of style
+                const proxy = { style: {} };
+                fn(proxy);
+                const val = proxy.style["font-size"];
+                const propName = previewDevice === "mobile" ? "mobileFontSize" : "tabletFontSize";
+                setProp((prop) => { prop[propName] = val; });
+              }}
+              isStyle={true}
+            />
+          )}
           <SettingsRow
             field={{
               name: "font-weight",

package/src/components/elements/utils.js

@@ -1350,7 +1350,9 @@ const ConfigField = ({
                 e?.target &&
                 myOnChange(
                   isStyle || subProp
-                    ? `${e.target.value}${styleDim || "px"}`
+                    ? e.target.value === ""
+                      ? ""
+                      : `${e.target.value}${styleDim || "px"}`
                     : e.target.value
                 )
               }

package/src/components/storage.js

@@ -30,6 +30,7 @@ import { DropDownFilter } from "./elements/DropDownFilter";
 import { ToggleFilter } from "./elements/ToggleFilter";
 import { DropMenu } from "./elements/DropMenu";
 import { Container } from "./elements/Container";
+import { Prompt } from "./elements/Prompt";
 import { rand_ident } from "./elements/utils";
 
 /**
@@ -80,6 +81,7 @@ const allElements = [
   Table,
   ListColumn,
   ListColumns,
+  Prompt,
 ];
 
 export /**
@@ -183,6 +185,8 @@ const layoutToNodes = (
           style={segment.style || {}}
           icon={segment.icon}
           font={segment.font || ""}
+          mobileFontSize={segment.mobileFontSize}
+          tabletFontSize={segment.tabletFontSize}
         />
       );
     } else if (segment.type === "view") {
@@ -318,6 +322,12 @@ const layoutToNodes = (
           colClasses={segment.colClasses}
           colStyles={segment.colStyles}
           aligns={segment.aligns}
+          mobileAligns={segment.mobileAligns}
+          tabletAligns={segment.tabletAligns}
+          mobileWidth={segment.mobileWidth}
+          tabletWidth={segment.tabletWidth}
+          mobileHeight={segment.mobileHeight}
+          tabletHeight={segment.tabletHeight}
           setting_col_n={segment.setting_col_n !== undefined ? segment.setting_col_n : 0}
           contents={segment.besides.map(toTag)}
         />
@@ -354,6 +364,12 @@ const layoutToNodes = (
             colClasses={segment.colClasses}
             colStyles={segment.colStyles}
             aligns={segment.aligns}
+            mobileAligns={segment.mobileAligns}
+            tabletAligns={segment.tabletAligns}
+            mobileWidth={segment.mobileWidth}
+            tabletWidth={segment.tabletWidth}
+            mobileHeight={segment.mobileHeight}
+            tabletHeight={segment.tabletHeight}
             setting_col_n={segment.setting_col_n !== undefined ? segment.setting_col_n : 0}
             contents={segment.besides.map(toTag)}
           />
@@ -489,6 +505,8 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         style: node.props.style,
         icon: node.props.icon,
         font: node.props.font,
+        mobileFontSize: node.props.mobileFontSize,
+        tabletFontSize: node.props.tabletFontSize,
         ...customProps,
       };
     }
@@ -525,10 +543,16 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         gx: node.props.gx != null ? +node.props.gx : undefined,
         gy: node.props.gy != null ? +node.props.gy : undefined,
         aligns: node.props.aligns,
+        mobileAligns: node.props.mobileAligns,
+        tabletAligns: node.props.tabletAligns,
         vAligns: node.props.vAligns,
         colClasses: node.props.colClasses,
         colStyles: node.props.colStyles,
         style: node.props.style,
+        mobileWidth: node.props.mobileWidth,
+        tabletWidth: node.props.tabletWidth,
+        mobileHeight: node.props.mobileHeight,
+        tabletHeight: node.props.tabletHeight,
         widths,
         setting_col_n: node.props.setting_col_n,
         ...customProps,