@shubh90/app-runtime 0.4.1 → 0.6.0

package/dist/chat/widget/app.js

@@ -0,0 +1,304 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { avatarUrl } from "./api.js";
+import { readStorage, useMediaQuery, outgoing, useSeen, useStagedFiles, useThread, writeStorage } from "./hooks.js";
+import { ArrowUp, Sparkle, Check, ChevronDown, Close, Collapse, Expand, Paperclip } from "./icons.js";
+import { ActivityCard, MessageAttachments, MessageBody } from "../ui/index.js";
+import { toMillis } from "../thread.js";
+import { latestCreatedAt, unreadFrom } from "./thread.js";
+const AGENT_KEY = "mii-chat:agent";
+const OPEN_KEY = "mii-chat:open";
+export function ChatApp({ agents, brand }) {
+    const [agent, setAgent] = useState(() => {
+        const remembered = readStorage(AGENT_KEY);
+        return agents.agents.find((candidate) => candidate.id === remembered) ?? agents.agents[0];
+    });
+    const [open, setOpen] = useState(() => readSession(OPEN_KEY) === "1");
+    const [expanded, setExpanded] = useState(false);
+    const [picking, setPicking] = useState(false);
+    const mobile = useMediaQuery("(max-width: 640px)");
+    const thread = useThread(agent.id, open);
+    const [seen, markSeen] = useSeen(agent.id);
+    useEffect(() => {
+        writeSession(OPEN_KEY, open ? "1" : "0");
+    }, [open]);
+    // What is on screen while the panel is open has been seen. The first load
+    // ever marks the history seen, so only replies from here on badge.
+    useEffect(() => {
+        if (!thread.loaded)
+            return;
+        if (open || seen.kind === "never") {
+            markSeen(latestCreatedAt(thread.messages));
+        }
+    }, [open, thread.loaded, thread.messages, seen, markSeen]);
+    const unread = open ? [] : unreadFrom(thread.messages, agents.viewerId, seen);
+    const latestUnread = unread[unread.length - 1];
+    const choose = (next) => {
+        setAgent(next);
+        writeStorage(AGENT_KEY, next.id);
+        setPicking(false);
+    };
+    useBodyLock(open && mobile);
+    const viewport = useVisualViewport(open && mobile);
+    const brandStyle = {
+        ...(brand.brand === null ? {} : { "--brand": brand.brand }),
+        ...(brand.foreground === null ? {} : { "--brand-fg": brand.foreground })
+    };
+    return (_jsxs("div", { className: "root", style: brandStyle, "data-theme": brand.dark ? "dark" : "light", children: [!open && latestUnread !== undefined ? (_jsxs("button", { type: "button", className: "nudge", onClick: () => setOpen(true), children: [_jsx(Avatar, { agent: agent, size: 30 }), _jsxs("span", { children: [_jsx("span", { className: "who", children: agent.name }), _jsx("span", { className: "text", children: latestUnread.body || describeAttachments(latestUnread.attachments) })] })] })) : null, open ? (_jsx(Panel, { agents: agents, agent: agent, thread: thread, expanded: expanded, mobile: mobile, picking: picking, viewport: viewport, onPick: () => setPicking((value) => !value), onChoose: choose, onExpand: () => setExpanded((value) => !value), onClose: () => {
+                    setOpen(false);
+                    setPicking(false);
+                } })) : null, open && (mobile || expanded) ? null : (_jsxs("button", { type: "button", className: "launcher", "aria-label": open ? "Close chat" : "Chat with your agents", "aria-expanded": open, onClick: () => setOpen((value) => !value), children: [open ? (_jsx("span", { className: "chevron", children: _jsx(ChevronDown, { size: 26 }) })) : (_jsx(Sparkle, { size: 28 })), !open && unread.length > 0 ? _jsx("span", { className: "badge", children: unread.length }) : null] }))] }));
+}
+function Panel(props) {
+    const { agent, thread, mobile, expanded, picking } = props;
+    const staged = useStagedFiles();
+    const [draft, setDraft] = useState("");
+    const [dragging, setDragging] = useState(false);
+    const textarea = useRef(null);
+    useEffect(() => {
+        if (!mobile)
+            textarea.current?.focus();
+    }, [agent.id, mobile]);
+    useLayoutEffect(() => {
+        const element = textarea.current;
+        if (element === null)
+            return;
+        element.style.height = "auto";
+        element.style.height = `${element.scrollHeight}px`;
+    }, [draft]);
+    const next = outgoing(staged.files, draft);
+    const canSend = next !== null;
+    const submit = () => {
+        if (next === null)
+            return;
+        thread.send(next.body, next.attachments);
+        setDraft("");
+        staged.clear();
+    };
+    const onKeyDown = (event) => {
+        if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+            event.preventDefault();
+            submit();
+        }
+    };
+    const onPaste = (event) => {
+        const files = [...event.clipboardData.files];
+        if (files.length > 0) {
+            event.preventDefault();
+            staged.add(files);
+        }
+    };
+    const dropHandlers = {
+        onDragEnter: (event) => {
+            if (event.dataTransfer.types.includes("Files"))
+                setDragging(true);
+        },
+        onDragOver: (event) => {
+            if (event.dataTransfer.types.includes("Files"))
+                event.preventDefault();
+        },
+        onDragLeave: (event) => {
+            if (event.currentTarget === event.target)
+                setDragging(false);
+        },
+        onDrop: (event) => {
+            event.preventDefault();
+            setDragging(false);
+            staged.add([...event.dataTransfer.files]);
+        }
+    };
+    const className = ["panel", mobile ? "mobile" : expanded ? "expanded" : ""].join(" ").trim();
+    const style = props.viewport === null
+        ? undefined
+        : { height: `${props.viewport.height}px`, top: `${props.viewport.top}px`, bottom: "auto" };
+    return (_jsxs("section", { className: className, style: style, role: "dialog", "aria-label": `Chat with ${agent.name}`, onKeyDown: (event) => {
+            if (event.key === "Escape") {
+                event.stopPropagation();
+                if (picking)
+                    props.onPick();
+                else
+                    props.onClose();
+            }
+        }, ...dropHandlers, children: [_jsxs("header", { className: "header", children: [_jsxs("button", { type: "button", className: "agent-button", "aria-haspopup": "listbox", "aria-expanded": picking, onClick: props.onPick, children: [_jsx(Avatar, { agent: agent, size: 36 }), _jsxs("span", { className: "agent-name", children: [agent.name, _jsx(ChevronDown, { size: 16 })] })] }), mobile ? null : (_jsx("button", { type: "button", className: "icon-button", "aria-label": expanded ? "Shrink chat" : "Expand chat", onClick: props.onExpand, children: expanded ? _jsx(Collapse, { size: 17 }) : _jsx(Expand, { size: 17 }) })), _jsx("button", { type: "button", className: "icon-button", "aria-label": "Close chat", onClick: props.onClose, children: mobile ? _jsx(ChevronDown, { size: 20 }) : _jsx(Close, { size: 18 }) })] }), picking ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "picker-scrim", onClick: props.onPick }), _jsxs("div", { className: "picker", role: "listbox", "aria-label": "Choose an agent", children: [_jsx("div", { className: "picker-title", children: "Message an agent" }), props.agents.agents.map((candidate) => (_jsxs("button", { type: "button", role: "option", className: "option", "aria-selected": candidate.id === agent.id, onClick: () => props.onChoose(candidate), children: [_jsx(Avatar, { agent: candidate, size: 34 }), _jsxs("span", { className: "option-text", children: [_jsxs("span", { className: "option-name", children: [candidate.name, candidate.id === props.agents.agents[0].id ? _jsx("span", { className: "tag", children: "Default" }) : null] }), candidate.description ? (_jsx("span", { className: "option-description", children: candidate.description })) : null] }), candidate.id === agent.id ? _jsx(Check, { size: 18 }) : null] }, candidate.id)))] })] })) : null, _jsx(Thread, { agent: agent, viewerId: props.agents.viewerId, thread: thread }), thread.error !== null && thread.loaded ? _jsx("div", { className: "notice", children: thread.error }) : null, _jsxs("div", { className: "composer", children: [staged.files.map((file) => file.status === "failed" ? (_jsxs("div", { className: "upload-problem", role: "alert", children: [_jsx("strong", { children: file.name }), " ", file.problem, " Remove it to send."] }, file.localId)) : null), staged.files.length > 0 ? (_jsx("div", { className: "staged", children: staged.files.map((file) => file.preview !== null ? (_jsxs("span", { className: `thumb ${file.status}`, children: [_jsx("img", { src: file.preview, alt: file.name }), file.status === "uploading" ? _jsx("span", { className: "spinner", "aria-label": "Uploading" }) : null, _jsx("button", { type: "button", "aria-label": `Remove ${file.name}`, onClick: () => staged.remove(file.localId), children: _jsx(Close, { size: 11 }) })] }, file.localId)) : (_jsxs("span", { className: file.status === "failed" ? "chip failed" : "chip", children: [file.status === "uploading" ? _jsx("span", { className: "spinner", "aria-label": "Uploading" }) : null, _jsx("span", { children: file.name }), _jsx("button", { type: "button", "aria-label": `Remove ${file.name}`, onClick: () => staged.remove(file.localId), children: _jsx(Close, { size: 12 }) })] }, file.localId))) })) : null, _jsxs("div", { className: "box", children: [_jsxs("label", { className: "visually-hidden", htmlFor: "mii-chat-composer", children: ["Message ", agent.name] }), _jsx("textarea", { id: "mii-chat-composer", ref: textarea, rows: 1, placeholder: `Message ${agent.name}…`, value: draft, onChange: (event) => setDraft(event.target.value), onKeyDown: onKeyDown, onPaste: onPaste }), _jsx(FilePicker, { onPick: staged.add }), _jsx("button", { type: "button", className: "send", "aria-label": "Send", disabled: !canSend, onClick: submit, children: _jsx(ArrowUp, { size: 18 }) })] })] }), dragging ? _jsx("div", { className: "drop", children: "Drop to attach" }) : null] }));
+}
+function FilePicker({ onPick }) {
+    const input = useRef(null);
+    return (_jsxs(_Fragment, { children: [_jsx("input", { ref: input, type: "file", multiple: true, hidden: true, onChange: (event) => {
+                    onPick([...(event.target.files ?? [])]);
+                    event.target.value = "";
+                } }), _jsx("button", { type: "button", className: "icon-button", style: { width: 36, height: 36 }, "aria-label": "Attach files", onClick: () => input.current?.click(), children: _jsx(Paperclip, { size: 19 }) })] }));
+}
+function Thread({ agent, viewerId, thread }) {
+    const scroller = useRef(null);
+    const stick = useRef(true);
+    const items = useMemo(() => layout(thread.messages, thread.pending, viewerId), [thread.messages, thread.pending, viewerId]);
+    useLayoutEffect(() => {
+        const element = scroller.current;
+        if (element !== null && stick.current)
+            element.scrollTop = element.scrollHeight;
+    }, [items, thread.activity]);
+    const onScroll = useCallback(() => {
+        const element = scroller.current;
+        if (element === null)
+            return;
+        stick.current = element.scrollHeight - element.scrollTop - element.clientHeight < 80;
+    }, []);
+    return (_jsxs("div", { className: "thread", ref: scroller, onScroll: onScroll, "aria-live": "polite", "aria-busy": !thread.loaded, children: [!thread.loaded ? (_jsx("div", { className: "loading", children: thread.error === null ? _jsx("span", { className: "spinner", "aria-label": "Loading the conversation" }) : thread.error })) : null, thread.loaded && items.length === 0 ? (_jsxs("div", { className: "empty", children: [_jsx(Avatar, { agent: agent, size: 48 }), _jsxs("div", { className: "empty-title", children: ["Ask ", agent.name, " about this app"] }), _jsxs("div", { className: "empty-text", children: ["Report a bug, ask for a change, or ask how something works. It's the same conversation you have with", " ", agent.name, " in Plaza."] })] })) : null, items.map((item) => item.kind === "day" ? (_jsx("div", { className: "day", children: item.label }, item.key)) : (_jsx(MessageRow, { item: item, agent: agent, retry: thread.retry, discard: thread.discard }, item.key))), thread.activity !== null ? _jsx(ActivityCard, { group: thread.activity, showAgent: false }) : null] }));
+}
+function MessageRow({ item, agent, retry, discard }) {
+    const { message, mine } = item;
+    const pending = "localId" in message ? message : null;
+    const content = (_jsxs(_Fragment, { children: [_jsx(MessageAttachments, { attachments: message.attachments, align: mine ? "end" : "start" }), message.body.trim() !== "" ? (_jsx("div", { className: "bubble", children: mine ? _jsx("p", { children: message.body }) : _jsx(MessageBody, { body: message.body }) })) : null] }));
+    if (mine) {
+        return (_jsxs("div", { className: item.groupStart ? "row mine group-start" : "row mine", children: [content, pending?.status === "sending" ? _jsx("span", { className: "meta", children: "Sending\u2026" }) : null, pending?.status === "failed" ? (_jsxs("span", { className: "meta failed", children: [pending.problem, " \u00B7 ", _jsx("button", { type: "button", onClick: () => retry(pending.localId), children: "Retry" }), " \u00B7", " ", _jsx("button", { type: "button", onClick: () => discard(pending.localId), children: "Discard" })] })) : null, pending === null && item.groupEnd ? _jsx("span", { className: "meta", children: timeOf(message.createdAt) }) : null] }));
+    }
+    return (_jsxs("div", { className: item.groupStart ? "row theirs group-start" : "row theirs", children: [_jsx("span", { className: "avatar-slot", children: item.groupEnd ? _jsx(Avatar, { agent: agent, size: 26 }) : null }), _jsxs("div", { className: "stack", children: [content, item.groupEnd ? _jsx("span", { className: "meta", children: timeOf(message.createdAt) }) : null] })] }));
+}
+/** The face the agent wears in Plaza: its photo, or the one Plaza draws for it. */
+function Avatar({ agent, size }) {
+    const src = useAvatar(agent.id);
+    return (_jsx("span", { className: "avatar", style: { width: size, height: size }, "aria-hidden": "true", children: src === null ? null : _jsx("img", { src: src, alt: "", width: size, height: size }) }));
+}
+// Fetched rather than set as an <img> src: a Vite dev server — which is what an
+// agent's live copy of the app runs — answers image requests to unknown paths
+// itself, before they reach the app's routes. One fetch per agent per page.
+const avatars = new Map();
+function useAvatar(agentId) {
+    const [src, setSrc] = useState(null);
+    useEffect(() => {
+        let current = true;
+        let load = avatars.get(agentId);
+        if (load === undefined) {
+            load = fetch(avatarUrl(agentId), { credentials: "same-origin" }).then(async (response) => {
+                if (!response.ok)
+                    throw new Error(`avatar answered ${response.status}`);
+                return URL.createObjectURL(await response.blob());
+            });
+            avatars.set(agentId, load);
+            load.catch(() => avatars.delete(agentId));
+        }
+        load.then((url) => {
+            if (current)
+                setSrc(url);
+        }, (error) => console.error("mii-chat: couldn't load an avatar", error));
+        return () => {
+            current = false;
+        };
+    }, [agentId]);
+    return src;
+}
+// Messages from one sender within a few minutes of each other read as one
+// group: one avatar, one timestamp, at its end.
+const GROUP_GAP_MS = 5 * 60 * 1000;
+function layout(messages, pending, viewerId) {
+    const entries = [
+        ...messages.map((message) => ({ message, mine: message.fromMiiId === viewerId, at: toMillis(message.createdAt) })),
+        ...pending.map((message) => ({ message, mine: true, at: Date.now() }))
+    ];
+    const items = [];
+    let lastDay = "";
+    entries.forEach((entry, index) => {
+        const day = new Date(entry.at).toDateString();
+        if (day !== lastDay) {
+            items.push({ kind: "day", key: `day-${day}`, label: dayLabel(entry.at) });
+            lastDay = day;
+        }
+        const previous = entries[index - 1];
+        const next = entries[index + 1];
+        const joinsPrevious = previous !== undefined && previous.mine === entry.mine && entry.at - previous.at < GROUP_GAP_MS &&
+            new Date(previous.at).toDateString() === day;
+        const joinsNext = next !== undefined && next.mine === entry.mine && next.at - entry.at < GROUP_GAP_MS &&
+            new Date(next.at).toDateString() === day;
+        items.push({
+            kind: "message",
+            key: "localId" in entry.message ? entry.message.localId : entry.message.id,
+            mine: entry.mine,
+            groupStart: !joinsPrevious,
+            groupEnd: !joinsNext,
+            message: entry.message
+        });
+    });
+    return items;
+}
+function timeOf(stamp) {
+    return new Date(toMillis(stamp)).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+}
+function dayLabel(at) {
+    const date = new Date(at);
+    const today = new Date();
+    const yesterday = new Date(today);
+    yesterday.setDate(today.getDate() - 1);
+    if (date.toDateString() === today.toDateString())
+        return "Today";
+    if (date.toDateString() === yesterday.toDateString())
+        return "Yesterday";
+    return date.toLocaleDateString([], { month: "short", day: "numeric", year: date.getFullYear() === today.getFullYear() ? undefined : "numeric" });
+}
+function describeAttachments(attachments) {
+    if (attachments.length === 0)
+        return "";
+    return attachments.length === 1 ? `Sent ${attachments[0].name ?? "a file"}` : `Sent ${attachments.length} files`;
+}
+/**
+ * On a phone the chat fills the screen, and the page behind it must not scroll
+ * under a finger. iOS ignores overflow:hidden on body, so pin the body where it
+ * was and put it back on close.
+ */
+function useBodyLock(active) {
+    useEffect(() => {
+        if (!active)
+            return;
+        const { body } = document;
+        const scrollY = window.scrollY;
+        const previous = { position: body.style.position, top: body.style.top, width: body.style.width };
+        body.style.position = "fixed";
+        body.style.top = `-${scrollY}px`;
+        body.style.width = "100%";
+        return () => {
+            body.style.position = previous.position;
+            body.style.top = previous.top;
+            body.style.width = previous.width;
+            window.scrollTo(0, scrollY);
+        };
+    }, [active]);
+}
+/**
+ * iOS Safari does not resize the layout for the on-screen keyboard; it shrinks
+ * only the visual viewport, so a full-screen panel's composer ends up under the
+ * keyboard. Follow the visual viewport instead.
+ */
+function useVisualViewport(active) {
+    const [size, setSize] = useState(null);
+    useEffect(() => {
+        const viewport = window.visualViewport;
+        if (!active || viewport === null) {
+            setSize(null);
+            return;
+        }
+        const update = () => setSize({ height: viewport.height, top: viewport.offsetTop });
+        update();
+        viewport.addEventListener("resize", update);
+        viewport.addEventListener("scroll", update);
+        return () => {
+            viewport.removeEventListener("resize", update);
+            viewport.removeEventListener("scroll", update);
+        };
+    }, [active]);
+    return size;
+}
+function readSession(key) {
+    try {
+        return window.sessionStorage.getItem(key);
+    }
+    catch {
+        return null;
+    }
+}
+function writeSession(key, value) {
+    try {
+        window.sessionStorage.setItem(key, value);
+    }
+    catch {
+        // Storage blocked: the panel just starts closed after a reload.
+    }
+}

