@webiny/ai-powerups 0.0.0-unstable.0d717d18dd

package/admin/presentation/ReaderPersonasSettings.js

@@ -0,0 +1,37 @@
+import { generateAlphaNumericId } from "@webiny/utils";
+import { AiPowerUpsSettingsGroup } from "./AiPowerUpsSettings/settingsGroup.js";
+class ReaderPersonasSettingsImpl {
+    buildForm(form) {
+        form.fields((fields)=>({
+                presets: fields.object().label("Presets").renderer("objectAccordionMultiple", {
+                    container: false,
+                    addItemLabel: "Add reader persona",
+                    itemTitle: (data, index)=>String(data.name || `Reader Persona #${index + 1}`)
+                }).fields((f)=>({
+                        id: f.text().hidden().defaultValue(()=>generateAlphaNumericId(10)),
+                        name: f.text().label("Name").required("Name is required").description("This name will be used to identify the reader persona in the UI."),
+                        description: f.text().label("Description").required("Description is required").description("Describe who this reader is and what they care about. This will be used when prompting AI.").renderer("textarea", {
+                            rows: 8
+                        }),
+                        style: f.text().label("Style").description("Optional hints about the expected tone or style when writing for this reader.").renderer("textarea", {
+                            rows: 3
+                        })
+                    })).list()
+            }));
+        form.layout((layout)=>[
+                layout.row("presets")
+            ]);
+    }
+    constructor(){
+        this.name = "readerPersonas";
+        this.label = "Reader Personas";
+        this.description = "Define who the content is written for.";
+    }
+}
+const ReaderPersonasSettings = AiPowerUpsSettingsGroup.createImplementation({
+    implementation: ReaderPersonasSettingsImpl,
+    dependencies: []
+});
+export { ReaderPersonasSettings };
+
+//# sourceMappingURL=ReaderPersonasSettings.js.map

package/admin/presentation/ReaderPersonasSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/presentation/ReaderPersonasSettings.js","sources":["../../../src/admin/presentation/ReaderPersonasSettings.ts"],"sourcesContent":["import { generateAlphaNumericId } from \"@webiny/utils\";\nimport { AiPowerUpsSettingsGroup } from \"./AiPowerUpsSettings/settingsGroup.js\";\n\nclass ReaderPersonasSettingsImpl implements AiPowerUpsSettingsGroup.Interface {\n    name = \"readerPersonas\";\n    label = \"Reader Personas\";\n    description = \"Define who the content is written for.\";\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 reader persona\",\n                    itemTitle: (data, index) => String(data.name || `Reader Persona #${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(\n                            \"This name will be used to identify the reader persona in the UI.\"\n                        ),\n                    description: f\n                        .text()\n                        .label(\"Description\")\n                        .required(\"Description is required\")\n                        .description(\n                            \"Describe who this reader is and what they care about. This will be used when prompting AI.\"\n                        )\n                        .renderer(\"textarea\", { rows: 8 }),\n                    style: f\n                        .text()\n                        .label(\"Style\")\n                        .description(\n                            \"Optional hints about the expected tone or style when writing for this reader.\"\n                        )\n                        .renderer(\"textarea\", { rows: 3 })\n                }))\n                .list()\n        }));\n\n        form.layout(layout => [layout.row(\"presets\")]);\n    }\n}\n\nexport const ReaderPersonasSettings = AiPowerUpsSettingsGroup.createImplementation({\n    implementation: ReaderPersonasSettingsImpl,\n    dependencies: []\n});\n"],"names":["ReaderPersonasSettingsImpl","form","fields","data","index","String","f","generateAlphaNumericId","layout","ReaderPersonasSettings","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,gBAAgB,EAAEC,QAAQ,GAAG;gBAClF,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,CACR;wBAER,aAAaA,EACR,IAAI,GACJ,KAAK,CAAC,eACN,QAAQ,CAAC,2BACT,WAAW,CACR,8FAEH,QAAQ,CAAC,YAAY;4BAAE,MAAM;wBAAE;wBACpC,OAAOA,EACF,IAAI,GACJ,KAAK,CAAC,SACN,WAAW,CACR,iFAEH,QAAQ,CAAC,YAAY;4BAAE,MAAM;wBAAE;oBACxC,IACC,IAAI;YACb;QAEAL,KAAK,MAAM,CAACO,CAAAA,SAAU;gBAACA,OAAO,GAAG,CAAC;aAAW;IACjD;;aA9CA,IAAI,GAAG;aACP,KAAK,GAAG;aACR,WAAW,GAAG;;AA6ClB;AAEO,MAAMC,yBAAyBC,wBAAwB,oBAAoB,CAAC;IAC/E,gBAAgBV;IAChB,cAAc,EAAE;AACpB"}

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

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

