@elizaos/ui 2.0.0-alpha.85 → 2.0.0-beta.2

package/components/pages/plugin-view-connectors.d.ts

@@ -0,0 +1,57 @@
+import { type ReactNode, type RefCallback } from "react";
+import { type PluginInfo } from "../../api";
+import { type TranslateFn } from "./plugin-list-utils";
+export interface PluginConnectionTestResult {
+    durationMs: number;
+    error?: string;
+    loading: boolean;
+    message?: string;
+    success: boolean;
+}
+interface ConnectorPluginGroupsProps {
+    collapseLabel: string;
+    connectorExpandedIds: Set<string>;
+    connectorInstallPrompt: string;
+    connectorSelectedId: string | null;
+    expandLabel: string;
+    formatSaveSettingsLabel: (isSaving: boolean, didSave: boolean) => string;
+    formatTestConnectionLabel: (result?: PluginConnectionTestResult) => string;
+    handleConfigReset: (pluginId: string) => void;
+    handleConfigSave: (pluginId: string) => Promise<void>;
+    handleConnectorExpandedChange: (pluginId: string, nextExpanded: boolean) => void;
+    handleConnectorSectionToggle: (pluginId: string) => void;
+    handleInstallPlugin: (pluginId: string, npmName: string) => Promise<void>;
+    handleOpenPluginExternalUrl: (url: string) => Promise<void>;
+    handleParamChange: (pluginId: string, paramKey: string, value: string) => void;
+    handleTestConnection: (pluginId: string) => Promise<void>;
+    handleTogglePlugin: (pluginId: string, enabled: boolean) => Promise<void>;
+    hasPluginToggleInFlight: boolean;
+    installPluginLabel: string;
+    installProgress: Map<string, {
+        message: string;
+        phase: string;
+    }>;
+    installingPlugins: Set<string>;
+    installProgressLabel: (message?: string) => string;
+    loadFailedLabel: string;
+    needsSetupLabel: string;
+    noConfigurationNeededLabel: string;
+    notInstalledLabel: string;
+    pluginConfigs: Record<string, Record<string, string>>;
+    pluginDescriptionFallback: string;
+    pluginSaveSuccess: Set<string>;
+    pluginSaving: Set<string>;
+    readyLabel: string;
+    registerConnectorContentItem: (pluginId: string) => RefCallback<HTMLElement>;
+    renderResolvedIcon: (plugin: PluginInfo, options?: {
+        className?: string;
+        emojiClassName?: string;
+    }) => ReactNode;
+    t: TranslateFn;
+    testResults: Map<string, PluginConnectionTestResult>;
+    togglingPlugins: Set<string>;
+    visiblePlugins: PluginInfo[];
+}
+export declare function ConnectorPluginGroups(props: ConnectorPluginGroupsProps): import("react/jsx-runtime").JSX.Element[];
+export {};
+//# sourceMappingURL=plugin-view-connectors.d.ts.map

package/components/pages/plugin-view-connectors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin-view-connectors.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/plugin-view-connectors.tsx"],"names":[],"mappings":"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"}

package/components/pages/plugin-view-connectors.js

