@ciridae/ui 0.17.0 → 1.0.1

package/dist/components/activity-feed.js

@@ -0,0 +1,373 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CaretRightIcon, PaperclipIcon, TagIcon } from "@phosphor-icons/react";
+import { addDays, isSameDay, isThisYear } from "date-fns";
+import { Fragment, useRef, useState } from "react";
+import { css, cx } from "#primitives/css";
+import { parseMentions } from "../chat/contract.js";
+import { IconButton } from "./button.js";
+import { ChatComposer, ChatThread } from "./chat.js";
+import { Avatar } from "./data-display.js";
+import { Dropzone, DropzoneFileList, fileTypeIcon, useDropzonePicker } from "./dropzone.js";
+import { SegmentedControl, SegmentedOption } from "./form-layout.js";
+import { directional, icon } from "./icon.js";
+import { Toolbar } from "./layout.js";
+import { useCiridaeLocale } from "./locale.js";
+import { MentionChip, openMentionPicker, readMentions, } from "./mention-input.js";
+import { UserName } from "./user-chip.js";
+const FILTERS = [
+    { value: "all", label: "all", empty: "noActivity" },
+    { value: "comments", label: "comments", empty: "noComments" },
+    { value: "updates", label: "updates", empty: "noUpdates" },
+];
+/** More updates in a row than this fold into one line, unless only updates show. */
+const updatesShownInARow = 3;
+/** How many of a folded run's actors it names before "+N". */
+const actorsNamedInARun = 4;
+function passesFilter(item, filter) {
+    if (filter === "all")
+        return true;
+    return filter === "comments" ? item.kind === "comment" : item.kind === "update";
+}
+function dayLabel(at, now, locale) {
+    if (isSameDay(at, now))
+        return locale.labels.dates.today;
+    if (isSameDay(at, addDays(now, -1)))
+        return locale.labels.dates.yesterday;
+    return locale.formatDate(at, isThisYear(at)
+        ? { weekday: "short", month: "short", day: "numeric" }
+        : { year: "numeric", month: "short", day: "numeric" });
+}
+/** A label from the merged set; only the string ones are filter labels. */
+function filterText(labels, key) {
+    const value = labels[key];
+    return typeof value === "string" ? value : "";
+}
+// The thread scrolls under the host's header; its sides keep only a focus ring's reach. While
+// files are dragged over it, the whole feed highlights as the drop target.
+const feed = css({
+    display: "grid",
+    gap: "layout.controlGap",
+    minWidth: "0",
+    "& > [data-ciridae-ui]:first-child": {
+        paddingInline: "focus.ringReach",
+        paddingBlock: "none",
+    },
+    "&[data-dragging]": { borderRadius: "action" },
+});
+const dayLine = css({
+    display: "block",
+    paddingTop: "layout.controlGap",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+});
+const commentBody = css({ whiteSpace: "pre-wrap" });
+// The actor's mark and name lead the sentence at the line's size.
+const updateLine = css({
+    display: "block",
+    color: "fg.muted",
+    "& > [data-ciridae-ui]": {
+        marginInlineEnd: "control.iconGap",
+        verticalAlign: "middle",
+    },
+    "& > [data-name]": { color: "fg.secondary", fontWeight: "medium" },
+});
+const updateDetail = css({ display: "block", color: "fg.muted" });
+const updateRun = css({
+    display: "grid",
+    gridTemplateColumns: "minmax(0, 1fr)",
+    justifyItems: "center",
+    gap: "layout.tightGap",
+    maxWidth: "100%",
+});
+// The actors give way to an ellipsis before the count does.
+const runToggle = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "layout.tightGap",
+    maxWidth: "100%",
+    padding: "none",
+    border: "0",
+    background: "transparent",
+    color: "fg.muted",
+    font: "inherit",
+    cursor: "pointer",
+    _hover: { color: "fg.primary" },
+    _focusVisible: { focusRing: "outer" },
+    "& > svg": { transition: "rotate 120ms ease" },
+    "&[aria-expanded=true] > svg": { rotate: "90deg", _rtl: { rotate: "-90deg" } },
+    "& > [data-actors]": { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+    "& > [data-count]": { flexShrink: "0", whiteSpace: "nowrap" },
+});
+const empty = css({
+    padding: "panel.default",
+    color: "fg.muted",
+    fontSize: "caption",
+    fontWeight: "medium",
+    textAlign: "center",
+});
+/*
+ * A file in a comment: a small square-cornered chip on the card's face, so it reads the same on
+ * either side's bubble.
+ */
+const chip = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "layout.tightGap",
+    maxWidth: "100%",
+    minWidth: "0",
+    paddingBlock: "control.trackInset",
+    paddingInline: "control.iconGap",
+    border: "1px solid token(colors.border.subtle)",
+    borderRadius: "control",
+    background: "bg.card",
+    color: "fg.primary",
+    fontFamily: "sans",
+    fontSize: "code",
+    fontWeight: "medium",
+    lineHeight: "tight",
+    letterSpacing: "compact",
+    textDecoration: "none",
+    whiteSpace: "nowrap",
+    "& > svg": { flexShrink: "0", fontSize: "icon.compact", color: "fg.muted" },
+    "& > [data-label]": { minWidth: "0", overflow: "hidden", textOverflow: "ellipsis" },
+    "& > [data-size]": { color: "fg.muted", fontVariantNumeric: "tabular-nums" },
+    "&[href]": { cursor: "pointer", _hover: { borderColor: "border.control" } },
+    _focusVisible: { focusRing: "outer" },
+});
+/* The tags and files under a comment's text. */
+const commentExtras = css({
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "flex-end",
+    gap: "layout.tightGap",
+    marginBlockStart: "layout.tightGap",
+    whiteSpace: "normal",
+});
+const thumbnail = css({
+    display: "block",
+    borderRadius: "control",
+    overflow: "hidden",
+    _focusVisible: { focusRing: "outer" },
+    "& img": {
+        display: "block",
+        maxWidth: "100%",
+        width: "auto",
+        height: "skeleton.medium",
+        objectFit: "cover",
+    },
+});
+export function ActivityFeed({ items, filter = "all", onComment, tagOptions = [], placeholder, now = Date.now(), labels: ownLabels, composerRef, }) {
+    const locale = useCiridaeLocale();
+    const labels = { ...locale.labels.activity, ...ownLabels };
+    const shown = items
+        .filter((item) => passesFilter(item, filter))
+        .sort((earlier, later) => earlier.at - later.at);
+    const [openRunIds, setOpenRunIds] = useState(new Set());
+    const [files, setFiles] = useState([]);
+    const toggleRun = (id) => setOpenRunIds((current) => {
+        const next = new Set(current);
+        if (!next.delete(id))
+            next.add(id);
+        return next;
+    });
+    const entries = threadEntries(shown, {
+        now,
+        locale,
+        labels,
+        foldRuns: filter !== "updates",
+        tagOptions,
+        openRunIds,
+        toggleRun,
+    });
+    return (_jsxs(Dropzone, { className: feed, "data-ciridae-ui": "", disabled: !onComment, onFiles: (added) => setFiles((current) => [...current, ...added]), children: [shown.length === 0 ? (_jsx("span", { className: empty, children: filterText(labels, FILTERS.find((option) => option.value === filter)?.empty ?? "noActivity") })) : (_jsx(ChatThread, { entries: entries, formatTime: (at) => locale.formatTime(at) })), onComment && (_jsx(CommentComposer, { fieldRef: composerRef, labels: labels, placeholder: placeholder ?? labels.comment, tagOptions: tagOptions, files: files, onRemoveFile: (file) => setFiles((current) => current.filter((held) => held !== file)), onPost: (body, tags) => {
+                    onComment({ body, files: [...files], tags });
+                    setFiles([]);
+                } }))] }));
+}
+/** The tags `@` (people and agents) or `#` (records) offer for what is typed after it. */
+function tagTrigger(char, tagOptions) {
+    return {
+        char,
+        options: (query) => tagOptions.filter((tag) => (char === "#") === (tag.kind === "record") &&
+            tag.label.toLowerCase().includes(query.trim().toLowerCase())),
+    };
+}
+/** The tag a mention names, from the tags at hand; one no longer offered keeps its label. */
+function tagOfMention(mention, tags) {
+    return (tags.find((tag) => tag.id === mention.id && tag.kind === mention.kind) ?? {
+        id: mention.id,
+        kind: mention.kind === "person" || mention.kind === "agent" ? mention.kind : "record",
+        label: mention.label,
+    });
+}
+/*
+ * The comment field: the files waiting above it, and its mentions as chips in its text, picked
+ * from `tagOptions` when `@` or `#` is typed at the caret or the Tag button types `@` there.
+ */
+function CommentComposer({ fieldRef, labels, placeholder, tagOptions, files, onRemoveFile, onPost, }) {
+    const [value, setValue] = useState("");
+    const ownField = useRef(null);
+    const field = fieldRef ?? ownField;
+    const picker = useDropzonePicker();
+    const attachFiles = useCiridaeLocale().labels.dropzone.attachFiles;
+    const tagging = tagOptions.length > 0;
+    return (_jsx(ChatComposer, { variant: "feed", placeholder: placeholder, ariaLabel: labels.comment, submitLabel: labels.postComment, value: value, onValueChange: setValue, onSend: (body) => {
+            const tags = readMentions(body)
+                .mentions.map((mention) => tagOfMention(mention, tagOptions))
+                .filter((tag, index, all) => all.findIndex((other) => other.id === tag.id) === index);
+            onPost(body.trim(), tags);
+        }, sendsWithoutText: files.length > 0, attachments: files.length > 0 && (_jsx(DropzoneFileList, { variant: "chips", files: files, onRemove: onRemoveFile })), mentions: tagging ? [tagTrigger("@", tagOptions), tagTrigger("#", tagOptions)] : undefined, mentionMark: (mention, place) => (_jsx(TagMark, { tag: tagOfMention(mention, tagOptions), size: place === "chip" ? "micro" : "small" })), mentionsLabel: labels.tags, inputProps: { ref: field }, tools: _jsxs(_Fragment, { children: [_jsx(IconButton, { "aria-label": attachFiles, size: "compact", variant: "ghost", disabled: picker.disabled, onClick: picker.openPicker, children: _jsx(PaperclipIcon, { className: icon({ size: "small" }) }) }), tagging && (_jsx(IconButton, { "aria-label": labels.tag, size: "compact", variant: "ghost", 
+                    // Keeps the caret in the field, so the tag goes in where it is.
+                    onMouseDown: (event) => event.preventDefault(), onClick: () => openMentionPicker(field.current, "@"), children: _jsx(TagIcon, { className: icon({ size: "small" }) }) }))] }) }));
+}
+/** A person's or agent's avatar, or a record's icon. */
+function TagMark({ tag, size }) {
+    if (tag.kind === "record")
+        return tag.icon ?? null;
+    return (_jsx(Avatar, { label: tag.label, kind: tag.kind === "agent" ? "agent" : "user", src: tag.src, size: size, "aria-hidden": "true" }));
+}
+/** A tag as a chip, led by its mark; a link with an `href`. */
+function TagChip({ tag }) {
+    return _jsx(MentionChip, { mention: tag, mark: _jsx(TagMark, { tag: tag, size: "micro" }), href: tag.href });
+}
+/** A comment's text with its mentions as chips, each the tag it names. */
+function CommentText({ text, tags }) {
+    return parseMentions(text).map((part, index) => typeof part === "string" ? (_jsx(Fragment, { children: part }, index)) : (_jsx(TagChip, { tag: tagOfMention(part, tags) }, index)));
+}
+/**
+ * The tags its text does not already show and the files under a comment: images as thumbnails,
+ * other files as chips.
+ */
+function CommentExtras({ comment }) {
+    const inText = typeof comment.body === "string" ? readMentions(comment.body).mentions : [];
+    const tags = (comment.tags ?? []).filter((tag) => !inText.some((mention) => mention.id === tag.id && mention.kind === tag.kind));
+    const attachments = comment.attachments ?? [];
+    if (tags.length === 0 && attachments.length === 0)
+        return null;
+    return (_jsxs("span", { className: commentExtras, children: [tags.map((tag) => (_jsx(TagChip, { tag: tag }, tag.id))), attachments.map((attachment) => attachment.url && attachment.type?.startsWith("image/") ? (_jsx("a", { className: thumbnail, href: attachment.url, target: "_blank", rel: "noreferrer", children: _jsx("img", { src: attachment.url, alt: attachment.name }) }, attachment.id)) : (_jsx(FileChip, { attachment: attachment }, attachment.id)))] }));
+}
+function FileChip({ attachment }) {
+    const { formatFileSize } = useCiridaeLocale();
+    const content = (_jsxs(_Fragment, { children: [fileTypeIcon({ name: attachment.name, type: attachment.type ?? "" }), _jsx("span", { "data-label": "", children: attachment.name }), attachment.size !== undefined && _jsx("span", { "data-size": "", children: formatFileSize(attachment.size) })] }));
+    return attachment.url ? (_jsx("a", { className: chip, href: attachment.url, target: "_blank", rel: "noreferrer", download: attachment.name, children: content })) : (_jsx("span", { className: chip, children: content }));
+}
+function groupUpdates(updates) {
+    const groups = [];
+    for (const update of updates) {
+        const last = groups[groups.length - 1];
+        if (last && last.actor.name === update.actor.name && isSameDay(last.at, update.at)) {
+            last.updates.push(update);
+            last.at = update.at;
+        }
+        else {
+            groups.push({ id: update.id, at: update.at, actor: update.actor, updates: [update] });
+        }
+    }
+    return groups;
+}
+/** "Dana Ruiz, County inspector, Aron Asriyan, Sable +2": who acted in a run, in order. */
+function runActors(updates, labels, separator) {
+    const names = updates
+        .map((update) => update.actor.name)
+        .filter((name, index, all) => all.indexOf(name) === index);
+    return labels.runActors(names.slice(0, actorsNamedInARun).join(separator), Math.max(0, names.length - actorsNamedInARun));
+}
+/*
+ * The comments as messages and the updates as lines under day labels. A run of updates between
+ * comments folds into one line under its first day, even across days; opened, it labels the
+ * days in it, and the next comment labels its own day unless the run ended on it. An open run
+ * stays one entry, so opening it leaves the thread's scroll where it is.
+ */
+function threadEntries(items, { now, locale, labels, foldRuns, tagOptions, openRunIds, toggleRun, }) {
+    const entries = [];
+    let labeledDay;
+    /** The day's label when it is not the one already showing. */
+    const newDayLabel = (at) => {
+        const label = dayLabel(at, now, locale);
+        if (label === labeledDay)
+            return undefined;
+        labeledDay = label;
+        return label;
+    };
+    const labelDay = (at) => {
+        const label = newDayLabel(at);
+        if (label) {
+            entries.push({
+                kind: "line",
+                id: `day-${label}`,
+                at,
+                text: _jsx("span", { className: dayLine, children: label }),
+            });
+        }
+    };
+    let run = [];
+    const endRun = () => {
+        const first = run[0];
+        const groups = groupUpdates(run);
+        if (first && foldRuns && run.length > updatesShownInARow) {
+            const id = `run-${first.id}`;
+            const open = openRunIds.has(id);
+            labelDay(first.at);
+            entries.push({
+                kind: "line",
+                id,
+                at: first.at,
+                text: (_jsxs("span", { className: updateRun, children: [_jsxs("button", { type: "button", className: runToggle, "aria-expanded": open, onClick: () => toggleRun(id), children: [_jsx(CaretRightIcon, { className: cx(icon({ size: "compact" }), directional) }), _jsx("span", { "data-actors": "", children: runActors(run, labels, locale.labels.common.listSeparator) }), _jsxs("span", { "data-count": "", children: ["\u00B7 ", labels.updateCount(run.length)] })] }), open &&
+                            groups.map((group) => {
+                                const label = newDayLabel(group.updates[0]?.at ?? group.at);
+                                return (_jsxs(Fragment, { children: [label && _jsx("span", { className: dayLine, children: label }), _jsx(UpdateLine, { group: group, labels: labels })] }, group.id));
+                            })] })),
+            });
+        }
+        else {
+            for (const group of groups) {
+                labelDay(group.updates[0]?.at ?? group.at);
+                entries.push({
+                    kind: "line",
+                    id: group.id,
+                    at: group.at,
+                    text: _jsx(UpdateLine, { group: group, labels: labels }),
+                });
+            }
+        }
+        run = [];
+    };
+    for (const item of items) {
+        if (item.kind === "update") {
+            run.push(item);
+            continue;
+        }
+        endRun();
+        labelDay(item.at);
+        entries.push({
+            kind: "message",
+            id: item.id,
+            at: item.at,
+            side: item.fromViewer ? "user" : "assistant",
+            author: {
+                name: item.actor.name,
+                kind: item.actor.kind,
+                src: item.actor.src,
+                label: _jsx(UserName, { ...item.actor }),
+            },
+            body: (_jsxs(_Fragment, { children: [_jsx("span", { className: commentBody, children: typeof item.body === "string" ? (_jsx(CommentText, { text: item.body, tags: [...(item.tags ?? []), ...tagOptions] })) : (item.body) }), _jsx(CommentExtras, { comment: item })] })),
+        });
+    }
+    endRun();
+    return entries;
+}
+/** The actor, what they did comma-separated, and the time of the last of it. */
+function UpdateLine({ group, labels }) {
+    const { actor, updates } = group;
+    const locale = useCiridaeLocale();
+    return (_jsxs("span", { className: updateLine, children: [labels.updateLine({
+                actor: (_jsxs(_Fragment, { children: [_jsx(Avatar, { label: actor.name, kind: actor.kind, src: actor.src, icon: actor.icon, size: "mark", "aria-hidden": "true" }), _jsx(UserName, { ...actor })] })),
+                actions: locale.formatList(updates.map((update) => update.text)),
+                time: (_jsx("time", { dateTime: new Date(group.at).toISOString(), title: locale.formatDateTime(group.at), children: locale.formatTime(group.at) })),
+            }), updates.map((update) => update.detail && (_jsx("span", { className: updateDetail, children: update.detail }, update.id)))] }));
+}
+/** All, Comments or Updates, as a compact segmented control. */
+export function ActivityFeedFilter({ value, onValueChange, labels: ownLabels, }) {
+    const labels = { ...useCiridaeLocale().labels.activity, ...ownLabels };
+    return (_jsx(Toolbar, { children: _jsx(SegmentedControl, { role: "group", "aria-label": labels.show, children: FILTERS.map((option) => (_jsx(SegmentedOption, { selected: option.value === value, onClick: () => onValueChange(option.value), children: filterText(labels, option.label) }, option.value))) }) }));
+}