package/admin/presentation/WbContentGeneration/Extension.js

@@ -0,0 +1,22 @@
+import react from "react";
+import { AdminConfig, RegisterFeature } from "@webiny/app-admin";
+import { PageEditorConfig } from "@webiny/app-website-builder";
+import { GenerateContentButton } from "./GenerateContentButton.js";
+import { GENERATE_CONTENT_DIALOG, GenerateContentDialog } from "./GenerateContentDialog.js";
+import { GenerateContentFeature } from "./feature.js";
+const WbContentGeneration = ()=>{
+    const { Ui } = PageEditorConfig;
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(RegisterFeature, {
+        feature: GenerateContentFeature
+    }), /*#__PURE__*/ react.createElement(AdminConfig, null, /*#__PURE__*/ react.createElement(AdminConfig.Dialog, {
+        name: GENERATE_CONTENT_DIALOG,
+        element: /*#__PURE__*/ react.createElement(GenerateContentDialog, null)
+    })), /*#__PURE__*/ react.createElement(PageEditorConfig, null, /*#__PURE__*/ react.createElement(Ui.TopBar.Action, {
+        name: "generateContent",
+        before: "revisionsMenu",
+        element: /*#__PURE__*/ react.createElement(Ui.IsNotReadOnly, null, /*#__PURE__*/ react.createElement(GenerateContentButton, null))
+    })));
+};
+export { WbContentGeneration };
+
+//# sourceMappingURL=Extension.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"admin/presentation/WbContentGeneration/Extension.js","sources":["../../../../src/admin/presentation/WbContentGeneration/Extension.tsx"],"sourcesContent":["import React from \"react\";\nimport { AdminConfig, RegisterFeature } from \"@webiny/app-admin\";\nimport { PageEditorConfig } from \"@webiny/app-website-builder\";\nimport { GenerateContentButton } from \"~/admin/presentation/WbContentGeneration/GenerateContentButton.js\";\nimport {\n    GenerateContentDialog,\n    GENERATE_CONTENT_DIALOG\n} from \"~/admin/presentation/WbContentGeneration/GenerateContentDialog.js\";\nimport { GenerateContentFeature } from \"~/admin/presentation/WbContentGeneration/feature.js\";\n\nexport const WbContentGeneration = () => {\n    const { Ui } = PageEditorConfig;\n\n    return (\n        <>\n            <RegisterFeature feature={GenerateContentFeature} />\n            <AdminConfig>\n                <AdminConfig.Dialog\n                    name={GENERATE_CONTENT_DIALOG}\n                    element={<GenerateContentDialog />}\n                />\n            </AdminConfig>\n            <PageEditorConfig>\n                <Ui.TopBar.Action\n                    name={\"generateContent\"}\n                    before={\"revisionsMenu\"}\n                    element={\n                        <Ui.IsNotReadOnly>\n                            <GenerateContentButton />\n                        </Ui.IsNotReadOnly>\n                    }\n                />\n            </PageEditorConfig>\n        </>\n    );\n};\n"],"names":["WbContentGeneration","Ui","PageEditorConfig","RegisterFeature","GenerateContentFeature","AdminConfig","GENERATE_CONTENT_DIALOG","GenerateContentDialog","GenerateContentButton"],"mappings":";;;;;;AAUO,MAAMA,sBAAsB;IAC/B,MAAM,EAAEC,EAAE,EAAE,GAAGC;IAEf,OAAO,WAAP,GACI,wDACI,oBAACC,iBAAeA;QAAC,SAASC;sBAC1B,oBAACC,aAAWA,MAAAA,WAAAA,GACR,oBAACA,YAAY,MAAM;QACf,MAAMC;QACN,uBAAS,oBAACC,uBAAqBA;uBAGvC,oBAACL,kBAAgBA,MAAAA,WAAAA,GACb,oBAACD,GAAG,MAAM,CAAC,MAAM;QACb,MAAM;QACN,QAAQ;QACR,uBACI,oBAACA,GAAG,aAAa,sBACb,oBAACO,uBAAqBA;;AAOlD"}

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

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

