@webiny/app-admin 0.0.0-unstable.a4f3e4ea8b → 0.0.0-unstable.a85ef555b2

package/presentation/banners/components/Banner.js

@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+import { useBanner } from "../useBanner.js";
+const Banner = (props)=>{
+    const { showBanner, hideBanner } = useBanner();
+    const { id, variant, title, message, dismissible, action } = props;
+    useEffect(()=>{
+        showBanner({
+            id,
+            variant,
+            title,
+            message,
+            dismissible,
+            action
+        });
+    }, [
+        id,
+        variant,
+        title,
+        message,
+        dismissible,
+        action?.label,
+        action?.disabled,
+        action?.onClick
+    ]);
+    useEffect(()=>()=>hideBanner(id), [
+        id
+    ]);
+    return null;
+};
+export { Banner };
+
+//# sourceMappingURL=Banner.js.map

package/presentation/banners/components/Banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/banners/components/Banner.js","sources":["../../../../src/presentation/banners/components/Banner.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { Banners } from \"~/features/banners/abstractions.js\";\nimport { useBanner } from \"../useBanner.js\";\n\nexport type BannerProps = Banners.Banner;\n\n/**\n * Shows a banner for as long as this component is mounted, and hides it on unmount. Renders\n * nothing itself; the Layout's bar does the drawing.\n *\n * To show a banner from an event handler, use `useBanner()`. Outside React, inject `Banners`\n * and call `show()` and `hide()` directly.\n */\nexport const Banner = (props: BannerProps) => {\n    const { showBanner, hideBanner } = useBanner();\n    const { id, variant, title, message, dismissible, action } = props;\n\n    useEffect(() => {\n        showBanner({ id, variant, title, message, dismissible, action });\n    }, [\n        id,\n        variant,\n        title,\n        message,\n        dismissible,\n        action?.label,\n        action?.disabled,\n        action?.onClick\n    ]);\n\n    useEffect(() => {\n        return () => hideBanner(id);\n    }, [id]);\n\n    return null;\n};\n"],"names":["Banner","props","showBanner","hideBanner","useBanner","id","variant","title","message","dismissible","action","useEffect"],"mappings":";;AAaO,MAAMA,SAAS,CAACC;IACnB,MAAM,EAAEC,UAAU,EAAEC,UAAU,EAAE,GAAGC;IACnC,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAEC,KAAK,EAAEC,OAAO,EAAEC,WAAW,EAAEC,MAAM,EAAE,GAAGT;IAE7DU,UAAU;QACNT,WAAW;YAAEG;YAAIC;YAASC;YAAOC;YAASC;YAAaC;QAAO;IAClE,GAAG;QACCL;QACAC;QACAC;QACAC;QACAC;QACAC,QAAQ;QACRA,QAAQ;QACRA,QAAQ;KACX;IAEDC,UAAU,IACC,IAAMR,WAAWE,KACzB;QAACA;KAAG;IAEP,OAAO;AACX"}

package/presentation/banners/components/BannerBar.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+/**
+ * The bar across the top of the content column, above the header. Rendered once, by the Layout.
+ *
+ * It is always exactly `--spacing-banner` tall, and the text is cut to one line, with the full text
+ * in the tooltip. A known height is what lets the Layout take the bar out of `h-main-content` with
+ * plain CSS, instead of measuring the bar at runtime.
+ */
+export declare const BannerBar: (() => React.JSX.Element | null) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element | null;
+};

package/presentation/banners/components/BannerBar.js

@@ -0,0 +1,51 @@
+import react from "react";
+import { useFeature } from "@webiny/app";
+import { Button, IconButton, Text, cn } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/close.svg";
+import { createReactiveComponent } from "../../createReactiveComponent.js";
+import { BannersPresenterFeature } from "../feature.js";
+const VARIANT_CLASS_NAMES = {
+    info: "bg-neutral-dimmed",
+    success: "bg-success-subtle",
+    warning: "bg-warning",
+    error: "bg-destructive-subtle"
+};
+function fullText(banner) {
+    if (!banner.title) return banner.message;
+    return `${banner.title} ${banner.message}`;
+}
+const BannerBar = createReactiveComponent(()=>{
+    const { presenter } = useFeature(BannersPresenterFeature);
+    const { banner } = presenter.vm;
+    if (!banner) return null;
+    let action = null;
+    if (banner.actionLabel) action = /*#__PURE__*/ react.createElement(Button, {
+        variant: "ghost",
+        size: "sm",
+        text: banner.actionLabel,
+        disabled: banner.actionDisabled,
+        onClick: ()=>presenter.runAction()
+    });
+    let close = null;
+    if (banner.dismissible) close = /*#__PURE__*/ react.createElement(IconButton, {
+        variant: "ghost",
+        size: "sm",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        "aria-label": "Dismiss banner",
+        onClick: ()=>presenter.dismiss()
+    });
+    return /*#__PURE__*/ react.createElement("div", {
+        className: cn("grid h-banner grid-cols-[1fr_minmax(0,max-content)_1fr] items-center gap-sm px-sm", VARIANT_CLASS_NAMES[banner.variant]),
+        "data-admin-banner": banner.variant,
+        "data-testid": "admin-banner"
+    }, /*#__PURE__*/ react.createElement("span", null), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "truncate text-center text-neutral-primary",
+        title: fullText(banner)
+    }, banner.title ? /*#__PURE__*/ react.createElement("strong", null, `${banner.title} `) : null, banner.message), /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center justify-self-end gap-xs"
+    }, action, close));
+});
+export { BannerBar };
+
+//# sourceMappingURL=BannerBar.js.map

