@teaflask/assistant 0.0.0 → 0.6.0

package/dist/components/markdown/shiki-highlighter.js

@@ -0,0 +1,39 @@
+import { createCssVariablesTheme, createHighlighterCore, } from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+const GRAMMARS = [
+    import("@shikijs/langs/typescript"),
+    import("@shikijs/langs/tsx"),
+    import("@shikijs/langs/javascript"),
+    import("@shikijs/langs/jsx"),
+    import("@shikijs/langs/json"),
+    import("@shikijs/langs/bash"),
+    import("@shikijs/langs/python"),
+    import("@shikijs/langs/html"),
+    import("@shikijs/langs/css"),
+    import("@shikijs/langs/yaml"),
+    import("@shikijs/langs/markdown"),
+    import("@shikijs/langs/sql"),
+];
+const THEME = createCssVariablesTheme({
+    name: "tf-css-variables",
+    variablePrefix: "--shiki-",
+    variableDefaults: {},
+    fontStyle: true,
+});
+let highlighter = null;
+function loadedHighlighter() {
+    highlighter ??= createHighlighterCore({
+        themes: [THEME],
+        langs: GRAMMARS,
+        engine: createJavaScriptRegexEngine({ forgiving: true }),
+    });
+    return highlighter;
+}
+export async function highlightWithShiki(code, language) {
+    const core = await loadedHighlighter();
+    const resolved = language.toLowerCase();
+    if (!core.getLoadedLanguages().includes(resolved)) {
+        return null;
+    }
+    return core.codeToHtml(code, { lang: resolved, theme: "tf-css-variables" });
+}

package/dist/components/markdown/streaming-repair.d.ts

@@ -0,0 +1 @@
+export declare function repairedStreamingMarkdown(text: string): string;

package/dist/components/markdown/streaming-repair.js

