@ciridae/ui 0.17.0 → 1.0.1

package/dist/chat/fetch-new-conversation-items.js

@@ -0,0 +1,38 @@
+import { chatQueryKeys } from "./chat-query-keys.js";
+/**
+ * Fetches the items after the newest cached one, following `has_more`, and returns the cached
+ * items with them merged in seq order. An empty cache fetches the whole conversation. A user
+ * message of the newest response that the assistant has not read yet is fetched again, so its
+ * `read_at` arrives.
+ */
+export async function fetchNewConversationItems(queryClient, client, conversationId) {
+    const cachedItems = queryClient.getQueryData(chatQueryKeys.conversationItems(client, conversationId)) ?? [];
+    const fetchedItems = [];
+    const newestItem = cachedItems[cachedItems.length - 1];
+    const oldestUnreadMessage = cachedItems.find((item) => item.type === "message" &&
+        item.role === "user" &&
+        !item.read_at &&
+        item.response_id === newestItem?.response_id);
+    let afterSeq = oldestUnreadMessage === undefined
+        ? newestItem?.seq
+        : oldestUnreadMessage.seq > 0
+            ? oldestUnreadMessage.seq - 1
+            : undefined;
+    for (;;) {
+        const page = await client.listItems(conversationId, { after: afterSeq });
+        fetchedItems.push(...page.data);
+        const lastItem = page.data[page.data.length - 1];
+        if (!page.has_more || !lastItem)
+            break;
+        afterSeq = lastItem.seq;
+    }
+    // Merge into the cache as it is now rather than as it was when the fetch started, so a change
+    // made meanwhile, such as an approval's decision, is not overwritten with the older copy.
+    const latestCachedItems = queryClient.getQueryData(chatQueryKeys.conversationItems(client, conversationId)) ?? [];
+    if (fetchedItems.length === 0)
+        return latestCachedItems;
+    const itemsById = new Map(latestCachedItems.map((item) => [item.id, item]));
+    for (const item of fetchedItems)
+        itemsById.set(item.id, item);
+    return [...itemsById.values()].sort((first, second) => first.seq - second.seq);
+}

package/dist/chat/message-group-position.d.ts

@@ -0,0 +1,17 @@
+export type MessageSide = "user" | "assistant";
+/** Where a message sits in its group of close messages from one author. */
+export type MessageGroupPosition = "single" | "first" | "middle" | "last";
+/**
+ * What grouping needs from an entry in the thread; a line between bubbles has no side. Two
+ * authors on one side, such as two people replying, start separate groups.
+ */
+export type GroupableEntry = {
+    side: MessageSide | null;
+    at: number;
+    author?: string;
+};
+/**
+ * The position of each entry in its group, which sets its bubble corners, and where its avatar
+ * and time show. Anything without a side, such as a centered line, ends the group before it.
+ */
+export declare function listMessageGroupPositions(entries: readonly GroupableEntry[]): (MessageGroupPosition | null)[];

package/dist/chat/message-group-position.js

@@ -0,0 +1,25 @@
+/** Messages from one author sent within this long of each other read as one group. */
+const messageGroupWindowMs = 30 * 60 * 1000;
+/**
+ * The position of each entry in its group, which sets its bubble corners, and where its avatar
+ * and time show. Anything without a side, such as a centered line, ends the group before it.
+ */
+export function listMessageGroupPositions(entries) {
+    return entries.map((entry, index) => {
+        if (entry.side === null)
+            return null;
+        const previous = entries[index - 1];
+        const next = entries[index + 1];
+        const continuing = previous !== undefined && isSameGroup(previous, entry);
+        const continued = next !== undefined && isSameGroup(entry, next);
+        if (continuing)
+            return continued ? "middle" : "last";
+        return continued ? "first" : "single";
+    });
+}
+function isSameGroup(earlier, later) {
+    return (earlier.side !== null &&
+        earlier.side === later.side &&
+        earlier.author === later.author &&
+        later.at - earlier.at < messageGroupWindowMs);
+}

package/dist/chat/message-text.d.ts

@@ -0,0 +1,23 @@
+import { type Mention } from "./contract.js";
+/** A source a reply cites, from a Markdown link reference definition. */
+export type MessageSource = {
+    id: string;
+    href: string;
+    label: string;
+};
+/** The reply's text without its link reference definitions, and those definitions as sources. */
+export declare function splitSources(content: string): {
+    body: string;
+    sources: MessageSource[];
+};
+export type MessageTextProps = {
+    content: string;
+    /** Makes each mention a button that hands the mention to the page. */
+    onMentionSelect?: (mention: Mention) => void;
+    /** Makes a mention a link, such as to its record's page; undefined leaves it to `onMentionSelect`. */
+    mentionHref?: (mention: Mention) => string | undefined;
+    /** The text as typed, such as the user's own message: only its mentions draw, as chips. */
+    plain?: boolean;
+    className?: string;
+};
+export declare function MessageText({ content, onMentionSelect, mentionHref, plain, className, }: MessageTextProps): import("@types/react").JSX.Element;