package/admin/presentation/WbContentGeneration/GenerateContentButton.js

@@ -0,0 +1,19 @@
+import react from "react";
+import { IconButton } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/auto_fix_high.svg";
+import { useOpenDialog } from "@webiny/app-admin";
+import { GENERATE_CONTENT_DIALOG } from "./GenerateContentDialog.js";
+import { useAiPowerUpsSettings } from "../AiPowerUpsSettings/index.js";
+const GenerateContentButton = ()=>{
+    const { openDialog } = useOpenDialog();
+    const { settings } = useAiPowerUpsSettings();
+    if (!settings || 0 === settings.providers.presets.length) return null;
+    return /*#__PURE__*/ react.createElement(IconButton, {
+        variant: "ghost",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        onClick: ()=>openDialog(GENERATE_CONTENT_DIALOG, {})
+    });
+};
+export { GenerateContentButton };
+
+//# sourceMappingURL=GenerateContentButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"admin/presentation/WbContentGeneration/GenerateContentButton.js","sources":["../../../../src/admin/presentation/WbContentGeneration/GenerateContentButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconButton } from \"@webiny/admin-ui\";\nimport { ReactComponent as ChatIcon } from \"@webiny/icons/auto_fix_high.svg\";\nimport { useOpenDialog } from \"@webiny/app-admin\";\nimport { GENERATE_CONTENT_DIALOG } from \"./GenerateContentDialog.js\";\nimport { useAiPowerUpsSettings } from \"~/admin/presentation/AiPowerUpsSettings/index.js\";\n\nexport const GenerateContentButton = () => {\n    const { openDialog } = useOpenDialog();\n    const { settings } = useAiPowerUpsSettings();\n\n    if (!settings || settings.providers.presets.length === 0) {\n        return null;\n    }\n\n    return (\n        <IconButton\n            variant=\"ghost\"\n            icon={<ChatIcon />}\n            onClick={() => openDialog(GENERATE_CONTENT_DIALOG, {})}\n        />\n    );\n};\n"],"names":["GenerateContentButton","openDialog","useOpenDialog","settings","useAiPowerUpsSettings","IconButton","ChatIcon","GENERATE_CONTENT_DIALOG"],"mappings":";;;;;;AAOO,MAAMA,wBAAwB;IACjC,MAAM,EAAEC,UAAU,EAAE,GAAGC;IACvB,MAAM,EAAEC,QAAQ,EAAE,GAAGC;IAErB,IAAI,CAACD,YAAYA,AAAsC,MAAtCA,SAAS,SAAS,CAAC,OAAO,CAAC,MAAM,EAC9C,OAAO;IAGX,OAAO,WAAP,GACI,oBAACE,YAAUA;QACP,SAAQ;QACR,oBAAM,oBAACC,gBAAQA;QACf,SAAS,IAAML,WAAWM,yBAAyB,CAAC;;AAGhE"}

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

@@ -0,0 +1,21 @@
+import React from "react";
+import type { IncomingGenericData } from "@webiny/app-websockets";
+export declare const GENERATE_CONTENT_DIALOG = "generate-content";
+export declare const WS_ACTION_CONTENT = "aiPowerUps.generatePageContent.content";
+export declare const WS_ACTION_ERROR = "aiPowerUps.generatePageContent.error";
+export interface GeneratePageContentMessage extends IncomingGenericData {
+    action: typeof WS_ACTION_CONTENT;
+    data: {
+        compression: "gzip";
+        value: string;
+    };
+}
+export interface GeneratePageContentErrorMessage extends IncomingGenericData {
+    action: typeof WS_ACTION_ERROR;
+    data: {
+        message: string;
+    };
+}
+export declare const GenerateContentDialog: (() => React.JSX.Element) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element;
+};

