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

package/components/chat/AppsSection.js

@@ -0,0 +1,198 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Apps widget section — shown at the top of the chat widget sidebar.
+ *
+ * Renders running apps first (with a health-state ring), then favorited apps
+ * that are not currently running. Clicking an app launches / focuses it.
+ */
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@elizaos/ui";
+import { LayoutGrid, MoreHorizontal } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { client } from "../../api/index.js";
+import { useApp } from "../../state/index.js";
+import { openExternalUrl } from "../../utils/index.js";
+import { AppIdentityTile } from "../apps/app-identity.js";
+import { loadMergedCatalogApps } from "../apps/catalog-loader.js";
+import { getAppShortName } from "../apps/helpers.js";
+import { getInternalToolAppTargetTab } from "../apps/internal-tool-apps.js";
+import { isOverlayApp } from "../apps/overlay-app-registry.js";
+import { WidgetSection } from "./widgets/shared.js";
+// ---------------------------------------------------------------------------
+// Ring classes derived from AppRunSummary.health.state
+// ---------------------------------------------------------------------------
+function getRunRingClass(run) {
+    const state = run.health?.state;
+    if (state === "healthy")
+        return "ring-2 ring-ok/60";
+    if (state === "degraded")
+        return "ring-2 ring-warn/60";
+    return "ring-2 ring-danger/60";
+}
+function isOverlayLaunchApp(app) {
+    return isOverlayApp(app.name) || app.launchType === "overlay";
+}
+export function AppsSection({ headerAction } = {}) {
+    const { favoriteApps: favoriteAppsValue, appRuns, setTab, setState, setActionNotice, t, } = useApp();
+    const favoriteApps = Array.isArray(favoriteAppsValue)
+        ? favoriteAppsValue
+        : [];
+    const [catalogApps, setCatalogApps] = useState([]);
+    // Fetch the full catalog once for sidebar launch targets.
+    useEffect(() => {
+        let cancelled = false;
+        void loadMergedCatalogApps()
+            .then((apps) => {
+            if (!cancelled) {
+                setCatalogApps(apps);
+            }
+        })
+            .catch(() => undefined);
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    // -------------------------------------------------------------------------
+    // Derive the ordered button list:
+    //   1. Running apps (by appName), in their natural order
+    //   2. Favorited apps not already in the running set
+    // -------------------------------------------------------------------------
+    const { orderedApps, runByName } = useMemo(() => {
+        const catalogByName = new Map(catalogApps.map((a) => [a.name, a]));
+        const runMap = new Map();
+        for (const run of appRuns) {
+            runMap.set(run.appName, run);
+        }
+        // Running apps (deduplicated by appName, stable order)
+        const runningAppNames = [...new Set(appRuns.map((r) => r.appName))];
+        const runningItems = runningAppNames
+            .map((name) => catalogByName.get(name))
+            .filter((app) => app !== undefined);
+        // Favorite apps not already running
+        const runningSet = new Set(runningAppNames);
+        const favOnlyItems = catalogApps.filter((app) => favoriteApps.includes(app.name) && !runningSet.has(app.name));
+        return {
+            orderedApps: [...runningItems, ...favOnlyItems],
+            runByName: runMap,
+        };
+    }, [catalogApps, appRuns, favoriteApps]);
+    // -------------------------------------------------------------------------
+    // Kebab menu actions: relaunch, edit, stop. Launch stays as the tile click.
+    // -------------------------------------------------------------------------
+    const handleRelaunch = useCallback(async (app) => {
+        try {
+            await client.fetch("/api/apps/relaunch", {
+                method: "POST",
+                body: JSON.stringify({ name: app.name }),
+            });
+            setActionNotice(`${app.displayName ?? app.name} relaunched.`, "success", 3000);
+        }
+        catch (err) {
+            setActionNotice(err instanceof Error
+                ? err.message
+                : t("appsview.LaunchFailed", {
+                    name: app.displayName ?? app.name,
+                    message: t("common.error"),
+                }), "error", 4000);
+        }
+    }, [setActionNotice, t]);
+    const handleEdit = useCallback(async (app) => {
+        try {
+            await client.fetch("/api/apps/create", {
+                method: "POST",
+                body: JSON.stringify({ intent: "edit", editTarget: app.name }),
+            });
+            setActionNotice(`Editing ${app.displayName ?? app.name}…`, "info", 3500);
+        }
+        catch (err) {
+            setActionNotice(err instanceof Error
+                ? err.message
+                : `Couldn't start an edit for ${app.displayName ?? app.name}.`, "error", 4000);
+        }
+    }, [setActionNotice]);
+    const handleStop = useCallback(async (app) => {
+        try {
+            await client.stopApp(app.name);
+            setActionNotice(`${app.displayName ?? app.name} stopped.`, "success", 3000);
+        }
+        catch (err) {
+            setActionNotice(err instanceof Error
+                ? err.message
+                : `Couldn't stop ${app.displayName ?? app.name}.`, "error", 4000);
+        }
+    }, [setActionNotice]);
+    // -------------------------------------------------------------------------
+    // Launch handler (identical logic to FavoriteAppsBar)
+    // -------------------------------------------------------------------------
+    const handleLaunch = useCallback(async (app) => {
+        const internalToolTab = getInternalToolAppTargetTab(app.name);
+        if (internalToolTab) {
+            setTab(internalToolTab);
+            return;
+        }
+        if (isOverlayLaunchApp(app)) {
+            setState("activeOverlayApp", app.name);
+            return;
+        }
+        try {
+            const result = await client.launchApp(app.name);
+            const primaryRun = result.run;
+            if (primaryRun?.viewer?.url) {
+                setState("activeGameRunId", primaryRun.runId);
+                setTab("apps");
+                setState("appsSubTab", "games");
+                return;
+            }
+            const targetUrl = result.launchUrl ?? app.launchUrl;
+            if (targetUrl) {
+                try {
+                    await openExternalUrl(targetUrl);
+                    setActionNotice(t("appsview.OpenedInNewTab", {
+                        name: app.displayName ?? app.name,
+                    }), "success", 2600);
+                }
+                catch {
+                    setActionNotice(t("appsview.PopupBlockedOpen", {
+                        name: app.displayName ?? app.name,
+                    }), "error", 4200);
+                }
+                return;
+            }
+            if (primaryRun) {
+                setTab("apps");
+                setState("appsSubTab", "running");
+                return;
+            }
+            setActionNotice(t("appsview.LaunchedNoViewer", {
+                name: app.displayName ?? app.name,
+            }), "error", 4000);
+        }
+        catch (err) {
+            setActionNotice(t("appsview.LaunchFailed", {
+                name: app.displayName ?? app.name,
+                message: err instanceof Error ? err.message : t("common.error"),
+            }), "error", 4000);
+        }
+    }, [setActionNotice, setState, setTab, t]);
+    // Hide the section entirely when there is nothing to show AND no header
+    // action to render (i.e. no collapse-affordance owner).
+    if (orderedApps.length === 0 && !headerAction)
+        return null;
+    return (_jsx(WidgetSection, { title: t("nav.apps", { defaultValue: "Apps" }), icon: _jsx(LayoutGrid, { className: "h-4 w-4" }), action: headerAction, testId: "chat-widget-apps-section", children: orderedApps.length > 0 ? (_jsx("div", { className: "flex flex-wrap items-center gap-2", children: orderedApps.map((app) => {
+                const run = runByName.get(app.name);
+                const displayName = app.displayName ?? getAppShortName(app);
+                const ringClass = run ? getRunRingClass(run) : "";
+                const isRunning = Boolean(run);
+                return (_jsxs("div", { className: "group relative", "data-testid": `apps-section-tile-${app.name}`, children: [_jsx("button", { type: "button", title: displayName, "aria-label": t("chatsidebar.launchApp", {
+                                defaultValue: `Launch ${displayName}`,
+                                name: displayName,
+                            }), className: `rounded-2xl transition-transform hover:scale-105 ${ringClass}`, onClick: () => void handleLaunch(app), children: _jsx(AppIdentityTile, { app: app, active: isRunning, size: "sm", imageOnly: true }) }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": `Actions for ${displayName}`, "data-testid": `apps-section-kebab-${app.name}`, onClick: (event) => event.stopPropagation(), className: "absolute -right-1 -top-1 inline-flex h-5 w-5 items-center justify-center rounded-full border border-border bg-bg text-muted opacity-0 shadow-sm transition-opacity hover:text-txt focus:opacity-100 focus-visible:opacity-100 group-hover:opacity-100", children: _jsx(MoreHorizontal, { className: "h-3 w-3", "aria-hidden": true }) }) }), _jsxs(DropdownMenuContent, { align: "end", sideOffset: 4, className: "w-36", onClick: (event) => event.stopPropagation(), children: [_jsx(DropdownMenuItem, { "data-testid": `apps-section-launch-${app.name}`, onSelect: () => void handleLaunch(app), children: t("settings.sections.apps.launch", {
+                                                defaultValue: "Launch",
+                                            }) }), _jsx(DropdownMenuItem, { "data-testid": `apps-section-relaunch-${app.name}`, onSelect: () => void handleRelaunch(app), children: t("settings.sections.apps.relaunch", {
+                                                defaultValue: "Relaunch",
+                                            }) }), _jsx(DropdownMenuItem, { "data-testid": `apps-section-edit-${app.name}`, onSelect: () => void handleEdit(app), children: t("settings.sections.apps.edit", {
+                                                defaultValue: "Edit",
+                                            }) }), isRunning ? (_jsx(DropdownMenuItem, { "data-testid": `apps-section-stop-${app.name}`, className: "text-danger focus:text-danger", onSelect: () => void handleStop(app), children: t("settings.sections.apps.stop", {
+                                                defaultValue: "Stop",
+                                            }) })) : null] })] })] }, app.name));
+            }) })) : null }));
+}

