@aglyn/plugins-ai 1.0.0-beta.228 → 1.0.0-beta.230

package/src/lib/server/assist-edit.js

@@ -17,7 +17,9 @@ import { _ as _extends } from "@swc/helpers/_/_extends";
  */ import { linealRelationshipPermits } from "@aglyn/aglyn/app-utils/lineal-order";
 import { SCREEN_SEO_TEXT_FIELDS, SCREEN_SEO_TEXT_GUIDANCE } from "@aglyn/aglyn/app-utils/screen-seo-fields";
 import { CANVAS_ROOT_ELEMENT_ID } from "@aglyn/aglyn/foundation/constants/canvas";
-import { ASSIST_EDIT_ACTION_ID, ASSIST_EDIT_CONTEXT_MAX_NODES, ASSIST_EDIT_CONTEXT_MAX_PROPS, ASSIST_EDIT_MAX_DROPPED_REASONS, ASSIST_EDIT_OP_KINDS, ASSIST_EDIT_OUTLINE_TEXT_CHARS, ASSIST_EDIT_SELECTED_TEXT_CHARS, ASSIST_EDIT_TOOL_NAME, summarizeAssistEditOps } from "../model/assist-edit.js";
+import { NODE_MAX_INTERACTIONS, nodeInteractionSelector } from "@aglyn/aglyn/app-utils/node-interactions";
+import { ACTION_MAX_STEPS, CLIENT_INTERACTION_STEP_LABELS, validateInteraction } from "@aglyn/aglyn/app-utils/site-interactions";
+import { ASSIST_EDIT_ACTION_ID, ASSIST_EDIT_CONTEXT_MAX_NODES, ASSIST_EDIT_CONTEXT_MAX_PROPS, ASSIST_EDIT_INTERACTION_EVENTS, ASSIST_EDIT_INTERACTION_STEPS, ASSIST_EDIT_MAX_DROPPED_REASONS, ASSIST_EDIT_OP_KINDS, ASSIST_EDIT_OUTLINE_TEXT_CHARS, ASSIST_EDIT_SELECTED_TEXT_CHARS, ASSIST_EDIT_TOOL_NAME, summarizeAssistEditOps } from "../model/assist-edit.js";
 import { aiDoctrineCatalog, validateStreamedGeneration } from "../runtime/ai-doctrine.js";
 import { AI_SX_ALLOWED_KEYS, validateAiNodePatch, validateAiNodeTree } from "../runtime/ai-node-tree.js";
 import { AI_NODE_CAPABILITIES, AI_PALETTE, AI_SX_TOKENS } from "../runtime/ai-palette.generated.js";
@@ -137,6 +139,37 @@ const strictObject = (properties)=>({
         },
         value: STRING
     });
