@webiny/ai-powerups 0.0.0-unstable.0156a4c312

package/admin/presentation/ModelRolesSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/presentation/ModelRolesSettings.js","sources":["../../../src/admin/presentation/ModelRolesSettings.ts"],"sourcesContent":["import type { IAiPowerUpsConnectionPreset } from \"~/admin/features/settings/shared/abstractions.js\";\nimport { AiPowerUpsSettingsGroup } from \"./AiPowerUpsSettings/settingsGroup.js\";\nimport {\n    ListModelsUseCase,\n    ListModelsRepository\n} from \"~/admin/features/listModels/abstractions.js\";\nimport { AI_MODEL_ROLE_DISPLAY } from \"./modelRoles.js\";\nimport type { FormModel } from \"@webiny/app-admin\";\n\n/**\n * Three selects, and for most projects this is the whole AI configuration: one connection, one\n * model per role. Everything else in these settings is opt-in.\n */\nclass ModelRolesSettingsImpl implements AiPowerUpsSettingsGroup.Interface {\n    name = \"modelRoles\";\n    label = \"Model roles\";\n    description = \"Which model does the cheap work, the main work, and the image work.\";\n\n    constructor(\n        private useCase: ListModelsUseCase.Interface,\n        private repository: ListModelsRepository.Interface\n    ) {}\n\n    async init(): Promise<void> {\n        await this.useCase.execute();\n    }\n\n    buildForm(form: AiPowerUpsSettingsGroup.FormBuilder): void {\n        form.fields(fields => ({\n            roles: fields\n                .object()\n                .label(\"Roles\")\n                .renderer(\"passthrough\")\n                .fields(f =>\n                    Object.fromEntries(\n                        AI_MODEL_ROLE_DISPLAY.map(role => [\n                            role.id,\n                            f\n                                .object()\n                                .label(role.label)\n                                /*\n                                 * Both callbacks, not strings. A string here is a *field name* to\n                                 * read the value from, not literal text, so passing prose made the\n                                 * renderer look for a child field called \"Cheap, low-latency\n                                 * work...\" and render no description at all.\n                                 */\n                                .renderer(\"objectAccordionSingle\", {\n                                    itemTitle: () => role.label,\n                                    itemDescription: () => role.description,\n                                    open: true\n                                })\n                                .fields(rf => ({\n                                    connectionId: rf\n                                        .text()\n                                        .label(\"Connection\")\n                                        .description(\"Which API key runs this role.\")\n                                        .options(({ form }) => this.getConnectionOptions(form)),\n                                    model: rf\n                                        .text()\n                                        .label(\"Model\")\n                                        .description(\n                                            \"Only models from the selected connection's vendor are listed.\"\n                                        )\n                                        .disabledWhen(\n                                            ({ form }) => !this.getSelectedConnection(form, role.id)\n                                        )\n                                        .options(({ form }) => this.getModelOptions(form, role.id))\n                                }))\n                        ])\n                    )\n                )\n        }));\n\n        form.layout(layout => [layout.row(\"roles\")]);\n    }\n\n    private getConnections(form: FormModel.Interface): IAiPowerUpsConnectionPreset[] {\n        const data = form.getData() as {\n            connections?: { presets?: IAiPowerUpsConnectionPreset[] };\n        };\n        return data.connections?.presets ?? [];\n    }\n\n    private getConnectionOptions(form: FormModel.Interface) {\n        return this.getConnections(form)\n            .filter(c => c.id && c.name)\n            .map(c => ({ label: c.name, value: c.id }));\n    }\n\n    private getSelectedConnection(\n        form: FormModel.Interface,\n        roleId: string\n    ): IAiPowerUpsConnectionPreset | undefined {\n        const data = form.getData() as {\n            modelRoles?: { roles?: Record<string, { connectionId?: string }> };\n        };\n        const connectionId = data.modelRoles?.roles?.[roleId]?.connectionId;\n\n        if (!connectionId) {\n            return undefined;\n        }\n\n        return this.getConnections(form).find(c => c.id === connectionId);\n    }\n\n    /**\n     * Filtered by the chosen connection's vendor. Listing every model regardless would let someone\n     * pair an OpenAI model with an Anthropic key, which then fails at request time with a provider\n     * auth error that says nothing about the real mistake.\n     */\n    private getModelOptions(form: FormModel.Interface, roleId: string) {\n        const connection = this.getSelectedConnection(form, roleId);\n\n        if (!connection) {\n            return [];\n        }\n\n        return this.repository\n            .getModels()\n            .filter(model => model.providerId === connection.sdkName)\n            .map(model => ({\n                label: model.modelName,\n                value: `${model.providerId}/${model.modelId}`\n            }));\n    }\n}\n\nexport const ModelRolesSettings = AiPowerUpsSettingsGroup.createImplementation({\n    implementation: ModelRolesSettingsImpl,\n    dependencies: [ListModelsUseCase, ListModelsRepository]\n});\n"],"names":["ModelRolesSettingsImpl","useCase","repository","form","fields","f","Object","AI_MODEL_ROLE_DISPLAY","role","rf","layout","data","c","roleId","connectionId","connection","model","ModelRolesSettings","AiPowerUpsSettingsGroup","ListModelsUseCase","ListModelsRepository"],"mappings":";;;AAaA,MAAMA;IAKF,YACYC,OAAoC,EACpCC,UAA0C,CACpD;aAFUD,OAAO,GAAPA;aACAC,UAAU,GAAVA;aANZ,IAAI,GAAG;aACP,KAAK,GAAG;aACR,WAAW,GAAG;IAKX;IAEH,MAAM,OAAsB;QACxB,MAAM,IAAI,CAAC,OAAO,CAAC,OAAO;IAC9B;IAEA,UAAUC,IAAyC,EAAQ;QACvDA,KAAK,MAAM,CAACC,CAAAA,SAAW;gBACnB,OAAOA,OACF,MAAM,GACN,KAAK,CAAC,SACN,QAAQ,CAAC,eACT,MAAM,CAACC,CAAAA,IACJC,OAAO,WAAW,CACdC,sBAAsB,GAAG,CAACC,CAAAA,OAAQ;4BAC9BA,KAAK,EAAE;4BACPH,EACK,MAAM,GACN,KAAK,CAACG,KAAK,KAAK,EAOhB,QAAQ,CAAC,yBAAyB;gCAC/B,WAAW,IAAMA,KAAK,KAAK;gCAC3B,iBAAiB,IAAMA,KAAK,WAAW;gCACvC,MAAM;4BACV,GACC,MAAM,CAACC,CAAAA,KAAO;oCACX,cAAcA,GACT,IAAI,GACJ,KAAK,CAAC,cACN,WAAW,CAAC,iCACZ,OAAO,CAAC,CAAC,EAAEN,IAAI,EAAE,GAAK,IAAI,CAAC,oBAAoB,CAACA;oCACrD,OAAOM,GACF,IAAI,GACJ,KAAK,CAAC,SACN,WAAW,CACR,iEAEH,YAAY,CACT,CAAC,EAAEN,IAAI,EAAE,GAAK,CAAC,IAAI,CAAC,qBAAqB,CAACA,MAAMK,KAAK,EAAE,GAE1D,OAAO,CAAC,CAAC,EAAEL,IAAI,EAAE,GAAK,IAAI,CAAC,eAAe,CAACA,MAAMK,KAAK,EAAE;gCACjE;yBACP;YAGjB;QAEAL,KAAK,MAAM,CAACO,CAAAA,SAAU;gBAACA,OAAO,GAAG,CAAC;aAAS;IAC/C;IAEQ,eAAeP,IAAyB,EAAiC;QAC7E,MAAMQ,OAAOR,KAAK,OAAO;QAGzB,OAAOQ,KAAK,WAAW,EAAE,WAAW,EAAE;IAC1C;IAEQ,qBAAqBR,IAAyB,EAAE;QACpD,OAAO,IAAI,CAAC,cAAc,CAACA,MACtB,MAAM,CAACS,CAAAA,IAAKA,EAAE,EAAE,IAAIA,EAAE,IAAI,EAC1B,GAAG,CAACA,CAAAA,IAAM;gBAAE,OAAOA,EAAE,IAAI;gBAAE,OAAOA,EAAE,EAAE;YAAC;IAChD;IAEQ,sBACJT,IAAyB,EACzBU,MAAc,EACyB;QACvC,MAAMF,OAAOR,KAAK,OAAO;QAGzB,MAAMW,eAAeH,KAAK,UAAU,EAAE,OAAO,CAACE,OAAO,EAAE;QAEvD,IAAI,CAACC,cACD;QAGJ,OAAO,IAAI,CAAC,cAAc,CAACX,MAAM,IAAI,CAACS,CAAAA,IAAKA,EAAE,EAAE,KAAKE;IACxD;IAOQ,gBAAgBX,IAAyB,EAAEU,MAAc,EAAE;QAC/D,MAAME,aAAa,IAAI,CAAC,qBAAqB,CAACZ,MAAMU;QAEpD,IAAI,CAACE,YACD,OAAO,EAAE;QAGb,OAAO,IAAI,CAAC,UAAU,CACjB,SAAS,GACT,MAAM,CAACC,CAAAA,QAASA,MAAM,UAAU,KAAKD,WAAW,OAAO,EACvD,GAAG,CAACC,CAAAA,QAAU;gBACX,OAAOA,MAAM,SAAS;gBACtB,OAAO,GAAGA,MAAM,UAAU,CAAC,CAAC,EAAEA,MAAM,OAAO,EAAE;YACjD;IACR;AACJ;AAEO,MAAMC,qBAAqBC,wBAAwB,oBAAoB,CAAC;IAC3E,gBAAgBlB;IAChB,cAAc;QAACmB;QAAmBC;KAAqB;AAC3D"}

