npm - @shubh90/app-runtime - Versions diffs - 0.4.1 → 0.6.0 - Mend

@shubh90/app-runtime 0.4.1 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (48) hide show

package/dist/auth/core.d.ts +12 -7
package/dist/auth/core.js +9 -11
package/dist/auth/db.js +10 -0
package/dist/auth/index.d.ts +4 -4
package/dist/auth/index.js +6 -6
package/dist/auth/lookup.d.ts +23 -12
package/dist/auth/lookup.js +85 -24
package/dist/auth/plaza.d.ts +30 -10
package/dist/auth/plaza.js +65 -21
package/dist/auth/routes.js +1 -1
package/dist/auth/session.d.ts +3 -2
package/dist/auth/session.js +5 -6
package/dist/chat/index.d.ts +20 -0
package/dist/chat/index.js +132 -0
package/dist/chat/origins.d.ts +9 -0
package/dist/chat/origins.js +37 -0
package/dist/chat/paths.d.ts +2 -0
package/dist/chat/paths.js +2 -0
package/dist/chat/server.d.ts +16 -0
package/dist/chat/server.js +167 -0
package/dist/chat/thread.d.ts +27 -0
package/dist/chat/thread.js +59 -0
package/dist/chat/ui/activity.d.ts +12 -0
package/dist/chat/ui/activity.js +57 -0
package/dist/chat/ui/attachments.d.ts +9 -0
package/dist/chat/ui/attachments.js +50 -0
package/dist/chat/ui/index.d.ts +5 -0
package/dist/chat/ui/index.js +6 -0
package/dist/chat/ui/message-body.d.ts +8 -0
package/dist/chat/ui/message-body.js +57 -0
package/dist/chat/ui/styles.css +109 -0
package/dist/chat/ui/styles.d.ts +16 -0
package/dist/chat/ui/styles.js +126 -0
package/dist/chat/ui/types.d.ts +47 -0
package/dist/chat/ui/types.js +1 -0
package/dist/chat/widget/api.d.ts +34 -0
package/dist/chat/widget/api.js +112 -0
package/dist/chat/widget/app.d.ts +11 -0
package/dist/chat/widget/app.js +304 -0
package/dist/chat/widget/hooks.d.ts +86 -0
package/dist/chat/widget/hooks.js +312 -0
package/dist/chat/widget/icons.d.ts +13 -0
package/dist/chat/widget/icons.js +13 -0
package/dist/chat/widget/styles.d.ts +1 -0
package/dist/chat/widget/styles.js +233 -0
package/dist/chat/widget/thread.d.ts +33 -0
package/dist/chat/widget/thread.js +27 -0
package/package.json +50 -11

package/dist/chat/index.js ADDED Viewed