package/components/chat/ConnectorAccountPicker.d.ts

@@ -0,0 +1,16 @@
+import type { ConnectorAccountRecord } from "../../api/client-agent";
+export interface ConnectorAccountPickerProps {
+    accounts: ConnectorAccountRecord[];
+    className?: string;
+    connectBusy?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    selectedAccount: ConnectorAccountRecord | null;
+    sourceLabel?: string;
+    show?: boolean;
+    onConnectAccount?: () => void;
+    onReconnectAccount?: (accountId: string) => void;
+    onSelectAccount: (accountId: string) => void;
+}
+export declare function ConnectorAccountPicker({ accounts, className, connectBusy, disabled, loading, selectedAccount, sourceLabel, show, onConnectAccount, onReconnectAccount, onSelectAccount, }: ConnectorAccountPickerProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ConnectorAccountPicker.d.ts.map

package/components/chat/ConnectorAccountPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectorAccountPicker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/chat/ConnectorAccountPicker.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAMrE,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,EAAE,sBAAsB,EAAE,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,sBAAsB,GAAG,IAAI,CAAC;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAgCD,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,SAAS,EACT,WAAmB,EACnB,QAAgB,EAChB,OAAe,EACf,eAAe,EACf,WAAyB,EACzB,IAAW,EACX,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,GAChB,EAAE,2BAA2B,kDAiJ7B"}

package/components/chat/ConnectorAccountPicker.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, cn, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Spinner, StatusBadge, } from "@elizaos/ui";
+import { Check, ChevronDown, RefreshCw, UserRound } from "lucide-react";
+import { connectorAccountDisplayName, isConnectorAccountUsable, } from "./connector-send-as.js";
+function accountStatusLabel(account) {
+    if (account.enabled === false)
+        return { label: "Disabled", tone: "muted" };
+    switch (account.status) {
+        case "connected":
+            return { label: "Connected", tone: "success" };
+        case "pending":
+            return { label: "Pending", tone: "warning" };
+        case "needs-reauth":
+            return { label: "Reconnect", tone: "danger" };
+        case "error":
+            return { label: "Error", tone: "danger" };
+        case "disconnected":
+            return { label: "Disconnected", tone: "muted" };
+        default:
+            return { label: "Unknown", tone: "muted" };
+    }
+}
+function accountSecondaryText(account) {
+    return (account.handle?.trim() ||
+        account.externalId?.trim() ||
+        account.statusDetail?.trim() ||
+        account.id);
+}
+export function ConnectorAccountPicker({ accounts, className, connectBusy = false, disabled = false, loading = false, selectedAccount, sourceLabel = "Connector", show = true, onConnectAccount, onReconnectAccount, onSelectAccount, }) {
+    if (!show)
+        return null;
+    const selectedName = selectedAccount
+        ? connectorAccountDisplayName(selectedAccount)
+        : loading
+            ? "Loading"
+            : "Choose account";
+    const selectedStatus = selectedAccount
+        ? accountStatusLabel(selectedAccount)
+        : null;
+    return (_jsxs("div", { className: cn("flex min-w-0 items-center gap-1.5", className), children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: disabled || loading, className: "h-7 max-w-full rounded-full px-2 text-[11px] shadow-none", "data-testid": "connector-account-picker-trigger", children: [loading ? (_jsx(Spinner, { className: "h-3 w-3" })) : (_jsx(UserRound, { className: "h-3.5 w-3.5", "aria-hidden": true })), _jsxs("span", { className: "min-w-0 truncate", children: [sourceLabel, ": ", selectedName] }), selectedStatus ? (_jsx("span", { className: cn("h-1.5 w-1.5 rounded-full", selectedStatus.tone === "success"
+                                        ? "bg-ok"
+                                        : selectedStatus.tone === "warning"
+                                            ? "bg-warn"
+                                            : selectedStatus.tone === "danger"
+                                                ? "bg-destructive"
+                                                : "bg-muted"), "aria-hidden": true })) : null, _jsx(ChevronDown, { className: "h-3.5 w-3.5 opacity-70", "aria-hidden": true })] }) }), _jsxs(DropdownMenuContent, { align: "start", sideOffset: 6, className: "w-72 max-w-[calc(100vw-2rem)]", children: [_jsx(DropdownMenuLabel, { className: "text-xs text-muted", children: "Send as" }), accounts.map((account) => {
+                                const selected = selectedAccount?.id === account.id;
+                                const status = accountStatusLabel(account);
+                                const needsReconnect = account.status === "needs-reauth" ||
+                                    account.status === "disconnected" ||
+                                    account.status === "error" ||
+                                    account.enabled === false;
+                                return (_jsxs(DropdownMenuItem, { className: "items-start gap-2 py-2", onSelect: (event) => {
+                                        event.preventDefault();
+                                        onSelectAccount(account.id);
+                                    }, children: [_jsx("span", { className: "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center", children: selected ? _jsx(Check, { className: "h-3.5 w-3.5" }) : null }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx("span", { className: "truncate text-xs font-medium", children: connectorAccountDisplayName(account) }), account.isDefault ? (_jsx("span", { className: "rounded-sm border border-border/40 px-1 py-0 text-[9px] uppercase text-muted", children: "Default" })) : null] }), _jsxs("span", { className: "mt-1 flex min-w-0 items-center gap-1.5", children: [_jsx(StatusBadge, { label: status.label, tone: status.tone, className: "px-1.5 py-0 text-[9px]" }), _jsx("span", { className: "truncate text-[10px] text-muted", children: accountSecondaryText(account) })] })] }), needsReconnect && onReconnectAccount ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 w-7 shrink-0 p-0", title: "Reconnect account", "aria-label": `Reconnect ${connectorAccountDisplayName(account)}`, onClick: (event) => {
+                                                event.preventDefault();
+                                                event.stopPropagation();
+                                                onReconnectAccount(account.id);
+                                            }, children: _jsx(RefreshCw, { className: "h-3.5 w-3.5" }) })) : null] }, account.id));
+                            }), onConnectAccount ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "py-2 text-xs", disabled: connectBusy, onSelect: (event) => {
+                                            event.preventDefault();
+                                            onConnectAccount();
+                                        }, children: [connectBusy ? _jsx(Spinner, { className: "h-3 w-3" }) : null, "Connect another account"] })] })) : null] })] }), selectedAccount && !isConnectorAccountUsable(selectedAccount) ? (_jsx("span", { className: "truncate text-[11px] text-warn", children: "Account needs attention" })) : null] }));
+}