+    const step = strictObject({
+        type: {
+            type: 'string',
+            enum: [
+                ...ASSIST_EDIT_INTERACTION_STEPS
+            ]
+        },
+        targetId: STRING,
+        className: STRING,
+        url: STRING,
+        message: STRING,
+        delayMs: {
+            type: 'integer'
+        }
+    });
+    const interaction = strictObject({
+        event: {
+            type: 'string',
+            enum: [
+                '',
+                ...ASSIST_EDIT_INTERACTION_EVENTS
+            ]
+        },
+        everyTime: {
+            type: 'boolean'
+        },
+        steps: {
+            type: 'array',
+            items: step
+        }
+    });
     const op = strictObject({
         op: {
             type: 'string',
@@ -163,7 +196,8 @@ const strictObject = (properties)=>({
         seo: {
             type: 'array',
             items: seo
-        }
+        },
+        interaction
     });
     return {
         name: ASSIST_EDIT_TOOL_NAME,
@@ -212,7 +246,8 @@ const strictObject = (properties)=>({
         '- insertSubtree: parentId, index (-1 appends) and nodes — the new elements, nodes[0] their root, each listing its children by the ids you gave them in this operation. Build only from the elements below, and keep it small.',
         '- move: nodeId, parentId and index — the position the element takes among the parent’s children once moved (-1 appends).',
         '- remove: nodeId — the element and everything inside it.',
-        '- rename: nodeId and name, the layer name shown in the hierarchy.'
+        '- rename: nodeId and name, the layer name shown in the hierarchy.',
+        `- addInteraction: nodeId, name and interaction — what the element does when a visitor acts on it, added beside any it already has. event: ${ASSIST_EDIT_INTERACTION_EVENTS.join(', ')}. everyTime: true for anything a visitor repeats, such as opening a menu; false to run once a page view. steps, in order, each a type with only its own fields filled: ${ASSIST_EDIT_INTERACTION_STEPS.join(', ')}. targetId is the element a step acts on (an id listed below; "" for the page's first drawer or menu, and for redirect and siteAlert); className for the class steps; url for redirect (a path such as /contact, or an https address); message for siteAlert; delayMs for show and hide (-1 for none). An element's "interactions" lists what it already does, for explaining it.`
     ];
     if (kind === 'screen') {
         lines.push(`- setSeo: seo as field/value — ${SCREEN_SEO_TEXT_FIELDS.map((field)=>`${field} (reads best at ${SCREEN_SEO_TEXT_GUIDANCE[field]} characters or fewer)`).join(', ')}.`);
@@ -264,6 +299,28 @@ function describeSx(raw) {
     }
     return Object.keys(sx).length ? sx : undefined;
 }
+const STEP_NAME = /^[A-Za-z][A-Za-z0-9_.:-]{0,63}$/;
+/**
+ * The selected element's interactions as an outline may carry them: a name,
+ * an event and the kinds of its steps, each to its own alphabet — never a
+ * selector, a script or HTML.
+ */ function describeInteractions(raw) {
+    if (!Array.isArray(raw)) return undefined;
+    const out = [];
+    for (const entry of raw.slice(0, NODE_MAX_INTERACTIONS)){
+        var _entry_event;
+        if (!isRecord(entry)) continue;
+        const event = String((_entry_event = entry['event']) != null ? _entry_event : '');
+        if (!STEP_NAME.test(event)) continue;
+        out.push({
+            name: cleanText(entry['name'], LAYER_NAME_CHARS).replace(/[<>]/g, ''),
+            event,
+            steps: (Array.isArray(entry['steps']) ? entry['steps'] : []).map(String).filter((type)=>STEP_NAME.test(type)).slice(0, ACTION_MAX_STEPS),
+            enabled: entry['enabled'] !== false
+        });
+    }
+    return out.length ? out : undefined;
+}
 /**
  * The canvas outline a request carried, held to what may enter a prompt.
  *
@@ -297,6 +354,7 @@ function describeSx(raw) {
         const brief = entry['brief'] === true && !selected;
         const props = brief ? undefined : describeProps(entry['props'], selected ? ASSIST_EDIT_SELECTED_TEXT_CHARS : ASSIST_EDIT_OUTLINE_TEXT_CHARS);
         const sx = selected ? describeSx(entry['sx']) : undefined;
+        const interactions = selected ? describeInteractions(entry['interactions']) : undefined;
         // Alike only an element described before this one.
         const like = entry['like'];
         const alike = isNodeId(like) && seen.has(like);
@@ -317,6 +375,8 @@ function describeSx(raw) {
             brief: true
         } : {}, alike ? {
             like
+        } : {}, interactions ? {
+            interactions
         } : {}));
     }
     if (!nodes.some((node)=>node.id === CANVAS_ROOT_ELEMENT_ID)) return null;
@@ -429,6 +489,7 @@ function describeSx(raw) {
         'Elements, one JSON object per line:'
     ];
     for (const node of context.nodes){
+        var _node_interactions;
         if (node.brief) continue;
         const more = unlisted(node);
         lines.push(JSON.stringify(_extends({
@@ -447,6 +508,8 @@ function describeSx(raw) {
             props: node.props
         } : {}, node.sx ? {
             sx: node.sx
+        } : {}, ((_node_interactions = node.interactions) == null ? void 0 : _node_interactions.length) ? {
+            interactions: node.interactions
         } : {})));
     }
     const around = context.nodes.filter((node)=>node.brief);
@@ -559,6 +622,137 @@ const triplesToSx = (value)=>{
     // An ancestor the outline does not describe: the chain cannot be checked.
     return null;
 }
+/** A class name a class step may toggle: one plain CSS identifier. */ const CLASS_NAME = /^-?[A-Za-z_][A-Za-z0-9_-]{0,40}$/;
+/** Where a redirect may go: a path on the site, or an https address. */ const REDIRECT_URL = /^(\/[^\s<>"']{0,200}|https:\/\/[^\s<>"']{1,200})$/;
+const ELEMENT_STEPS = new Set([
+    'showElement',
+    'hideElement',
+    'toggleElement',
+    'addClass',
+    'removeClass',
+    'toggleClass',
+    'scrollTo',
+    'playVideo'
+]);
+const DELAYED_STEPS = new Set([
+    'showElement',
+    'hideElement',
+    'toggleElement'
+]);
+/** A short id for an interaction Assist adds; the element keeps it. */ function interactionId() {
+    return `ai${Math.random().toString(36).slice(2, 10)}`;
+}
+/**
+ * An `addInteraction` op's interaction, in the shape the element stores it,
+ * or why it was left out. Every element a step acts on is one the request
+ * described; a step's selector is DERIVED from that element's id, as the
+ * Besigner's target picker writes it, never taken from the model.
+ */ function interactionOf(raw, label, target) {
+    const spec = isRecord(raw['interaction']) ? raw['interaction'] : {};
+    const event = spec['event'];
+    if (!ASSIST_EDIT_INTERACTION_EVENTS.includes(event)) {
+        return `${label}: the interaction listens for nothing an element does`;
+    }
+    const rawSteps = (Array.isArray(spec['steps']) ? spec['steps'] : []).filter(isRecord);
+    if (!rawSteps.length) return `${label}: the interaction does nothing`;
+    if (rawSteps.length > ACTION_MAX_STEPS) return `${label}: more than ${ACTION_MAX_STEPS} steps`;
+    const targets = [];
+    const steps = [];
+    for (const [index, rawStep] of rawSteps.entries()){
+        var _rawStep_targetId;
+        const where = `${label}, step ${index + 1}`;
+        const type = rawStep['type'];
+        if (!ASSIST_EDIT_INTERACTION_STEPS.includes(type)) {
+            return `${where}: not a step an interaction may take here`;
+        }
+        const targetId = String((_rawStep_targetId = rawStep['targetId']) != null ? _rawStep_targetId : '');
+        let step;
+        if (ELEMENT_STEPS.has(type)) {
+            const node = target(targetId);
+            if (!node) return `${where}: acts on an element that is not on the canvas described`;
+            targets.push({
+                nodeId: node.id,
+                componentId: node.componentId
+            });
+            step = {
+                type,
+                selector: nodeInteractionSelector(node.id)
+            };
+            if (type === 'addClass' || type === 'removeClass' || type === 'toggleClass') {
+                var _rawStep_className;
+                const className = String((_rawStep_className = rawStep['className']) != null ? _rawStep_className : '').trim();
+                if (!CLASS_NAME.test(className)) return `${where}: names no class`;
+                step = _extends({}, step, {
+                    className
+                });
+            }
+            const delay = Number(rawStep['delayMs']);
+            if (DELAYED_STEPS.has(type) && Number.isInteger(delay) && delay > 0) step = _extends({}, step, {
+                delayMs: delay
+            });
+        } else if (type === 'redirect') {
+            var _rawStep_url;
+            const url = String((_rawStep_url = rawStep['url']) != null ? _rawStep_url : '').trim();
+            if (!REDIRECT_URL.test(url)) return `${where}: redirects nowhere a visitor can go`;
+            step = {
+                type,
+                url
+            };
+        } else if (type === 'siteAlert') {
+            const message = cleanText(rawStep['message'], 200);
+            if (!message || MARKUP.test(message)) return `${where}: the message is empty or carries markup`;
+            step = {
+                type,
+                message
+            };
+        } else {
+            // A drawer or a menu: the element named, or the page's first one.
+            const field = type.endsWith('Drawer') ? 'drawerNodeId' : 'menuNodeId';
+            if (targetId) {
+                const node = target(targetId);
+                if (!node) return `${where}: acts on an element that is not on the canvas described`;
+                targets.push({
+                    nodeId: node.id,
+                    componentId: node.componentId
+                });
+                step = {
+                    type,
+                    [field]: node.id
+                };
+            } else {
+                step = {
+                    type
+                };
+            }
+        }
+        steps.push(step);
+    }
+    const name = cleanText(raw['name'], LAYER_NAME_CHARS).replace(/[<>]/g, '') || CLIENT_INTERACTION_STEP_LABELS[steps[0].type] || 'Interaction';
+    const trigger = _extends({
+        event: event
+    }, spec['everyTime'] === true ? {
+        everyTime: true
+    } : {});
+    const interaction = {
+        id: interactionId(),
+        name,
+        trigger,
+        steps: steps,
+        enabled: true
+    };
+    // The platform's own check, as the Interactions builder saves one: the
+    // element's derived selector stands in for the trigger's.
+    const problem = validateInteraction(_extends({}, interaction, {
+        trigger: _extends({}, trigger, {
+            selector: nodeInteractionSelector('selected')
+        })
+    }));
+    if (problem) return `${label}: ${problem}`;
+    return {
+        interaction,
+        targets
+    };
+}
 /**
  * The tool's input, held to the closed world: every element an op names is
  * one the request described, and an op the structure alone refuses is
@@ -765,6 +959,22 @@ const triplesToSx = (value)=>{
                     });
                     return;
                 }
+            case 'addInteraction':
+                {
+                    const node = described(raw['nodeId'], label);
+                    if (!node) return;
+                    const built = interactionOf(raw, label, (id)=>typeof id === 'string' && byId.has(id) && id !== CANVAS_ROOT_ELEMENT_ID && !insideRemoved(id) ? byId.get(id) : null);
+                    if (typeof built === 'string') {
+                        dropped.push(built);
+                        return;
+                    }
+                    pending.push(_extends({
+                        op,
+                        nodeId: node.id,
+                        componentId: node.componentId
+                    }, built));
+                    return;
+                }
             default:
                 dropped.push(`${label}: not an operation the canvas takes`);
         }