@webiny/ai-powerups 6.4.11 → 6.6.0-alpha.1

package/admin/presentation/CmsContentGeneration/feature.js

@@ -0,0 +1,17 @@
+import { createFeature } from "@webiny/feature/admin";
+import { CmsGenerateContentPresenter } from "./abstractions.js";
+import { CmsGenerateContentPresenter as external_CmsGenerateContentPresenter_js_CmsGenerateContentPresenter } from "./CmsGenerateContentPresenter.js";
+const CmsGenerateContentFeature = createFeature({
+    name: "CmsContentGeneration/Presenter",
+    register (container) {
+        container.register(external_CmsGenerateContentPresenter_js_CmsGenerateContentPresenter);
+    },
+    resolve (container) {
+        return {
+            presenter: container.resolve(CmsGenerateContentPresenter)
+        };
+    }
+});
+export { CmsGenerateContentFeature };
+
+//# sourceMappingURL=feature.js.map

package/admin/presentation/CmsContentGeneration/feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/presentation/CmsContentGeneration/feature.js","sources":["../../../../src/admin/presentation/CmsContentGeneration/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { CmsGenerateContentPresenter as Abstraction } from \"./abstractions.js\";\nimport { CmsGenerateContentPresenter } from \"./CmsGenerateContentPresenter.js\";\n\nexport const CmsGenerateContentFeature = createFeature({\n    name: \"CmsContentGeneration/Presenter\",\n    register(container) {\n        container.register(CmsGenerateContentPresenter);\n    },\n    resolve(container) {\n        return {\n            presenter: container.resolve(Abstraction)\n        };\n    }\n});\n"],"names":["CmsGenerateContentFeature","createFeature","container","CmsGenerateContentPresenter","Abstraction"],"mappings":";;;AAIO,MAAMA,4BAA4BC,cAAc;IACnD,MAAM;IACN,UAASC,SAAS;QACdA,UAAU,QAAQ,CAACC;IACvB;IACA,SAAQD,SAAS;QACb,OAAO;YACH,WAAWA,UAAU,OAAO,CAACE;QACjC;IACJ;AACJ"}

package/admin/presentation/CmsEntryWizard/CmsEntryWizard.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const CmsEntryWizard: (() => React.JSX.Element) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element;
+};

package/admin/presentation/CmsEntryWizard/CmsEntryWizard.js

@@ -0,0 +1,113 @@
+import react, { useEffect, useRef } from "react";
+import { observer } from "mobx-react-lite";
+import { FormView } from "@webiny/app-admin";
+import { BetaBadge, Button, Heading, OverlayLoader, useToast } from "@webiny/admin-ui";
+import { useFeature } from "@webiny/app";
+import { useWebsockets } from "@webiny/app-websockets";
+import { useModel } from "@webiny/app-headless-cms/admin/components/ModelProvider/useModel.js";
+import { useContentEntryFormPresenter } from "@webiny/app-headless-cms/exports/admin/cms/entry/editor.js";
+import { CmsGenerateContentFeature } from "../CmsContentGeneration/feature.js";
+import { decompressGzipBase64 } from "../WbContentGeneration/decompressGzipBase64.js";
+function formatElapsed(totalSeconds) {
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+}
+const WS_ACTION_CONTENT = "aiPowerUps.generateEntryContent.content";
+const WS_ACTION_ERROR = "aiPowerUps.generateEntryContent.error";
+const CmsEntryWizard = observer(()=>{
+    const { presenter } = useFeature(CmsGenerateContentFeature);
+    const formPresenter = useContentEntryFormPresenter();
+    const { model } = useModel();
+    const vm = presenter.vm;
+    const wasSubmitting = useRef(false);
+    const websockets = useWebsockets();
+    const toast = useToast();
+    useEffect(()=>{
+        presenter.init().catch((err)=>{
+            console.error("Failed to initialize AI entry wizard", err);
+        });
+    }, []);
+    useEffect(()=>{
+        const contentSubscription = websockets.onMessage(WS_ACTION_CONTENT, async (message)=>{
+            const responseText = await decompressGzipBase64(message.data.value);
+            try {
+                const entryValues = await presenter.processAiResponse(responseText);
+                formPresenter.newEntry(entryValues);
+            } catch (e) {
+                console.error("Failed to process AI response", e);
+                toast.showWarningToast({
+                    title: "Failed to process AI response",
+                    description: "Open the console for more details."
+                });
+                presenter.cancelPrompt();
+            }
+        });
+        const errorSubscription = websockets.onMessage(WS_ACTION_ERROR, async (message)=>{
+            toast.showWarningToast({
+                title: "Failed to generate content",
+                description: message.data.message
+            });
+            presenter.cancelPrompt();
+        });
+        return ()=>{
+            contentSubscription.off();
+            errorSubscription.off();
+        };
+    }, []);
+    useEffect(()=>{
+        wasSubmitting.current && !vm.submitting && vm.timedOut;
+        wasSubmitting.current = vm.submitting;
+    }, [
+        vm.submitting
+    ]);
+    useEffect(()=>{
+        if (vm.timedOut) toast.showWarningToast({
+            title: "Request timed out",
+            description: "The AI generation took too long. Please try again."
+        });
+    }, [
+        vm.timedOut
+    ]);
+    const handleSubmit = async ()=>{
+        await presenter.submit(model.modelId);
+    };
+    const handleSkip = ()=>{
+        formPresenter.newEntry();
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-center pt-xl"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "bg-neutral-base rounded-lg p-lg flex flex-col gap-md",
+        style: {
+            width: 600
+        }
+    }, /*#__PURE__*/ react.createElement(Heading, {
+        level: 4,
+        className: "flex items-center gap-sm"
+    }, "Generate Entry Content ", /*#__PURE__*/ react.createElement(BetaBadge, null)), /*#__PURE__*/ react.createElement("p", {
+        className: "text-neutral-muted"
+    }, "Use AI to generate content for this entry. Configure the prompt and click Generate, or skip to create an empty entry."), vm.loading ? /*#__PURE__*/ react.createElement(OverlayLoader, {
+        text: "Loading..."
+    }) : null, vm.submitting ? /*#__PURE__*/ react.createElement(OverlayLoader, {
+        className: "bg-neutral-base/90",
+        text: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", null, "Generating content... ", formatElapsed(vm.elapsedSeconds)), /*#__PURE__*/ react.createElement("div", {
+            className: "text-sm text-neutral-muted pt-xs"
+        }, "Content generation can take a few minutes, depending on the model you're using."))
+    }) : null, vm.form ? /*#__PURE__*/ react.createElement(FormView, {
+        name: "CmsEntryWizard",
+        form: vm.form
+    }) : null, /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-end gap-sm"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        variant: "secondary",
+        onClick: handleSkip
+    }, "Skip"), /*#__PURE__*/ react.createElement(Button, {
+        variant: "primary",
+        onClick: handleSubmit,
+        disabled: vm.loading || vm.submitting
+    }, "Generate"))));
+});
+export { CmsEntryWizard };
+
+//# sourceMappingURL=CmsEntryWizard.js.map