@@ -0,0 +1,132 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+// The chat bubble every org app carries: message the org's agents from inside
+// the app, in the same thread as Plaza and texting.
+//
+// Mount it once, for a signed-in person, beside the app's routes:
+//
+//   <MiiChat enabled={user !== null} />
+//
+// It renders into its own shadow root on <body>, with its own React root, so
+// the app's styles cannot reach it and it cannot disturb the app's tree. The
+// server half is ./server.ts, mounted at CHAT_BASE_PATH.
+import { Component, lazy, Suspense, useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { CHAT_UI_CSS } from "./ui/styles.js";
+import { useAgents } from "./widget/hooks.js";
+import { CHAT_CSS } from "./widget/styles.js";
+// The window — markdown and code highlighting with it — loads once there is
+// someone to talk to, not with every page of the app.
+const ChatApp = lazy(() => import("./widget/app.js").then((module) => ({ default: module.ChatApp })));
+export { CHAT_BASE_PATH } from "./paths.js";
+/**
+ * Whether the bubble belongs on this host: the app as people use it, not a
+ * draft of it. The pane itself is covered by not mounting when framed; this is
+ * for the same draft opened in a tab of its own, which the pane's toolbar does.
+ *
+ * A draft is a working copy (`wc-<12 hex>.miis.run`) or the instance an agent is
+ * editing (`<sandbox>.app.miis.run`). Anything else keeps the bubble, including
+ * localhost: guessing wrong should leave a live app with its chat, not take it
+ * away. Vercel names a branch preview two ways and only one is recognisable
+ * here, which is the acceptable side to be wrong on.
+ */
+export function chatBelongsOnHost(hostname) {
+    const host = hostname.toLowerCase();
+    const [label = ""] = host.split(".");
+    if (/^wc-[0-9a-f]{12}$/.test(label))
+        return false;
+    if (host.endsWith(".app.miis.run"))
+        return false;
+    // Qualified, because a bare <project>.vercel.app is a live alias.
+    if (host.includes("-git-") && host.endsWith(".vercel.app"))
+        return false;
+    return true;
+}
+export function MiiChat({ enabled }) {
+    useEffect(() => {
+        // Inside Plaza's App pane, Plaza's own chat is already beside the app.
+        if (!enabled || window.self !== window.top)
+            return;
+        if (!chatBelongsOnHost(window.location.hostname))
+            return;
+        const host = document.createElement("div");
+        host.setAttribute("data-mii-chat", "");
+        document.body.appendChild(host);
+        const shadow = host.attachShadow({ mode: "open" });
+        const style = document.createElement("style");
+        style.textContent = CHAT_UI_CSS + CHAT_CSS;
+        shadow.appendChild(style);
+        const container = document.createElement("div");
+        shadow.appendChild(container);
+        const root = createRoot(container);
+        root.render(_jsx(Widget, {}));
+        return () => {
+            root.unmount();
+            host.remove();
+        };
+    }, [enabled]);
+    return null;
+}
+function Widget() {
+    const agents = useAgents();
+    const brand = useBrand();
+    return agents.status === "ready" ? (_jsx(WindowBoundary, { children: _jsx(Suspense, { fallback: null, children: _jsx(ChatApp, { agents: agents.data, brand: brand }) }) })) : null;
+}
+// A window that cannot load or crashes — a chunk gone after the app redeploys —
+// takes only the chat with it, not the widget's root, and says why.
+class WindowBoundary extends Component {
+    state = { failed: false };
+    static getDerivedStateFromError() {
+        return { failed: true };
+    }
+    componentDidCatch(error) {
+        console.error("mii-chat: the chat window failed", error);
+    }
+    render() {
+        return this.state.failed ? null : this.props.children;
+    }
+}
+/**
+ * Wear the app's own accent. Org apps declare `--primary` and
+ * `--primary-foreground` (shadcn's convention: an HSL triplet, or a whole
+ * colour); read them live, because a dark-mode switch changes them.
+ */
+function useBrand() {
+    const [brand, setBrand] = useState(readBrand);
+    useEffect(() => {
+        const update = () => setBrand((current) => {
+            const next = readBrand();
+            return next.brand === current.brand &&
+                next.foreground === current.foreground &&
+                next.dark === current.dark
+                ? current
+                : next;
+        });
+        update();
+        const observer = new MutationObserver(update);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class", "style", "data-theme"]
+        });
+        return () => observer.disconnect();
+    }, []);
+    return brand;
+}
+export function readBrand() {
+    const root = document.documentElement;
+    const styles = getComputedStyle(root);
+    return {
+        brand: asColour(styles.getPropertyValue("--primary")),
+        foreground: asColour(styles.getPropertyValue("--primary-foreground")),
+        // Apps switch themes with a `dark` class (next-themes) or declare it as
+        // their color-scheme; either way the chat follows.
+        dark: root.classList.contains("dark") || styles.colorScheme === "dark"
+    };
+}
+/** `217 84% 52%` is shadcn's bare HSL; anything else is already a colour. */
+export function asColour(value) {
+    const trimmed = value.trim();
+    if (trimmed === "")
+        return null;
+    return /^\d/.test(trimmed) ? `hsl(${trimmed})` : trimmed;
+}

package/dist/chat/origins.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+export declare const MII_CHAT_MEDIA_ORIGINS: readonly string[];
+/**
+ * The policy directives chat needs, ready to join into a CSP.
+ *
+ * Apps compose their own policy; this only says what chat adds to it. Pass the
+ * app's own sources for a directive and they are kept — `img-src` in particular
+ * usually already carries `data:` and `blob:` for the app's own pictures.
+ */
+export declare function miiChatCspSources(directive: "img-src" | "media-src" | "connect-src", own?: readonly string[]): string;

package/dist/chat/origins.js ADDED Viewed