package/dist/chat/message-text.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { css, cx } from "#primitives/css";
+import { parseMentions } from "./contract.js";
+/*
+ * A reply's text as the agent writes it: paragraphs split by blank lines, `- ` lists, **bold**,
+ * `code`, [links](url), and mentions as chips. Enough for the agent sheet's short answers without
+ * a Markdown dependency; a full renderer can replace this when replies carry more than that.
+ * Markdown link reference definitions (`[1]: url "Title"`) draw nothing in place; `splitSources`
+ * lifts them out as the reply's sources.
+ */
+// Sized by the bubble it sits in.
+const text = css({
+    display: "grid",
+    gap: "control.iconGap",
+    minWidth: "0",
+    overflowWrap: "anywhere",
+    "& p, & ul": { margin: "none" },
+    "& ul": { paddingInlineStart: "layout.clusterGap" },
+    "& code": { fontFamily: "mono", fontSize: "code" },
+    "& a:not([data-mention])": { color: "inherit", textDecoration: "underline" },
+});
+const mention = css({
+    display: "inline-flex",
+    alignItems: "center",
+    maxWidth: "100%",
+    paddingInline: "control.iconGap",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "keycap",
+    background: "bg.raised",
+    color: "fg.primary",
+    font: "inherit",
+    fontSize: "code",
+    lineHeight: "compact",
+    textDecoration: "none",
+    verticalAlign: "baseline",
+    cursor: "default",
+    "&:is(button, a)": { cursor: "pointer", _hover: { background: "bg.raisedHover" } },
+});
+const inlinePattern = /(\*\*[^*]+\*\*|`[^`]+`|\[[^[\]@][^[\]]*\]\([^)\s]+\))/;
+const linkPattern = /^\[([^\]]+)\]\(([^)\s]+)\)$/;
+const sourcePattern = /^\s*\[([^\]]+)\]:\s*(\S+)(?:\s+"([^"]*)")?\s*$/;
+/** The reply's text without its link reference definitions, and those definitions as sources. */
+export function splitSources(content) {
+    const sources = [];
+    const body = content
+        .split("\n")
+        .filter((line) => {
+        const match = sourcePattern.exec(line);
+        if (!match)
+            return true;
+        const [, id = "", href = "", title] = match;
+        sources.push({ id, href, label: title ?? id });
+        return false;
+    })
+        .join("\n")
+        .trim();
+    return { body, sources };
+}
+// On the user's own bubble a mention takes the bubble's ink: weight marks it, not a chip face.
+const plainText = css({
+    display: "block",
+    whiteSpace: "pre-wrap",
+    "& > :is(a, button, span)": {
+        paddingInline: "none",
+        border: "0",
+        background: "transparent",
+        color: "inherit",
+        fontSize: "inherit",
+        fontWeight: "semibold",
+        _hover: { background: "transparent", textDecoration: "underline" },
+    },
+});
+export function MessageText({ content, onMentionSelect, mentionHref, plain = false, className, }) {
+    if (plain) {
+        return (_jsx("div", { className: cx(text, plainText, className), "data-ciridae-ui": "", children: parseMentions(content).map((part, index) => typeof part === "string" ? part : renderMention(part, index, onMentionSelect, mentionHref)) }));
+    }
+    const blocks = splitSources(content)
+        .body.split(/\n\s*\n/)
+        .filter((block) => block.trim().length > 0);
+    const inline = (line) => renderInline(line, onMentionSelect, mentionHref);
+    return (_jsx("div", { className: cx(text, className), "data-ciridae-ui": "", children: blocks.map((block, blockIndex) => {
+            const lines = block.split("\n");
+            if (lines.every((line) => /^\s*[-*] /.test(line))) {
+                return (_jsx("ul", { children: lines.map((line, lineIndex) => (_jsx("li", { children: inline(line.replace(/^\s*[-*] /, "")) }, lineIndex))) }, blockIndex));
+            }
+            return (_jsx("p", { children: lines.map((line, lineIndex) => (_jsxs(Fragment, { children: [lineIndex > 0 && _jsx("br", {}), inline(line)] }, lineIndex))) }, blockIndex));
+        }) }));
+}
+/** A mention as a chip: a link with `mentionHref`, a button with `onMentionSelect`, else a label. */
+function renderMention(part, key, onMentionSelect, mentionHref) {
+    const href = mentionHref?.(part);
+    if (href) {
+        return (_jsx("a", { href: href, className: mention, "data-ciridae-ui": "", "data-mention": "", children: part.label }, key));
+    }
+    return onMentionSelect ? (_jsx("button", { type: "button", className: mention, "data-ciridae-ui": "", onClick: () => onMentionSelect(part), children: part.label }, key)) : (_jsx("span", { className: mention, "data-ciridae-ui": "", children: part.label }, key));
+}
+function renderInline(line, onMentionSelect, mentionHref) {
+    return parseMentions(line).map((part, partIndex) => {
+        if (typeof part !== "string")
+            return renderMention(part, partIndex, onMentionSelect, mentionHref);
+        return part.split(inlinePattern).map((run, runIndex) => {
+            const key = `${partIndex}-${runIndex}`;
+            if (run.startsWith("**") && run.endsWith("**")) {
+                return _jsx("strong", { children: run.slice(2, -2) }, key);
+            }
+            if (run.startsWith("`") && run.endsWith("`"))
+                return _jsx("code", { children: run.slice(1, -1) }, key);
+            const link = linkPattern.exec(run);
+            if (link) {
+                const [, label, href] = link;
+                const external = /^[a-z][a-z\d+.-]*:/i.test(href ?? "");
+                return (_jsx("a", { href: href, target: external ? "_blank" : undefined, rel: external ? "noreferrer" : undefined, children: label }, key));
+            }
+            return _jsx(Fragment, { children: run }, key);
+        });
+    });
+}

package/dist/chat/mock-chat-client.d.ts

@@ -0,0 +1,97 @@
+import { type ApprovalDecision, type Attachment, type QuestionPrompt } from "./contract.js";
+import type { ChatClient } from "./chat-client.js";
+/** One thing the scripted agent does. `delayMs` is the pause before it, when played live. */
+export type MockStep = {
+    type: "reasoning";
+    content: string;
+    delayMs?: number;
+} | {
+    type: "message";
+    content: string;
+    delayMs?: number;
+} | {
+    type: "tool_call";
+    name: string;
+    arguments: Record<string, unknown>;
+    output: unknown;
+    /** How long the call runs before its output arrives, when played live. */
+    durationMs?: number;
+    status?: "completed" | "failed";
+    delayMs?: number;
+} | {
+    type: "approval";
+    tool: string;
+    arguments: Record<string, unknown>;
+    /** How an already-played approval was decided; a live one waits for the user. */
+    decision?: ApprovalDecision;
+    delayMs?: number;
+} | {
+    type: "question";
+    questions: readonly QuestionPrompt[];
+    /** How an already-played question was answered; a live one waits for the user. */
+    answers?: string[][];
+    /** What the agent does once a live question is answered, given the answers. */
+    reply?: (answers: string[][]) => readonly MockStep[];
+    delayMs?: number;
+}
+/** A message the user sent while the response was running. */
+ | {
+    type: "user_message";
+    content: string;
+    delayMs?: number;
+} | {
+    type: "fail";
+    code: string;
+    message: string;
+    delayMs?: number;
+};
+export type MockAttachment = {
+    name: string;
+    media_type: string;
+    size_bytes: number;
+    url?: string | null;
+};
+export type MockTurn = {
+    message: string;
+    attachments?: readonly MockAttachment[];
+    /** Steps that already happened when the mock client is created. */
+    steps: readonly MockStep[];
+    /** Steps played in real time after creation; the turn's response stays active until they end. */
+    liveSteps?: readonly MockStep[];
+    /** How long ago the turn started. Defaults to the conversation's age. */
+    startedSecondsAgo?: number;
+    /** The user stopped this turn before it finished. Ignored when `liveSteps` is set. */
+    cancelled?: boolean;
+};
+export type MockConversationSeed = {
+    id?: string;
+    title: string | null;
+    agent?: string;
+    updatedMinutesAgo?: number;
+    turns: readonly MockTurn[];
+};
+export type MockChatClientSettings = {
+    conversations?: readonly MockConversationSeed[];
+    /** The steps for a message posted while nothing is running. */
+    respond?: (message: {
+        content: string;
+        attachments: readonly Attachment[];
+    }) => readonly MockStep[];
+    /** The steps for a message posted while a response is running; they run next. */
+    respondToSteering?: (message: {
+        content: string;
+    }) => readonly MockStep[];
+    stepDelayMs?: number;
+    networkDelayMs?: number;
+    /** How long a conversation's first item read takes, like a service loading it from storage. */
+    firstItemsReadDelayMs?: number;
+    /** How long an upload takes, so the composer shows it uploading. */
+    uploadDelayMs?: number;
+    cacheKey?: string;
+};
+/**
+ * An in-memory chat service with a scripted agent, for the showcase and for tests. Seeded turns
+ * exist from the start; `liveSteps` and new messages play out on timers, so polling sees the
+ * same progression a real service would produce.
+ */
+export declare function createMockChatClient({ conversations: conversationSeeds, respond, respondToSteering, stepDelayMs, networkDelayMs, firstItemsReadDelayMs, uploadDelayMs, cacheKey, }?: MockChatClientSettings): ChatClient;