package/admin/presentation/CmsEntryWizard/CmsEntryWizard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/presentation/CmsEntryWizard/CmsEntryWizard.js","sources":["../../../../src/admin/presentation/CmsEntryWizard/CmsEntryWizard.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { FormView } from \"@webiny/app-admin\";\nimport { BetaBadge } from \"@webiny/admin-ui\";\nimport { Button, Heading, OverlayLoader, useToast } from \"@webiny/admin-ui\";\nimport { useFeature } from \"@webiny/app\";\nimport type { IncomingGenericData } from \"@webiny/app-websockets\";\nimport { useWebsockets } from \"@webiny/app-websockets\";\nimport { useModel } from \"@webiny/app-headless-cms/admin/components/ModelProvider/useModel.js\";\nimport { useContentEntryFormPresenter } from \"@webiny/app-headless-cms/exports/admin/cms/entry/editor.js\";\nimport { CmsGenerateContentFeature } from \"~/admin/presentation/CmsContentGeneration/feature.js\";\nimport { decompressGzipBase64 } from \"~/admin/presentation/WbContentGeneration/decompressGzipBase64.js\";\n\nfunction formatElapsed(totalSeconds: number): string {\n    const minutes = Math.floor(totalSeconds / 60);\n    const seconds = totalSeconds % 60;\n    return `${minutes}:${seconds.toString().padStart(2, \"0\")}`;\n}\n\nconst WS_ACTION_CONTENT = \"aiPowerUps.generateEntryContent.content\";\nconst WS_ACTION_ERROR = \"aiPowerUps.generateEntryContent.error\";\n\ninterface GenerateEntryContentMessage extends IncomingGenericData {\n    action: typeof WS_ACTION_CONTENT;\n    data: {\n        compression: \"gzip\";\n        value: string;\n    };\n}\n\ninterface GenerateEntryContentErrorMessage extends IncomingGenericData {\n    action: typeof WS_ACTION_ERROR;\n    data: {\n        message: string;\n    };\n}\n\nexport const CmsEntryWizard = observer(() => {\n    const { presenter } = useFeature(CmsGenerateContentFeature);\n    const formPresenter = useContentEntryFormPresenter();\n    const { model } = useModel();\n    const vm = presenter.vm;\n    const wasSubmitting = useRef(false);\n    const websockets = useWebsockets();\n    const toast = useToast();\n\n    useEffect(() => {\n        presenter.init().catch(err => {\n            console.error(\"Failed to initialize AI entry wizard\", err);\n        });\n    }, []);\n\n    useEffect(() => {\n        const contentSubscription = websockets.onMessage<GenerateEntryContentMessage>(\n            WS_ACTION_CONTENT,\n            async message => {\n                const responseText = await decompressGzipBase64(message.data.value);\n                try {\n                    const entryValues = await presenter.processAiResponse(responseText);\n                    formPresenter.newEntry(entryValues);\n                } catch (e) {\n                    console.error(\"Failed to process AI response\", e);\n                    toast.showWarningToast({\n                        title: \"Failed to process AI response\",\n                        description: \"Open the console for more details.\"\n                    });\n                    presenter.cancelPrompt();\n                }\n            }\n        );\n\n        const errorSubscription = websockets.onMessage<GenerateEntryContentErrorMessage>(\n            WS_ACTION_ERROR,\n            async message => {\n                toast.showWarningToast({\n                    title: \"Failed to generate content\",\n                    description: message.data.message\n                });\n                presenter.cancelPrompt();\n            }\n        );\n\n        return () => {\n            contentSubscription.off();\n            errorSubscription.off();\n        };\n    }, []);\n\n    useEffect(() => {\n        if (wasSubmitting.current && !vm.submitting && !vm.timedOut) {\n            // Generation completed successfully — form was created via newEntry()\n        }\n        wasSubmitting.current = vm.submitting;\n    }, [vm.submitting]);\n\n    useEffect(() => {\n        if (vm.timedOut) {\n            toast.showWarningToast({\n                title: \"Request timed out\",\n                description: \"The AI generation took too long. Please try again.\"\n            });\n        }\n    }, [vm.timedOut]);\n\n    const handleSubmit = async () => {\n        await presenter.submit(model.modelId);\n    };\n\n    const handleSkip = () => {\n        formPresenter.newEntry();\n    };\n\n    return (\n        <div className=\"flex justify-center pt-xl\">\n            <div\n                className=\"bg-neutral-base rounded-lg p-lg flex flex-col gap-md\"\n                style={{ width: 600 }}\n            >\n                <Heading level={4} className=\"flex items-center gap-sm\">\n                    Generate Entry Content <BetaBadge />\n                </Heading>\n                <p className=\"text-neutral-muted\">\n                    Use AI to generate content for this entry. Configure the prompt and click\n                    Generate, or skip to create an empty entry.\n                </p>\n                {vm.loading ? <OverlayLoader text={\"Loading...\"} /> : null}\n                {vm.submitting ? (\n                    <OverlayLoader\n                        className={\"bg-neutral-base/90\"}\n                        text={\n                            <>\n                                <div>Generating content... {formatElapsed(vm.elapsedSeconds)}</div>\n                                <div className=\"text-sm text-neutral-muted pt-xs\">\n                                    Content generation can take a few minutes, depending on the\n                                    model you&apos;re using.\n                                </div>\n                            </>\n                        }\n                    />\n                ) : null}\n                {vm.form ? <FormView name=\"CmsEntryWizard\" form={vm.form} /> : null}\n                <div className=\"flex justify-end gap-sm\">\n                    <Button variant=\"secondary\" onClick={handleSkip}>\n                        Skip\n                    </Button>\n                    <Button\n                        variant=\"primary\"\n                        onClick={handleSubmit}\n                        disabled={vm.loading || vm.submitting}\n                    >\n                        Generate\n                    </Button>\n                </div>\n            </div>\n        </div>\n    );\n});\n"],"names":["formatElapsed","totalSeconds","minutes","Math","seconds","WS_ACTION_CONTENT","WS_ACTION_ERROR","CmsEntryWizard","observer","presenter","useFeature","CmsGenerateContentFeature","formPresenter","useContentEntryFormPresenter","model","useModel","vm","wasSubmitting","useRef","websockets","useWebsockets","toast","useToast","useEffect","err","console","contentSubscription","message","responseText","decompressGzipBase64","entryValues","e","errorSubscription","handleSubmit","handleSkip","Heading","BetaBadge","OverlayLoader","FormView","Button"],"mappings":"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"}

package/admin/presentation/CmsEntryWizard/CmsEntryWizardGate.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const CmsEntryWizardGate: (() => React.JSX.Element) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element;
+};

package/admin/presentation/CmsEntryWizard/CmsEntryWizardGate.js

@@ -0,0 +1,19 @@
+import react, { useEffect } from "react";
+import { observer } from "mobx-react-lite";
+import { useModel } from "@webiny/app-headless-cms/admin/components/ModelProvider/useModel.js";
+import { useContentEntryFormPresenter } from "@webiny/app-headless-cms/exports/admin/cms/entry/editor.js";
+import { CmsEntryWizard } from "./CmsEntryWizard.js";
+const CmsEntryWizardGate = observer(()=>{
+    const { model } = useModel();
+    const formPresenter = useContentEntryFormPresenter();
+    const showWizard = model.settings?.aiEntryWizard === true;
+    useEffect(()=>{
+        if (!showWizard) formPresenter.newEntry();
+    }, [
+        showWizard
+    ]);
+    return /*#__PURE__*/ react.createElement(CmsEntryWizard, null);
+});
+export { CmsEntryWizardGate };
+
+//# sourceMappingURL=CmsEntryWizardGate.js.map

package/admin/presentation/CmsEntryWizard/CmsEntryWizardGate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/presentation/CmsEntryWizard/CmsEntryWizardGate.js","sources":["../../../../src/admin/presentation/CmsEntryWizard/CmsEntryWizardGate.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useModel } from \"@webiny/app-headless-cms/admin/components/ModelProvider/useModel.js\";\nimport { useContentEntryFormPresenter } from \"@webiny/app-headless-cms/exports/admin/cms/entry/editor.js\";\nimport { CmsEntryWizard } from \"./CmsEntryWizard.js\";\n\nexport const CmsEntryWizardGate = observer(() => {\n    const { model } = useModel();\n    const formPresenter = useContentEntryFormPresenter();\n\n    const showWizard = model.settings?.aiEntryWizard === true;\n\n    useEffect(() => {\n        if (!showWizard) {\n            formPresenter.newEntry();\n        }\n    }, [showWizard]);\n\n    return <CmsEntryWizard />;\n});\n"],"names":["CmsEntryWizardGate","observer","model","useModel","formPresenter","useContentEntryFormPresenter","showWizard","useEffect","CmsEntryWizard"],"mappings":";;;;;AAMO,MAAMA,qBAAqBC,SAAS;IACvC,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAMC,gBAAgBC;IAEtB,MAAMC,aAAaJ,MAAM,QAAQ,EAAE,kBAAkB;IAErDK,UAAU;QACN,IAAI,CAACD,YACDF,cAAc,QAAQ;IAE9B,GAAG;QAACE;KAAW;IAEf,OAAO,WAAP,GAAO,oBAACE,gBAAcA;AAC1B"}

package/admin/presentation/CmsEntryWizard/Extension.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const CmsEntryWizardExtension: () => React.JSX.Element;

package/admin/presentation/CmsEntryWizard/Extension.js

@@ -0,0 +1,10 @@
+import react from "react";
+import { InternalContentEntryEditorConfig } from "@webiny/app-headless-cms/admin/config/contentEntries/index.js";
+import { CmsEntryWizardGate } from "./CmsEntryWizardGate.js";
+const CmsEntryWizardExtension = ()=>/*#__PURE__*/ react.createElement(InternalContentEntryEditorConfig, null, /*#__PURE__*/ react.createElement(InternalContentEntryEditorConfig.NewEntryWizard, {
+        name: "aiEntryWizard",
+        element: /*#__PURE__*/ react.createElement(CmsEntryWizardGate, null)
+    }));
+export { CmsEntryWizardExtension };
+
+//# sourceMappingURL=Extension.js.map