@@ -0,0 +1,37 @@
+// The one place outside this app's own origin that chat touches, for apps that
+// set a Content-Security-Policy.
+//
+// Chat is otherwise same-origin by design: the widget talks to the app's own
+// server, which forwards to Plaza. Files are the exception. mii hands the
+// browser a presigned URL on its media bucket and the browser posts the
+// attachment there itself, and the pictures and video already in a thread are
+// served from the same place. An agent's photo is a redirect from the app's own
+// avatar route to that bucket, which is a connect check rather than an img one
+// because the widget fetches it and renders a blob.
+//
+// So an app with a policy needs the bucket named in three directives:
+//
+//   import { MII_CHAT_MEDIA_ORIGINS } from "@shubh90/app-runtime/chat/origins";
+//   const media = MII_CHAT_MEDIA_ORIGINS.join(" ");
+//   `img-src 'self' data: blob: ${media}`
+//   `media-src 'self' ${media}`
+//   `connect-src 'self' ${media}`
+//
+// It lives here, versioned with the package, because the bucket has moved twice
+// (miiplaza-media -> -2 -> -3, us-east-1 -> us-west-2) and each move would
+// otherwise be a hunt through every app's config for a string that only fails
+// in production, only on attachments, and only after a deploy.
+export const MII_CHAT_MEDIA_ORIGINS = [
+    "https://miiplaza-media-3.s3.us-west-2.amazonaws.com"
+];
+/**
+ * The policy directives chat needs, ready to join into a CSP.
+ *
+ * Apps compose their own policy; this only says what chat adds to it. Pass the
+ * app's own sources for a directive and they are kept — `img-src` in particular
+ * usually already carries `data:` and `blob:` for the app's own pictures.
+ */
+export function miiChatCspSources(directive, own = ["'self'"]) {
+    const sources = [...own, ...MII_CHAT_MEDIA_ORIGINS];
+    return `${directive} ${sources.join(" ")}`;
+}

package/dist/chat/paths.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ /** Where an app mounts its chat routes, and where the widget calls them. */
2	+ export declare const CHAT_BASE_PATH = "/api/mii/chat";

package/dist/chat/paths.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ /** Where an app mounts its chat routes, and where the widget calls them. */
2	+ export const CHAT_BASE_PATH = "/api/mii/chat";

package/dist/chat/server.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import type { MiiAuthCore } from "../auth/core.js";
+import { CHAT_BASE_PATH } from "./paths.js";
+export { CHAT_BASE_PATH };
+export type MiiChatHandlerOptions = {
+    /** Where to report failures that are ours. Defaults to console.error. */
+    readonly reportError?: (error: unknown, context: Record<string, string>) => void;
+};
+export declare function createMiiChatHandler(auth: Pick<MiiAuthCore, "resolveSessionWithPlaza" | "revokeSession" | "SESSION_COOKIE">, options?: MiiChatHandlerOptions): (request: Request) => Promise<Response>;
+/**
+ * Whether the request came from this app's own pages. Browsers send
+ * `Sec-Fetch-Site` on every fetch; `Origin` covers the ones that predate it.
+ * A request with neither is not from a browser page, and a non-browser caller
+ * has no cookie to borrow.
+ */
+export declare function isSameOrigin(request: Request, url: URL): boolean;
+export declare function readCookie(header: string | null, name: string): string | null;

package/dist/chat/server.js ADDED Viewed