package/dist/chat/widget/hooks.d.ts

@@ -0,0 +1,86 @@
+import { type ChatAgents } from "./api.js";
+import { type ChatActivity, type ChatAttachment, type ChatMessage, type Seen } from "./thread.js";
+export declare const OPEN_POLL_MS = 3000;
+export declare const CLOSED_POLL_MS = 30000;
+export type AgentsState = {
+    readonly status: "loading";
+} | {
+    readonly status: "ready";
+    readonly data: ChatAgents;
+} | {
+    readonly status: "unavailable";
+};
+/**
+ * The org's agents. "unavailable" when this person has no chat here — signed
+ * out, removed from the org, or chat turned off for the app — in which case the
+ * widget shows nothing at all.
+ */
+export declare function useAgents(): AgentsState;
+/** 5s, 10s, 20s, 40s, then every minute. */
+export declare function agentsRetryDelay(attempt: number): number;
+export type PendingMessage = {
+    readonly localId: string;
+    /** Who it is for: a failed send stays with its agent while you look at another. */
+    readonly agentId: string;
+    readonly body: string;
+    readonly attachments: readonly ChatAttachment[];
+    readonly createdAt: string;
+} & ({
+    readonly status: "sending";
+}
+/** Why it failed, as Plaza put it. */
+ | {
+    readonly status: "failed";
+    readonly problem: string;
+});
+/** Signed out, or out of the org: polling again on a timer cannot change that. */
+export declare function endsPolling(error: unknown): boolean;
+export type ThreadState = {
+    readonly loaded: boolean;
+    readonly messages: readonly ChatMessage[];
+    readonly pending: readonly PendingMessage[];
+    readonly activity: ChatActivity | null;
+    readonly error: string | null;
+    send(body: string, attachments: readonly ChatAttachment[]): void;
+    retry(localId: string): void;
+    discard(localId: string): void;
+};
+export declare function useThread(agentId: string, open: boolean): ThreadState;
+export type StagedFile = {
+    readonly localId: string;
+    readonly name: string;
+    /** An image's own pixels, shown while it uploads and after. */
+    readonly preview: string | null;
+} & ({
+    readonly status: "uploading";
+} | {
+    readonly status: "ready";
+    readonly attachment: ChatAttachment;
+}
+/** Why it failed, as Plaza put it. */
+ | {
+    readonly status: "failed";
+    readonly problem: string;
+});
+/**
+ * What the next message would carry, or null when it cannot go yet: a file
+ * still uploading, or one that failed and has not been removed — a message is
+ * never sent quietly missing a file its author attached.
+ */
+export declare function outgoing(files: readonly StagedFile[], draft: string): {
+    readonly body: string;
+    readonly attachments: readonly ChatAttachment[];
+} | null;
+/** Files picked for the next message, uploaded the moment they are picked. */
+export declare function useStagedFiles(): {
+    readonly files: readonly StagedFile[];
+    add(files: readonly File[]): void;
+    remove(localId: string): void;
+    clear(): void;
+};
+/** "Seen up to" per agent, kept in this browser so the badge survives a reload. */
+export declare function useSeen(agentId: string): readonly [Seen, (at: string | null) => void];
+export declare function readStorage(key: string): string | null;
+export declare function writeStorage(key: string, value: string): void;
+/** Whether a CSS media query matches, kept current. */
+export declare function useMediaQuery(query: string): boolean;