@@ -0,0 +1,371 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, PagePanel, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, StatusBadge, Switch, } from "@elizaos/ui";
+import { AlertCircle, CheckCircle2, ChevronRight } from "lucide-react";
+import { useState } from "react";
+import { client, } from "../../api/index.js";
+import { useApp } from "../../state/index.js";
+import { ConnectorModeSelector, useConnectorMode, } from "../connectors/ConnectorModeSelector.js";
+import { ConnectorSetupPanel, hasConnectorSetupPanel, } from "../connectors/ConnectorSetupPanel.js";
+import { getBrandIcon } from "../conversations/brand-icons.js";
+import { buildManagedDiscordSettingsReturnUrl, resolveManagedDiscordAgentChoice, } from "./cloud-dashboard-utils.js";
+import { PluginConfigForm, TelegramPluginConfig } from "./PluginConfigForm.js";
+import { getPluginResourceLinks, pluginResourceLinkLabel, SUBGROUP_LABELS, subgroupForPlugin, } from "./plugin-list-utils.js";
+const CLOUD_OAUTH_CONNECTORS = {
+    slack: {
+        platform: "slack",
+        connectionRole: "agent",
+        buttonLabel: "Use Slack OAuth",
+        connectedHint: "Connect Slack with Eliza Cloud OAuth. Cloud stores the workspace token and the Slack plugin remains the runtime surface for messages and actions.",
+        disconnectedHint: "Connect Eliza Cloud first to use Slack OAuth instead of local Socket Mode tokens.",
+        successNotice: "Finish Slack OAuth in your browser, then return here.",
+    },
+    twitter: {
+        platform: "twitter",
+        connectionRole: "agent",
+        buttonLabel: "Use X/Twitter OAuth",
+        connectedHint: "Connect X/Twitter with Eliza Cloud OAuth so agent posts, mentions, replies, and DMs use the plugin through cloud-held tokens.",
+        disconnectedHint: "Connect Eliza Cloud first to use X/Twitter OAuth instead of local developer tokens.",
+        successNotice: "Finish X/Twitter OAuth in your browser, then return here.",
+    },
+};
+function getCloudOAuthConnector(pluginId, selectedMode) {
+    if (selectedMode !== "oauth") {
+        return null;
+    }
+    return CLOUD_OAUTH_CONNECTORS[pluginId] ?? null;
+}
+function groupVisiblePlugins(visiblePlugins) {
+    const groupMap = new Map();
+    const groupOrder = [];
+    for (const plugin of visiblePlugins) {
+        const subgroupId = subgroupForPlugin(plugin);
+        if (!groupMap.has(subgroupId)) {
+            groupMap.set(subgroupId, []);
+            groupOrder.push(subgroupId);
+        }
+        groupMap.get(subgroupId)?.push(plugin);
+    }
+    return groupOrder.flatMap((subgroupId) => {
+        const plugins = groupMap.get(subgroupId);
+        if (!plugins)
+            return [];
+        return [
+            {
+                id: subgroupId,
+                label: SUBGROUP_LABELS[subgroupId] ?? subgroupId,
+                plugins,
+            },
+        ];
+    });
+}
+function ConnectorPluginCard({ collapseLabel, connectorExpandedIds, connectorInstallPrompt, connectorSelectedId, expandLabel, formatSaveSettingsLabel, formatTestConnectionLabel, handleConfigReset, handleConfigSave, handleConnectorExpandedChange, handleConnectorSectionToggle, handleInstallPlugin, handleOpenPluginExternalUrl, handleParamChange, handleTestConnection, handleTogglePlugin, hasPluginToggleInFlight, installPluginLabel, installProgress, installingPlugins, installProgressLabel, loadFailedLabel, needsSetupLabel, noConfigurationNeededLabel, notInstalledLabel, plugin, pluginConfigs, pluginDescriptionFallback, pluginSaveSuccess, pluginSaving, readyLabel, registerConnectorContentItem, renderResolvedIcon, t, testResults, togglingPlugins, }) {
+    const { elizaCloudConnected, setActionNotice, setState, setTab } = useApp();
+    const connectorMode = useConnectorMode(plugin.id, { elizaCloudConnected });
+    const [managedDiscordBusy, setManagedDiscordBusy] = useState(false);
+    const [cloudOAuthBusy, setCloudOAuthBusy] = useState(false);
+    const [managedDiscordAgents, setManagedDiscordAgents] = useState([]);
+    const [managedDiscordPickerOpen, setManagedDiscordPickerOpen] = useState(false);
+    const [managedDiscordSelectedAgentId, setManagedDiscordSelectedAgentId] = useState(null);
+    const selectedCloudOAuthConnector = getCloudOAuthConnector(plugin.id, connectorMode.selectedMode);
+    const cloudOAuthConnector = selectedCloudOAuthConnector ??
+        (!elizaCloudConnected ? (CLOUD_OAUTH_CONNECTORS[plugin.id] ?? null) : null);
+    const isCloudOAuthMode = Boolean(selectedCloudOAuthConnector);
+    const isDiscordManagedMode = plugin.id === "discord" && connectorMode.selectedMode === "managed";
+    const isTelegramCloudGatewayMode = plugin.id === "telegram" && connectorMode.selectedMode === "cloud-bot";
+    const showTelegramCloudGatewayNotice = isTelegramCloudGatewayMode ||
+        (!elizaCloudConnected && plugin.id === "telegram");
+    const cloudBackedConnectorMode = elizaCloudConnected && (isCloudOAuthMode || isDiscordManagedMode);
+    const hasParams = (plugin.parameters?.length ?? 0) > 0 && plugin.id !== "__ui-showcase__";
+    const isExpanded = connectorExpandedIds.has(plugin.id);
+    const isSelected = connectorSelectedId === plugin.id;
+    const requiredParams = hasParams
+        ? plugin.parameters.filter((param) => param.required)
+        : [];
+    const requiredSetCount = requiredParams.filter((param) => param.isSet).length;
+    const setCount = hasParams
+        ? plugin.parameters.filter((param) => param.isSet).length
+        : 0;
+    const totalCount = hasParams ? plugin.parameters.length : 0;
+    // A connector is considered "Ready" when every **required** param is set.
+    // Plugins that only expose optional knobs (e.g. plugin-imessage, whose
+    // parameters are all advanced overrides) should flip to Ready as soon as
+    // they're enabled, not force the user to fill in every optional field.
+    const allParamsSet = cloudBackedConnectorMode ||
+        !hasParams ||
+        requiredSetCount === requiredParams.length;
+    const isToggleBusy = togglingPlugins.has(plugin.id);
+    const toggleDisabled = isToggleBusy || (hasPluginToggleInFlight && !isToggleBusy);
+    const isSaving = pluginSaving.has(plugin.id);
+    const saveSuccess = pluginSaveSuccess.has(plugin.id);
+    const testResult = testResults.get(plugin.id);
+    const notLoadedLabel = t("pluginsview.NotLoaded", {
+        defaultValue: "Not loaded",
+    });
+    const isStoreInstallMissing = plugin.source === "store" &&
+        plugin.enabled &&
+        !plugin.isActive &&
+        Boolean(plugin.npmName);
+    const inactiveLabel = plugin.loadError
+        ? loadFailedLabel
+        : plugin.source === "store"
+            ? notInstalledLabel
+            : notLoadedLabel;
+    const pluginLinks = getPluginResourceLinks(plugin, {
+        draftConfig: pluginConfigs[plugin.id],
+    });
+    const openCloudAgentsView = () => {
+        setState("cloudDashboardView", "overview");
+        setTab("settings");
+    };
+    const ensureManagedDiscordGatewayProvisioned = async (agent) => {
+        if (agent.status === "running") {
+            return false;
+        }
+        const provisionResponse = await client.provisionCloudCompatAgent(agent.agent_id);
+        if (!provisionResponse.success) {
+            throw new Error(provisionResponse.error ||
+                t("pluginsview.ManagedDiscordGatewayProvisionFailed", {
+                    defaultValue: "Failed to start the shared Discord gateway in Eliza Cloud.",
+                }));
+        }
+        return provisionResponse.data?.status !== "running";
+    };
+    const startManagedDiscordOauth = async (agent, options) => {
+        const oauthResponse = await client.createCloudCompatAgentManagedDiscordOauth(agent.agent_id, {
+            returnUrl: typeof window !== "undefined"
+                ? (buildManagedDiscordSettingsReturnUrl(window.location.href) ??
+                    undefined)
+                : undefined,
+            botNickname: agent.agent_name?.trim() || undefined,
+        });
+        await handleOpenPluginExternalUrl(oauthResponse.data.authorizeUrl);
+        setManagedDiscordPickerOpen(false);
+        setActionNotice(t("elizaclouddashboard.DiscordSetupContinuesInBrowser", {
+            defaultValue: options?.gatewayDeploying
+                ? "Finish Discord setup in your browser, then wait for the shared Discord gateway to finish deploying."
+                : "Finish Discord setup in your browser, then return here.",
+        }), "info", 5000);
+    };
+    const handleOpenManagedDiscord = async () => {
+        if (managedDiscordBusy) {
+            return;
+        }
+        if (!elizaCloudConnected) {
+            setState("cloudDashboardView", "billing");
+            setTab("settings");
+            setActionNotice(t("pluginsview.ManagedDiscordRequiresCloud", {
+                defaultValue: "Connect Eliza Cloud first, then you can use managed Discord OAuth.",
+            }), "info", 5000);
+            return;
+        }
+        setManagedDiscordBusy(true);
+        try {
+            const response = await client.getCloudCompatAgents();
+            const agents = Array.isArray(response.data) ? response.data : [];
+            const choice = resolveManagedDiscordAgentChoice(agents);
+            if (choice.mode === "none" || choice.mode === "bootstrap") {
+                const gatewayResponse = await client.ensureCloudCompatManagedDiscordAgent();
+                const gatewayAgent = gatewayResponse.data.agent;
+                const gatewayDeploying = await ensureManagedDiscordGatewayProvisioned(gatewayAgent);
+                setManagedDiscordAgents([gatewayAgent]);
+                setManagedDiscordSelectedAgentId(gatewayAgent.agent_id);
+                setManagedDiscordPickerOpen(false);
+                setActionNotice(t("pluginsview.ManagedDiscordGatewayCreated", {
+                    defaultValue: gatewayResponse.data.created
+                        ? "Created a shared Discord gateway agent. Continue in your browser and choose a server you own."
+                        : "Using your shared Discord gateway agent. Continue in your browser and choose a server you own.",
+                }), "info", 5200);
+                await startManagedDiscordOauth(gatewayAgent, {
+                    gatewayDeploying,
+                });
+                return;
+            }
+            if (choice.mode === "picker") {
+                setManagedDiscordAgents(agents);
+                setManagedDiscordSelectedAgentId(choice.selectedAgentId);
+                setManagedDiscordPickerOpen(true);
+                setActionNotice(t("pluginsview.ManagedDiscordChooseTarget", {
+                    defaultValue: "Choose which cloud agent should receive managed Discord for this owned server, then continue.",
+                }), "info", 4200);
+                return;
+            }
+            const gatewayDeploying = await ensureManagedDiscordGatewayProvisioned(choice.agent);
+            await startManagedDiscordOauth(choice.agent, {
+                gatewayDeploying,
+            });
+        }
+        catch (error) {
+            openCloudAgentsView();
+            setActionNotice(error instanceof Error
+                ? error.message
+                : t("elizaclouddashboard.DiscordSetupFailed", {
+                    defaultValue: "Failed to start Discord setup.",
+                }), "error", 4200);
+        }
+        finally {
+            setManagedDiscordBusy(false);
+        }
+    };
+    const handleConfirmManagedDiscordAgent = async () => {
+        if (managedDiscordBusy || !managedDiscordSelectedAgentId) {
+            return;
+        }
+        const agent = managedDiscordAgents.find((candidate) => candidate.agent_id === managedDiscordSelectedAgentId);
+        if (!agent) {
+            setActionNotice(t("pluginsview.ManagedDiscordChooseTarget", {
+                defaultValue: "Choose which cloud agent should receive managed Discord for this owned server, then continue.",
+            }), "error", 4200);
+            return;
+        }
+        setManagedDiscordBusy(true);
+        try {
+            const gatewayDeploying = await ensureManagedDiscordGatewayProvisioned(agent);
+            await startManagedDiscordOauth(agent, {
+                gatewayDeploying,
+            });
+        }
+        catch (error) {
+            openCloudAgentsView();
+            setActionNotice(error instanceof Error
+                ? error.message
+                : t("elizaclouddashboard.DiscordSetupFailed", {
+                    defaultValue: "Failed to start Discord setup.",
+                }), "error", 4200);
+        }
+        finally {
+            setManagedDiscordBusy(false);
+        }
+    };
+    const handleOpenCloudOAuthConnector = async () => {
+        if (!cloudOAuthConnector || cloudOAuthBusy) {
+            return;
+        }
+        if (!elizaCloudConnected) {
+            setState("cloudDashboardView", "billing");
+            setTab("settings");
+            setActionNotice(t("pluginsview.CloudOauthRequiresCloud", {
+                defaultValue: "Connect Eliza Cloud first, then you can use OAuth for this connector.",
+            }), "info", 5000);
+            return;
+        }
+        setCloudOAuthBusy(true);
+        try {
+            const redirectUrl = typeof window !== "undefined" ? window.location.href : undefined;
+            const oauthResponse = cloudOAuthConnector.platform === "twitter"
+                ? await client.initiateCloudTwitterOauth({
+                    redirectUrl,
+                    connectionRole: cloudOAuthConnector.connectionRole,
+                })
+                : await client.initiateCloudOauth(cloudOAuthConnector.platform, {
+                    redirectUrl,
+                    connectionRole: cloudOAuthConnector.connectionRole,
+                });
+            await handleOpenPluginExternalUrl(oauthResponse.authUrl);
+            setActionNotice(cloudOAuthConnector.successNotice, "info", 5000);
+        }
+        catch (error) {
+            setActionNotice(error instanceof Error
+                ? error.message
+                : t("pluginsview.CloudOauthSetupFailed", {
+                    defaultValue: "Failed to start OAuth setup.",
+                }), "error", 4200);
+        }
+        finally {
+            setCloudOAuthBusy(false);
+        }
+    };
+    const BrandIcon = getBrandIcon(plugin.id);
+    const connectorHeaderMedia = (_jsx("span", { className: `mt-0.5 flex h-11 w-11 shrink-0 items-center justify-center rounded-[var(--radius-xl)] border p-2.5 ${isSelected
+            ? "border-accent/30 bg-accent/18 text-txt-strong"
+            : "border-border/50 bg-bg-accent/80 text-muted"}`, children: BrandIcon ? (_jsx(BrandIcon, { className: "h-5 w-5 shrink-0" })) : (renderResolvedIcon(plugin, {
+            className: "h-4 w-4 shrink-0 rounded-[var(--radius-sm)] object-contain",
+            emojiClassName: "text-base",
+        })) }));
+    const connectorHeaderHeading = (_jsxs("div", { className: "min-w-0", children: [_jsxs("span", { "data-testid": `connector-header-${plugin.id}`, className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx("span", { className: "whitespace-normal break-words [overflow-wrap:anywhere] text-sm font-semibold leading-snug text-txt", children: plugin.name }), hasParams ? (_jsxs("span", { className: "text-xs-tight font-medium text-muted", children: [setCount, "/", totalCount, " ", t("common.configured")] })) : (_jsx("span", { className: "text-xs-tight font-medium text-muted", children: noConfigurationNeededLabel }))] }), _jsxs("div", { className: "mt-2", children: [_jsx("p", { className: "text-sm text-muted", children: plugin.description || pluginDescriptionFallback }), plugin.enabled && !plugin.isActive && (_jsx("span", { className: "mt-1.5 flex flex-wrap items-center gap-2 text-xs-tight text-muted", children: _jsx(StatusBadge, { label: inactiveLabel, tone: plugin.loadError ? "danger" : "warning" }) }))] })] }));
+    const statusLabel = allParamsSet ? readyLabel : needsSetupLabel;
+    const StatusIcon = allParamsSet ? CheckCircle2 : AlertCircle;
+    const connectorHeaderActions = (_jsxs(_Fragment, { children: [_jsx("span", { role: "img", "aria-label": statusLabel, title: statusLabel, className: `inline-flex items-center ${allParamsSet ? "text-ok" : "text-warn"}`, children: _jsx(StatusIcon, { className: "h-5 w-5", "aria-hidden": "true" }) }), _jsx(Switch, { checked: plugin.enabled, disabled: toggleDisabled, onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), onCheckedChange: (checked) => {
+                    void handleTogglePlugin(plugin.id, checked);
+                }, "aria-label": `${plugin.enabled ? t("common.off") : t("common.on")} ${plugin.name}` }), _jsx(Button, { variant: "ghost", size: "icon", className: `h-8 w-8 shrink-0 rounded-none border-0 bg-transparent transition-colors hover:bg-transparent ${isExpanded ? "text-txt" : "text-muted hover:text-txt"}`, onClick: (event) => {
+                    event?.stopPropagation();
+                    handleConnectorSectionToggle(plugin.id);
+                }, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? collapseLabel : expandLabel} ${plugin.name}`, title: isExpanded ? collapseLabel : expandLabel, children: _jsx(ChevronRight, { className: `h-4 w-4 transition-transform ${isExpanded ? "rotate-90" : ""}` }) })] }));
+    const setupPanelPluginId = connectorMode.setupPluginId ?? plugin.id;
+    const connectorSetupPanel = setupPanelPluginId ? (_jsx(ConnectorSetupPanel, { pluginId: setupPanelPluginId })) : null;
+    const supportsConnectorSetupPanel = Boolean(setupPanelPluginId) && hasConnectorSetupPanel(setupPanelPluginId);
+    const showPluginConfig = hasParams &&
+        setupPanelPluginId === plugin.id &&
+        !isDiscordManagedMode &&
+        !isCloudOAuthMode;
+    return (_jsx("div", { "data-testid": `connector-section-${plugin.id}`, children: _jsxs(PagePanel.CollapsibleSection, { ref: registerConnectorContentItem(plugin.id), variant: "section", "data-testid": `connector-card-${plugin.id}`, expanded: isExpanded, expandOnCollapsedSurfaceClick: true, className: `border-transparent transition-all ${isSelected ? "shadow-[0_18px_40px_rgba(3,5,10,0.16)]" : ""}`, onExpandedChange: (nextExpanded) => handleConnectorExpandedChange(plugin.id, nextExpanded), media: connectorHeaderMedia, heading: connectorHeaderHeading, headingClassName: "w-full text-inherit", actions: connectorHeaderActions, children: [connectorMode.modes.length > 1 && (_jsx(ConnectorModeSelector, { connectorId: plugin.id, selectedMode: connectorMode.selectedMode, onModeChange: connectorMode.setSelectedMode, elizaCloudConnected: elizaCloudConnected })), plugin.id === "discord" &&
+                    (!elizaCloudConnected ||
+                        connectorMode.selectedMode === "managed") && (_jsxs(PagePanel.Notice, { tone: "default", className: "mb-4", actions: _jsx(Button, { variant: "outline", size: "sm", className: "h-8 rounded-[var(--radius-lg)] px-4 text-xs-tight font-semibold", onClick: () => {
+                            void handleOpenManagedDiscord();
+                        }, disabled: managedDiscordBusy, children: managedDiscordBusy
+                            ? "..."
+                            : elizaCloudConnected
+                                ? t("pluginsview.UseManagedDiscord", {
+                                    defaultValue: "Use managed Discord",
+                                })
+                                : t("pluginsview.OpenElizaCloud", {
+                                    defaultValue: "Open Eliza Cloud",
+                                }) }), children: [elizaCloudConnected
+                            ? t("pluginsview.ManagedDiscordGatewayHintConnected", {
+                                defaultValue: "Prefer OAuth? Managed Discord uses a shared gateway and only works for servers owned by the linking Discord account.",
+                            })
+                            : t("pluginsview.ManagedDiscordGatewayHint", {
+                                defaultValue: "Prefer OAuth? Connect Eliza Cloud to use the shared Discord gateway instead of a local bot token.",
+                            }), managedDiscordPickerOpen && managedDiscordAgents.length > 1 ? (_jsxs("div", { className: "mt-3 flex flex-col gap-2 sm:flex-row sm:items-center", children: [_jsxs(Select, { value: managedDiscordSelectedAgentId ?? "__none__", onValueChange: (next) => setManagedDiscordSelectedAgentId(next === "__none__" ? null : next), children: [_jsx(SelectTrigger, { className: "h-9 min-w-[14rem] rounded-[var(--radius-lg)] border-border/40 bg-bg/80 text-sm", children: _jsx(SelectValue, { placeholder: t("pluginsview.ManagedDiscordSelectAgent", {
+                                                    defaultValue: "Select a cloud agent",
+                                                }) }) }), _jsx(SelectContent, { children: managedDiscordAgents.map((agent) => (_jsx(SelectItem, { value: agent.agent_id, children: agent.agent_name || agent.agent_id }, agent.agent_id))) })] }), _jsx(Button, { variant: "default", size: "sm", className: "h-9 rounded-[var(--radius-lg)] px-4 text-xs-tight font-semibold", onClick: () => {
+                                        void handleConfirmManagedDiscordAgent();
+                                    }, disabled: managedDiscordBusy || !managedDiscordSelectedAgentId, children: managedDiscordBusy
+                                        ? "..."
+                                        : t("common.continue", {
+                                            defaultValue: "Continue",
+                                        }) })] })) : null] })), cloudOAuthConnector ? (_jsx(PagePanel.Notice, { tone: "default", className: "mb-4", actions: _jsx(Button, { variant: "outline", size: "sm", className: "h-8 rounded-[var(--radius-lg)] px-4 text-xs-tight font-semibold", onClick: () => {
+                            void handleOpenCloudOAuthConnector();
+                        }, disabled: cloudOAuthBusy, children: cloudOAuthBusy
+                            ? "..."
+                            : elizaCloudConnected
+                                ? cloudOAuthConnector.buttonLabel
+                                : t("pluginsview.OpenElizaCloud", {
+                                    defaultValue: "Open Eliza Cloud",
+                                }) }), children: elizaCloudConnected
+                        ? cloudOAuthConnector.connectedHint
+                        : cloudOAuthConnector.disconnectedHint })) : null, showTelegramCloudGatewayNotice ? (_jsx(PagePanel.Notice, { tone: "default", className: "mb-4", actions: elizaCloudConnected ? undefined : (_jsx(Button, { variant: "outline", size: "sm", className: "h-8 rounded-[var(--radius-lg)] px-4 text-xs-tight font-semibold", onClick: () => {
+                            setState("cloudDashboardView", "billing");
+                            setTab("settings");
+                        }, children: t("pluginsview.OpenElizaCloud", {
+                            defaultValue: "Open Eliza Cloud",
+                        }) })), children: elizaCloudConnected
+                        ? t("pluginsview.TelegramCloudGatewayHint", {
+                            defaultValue: "Telegram does not support bot-install OAuth for bidirectional chats. Use a BotFather token here; Eliza Cloud can host the webhook gateway and route updates to this app.",
+                        })
+                        : t("pluginsview.TelegramCloudGatewayHintDisconnected", {
+                            defaultValue: "Telegram does not support bot-install OAuth for bidirectional chats. Connect Eliza Cloud to host the webhook gateway, then use a BotFather token here.",
+                        }) })) : null, pluginLinks.length > 0 && (_jsx("div", { className: "mb-4 flex flex-wrap gap-2", children: pluginLinks.map((link) => (_jsx(Button, { variant: "outline", size: "sm", className: "h-8 rounded-[var(--radius-lg)] border-border/40 bg-card/40 px-3 text-xs-tight font-semibold text-muted transition-all hover:border-accent hover:bg-accent/5 hover:text-txt", onClick: () => {
+                            void handleOpenPluginExternalUrl(link.url);
+                        }, title: `${pluginResourceLinkLabel(t, link.key)}: ${link.url}`, children: pluginResourceLinkLabel(t, link.key) }, `${plugin.id}:${link.key}`))) })), isStoreInstallMissing && !plugin.loadError && (_jsx(PagePanel.Notice, { tone: "warning", className: "mb-4", actions: _jsx(Button, { variant: "default", size: "sm", className: "h-8 rounded-[var(--radius-lg)] px-4 text-xs-tight font-bold", disabled: installingPlugins.has(plugin.id), onClick: () => void handleInstallPlugin(plugin.id, plugin.npmName ?? ""), children: installingPlugins.has(plugin.id)
+                            ? installProgressLabel(installProgress.get(plugin.npmName ?? "")?.message)
+                            : installPluginLabel }), children: connectorInstallPrompt })), showPluginConfig ? (_jsxs("div", { className: "space-y-4", children: [plugin.id === "telegram" ? (_jsx(TelegramPluginConfig, { plugin: plugin, pluginConfigs: pluginConfigs, onParamChange: handleParamChange })) : (_jsx(PluginConfigForm, { plugin: plugin, pluginConfigs: pluginConfigs, onParamChange: handleParamChange })), connectorSetupPanel] })) : supportsConnectorSetupPanel ? (connectorSetupPanel) : (_jsx("div", { className: "text-sm text-muted", children: noConfigurationNeededLabel })), plugin.validationErrors && plugin.validationErrors.length > 0 && (_jsx(PagePanel.Notice, { tone: "danger", className: "mt-3 text-xs", children: plugin.validationErrors.map((error) => (_jsxs("div", { children: [_jsx("span", { className: "font-medium text-warn", children: error.field }), ":", " ", error.message] }, `${plugin.id}:${error.field}:${error.message}`))) })), plugin.validationWarnings && plugin.validationWarnings.length > 0 && (_jsx(PagePanel.Notice, { tone: "default", className: "mt-3 text-xs", children: plugin.validationWarnings.map((warning) => (_jsx("div", { children: warning.message }, `${plugin.id}:${warning.field}:${warning.message}`))) })), plugin.version ? (_jsx("div", { className: "mt-4", children: _jsxs(PagePanel.Meta, { compact: true, tone: "strong", className: "font-mono", children: ["v", plugin.version] }) })) : null, _jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-2", children: [plugin.isActive && (_jsx(Button, { variant: testResult?.success
+                                ? "default"
+                                : testResult?.error
+                                    ? "destructive"
+                                    : "outline", size: "sm", className: `h-8 rounded-[var(--radius-lg)] px-4 text-xs-tight font-bold transition-all ${testResult?.loading
+                                ? "cursor-wait opacity-70"
+                                : testResult?.success
+                                    ? "border-ok bg-ok text-ok-fg hover:bg-ok/90"
+                                    : testResult?.error
+                                        ? "border-danger bg-danger text-danger-fg hover:bg-danger/90"
+                                        : "border-border/40 bg-card/40 hover:border-accent/40"}`, disabled: testResult?.loading, onClick: () => void handleTestConnection(plugin.id), children: formatTestConnectionLabel(testResult) })), hasParams && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", className: "h-8 rounded-[var(--radius-lg)] px-4 text-xs-tight font-semibold text-muted hover:text-txt", onClick: () => handleConfigReset(plugin.id), children: t("common.reset") }), _jsx(Button, { variant: saveSuccess ? "default" : "secondary", size: "sm", className: `h-8 rounded-[var(--radius-lg)] px-4 text-xs-tight font-bold transition-all ${saveSuccess
+                                        ? "bg-ok text-ok-fg hover:bg-ok/90"
+                                        : "bg-accent text-accent-fg hover:bg-accent/90"}`, onClick: () => void handleConfigSave(plugin.id), disabled: isSaving, children: formatSaveSettingsLabel(isSaving, saveSuccess) })] }))] })] }) }, plugin.id));
+}
+export function ConnectorPluginGroups(props) {
+    const groups = groupVisiblePlugins(props.visiblePlugins);
+    if (groups.length === 1) {
+        return groups[0].plugins.map((plugin) => (_jsx(ConnectorPluginCard, { ...props, plugin: plugin }, plugin.id)));
+    }
+    return groups.map((group) => (_jsxs("div", { className: "relative rounded-[var(--radius-lg)] border border-border/30 px-2 pb-2 pt-5", children: [_jsx("span", { className: "absolute -top-2.5 left-3 bg-bg px-2 text-2xs font-semibold uppercase tracking-wider text-muted", children: group.label }), _jsx("div", { className: "space-y-4", children: group.plugins.map((plugin) => (_jsx(ConnectorPluginCard, { ...props, plugin: plugin }, plugin.id))) })] }, group.id)));
+}

package/components/pages/plugin-view-dialogs.d.ts

@@ -0,0 +1,36 @@
+import type { PluginInfo } from "../../api";
+import { type TranslateFn } from "./plugin-list-utils";
+type PluginConnectionTestResult = {
+    durationMs: number;
+    error?: string;
+    loading: boolean;
+    message?: string;
+    success: boolean;
+};
+interface PluginSettingsDialogProps {
+    installPluginLabel: string;
+    installProgress: Map<string, {
+        message: string;
+        phase: string;
+    }>;
+    installingPlugins: Set<string>;
+    pluginConfigs: Record<string, Record<string, string>>;
+    pluginSaveSuccess: Set<string>;
+    pluginSaving: Set<string>;
+    settingsDialogPlugin: PluginInfo | null;
+    t: TranslateFn;
+    testResults: Map<string, PluginConnectionTestResult>;
+    onClose: (pluginId: string) => void;
+    onConfigReset: (pluginId: string) => void;
+    onConfigSave: (pluginId: string) => Promise<void>;
+    onInstallPlugin: (pluginId: string, npmName: string) => Promise<void>;
+    onParamChange: (pluginId: string, paramKey: string, value: string) => void;
+    onTestConnection: (pluginId: string) => Promise<void>;
+    formatDialogTestConnectionLabel: (result?: PluginConnectionTestResult) => string;
+    installProgressLabel: (message?: string) => string;
+    saveSettingsLabel: string;
+    savingLabel: string;
+}
+export declare function PluginSettingsDialog({ installPluginLabel, installProgress, installingPlugins, pluginConfigs, pluginSaveSuccess, pluginSaving, settingsDialogPlugin, t, testResults, onClose, onConfigReset, onConfigSave, onInstallPlugin, onParamChange, onTestConnection, formatDialogTestConnectionLabel, installProgressLabel, saveSettingsLabel, savingLabel, }: PluginSettingsDialogProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=plugin-view-dialogs.d.ts.map

package/components/pages/plugin-view-dialogs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin-view-dialogs.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/plugin-view-dialogs.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAG5C,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,qBAAqB,CAAC;AAE7B,KAAK,0BAA0B,GAAG;IAChC,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,UAAU,yBAAyB;IACjC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,GAAG,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjE,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC/B,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACtD,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC/B,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,oBAAoB,EAAE,UAAU,GAAG,IAAI,CAAC;IACxC,CAAC,EAAE,WAAW,CAAC;IACf,WAAW,EAAE,GAAG,CAAC,MAAM,EAAE,0BAA0B,CAAC,CAAC;IACrD,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,eAAe,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtE,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3E,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,+BAA+B,EAAE,CAC/B,MAAM,CAAC,EAAE,0BAA0B,KAChC,MAAM,CAAC;IACZ,oBAAoB,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACnD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAC;CACrB;AAwBD,wBAAgB,oBAAoB,CAAC,EACnC,kBAAkB,EAClB,eAAe,EACf,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,oBAAoB,EACpB,CAAC,EACD,WAAW,EACX,OAAO,EACP,aAAa,EACb,YAAY,EACZ,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,+BAA+B,EAC/B,oBAAoB,EACpB,iBAAiB,EACjB,WAAW,GACZ,EAAE,yBAAyB,kDAkM3B"}

package/components/pages/plugin-view-dialogs.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AdminDialog, Button, Dialog, DialogDescription, DialogTitle, } from "@elizaos/ui";
+import { ConnectorSetupPanel } from "../connectors/ConnectorSetupPanel.js";
+import { PluginConfigForm, TelegramPluginConfig } from "./PluginConfigForm.js";
+import { iconImageSource, resolveIcon, } from "./plugin-list-utils.js";
+function SettingsDialogIcon({ plugin }) {
+    const icon = resolveIcon(plugin);
+    if (!icon)
+        return null;
+    if (typeof icon === "string") {
+        const imageSrc = iconImageSource(icon);
+        return imageSrc ? (_jsx("img", { src: imageSrc, alt: "", className: "w-6 h-6 rounded-md object-contain", onError: (event) => {
+                event.currentTarget.style.display = "none";
+            } })) : (_jsx("span", { className: "text-base", children: icon }));
+    }
+    const IconComponent = icon;
+    return _jsx(IconComponent, { className: "w-6 h-6 text-txt" });
+}
+export function PluginSettingsDialog({ installPluginLabel, installProgress, installingPlugins, pluginConfigs, pluginSaveSuccess, pluginSaving, settingsDialogPlugin, t, testResults, onClose, onConfigReset, onConfigSave, onInstallPlugin, onParamChange, onTestConnection, formatDialogTestConnectionLabel, installProgressLabel, saveSettingsLabel, savingLabel, }) {
+    if (!settingsDialogPlugin)
+        return null;
+    const plugin = settingsDialogPlugin;
+    const isShowcase = plugin.id === "__ui-showcase__";
+    const isSaving = pluginSaving.has(plugin.id);
+    const saveSuccess = pluginSaveSuccess.has(plugin.id);
+    const categoryLabel = isShowcase
+        ? "showcase"
+        : plugin.category === "ai-provider"
+            ? "ai provider"
+            : plugin.category;
+    return (_jsx(Dialog, { open: true, onOpenChange: (open) => {
+            if (!open)
+                onClose(plugin.id);
+        }, children: _jsxs(AdminDialog.Content, { className: "max-h-[85vh] max-w-2xl", children: [_jsxs(AdminDialog.Header, { className: "flex flex-row items-center gap-3", children: [_jsxs(DialogTitle, { className: "font-bold text-base flex items-center gap-2 flex-1 min-w-0 tracking-wide text-txt", children: [_jsx(SettingsDialogIcon, { plugin: plugin }), plugin.name] }), _jsx(DialogDescription, { className: "sr-only", children: t("pluginsview.PluginDialogDescription", {
+                                plugin: plugin.name,
+                                defaultValue: "Review plugin metadata, adjust settings, and save changes for {{plugin}}.",
+                            }) }), _jsx(AdminDialog.MetaBadge, { children: categoryLabel }), plugin.version && (_jsxs(AdminDialog.MonoMeta, { children: ["v", plugin.version] })), isShowcase && (_jsx("span", { className: "text-2xs font-bold tracking-widest px-2.5 py-[2px] border border-accent/30 text-txt bg-accent/10 rounded-full", children: t("pluginsview.DEMO") }))] }), _jsxs(AdminDialog.BodyScroll, { children: [_jsxs("div", { className: "px-5 pt-4 pb-1 flex items-center gap-3 flex-wrap text-xs text-muted", children: [plugin.description && (_jsx("span", { className: "text-xs text-muted leading-relaxed", children: plugin.description })), (plugin.tags?.length ?? 0) > 0 && (_jsx("span", { className: "flex items-center gap-1.5 flex-wrap", children: plugin.tags?.map((tag) => (_jsx("span", { className: "whitespace-nowrap border border-border/40 bg-bg-accent/80 px-1.5 py-px text-2xs lowercase tracking-wide text-muted-strong", children: tag }, `${plugin.id}:${tag}:settings`))) }))] }), (plugin.npmName ||
+                            (plugin.pluginDeps && plugin.pluginDeps.length > 0)) && (_jsxs("div", { className: "px-5 pb-2 flex items-center gap-3 flex-wrap", children: [plugin.npmName && (_jsx("span", { className: "font-mono text-2xs text-muted opacity-50", children: plugin.npmName })), plugin.pluginDeps && plugin.pluginDeps.length > 0 && (_jsxs("span", { className: "flex items-center gap-1 flex-wrap", children: [_jsx("span", { className: "text-2xs text-muted opacity-60", children: t("pluginsview.dependsOn") }), plugin.pluginDeps.map((dep) => (_jsx("span", { className: "text-2xs px-1.5 py-px border border-border bg-accent-subtle text-muted rounded-sm", children: dep }, dep)))] }))] })), _jsxs("div", { className: "px-5 py-3", children: [plugin.id === "telegram" ? (_jsx(TelegramPluginConfig, { plugin: plugin, pluginConfigs: pluginConfigs, onParamChange: onParamChange })) : (_jsx(PluginConfigForm, { plugin: plugin, pluginConfigs: pluginConfigs, onParamChange: onParamChange })), _jsx(ConnectorSetupPanel, { pluginId: plugin.id })] })] }), !isShowcase && (_jsxs(AdminDialog.Footer, { className: "flex justify-end gap-3", children: [plugin.source === "store" &&
+                            plugin.enabled &&
+                            !plugin.isActive &&
+                            plugin.npmName &&
+                            !plugin.loadError && (_jsx(Button, { variant: "default", size: "sm", className: "h-8 px-4 text-xs-tight font-bold tracking-wide shadow-sm", disabled: installingPlugins.has(plugin.id), onClick: () => void onInstallPlugin(plugin.id, plugin.npmName ?? ""), children: installingPlugins.has(plugin.id)
+                                ? installProgressLabel(installProgress.get(plugin.npmName ?? "")?.message)
+                                : installPluginLabel })), plugin.loadError && (_jsx("span", { className: "px-3 py-1.5 text-xs-tight text-danger font-bold tracking-wide", title: plugin.loadError, children: t("pluginsview.PackageBrokenMis") })), plugin.isActive && (_jsx(Button, { variant: testResults.get(plugin.id)?.success
+                                ? "default"
+                                : testResults.get(plugin.id)?.error
+                                    ? "destructive"
+                                    : "outline", size: "sm", className: `h-8 px-4 text-xs-tight font-bold tracking-wide transition-all ${testResults.get(plugin.id)?.loading
+                                ? "opacity-70 cursor-wait"
+                                : testResults.get(plugin.id)?.success
+                                    ? "bg-ok text-ok-fg border-ok hover:bg-ok/90"
+                                    : testResults.get(plugin.id)?.error
+                                        ? "bg-danger text-danger-fg border-danger hover:bg-danger/90"
+                                        : "border-border/40 bg-card/40 backdrop-blur-md shadow-sm hover:border-accent/40"}`, disabled: testResults.get(plugin.id)?.loading, onClick: () => void onTestConnection(plugin.id), children: formatDialogTestConnectionLabel(testResults.get(plugin.id)) })), _jsx(Button, { variant: "ghost", size: "sm", className: "h-8 px-4 text-xs font-bold text-muted hover:text-txt transition-all", onClick: () => onConfigReset(plugin.id), children: t("common.reset") }), _jsx(Button, { variant: saveSuccess ? "default" : "secondary", size: "sm", className: `h-8 px-5 text-xs font-bold tracking-wide transition-all ${saveSuccess
+                                ? "bg-ok text-ok-fg hover:bg-ok/90"
+                                : "bg-accent text-accent-fg hover:bg-accent/90 shadow-lg shadow-accent/20"}`, onClick: () => void onConfigSave(plugin.id), disabled: isSaving, children: isSaving
+                                ? savingLabel
+                                : saveSuccess
+                                    ? t("pluginsview.SavedWithCheck", {
+                                        defaultValue: "✓ Saved",
+                                    })
+                                    : saveSettingsLabel })] }))] }) }));
+}

package/components/pages/plugin-view-modal.d.ts

@@ -0,0 +1,34 @@
+import type { PluginInfo } from "../../api";
+import { type TranslateFn } from "./plugin-list-utils";
+interface PluginGameModalProps {
+    effectiveGameSelected: string | null;
+    gameMobileDetail: boolean;
+    gameNarrow: boolean;
+    gameVisiblePlugins: PluginInfo[];
+    isConnectorLikeMode: boolean;
+    pluginConfigs: Record<string, Record<string, string>>;
+    pluginSaveSuccess: Set<string>;
+    pluginSaving: Set<string>;
+    resultLabel: string;
+    saveLabel: string;
+    savedLabel: string;
+    savingLabel: string;
+    sectionTitle: string;
+    selectedPlugin: PluginInfo | null;
+    selectedPluginLinks: Array<{
+        key: string;
+        url: string;
+    }>;
+    t: TranslateFn;
+    togglingPlugins: Set<string>;
+    onBack: () => void;
+    onConfigSave: (pluginId: string) => Promise<void>;
+    onOpenExternalUrl: (url: string) => Promise<void>;
+    onParamChange: (pluginId: string, paramKey: string, value: string) => void;
+    onSelectPlugin: (pluginId: string) => void;
+    onTestConnection: (pluginId: string) => Promise<void>;
+    onTogglePlugin: (pluginId: string, enabled: boolean) => Promise<void>;
+}
+export declare function PluginGameModal({ effectiveGameSelected, gameMobileDetail, gameNarrow, gameVisiblePlugins, isConnectorLikeMode, pluginConfigs, pluginSaveSuccess, pluginSaving, resultLabel, saveLabel, savedLabel, savingLabel, sectionTitle, selectedPlugin, selectedPluginLinks, t, togglingPlugins, onBack, onConfigSave, onOpenExternalUrl, onParamChange, onSelectPlugin, onTestConnection, onTogglePlugin, }: PluginGameModalProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=plugin-view-modal.d.ts.map

package/components/pages/plugin-view-modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin-view-modal.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/plugin-view-modal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,WAAW,CAAC;AAC5D,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,qBAAqB,CAAC;AAE7B,UAAU,oBAAoB;IAC5B,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,kBAAkB,EAAE,UAAU,EAAE,CAAC;IACjC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACtD,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC/B,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,UAAU,GAAG,IAAI,CAAC;IAClC,mBAAmB,EAAE,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACzD,CAAC,EAAE,WAAW,CAAC;IACf,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3E,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACvE;AAkCD,wBAAgB,eAAe,CAAC,EAC9B,qBAAqB,EACrB,gBAAgB,EAChB,UAAU,EACV,kBAAkB,EAClB,mBAAmB,EACnB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,SAAS,EACT,UAAU,EACV,WAAW,EACX,YAAY,EACZ,cAAc,EACd,mBAAmB,EACnB,CAAC,EACD,eAAe,EACf,MAAM,EACN,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,cAAc,GACf,EAAE,oBAAoB,2CAoOtB"}