package/admin/presentation/ProjectsSettings.d.ts

@@ -0,0 +1,11 @@
+import { AiPowerUpsSettingsGroup } from "./AiPowerUpsSettings/settingsGroup.js";
+declare class ProjectsSettingsImpl implements AiPowerUpsSettingsGroup.Interface {
+    name: string;
+    label: string;
+    description: string;
+    buildForm(form: AiPowerUpsSettingsGroup.FormBuilder): void;
+}
+export declare const ProjectsSettings: typeof ProjectsSettingsImpl & {
+    __abstraction: import("@webiny/di").Abstraction<import("./AiPowerUpsSettings/settingsGroup.js").IAiPowerUpsSettingsGroup>;
+};
+export {};

package/admin/presentation/ProjectsSettings.js

@@ -0,0 +1,56 @@
+import { generateAlphaNumericId } from "@webiny/utils";
+import { AiPowerUpsSettingsGroup } from "./AiPowerUpsSettings/settingsGroup.js";
+class ProjectsSettingsImpl {
+    buildForm(form) {
+        form.fields((fields)=>({
+                presets: fields.object().label("Presets").renderer("objectAccordionMultiple", {
+                    container: false,
+                    addItemLabel: "Add project",
+                    itemTitle: (data, index)=>String(data.name || `Project #${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 project in the UI."),
+                        description: f.text().label("Description").description("Human-facing description shown in the project picker. Not sent to the LLM.").renderer("textarea", {
+                            rows: 3
+                        }),
+                        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(({ form })=>{
+                            const data = form.getData();
+                            const presets = data?.readerPersonas?.presets;
+                            if (!presets || 0 === presets.length) return [];
+                            return presets.map((preset)=>({
+                                    label: preset.name,
+                                    value: preset.id
+                                }));
+                        }),
+                        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)=>({
+                                    label: preset.name,
+                                    value: preset.id
+                                }));
+                        }),
+                        files: f.file().label("Files").list().description("Add files from the library to include as context for the LLM.").note("Only files containing text will be sent to the LLM (.mdx, .md, .html, .json, .csv, .txt, etc.)")
+                    })).list()
+            }));
+        form.layout((layout)=>[
+                layout.row("presets")
+            ]);
+    }
+    constructor(){
+        this.name = "projects";
+        this.label = "Projects";
+        this.description = "Predefined prompting contexts.";
+    }
+}
+const ProjectsSettings = AiPowerUpsSettingsGroup.createImplementation({
+    implementation: ProjectsSettingsImpl,
+    dependencies: []
+});
+export { ProjectsSettings };
+
+//# sourceMappingURL=ProjectsSettings.js.map

package/admin/presentation/ProjectsSettings.js.map

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,16 @@
+import { AiPowerUpsSettingsGroup } from "./AiPowerUpsSettings/settingsGroup.js";
+import { ListModelsUseCase, ListModelsRepository } from "../../admin/features/listModels/abstractions.js";
+declare class ProviderSettingsImpl implements AiPowerUpsSettingsGroup.Interface {
+    private useCase;
+    private repository;
+    name: string;
+    label: string;
+    description: string;
+    constructor(useCase: ListModelsUseCase.Interface, repository: ListModelsRepository.Interface);
+    buildForm(form: AiPowerUpsSettingsGroup.FormBuilder): void;
+    private getModelOptions;
+}
+export declare const ProviderSettings: typeof ProviderSettingsImpl & {
+    __abstraction: import("@webiny/di").Abstraction<import("./AiPowerUpsSettings/settingsGroup.js").IAiPowerUpsSettingsGroup>;
+};
+export {};

package/admin/presentation/ProvidersSettings.js

@@ -0,0 +1,46 @@
+import { generateAlphaNumericId } from "@webiny/utils";
+import { AiPowerUpsSettingsGroup } from "./AiPowerUpsSettings/settingsGroup.js";
+import { ListModelsRepository, ListModelsUseCase } from "../features/listModels/abstractions.js";
+class ProviderSettingsImpl {
+    constructor(useCase, repository){
+        this.useCase = useCase;
+        this.repository = repository;
+        this.name = "providers";
+        this.label = "Providers";
+        this.description = "Configure AI model providers.";
+    }
+    buildForm(form) {
+        this.useCase.execute();
+        form.fields((fields)=>({
+                presets: fields.object().label("Presets").renderer("objectAccordionMultiple", {
+                    container: false,
+                    addItemLabel: "Add provider",
+                    itemTitle: (data, index)=>String(data.name || `Provider #${index + 1}`)
+                }).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()).renderer("autoComplete"),
+                        apiKey: f.text().label("API Key").required("API Key is required")
+                    })).list()
+            }));
+        form.layout((layout)=>[
+                layout.row("presets")
+            ]);
+    }
+    getModelOptions() {
+        return this.repository.getModels().map((model)=>({
+                label: `${model.modelName} (${model.modelId})`,
+                value: `${model.providerId}/${model.modelId}`
+            }));
+    }
+}
+const ProviderSettings = AiPowerUpsSettingsGroup.createImplementation({
+    implementation: ProviderSettingsImpl,
+    dependencies: [
+        ListModelsUseCase,
+        ListModelsRepository
+    ]
+});
+export { ProviderSettings };
+
+//# sourceMappingURL=ProvidersSettings.js.map