@@ -0,0 +1,167 @@
+// The server half of an org app's chat: the routes the widget calls, on the
+// app's own origin, forwarded to Plaza as the signed-in person.
+//
+// Framework-free: a Web `Request` in, a `Response` out. The app mounts it once
+// on a catch-all route under CHAT_BASE_PATH:
+//
+//   // src/routes/api/mii/chat/$.ts (TanStack Start)
+//   const chat = createMiiChatHandler(auth);
+//   export const Route = createFileRoute("/api/mii/chat/$")({
+//     server: { handlers: { GET: ({ request }) => chat(request), POST: ({ request }) => chat(request) } }
+//   });
+//
+// The browser never holds a credential for Plaza. It sends this app's own
+// session cookie; this server looks the session up and sends Plaza the token
+// Plaza signed when the person signed in. Plaza checks that token and the
+// person's membership on every request.
+import { miiAuthConfig } from "../auth/config.js";
+import { CHAT_BASE_PATH } from "./paths.js";
+export { CHAT_BASE_PATH };
+const ID = "([0-9a-fA-F-]{36})";
+const ROUTES = [
+    { method: "GET", pattern: /^\/agents$/, plazaPath: () => "/agents" },
+    {
+        method: "GET",
+        pattern: new RegExp(`^/agents/${ID}/messages$`),
+        plazaPath: (match) => `/agents/${match[1]}/messages`
+    },
+    {
+        method: "POST",
+        pattern: new RegExp(`^/agents/${ID}/messages$`),
+        plazaPath: (match) => `/agents/${match[1]}/messages`
+    },
+    {
+        method: "GET",
+        pattern: new RegExp(`^/agents/${ID}/avatar$`),
+        plazaPath: (match) => `/agents/${match[1]}/avatar`
+    },
+    { method: "POST", pattern: /^\/uploads$/, plazaPath: () => "/uploads" }
+];
+// What the thread poll may carry through. Everything else in the query string
+// is dropped rather than forwarded.
+const FORWARDED_QUERY = ["after", "afterId"];
+export function createMiiChatHandler(auth, options = {}) {
+    const reportError = options.reportError ??
+        ((error, context) => console.error("mii-chat error", context, error));
+    return async (request) => {
+        const url = new URL(request.url);
+        if (!url.pathname.startsWith(`${CHAT_BASE_PATH}/`)) {
+            return refuse(404, "not_found", "There's no chat here.");
+        }
+        const path = url.pathname.slice(CHAT_BASE_PATH.length);
+        let route;
+        let match = null;
+        for (const candidate of ROUTES) {
+            match = candidate.method === request.method ? path.match(candidate.pattern) : null;
+            if (match !== null) {
+                route = candidate;
+                break;
+            }
+        }
+        if (route === undefined || match === null) {
+            return refuse(404, "not_found", "There's no chat here.");
+        }
+        // Every org app shares one site with every other (*.miis.run), so a page
+        // on another org's app can send this app's cookie along. Only this app's
+        // own pages may use its chat.
+        if (!isSameOrigin(request, url)) {
+            return refuse(403, "cross_site", "Chat is only available from this app's own pages.");
+        }
+        const token = readCookie(request.headers.get("cookie"), auth.SESSION_COOKIE);
+        const session = token === null ? null : await auth.resolveSessionWithPlaza(token);
+        if (token === null || session === null) {
+            return refuse(401, "not_signed_in", "Sign in again to keep chatting.");
+        }
+        const { plazaUrl } = miiAuthConfig();
+        const target = new URL(`${plazaUrl}/api/app-chat/v1${route.plazaPath(match)}`);
+        for (const key of FORWARDED_QUERY) {
+            const value = url.searchParams.get(key);
+            if (value !== null)
+                target.searchParams.set(key, value);
+        }
+        let answer;
+        try {
+            answer = await fetch(target, {
+                method: route.method,
+                headers: {
+                    Authorization: `Bearer ${session.plazaToken}`,
+                    ...(route.method === "POST" ? { "Content-Type": "application/json" } : {})
+                },
+                body: route.method === "POST" ? await request.text() : undefined,
+                cache: "no-store",
+                // An agent with a photo answers with a redirect to it: the browser
+                // follows that itself, rather than this server fetching the photo.
+                redirect: "manual"
+            });
+        }
+        catch (error) {
+            reportError(error, { where: "mii-chat", step: "forward" });
+            return refuse(502, "unavailable", "Couldn't reach the chat. Try again in a moment.");
+        }
+        // Plaza no longer stands behind this session (the token is no good, or the
+        // person left the org): end it here too, rather than on the next recheck.
+        if (answer.status === 401 || answer.status === 403) {
+            await auth.revokeSession(token);
+        }
+        if (answer.status >= 500) {
+            reportError(new Error(`Plaza chat answered ${answer.status}: ${(await answer.clone().text()).slice(0, 300)}`), { where: "mii-chat", step: "plaza" });
+        }
+        // An avatar may be cached for the person; chat data never is.
+        const cacheControl = answer.headers.get("cache-control");
+        const headers = new Headers({
+            "Cache-Control": cacheControl !== null && cacheControl.startsWith("private") ? cacheControl : "no-store"
+        });
+        const contentType = answer.headers.get("content-type");
+        if (contentType !== null)
+            headers.set("Content-Type", contentType);
+        const location = answer.headers.get("location");
+        if (answer.status >= 300 && answer.status < 400 && location !== null) {
+            headers.set("Location", location);
+        }
+        const policy = answer.headers.get("content-security-policy");
+        if (policy !== null)
+            headers.set("Content-Security-Policy", policy);
+        return new Response(answer.body, { status: answer.status, headers });
+    };
+}
+/**
+ * Whether the request came from this app's own pages. Browsers send
+ * `Sec-Fetch-Site` on every fetch; `Origin` covers the ones that predate it.
+ * A request with neither is not from a browser page, and a non-browser caller
+ * has no cookie to borrow.
+ */
+export function isSameOrigin(request, url) {
+    const site = request.headers.get("sec-fetch-site");
+    if (site !== null && site !== "same-origin") {
+        return false;
+    }
+    const origin = request.headers.get("origin");
+    if (origin !== null && origin !== url.origin) {
+        // Behind a proxy the request URL can carry the internal host; the browser's
+        // Host header is what the page was served from.
+        const host = request.headers.get("x-forwarded-host") ?? request.headers.get("host");
+        return host !== null && new URL(origin).host === host;
+    }
+    return true;
+}
+export function readCookie(header, name) {
+    if (header === null)
+        return null;
+    for (const part of header.split(";")) {
+        const index = part.indexOf("=");
+        if (index === -1)
+            continue;
+        if (part.slice(0, index).trim() === name) {
+            const value = part.slice(index + 1).trim();
+            return value === "" ? null : value;
+        }
+    }
+    return null;
+}
+// Plaza's error shape: the sentence a person reads, and the reason as a code.
+function refuse(status, code, error) {
+    return new Response(JSON.stringify({ error, code }), {
+        status,
+        headers: { "Content-Type": "application/json", "Cache-Control": "no-store" }
+    });
+}