package/dist/components/agent-work.d.ts

@@ -0,0 +1,76 @@
+import { type ReactNode } from "react";
+import type { ApprovalDecision } from "../chat/contract.js";
+/** What a waiting task needs from the user: an approval, or a question with its answers. */
+export type AgentTaskAsk = {
+    askedAt: string;
+    text: string;
+} & ({
+    kind: "approval";
+    details?: readonly {
+        label: string;
+        value: string;
+    }[];
+} | {
+    kind: "question";
+    options: readonly {
+        label: string;
+        description?: string;
+    }[];
+});
+/** The user's answer to a waiting task. */
+export type AgentTaskReply = {
+    kind: "decision";
+    decision: ApprovalDecision;
+} | {
+    kind: "answer";
+    answer: string;
+};
+/** A piece of work the main agent runs on its own. */
+export type AgentTask = {
+    id: string;
+    /** What it is, as the list of what waits on the user names it. */
+    title: string;
+    status: "running" | "waiting" | "done" | "failed";
+    startedAt: string;
+    finishedAt?: string;
+    /** What the agent is doing now, as one phrase, while it runs; the title otherwise. */
+    activity?: string;
+    /** The agent's word on how it went, posted as its reply once done or failed. */
+    summary?: string;
+    /** What it waits on the user for, while `waiting`. */
+    ask?: AgentTaskAsk;
+};
+/** The id of a waiting task's ask in the thread. */
+export declare function agentTaskAnchorId(taskId: string): string;
+/** Scrolls a waiting task's ask into view and marks it for a moment. */
+export declare function jumpToAgentTask(task: AgentTask): void;
+export type AgentWorkProps = {
+    tasks: readonly AgentTask[];
+    /** `column` beside the thread; `summary` one line over the thread that opens the list. */
+    layout?: "column" | "summary";
+    /**
+     * Called as a waiting task is picked in place of the jump to its ask, such as to close a
+     * drawer first and call `jumpToAgentTask` once it has.
+     */
+    onTaskSelect?: (task: AgentTask) => void;
+    className?: string;
+};
+/** What the agent is doing now and what waits on the user; nothing when neither. */
+export declare function AgentWork({ tasks, layout, onTaskSelect, className }: AgentWorkProps): import("@types/react").JSX.Element | null;
+export type AgentWorkButtonProps = {
+    tasks: readonly AgentTask[];
+    /** The drawer's title, such as the agent's name. */
+    title: ReactNode;
+    className?: string;
+};
+/**
+ * The agent's work as a header icon button, such as on a phone: spinning while it works, with a
+ * dot while something waits on the user, over a drawer with the column.
+ */
+export declare function AgentWorkButton({ tasks, title, className }: AgentWorkButtonProps): import("@types/react").JSX.Element | null;
+export type AgentTaskCardProps = {
+    task: AgentTask;
+    onReply?: (task: AgentTask, reply: AgentTaskReply) => void;
+};
+/** The agent asking: a waiting task's question, its details, and Deny / Approve or the answers. */
+export declare function AgentTaskCard({ task, onReply }: AgentTaskCardProps): import("@types/react").JSX.Element | null;