package/presentation/banners/components/BannerBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/banners/components/BannerBar.js","sources":["../../../../src/presentation/banners/components/BannerBar.tsx"],"sourcesContent":["import React from \"react\";\nimport { useFeature } from \"@webiny/app\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { IconButton } from \"@webiny/admin-ui\";\nimport { Text } from \"@webiny/admin-ui\";\nimport { cn } from \"@webiny/admin-ui\";\nimport { ReactComponent as CloseIcon } from \"@webiny/icons/close.svg\";\nimport { createReactiveComponent } from \"~/presentation/createReactiveComponent.js\";\nimport { BannersPresenterFeature } from \"../feature.js\";\nimport type { BannersPresenter } from \"../abstractions.js\";\n\nconst VARIANT_CLASS_NAMES: Record<BannersPresenter.Banner[\"variant\"], string> = {\n    info: \"bg-neutral-dimmed\",\n    success: \"bg-success-subtle\",\n    warning: \"bg-warning\",\n    error: \"bg-destructive-subtle\"\n};\n\nfunction fullText(banner: BannersPresenter.Banner): string {\n    if (!banner.title) {\n        return banner.message;\n    }\n    return `${banner.title} ${banner.message}`;\n}\n\n/**\n * The bar across the top of the content column, above the header. Rendered once, by the Layout.\n *\n * It is always exactly `--spacing-banner` tall, and the text is cut to one line, with the full text\n * in the tooltip. A known height is what lets the Layout take the bar out of `h-main-content` with\n * plain CSS, instead of measuring the bar at runtime.\n */\nexport const BannerBar = createReactiveComponent(() => {\n    const { presenter } = useFeature(BannersPresenterFeature);\n    const { banner } = presenter.vm;\n\n    if (!banner) {\n        return null;\n    }\n\n    let action = null;\n    if (banner.actionLabel) {\n        action = (\n            <Button\n                variant={\"ghost\"}\n                size={\"sm\"}\n                text={banner.actionLabel}\n                disabled={banner.actionDisabled}\n                onClick={() => presenter.runAction()}\n            />\n        );\n    }\n\n    let close = null;\n    if (banner.dismissible) {\n        close = (\n            <IconButton\n                variant={\"ghost\"}\n                size={\"sm\"}\n                icon={<CloseIcon />}\n                aria-label={\"Dismiss banner\"}\n                onClick={() => presenter.dismiss()}\n            />\n        );\n    }\n\n    return (\n        <div\n            className={cn(\n                \"grid h-banner grid-cols-[1fr_minmax(0,max-content)_1fr] items-center gap-sm px-sm\",\n                VARIANT_CLASS_NAMES[banner.variant]\n            )}\n            data-admin-banner={banner.variant}\n            data-testid={\"admin-banner\"}\n        >\n            <span />\n            <Text\n                size={\"sm\"}\n                className={\"truncate text-center text-neutral-primary\"}\n                title={fullText(banner)}\n            >\n                {banner.title ? <strong>{`${banner.title} `}</strong> : null}\n                {banner.message}\n            </Text>\n            <div className={\"flex items-center justify-self-end gap-xs\"}>\n                {action}\n                {close}\n            </div>\n        </div>\n    );\n});\n"],"names":["VARIANT_CLASS_NAMES","fullText","banner","BannerBar","createReactiveComponent","presenter","useFeature","BannersPresenterFeature","action","Button","close","IconButton","CloseIcon","cn","Text"],"mappings":";;;;;;AAWA,MAAMA,sBAA0E;IAC5E,MAAM;IACN,SAAS;IACT,SAAS;IACT,OAAO;AACX;AAEA,SAASC,SAASC,MAA+B;IAC7C,IAAI,CAACA,OAAO,KAAK,EACb,OAAOA,OAAO,OAAO;IAEzB,OAAO,GAAGA,OAAO,KAAK,CAAC,CAAC,EAAEA,OAAO,OAAO,EAAE;AAC9C;AASO,MAAMC,YAAYC,wBAAwB;IAC7C,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IACjC,MAAM,EAAEL,MAAM,EAAE,GAAGG,UAAU,EAAE;IAE/B,IAAI,CAACH,QACD,OAAO;IAGX,IAAIM,SAAS;IACb,IAAIN,OAAO,WAAW,EAClBM,SAAS,WAATA,GACI,oBAACC,QAAMA;QACH,SAAS;QACT,MAAM;QACN,MAAMP,OAAO,WAAW;QACxB,UAAUA,OAAO,cAAc;QAC/B,SAAS,IAAMG,UAAU,SAAS;;IAK9C,IAAIK,QAAQ;IACZ,IAAIR,OAAO,WAAW,EAClBQ,QAAQ,WAARA,GACI,oBAACC,YAAUA;QACP,SAAS;QACT,MAAM;QACN,oBAAM,oBAACC,gBAASA;QAChB,cAAY;QACZ,SAAS,IAAMP,UAAU,OAAO;;IAK5C,OAAO,WAAP,GACI,oBAAC;QACG,WAAWQ,GACP,qFACAb,mBAAmB,CAACE,OAAO,OAAO,CAAC;QAEvC,qBAAmBA,OAAO,OAAO;QACjC,eAAa;qBAEb,oBAAC,6BACD,oBAACY,MAAIA;QACD,MAAM;QACN,WAAW;QACX,OAAOb,SAASC;OAEfA,OAAO,KAAK,GAAG,WAAH,GAAG,oBAAC,gBAAQ,GAAGA,OAAO,KAAK,CAAC,CAAC,CAAC,IAAa,MACvDA,OAAO,OAAO,iBAEnB,oBAAC;QAAI,WAAW;OACXM,QACAE;AAIjB"}

package/presentation/banners/feature.d.ts

@@ -0,0 +1,3 @@
+export declare const BannersPresenterFeature: import("@webiny/feature/admin").FeatureDefinition<{
+    presenter: import("./abstractions.js").IBannersPresenter;
+}, []>;

package/presentation/banners/feature.js

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

package/presentation/banners/feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/banners/feature.js","sources":["../../../src/presentation/banners/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { BannersPresenter as Abstraction } from \"./abstractions.js\";\nimport { BannersPresenter } from \"./BannersPresenter.js\";\n\nexport const BannersPresenterFeature = createFeature({\n    name: \"BannersPresenter\",\n    register(container) {\n        // Singleton so every mount of the bar reads the same state.\n        container.register(BannersPresenter).inSingletonScope();\n    },\n    resolve(container) {\n        return {\n            presenter: container.resolve(Abstraction)\n        };\n    }\n});\n"],"names":["BannersPresenterFeature","createFeature","container","BannersPresenter","Abstraction"],"mappings":";;;AAIO,MAAMA,0BAA0BC,cAAc;IACjD,MAAM;IACN,UAASC,SAAS;QAEdA,UAAU,QAAQ,CAACC,+CAAkB,gBAAgB;IACzD;IACA,SAAQD,SAAS;QACb,OAAO;YACH,WAAWA,UAAU,OAAO,CAACE;QACjC;IACJ;AACJ"}

package/presentation/banners/index.d.ts

@@ -0,0 +1,6 @@
+export { BannersPresenterFeature } from "./feature.js";
+export { BannerBar } from "./components/BannerBar.js";
+export { Banner } from "./components/Banner.js";
+export type { BannerProps } from "./components/Banner.js";
+export { useBanner } from "./useBanner.js";
+export type { UseBannerResponse } from "./useBanner.js";

package/presentation/banners/index.js

@@ -0,0 +1,4 @@
+export { BannersPresenterFeature } from "./feature.js";
+export { BannerBar } from "./components/BannerBar.js";
+export { Banner } from "./components/Banner.js";
+export { useBanner } from "./useBanner.js";

package/presentation/banners/useBanner.d.ts

@@ -0,0 +1,10 @@
+import type { Banners } from "../../features/banners/abstractions.js";
+export interface UseBannerResponse {
+    showBanner(banner: Banners.Banner): void;
+    hideBanner(id: string): void;
+}
+/**
+ * Shows banners from event handlers, the way `useToast` shows toasts. For a banner that should show
+ * for as long as a component is mounted, render `<Banner>` instead.
+ */
+export declare const useBanner: () => UseBannerResponse;

package/presentation/banners/useBanner.js

@@ -0,0 +1,15 @@
+import { useMemo } from "react";
+import { useFeature } from "@webiny/app";
+import { BannersFeature } from "../../features/banners/feature.js";
+const useBanner = ()=>{
+    const { banners } = useFeature(BannersFeature);
+    return useMemo(()=>({
+            showBanner: (banner)=>banners.show(banner),
+            hideBanner: (id)=>banners.hide(id)
+        }), [
+        banners
+    ]);
+};
+export { useBanner };
+
+//# sourceMappingURL=useBanner.js.map

package/presentation/banners/useBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/banners/useBanner.js","sources":["../../../src/presentation/banners/useBanner.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useFeature } from \"@webiny/app\";\nimport { BannersFeature } from \"~/features/banners/feature.js\";\nimport type { Banners } from \"~/features/banners/abstractions.js\";\n\nexport interface UseBannerResponse {\n    // Shows the banner, or updates it in place if one with the same `id` is already showing.\n    showBanner(banner: Banners.Banner): void;\n    hideBanner(id: string): void;\n}\n\n/**\n * Shows banners from event handlers, the way `useToast` shows toasts. For a banner that should show\n * for as long as a component is mounted, render `<Banner>` instead.\n */\nexport const useBanner = (): UseBannerResponse => {\n    const { banners } = useFeature(BannersFeature);\n\n    return useMemo(() => {\n        return {\n            showBanner: (banner: Banners.Banner) => banners.show(banner),\n            hideBanner: (id: string) => banners.hide(id)\n        };\n    }, [banners]);\n};\n"],"names":["useBanner","banners","useFeature","BannersFeature","useMemo","banner","id"],"mappings":";;;AAeO,MAAMA,YAAY;IACrB,MAAM,EAAEC,OAAO,EAAE,GAAGC,WAAWC;IAE/B,OAAOC,QAAQ,IACJ;YACH,YAAY,CAACC,SAA2BJ,QAAQ,IAAI,CAACI;YACrD,YAAY,CAACC,KAAeL,QAAQ,IAAI,CAACK;QAC7C,IACD;QAACL;KAAQ;AAChB"}

package/presentation/commandPalette/CommandPalettePresenter.d.ts