package/dist/chat/thread.d.ts ADDED Viewed

@@ -0,0 +1,27 @@
+export type ThreadMessage = {
+    readonly id: string;
+    readonly createdAt: string;
+    readonly updatedAt: string;
+};
+export type MessageCursor = {
+    readonly updatedAt: string;
+    readonly id: string;
+};
+/**
+ * Plaza's timestamps as milliseconds. They arrive as Postgres writes them
+ * ("2026-09-16 18:40:00.12+00"), which Safari will not parse, so they are put
+ * in ISO form first.
+ */
+export declare function toMillis(stamp: string): number;
+/**
+ * The newest `(updatedAt, id)` pair held. The id breaks ties so a limited batch
+ * can resume partway through a timestamp group without skipping the rest.
+ */
+export declare function latestMessageCursor(messages: readonly ThreadMessage[]): MessageCursor | undefined;
+/** The cursor to poll with: the newest pair, rewound past any row it could hide. */
+export declare function pollCursor(messages: readonly ThreadMessage[]): MessageCursor | undefined;
+/**
+ * Fold a batch into what is held: replace what is already there (an edit or a
+ * reaction), add the rest, and keep the thread in the order it was written.
+ */
+export declare function mergeMessages<T extends ThreadMessage>(existing: readonly T[], delta: readonly T[]): T[];

package/dist/chat/thread.js ADDED Viewed

@@ -0,0 +1,59 @@
+// How a chat keeps a thread current by polling: the cursor it asks from and how
+// a batch folds into what is on screen. Plaza's chat and the org-app widget
+// both poll Plaza this way.
+/**
+ * Plaza's timestamps as milliseconds. They arrive as Postgres writes them
+ * ("2026-09-16 18:40:00.12+00"), which Safari will not parse, so they are put
+ * in ISO form first.
+ */
+export function toMillis(stamp) {
+    const iso = stamp.replace(" ", "T").replace(/([+-]\d{2})$/, "$1:00");
+    const parsed = Date.parse(iso);
+    if (Number.isNaN(parsed)) {
+        throw new Error(`Unreadable timestamp: ${stamp}`);
+    }
+    return parsed;
+}
+/**
+ * The newest `(updatedAt, id)` pair held. The id breaks ties so a limited batch
+ * can resume partway through a timestamp group without skipping the rest.
+ */
+export function latestMessageCursor(messages) {
+    let cursor;
+    for (const message of messages) {
+        if (cursor === undefined ||
+            message.updatedAt > cursor.updatedAt ||
+            (message.updatedAt === cursor.updatedAt && message.id > cursor.id)) {
+            cursor = { updatedAt: message.updatedAt, id: message.id };
+        }
+    }
+    return cursor;
+}
+// A cursor of exactly the newest pair can skip a row forever. Writes stamp
+// `updatedAt` to the millisecond, so two can share one, and ids are random, so
+// the tiebreak is a coin flip; a commit that lands after the time it wrote
+// loses the same way. Rewinding re-reads a few rows the caller already holds,
+// and `mergeMessages` replaces by id, so that changes nothing.
+const POLL_OVERLAP_MS = 2_000;
+/** The cursor to poll with: the newest pair, rewound past any row it could hide. */
+export function pollCursor(messages) {
+    const latest = latestMessageCursor(messages);
+    if (latest === undefined)
+        return undefined;
+    const rewound = toMillis(latest.updatedAt) - POLL_OVERLAP_MS;
+    return { updatedAt: new Date(rewound).toISOString(), id: latest.id };
+}
+/**
+ * Fold a batch into what is held: replace what is already there (an edit or a
+ * reaction), add the rest, and keep the thread in the order it was written.
+ */
+export function mergeMessages(existing, delta) {
+    if (delta.length === 0) {
+        return [...existing];
+    }
+    const byId = new Map(existing.map((message) => [message.id, message]));
+    for (const message of delta) {
+        byId.set(message.id, message);
+    }
+    return [...byId.values()].sort((a, b) => toMillis(a.createdAt) - toMillis(b.createdAt) || a.id.localeCompare(b.id));
+}