@@ -0,0 +1,59 @@
+export function repairedStreamingMarkdown(text) {
+    let repaired = _withoutAHalfTypedFenceOpener(text);
+    if (_endsInsideACodeFence(repaired)) {
+        return `${repaired}\n\`\`\``;
+    }
+    repaired = _withoutAnUnfinishedTrailingTableRow(repaired);
+    repaired = _withInlineCodeClosed(repaired);
+    repaired = _withStrongEmphasisClosed(repaired);
+    return repaired;
+}
+function _withoutAHalfTypedFenceOpener(text) {
+    const lines = text.split("\n");
+    const last = lines[lines.length - 1];
+    if (/^`{1,2}$/.test(last.trim())) {
+        return lines.slice(0, -1).join("\n");
+    }
+    return text;
+}
+function _endsInsideACodeFence(text) {
+    let insideAFence = false;
+    for (const line of text.split("\n")) {
+        if (/^\s*(```|~~~)/.test(line)) {
+            insideAFence = !insideAFence;
+        }
+    }
+    return insideAFence;
+}
+function _withoutAnUnfinishedTrailingTableRow(text) {
+    const lines = text.split("\n");
+    const last = lines[lines.length - 1];
+    if (/^\s*\|/.test(last) && !/\|\s*$/.test(last)) {
+        return lines.slice(0, -1).join("\n");
+    }
+    return text;
+}
+function _withInlineCodeClosed(text) {
+    const fenceless = _outsideCodeFences(text);
+    const backticks = (fenceless.match(/`/g) ?? []).length;
+    return backticks % 2 === 1 ? `${text}\`` : text;
+}
+function _withStrongEmphasisClosed(text) {
+    const fenceless = _outsideCodeFences(text);
+    const strongMarkers = (fenceless.match(/\*\*/g) ?? []).length;
+    return strongMarkers % 2 === 1 ? `${text}**` : text;
+}
+function _outsideCodeFences(text) {
+    const kept = [];
+    let insideAFence = false;
+    for (const line of text.split("\n")) {
+        if (/^\s*(```|~~~)/.test(line)) {
+            insideAFence = !insideAFence;
+            continue;
+        }
+        if (!insideAFence) {
+            kept.push(line);
+        }
+    }
+    return kept.join("\n");
+}

package/dist/components/markdown/use-highlighted-html.d.ts

@@ -0,0 +1 @@
+export declare function useHighlightedHtml(code: string, language: string | null): string | null;

package/dist/components/markdown/use-highlighted-html.js

@@ -0,0 +1,28 @@
+"use client";
+import { useEffect, useState } from "react";
+import { highlightToHtml } from "./highlight.js";
+function keyOf(code, language) {
+    return `${language} ${code}`;
+}
+export function useHighlightedHtml(code, language) {
+    const [highlighted, setHighlighted] = useState(null);
+    useEffect(() => {
+        if (language === null) {
+            return;
+        }
+        let disposed = false;
+        const key = keyOf(code, language);
+        highlightToHtml(code, language).then((html) => {
+            if (!disposed && html !== null) {
+                setHighlighted({ key, html });
+            }
+        }, () => undefined);
+        return () => {
+            disposed = true;
+        };
+    }, [code, language]);
+    if (language === null || highlighted === null) {
+        return null;
+    }
+    return highlighted.key === keyOf(code, language) ? highlighted.html : null;
+}

package/dist/components/markdown/use-paced-reveal.d.ts

@@ -0,0 +1,5 @@
+import { type RefObject } from "react";
+export declare function usePacedReveal(text: string, streaming: boolean): {
+    revealed: string;
+    revealHostRef: RefObject<HTMLDivElement | null>;
+};

package/dist/components/markdown/use-paced-reveal.js

@@ -0,0 +1,90 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { RevealPacer } from "./reveal-pacer.js";
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+export function usePacedReveal(text, streaming) {
+    const revealHostRef = useRef(null);
+    const [revealedLength, setRevealedLength] = useState(text.length);
+    const pacerRef = useRef(null);
+    const frameRef = useRef(null);
+    const mountedAtRef = useRef(null);
+    const lastSeenLengthRef = useRef(text.length);
+    const wasStreamingRef = useRef(streaming);
+    useEffect(() => {
+        const now = performance.now();
+        mountedAtRef.current ??= now;
+        const previousLength = lastSeenLengthRef.current;
+        lastSeenLengthRef.current = text.length;
+        const endedSinceLastRender = wasStreamingRef.current && !streaming;
+        wasStreamingRef.current = streaming;
+        const advanceRevealLoop = () => {
+            frameRef.current = null;
+            const pacer = pacerRef.current;
+            if (pacer === null) {
+                return;
+            }
+            const frameNow = performance.now();
+            setRevealedLength(pacer.revealedLength(frameNow));
+            if (!pacer.isCaughtUp(frameNow)) {
+                frameRef.current = requestAnimationFrame(advanceRevealLoop);
+            }
+        };
+        const ensureRevealLoop = () => {
+            frameRef.current ??= requestAnimationFrame(advanceRevealLoop);
+        };
+        if (text.length < previousLength) {
+            pacerRef.current?.revealInstantly();
+            setRevealedLength(text.length);
+            return;
+        }
+        if (streaming && text.length > previousLength) {
+            if (_reducedMotionIsOnFor(revealHostRef.current)) {
+                pacerRef.current?.revealInstantly();
+                setRevealedLength(text.length);
+                return;
+            }
+            pacerRef.current ??= new RevealPacer(previousLength, mountedAtRef.current);
+            pacerRef.current.observe(text.length, now);
+            ensureRevealLoop();
+            return;
+        }
+        if (endedSinceLastRender && pacerRef.current !== null) {
+            if (_reducedMotionIsOnFor(revealHostRef.current)) {
+                pacerRef.current.revealInstantly();
+                setRevealedLength(text.length);
+                return;
+            }
+            pacerRef.current.observe(text.length, now);
+            pacerRef.current.beginDrain(now);
+            ensureRevealLoop();
+            return;
+        }
+        if (!streaming) {
+            setRevealedLength(text.length);
+        }
+    }, [text, streaming]);
+    useEffect(() => {
+        return () => {
+            if (frameRef.current !== null) {
+                cancelAnimationFrame(frameRef.current);
+            }
+        };
+    }, []);
+    const cappedLength = Math.min(revealedLength, text.length);
+    return {
+        revealed: cappedLength >= text.length
+            ? text
+            : text.slice(0, _notSplittingASurrogatePair(text, cappedLength)),
+        revealHostRef,
+    };
+}
+function _notSplittingASurrogatePair(text, length) {
+    const lastCode = text.charCodeAt(length - 1);
+    const cutsAPairInHalf = lastCode >= 0xd800 && lastCode <= 0xdbff;
+    return cutsAPairInHalf ? length - 1 : length;
+}
+function _reducedMotionIsOnFor(element) {
+    return (window.matchMedia(REDUCED_MOTION_QUERY).matches ||
+        (element !== null &&
+            element.closest('[data-reduce-motion="true"]') !== null));
+}

package/dist/components/memory-updated-footer.d.ts

@@ -0,0 +1,4 @@
+import type { MemoryUpdated } from "../core/memory-provenance-anchors.js";
+export declare function MemoryUpdatedFooter({ updates, }: {
+    updates: readonly MemoryUpdated[];
+}): import("react").JSX.Element | null;

package/dist/components/memory-updated-footer.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BrainIcon, ChevronDownIcon } from "lucide-react";
+import { useEffect, useId, useRef, useState } from "react";
+import { TfButton } from "./primitives/button.js";
+import { cx } from "./primitives/cx.js";
+function memoryScopeLabelOf(scope) {
+    if (scope === "user") {
+        return "Your memory";
+    }
+    if (scope === "org") {
+        return "Shared memory";
+    }
+    return "Memory";
+}
+function memoryFooterLabelOf(count) {
+    return count > 1
+        ? `Memory updated · ${String(count)} notes`
+        : "Memory updated";
+}
+export function MemoryUpdatedFooter({ updates, }) {
+    const [open, setOpen] = useState(false);
+    const panelId = useId();
+    const triggerRef = useRef(null);
+    const panelRef = useRef(null);
+    useEffect(() => {
+        const panelElement = panelRef.current;
+        const trigger = triggerRef.current;
+        if (!open || panelElement === null) {
+            return;
+        }
+        const closeUnlessInside = (event) => {
+            const path = event.composedPath();
+            if (path.includes(panelElement)) {
+                return;
+            }
+            if (trigger !== null && path.includes(trigger)) {
+                return;
+            }
+            setOpen(false);
+        };
+        const closeOnEscape = (event) => {
+            if (event.key !== "Escape") {
+                return;
+            }
+            event.stopPropagation();
+            setOpen(false);
+            trigger?.focus();
+        };
+        const doc = panelElement.ownerDocument;
+        doc.addEventListener("pointerdown", closeUnlessInside);
+        panelElement.addEventListener("keydown", closeOnEscape);
+        trigger?.addEventListener("keydown", closeOnEscape);
+        return () => {
+            doc.removeEventListener("pointerdown", closeUnlessInside);
+            panelElement.removeEventListener("keydown", closeOnEscape);
+            trigger?.removeEventListener("keydown", closeOnEscape);
+        };
+    }, [open]);
+    if (updates.length === 0) {
+        return null;
+    }
+    return (_jsxs("div", { "data-tf-memory-footer": "", className: "tf:relative tf:mt-1 tf:w-fit", children: [_jsxs(TfButton, { ref: triggerRef, variant: "bare", "aria-expanded": open, "aria-controls": open ? panelId : undefined, className: "tf:py-1 tf:text-xs tf:text-tf-muted-foreground tf:hover:text-tf-foreground", onClick: () => {
+                    setOpen((wasOpen) => !wasOpen);
+                }, children: [_jsx(BrainIcon, { "aria-hidden": true, className: "tf:size-3.5 tf:shrink-0" }), _jsx("span", { children: memoryFooterLabelOf(updates.length) }), _jsx(ChevronDownIcon, { "aria-hidden": true, className: cx("tf:size-3 tf:shrink-0 tf:transition-transform", !open && "tf:-rotate-90") })] }), open ? (_jsx("div", { ref: panelRef, id: panelId, role: "note", "aria-label": "Memory updates", "data-tf-glass": "", className: "tf:absolute tf:bottom-full tf:start-0 tf:mb-1 tf:flex tf:w-72 tf:flex-col tf:rounded-2xl tf:border tf:p-2", children: _jsx("ul", { className: "tf:m-0 tf:flex tf:max-h-64 tf:list-none tf:flex-col tf:overflow-y-auto tf:ps-0", children: updates.map((update) => (_jsxs("li", { "data-tf-memory-entry": "", className: "tf:flex tf:flex-col tf:gap-0.5 tf:px-2 tf:py-1.5", children: [_jsx("span", { className: "tf:text-tf-label tf:text-tf-foreground", children: update.summary }), _jsx("span", { className: "tf:text-xs tf:text-tf-muted-foreground", children: memoryScopeLabelOf(update.scope) })] }, update.memoryId))) }) })) : null] }));
+}

package/dist/components/message-list-row.d.ts

@@ -0,0 +1,13 @@
+import type { ApprovalCardModel } from "../core/approval-inbox.js";
+import type { MessageViewSlot, ToolRowSlot } from "./message-list-slots.js";
+import type { DisplayRow } from "./use-transcript-folds.js";
+export declare function Row({ row, cards, turnLive, inCurrentTurn, identityToken, decisionSurfacesInShelf, messageView, toolRow, }: {
+    row: DisplayRow;
+    cards: readonly ApprovalCardModel[];
+    turnLive: boolean;
+    inCurrentTurn: boolean;
+    identityToken: string;
+    decisionSurfacesInShelf: boolean;
+    messageView?: MessageViewSlot;
+    toolRow?: ToolRowSlot;
+}): import("react").JSX.Element;

package/dist/components/message-list-row.js

@@ -0,0 +1,46 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ActivityRail } from "./activity-rail.js";
+import { CopyTextButton } from "./copy-text-button.js";
+import { PacedAssistantMarkdown } from "./markdown/paced-assistant-markdown.js";
+import { MemoryUpdatedFooter } from "./memory-updated-footer.js";
+import { TurnFailedReceiptRows } from "./receipt-rows.js";
+import { HostSlotBoundary, SlotOrDefault } from "./slot-boundary.js";
+import { SubagentDeliveryDivider } from "./subagent-delivery-divider.js";
+import { SubagentGroupRow } from "./subagent-group-row.js";
+import { SurfaceBoundary } from "./surface-boundary.js";
+import { ToolCallRows } from "./tool-call-rows.js";
+import { UserMessage } from "./user-message.js";
+function SwappedContent({ messageView, row, children, }) {
+    if (messageView === undefined) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return (_jsx(HostSlotBoundary, { slot: "messageView", fallback: children, children: _jsx(SlotOrDefault, { render: () => messageView(row), fallback: children }) }));
+}
+export function Row({ row, cards, turnLive, inCurrentTurn, identityToken, decisionSurfacesInShelf, messageView, toolRow, }) {
+    switch (row.kind) {
+        case "run-fold":
+            return (_jsx(ActivityRail, { fold: row, cards: cards, turnLive: turnLive, inCurrentTurn: inCurrentTurn, identityToken: identityToken, decisionSurfacesInShelf: decisionSurfacesInShelf, toolRow: toolRow }));
+        case "user":
+            return (_jsx("div", { className: "tf:py-2", ...(row.optimistic === true
+                    ? {
+                        "data-tf-pending-echo": "",
+                        role: "status",
+                        "aria-label": "Message sent, waiting for transcript",
+                    }
+                    : {}), children: _jsx(SwappedContent, { messageView: messageView, row: row, children: _jsx(UserMessage, { attachments: row.attachments, createdAt: row.createdAt, children: row.text }) }) }));
+        case "assistant-text":
+            return (_jsx(AssistantProseRow, { row: row, identityToken: identityToken, messageView: messageView }));
+        case "tool-call":
+            return (_jsx(SurfaceBoundary, { surface: "tool-row", children: _jsx(ToolCallRows, { row: row, cards: cards, decisionSurfacesInShelf: decisionSurfacesInShelf, toolRow: toolRow }) }));
+        case "subagent-group":
+            return (_jsx(SwappedContent, { messageView: messageView, row: row, children: _jsx(SubagentGroupRow, { row: row }) }));
+        case "subagent-delivery":
+            return (_jsx(SwappedContent, { messageView: messageView, row: row, children: _jsx(SubagentDeliveryDivider, { results: row.results }) }));
+        case "turn-failed-receipts":
+            return _jsx(TurnFailedReceiptRows, { receipts: row.receipts });
+    }
+}
+function AssistantProseRow({ row, identityToken, messageView, }) {
+    return (_jsxs("div", { className: "tf:group/assistant-message tf:py-2", "data-tf-agent-identity": identityToken, children: [_jsx(SwappedContent, { messageView: messageView, row: row, children: _jsx(PacedAssistantMarkdown, { text: row.text, streaming: row.streaming }) }), row.memoryUpdates !== undefined ? (_jsx(MemoryUpdatedFooter, { updates: row.memoryUpdates })) : null, !row.streaming ? (_jsx("div", { className: "tf:flex tf:h-7 tf:items-center", children: _jsx(CopyTextButton, { text: row.text, label: "Copy message", className: "tf:opacity-0 tf:transition-opacity tf:group-hover/assistant-message:opacity-100 tf:group-focus-within/assistant-message:opacity-100 tf:focus-visible:opacity-100 tf:pointer-coarse:opacity-100" }) })) : null] }));
+}

package/dist/components/message-list-slots.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import type { SubagentGroupRow as SubagentGroupRowModel } from "../core/subagent-rows.js";
+import type { ToolCallViewModel } from "../core/tool-call-display.js";
+import type { AssistantTextRow, SubagentDeliveryRow, ToolCallRow, TranscriptBlock, TranscriptRow, UserMessageRow } from "../core/transcript-rows.js";
+export interface TranscriptMarkerProps {
+    message: {
+        id: string;
+    };
+    position: "before" | "after";
+}
+export type TranscriptSlotRow = UserMessageRow | AssistantTextRow | SubagentGroupRowModel | SubagentDeliveryRow;
+export interface ToolRowSlotProps {
+    row: ToolCallRow;
+    view: ToolCallViewModel;
+    awaitingInput: boolean;
+}
+export type MessageViewSlot = (row: TranscriptSlotRow) => ReactNode;
+export type ToolRowSlot = (props: ToolRowSlotProps) => ReactNode;
+export type MessageListSource = {
+    rows: readonly TranscriptRow[];
+    blocks?: never;
+} | {
+    blocks: readonly TranscriptBlock[];
+    rows?: never;
+};

package/dist/components/message-list-slots.js

@@ -0,0 +1 @@
+export {};

package/dist/components/message-list.d.ts

@@ -0,0 +1,23 @@
+import { type ComponentType, type ReactNode } from "react";
+import type { ApprovalCardModel } from "../core/approval-inbox.js";
+import type { MarkerBoundaries } from "../core/transcript-rows.js";
+import type { MessageListSource, MessageViewSlot, ToolRowSlot, TranscriptMarkerProps } from "./message-list-slots.js";
+export type { MessageListSource, MessageViewSlot, ToolRowSlot, ToolRowSlotProps, TranscriptMarkerProps, TranscriptSlotRow, } from "./message-list-slots.js";
+interface MessageListOptions {
+    cards: readonly ApprovalCardModel[];
+    decisionSurfacesInShelf?: boolean;
+    typing?: boolean;
+    identityToken?: string;
+    live?: boolean;
+    turnOpen?: boolean;
+    markers?: ComponentType<TranscriptMarkerProps>;
+    markerBoundaries?: MarkerBoundaries;
+    turnStartIds?: ReadonlySet<string>;
+    frameClaimsLiveness?: boolean;
+    emptyFallback?: ReactNode;
+    scrollClassName?: string;
+    messageView?: MessageViewSlot;
+    toolRow?: ToolRowSlot;
+    placementHolds?: boolean;
+}
+export declare function MessageList({ cards, typing, live, turnOpen, identityToken, decisionSurfacesInShelf, markers: Markers, markerBoundaries, turnStartIds, frameClaimsLiveness, emptyFallback, scrollClassName, messageView, toolRow, placementHolds, ...source }: MessageListSource & MessageListOptions): import("react").JSX.Element;

package/dist/components/message-list.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ArrowDownIcon } from "lucide-react";
+import { Fragment, useLayoutEffect, useRef, } from "react";
+import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
+import { PRIMARY_AGENT_IDENTITY_TOKEN } from "../core/agent-identity.js";
+import { settledQuestionsReceiptOfCard } from "../core/question-receipt.js";
+import { QuestionSetReceiptRow } from "./elicitation-receipt-row.js";
+import { Row } from "./message-list-row.js";
+import { TfButton } from "./primitives/button.js";
+import { ScrollFollowGuards } from "./scroll-follow-guards.js";
+import { HostSlotBoundary } from "./slot-boundary.js";
+import { ShimmerText, TypingIndicator } from "./streaming-states.js";
+import { useMessageListDerivations, } from "./use-transcript-folds.js";
+export function MessageList({ cards, typing = false, live = false, turnOpen, identityToken = PRIMARY_AGENT_IDENTITY_TOKEN, decisionSurfacesInShelf = false, markers: Markers, markerBoundaries, turnStartIds, frameClaimsLiveness = false, emptyFallback, scrollClassName, messageView, toolRow, placementHolds = true, ...source }) {
+    const { foldedBlocks, displayRows, currentTurnStart, blockStarts, unrowedAnsweredAsks, liveIndex, hostEmptySurfaceShown, livenessClaimant, } = useMessageListDerivations(source, {
+        live,
+        typing,
+        turnOpen,
+        markerBoundaries,
+        turnStartIds,
+        decisionSurfacesInShelf,
+        frameClaimsLiveness,
+        emptyFallback,
+    });
+    const rowAt = (row, flatIndex) => (_jsx(Row, { row: row, cards: cards, turnLive: live && flatIndex === liveIndex, inCurrentTurn: placementHolds && flatIndex >= currentTurnStart, identityToken: identityToken, decisionSurfacesInShelf: decisionSurfacesInShelf, messageView: messageView, toolRow: toolRow }, row.key));
+    return (_jsxs(StickToBottom, { "data-tf-message-list": "", className: "tf:relative tf:min-h-0 tf:flex-1", resize: "instant", initial: "instant", role: "log", children: [_jsxs(StickToBottom.Content, { scrollClassName: scrollClassName, className: "tf:mx-auto tf:flex tf:w-full tf:max-w-3xl tf:flex-col tf:px-4 tf:py-4", children: [hostEmptySurfaceShown ? emptyFallback : null, foldedBlocks !== null ? (_jsx(MarkedBlocks, { blocks: foldedBlocks, blockStarts: blockStarts, markers: Markers, rowAt: rowAt })) : (displayRows.map((row, index) => rowAt(row, index))), _jsx(TranscriptTail, { unrowedAnsweredAsks: unrowedAnsweredAsks, livenessClaimant: livenessClaimant })] }), _jsx(ScrollFollowGuards, {}), _jsx(ScrollToBottom, { live: live })] }));
+}
+function MarkedBlocks({ blocks, blockStarts, markers: Markers, rowAt, }) {
+    return blocks.map((block, blockIndex) => (_jsxs(Fragment, { children: [Markers !== undefined ? (_jsx(HostSlotBoundary, { slot: "markers", fallback: null, children: _jsx(Markers, { message: { id: block.messageId }, position: "before" }) })) : null, block.rows.map((row, index) => rowAt(row, blockStarts[blockIndex] + index)), Markers !== undefined ? (_jsx(HostSlotBoundary, { slot: "markers", fallback: null, children: _jsx(Markers, { message: { id: block.messageId }, position: "after" }) })) : null] }, block.messageId)));
+}
+function TranscriptTail({ unrowedAnsweredAsks, livenessClaimant, }) {
+    return (_jsxs(_Fragment, { children: [unrowedAnsweredAsks.map((card) => {
+                const receipt = settledQuestionsReceiptOfCard(card.questions, card.answered);
+                return receipt === null ? null : (_jsx(QuestionSetReceiptRow, { receipt: receipt }, card.interruptId));
+            }), livenessClaimant === "standalone-headline" ? (_jsx("div", { "data-tf-working-headline": "", className: "tf:py-1.5 tf:text-tf-label tf:text-tf-muted-foreground", children: _jsx(ShimmerText, { children: "Working\u2026" }) })) : null, livenessClaimant === "typing-dot" ? (_jsx("div", { className: "tf:py-2", children: _jsx(TypingIndicator, {}) })) : null, _jsx("div", { "data-tf-activity-tail": "", "aria-hidden": true, className: "tf:shrink-0" })] }));
+}
+function ScrollToBottom({ live = false }) {
+    const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+    const buttonRef = useRef(null);
+    useLayoutEffect(() => {
+        const button = buttonRef.current;
+        if (isAtBottom || button === null) {
+            return;
+        }
+        const root = button.getRootNode();
+        if (!(root instanceof Document || root instanceof ShadowRoot)) {
+            return;
+        }
+        const active = root.activeElement;
+        if (active instanceof HTMLElement &&
+            active.closest("[data-tf-activity-slot]") !== null) {
+            button.focus();
+        }
+    }, [isAtBottom]);
+    if (isAtBottom) {
+        return null;
+    }
+    return (_jsx("div", { "data-tf-scroll-away-jump": "", className: "tf:pointer-events-none tf:absolute tf:inset-x-0 tf:bottom-3 tf:flex tf:justify-center", children: _jsxs(TfButton, { ref: buttonRef, variant: "iconFloating", "data-tf-scroll-away-activity": live ? "" : undefined, "aria-label": live ? "New activity below — scroll to bottom" : "Scroll to bottom", className: "tf:pointer-events-auto tf:relative tf:size-9", onClick: () => {
+                void scrollToBottom();
+            }, children: [_jsx(ArrowDownIcon, { "aria-hidden": true, className: "tf:size-4" }), live ? (_jsx("span", { "aria-hidden": true, "data-tf-working-dot": "", className: "tf:absolute tf:-end-0.5 tf:-top-0.5 tf:size-2 tf:animate-tf-pulse tf:rounded-full tf:border tf:border-tf-background tf:bg-tf-muted-foreground tf:motion-reduce:animate-none" })) : null] }) }));
+}

package/dist/components/model-picker-chip.d.ts

@@ -0,0 +1 @@
+export declare function ModelPickerShelf(): import("react").JSX.Element | null;

package/dist/components/model-picker-chip.js

@@ -0,0 +1,168 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { ChevronDownIcon } from "./icons.js";
+import { useConversation } from "./conversation-context.js";
+import { displayEffortOf, effortLabelOf } from "./model-picker-effort.js";
+import { ModelPickerEffortPanel, ModelPickerServedModelsPanel, ModelPickerRootPanel, } from "./model-picker-panels.js";
+import { TfButton } from "./primitives/button.js";
+import { ProviderChip, ProviderChipShelf } from "./provider-chip.js";
+import { useAssistantSession, useOptionalAssistantSession, } from "./teaflask-assistant-provider.js";
+import { useCell } from "./use-store-cell.js";
+export function ModelPickerShelf() {
+    const session = useOptionalAssistantSession();
+    if (session === null) {
+        return null;
+    }
+    return _jsx(MountedModelPickerShelf, {});
+}
+function MountedModelPickerShelf() {
+    const session = useAssistantSession();
+    const [openChip, setOpenChip] = useState(null);
+    const answered = useCell(session.configAnswered);
+    const menu = useCell(session.modelChoice);
+    const identified = session.tier === "identified";
+    useEffect(() => {
+        if (identified) {
+            session.ensureSubscriptions();
+        }
+    }, [identified, session]);
+    const statuses = useCell(session.subscriptions);
+    const connectable = identified
+        ? (statuses ?? []).filter((status) => status.offered || status.connected)
+        : [];
+    const ownsPickerChip = answered && menu !== null;
+    const ownsAccountChip = ownsPickerChip && connectable.length > 0;
+    const openRequested = useCell(session.connectOpenRequested);
+    if (openRequested && ownsAccountChip && openChip !== "account") {
+        setOpenChip("account");
+    }
+    if (openChip === "account" && !ownsAccountChip) {
+        setOpenChip(null);
+    }
+    if (openChip === "picker" && !ownsPickerChip) {
+        setOpenChip(null);
+    }
+    useEffect(() => {
+        if (openRequested && ownsAccountChip && openChip === "account") {
+            session.acknowledgeSubscriptionConnect();
+        }
+    }, [openRequested, ownsAccountChip, openChip, session]);
+    if (!answered) {
+        return null;
+    }
+    if (menu === null) {
+        return _jsx(ProviderChipShelf, {});
+    }
+    return (_jsxs("div", { className: "tf:relative tf:mt-1.5 tf:flex tf:items-center tf:justify-end tf:gap-2 tf:px-1", children: [ownsAccountChip ? (_jsx(ProviderChip, { statuses: connectable, open: openChip === "account", onOpenChange: (next) => {
+                    setOpenChip(next ? "account" : null);
+                }, fundingNote: "Models your plan serves run on it; other picks run on this site's own funding." })) : null, _jsx(ModelPickerChip, { menu: menu, open: openChip === "picker", onOpenChange: (next) => {
+                    setOpenChip(next ? "picker" : null);
+                } })] }));
+}
+function ModelPickerChip({ menu, open, onOpenChange, }) {
+    const { modelPick, setModelPick } = useConversation();
+    const { panel, setPanel, showPanel, triggerRef, menuRef, rootPanelRef, modelPanelRef, effortPanelRef, } = useModelPickerPanels({ open, onOpenChange });
+    const { currentModelId, renderedLadder, currentEffort, currentName } = pickerSelectionOf(menu, modelPick);
+    return (_jsxs(_Fragment, { children: [_jsx(ModelPickerTrigger, { triggerRef: triggerRef, open: open, onOpenChange: onOpenChange, setPanel: setPanel, currentName: currentName, currentEffort: currentEffort }), open ? (_jsxs("div", { ref: menuRef, id: "tf-model-picker-menu", role: "dialog", "aria-label": "Choose model and effort", "data-tf-glass": "", className: "tf:absolute tf:right-0 tf:bottom-full tf:mb-2 tf:flex tf:max-h-[min(32rem,calc(100vh-6rem))] tf:w-80 tf:max-w-full tf:flex-col tf:overflow-y-auto tf:rounded-2xl tf:border tf:p-2", onKeyDown: (event) => {
+                    if (event.key !== "Escape") {
+                        return;
+                    }
+                    event.preventDefault();
+                    event.stopPropagation();
+                    setPanel("root");
+                    onOpenChange(false);
+                    triggerRef.current?.focus();
+                }, children: [_jsx(ModelPickerRootPanel, { panelRef: rootPanelRef, panel: panel, currentName: currentName, currentEffort: currentEffort, showPanel: showPanel }), _jsx(ModelPickerServedModelsPanel, { panelRef: modelPanelRef, panel: panel, menu: menu, currentModelId: currentModelId, modelPick: modelPick, setModelPick: setModelPick, showPanel: showPanel }), _jsx(ModelPickerEffortPanel, { panelRef: effortPanelRef, panel: panel, ladder: renderedLadder, currentEffort: currentEffort, modelPick: modelPick, setModelPick: setModelPick, showPanel: showPanel })] })) : null] }));
+}
+function useModelPickerPanels({ open, onOpenChange, }) {
+    const triggerRef = useRef(null);
+    const menuRef = useRef(null);
+    const [panel, setPanel] = useState("root");
+    const rootPanelRef = useRef(null);
+    const modelPanelRef = useRef(null);
+    const effortPanelRef = useRef(null);
+    const panelAwaitingFocus = useRef(null);
+    const showPanel = (next) => {
+        if (next === panel) {
+            return;
+        }
+        panelAwaitingFocus.current = next;
+        setPanel(next);
+    };
+    useEffect(() => {
+        const target = panelAwaitingFocus.current;
+        if (target === null) {
+            return;
+        }
+        panelAwaitingFocus.current = null;
+        if (!open || target !== panel) {
+            return;
+        }
+        const panelRef = target === "root"
+            ? rootPanelRef
+            : target === "model"
+                ? modelPanelRef
+                : effortPanelRef;
+        panelRef.current?.focus();
+    });
+    useEffect(() => {
+        const menuElement = menuRef.current;
+        if (!open || menuElement === null) {
+            return;
+        }
+        const closeUnlessInside = (event) => {
+            const path = event.composedPath();
+            if (path.includes(menuElement)) {
+                return;
+            }
+            const trigger = triggerRef.current;
+            if (trigger !== null && path.includes(trigger)) {
+                return;
+            }
+            onOpenChange(false);
+        };
+        const doc = menuElement.ownerDocument;
+        doc.addEventListener("pointerdown", closeUnlessInside);
+        return () => {
+            doc.removeEventListener("pointerdown", closeUnlessInside);
+        };
+    }, [open, onOpenChange]);
+    return {
+        panel,
+        setPanel,
+        showPanel,
+        triggerRef,
+        menuRef,
+        rootPanelRef,
+        modelPanelRef,
+        effortPanelRef,
+    };
+}
+function pickerSelectionOf(menu, modelPick) {
+    const currentModelId = modelPick?.modelId ?? menu.default_model_id;
+    const selectedOption = menu.models.find((option) => option.id === currentModelId);
+    const renderedLadder = selectedOption?.efforts ?? menu.efforts;
+    const configuredEffort = menu.configured_effort ?? menu.default_effort ?? null;
+    const currentEffort = displayEffortOf(renderedLadder, modelPick?.effort ?? configuredEffort, menu.default_effort ?? configuredEffort);
+    const currentName = selectedOption?.display_name ?? currentModelId;
+    return { currentModelId, renderedLadder, currentEffort, currentName };
+}
+function ModelPickerTrigger({ triggerRef, open, onOpenChange, setPanel, currentName, currentEffort, }) {
+    return (_jsxs(TfButton, { ref: triggerRef, variant: "chipQuiet", className: "tf:min-w-0", "aria-expanded": open, "aria-controls": "tf-model-picker-menu", "aria-label": currentEffort === null
+            ? `Model: ${currentName}`
+            : `Model: ${currentName}, effort: ${effortLabelOf(currentEffort)}`, onClick: () => {
+            if (!open) {
+                setPanel("root");
+            }
+            onOpenChange(!open);
+        }, onKeyDown: (event) => {
+            if (!open || event.key !== "Escape") {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            setPanel("root");
+            onOpenChange(false);
+        }, children: [_jsxs("span", { className: "tf:flex tf:max-w-56 tf:min-w-0 tf:items-baseline tf:gap-1.5 tf:truncate", children: [_jsx("span", { className: "tf:truncate", children: currentName }), currentEffort !== null ? (_jsx("span", { className: "tf:shrink-0 tf:text-tf-muted-foreground", children: effortLabelOf(currentEffort) })) : null] }), _jsx(ChevronDownIcon, {})] }));
+}