package/admin/presentation/WbContentGeneration/GenerateContentDialog.js

@@ -0,0 +1,125 @@
+import react, { useCallback, useEffect, useRef } from "react";
+import { observer } from "mobx-react-lite";
+import { FormView, useDialog } from "@webiny/app-admin";
+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";
+import { useCreateElement } from "@webiny/app-website-builder/BaseEditor/hooks/useCreateElement.js";
+import { GenerateContentFeature } from "./feature.js";
+import { decompressGzipBase64 } from "./decompressGzipBase64.js";
+function formatElapsed(totalSeconds) {
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+}
+const GENERATE_CONTENT_DIALOG = "generate-content";
+const WS_ACTION_CONTENT = "aiPowerUps.generatePageContent.content";
+const WS_ACTION_ERROR = "aiPowerUps.generatePageContent.error";
+const GenerateContentDialog = observer(()=>{
+    const { closeDialog } = useDialog();
+    const { presenter } = useFeature(GenerateContentFeature);
+    const vm = presenter.vm;
+    const wasSubmitting = useRef(false);
+    const websockets = useWebsockets();
+    const toast = useToast();
+    const components = useSelectFromEditor((state)=>state.components);
+    const { createElement } = useCreateElement();
+    const createElements = useCallback(async (elements)=>{
+        for (const el of elements)await createElement(el);
+    }, [
+        createElement
+    ]);
+    useEffect(()=>{
+        const aiComponents = Object.values(components).filter((c)=>false !== c.useInAiContentGeneration).map((c)=>({
+                name: c.name,
+                label: c.label,
+                aiContext: c.aiContext,
+                inputs: c.inputs.map((input)=>({
+                        type: input.type,
+                        name: input.name,
+                        label: input.label,
+                        description: input.description
+                    }))
+            }));
+        presenter.init(aiComponents, createElements);
+    }, [
+        components,
+        createElements
+    ]);
+    useEffect(()=>{
+        const contentSubscription = websockets.onMessage(WS_ACTION_CONTENT, async (message)=>{
+            const responseText = await decompressGzipBase64(message.data.value);
+            try {
+                await presenter.processAiResponse(responseText);
+            } catch (e) {
+                console.error("Failed to process AI response", {
+                    responseText
+                });
+                console.error(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(()=>{
+        if (wasSubmitting.current && !vm.submitting && !vm.timedOut) closeDialog();
+        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();
+    };
+    return /*#__PURE__*/ react.createElement(Dialog, {
+        open: true,
+        onClose: closeDialog,
+        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,
+            text: "Cancel"
+        }), /*#__PURE__*/ react.createElement(Dialog.ConfirmAction, {
+            onClick: handleSubmit,
+            text: "Generate",
+            disabled: vm.loading || vm.submitting
+        }))
+    }, 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.processing ? /*#__PURE__*/ react.createElement(OverlayLoader, {
+        text: "Processing content..."
+    }) : null, vm.form ? /*#__PURE__*/ react.createElement(FormView, {
+        name: "GenerateContent",
+        form: vm.form
+    }) : null);
+});
+export { GENERATE_CONTENT_DIALOG, GenerateContentDialog, WS_ACTION_CONTENT, WS_ACTION_ERROR };
+
+//# sourceMappingURL=GenerateContentDialog.js.map

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

@@ -0,0 +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 { 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

@@ -0,0 +1,33 @@
+import { ToolRegistry, ToolPipelineRunner } from "@webiny/app-admin";
+import { GenerateContentPresenter, type CreateElementsFn } from "./abstractions.js";
+import { GeneratePageContentUseCase } from "../../../admin/features/generatePageContent/index.js";
+import { AiPromptFormFactory } from "../../../admin/presentation/AiPromptFormFactory/abstractions.js";
+declare class GenerateContentPresenterImpl implements GenerateContentPresenter.Interface {
+    private toolRegistry;
+    private pipelineRunner;
+    private generatePageContent;
+    private formFactory;
+    private _loading;
+    private _submitting;
+    private _processing;
+    private _timedOut;
+    private _components;
+    private _createElements;
+    private _form;
+    private _timeoutId;
+    private _intervalId;
+    private _elapsedSeconds;
+    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>;
+    processAiResponse(responseText: string): Promise<void>;
+    cancelPrompt(): void;
+    private startTimeout;
+    private clearTimeout;
+    private clearInterval;
+}
+export declare const GenerateContentPresenterRegistration: typeof GenerateContentPresenterImpl & {
+    __abstraction: import("@webiny/di").Abstraction<import("./abstractions.js").IGenerateContentPresenter>;
+};
+export {};

package/admin/presentation/WbContentGeneration/GenerateContentPresenter.js

@@ -0,0 +1,161 @@
+import { computed, makeAutoObservable, runInAction, toJS } from "mobx";
+import { z } from "zod";
+import pick from "lodash/pick.js";
+import { ToolPipelineRunner, ToolRegistry } from "@webiny/app-admin";
+import { GenerateContentPresenter } from "./abstractions.js";
+import { GeneratePageContentUseCase } from "../../features/generatePageContent/index.js";
+import { AiPromptFormFactory } from "../AiPromptFormFactory/abstractions.js";
+const SUBMIT_TIMEOUT_MS = 300000;
+class GenerateContentPresenterImpl {
+    constructor(toolRegistry, pipelineRunner, generatePageContent, formFactory){
+        this.toolRegistry = toolRegistry;
+        this.pipelineRunner = pipelineRunner;
+        this.generatePageContent = generatePageContent;
+        this.formFactory = formFactory;
+        this._loading = false;
+        this._submitting = false;
+        this._processing = false;
+        this._timedOut = false;
+        this._components = [];
+        this._createElements = ()=>{};
+        this._form = null;
+        this._timeoutId = null;
+        this._intervalId = null;
+        this._elapsedSeconds = 0;
+        makeAutoObservable(this, {
+            vm: computed
+        }, {
+            autoBind: true
+        });
+    }
+    get vm() {
+        return {
+            form: this._form ? this._form.vm : null,
+            loading: this._loading,
+            submitting: this._submitting,
+            processing: this._processing,
+            timedOut: this._timedOut,
+            elapsedSeconds: this._elapsedSeconds
+        };
+    }
+    async init(components, createElements) {
+        this._components = components;
+        this._createElements = createElements;
+        this._form = this.formFactory.createForm({
+            promptDescription: "Describe the page content you want to generate."
+        });
+    }
+    async submit() {
+        if (!this._form) return;
+        const data = await this._form.submit();
+        if (!data) return;
+        runInAction(()=>{
+            this._submitting = true;
+            this._timedOut = false;
+        });
+        this.startTimeout();
+        try {
+            const tools = this.toolRegistry.getTools().map((tool)=>({
+                    name: tool.name,
+                    description: tool.description,
+                    inputSchema: pick(z.toJSONSchema(tool.inputSchema), [
+                        "properties",
+                        "type"
+                    ]),
+                    outputSchema: pick(z.toJSONSchema(tool.outputSchema), [
+                        "properties",
+                        "type"
+                    ])
+                }));
+            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),
+                tools,
+                projectId: data.project || null,
+                excludedFileIds,
+                readerPersonaId: data.readerPersona || null,
+                writerPersonaId: data.writerPersona || null,
+                additionalFileIds
+            });
+        } catch  {
+            this.clearTimeout();
+            runInAction(()=>{
+                this._submitting = false;
+            });
+        }
+    }
+    async processAiResponse(responseText) {
+        this.clearTimeout();
+        runInAction(()=>{
+            this._processing = true;
+            this._submitting = false;
+        });
+        try {
+            const aiResponseJson = JSON.parse(responseText);
+            const resolved = await this.pipelineRunner.resolve(aiResponseJson);
+            const items = Array.isArray(resolved) ? resolved : [
+                resolved
+            ];
+            await this._createElements(items.map((element)=>({
+                    componentName: element.component,
+                    parentId: "root",
+                    slot: "children",
+                    bindings: {
+                        inputs: element.inputs
+                    }
+                })));
+        } finally{
+            runInAction(()=>{
+                this._processing = false;
+            });
+        }
+    }
+    cancelPrompt() {
+        this.clearTimeout();
+        this._processing = false;
+        this._submitting = false;
+    }
+    startTimeout() {
+        this.clearTimeout();
+        this._elapsedSeconds = 0;
+        this._intervalId = setInterval(()=>{
+            runInAction(()=>{
+                this._elapsedSeconds++;
+            });
+        }, 1000);
+        this._timeoutId = setTimeout(()=>{
+            runInAction(()=>{
+                this._submitting = false;
+                this._timedOut = true;
+            });
+            this.clearInterval();
+        }, SUBMIT_TIMEOUT_MS);
+    }
+    clearTimeout() {
+        if (null !== this._timeoutId) {
+            clearTimeout(this._timeoutId);
+            this._timeoutId = null;
+        }
+        this.clearInterval();
+    }
+    clearInterval() {
+        if (null !== this._intervalId) {
+            clearInterval(this._intervalId);
+            this._intervalId = null;
+        }
+    }
+}
+const GenerateContentPresenterRegistration = GenerateContentPresenter.createImplementation({
+    implementation: GenerateContentPresenterImpl,
+    dependencies: [
+        ToolRegistry,
+        ToolPipelineRunner,
+        GeneratePageContentUseCase,
+        AiPromptFormFactory
+    ]
+});
+export { GenerateContentPresenterRegistration };
+
+//# sourceMappingURL=GenerateContentPresenter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"admin/presentation/WbContentGeneration/GenerateContentPresenter.js","sources":["../../../../src/admin/presentation/WbContentGeneration/GenerateContentPresenter.ts"],"sourcesContent":["import { makeAutoObservable, computed, toJS, runInAction } from \"mobx\";\nimport { z } from \"zod\";\nimport pick from \"lodash/pick.js\";\nimport { ToolRegistry, ToolPipelineRunner } from \"@webiny/app-admin\";\nimport type { FormModel } from \"@webiny/app-admin\";\nimport type { FileValue } from \"@webiny/app-admin/features/formModel/abstractions.js\";\nimport { GenerateContentPresenter, type CreateElementsFn } from \"./abstractions.js\";\nimport { GeneratePageContentUseCase } from \"~/admin/features/generatePageContent/index.js\";\nimport { AiPromptFormFactory } from \"~/admin/presentation/AiPromptFormFactory/abstractions.js\";\n\nconst SUBMIT_TIMEOUT_MS = 300_000;\n\nclass GenerateContentPresenterImpl implements GenerateContentPresenter.Interface {\n    private _loading = false;\n    private _submitting = false;\n    private _processing = false;\n    private _timedOut = false;\n    private _components: Record<string, any>[] = [];\n    private _createElements: CreateElementsFn = () => {};\n    private _form: FormModel.Interface | null = null;\n    private _timeoutId: ReturnType<typeof setTimeout> | null = null;\n    private _intervalId: ReturnType<typeof setInterval> | null = null;\n    private _elapsedSeconds = 0;\n\n    constructor(\n        private toolRegistry: ToolRegistry.Interface,\n        private pipelineRunner: ToolPipelineRunner.Interface,\n        private generatePageContent: GeneratePageContentUseCase.Interface,\n        private formFactory: AiPromptFormFactory.Interface\n    ) {\n        makeAutoObservable(this, { vm: computed }, { autoBind: true });\n    }\n\n    get vm(): GenerateContentPresenter.ViewModel {\n        return {\n            form: this._form ? this._form.vm : null,\n            loading: this._loading,\n            submitting: this._submitting,\n            processing: this._processing,\n            timedOut: this._timedOut,\n            elapsedSeconds: this._elapsedSeconds\n        };\n    }\n\n    async init(components: Record<string, any>[], createElements: CreateElementsFn): Promise<void> {\n        this._components = components;\n        this._createElements = createElements;\n\n        this._form = this.formFactory.createForm({\n            promptDescription: \"Describe the page content you want to generate.\"\n        });\n    }\n\n    async submit(): Promise<void> {\n        if (!this._form) {\n            return;\n        }\n\n        const data = await this._form.submit<{\n            prompt: string;\n            project?: string;\n            includedFiles?: string[];\n            readerPersona?: string;\n            writerPersona?: string;\n            additionalFiles?: FileValue[];\n        }>();\n\n        if (!data) {\n            return;\n        }\n\n        runInAction(() => {\n            this._submitting = true;\n            this._timedOut = false;\n        });\n\n        this.startTimeout();\n\n        try {\n            const tools = this.toolRegistry.getTools().map(tool => ({\n                name: tool.name,\n                description: tool.description,\n                inputSchema: pick(z.toJSONSchema(tool.inputSchema), [\"properties\", \"type\"]),\n                outputSchema: pick(z.toJSONSchema(tool.outputSchema), [\"properties\", \"type\"])\n            }));\n\n            const excludedFileIds = this.formFactory.computeExcludedFileIds(this._form);\n            const additionalFileIds = data.additionalFiles?.map(f => f.id) ?? null;\n\n            await this.generatePageContent.execute({\n                prompt: data.prompt,\n                components: toJS(this._components),\n                tools,\n                projectId: data.project || null,\n                excludedFileIds,\n                readerPersonaId: data.readerPersona || null,\n                writerPersonaId: data.writerPersona || null,\n                additionalFileIds\n            });\n        } catch {\n            this.clearTimeout();\n            runInAction(() => {\n                this._submitting = false;\n            });\n        }\n    }\n\n    async processAiResponse(responseText: string): Promise<void> {\n        this.clearTimeout();\n        runInAction(() => {\n            this._processing = true;\n            this._submitting = false;\n        });\n\n        try {\n            const aiResponseJson = JSON.parse(responseText);\n            const resolved = await this.pipelineRunner.resolve(aiResponseJson);\n            const items = Array.isArray(resolved) ? resolved : [resolved];\n\n            await this._createElements(\n                items.map((element: { component: string; inputs: Record<string, unknown> }) => ({\n                    componentName: element.component,\n                    parentId: \"root\",\n                    slot: \"children\",\n                    bindings: { inputs: element.inputs }\n                }))\n            );\n        } finally {\n            runInAction(() => {\n                this._processing = false;\n            });\n        }\n    }\n\n    cancelPrompt(): void {\n        this.clearTimeout();\n        this._processing = false;\n        this._submitting = false;\n    }\n\n    private startTimeout(): void {\n        this.clearTimeout();\n        this._elapsedSeconds = 0;\n        this._intervalId = setInterval(() => {\n            runInAction(() => {\n                this._elapsedSeconds++;\n            });\n        }, 1000);\n        this._timeoutId = setTimeout(() => {\n            runInAction(() => {\n                this._submitting = false;\n                this._timedOut = true;\n            });\n            this.clearInterval();\n        }, SUBMIT_TIMEOUT_MS);\n    }\n\n    private clearTimeout(): void {\n        if (this._timeoutId !== null) {\n            clearTimeout(this._timeoutId);\n            this._timeoutId = null;\n        }\n        this.clearInterval();\n    }\n\n    private clearInterval(): void {\n        if (this._intervalId !== null) {\n            clearInterval(this._intervalId);\n            this._intervalId = null;\n        }\n    }\n}\n\nexport const GenerateContentPresenterRegistration = GenerateContentPresenter.createImplementation({\n    implementation: GenerateContentPresenterImpl,\n    dependencies: [\n        ToolRegistry,\n        ToolPipelineRunner,\n        GeneratePageContentUseCase,\n        AiPromptFormFactory\n    ]\n});\n"],"names":["SUBMIT_TIMEOUT_MS","GenerateContentPresenterImpl","toolRegistry","pipelineRunner","generatePageContent","formFactory","makeAutoObservable","computed","components","createElements","data","runInAction","tools","tool","pick","z","excludedFileIds","additionalFileIds","f","toJS","responseText","aiResponseJson","JSON","resolved","items","Array","element","setInterval","setTimeout","clearTimeout","clearInterval","GenerateContentPresenterRegistration","GenerateContentPresenter","ToolRegistry","ToolPipelineRunner","GeneratePageContentUseCase","AiPromptFormFactory"],"mappings":"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"}