package/dist/chat/ui/activity.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+import type { ActivityGroup } from "./types.js";
+/**
+ * The one progress indicator: what an agent is doing about a message while it
+ * works, and what it did once it is done. `avatar` is drawn when `showAgent`
+ * is set — a group chat, where more than one agent could be at work.
+ */
+export declare function ActivityCard({ group, showAgent, avatar }: {
+    readonly group: ActivityGroup;
+    readonly showAgent: boolean;
+    readonly avatar?: ReactNode;
+}): import("react").JSX.Element;

package/dist/chat/ui/activity.js ADDED Viewed

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Camera, Check, ChevronDown, ChevronUp, FileCode2, Globe2, Keyboard, LoaderCircle, Mail, MousePointer2, Search, Send, SquareCheckBig, TriangleAlert } from "lucide-react";
+/**
+ * The one progress indicator: what an agent is doing about a message while it
+ * works, and what it did once it is done. `avatar` is drawn when `showAgent`
+ * is set — a group chat, where more than one agent could be at work.
+ */
+export function ActivityCard({ group, showAgent, avatar }) {
+    const [expanded, setExpanded] = useState(false);
+    // Running with no steps yet is the queue, the runner boot and the first turn.
+    const running = group.status === "running";
+    const steps = running ? group.visibleSteps : group.steps;
+    const hiddenStepCount = running ? group.hiddenStepCount : 0;
+    const showHeader = running || showAgent || steps.length > 0;
+    const showSteps = running || expanded;
+    return (_jsxs("section", { "aria-label": `${group.agentName} activity: ${group.contextLabel}`, className: "mii-activity", role: running && !showAgent ? "status" : undefined, children: [showHeader ? (_jsxs("div", { className: "mii-activity-head", children: [showAgent ? (avatar) : (_jsx("span", { "aria-hidden": "true", className: "mii-activity-mark", "data-status": group.status, children: running ? _jsx(LoaderCircle, { className: "mii-spin", size: 13 }) : _jsx(Check, { size: 12, strokeWidth: 2.25 }) })), !running && steps.length > 0 ? (_jsxs("button", { type: "button", "aria-expanded": expanded, onClick: () => setExpanded((current) => !current), className: "mii-activity-toggle", children: [showAgent ? _jsx("span", { className: "mii-activity-agent", children: group.agentName }) : null, _jsx("span", { className: "mii-activity-label", children: group.contextLabel }), _jsxs("span", { className: "mii-activity-details", children: ["Details", expanded ? _jsx(ChevronUp, { size: 13 }) : _jsx(ChevronDown, { size: 13 })] })] })) : (_jsxs("div", { className: "mii-activity-title", children: [showAgent ? _jsx("span", { className: "mii-activity-agent", children: group.agentName }) : null, _jsx("span", { className: "mii-activity-label", children: group.contextLabel })] }))] })) : null, showSteps && steps.length > 0 ? (_jsxs("div", { className: "mii-steps", children: [hiddenStepCount > 0 ? _jsxs("p", { className: "mii-steps-hidden", children: [hiddenStepCount, " earlier actions"] }) : null, steps.map((event) => (_jsx(ActivityStep, { event: event }, event.id)))] })) : null, group.outcomes.length > 0 ? (_jsx("div", { className: "mii-outcomes", "data-spaced": showHeader, children: group.outcomes.map((event) => (_jsx(OutcomeRow, { event: event }, event.id))) })) : null] }));
+}
+function ActivityStep({ event }) {
+    return (_jsxs("div", { className: "mii-step", "data-status": event.status, children: [_jsx("span", { className: "mii-step-glyph", "aria-hidden": "true", children: _jsx(ActivityGlyph, { event: event }) }), _jsxs("div", { className: "mii-step-text", children: [_jsx("p", { children: event.summary }), event.detail.type === "files" && event.detail.paths.length > 0 ? (_jsx("div", { className: "mii-step-paths", children: event.detail.paths.slice(0, 3).map((path) => (_jsx("span", { children: path }, path))) })) : null] }), event.status === "running" ? _jsx("span", { "aria-hidden": "true", className: "mii-step-pulse" }) : null] }));
+}
+function ActivityGlyph({ event }) {
+    const props = { size: 11, strokeWidth: 1.9 };
+    switch (event.detail.type) {
+        case "browser":
+            switch (event.detail.action) {
+                case "navigate":
+                case "tabs":
+                    return _jsx(Globe2, { ...props });
+                case "inspect":
+                    return _jsx(Search, { ...props });
+                case "input":
+                    return _jsx(Keyboard, { ...props });
+                case "capture":
+                    return _jsx(Camera, { ...props });
+                case "interact":
+                    return _jsx(MousePointer2, { ...props });
+            }
+            return _jsx(Globe2, { ...props });
+        case "files":
+            return _jsx(FileCode2, { ...props });
+        case "web":
+            return _jsx(Search, { ...props });
+        case "verification":
+            return _jsx(SquareCheckBig, { ...props });
+        case "integration":
+            return _jsx(Globe2, { ...props });
+        default:
+            return _jsx(Check, { ...props });
+    }
+}
+function OutcomeRow({ event }) {
+    const [expanded, setExpanded] = useState(false);
+    const communication = event.detail.type === "communication" ? event.detail : null;
+    const canExpand = communication !== null && (communication.body !== undefined || communication.subject !== undefined);
+    return (_jsxs("div", { className: "mii-outcome", "data-status": event.status, children: [_jsxs("div", { className: "mii-outcome-row", children: [_jsx("span", { "aria-hidden": "true", className: "mii-outcome-mark", children: event.status === "failed" ? (_jsx(TriangleAlert, { size: 11 })) : communication?.channel === "email" ? (_jsx(Mail, { size: 11 })) : communication === null ? (_jsx(Check, { size: 11 })) : (_jsx(Send, { size: 11 })) }), _jsx("span", { className: "mii-outcome-summary", children: event.summary }), canExpand ? (_jsx("button", { type: "button", className: "mii-outcome-toggle", "aria-expanded": expanded, "aria-label": `${expanded ? "Hide" : "Show"} details for ${event.summary}`, onClick: () => setExpanded((current) => !current), children: expanded ? "Hide" : "View" })) : null] }), expanded && communication !== null ? (_jsxs("div", { className: "mii-outcome-detail", children: [communication.subject === undefined ? null : _jsx("p", { className: "mii-outcome-subject", children: communication.subject }), communication.body === undefined ? null : _jsx("p", { className: "mii-outcome-body", children: communication.body }), communication.attachments.length === 0 ? null : (_jsxs("p", { className: "mii-outcome-attached", children: ["Attached: ", communication.attachments.join(", ")] }))] })) : null] }));
+}