package/admin/presentation/ProvidersSettings.js.map

@@ -0,0 +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                        .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/ReaderPersonasSettings.d.ts

@@ -0,0 +1,11 @@
+import { AiPowerUpsSettingsGroup } from "./AiPowerUpsSettings/settingsGroup.js";
+declare class ReaderPersonasSettingsImpl implements AiPowerUpsSettingsGroup.Interface {
+    name: string;
+    label: string;
+    description: string;
+    buildForm(form: AiPowerUpsSettingsGroup.FormBuilder): void;
+}
+export declare const ReaderPersonasSettings: typeof ReaderPersonasSettingsImpl & {
+    __abstraction: import("@webiny/di").Abstraction<import("./AiPowerUpsSettings/settingsGroup.js").IAiPowerUpsSettingsGroup>;
+};
+export {};

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 { hasUsableModel, useAiPowerUpsSettings } from "../AiPowerUpsSettings/index.js";
+const GenerateContentButton = ()=>{
+    const { openDialog } = useOpenDialog();
+    const { settings } = useAiPowerUpsSettings();
+    if (!hasUsableModel(settings)) 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 {\n    hasUsableModel,\n    useAiPowerUpsSettings\n} from \"~/admin/presentation/AiPowerUpsSettings/index.js\";\n\nexport const GenerateContentButton = () => {\n    const { openDialog } = useOpenDialog();\n    const { settings } = useAiPowerUpsSettings();\n\n    if (!hasUsableModel(settings)) {\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","hasUsableModel","IconButton","ChatIcon","GENERATE_CONTENT_DIALOG"],"mappings":";;;;;;AAUO,MAAMA,wBAAwB;IACjC,MAAM,EAAEC,UAAU,EAAE,GAAGC;IACvB,MAAM,EAAEC,QAAQ,EAAE,GAAGC;IAErB,IAAI,CAACC,eAAeF,WAChB,OAAO;IAGX,OAAO,WAAP,GACI,oBAACG,YAAUA;QACP,SAAQ;QACR,oBAAM,oBAACC,gBAAQA;QACf,SAAS,IAAMN,WAAWO,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 {};