package/admin/presentation/CmsEntryWizard/Extension.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/presentation/CmsEntryWizard/Extension.js","sources":["../../../../src/admin/presentation/CmsEntryWizard/Extension.tsx"],"sourcesContent":["import React from \"react\";\nimport { InternalContentEntryEditorConfig } from \"@webiny/app-headless-cms/admin/config/contentEntries/index.js\";\nimport { CmsEntryWizardGate } from \"./CmsEntryWizardGate.js\";\n\nexport const CmsEntryWizardExtension = () => {\n    return (\n        <InternalContentEntryEditorConfig>\n            <InternalContentEntryEditorConfig.NewEntryWizard\n                name={\"aiEntryWizard\"}\n                element={<CmsEntryWizardGate />}\n            />\n        </InternalContentEntryEditorConfig>\n    );\n};\n"],"names":["CmsEntryWizardExtension","InternalContentEntryEditorConfig","CmsEntryWizardGate"],"mappings":";;;AAIO,MAAMA,0BAA0B,IAC5B,WAAP,GACI,oBAACC,kCAAgCA,MAAAA,WAAAA,GAC7B,oBAACA,iCAAiC,cAAc;QAC5C,MAAM;QACN,uBAAS,oBAACC,oBAAkBA"}

package/admin/presentation/ProjectsSettings.js