package/dist/chat/ui/attachments.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import type { ChatAttachment } from "./types.js";
+export type AttachmentKind = "image" | "video" | "file";
+export declare function attachmentKind(type: string): AttachmentKind;
+export declare function formatBytes(bytes: number | null | undefined): string;
+/** A message's files: images to open large, videos to play, documents to download. */
+export declare function MessageAttachments({ attachments, align }: {
+    readonly attachments: readonly ChatAttachment[];
+    readonly align?: "start" | "end";
+}): import("react").JSX.Element | null;

package/dist/chat/ui/attachments.js ADDED Viewed

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { FileText, X } from "lucide-react";
+export function attachmentKind(type) {
+    if (type.startsWith("image/"))
+        return "image";
+    if (type.startsWith("video/"))
+        return "video";
+    return "file";
+}
+export function formatBytes(bytes) {
+    if (bytes === null || bytes === undefined)
+        return "";
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${Math.round(bytes / 1024)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+/** A message's files: images to open large, videos to play, documents to download. */
+export function MessageAttachments({ attachments, align = "start" }) {
+    const [preview, setPreview] = useState(null);
+    if (attachments.length === 0) {
+        return null;
+    }
+    const images = attachments.filter((a) => attachmentKind(a.type) === "image");
+    const videos = attachments.filter((a) => attachmentKind(a.type) === "video");
+    const files = attachments.filter((a) => attachmentKind(a.type) === "file");
+    return (_jsxs("div", { className: "mii-attachments", "data-align": align, children: [images.length > 0 ? (_jsx("div", { className: "mii-images", "data-count": images.length === 1 ? "one" : "many", children: images.map((attachment, index) => (_jsx("button", { className: "mii-image", onClick: (event) => setPreview({ attachment, opener: event.currentTarget }), type: "button", "aria-label": `Open ${attachment.name ?? "image"}`, children: _jsx("img", { alt: attachment.name ?? "Image attachment", loading: "lazy", src: attachment.url, width: attachment.width ?? undefined, height: attachment.height ?? undefined }) }, `${attachment.url}-${index}`))) })) : null, videos.map((attachment, index) => (_jsx("video", { className: "mii-video", controls: true, preload: "metadata", children: _jsx("source", { src: attachment.url, type: attachment.type }) }, `${attachment.url}-${index}`))), files.map((attachment, index) => (_jsxs("a", { className: "mii-file", download: attachment.name ?? true, href: attachment.url, rel: "noopener noreferrer", target: "_blank", children: [_jsx(FileText, { "aria-hidden": "true", size: 16 }), _jsx("span", { className: "mii-file-name", children: attachment.name ?? "Document" }), attachment.sizeBytes ? _jsx("span", { className: "mii-file-size", children: formatBytes(attachment.sizeBytes) }) : null] }, `${attachment.url}-${index}`))), preview !== null ? (_jsx(Lightbox, { attachment: preview.attachment, opener: preview.opener, onClose: () => setPreview(null) })) : null] }));
+}
+// Escape closes the preview and nothing else: the chat around it may close on
+// Escape too. Focus stays in the preview while it is open and goes back to the
+// image it was opened from.
+function Lightbox({ attachment, opener, onClose }) {
+    const dialog = useRef(null);
+    useEffect(() => {
+        dialog.current?.focus();
+        return () => opener.focus();
+    }, [opener]);
+    return (_jsxs("div", { ref: dialog, className: "mii-lightbox", role: "dialog", "aria-modal": "true", "aria-label": attachment.name ?? "Image preview", tabIndex: -1, onClick: onClose, onKeyDown: (event) => {
+            if (event.key === "Escape") {
+                event.stopPropagation();
+                onClose();
+            }
+            else if (event.key === "Tab") {
+                event.preventDefault();
+                dialog.current?.querySelector(".mii-lightbox-close")?.focus();
+            }
+        }, children: [_jsx("button", { "aria-label": "Close preview", className: "mii-lightbox-close", onClick: onClose, type: "button", children: _jsx(X, { "aria-hidden": "true", size: 20 }) }), _jsx("img", { alt: attachment.name ?? "Image preview", onClick: (event) => event.stopPropagation(), src: attachment.url })] }));
+}

package/dist/chat/ui/index.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export { MessageBody, getCodeLanguage } from "./message-body.js";
+export { MessageAttachments, attachmentKind, formatBytes, type AttachmentKind } from "./attachments.js";
+export { ActivityCard } from "./activity.js";
+export { CHAT_UI_CSS } from "./styles.js";
+export type { ActivityDetail, ActivityEvent, ActivityGroup, ChatAttachment } from "./types.js";

package/dist/chat/ui/index.js ADDED Viewed

@@ -0,0 +1,6 @@
+// Chat pieces Plaza and the org-app widget share. Hosts set the variables
+// styles.ts lists; the stylesheet is CHAT_UI_CSS or `chat/ui.css`.
+export { MessageBody, getCodeLanguage } from "./message-body.js";
+export { MessageAttachments, attachmentKind, formatBytes } from "./attachments.js";
+export { ActivityCard } from "./activity.js";
+export { CHAT_UI_CSS } from "./styles.js";

package/dist/chat/ui/message-body.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+export declare function getCodeLanguage(className: string | undefined): string | null;
+/**
+ * An agent's message: markdown with tables, code and links, never raw HTML.
+ * The one renderer behind Plaza's chat and the chat in every org app.
+ */
+export declare const MessageBody: import("react").NamedExoticComponent<{
+    readonly body: string;
+}>;