@@ -3,6 +3,8 @@ export declare class CommandPalettePresenter implements Abstraction.Interface {
     private getCommands;
     private isOpen;
     private activeCommandName;
+    private aiModeActive;
+    private query;
     private resolvedCommands;
     constructor(getCommands: () => Command.Interface[]);
     init(): void;
@@ -10,6 +12,9 @@ export declare class CommandPalettePresenter implements Abstraction.Interface {
     get vm(): CommandPaletteViewModel;
     open(): void;
     close(): void;
+    enterAiMode(): void;
+    exitAiMode(): void;
+    setQuery(query: string): void;
     toggle(): void;
     useCommand(name: string): void;
     cancelCommand(): void;

package/presentation/commandPalette/CommandPalettePresenter.js

@@ -4,6 +4,8 @@ class CommandPalettePresenter {
         this.getCommands = getCommands;
         this.isOpen = false;
         this.activeCommandName = null;
+        this.aiModeActive = false;
+        this.query = "";
         this.resolvedCommands = [];
         makeAutoObservable(this);
     }
@@ -22,6 +24,8 @@ class CommandPalettePresenter {
         const activeCmd = null !== this.activeCommandName ? this.resolvedCommands.find((c)=>c.name === this.activeCommandName) : null;
         return {
             isOpen: this.isOpen,
+            aiModeActive: this.aiModeActive,
+            query: this.query,
             commands: this.resolvedCommands.map((cmd)=>({
                     name: cmd.name,
                     label: cmd.label,
@@ -30,7 +34,8 @@ class CommandPalettePresenter {
                     category: cmd.category,
                     keywords: cmd.keywords,
                     shortcut: cmd.shortcut,
-                    hasDetailView: Boolean(cmd.detailView)
+                    hasDetailView: Boolean(cmd.detailView),
+                    entersAiMode: Boolean(cmd.entersAiMode)
                 })),
             activeCommand: activeCmd && activeCmd.detailView ? {
                 command: activeCmd,
@@ -41,11 +46,26 @@ class CommandPalettePresenter {
     open() {
         this.resolvedCommands = this.getCommands();
         this.activeCommandName = null;
+        this.aiModeActive = false;
+        this.query = "";
         this.isOpen = true;
     }
     close() {
         this.isOpen = false;
         this.activeCommandName = null;
+        this.aiModeActive = false;
+        this.query = "";
+    }
+    enterAiMode() {
+        this.aiModeActive = true;
+        this.query = "";
+    }
+    exitAiMode() {
+        this.aiModeActive = false;
+        this.query = "";
+    }
+    setQuery(query) {
+        this.query = query;
     }
     toggle() {
         if (this.isOpen) this.close();
@@ -54,13 +74,14 @@ class CommandPalettePresenter {
     useCommand(name) {
         const cmd = this.resolvedCommands.find((c)=>c.name === name);
         if (!cmd) return;
+        if (cmd.entersAiMode) return void this.enterAiMode();
         if (cmd.detailView) {
             this.activeCommandName = name;
             this.isOpen = true;
-        } else {
-            cmd.execute();
-            this.close();
+            return;
         }
+        cmd.execute?.();
+        this.close();
     }
     cancelCommand() {
         this.activeCommandName = null;

package/presentation/commandPalette/CommandPalettePresenter.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/commandPalette/CommandPalettePresenter.js","sources":["../../../src/presentation/commandPalette/CommandPalettePresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport {\n    Command,\n    CommandPalettePresenter as Abstraction,\n    type CommandPaletteViewModel\n} from \"./abstractions.js\";\n\nexport class CommandPalettePresenter implements Abstraction.Interface {\n    private isOpen = false;\n    private activeCommandName: string | null = null;\n    private resolvedCommands: Command.Interface[] = [];\n\n    constructor(private getCommands: () => Command.Interface[]) {\n        makeAutoObservable(this);\n    }\n\n    init(): void {\n        this.resolvedCommands = this.getCommands();\n    }\n\n    get shortcutKeys(): Record<string, (e: KeyboardEvent) => void> {\n        const keys: Record<string, (e: KeyboardEvent) => void> = {};\n        for (const cmd of this.resolvedCommands) {\n            if (cmd.shortcut) {\n                keys[cmd.shortcut] = (e: KeyboardEvent) => {\n                    e.preventDefault();\n                    this.useCommand(cmd.name);\n                };\n            }\n        }\n        return keys;\n    }\n\n    get vm(): CommandPaletteViewModel {\n        const activeCmd =\n            this.activeCommandName !== null\n                ? this.resolvedCommands.find(c => c.name === this.activeCommandName)\n                : null;\n\n        return {\n            isOpen: this.isOpen,\n            commands: this.resolvedCommands.map(cmd => ({\n                name: cmd.name,\n                label: cmd.label,\n                description: cmd.description,\n                icon: cmd.icon,\n                category: cmd.category,\n                keywords: cmd.keywords,\n                shortcut: cmd.shortcut,\n                hasDetailView: Boolean(cmd.detailView)\n            })),\n            activeCommand:\n                activeCmd && activeCmd.detailView\n                    ? {\n                          command: activeCmd,\n                          DetailView: activeCmd.detailView\n                      }\n                    : null\n        };\n    }\n\n    open(): void {\n        this.resolvedCommands = this.getCommands();\n        this.activeCommandName = null;\n        this.isOpen = true;\n    }\n\n    close(): void {\n        this.isOpen = false;\n        this.activeCommandName = null;\n    }\n\n    toggle(): void {\n        if (this.isOpen) {\n            this.close();\n        } else {\n            this.open();\n        }\n    }\n\n    useCommand(name: string): void {\n        const cmd = this.resolvedCommands.find(c => c.name === name);\n        if (!cmd) {\n            return;\n        }\n\n        if (cmd.detailView) {\n            this.activeCommandName = name;\n            this.isOpen = true;\n        } else {\n            cmd.execute();\n            this.close();\n        }\n    }\n\n    cancelCommand(): void {\n        this.activeCommandName = null;\n    }\n}\n"],"names":["CommandPalettePresenter","getCommands","makeAutoObservable","keys","cmd","e","activeCmd","c","Boolean","name"],"mappings":";AAOO,MAAMA;IAKT,YAAoBC,WAAsC,CAAE;aAAxCA,WAAW,GAAXA;aAJZ,MAAM,GAAG;aACT,iBAAiB,GAAkB;aACnC,gBAAgB,GAAwB,EAAE;QAG9CC,mBAAmB,IAAI;IAC3B;IAEA,OAAa;QACT,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW;IAC5C;IAEA,IAAI,eAA2D;QAC3D,MAAMC,OAAmD,CAAC;QAC1D,KAAK,MAAMC,OAAO,IAAI,CAAC,gBAAgB,CACnC,IAAIA,IAAI,QAAQ,EACZD,IAAI,CAACC,IAAI,QAAQ,CAAC,GAAG,CAACC;YAClBA,EAAE,cAAc;YAChB,IAAI,CAAC,UAAU,CAACD,IAAI,IAAI;QAC5B;QAGR,OAAOD;IACX;IAEA,IAAI,KAA8B;QAC9B,MAAMG,YACF,AAA2B,SAA3B,IAAI,CAAC,iBAAiB,GAChB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAACC,CAAAA,IAAKA,EAAE,IAAI,KAAK,IAAI,CAAC,iBAAiB,IACjE;QAEV,OAAO;YACH,QAAQ,IAAI,CAAC,MAAM;YACnB,UAAU,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAACH,CAAAA,MAAQ;oBACxC,MAAMA,IAAI,IAAI;oBACd,OAAOA,IAAI,KAAK;oBAChB,aAAaA,IAAI,WAAW;oBAC5B,MAAMA,IAAI,IAAI;oBACd,UAAUA,IAAI,QAAQ;oBACtB,UAAUA,IAAI,QAAQ;oBACtB,UAAUA,IAAI,QAAQ;oBACtB,eAAeI,QAAQJ,IAAI,UAAU;gBACzC;YACA,eACIE,aAAaA,UAAU,UAAU,GAC3B;gBACI,SAASA;gBACT,YAAYA,UAAU,UAAU;YACpC,IACA;QACd;IACJ;IAEA,OAAa;QACT,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW;QACxC,IAAI,CAAC,iBAAiB,GAAG;QACzB,IAAI,CAAC,MAAM,GAAG;IAClB;IAEA,QAAc;QACV,IAAI,CAAC,MAAM,GAAG;QACd,IAAI,CAAC,iBAAiB,GAAG;IAC7B;IAEA,SAAe;QACX,IAAI,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,KAAK;aAEV,IAAI,CAAC,IAAI;IAEjB;IAEA,WAAWG,IAAY,EAAQ;QAC3B,MAAML,MAAM,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAACG,CAAAA,IAAKA,EAAE,IAAI,KAAKE;QACvD,IAAI,CAACL,KACD;QAGJ,IAAIA,IAAI,UAAU,EAAE;YAChB,IAAI,CAAC,iBAAiB,GAAGK;YACzB,IAAI,CAAC,MAAM,GAAG;QAClB,OAAO;YACHL,IAAI,OAAO;YACX,IAAI,CAAC,KAAK;QACd;IACJ;IAEA,gBAAsB;QAClB,IAAI,CAAC,iBAAiB,GAAG;IAC7B;AACJ"}
+{"version":3,"file":"presentation/commandPalette/CommandPalettePresenter.js","sources":["../../../src/presentation/commandPalette/CommandPalettePresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport {\n    Command,\n    CommandPalettePresenter as Abstraction,\n    type CommandPaletteViewModel\n} from \"./abstractions.js\";\n\nexport class CommandPalettePresenter implements Abstraction.Interface {\n    private isOpen = false;\n    private activeCommandName: string | null = null;\n    private aiModeActive = false;\n    private query = \"\";\n    private resolvedCommands: Command.Interface[] = [];\n\n    constructor(private getCommands: () => Command.Interface[]) {\n        makeAutoObservable(this);\n    }\n\n    init(): void {\n        this.resolvedCommands = this.getCommands();\n    }\n\n    get shortcutKeys(): Record<string, (e: KeyboardEvent) => void> {\n        const keys: Record<string, (e: KeyboardEvent) => void> = {};\n        for (const cmd of this.resolvedCommands) {\n            if (cmd.shortcut) {\n                keys[cmd.shortcut] = (e: KeyboardEvent) => {\n                    e.preventDefault();\n                    this.useCommand(cmd.name);\n                };\n            }\n        }\n        return keys;\n    }\n\n    get vm(): CommandPaletteViewModel {\n        const activeCmd =\n            this.activeCommandName !== null\n                ? this.resolvedCommands.find(c => c.name === this.activeCommandName)\n                : null;\n\n        return {\n            isOpen: this.isOpen,\n            aiModeActive: this.aiModeActive,\n            query: this.query,\n            commands: this.resolvedCommands.map(cmd => ({\n                name: cmd.name,\n                label: cmd.label,\n                description: cmd.description,\n                icon: cmd.icon,\n                category: cmd.category,\n                keywords: cmd.keywords,\n                shortcut: cmd.shortcut,\n                hasDetailView: Boolean(cmd.detailView),\n                entersAiMode: Boolean(cmd.entersAiMode)\n            })),\n            activeCommand:\n                activeCmd && activeCmd.detailView\n                    ? {\n                          command: activeCmd,\n                          DetailView: activeCmd.detailView\n                      }\n                    : null\n        };\n    }\n\n    open(): void {\n        this.resolvedCommands = this.getCommands();\n        this.activeCommandName = null;\n        this.aiModeActive = false;\n        this.query = \"\";\n        this.isOpen = true;\n    }\n\n    close(): void {\n        this.isOpen = false;\n        this.activeCommandName = null;\n        this.aiModeActive = false;\n        this.query = \"\";\n    }\n\n    enterAiMode(): void {\n        this.aiModeActive = true;\n        this.query = \"\";\n    }\n\n    exitAiMode(): void {\n        this.aiModeActive = false;\n        this.query = \"\";\n    }\n\n    setQuery(query: string): void {\n        this.query = query;\n    }\n\n    toggle(): void {\n        if (this.isOpen) {\n            this.close();\n        } else {\n            this.open();\n        }\n    }\n\n    useCommand(name: string): void {\n        const cmd = this.resolvedCommands.find(c => c.name === name);\n        if (!cmd) {\n            return;\n        }\n\n        if (cmd.entersAiMode) {\n            // A mode replaces the command list and keeps the input row, so the palette stays open.\n            this.enterAiMode();\n            return;\n        }\n\n        if (cmd.detailView) {\n            this.activeCommandName = name;\n            this.isOpen = true;\n            return;\n        }\n\n        cmd.execute?.();\n        this.close();\n    }\n\n    cancelCommand(): void {\n        this.activeCommandName = null;\n    }\n}\n"],"names":["CommandPalettePresenter","getCommands","makeAutoObservable","keys","cmd","e","activeCmd","c","Boolean","query","name"],"mappings":";AAOO,MAAMA;IAOT,YAAoBC,WAAsC,CAAE;aAAxCA,WAAW,GAAXA;aANZ,MAAM,GAAG;aACT,iBAAiB,GAAkB;aACnC,YAAY,GAAG;aACf,KAAK,GAAG;aACR,gBAAgB,GAAwB,EAAE;QAG9CC,mBAAmB,IAAI;IAC3B;IAEA,OAAa;QACT,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW;IAC5C;IAEA,IAAI,eAA2D;QAC3D,MAAMC,OAAmD,CAAC;QAC1D,KAAK,MAAMC,OAAO,IAAI,CAAC,gBAAgB,CACnC,IAAIA,IAAI,QAAQ,EACZD,IAAI,CAACC,IAAI,QAAQ,CAAC,GAAG,CAACC;YAClBA,EAAE,cAAc;YAChB,IAAI,CAAC,UAAU,CAACD,IAAI,IAAI;QAC5B;QAGR,OAAOD;IACX;IAEA,IAAI,KAA8B;QAC9B,MAAMG,YACF,AAA2B,SAA3B,IAAI,CAAC,iBAAiB,GAChB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAACC,CAAAA,IAAKA,EAAE,IAAI,KAAK,IAAI,CAAC,iBAAiB,IACjE;QAEV,OAAO;YACH,QAAQ,IAAI,CAAC,MAAM;YACnB,cAAc,IAAI,CAAC,YAAY;YAC/B,OAAO,IAAI,CAAC,KAAK;YACjB,UAAU,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAACH,CAAAA,MAAQ;oBACxC,MAAMA,IAAI,IAAI;oBACd,OAAOA,IAAI,KAAK;oBAChB,aAAaA,IAAI,WAAW;oBAC5B,MAAMA,IAAI,IAAI;oBACd,UAAUA,IAAI,QAAQ;oBACtB,UAAUA,IAAI,QAAQ;oBACtB,UAAUA,IAAI,QAAQ;oBACtB,eAAeI,QAAQJ,IAAI,UAAU;oBACrC,cAAcI,QAAQJ,IAAI,YAAY;gBAC1C;YACA,eACIE,aAAaA,UAAU,UAAU,GAC3B;gBACI,SAASA;gBACT,YAAYA,UAAU,UAAU;YACpC,IACA;QACd;IACJ;IAEA,OAAa;QACT,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW;QACxC,IAAI,CAAC,iBAAiB,GAAG;QACzB,IAAI,CAAC,YAAY,GAAG;QACpB,IAAI,CAAC,KAAK,GAAG;QACb,IAAI,CAAC,MAAM,GAAG;IAClB;IAEA,QAAc;QACV,IAAI,CAAC,MAAM,GAAG;QACd,IAAI,CAAC,iBAAiB,GAAG;QACzB,IAAI,CAAC,YAAY,GAAG;QACpB,IAAI,CAAC,KAAK,GAAG;IACjB;IAEA,cAAoB;QAChB,IAAI,CAAC,YAAY,GAAG;QACpB,IAAI,CAAC,KAAK,GAAG;IACjB;IAEA,aAAmB;QACf,IAAI,CAAC,YAAY,GAAG;QACpB,IAAI,CAAC,KAAK,GAAG;IACjB;IAEA,SAASG,KAAa,EAAQ;QAC1B,IAAI,CAAC,KAAK,GAAGA;IACjB;IAEA,SAAe;QACX,IAAI,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,KAAK;aAEV,IAAI,CAAC,IAAI;IAEjB;IAEA,WAAWC,IAAY,EAAQ;QAC3B,MAAMN,MAAM,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAACG,CAAAA,IAAKA,EAAE,IAAI,KAAKG;QACvD,IAAI,CAACN,KACD;QAGJ,IAAIA,IAAI,YAAY,EAAE,YAElB,IAAI,CAAC,WAAW;QAIpB,IAAIA,IAAI,UAAU,EAAE;YAChB,IAAI,CAAC,iBAAiB,GAAGM;YACzB,IAAI,CAAC,MAAM,GAAG;YACd;QACJ;QAEAN,IAAI,OAAO;QACX,IAAI,CAAC,KAAK;IACd;IAEA,gBAAsB;QAClB,IAAI,CAAC,iBAAiB,GAAG;IAC7B;AACJ"}

package/presentation/commandPalette/abstractions.d.ts

@@ -18,8 +18,9 @@ export interface ICommand {
     category?: string;
     keywords?: string[];
     shortcut?: string;
-    execute(params?: unknown): void | Promise<void>;
+    execute?(params?: unknown): void | Promise<void>;
     detailView?: React.ComponentType<CommandDetailProps>;
+    entersAiMode?: boolean;
 }
 export declare const Command: Abstraction<ICommand>;
 export declare namespace Command {
@@ -35,6 +36,8 @@ export interface CommandItemVm {
     keywords?: string[];
     shortcut?: string;
     hasDetailView: boolean;
+    /** Selecting this switches the palette into AI mode. Lets a caller hide it when AI is off. */
+    entersAiMode: boolean;
 }
 export interface ActiveCommandVm {
     command: ICommand;
@@ -42,6 +45,16 @@ export interface ActiveCommandVm {
 }
 export interface CommandPaletteViewModel {
     isOpen: boolean;
+    /**
+     * A mode is showing instead of the command list. The palette keeps ONE input row across every
+     * mode, so this is the palette's state rather than the mode's.
+     */
+    aiModeActive: boolean;
+    /**
+     * What the user has typed. Owned here rather than by the component because it is cleared
+     * whenever the palette opens, closes, or enters or leaves a mode.
+     */
+    query: string;
     commands: CommandItemVm[];
     activeCommand: ActiveCommandVm | null;
 }
@@ -54,6 +67,9 @@ export interface ICommandPalettePresenter {
     toggle(): void;
     useCommand(name: string): void;
     cancelCommand(): void;
+    enterAiMode(): void;
+    exitAiMode(): void;
+    setQuery(query: string): void;
 }
 export declare const CommandPalettePresenter: Abstraction<ICommandPalettePresenter>;
 export declare namespace CommandPalettePresenter {

package/presentation/commandPalette/abstractions.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/commandPalette/abstractions.js","sources":["../../../src/presentation/commandPalette/abstractions.ts"],"sourcesContent":["import type React from \"react\";\nimport { createAbstraction } from \"@webiny/feature/admin\";\nimport { Abstraction } from \"@webiny/di\";\n\nexport interface CommandDetailProps {\n    command: ICommand;\n    onClose: () => void;\n    onBack: () => void;\n}\n\n/**\n * A command registered with the command palette via dependency injection. Register an\n * implementation with `Command.createImplementation(...)` and add it to the container;\n * the palette resolves all of them with `container.resolveAll(Command)`.\n */\nexport interface ICommand {\n    name: string;\n    label: string;\n    description?: string;\n    icon?: React.ReactNode;\n    category?: string;\n    keywords?: string[];\n    /* Global hotkey (is-hotkey syntax, e.g. \"cmd+shift+m\") that runs this command. */\n    shortcut?: string;\n    execute(params?: unknown): void | Promise<void>;\n    /* Optional React view rendered inside the palette when the command is selected. */\n    detailView?: React.ComponentType<CommandDetailProps>;\n}\n\nexport const Command = createAbstraction<ICommand>(\"Command\");\n\nexport namespace Command {\n    export type Interface = ICommand;\n    export type DetailProps = CommandDetailProps;\n}\n\nexport interface CommandItemVm {\n    name: string;\n    label: string;\n    description?: string;\n    icon?: React.ReactNode;\n    category?: string;\n    keywords?: string[];\n    shortcut?: string;\n    hasDetailView: boolean;\n}\n\nexport interface ActiveCommandVm {\n    command: ICommand;\n    DetailView: React.ComponentType<CommandDetailProps>;\n}\n\nexport interface CommandPaletteViewModel {\n    isOpen: boolean;\n    commands: CommandItemVm[];\n    activeCommand: ActiveCommandVm | null;\n}\n\nexport interface ICommandPalettePresenter {\n    vm: CommandPaletteViewModel;\n    shortcutKeys: Record<string, (e: KeyboardEvent) => void>;\n    init(): void;\n    open(): void;\n    close(): void;\n    toggle(): void;\n    useCommand(name: string): void;\n    cancelCommand(): void;\n}\n\nexport const CommandPalettePresenter = new Abstraction<ICommandPalettePresenter>(\n    \"CommandPalettePresenter\"\n);\n\nexport namespace CommandPalettePresenter {\n    export type Interface = ICommandPalettePresenter;\n    export type ViewModel = CommandPaletteViewModel;\n}\n"],"names":["Command","createAbstraction","CommandPalettePresenter","Abstraction"],"mappings":";;AA6BO,MAAMA,UAAUC,kBAA4B;AAwC5C,MAAMC,0BAA0B,IAAIC,YACvC"}
+{"version":3,"file":"presentation/commandPalette/abstractions.js","sources":["../../../src/presentation/commandPalette/abstractions.ts"],"sourcesContent":["import type React from \"react\";\nimport { createAbstraction } from \"@webiny/feature/admin\";\nimport { Abstraction } from \"@webiny/di\";\n\nexport interface CommandDetailProps {\n    command: ICommand;\n    onClose: () => void;\n    onBack: () => void;\n}\n\n/**\n * A command registered with the command palette via dependency injection. Register an\n * implementation with `Command.createImplementation(...)` and add it to the container;\n * the palette resolves all of them with `container.resolveAll(Command)`.\n */\nexport interface ICommand {\n    name: string;\n    label: string;\n    description?: string;\n    icon?: React.ReactNode;\n    category?: string;\n    keywords?: string[];\n    /* Global hotkey (is-hotkey syntax, e.g. \"cmd+shift+m\") that runs this command. */\n    shortcut?: string;\n    /* Omitted by a command that only selects a mode; there is no action to run. */\n    execute?(params?: unknown): void | Promise<void>;\n    /* Optional React view rendered inside the palette when the command is selected. */\n    detailView?: React.ComponentType<CommandDetailProps>;\n    /*\n     * Selecting this command switches the palette into AI mode rather than doing something. A mode\n     * needs the shared input row, so the palette stays open and `execute` is never called.\n     *\n     * Named after the one mode that exists. If a second one ever arrives, this becomes\n     * `entersMode: \"adminAssistant\"` and the palette looks the mode up by name instead of hardcoding it.\n     */\n    entersAiMode?: boolean;\n}\n\nexport const Command = createAbstraction<ICommand>(\"Command\");\n\nexport namespace Command {\n    export type Interface = ICommand;\n    export type DetailProps = CommandDetailProps;\n}\n\nexport interface CommandItemVm {\n    name: string;\n    label: string;\n    description?: string;\n    icon?: React.ReactNode;\n    category?: string;\n    keywords?: string[];\n    shortcut?: string;\n    hasDetailView: boolean;\n    /** Selecting this switches the palette into AI mode. Lets a caller hide it when AI is off. */\n    entersAiMode: boolean;\n}\n\nexport interface ActiveCommandVm {\n    command: ICommand;\n    DetailView: React.ComponentType<CommandDetailProps>;\n}\n\nexport interface CommandPaletteViewModel {\n    isOpen: boolean;\n    /**\n     * A mode is showing instead of the command list. The palette keeps ONE input row across every\n     * mode, so this is the palette's state rather than the mode's.\n     */\n    aiModeActive: boolean;\n    /**\n     * What the user has typed. Owned here rather than by the component because it is cleared\n     * whenever the palette opens, closes, or enters or leaves a mode.\n     */\n    query: string;\n    commands: CommandItemVm[];\n    activeCommand: ActiveCommandVm | null;\n}\n\nexport interface ICommandPalettePresenter {\n    vm: CommandPaletteViewModel;\n    shortcutKeys: Record<string, (e: KeyboardEvent) => void>;\n    init(): void;\n    open(): void;\n    close(): void;\n    toggle(): void;\n    useCommand(name: string): void;\n    cancelCommand(): void;\n    enterAiMode(): void;\n    exitAiMode(): void;\n    setQuery(query: string): void;\n}\n\nexport const CommandPalettePresenter = new Abstraction<ICommandPalettePresenter>(\n    \"CommandPalettePresenter\"\n);\n\nexport namespace CommandPalettePresenter {\n    export type Interface = ICommandPalettePresenter;\n    export type ViewModel = CommandPaletteViewModel;\n}\n"],"names":["Command","createAbstraction","CommandPalettePresenter","Abstraction"],"mappings":";;AAsCO,MAAMA,UAAUC,kBAA4B;AAuD5C,MAAMC,0BAA0B,IAAIC,YACvC"}

package/presentation/commandPalette/commands/AskAiCommand.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { Command } from "../abstractions.js";
+/**
+ * Discoverable entry point for the palette's AI mode.
+ *
+ * `entersAiMode` rather than `execute`: the design keeps one input row across every mode, so selecting
+ * this switches the palette instead of running an action, and the palette stays open. A command
+ * without a `detailView` is otherwise executed and then closed, which a mode cannot survive.
+ *
+ * It exists as a command at all so it stays searchable ("ai", "ask", "assistant") for people who
+ * never learn the space shortcut.
+ */
+declare class AskAiCommandImpl implements Command.Interface {
+    name: string;
+    label: string;
+    description: string;
+    category: string;
+    keywords: string[];
+    icon: React.JSX.Element;
+    entersAiMode: boolean;
+}
+export declare const AskAiCommand: typeof AskAiCommandImpl & {
+    __abstraction: import("@webiny/di").Abstraction<import("../abstractions.js").ICommand>;
+};
+export {};

package/presentation/commandPalette/commands/AskAiCommand.js

@@ -0,0 +1,33 @@
+import react from "react";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/auto_awesome.svg";
+import { Command } from "../abstractions.js";
+class AskAiCommandImpl {
+    constructor(){
+        this.name = "admin.ai.ask";
+        this.label = "Ask AI";
+        this.description = "Ask about this project, or ask for a change, in plain language";
+        this.category = "Assistant";
+        this.keywords = [
+            "ai",
+            "ask",
+            "assistant",
+            "chat",
+            "search"
+        ];
+        this.icon = /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            size: "sm",
+            color: "neutral-strong",
+            label: ""
+        });
+        this.entersAiMode = true;
+    }
+}
+const AskAiCommand = Command.createImplementation({
+    implementation: AskAiCommandImpl,
+    dependencies: []
+});
+export { AskAiCommand };
+
+//# sourceMappingURL=AskAiCommand.js.map

package/presentation/commandPalette/commands/AskAiCommand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/commandPalette/commands/AskAiCommand.js","sources":["../../../../src/presentation/commandPalette/commands/AskAiCommand.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as AiIcon } from \"@webiny/icons/auto_awesome.svg\";\nimport { Command } from \"../abstractions.js\";\n\n/**\n * Discoverable entry point for the palette's AI mode.\n *\n * `entersAiMode` rather than `execute`: the design keeps one input row across every mode, so selecting\n * this switches the palette instead of running an action, and the palette stays open. A command\n * without a `detailView` is otherwise executed and then closed, which a mode cannot survive.\n *\n * It exists as a command at all so it stays searchable (\"ai\", \"ask\", \"assistant\") for people who\n * never learn the space shortcut.\n */\nclass AskAiCommandImpl implements Command.Interface {\n    name = \"admin.ai.ask\";\n    label = \"Ask AI\";\n    description = \"Ask about this project, or ask for a change, in plain language\";\n    category = \"Assistant\";\n    keywords = [\"ai\", \"ask\", \"assistant\", \"chat\", \"search\"];\n    icon = <Icon icon={<AiIcon />} size=\"sm\" color=\"neutral-strong\" label=\"\" />;\n    entersAiMode = true;\n}\n\nexport const AskAiCommand = Command.createImplementation({\n    implementation: AskAiCommandImpl,\n    dependencies: []\n});\n"],"names":["AskAiCommandImpl","Icon","AiIcon","AskAiCommand","Command"],"mappings":";;;;AAeA,MAAMA;;aACF,IAAI,GAAG;aACP,KAAK,GAAG;aACR,WAAW,GAAG;aACd,QAAQ,GAAG;aACX,QAAQ,GAAG;YAAC;YAAM;YAAO;YAAa;YAAQ;SAAS;aACvD,IAAI,GAAG,WAAP,GAAO,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAMA;YAAK,MAAK;YAAK,OAAM;YAAiB,OAAM;;aACtE,YAAY,GAAG;;AACnB;AAEO,MAAMC,eAAeC,QAAQ,oBAAoB,CAAC;IACrD,gBAAgBJ;IAChB,cAAc,EAAE;AACpB"}

package/presentation/commandPalette/commands/SendMessageCommand.js

@@ -24,7 +24,7 @@ const SendMessageDetailView = ({ command, onClose })=>{
         variant: "primary",
         text: "Send",
         onClick: ()=>{
-            command.execute({
+            command.execute?.({
                 recipient,
                 message
             });

package/presentation/commandPalette/commands/SendMessageCommand.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/commandPalette/commands/SendMessageCommand.js","sources":["../../../../src/presentation/commandPalette/commands/SendMessageCommand.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Button, Icon, Input } from \"@webiny/admin-ui\";\nimport { ReactComponent as SendIcon } from \"@webiny/icons/send.svg\";\nimport { Command } from \"../abstractions.js\";\n\n/**\n * DEMO command showcasing a `detailView`: selecting it opens a form inside the palette,\n * and submitting calls `execute(data)`. Safe to remove — kept as a live example of the\n * detail-view capability.\n */\nconst SendMessageDetailView = ({ command, onClose }: Command.DetailProps) => {\n    const [recipient, setRecipient] = useState(\"\");\n    const [message, setMessage] = useState(\"\");\n\n    return (\n        <div className=\"flex flex-col gap-sm p-md\">\n            <Input\n                label=\"Recipient\"\n                value={recipient}\n                onChange={setRecipient}\n                placeholder=\"Enter recipient\"\n                autoFocus\n            />\n            <Input\n                label=\"Message\"\n                value={message}\n                onChange={setMessage}\n                placeholder=\"Enter your message\"\n            />\n            <div className=\"flex justify-end pt-sm\">\n                <Button\n                    variant=\"primary\"\n                    text=\"Send\"\n                    onClick={() => {\n                        command.execute({ recipient, message });\n                        onClose();\n                    }}\n                />\n            </div>\n        </div>\n    );\n};\n\nclass SendMessageCommandImpl implements Command.Interface {\n    name = \"admin.demo.sendMessage\";\n    label = \"Send message\";\n    description = \"Demo — a form rendered inside the palette\";\n    category = \"Demo\";\n    keywords = [\"demo\", \"form\", \"message\"];\n    shortcut = \"cmd+shift+m\";\n    icon = <Icon icon={<SendIcon />} size=\"sm\" color=\"neutral-strong\" label=\"\" />;\n    detailView = SendMessageDetailView;\n\n    execute(params?: unknown) {\n        const data = params as { recipient?: string; message?: string } | undefined;\n        window.alert(`Message to ${data?.recipient || \"?\"}: ${data?.message || \"\"}`);\n    }\n}\n\nexport const SendMessageCommand = Command.createImplementation({\n    implementation: SendMessageCommandImpl,\n    dependencies: []\n});\n"],"names":["SendMessageDetailView","command","onClose","recipient","setRecipient","useState","message","setMessage","Input","Button","SendMessageCommandImpl","params","data","window","Icon","SendIcon","SendMessageCommand","Command"],"mappings":";;;;AAUA,MAAMA,wBAAwB,CAAC,EAAEC,OAAO,EAAEC,OAAO,EAAuB;IACpE,MAAM,CAACC,WAAWC,aAAa,GAAGC,SAAS;IAC3C,MAAM,CAACC,SAASC,WAAW,GAAGF,SAAS;IAEvC,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAACG,OAAKA;QACF,OAAM;QACN,OAAOL;QACP,UAAUC;QACV,aAAY;QACZ;sBAEJ,oBAACI,OAAKA;QACF,OAAM;QACN,OAAOF;QACP,UAAUC;QACV,aAAY;sBAEhB,oBAAC;QAAI,WAAU;qBACX,oBAACE,QAAMA;QACH,SAAQ;QACR,MAAK;QACL,SAAS;YACLR,QAAQ,OAAO,CAAC;gBAAEE;gBAAWG;YAAQ;YACrCJ;QACJ;;AAKpB;AAEA,MAAMQ;IAUF,QAAQC,MAAgB,EAAE;QACtB,MAAMC,OAAOD;QACbE,OAAO,KAAK,CAAC,CAAC,WAAW,EAAED,MAAM,aAAa,IAAI,EAAE,EAAEA,MAAM,WAAW,IAAI;IAC/E;;aAZA,IAAI,GAAG;aACP,KAAK,GAAG;aACR,WAAW,GAAG;aACd,QAAQ,GAAG;aACX,QAAQ,GAAG;YAAC;YAAQ;YAAQ;SAAU;aACtC,QAAQ,GAAG;aACX,IAAI,GAAG,WAAP,GAAO,oBAACE,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,MAAK;YAAK,OAAM;YAAiB,OAAM;;aACxE,UAAU,GAAGf;;AAMjB;AAEO,MAAMgB,qBAAqBC,QAAQ,oBAAoB,CAAC;IAC3D,gBAAgBP;IAChB,cAAc,EAAE;AACpB"}
+{"version":3,"file":"presentation/commandPalette/commands/SendMessageCommand.js","sources":["../../../../src/presentation/commandPalette/commands/SendMessageCommand.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Button, Icon, Input } from \"@webiny/admin-ui\";\nimport { ReactComponent as SendIcon } from \"@webiny/icons/send.svg\";\nimport { Command } from \"../abstractions.js\";\n\n/**\n * DEMO command showcasing a `detailView`: selecting it opens a form inside the palette,\n * and submitting calls `execute(data)`. Safe to remove — kept as a live example of the\n * detail-view capability.\n */\nconst SendMessageDetailView = ({ command, onClose }: Command.DetailProps) => {\n    const [recipient, setRecipient] = useState(\"\");\n    const [message, setMessage] = useState(\"\");\n\n    return (\n        <div className=\"flex flex-col gap-sm p-md\">\n            <Input\n                label=\"Recipient\"\n                value={recipient}\n                onChange={setRecipient}\n                placeholder=\"Enter recipient\"\n                autoFocus\n            />\n            <Input\n                label=\"Message\"\n                value={message}\n                onChange={setMessage}\n                placeholder=\"Enter your message\"\n            />\n            <div className=\"flex justify-end pt-sm\">\n                <Button\n                    variant=\"primary\"\n                    text=\"Send\"\n                    onClick={() => {\n                        command.execute?.({ recipient, message });\n                        onClose();\n                    }}\n                />\n            </div>\n        </div>\n    );\n};\n\nclass SendMessageCommandImpl implements Command.Interface {\n    name = \"admin.demo.sendMessage\";\n    label = \"Send message\";\n    description = \"Demo — a form rendered inside the palette\";\n    category = \"Demo\";\n    keywords = [\"demo\", \"form\", \"message\"];\n    shortcut = \"cmd+shift+m\";\n    icon = <Icon icon={<SendIcon />} size=\"sm\" color=\"neutral-strong\" label=\"\" />;\n    detailView = SendMessageDetailView;\n\n    execute(params?: unknown) {\n        const data = params as { recipient?: string; message?: string } | undefined;\n        window.alert(`Message to ${data?.recipient || \"?\"}: ${data?.message || \"\"}`);\n    }\n}\n\nexport const SendMessageCommand = Command.createImplementation({\n    implementation: SendMessageCommandImpl,\n    dependencies: []\n});\n"],"names":["SendMessageDetailView","command","onClose","recipient","setRecipient","useState","message","setMessage","Input","Button","SendMessageCommandImpl","params","data","window","Icon","SendIcon","SendMessageCommand","Command"],"mappings":";;;;AAUA,MAAMA,wBAAwB,CAAC,EAAEC,OAAO,EAAEC,OAAO,EAAuB;IACpE,MAAM,CAACC,WAAWC,aAAa,GAAGC,SAAS;IAC3C,MAAM,CAACC,SAASC,WAAW,GAAGF,SAAS;IAEvC,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAACG,OAAKA;QACF,OAAM;QACN,OAAOL;QACP,UAAUC;QACV,aAAY;QACZ;sBAEJ,oBAACI,OAAKA;QACF,OAAM;QACN,OAAOF;QACP,UAAUC;QACV,aAAY;sBAEhB,oBAAC;QAAI,WAAU;qBACX,oBAACE,QAAMA;QACH,SAAQ;QACR,MAAK;QACL,SAAS;YACLR,QAAQ,OAAO,GAAG;gBAAEE;gBAAWG;YAAQ;YACvCJ;QACJ;;AAKpB;AAEA,MAAMQ;IAUF,QAAQC,MAAgB,EAAE;QACtB,MAAMC,OAAOD;QACbE,OAAO,KAAK,CAAC,CAAC,WAAW,EAAED,MAAM,aAAa,IAAI,EAAE,EAAEA,MAAM,WAAW,IAAI;IAC/E;;aAZA,IAAI,GAAG;aACP,KAAK,GAAG;aACR,WAAW,GAAG;aACd,QAAQ,GAAG;aACX,QAAQ,GAAG;YAAC;YAAQ;YAAQ;SAAU;aACtC,QAAQ,GAAG;aACX,IAAI,GAAG,WAAP,GAAO,oBAACE,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,MAAK;YAAK,OAAM;YAAiB,OAAM;;aACxE,UAAU,GAAGf;;AAMjB;AAEO,MAAMgB,qBAAqBC,QAAQ,oBAAoB,CAAC;IAC3D,gBAAgBP;IAChB,cAAc,EAAE;AACpB"}

package/presentation/commandPalette/commands/feature.js

@@ -2,11 +2,13 @@ import { createFeature } from "@webiny/feature/admin";
 import { CopyCurrentUrlCommand } from "./CopyCurrentUrlCommand.js";
 import { SignOutCommand } from "./SignOutCommand.js";
 import { SendMessageCommand } from "./SendMessageCommand.js";
+import { AskAiCommand } from "./AskAiCommand.js";
 const AdminCommandsFeature = createFeature({
     name: "AdminCommands",
     register (container) {
         container.register(CopyCurrentUrlCommand);
         container.register(SignOutCommand);
+        container.register(AskAiCommand);
         container.register(SendMessageCommand);
     }
 });

package/presentation/commandPalette/commands/feature.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/commandPalette/commands/feature.js","sources":["../../../../src/presentation/commandPalette/commands/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { Container } from \"@webiny/di\";\nimport { CopyCurrentUrlCommand } from \"./CopyCurrentUrlCommand.js\";\nimport { SignOutCommand } from \"./SignOutCommand.js\";\nimport { SendMessageCommand } from \"./SendMessageCommand.js\";\n\n/**\n * Baseline command-palette actions available everywhere in the admin app. Registered\n * as DI commands; other modules register their own via `Command.createImplementation`.\n */\nexport const AdminCommandsFeature = createFeature({\n    name: \"AdminCommands\",\n    register(container: Container) {\n        container.register(CopyCurrentUrlCommand);\n        container.register(SignOutCommand);\n        // Demo of the detail-view capability — safe to remove.\n        container.register(SendMessageCommand);\n    }\n});\n"],"names":["AdminCommandsFeature","createFeature","container","CopyCurrentUrlCommand","SignOutCommand","SendMessageCommand"],"mappings":";;;;AAUO,MAAMA,uBAAuBC,cAAc;IAC9C,MAAM;IACN,UAASC,SAAoB;QACzBA,UAAU,QAAQ,CAACC;QACnBD,UAAU,QAAQ,CAACE;QAEnBF,UAAU,QAAQ,CAACG;IACvB;AACJ"}
+{"version":3,"file":"presentation/commandPalette/commands/feature.js","sources":["../../../../src/presentation/commandPalette/commands/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { Container } from \"@webiny/di\";\nimport { CopyCurrentUrlCommand } from \"./CopyCurrentUrlCommand.js\";\nimport { SignOutCommand } from \"./SignOutCommand.js\";\nimport { SendMessageCommand } from \"./SendMessageCommand.js\";\nimport { AskAiCommand } from \"./AskAiCommand.js\";\n\n/**\n * Baseline command-palette actions available everywhere in the admin app. Registered\n * as DI commands; other modules register their own via `Command.createImplementation`.\n */\nexport const AdminCommandsFeature = createFeature({\n    name: \"AdminCommands\",\n    register(container: Container) {\n        container.register(CopyCurrentUrlCommand);\n        container.register(SignOutCommand);\n        container.register(AskAiCommand);\n        // Demo of the detail-view capability — safe to remove.\n        container.register(SendMessageCommand);\n    }\n});\n"],"names":["AdminCommandsFeature","createFeature","container","CopyCurrentUrlCommand","SignOutCommand","AskAiCommand","SendMessageCommand"],"mappings":";;;;;AAWO,MAAMA,uBAAuBC,cAAc;IAC9C,MAAM;IACN,UAASC,SAAoB;QACzBA,UAAU,QAAQ,CAACC;QACnBD,UAAU,QAAQ,CAACE;QACnBF,UAAU,QAAQ,CAACG;QAEnBH,UAAU,QAAQ,CAACI;IACvB;AACJ"}

package/presentation/createReactiveComponent.d.ts

@@ -0,0 +1 @@
+export { observer as createReactiveComponent } from "mobx-react-lite";

package/presentation/createReactiveComponent.js

@@ -0,0 +1 @@
+export { observer as createReactiveComponent } from "mobx-react-lite";

package/presentation/debugger/DebuggerPresenter.d.ts

@@ -0,0 +1,14 @@
+import { DebugSessionsRepository } from "../../features/debugger/index.js";
+import { DebuggerPresenter as Abstraction } from "./abstractions.js";
+declare class DebuggerPresenterImpl implements Abstraction.Interface {
+    private repository;
+    constructor(repository: DebugSessionsRepository.Interface);
+    get vm(): Abstraction.ViewModel;
+    setCaptureOn(enabled: boolean): void;
+    clear(): void;
+    downloadReport(): void;
+}
+export declare const DebuggerPresenter: typeof DebuggerPresenterImpl & {
+    __abstraction: import("@webiny/di").Abstraction<import("./abstractions.js").IDebuggerPresenter>;
+};
+export {};

package/presentation/debugger/DebuggerPresenter.js

@@ -0,0 +1,45 @@
+import { makeAutoObservable } from "mobx";
+import { DebugSessionsRepository } from "../../features/debugger/index.js";
+import { DebuggerPresenter } from "./abstractions.js";
+import { downloadJson } from "./downloadJson.js";
+class DebuggerPresenterImpl {
+    constructor(repository){
+        this.repository = repository;
+        makeAutoObservable(this, {
+            repository: false
+        }, {
+            autoBind: true
+        });
+    }
+    get vm() {
+        return {
+            available: this.repository.canCapture(),
+            captureOn: this.repository.isCaptureOn(),
+            sessionCount: this.repository.getSessions().length,
+            entryCount: this.repository.getEntryCount()
+        };
+    }
+    setCaptureOn(enabled) {
+        this.repository.setCaptureOn(enabled);
+    }
+    clear() {
+        this.repository.clear();
+    }
+    downloadReport() {
+        const generatedAt = new Date().toISOString();
+        const report = {
+            generatedAt,
+            sessions: this.repository.getSessions()
+        };
+        downloadJson(`webiny-debug-${generatedAt}.json`, report);
+    }
+}
+const DebuggerPresenter_DebuggerPresenter = DebuggerPresenter.createImplementation({
+    implementation: DebuggerPresenterImpl,
+    dependencies: [
+        DebugSessionsRepository
+    ]
+});
+export { DebuggerPresenter_DebuggerPresenter as DebuggerPresenter };
+
+//# sourceMappingURL=DebuggerPresenter.js.map

package/presentation/debugger/DebuggerPresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/debugger/DebuggerPresenter.js","sources":["../../../src/presentation/debugger/DebuggerPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport { DebugSessionsRepository } from \"~/features/debugger/index.js\";\nimport { DebuggerPresenter as Abstraction } from \"./abstractions.js\";\nimport { downloadJson } from \"./downloadJson.js\";\n\nclass DebuggerPresenterImpl implements Abstraction.Interface {\n    constructor(private repository: DebugSessionsRepository.Interface) {\n        makeAutoObservable<DebuggerPresenterImpl, \"repository\">(\n            this,\n            { repository: false },\n            { autoBind: true }\n        );\n    }\n\n    get vm(): Abstraction.ViewModel {\n        return {\n            available: this.repository.canCapture(),\n            captureOn: this.repository.isCaptureOn(),\n            sessionCount: this.repository.getSessions().length,\n            entryCount: this.repository.getEntryCount()\n        };\n    }\n\n    setCaptureOn(enabled: boolean): void {\n        this.repository.setCaptureOn(enabled);\n    }\n\n    clear(): void {\n        this.repository.clear();\n    }\n\n    downloadReport(): void {\n        const generatedAt = new Date().toISOString();\n        const report = {\n            generatedAt,\n            sessions: this.repository.getSessions()\n        };\n        downloadJson(`webiny-debug-${generatedAt}.json`, report);\n    }\n}\n\nexport const DebuggerPresenter = Abstraction.createImplementation({\n    implementation: DebuggerPresenterImpl,\n    dependencies: [DebugSessionsRepository]\n});\n"],"names":["DebuggerPresenterImpl","repository","makeAutoObservable","enabled","generatedAt","Date","report","downloadJson","DebuggerPresenter","Abstraction","DebugSessionsRepository"],"mappings":";;;;AAKA,MAAMA;IACF,YAAoBC,UAA6C,CAAE;aAA/CA,UAAU,GAAVA;QAChBC,mBACI,IAAI,EACJ;YAAE,YAAY;QAAM,GACpB;YAAE,UAAU;QAAK;IAEzB;IAEA,IAAI,KAA4B;QAC5B,OAAO;YACH,WAAW,IAAI,CAAC,UAAU,CAAC,UAAU;YACrC,WAAW,IAAI,CAAC,UAAU,CAAC,WAAW;YACtC,cAAc,IAAI,CAAC,UAAU,CAAC,WAAW,GAAG,MAAM;YAClD,YAAY,IAAI,CAAC,UAAU,CAAC,aAAa;QAC7C;IACJ;IAEA,aAAaC,OAAgB,EAAQ;QACjC,IAAI,CAAC,UAAU,CAAC,YAAY,CAACA;IACjC;IAEA,QAAc;QACV,IAAI,CAAC,UAAU,CAAC,KAAK;IACzB;IAEA,iBAAuB;QACnB,MAAMC,cAAc,IAAIC,OAAO,WAAW;QAC1C,MAAMC,SAAS;YACXF;YACA,UAAU,IAAI,CAAC,UAAU,CAAC,WAAW;QACzC;QACAG,aAAa,CAAC,aAAa,EAAEH,YAAY,KAAK,CAAC,EAAEE;IACrD;AACJ;AAEO,MAAME,sCAAoBC,kBAAAA,oBAAgC,CAAC;IAC9D,gBAAgBT;IAChB,cAAc;QAACU;KAAwB;AAC3C"}

package/presentation/debugger/abstractions.d.ts

@@ -0,0 +1,17 @@
+export interface IDebuggerViewModel {
+    available: boolean;
+    captureOn: boolean;
+    sessionCount: number;
+    entryCount: number;
+}
+export interface IDebuggerPresenter {
+    readonly vm: IDebuggerViewModel;
+    setCaptureOn(enabled: boolean): void;
+    clear(): void;
+    downloadReport(): void;
+}
+export declare const DebuggerPresenter: import("@webiny/di").Abstraction<IDebuggerPresenter>;
+export declare namespace DebuggerPresenter {
+    type Interface = IDebuggerPresenter;
+    type ViewModel = IDebuggerViewModel;
+}

package/presentation/debugger/abstractions.js

@@ -0,0 +1,5 @@
+import { createAbstraction } from "@webiny/feature/admin";
+const DebuggerPresenter = createAbstraction("DebuggerPresenter");
+export { DebuggerPresenter };
+
+//# sourceMappingURL=abstractions.js.map

package/presentation/debugger/abstractions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/debugger/abstractions.js","sources":["../../../src/presentation/debugger/abstractions.ts"],"sourcesContent":["import { createAbstraction } from \"@webiny/feature/admin\";\n\nexport interface IDebuggerViewModel {\n    // Whether the identity holds the permission; nothing debug related renders without it.\n    available: boolean;\n    captureOn: boolean;\n    sessionCount: number;\n    entryCount: number;\n}\n\nexport interface IDebuggerPresenter {\n    readonly vm: IDebuggerViewModel;\n    setCaptureOn(enabled: boolean): void;\n    clear(): void;\n    downloadReport(): void;\n}\n\nexport const DebuggerPresenter = createAbstraction<IDebuggerPresenter>(\"DebuggerPresenter\");\n\nexport namespace DebuggerPresenter {\n    export type Interface = IDebuggerPresenter;\n    export type ViewModel = IDebuggerViewModel;\n}\n"],"names":["DebuggerPresenter","createAbstraction"],"mappings":";AAiBO,MAAMA,oBAAoBC,kBAAsC"}

package/presentation/debugger/components/DebuggerIndicator.d.ts

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