@@ -16,8 +16,8 @@ class ProjectsSettingsImpl {
                         instructions: f.text().label("Instructions").description("System-prompt-style guidance that will be sent to the LLM when this project is selected.").renderer("textarea", {
                             rows: 6
                         }),
-                        defaultReaderPersonaId: f.text().label("Default Reader Persona").description("Auto-populates the reader persona when this project is selected.").options((formModel)=>{
-                            const data = formModel.getData();
+                        defaultReaderPersonaId: f.text().label("Default Reader Persona").description("Auto-populates the reader persona when this project is selected.").options(({ form })=>{
+                            const data = form.getData();
                             const presets = data?.readerPersonas?.presets;
                             if (!presets || 0 === presets.length) return [];
                             return presets.map((preset)=>({
@@ -25,8 +25,8 @@ class ProjectsSettingsImpl {
                                     value: preset.id
                                 }));
                         }),
-                        defaultWriterPersonaId: f.text().label("Default Writer Persona").description("Auto-populates the writer persona when this project is selected.").options((formModel)=>{
-                            const data = formModel.getData();
+                        defaultWriterPersonaId: f.text().label("Default Writer Persona").description("Auto-populates the writer persona when this project is selected.").options(({ form })=>{
+                            const data = form.getData();
                             const presets = data?.writerPersonas?.presets;
                             if (!presets || 0 === presets.length) return [];
                             return presets.map((preset)=>({

package/admin/presentation/ProjectsSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin/presentation/ProjectsSettings.js","sources":["../../../src/admin/presentation/ProjectsSettings.ts"],"sourcesContent":["import { generateAlphaNumericId } from \"@webiny/utils\";\nimport type { IFormModel } from \"@webiny/app-admin\";\nimport { AiPowerUpsSettingsGroup } from \"./AiPowerUpsSettings/settingsGroup.js\";\n\nclass ProjectsSettingsImpl implements AiPowerUpsSettingsGroup.Interface {\n    name = \"projects\";\n    label = \"Projects\";\n    description = \"Predefined prompting contexts.\";\n\n    buildForm(form: AiPowerUpsSettingsGroup.FormBuilder): void {\n        form.fields(fields => ({\n            presets: fields\n                .object()\n                .label(\"Presets\")\n                .renderer(\"objectAccordionMultiple\", {\n                    container: false,\n                    addItemLabel: \"Add project\",\n                    itemTitle: (data, index) => String(data.name || `Project #${index + 1}`)\n                })\n                .fields(f => ({\n                    id: f\n                        .text()\n                        .hidden()\n                        .defaultValue(() => generateAlphaNumericId(10)),\n                    name: f\n                        .text()\n                        .label(\"Name\")\n                        .required(\"Name is required\")\n                        .description(\"This name will be used to identify the project in the UI.\"),\n                    description: f\n                        .text()\n                        .label(\"Description\")\n                        .description(\n                            \"Human-facing description shown in the project picker. Not sent to the LLM.\"\n                        )\n                        .renderer(\"textarea\", { rows: 3 }),\n                    instructions: f\n                        .text()\n                        .label(\"Instructions\")\n                        .description(\n                            \"System-prompt-style guidance that will be sent to the LLM when this project is selected.\"\n                        )\n                        .renderer(\"textarea\", { rows: 6 }),\n                    defaultReaderPersonaId: f\n                        .text()\n                        .label(\"Default Reader Persona\")\n                        .description(\n                            \"Auto-populates the reader persona when this project is selected.\"\n                        )\n                        .options((formModel: IFormModel) => {\n                            const data = formModel.getData();\n                            const presets = data?.readerPersonas?.presets;\n                            if (!presets || presets.length === 0) {\n                                return [];\n                            }\n                            return presets.map((preset: { id: string; name: string }) => ({\n                                label: preset.name,\n                                value: preset.id\n                            }));\n                        }),\n                    defaultWriterPersonaId: f\n                        .text()\n                        .label(\"Default Writer Persona\")\n                        .description(\n                            \"Auto-populates the writer persona when this project is selected.\"\n                        )\n                        .options((formModel: IFormModel) => {\n                            const data = formModel.getData();\n                            const presets = data?.writerPersonas?.presets;\n                            if (!presets || presets.length === 0) {\n                                return [];\n                            }\n                            return presets.map((preset: { id: string; name: string }) => ({\n                                label: preset.name,\n                                value: preset.id\n                            }));\n                        }),\n                    files: f\n                        .file()\n                        .label(\"Files\")\n                        .list()\n                        .description(\n                            \"Add files from the library to include as context for the LLM.\"\n                        )\n                        .note(\n                            \"Only files containing text will be sent to the LLM (.mdx, .md, .html, .json, .csv, .txt, etc.)\"\n                        )\n                }))\n                .list()\n        }));\n\n        form.layout(layout => [layout.row(\"presets\")]);\n    }\n}\n\nexport const ProjectsSettings = AiPowerUpsSettingsGroup.createImplementation({\n    implementation: ProjectsSettingsImpl,\n    dependencies: []\n});\n"],"names":["ProjectsSettingsImpl","form","fields","data","index","String","f","generateAlphaNumericId","formModel","presets","preset","layout","ProjectsSettings","AiPowerUpsSettingsGroup"],"mappings":";;AAIA,MAAMA;IAKF,UAAUC,IAAyC,EAAQ;QACvDA,KAAK,MAAM,CAACC,CAAAA,SAAW;gBACnB,SAASA,OACJ,MAAM,GACN,KAAK,CAAC,WACN,QAAQ,CAAC,2BAA2B;oBACjC,WAAW;oBACX,cAAc;oBACd,WAAW,CAACC,MAAMC,QAAUC,OAAOF,KAAK,IAAI,IAAI,CAAC,SAAS,EAAEC,QAAQ,GAAG;gBAC3E,GACC,MAAM,CAACE,CAAAA,IAAM;wBACV,IAAIA,EACC,IAAI,GACJ,MAAM,GACN,YAAY,CAAC,IAAMC,uBAAuB;wBAC/C,MAAMD,EACD,IAAI,GACJ,KAAK,CAAC,QACN,QAAQ,CAAC,oBACT,WAAW,CAAC;wBACjB,aAAaA,EACR,IAAI,GACJ,KAAK,CAAC,eACN,WAAW,CACR,8EAEH,QAAQ,CAAC,YAAY;4BAAE,MAAM;wBAAE;wBACpC,cAAcA,EACT,IAAI,GACJ,KAAK,CAAC,gBACN,WAAW,CACR,4FAEH,QAAQ,CAAC,YAAY;4BAAE,MAAM;wBAAE;wBACpC,wBAAwBA,EACnB,IAAI,GACJ,KAAK,CAAC,0BACN,WAAW,CACR,oEAEH,OAAO,CAAC,CAACE;4BACN,MAAML,OAAOK,UAAU,OAAO;4BAC9B,MAAMC,UAAUN,MAAM,gBAAgB;4BACtC,IAAI,CAACM,WAAWA,AAAmB,MAAnBA,QAAQ,MAAM,EAC1B,OAAO,EAAE;4BAEb,OAAOA,QAAQ,GAAG,CAAC,CAACC,SAA0C;oCAC1D,OAAOA,OAAO,IAAI;oCAClB,OAAOA,OAAO,EAAE;gCACpB;wBACJ;wBACJ,wBAAwBJ,EACnB,IAAI,GACJ,KAAK,CAAC,0BACN,WAAW,CACR,oEAEH,OAAO,CAAC,CAACE;4BACN,MAAML,OAAOK,UAAU,OAAO;4BAC9B,MAAMC,UAAUN,MAAM,gBAAgB;4BACtC,IAAI,CAACM,WAAWA,AAAmB,MAAnBA,QAAQ,MAAM,EAC1B,OAAO,EAAE;4BAEb,OAAOA,QAAQ,GAAG,CAAC,CAACC,SAA0C;oCAC1D,OAAOA,OAAO,IAAI;oCAClB,OAAOA,OAAO,EAAE;gCACpB;wBACJ;wBACJ,OAAOJ,EACF,IAAI,GACJ,KAAK,CAAC,SACN,IAAI,GACJ,WAAW,CACR,iEAEH,IAAI,CACD;oBAEZ,IACC,IAAI;YACb;QAEAL,KAAK,MAAM,CAACU,CAAAA,SAAU;gBAACA,OAAO,GAAG,CAAC;aAAW;IACjD;;aAvFA,IAAI,GAAG;aACP,KAAK,GAAG;aACR,WAAW,GAAG;;AAsFlB;AAEO,MAAMC,mBAAmBC,wBAAwB,oBAAoB,CAAC;IACzE,gBAAgBb;IAChB,cAAc,EAAE;AACpB"}
+{"version":3,"file":"admin/presentation/ProjectsSettings.js","sources":["../../../src/admin/presentation/ProjectsSettings.ts"],"sourcesContent":["import { generateAlphaNumericId } from \"@webiny/utils\";\nimport { AiPowerUpsSettingsGroup } from \"./AiPowerUpsSettings/settingsGroup.js\";\n\nclass ProjectsSettingsImpl implements AiPowerUpsSettingsGroup.Interface {\n    name = \"projects\";\n    label = \"Projects\";\n    description = \"Predefined prompting contexts.\";\n\n    buildForm(form: AiPowerUpsSettingsGroup.FormBuilder): void {\n        form.fields(fields => ({\n            presets: fields\n                .object()\n                .label(\"Presets\")\n                .renderer(\"objectAccordionMultiple\", {\n                    container: false,\n                    addItemLabel: \"Add project\",\n                    itemTitle: (data, index) => String(data.name || `Project #${index + 1}`)\n                })\n                .fields(f => ({\n                    id: f\n                        .text()\n                        .hidden()\n                        .defaultValue(() => generateAlphaNumericId(10)),\n                    name: f\n                        .text()\n                        .label(\"Name\")\n                        .required(\"Name is required\")\n                        .description(\"This name will be used to identify the project in the UI.\"),\n                    description: f\n                        .text()\n                        .label(\"Description\")\n                        .description(\n                            \"Human-facing description shown in the project picker. Not sent to the LLM.\"\n                        )\n                        .renderer(\"textarea\", { rows: 3 }),\n                    instructions: f\n                        .text()\n                        .label(\"Instructions\")\n                        .description(\n                            \"System-prompt-style guidance that will be sent to the LLM when this project is selected.\"\n                        )\n                        .renderer(\"textarea\", { rows: 6 }),\n                    defaultReaderPersonaId: f\n                        .text()\n                        .label(\"Default Reader Persona\")\n                        .description(\n                            \"Auto-populates the reader persona when this project is selected.\"\n                        )\n                        .options(({ form }) => {\n                            const data = form.getData();\n                            const presets = data?.readerPersonas?.presets;\n                            if (!presets || presets.length === 0) {\n                                return [];\n                            }\n                            return presets.map((preset: { id: string; name: string }) => ({\n                                label: preset.name,\n                                value: preset.id\n                            }));\n                        }),\n                    defaultWriterPersonaId: f\n                        .text()\n                        .label(\"Default Writer Persona\")\n                        .description(\n                            \"Auto-populates the writer persona when this project is selected.\"\n                        )\n                        .options(({ form }) => {\n                            const data = form.getData();\n                            const presets = data?.writerPersonas?.presets;\n                            if (!presets || presets.length === 0) {\n                                return [];\n                            }\n                            return presets.map((preset: { id: string; name: string }) => ({\n                                label: preset.name,\n                                value: preset.id\n                            }));\n                        }),\n                    files: f\n                        .file()\n                        .label(\"Files\")\n                        .list()\n                        .description(\n                            \"Add files from the library to include as context for the LLM.\"\n                        )\n                        .note(\n                            \"Only files containing text will be sent to the LLM (.mdx, .md, .html, .json, .csv, .txt, etc.)\"\n                        )\n                }))\n                .list()\n        }));\n\n        form.layout(layout => [layout.row(\"presets\")]);\n    }\n}\n\nexport const ProjectsSettings = AiPowerUpsSettingsGroup.createImplementation({\n    implementation: ProjectsSettingsImpl,\n    dependencies: []\n});\n"],"names":["ProjectsSettingsImpl","form","fields","data","index","String","f","generateAlphaNumericId","presets","preset","layout","ProjectsSettings","AiPowerUpsSettingsGroup"],"mappings":";;AAGA,MAAMA;IAKF,UAAUC,IAAyC,EAAQ;QACvDA,KAAK,MAAM,CAACC,CAAAA,SAAW;gBACnB,SAASA,OACJ,MAAM,GACN,KAAK,CAAC,WACN,QAAQ,CAAC,2BAA2B;oBACjC,WAAW;oBACX,cAAc;oBACd,WAAW,CAACC,MAAMC,QAAUC,OAAOF,KAAK,IAAI,IAAI,CAAC,SAAS,EAAEC,QAAQ,GAAG;gBAC3E,GACC,MAAM,CAACE,CAAAA,IAAM;wBACV,IAAIA,EACC,IAAI,GACJ,MAAM,GACN,YAAY,CAAC,IAAMC,uBAAuB;wBAC/C,MAAMD,EACD,IAAI,GACJ,KAAK,CAAC,QACN,QAAQ,CAAC,oBACT,WAAW,CAAC;wBACjB,aAAaA,EACR,IAAI,GACJ,KAAK,CAAC,eACN,WAAW,CACR,8EAEH,QAAQ,CAAC,YAAY;4BAAE,MAAM;wBAAE;wBACpC,cAAcA,EACT,IAAI,GACJ,KAAK,CAAC,gBACN,WAAW,CACR,4FAEH,QAAQ,CAAC,YAAY;4BAAE,MAAM;wBAAE;wBACpC,wBAAwBA,EACnB,IAAI,GACJ,KAAK,CAAC,0BACN,WAAW,CACR,oEAEH,OAAO,CAAC,CAAC,EAAEL,IAAI,EAAE;4BACd,MAAME,OAAOF,KAAK,OAAO;4BACzB,MAAMO,UAAUL,MAAM,gBAAgB;4BACtC,IAAI,CAACK,WAAWA,AAAmB,MAAnBA,QAAQ,MAAM,EAC1B,OAAO,EAAE;4BAEb,OAAOA,QAAQ,GAAG,CAAC,CAACC,SAA0C;oCAC1D,OAAOA,OAAO,IAAI;oCAClB,OAAOA,OAAO,EAAE;gCACpB;wBACJ;wBACJ,wBAAwBH,EACnB,IAAI,GACJ,KAAK,CAAC,0BACN,WAAW,CACR,oEAEH,OAAO,CAAC,CAAC,EAAEL,IAAI,EAAE;4BACd,MAAME,OAAOF,KAAK,OAAO;4BACzB,MAAMO,UAAUL,MAAM,gBAAgB;4BACtC,IAAI,CAACK,WAAWA,AAAmB,MAAnBA,QAAQ,MAAM,EAC1B,OAAO,EAAE;4BAEb,OAAOA,QAAQ,GAAG,CAAC,CAACC,SAA0C;oCAC1D,OAAOA,OAAO,IAAI;oCAClB,OAAOA,OAAO,EAAE;gCACpB;wBACJ;wBACJ,OAAOH,EACF,IAAI,GACJ,KAAK,CAAC,SACN,IAAI,GACJ,WAAW,CACR,iEAEH,IAAI,CACD;oBAEZ,IACC,IAAI;YACb;QAEAL,KAAK,MAAM,CAACS,CAAAA,SAAU;gBAACA,OAAO,GAAG,CAAC;aAAW;IACjD;;aAvFA,IAAI,GAAG;aACP,KAAK,GAAG;aACR,WAAW,GAAG;;AAsFlB;AAEO,MAAMC,mBAAmBC,wBAAwB,oBAAoB,CAAC;IACzE,gBAAgBZ;IAChB,cAAc,EAAE;AACpB"}

package/admin/presentation/ProvidersSettings.js

@@ -19,7 +19,7 @@ class ProviderSettingsImpl {
                 }).fields((f)=>({
                         id: f.text().hidden().defaultValue(()=>generateAlphaNumericId(10)),
                         name: f.text().label("Name").required("Name is required"),
-                        model: f.text().label("Model").required("Model is required").options(()=>this.getModelOptions()),
+                        model: f.text().label("Model").required("Model is required").options(()=>this.getModelOptions()).renderer("autoComplete"),
                         apiKey: f.text().label("API Key").required("API Key is required")
                     })).list()
             }));

package/admin/presentation/ProvidersSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin/presentation/ProvidersSettings.js","sources":["../../../src/admin/presentation/ProvidersSettings.ts"],"sourcesContent":["import { generateAlphaNumericId } from \"@webiny/utils\";\nimport { AiPowerUpsSettingsGroup } from \"./AiPowerUpsSettings/settingsGroup.js\";\nimport {\n    ListModelsUseCase,\n    ListModelsRepository\n} from \"~/admin/features/listModels/abstractions.js\";\n\nclass ProviderSettingsImpl implements AiPowerUpsSettingsGroup.Interface {\n    name = \"providers\";\n    label = \"Providers\";\n    description = \"Configure AI model providers.\";\n\n    constructor(\n        private useCase: ListModelsUseCase.Interface,\n        private repository: ListModelsRepository.Interface\n    ) {}\n\n    buildForm(form: AiPowerUpsSettingsGroup.FormBuilder): void {\n        void this.useCase.execute();\n\n        form.fields(fields => ({\n            presets: fields\n                .object()\n                .label(\"Presets\")\n                .renderer(\"objectAccordionMultiple\", {\n                    container: false,\n                    addItemLabel: \"Add provider\",\n                    itemTitle: (data, index) => String(data.name || `Provider #${index + 1}`)\n                })\n                .fields(f => ({\n                    id: f\n                        .text()\n                        .hidden()\n                        .defaultValue(() => generateAlphaNumericId(10)),\n                    name: f.text().label(\"Name\").required(\"Name is required\"),\n                    model: f\n                        .text()\n                        .label(\"Model\")\n                        .required(\"Model is required\")\n                        .options(() => this.getModelOptions()),\n                    apiKey: f.text().label(\"API Key\").required(\"API Key is required\")\n                }))\n                .list()\n        }));\n\n        form.layout(layout => [layout.row(\"presets\")]);\n    }\n\n    private getModelOptions() {\n        return this.repository.getModels().map(model => ({\n            label: `${model.modelName} (${model.modelId})`,\n            value: `${model.providerId}/${model.modelId}`\n        }));\n    }\n}\n\nexport const ProviderSettings = AiPowerUpsSettingsGroup.createImplementation({\n    implementation: ProviderSettingsImpl,\n    dependencies: [ListModelsUseCase, ListModelsRepository]\n});\n"],"names":["ProviderSettingsImpl","useCase","repository","form","fields","data","index","String","f","generateAlphaNumericId","layout","model","ProviderSettings","AiPowerUpsSettingsGroup","ListModelsUseCase","ListModelsRepository"],"mappings":";;;AAOA,MAAMA;IAKF,YACYC,OAAoC,EACpCC,UAA0C,CACpD;aAFUD,OAAO,GAAPA;aACAC,UAAU,GAAVA;aANZ,IAAI,GAAG;aACP,KAAK,GAAG;aACR,WAAW,GAAG;IAKX;IAEH,UAAUC,IAAyC,EAAQ;QAClD,IAAI,CAAC,OAAO,CAAC,OAAO;QAEzBA,KAAK,MAAM,CAACC,CAAAA,SAAW;gBACnB,SAASA,OACJ,MAAM,GACN,KAAK,CAAC,WACN,QAAQ,CAAC,2BAA2B;oBACjC,WAAW;oBACX,cAAc;oBACd,WAAW,CAACC,MAAMC,QAAUC,OAAOF,KAAK,IAAI,IAAI,CAAC,UAAU,EAAEC,QAAQ,GAAG;gBAC5E,GACC,MAAM,CAACE,CAAAA,IAAM;wBACV,IAAIA,EACC,IAAI,GACJ,MAAM,GACN,YAAY,CAAC,IAAMC,uBAAuB;wBAC/C,MAAMD,EAAE,IAAI,GAAG,KAAK,CAAC,QAAQ,QAAQ,CAAC;wBACtC,OAAOA,EACF,IAAI,GACJ,KAAK,CAAC,SACN,QAAQ,CAAC,qBACT,OAAO,CAAC,IAAM,IAAI,CAAC,eAAe;wBACvC,QAAQA,EAAE,IAAI,GAAG,KAAK,CAAC,WAAW,QAAQ,CAAC;oBAC/C,IACC,IAAI;YACb;QAEAL,KAAK,MAAM,CAACO,CAAAA,SAAU;gBAACA,OAAO,GAAG,CAAC;aAAW;IACjD;IAEQ,kBAAkB;QACtB,OAAO,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,GAAG,CAACC,CAAAA,QAAU;gBAC7C,OAAO,GAAGA,MAAM,SAAS,CAAC,EAAE,EAAEA,MAAM,OAAO,CAAC,CAAC,CAAC;gBAC9C,OAAO,GAAGA,MAAM,UAAU,CAAC,CAAC,EAAEA,MAAM,OAAO,EAAE;YACjD;IACJ;AACJ;AAEO,MAAMC,mBAAmBC,wBAAwB,oBAAoB,CAAC;IACzE,gBAAgBb;IAChB,cAAc;QAACc;QAAmBC;KAAqB;AAC3D"}
+{"version":3,"file":"admin/presentation/ProvidersSettings.js","sources":["../../../src/admin/presentation/ProvidersSettings.ts"],"sourcesContent":["import { generateAlphaNumericId } from \"@webiny/utils\";\nimport { AiPowerUpsSettingsGroup } from \"./AiPowerUpsSettings/settingsGroup.js\";\nimport {\n    ListModelsUseCase,\n    ListModelsRepository\n} from \"~/admin/features/listModels/abstractions.js\";\n\nclass ProviderSettingsImpl implements AiPowerUpsSettingsGroup.Interface {\n    name = \"providers\";\n    label = \"Providers\";\n    description = \"Configure AI model providers.\";\n\n    constructor(\n        private useCase: ListModelsUseCase.Interface,\n        private repository: ListModelsRepository.Interface\n    ) {}\n\n    buildForm(form: AiPowerUpsSettingsGroup.FormBuilder): void {\n        void this.useCase.execute();\n\n        form.fields(fields => ({\n            presets: fields\n                .object()\n                .label(\"Presets\")\n                .renderer(\"objectAccordionMultiple\", {\n                    container: false,\n                    addItemLabel: \"Add provider\",\n                    itemTitle: (data, index) => String(data.name || `Provider #${index + 1}`)\n                })\n                .fields(f => ({\n                    id: f\n                        .text()\n                        .hidden()\n                        .defaultValue(() => generateAlphaNumericId(10)),\n                    name: f.text().label(\"Name\").required(\"Name is required\"),\n                    model: f\n                        .text()\n                        .label(\"Model\")\n                        .required(\"Model is required\")\n                        .options(() => this.getModelOptions())\n                        .renderer(\"autoComplete\"),\n                    apiKey: f.text().label(\"API Key\").required(\"API Key is required\")\n                }))\n                .list()\n        }));\n\n        form.layout(layout => [layout.row(\"presets\")]);\n    }\n\n    private getModelOptions() {\n        return this.repository.getModels().map(model => ({\n            label: `${model.modelName} (${model.modelId})`,\n            value: `${model.providerId}/${model.modelId}`\n        }));\n    }\n}\n\nexport const ProviderSettings = AiPowerUpsSettingsGroup.createImplementation({\n    implementation: ProviderSettingsImpl,\n    dependencies: [ListModelsUseCase, ListModelsRepository]\n});\n"],"names":["ProviderSettingsImpl","useCase","repository","form","fields","data","index","String","f","generateAlphaNumericId","layout","model","ProviderSettings","AiPowerUpsSettingsGroup","ListModelsUseCase","ListModelsRepository"],"mappings":";;;AAOA,MAAMA;IAKF,YACYC,OAAoC,EACpCC,UAA0C,CACpD;aAFUD,OAAO,GAAPA;aACAC,UAAU,GAAVA;aANZ,IAAI,GAAG;aACP,KAAK,GAAG;aACR,WAAW,GAAG;IAKX;IAEH,UAAUC,IAAyC,EAAQ;QAClD,IAAI,CAAC,OAAO,CAAC,OAAO;QAEzBA,KAAK,MAAM,CAACC,CAAAA,SAAW;gBACnB,SAASA,OACJ,MAAM,GACN,KAAK,CAAC,WACN,QAAQ,CAAC,2BAA2B;oBACjC,WAAW;oBACX,cAAc;oBACd,WAAW,CAACC,MAAMC,QAAUC,OAAOF,KAAK,IAAI,IAAI,CAAC,UAAU,EAAEC,QAAQ,GAAG;gBAC5E,GACC,MAAM,CAACE,CAAAA,IAAM;wBACV,IAAIA,EACC,IAAI,GACJ,MAAM,GACN,YAAY,CAAC,IAAMC,uBAAuB;wBAC/C,MAAMD,EAAE,IAAI,GAAG,KAAK,CAAC,QAAQ,QAAQ,CAAC;wBACtC,OAAOA,EACF,IAAI,GACJ,KAAK,CAAC,SACN,QAAQ,CAAC,qBACT,OAAO,CAAC,IAAM,IAAI,CAAC,eAAe,IAClC,QAAQ,CAAC;wBACd,QAAQA,EAAE,IAAI,GAAG,KAAK,CAAC,WAAW,QAAQ,CAAC;oBAC/C,IACC,IAAI;YACb;QAEAL,KAAK,MAAM,CAACO,CAAAA,SAAU;gBAACA,OAAO,GAAG,CAAC;aAAW;IACjD;IAEQ,kBAAkB;QACtB,OAAO,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,GAAG,CAACC,CAAAA,QAAU;gBAC7C,OAAO,GAAGA,MAAM,SAAS,CAAC,EAAE,EAAEA,MAAM,OAAO,CAAC,CAAC,CAAC;gBAC9C,OAAO,GAAGA,MAAM,UAAU,CAAC,CAAC,EAAEA,MAAM,OAAO,EAAE;YACjD;IACJ;AACJ;AAEO,MAAMC,mBAAmBC,wBAAwB,oBAAoB,CAAC;IACzE,gBAAgBb;IAChB,cAAc;QAACc;QAAmBC;KAAqB;AAC3D"}

package/admin/presentation/WbContentGeneration/GenerateContentDialog.d.ts

@@ -16,6 +16,6 @@ export interface GeneratePageContentErrorMessage extends IncomingGenericData {
         message: string;
     };
 }
-export declare const GenerateContentDialog: (() => React.JSX.Element) & {
-    displayName: string;
+export declare const GenerateContentDialog: (() => React.JSX.Element) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element;
 };

package/admin/presentation/WbContentGeneration/GenerateContentDialog.js

@@ -1,7 +1,7 @@
 import react, { useCallback, useEffect, useRef } from "react";
 import { observer } from "mobx-react-lite";
 import { FormView, useDialog } from "@webiny/app-admin";
-import { Dialog, OverlayLoader, useToast } from "@webiny/admin-ui";
+import { BetaBadge, Dialog, OverlayLoader, useToast } from "@webiny/admin-ui";
 import { useFeature } from "@webiny/app";
 import { useWebsockets } from "@webiny/app-websockets";
 import { useSelectFromEditor } from "@webiny/app-website-builder/BaseEditor/hooks/useSelectFromEditor.js";
@@ -96,7 +96,7 @@ const GenerateContentDialog = observer(()=>{
     return /*#__PURE__*/ react.createElement(Dialog, {
         open: true,
         onClose: closeDialog,
-        title: "Generate Content",
+        title: /*#__PURE__*/ react.createElement(react.Fragment, null, "Generate Content ", /*#__PURE__*/ react.createElement(BetaBadge, null)),
         size: "lg",
         actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Dialog.CancelAction, {
             onClick: closeDialog,

package/admin/presentation/WbContentGeneration/GenerateContentDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin/presentation/WbContentGeneration/GenerateContentDialog.js","sources":["../../../../src/admin/presentation/WbContentGeneration/GenerateContentDialog.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useDialog, FormView } from \"@webiny/app-admin\";\nimport { Dialog, OverlayLoader, useToast } from \"@webiny/admin-ui\";\nimport { useFeature } from \"@webiny/app\";\nimport type { IncomingGenericData } from \"@webiny/app-websockets\";\nimport { useWebsockets } from \"@webiny/app-websockets\";\nimport { useSelectFromEditor } from \"@webiny/app-website-builder/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { useCreateElement } from \"@webiny/app-website-builder/BaseEditor/hooks/useCreateElement.js\";\nimport { GenerateContentFeature } from \"./feature.js\";\nimport { decompressGzipBase64 } from \"./decompressGzipBase64.js\";\nimport type { CreateElementParams } from \"./abstractions.js\";\n\nfunction formatElapsed(totalSeconds: number): string {\n    const minutes = Math.floor(totalSeconds / 60);\n    const seconds = totalSeconds % 60;\n    return `${minutes}:${seconds.toString().padStart(2, \"0\")}`;\n}\n\nexport const GENERATE_CONTENT_DIALOG = \"generate-content\";\n\nexport const WS_ACTION_CONTENT = \"aiPowerUps.generatePageContent.content\";\nexport const WS_ACTION_ERROR = \"aiPowerUps.generatePageContent.error\";\n\nexport interface GeneratePageContentMessage extends IncomingGenericData {\n    action: typeof WS_ACTION_CONTENT;\n    data: {\n        compression: \"gzip\";\n        value: string;\n    };\n}\n\nexport interface GeneratePageContentErrorMessage extends IncomingGenericData {\n    action: typeof WS_ACTION_ERROR;\n    data: {\n        message: string;\n    };\n}\n\nexport const GenerateContentDialog = observer(() => {\n    const { closeDialog } = useDialog();\n    const { presenter } = useFeature(GenerateContentFeature);\n    const vm = presenter.vm;\n    const wasSubmitting = useRef(false);\n    const websockets = useWebsockets();\n    const toast = useToast();\n\n    const components = useSelectFromEditor(state => state.components);\n    const { createElement } = useCreateElement();\n\n    const createElements = useCallback(\n        async (elements: CreateElementParams[]) => {\n            for (const el of elements) {\n                await createElement(el);\n            }\n        },\n        [createElement]\n    );\n\n    useEffect(() => {\n        const aiComponents = Object.values(components)\n            .filter(c => c.useInAiContentGeneration !== false)\n            .map(c => {\n                return {\n                    name: c.name,\n                    label: c.label,\n                    aiContext: c.aiContext,\n                    inputs: c.inputs.map(input => ({\n                        type: input.type,\n                        name: input.name,\n                        label: input.label,\n                        description: input.description\n                    }))\n                };\n            });\n        presenter.init(aiComponents, createElements);\n    }, [components, createElements]);\n\n    useEffect(() => {\n        const contentSubscription = websockets.onMessage<GeneratePageContentMessage>(\n            WS_ACTION_CONTENT,\n            async message => {\n                const responseText = await decompressGzipBase64(message.data.value);\n                try {\n                    await presenter.processAiResponse(responseText);\n                } catch (e) {\n                    console.error(\"Failed to process AI response\", { responseText });\n                    console.error(e);\n                    toast.showWarningToast({\n                        title: \"Failed to process AI response\",\n                        description: \"Open the console for more details.\"\n                    });\n                    presenter.cancelPrompt();\n                }\n            }\n        );\n\n        const errorSubscription = websockets.onMessage<GeneratePageContentErrorMessage>(\n            WS_ACTION_ERROR,\n            async message => {\n                toast.showWarningToast({\n                    title: \"Failed to generate content\",\n                    description: message.data.message\n                });\n                presenter.cancelPrompt();\n            }\n        );\n\n        return () => {\n            contentSubscription.off();\n            errorSubscription.off();\n        };\n    }, []);\n\n    useEffect(() => {\n        if (wasSubmitting.current && !vm.submitting && !vm.timedOut) {\n            closeDialog();\n        }\n        wasSubmitting.current = vm.submitting;\n    }, [vm.submitting]);\n\n    useEffect(() => {\n        if (vm.timedOut) {\n            toast.showWarningToast({\n                title: \"Request timed out\",\n                description: \"The AI generation took too long. Please try again.\"\n            });\n        }\n    }, [vm.timedOut]);\n\n    const handleSubmit = async () => {\n        await presenter.submit();\n    };\n\n    return (\n        <Dialog\n            open={true}\n            onClose={closeDialog}\n            title=\"Generate Content\"\n            size={\"lg\"}\n            actions={\n                <>\n                    <Dialog.CancelAction onClick={closeDialog} text=\"Cancel\" />\n                    <Dialog.ConfirmAction\n                        onClick={handleSubmit}\n                        text=\"Generate\"\n                        disabled={vm.loading || vm.submitting}\n                    />\n                </>\n            }\n        >\n            {vm.loading ? <OverlayLoader text={\"Loading...\"} /> : null}\n            {vm.submitting ? (\n                <OverlayLoader\n                    className={\"bg-neutral-base/90\"}\n                    text={\n                        <>\n                            <div>Generating content... {formatElapsed(vm.elapsedSeconds)}</div>\n                            <div className=\"text-sm text-neutral-muted pt-xs\">\n                                Content generation can take a few minutes, depending on the model\n                                you&apos;re using.\n                            </div>\n                        </>\n                    }\n                />\n            ) : null}\n            {vm.processing ? <OverlayLoader text={\"Processing content...\"} /> : null}\n            {vm.form ? <FormView name=\"GenerateContent\" form={vm.form} /> : null}\n        </Dialog>\n    );\n});\n"],"names":["formatElapsed","totalSeconds","minutes","Math","seconds","GENERATE_CONTENT_DIALOG","WS_ACTION_CONTENT","WS_ACTION_ERROR","GenerateContentDialog","observer","closeDialog","useDialog","presenter","useFeature","GenerateContentFeature","vm","wasSubmitting","useRef","websockets","useWebsockets","toast","useToast","components","useSelectFromEditor","state","createElement","useCreateElement","createElements","useCallback","elements","el","useEffect","aiComponents","Object","c","input","contentSubscription","message","responseText","decompressGzipBase64","e","console","errorSubscription","handleSubmit","Dialog","OverlayLoader","FormView"],"mappings":"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"}
+{"version":3,"file":"admin/presentation/WbContentGeneration/GenerateContentDialog.js","sources":["../../../../src/admin/presentation/WbContentGeneration/GenerateContentDialog.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useDialog, FormView } from \"@webiny/app-admin\";\nimport { BetaBadge } from \"@webiny/admin-ui\";\nimport { Dialog, OverlayLoader, useToast } from \"@webiny/admin-ui\";\nimport { useFeature } from \"@webiny/app\";\nimport type { IncomingGenericData } from \"@webiny/app-websockets\";\nimport { useWebsockets } from \"@webiny/app-websockets\";\nimport { useSelectFromEditor } from \"@webiny/app-website-builder/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { useCreateElement } from \"@webiny/app-website-builder/BaseEditor/hooks/useCreateElement.js\";\nimport { GenerateContentFeature } from \"./feature.js\";\nimport { decompressGzipBase64 } from \"./decompressGzipBase64.js\";\nimport type { CreateElementParams } from \"./abstractions.js\";\n\nfunction formatElapsed(totalSeconds: number): string {\n    const minutes = Math.floor(totalSeconds / 60);\n    const seconds = totalSeconds % 60;\n    return `${minutes}:${seconds.toString().padStart(2, \"0\")}`;\n}\n\nexport const GENERATE_CONTENT_DIALOG = \"generate-content\";\n\nexport const WS_ACTION_CONTENT = \"aiPowerUps.generatePageContent.content\";\nexport const WS_ACTION_ERROR = \"aiPowerUps.generatePageContent.error\";\n\nexport interface GeneratePageContentMessage extends IncomingGenericData {\n    action: typeof WS_ACTION_CONTENT;\n    data: {\n        compression: \"gzip\";\n        value: string;\n    };\n}\n\nexport interface GeneratePageContentErrorMessage extends IncomingGenericData {\n    action: typeof WS_ACTION_ERROR;\n    data: {\n        message: string;\n    };\n}\n\nexport const GenerateContentDialog = observer(() => {\n    const { closeDialog } = useDialog();\n    const { presenter } = useFeature(GenerateContentFeature);\n    const vm = presenter.vm;\n    const wasSubmitting = useRef(false);\n    const websockets = useWebsockets();\n    const toast = useToast();\n\n    const components = useSelectFromEditor(state => state.components);\n    const { createElement } = useCreateElement();\n\n    const createElements = useCallback(\n        async (elements: CreateElementParams[]) => {\n            for (const el of elements) {\n                await createElement(el);\n            }\n        },\n        [createElement]\n    );\n\n    useEffect(() => {\n        const aiComponents = Object.values(components)\n            .filter(c => c.useInAiContentGeneration !== false)\n            .map(c => {\n                return {\n                    name: c.name,\n                    label: c.label,\n                    aiContext: c.aiContext,\n                    inputs: c.inputs.map(input => ({\n                        type: input.type,\n                        name: input.name,\n                        label: input.label,\n                        description: input.description\n                    }))\n                };\n            });\n        presenter.init(aiComponents, createElements);\n    }, [components, createElements]);\n\n    useEffect(() => {\n        const contentSubscription = websockets.onMessage<GeneratePageContentMessage>(\n            WS_ACTION_CONTENT,\n            async message => {\n                const responseText = await decompressGzipBase64(message.data.value);\n                try {\n                    await presenter.processAiResponse(responseText);\n                } catch (e) {\n                    console.error(\"Failed to process AI response\", { responseText });\n                    console.error(e);\n                    toast.showWarningToast({\n                        title: \"Failed to process AI response\",\n                        description: \"Open the console for more details.\"\n                    });\n                    presenter.cancelPrompt();\n                }\n            }\n        );\n\n        const errorSubscription = websockets.onMessage<GeneratePageContentErrorMessage>(\n            WS_ACTION_ERROR,\n            async message => {\n                toast.showWarningToast({\n                    title: \"Failed to generate content\",\n                    description: message.data.message\n                });\n                presenter.cancelPrompt();\n            }\n        );\n\n        return () => {\n            contentSubscription.off();\n            errorSubscription.off();\n        };\n    }, []);\n\n    useEffect(() => {\n        if (wasSubmitting.current && !vm.submitting && !vm.timedOut) {\n            closeDialog();\n        }\n        wasSubmitting.current = vm.submitting;\n    }, [vm.submitting]);\n\n    useEffect(() => {\n        if (vm.timedOut) {\n            toast.showWarningToast({\n                title: \"Request timed out\",\n                description: \"The AI generation took too long. Please try again.\"\n            });\n        }\n    }, [vm.timedOut]);\n\n    const handleSubmit = async () => {\n        await presenter.submit();\n    };\n\n    return (\n        <Dialog\n            open={true}\n            onClose={closeDialog}\n            title={\n                <>\n                    Generate Content <BetaBadge />\n                </>\n            }\n            size={\"lg\"}\n            actions={\n                <>\n                    <Dialog.CancelAction onClick={closeDialog} text=\"Cancel\" />\n                    <Dialog.ConfirmAction\n                        onClick={handleSubmit}\n                        text=\"Generate\"\n                        disabled={vm.loading || vm.submitting}\n                    />\n                </>\n            }\n        >\n            {vm.loading ? <OverlayLoader text={\"Loading...\"} /> : null}\n            {vm.submitting ? (\n                <OverlayLoader\n                    className={\"bg-neutral-base/90\"}\n                    text={\n                        <>\n                            <div>Generating content... {formatElapsed(vm.elapsedSeconds)}</div>\n                            <div className=\"text-sm text-neutral-muted pt-xs\">\n                                Content generation can take a few minutes, depending on the model\n                                you&apos;re using.\n                            </div>\n                        </>\n                    }\n                />\n            ) : null}\n            {vm.processing ? <OverlayLoader text={\"Processing content...\"} /> : null}\n            {vm.form ? <FormView name=\"GenerateContent\" form={vm.form} /> : null}\n        </Dialog>\n    );\n});\n"],"names":["formatElapsed","totalSeconds","minutes","Math","seconds","GENERATE_CONTENT_DIALOG","WS_ACTION_CONTENT","WS_ACTION_ERROR","GenerateContentDialog","observer","closeDialog","useDialog","presenter","useFeature","GenerateContentFeature","vm","wasSubmitting","useRef","websockets","useWebsockets","toast","useToast","components","useSelectFromEditor","state","createElement","useCreateElement","createElements","useCallback","elements","el","useEffect","aiComponents","Object","c","input","contentSubscription","message","responseText","decompressGzipBase64","e","console","errorSubscription","handleSubmit","Dialog","BetaBadge","OverlayLoader","FormView"],"mappings":"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"}

package/admin/presentation/WbContentGeneration/GenerateContentPresenter.d.ts

@@ -1,13 +1,12 @@
-import { FormModelFactory, ToolRegistry, ToolPipelineRunner } from "@webiny/app-admin";
+import { ToolRegistry, ToolPipelineRunner } from "@webiny/app-admin";
 import { GenerateContentPresenter, type CreateElementsFn } from "./abstractions.js";
 import { GeneratePageContentUseCase } from "../../../admin/features/generatePageContent/index.js";
-import { GetSettingsUseCase } from "../../../admin/features/settings/getSettings/abstractions.js";
+import { AiPromptFormFactory } from "../../../admin/presentation/AiPromptFormFactory/abstractions.js";
 declare class GenerateContentPresenterImpl implements GenerateContentPresenter.Interface {
     private toolRegistry;
     private pipelineRunner;
     private generatePageContent;
-    private formModelFactory;
-    private getSettings;
+    private formFactory;
     private _loading;
     private _submitting;
     private _processing;
@@ -15,11 +14,10 @@ declare class GenerateContentPresenterImpl implements GenerateContentPresenter.I
     private _components;
     private _createElements;
     private _form;
-    private _settings;
     private _timeoutId;
     private _intervalId;
     private _elapsedSeconds;
-    constructor(toolRegistry: ToolRegistry.Interface, pipelineRunner: ToolPipelineRunner.Interface, generatePageContent: GeneratePageContentUseCase.Interface, formModelFactory: FormModelFactory.Interface, getSettings: GetSettingsUseCase.Interface);
+    constructor(toolRegistry: ToolRegistry.Interface, pipelineRunner: ToolPipelineRunner.Interface, generatePageContent: GeneratePageContentUseCase.Interface, formFactory: AiPromptFormFactory.Interface);
     get vm(): GenerateContentPresenter.ViewModel;
     init(components: Record<string, any>[], createElements: CreateElementsFn): Promise<void>;
     submit(): Promise<void>;
@@ -28,12 +26,6 @@ declare class GenerateContentPresenterImpl implements GenerateContentPresenter.I
     private startTimeout;
     private clearTimeout;
     private clearInterval;
-    private buildForm;
-    private getSelectedProject;
-    private getProjectFileOptions;
-    private computeExcludedFileIds;
-    private getProjectOptions;
-    private getPersonaOptions;
 }
 export declare const GenerateContentPresenterRegistration: typeof GenerateContentPresenterImpl & {
     __abstraction: import("@webiny/di").Abstraction<import("./abstractions.js").IGenerateContentPresenter>;

package/admin/presentation/WbContentGeneration/GenerateContentPresenter.js

@@ -1,18 +1,17 @@
 import { computed, makeAutoObservable, runInAction, toJS } from "mobx";
 import { z } from "zod";
 import pick from "lodash/pick.js";
-import { FormModelFactory, ToolPipelineRunner, ToolRegistry } from "@webiny/app-admin";
+import { ToolPipelineRunner, ToolRegistry } from "@webiny/app-admin";
 import { GenerateContentPresenter } from "./abstractions.js";
 import { GeneratePageContentUseCase } from "../../features/generatePageContent/index.js";
-import { GetSettingsUseCase } from "../../features/settings/getSettings/abstractions.js";
+import { AiPromptFormFactory } from "../AiPromptFormFactory/abstractions.js";
 const SUBMIT_TIMEOUT_MS = 300000;
 class GenerateContentPresenterImpl {
-    constructor(toolRegistry, pipelineRunner, generatePageContent, formModelFactory, getSettings){
+    constructor(toolRegistry, pipelineRunner, generatePageContent, formFactory){
         this.toolRegistry = toolRegistry;
         this.pipelineRunner = pipelineRunner;
         this.generatePageContent = generatePageContent;
-        this.formModelFactory = formModelFactory;
-        this.getSettings = getSettings;
+        this.formFactory = formFactory;
         this._loading = false;
         this._submitting = false;
         this._processing = false;
@@ -20,7 +19,6 @@ class GenerateContentPresenterImpl {
         this._components = [];
         this._createElements = ()=>{};
         this._form = null;
-        this._settings = null;
         this._timeoutId = null;
         this._intervalId = null;
         this._elapsedSeconds = 0;
@@ -43,18 +41,9 @@ class GenerateContentPresenterImpl {
     async init(components, createElements) {
         this._components = components;
         this._createElements = createElements;
-        this._loading = true;
-        try {
-            const settings = await this.getSettings.execute();
-            runInAction(()=>{
-                this._settings = settings;
-                this._form = this.buildForm();
-            });
-        } finally{
-            runInAction(()=>{
-                this._loading = false;
-            });
-        }
+        this._form = this.formFactory.createForm({
+            promptDescription: "Describe the page content you want to generate."
+        });
     }
     async submit() {
         if (!this._form) return;
@@ -78,7 +67,8 @@ class GenerateContentPresenterImpl {
                         "type"
                     ])
                 }));
-            const excludedFileIds = this.computeExcludedFileIds(data.project, data.includedFiles);
+            const excludedFileIds = this.formFactory.computeExcludedFileIds(this._form);
+            const additionalFileIds = data.additionalFiles?.map((f)=>f.id) ?? null;
             await this.generatePageContent.execute({
                 prompt: data.prompt,
                 components: toJS(this._components),
@@ -86,7 +76,8 @@ class GenerateContentPresenterImpl {
                 projectId: data.project || null,
                 excludedFileIds,
                 readerPersonaId: data.readerPersona || null,
-                writerPersonaId: data.writerPersona || null
+                writerPersonaId: data.writerPersona || null,
+                additionalFileIds
             });
         } catch  {
             this.clearTimeout();
@@ -155,78 +146,6 @@ class GenerateContentPresenterImpl {
             this._intervalId = null;
         }
     }
-    buildForm() {
-        return this.formModelFactory.create({
-            fields: (fields)=>({
-                    project: fields.text().label("Project").description("Select a predefined context to attach.").options(()=>this.getProjectOptions()).afterChange((value, form)=>{
-                        const projectId = value;
-                        const project = projectId ? this._settings?.projects?.presets?.find((p)=>p.id === projectId) : void 0;
-                        if (project?.defaultReaderPersonaId) form.field("readerPersona").setValue(project.defaultReaderPersonaId);
-                        if (project?.defaultWriterPersonaId) form.field("writerPersona").setValue(project.defaultWriterPersonaId);
-                        const fileIds = (project?.files ?? []).map((f)=>f.id);
-                        form.field("includedFiles").setValue(fileIds);
-                    }),
-                    includedFiles: fields.text().label("Files included").description("Uncheck files to exclude them from this generation only.").options(()=>this.getProjectFileOptions()).renderer("checkboxes").list().hiddenWhen((form)=>{
-                        const projectId = form.field("project").as("text").getValue();
-                        if (!projectId) return true;
-                        const project = this._settings?.projects?.presets?.find((p)=>p.id === projectId);
-                        return !project?.files || 0 === project.files.length;
-                    }),
-                    readerPersona: fields.text().label("Reader Persona").description("Select the target audience for the generated content.").options(()=>this.getPersonaOptions("reader")),
-                    writerPersona: fields.text().label("Writer Persona").description("Select the writing style for the generated content.").options(()=>this.getPersonaOptions("writer")),
-                    prompt: fields.text().label("Prompt").description("Describe the page content you want to generate.").required("Prompt is required").renderer("textarea", {
-                        rows: 6
-                    })
-                }),
-            layout: (layout)=>[
-                    layout.row("project"),
-                    layout.row("includedFiles"),
-                    layout.row("readerPersona"),
-                    layout.row("writerPersona"),
-                    layout.row("prompt")
-                ]
-        });
-    }
-    getSelectedProject() {
-        if (!this._form || !this._settings) return;
-        const projectId = this._form.field("project").getValue();
-        if (!projectId) return;
-        return this._settings.projects?.presets?.find((p)=>p.id === projectId);
-    }
-    getProjectFileOptions() {
-        const project = this.getSelectedProject();
-        const files = project?.files;
-        if (!files || 0 === files.length) return [];
-        return files.map((f)=>({
-                label: f.name,
-                value: f.id
-            }));
-    }
-    computeExcludedFileIds(projectId, includedFiles) {
-        if (!projectId) return null;
-        const project = this._settings?.projects?.presets?.find((p)=>p.id === projectId);
-        const allFileIds = (project?.files ?? []).map((f)=>f.id);
-        if (0 === allFileIds.length) return null;
-        const included = new Set(includedFiles ?? []);
-        const excluded = allFileIds.filter((id)=>!included.has(id));
-        return excluded.length > 0 ? excluded : null;
-    }
-    getProjectOptions() {
-        const presets = this._settings?.projects?.presets;
-        if (!presets || 0 === presets.length) return [];
-        return presets.map((preset)=>({
-                label: preset.name,
-                value: preset.id
-            }));
-    }
-    getPersonaOptions(type) {
-        const presets = "reader" === type ? this._settings?.readerPersonas?.presets : this._settings?.writerPersonas?.presets;
-        if (!presets || 0 === presets.length) return [];
-        return presets.map((preset)=>({
-                label: preset.name,
-                value: preset.id
-            }));
-    }
 }
 const GenerateContentPresenterRegistration = GenerateContentPresenter.createImplementation({
     implementation: GenerateContentPresenterImpl,
@@ -234,8 +153,7 @@ const GenerateContentPresenterRegistration = GenerateContentPresenter.createImpl
         ToolRegistry,
         ToolPipelineRunner,
         GeneratePageContentUseCase,
-        FormModelFactory,
-        GetSettingsUseCase
+        AiPromptFormFactory
     ]
 });
 export { GenerateContentPresenterRegistration };