package/components/chat/MessageContent.d.ts

@@ -0,0 +1,42 @@
+import type { ConversationMessage } from "../../api/client-types-chat";
+import type { PatchOp, UiSpec } from "../../config/ui-spec";
+interface MessageContentProps {
+    message: ConversationMessage;
+    analysisMode?: boolean;
+}
+export declare function normalizeDisplayText(text: string): string;
+/**
+ * Quick pre-check: does this line look like a JSON patch object?
+ * Handles both compact `{"op":` and spaced `{ "op":` formats.
+ */
+export declare function looksLikePatch(trimmed: string): boolean;
+/** Try to parse a single line as an RFC 6902 JSON Patch operation. */
+export declare function tryParsePatch(line: string): PatchOp | null;
+/**
+ * Apply a list of RFC 6902 patches to build a UiSpec.
+ *
+ * Only handles the paths the catalog emits:
+ *   /root              → spec.root
+ *   /elements/<id>     → spec.elements[id]
+ *   /state/<key>       → spec.state[key]
+ *   /state             → spec.state (whole object)
+ */
+export declare function compilePatches(patches: PatchOp[]): UiSpec | null;
+/**
+ * Scan `text` for blocks of consecutive JSONL patch lines and return
+ * their character regions plus the compiled UiSpec.
+ *
+ * A patch block is a run of lines where each non-empty line parses as a
+ * valid PatchOp. A single empty line between patch lines is allowed.
+ */
+export declare function findPatchRegions(text: string): Array<{
+    start: number;
+    end: number;
+    spec: UiSpec;
+    raw: string;
+}>;
+/** Normalize plugin ID: strip @scope/plugin- prefix so both "discord" and "@elizaos/plugin-discord" resolve. */
+export declare function normalizePluginId(id: string): string;
+export declare function MessageContent({ message, analysisMode, }: MessageContentProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MessageContent.d.ts.map

package/components/chat/MessageContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageContent.d.ts","sourceRoot":"","sources":["../../../../../../src/components/chat/MessageContent.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAGvE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AA8C5D,UAAU,mBAAmB;IAC3B,OAAO,EAAE,mBAAmB,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAkCD,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAgBzD;AAsBD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAGvD;AAED,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAW1D;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,MAAM,GAAG,IAAI,CAsDhE;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,MAAM,GACX,KAAK,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC,CAmElE;AAoID,gHAAgH;AAChH,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAEpD;AAqlBD,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,YAAoB,GACrB,EAAE,mBAAmB,2CA4RrB"}