@saltcorn/builder 1.6.0-alpha.8 → 1.6.0-beta.1

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/SearchBar.js

@@ -7,7 +7,7 @@
 import React, { Fragment, useState, useEffect, useContext } from "react";
 import useTranslation from "../../hooks/useTranslation";
 import optionsCtx from "../context";
-import { useNode } from "@craftjs/core";
+import { useNode, Element } from "@craftjs/core";
 import { Column } from "./Column";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
@@ -23,7 +23,7 @@ export /**
  * @category saltcorn-builder
  * @subcategory components
  */
-const SearchBar = ({ has_dropdown, children, show_badges }) => {
+const SearchBar = ({ has_dropdown, children, contents, show_badges }) => {
   const { t } = useTranslation();
   const {
     selected,
@@ -31,6 +31,15 @@ const SearchBar = ({ has_dropdown, children, show_badges }) => {
   } = useNode((node) => ({ selected: node.events.selected }));
   const [showDropdown, setDropdown] = useState(false);
   const [dropWidth, setDropWidth] = useState(200);
+
+  const renderContents = () => {
+    const actualChildren = contents || children;
+    if (!actualChildren) return null;
+    if (React.isValidElement(actualChildren)) return actualChildren;
+    if (Array.isArray(actualChildren)) return actualChildren;
+    return actualChildren;
+  };
+
   return (
     <div
       className={`input-group  ${selected ? "selected-node" : ""}`}
@@ -73,10 +82,19 @@ const SearchBar = ({ has_dropdown, children, show_badges }) => {
             }`}
             style={{ width: dropWidth, left: 0 }}
           >
-            <div className="canvas">{children}</div>
+            <Element canvas id="searchbar-contents" is={Column}>
+              {renderContents()}
+            </Element>
           </div>
         </Fragment>
       )}
+      {!has_dropdown && (
+        <div style={{ display: "none" }}>
+          <Element canvas id="searchbar-contents" is={Column}>
+            {renderContents()}
+          </Element>
+        </div>
+      )}
     </div>
   );
 };
@@ -146,11 +164,16 @@ SearchBar.craft = {
     has_dropdown: false,
     show_badges: false,
     autofocus: false,
+    contents: [],
   },
   related: {
     settings: SearchBarSettings,
     segment_type: "search_bar",
-    hasContents: true,
-    fields: ["has_dropdown", "show_badges", "autofocus"],
+    fields: [
+      { name: "has_dropdown" },
+      { name: "show_badges" },
+      { name: "autofocus" },
+      { label: "Contents", name: "contents", type: "Nodes", nodeID: "searchbar-contents" },
+    ],
   },
 };

package/src/components/elements/Table.js

@@ -124,19 +124,17 @@ const TableSettings = () => {
       showIf: { bs_style: true },
     },
   ];
-  return (
-    <SettingsFromFields
-      fields={fields}
-      onChange={(fnm, v, setProp) => {
-        if (fnm === "rows")
-          setProp((prop) => {
-            ntimes(v, (i) => {
-              if (!prop.contents[i]) prop.contents[i] = [];
-            });
+  const Settings = SettingsFromFields(fields, {
+    onChange: (fnm, v, setProp) => {
+      if (fnm === "rows")
+        setProp((prop) => {
+          ntimes(v, (i) => {
+            if (!prop.contents[i]) prop.contents[i] = [];
           });
-      }}
-    />
-  );
+        });
+    },
+  });
+  return <Settings />;
 };
 
 /**

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);
@@ -255,7 +274,7 @@ const TextSettings = () => {
                 className="w-100"
                 value={icon}
                 icons={icons}
-                onChange={(value) => setProp((prop) => (prop.icon = value))}
+                onChange={(value) => { if ((value || "") !== (icon || "")) setProp((prop) => (prop.icon = value), 500); }}
                 isMulti={false}
               />
             </td>
@@ -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/View.js

@@ -162,6 +162,7 @@ const ViewSettings = () => {
   }
   if (viewname && viewname.includes(".")) viewname = viewname.split(".")[0];
 
+  let cacheWasPopulated = false;
   if (
     finder &&
     !(relationsCache[tableName] && relationsCache[tableName][viewname])
@@ -178,8 +179,13 @@ const ViewSettings = () => {
     );
     relationsCache[tableName] = relationsCache[tableName] || {};
     relationsCache[tableName][viewname] = { relations, layers };
-    setRelationsCache({ ...relationsCache });
+    cacheWasPopulated = true;
   }
+  useEffect(() => {
+    if (cacheWasPopulated) {
+      setRelationsCache({ ...relationsCache });
+    }
+  });
   const [relationsData, setRelationsData] = finder
     ? React.useState(relationsCache[tableName][viewname])
     : [undefined, undefined];
@@ -193,18 +199,23 @@ const ViewSettings = () => {
       subView.display_type
     );
   }
-  if (
+  const needsInitialRelation =
     options.mode !== "filter" &&
     subView?.table_id &&
     !safeRelation &&
     !hasLegacyRelation &&
-    relationsData?.relations.length > 0
-  ) {
+    relationsData?.relations.length > 0;
+  if (needsInitialRelation) {
     safeRelation = initialRelation(relationsData.relations);
-    setProp((prop) => {
-      prop.relation = safeRelation.relationString;
-    });
   }
+  useEffect(() => {
+    if (needsInitialRelation) {
+      const rel = initialRelation(relationsData.relations);
+      setProp((prop) => {
+        prop.relation = rel.relationString;
+      }, 500);
+    }
+  }, [needsInitialRelation]);
   const helpContext = { view_name: viewname };
   if (options.tableName) helpContext.srcTable = options.tableName;
   const set_view_name = (e) => {
@@ -394,6 +405,7 @@ const ViewSettings = () => {
             value={extra_state_fml}
             propKey="extra_state_fml"
             onChange={setAProp("extra_state_fml")}
+            stateExpr
           />
           {errorString ? (
             <small className="text-danger font-monospace d-block">

package/src/components/elements/ViewLink.js

@@ -321,6 +321,7 @@ const ViewLinkSettings = () => {
                 value={extra_state_fml}
                 propKey="extra_state_fml"
                 onChange={setAProp("extra_state_fml")}
+                stateExpr
               />
               {errorString ? (
                 <small className="text-danger font-monospace d-block">