@teaflask/assistant 0.0.0 → 0.6.0

package/dist/components/companion-history-menu.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "react";
+import { HeaderDisclosureMenu, HeaderDisclosureTrigger, } from "./companion-header-disclosure.js";
+import { ChevronDownIcon } from "./icons.js";
+import { ThreadHistory } from "./thread-list.js";
+import { useAssistantConversation } from "./use-assistant-conversation.js";
+export function CompanionHeaderTitle({ menuId, open, onOpenChange, triggerRef, fallbackTitle = "Assistant", }) {
+    const core = useAssistantConversation();
+    const title = core.conversation?.thread.title || fallbackTitle;
+    if (!core.historyExpected) {
+        return (_jsx("h2", { className: "tf:min-w-0 tf:flex-1 tf:truncate tf:text-tf-label tf:font-medium tf:text-tf-muted-foreground", children: title }));
+    }
+    return (_jsx("h2", { className: "tf:flex tf:min-w-0 tf:flex-1 tf:items-center tf:text-tf-label tf:font-medium tf:text-tf-muted-foreground", children: _jsxs(HeaderDisclosureTrigger, { menuId: menuId, open: open, onOpenChange: onOpenChange, triggerRef: triggerRef, variant: "bare", className: "tf:-ml-1.5 tf:min-w-0 tf:px-1.5 tf:py-1 tf:hover:bg-tf-accent tf:hover:text-tf-foreground", children: [_jsx("span", { className: "tf:min-w-0 tf:truncate", children: title }), _jsx(ChevronDownIcon, {})] }) }));
+}
+export function CompanionHistoryMenu({ id, onClose, triggerRef, triggerId, insetFromSurfaceTop, }) {
+    const core = useAssistantConversation();
+    return (_jsx(HeaderDisclosureMenu, { id: id, "aria-label": "Conversation history", onClose: onClose, triggerRef: triggerRef, triggerId: triggerId, insetFromSurfaceTop: insetFromSurfaceTop, className: "tf:left-2.5 tf:w-80 tf:max-w-[calc(100%-1.25rem)] tf:pt-2", children: _jsx(ThreadHistory, { threads: core.threads, activeThreadId: core.conversation?.thread.id ?? null, safeAreaBottom: false, onSelectThread: (thread) => {
+                onClose();
+                core.openThread(thread);
+            }, onNewConversation: () => {
+                onClose();
+                core.startNewConversation();
+            } }) }));
+}

package/dist/components/companion-mark-image.d.ts

@@ -0,0 +1,3 @@
+export declare function CompanionMarkImage({ src }: {
+    src: string;
+}): import("react").JSX.Element;

package/dist/components/companion-mark-image.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { AgentIdentityMark } from "./agent-identity-mark.js";
+const warnedSources = new Set();
+export function CompanionMarkImage({ src }) {
+    const [failed, setFailed] = useState(false);
+    if (failed) {
+        return _jsx(AgentIdentityMark, { register: "primary", size: "fill" });
+    }
+    return (_jsx("img", { src: src, alt: "", draggable: false, onError: () => {
+            if (!warnedSources.has(src)) {
+                warnedSources.add(src);
+                console.warn(`[teaflask-assistant] companion-mark-src "${src}" did not load; showing the TeaFlask flask instead.`);
+            }
+            setFailed(true);
+        } }));
+}

package/dist/components/companion-mark.d.ts

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

package/dist/components/companion-mark.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AgentIdentityMark } from "./agent-identity-mark.js";
+import { useAssistantAppearance } from "./appearance-context.js";
+export function CompanionMark() {
+    const { companionMark } = useAssistantAppearance();
+    return (_jsx("span", { "aria-hidden": true, "data-tf-companion-mark": "", children: companionMark === null ? (_jsx(AgentIdentityMark, { register: "primary", size: "fill" })) : (_jsx("span", { "data-tf-host-view": "", className: "tf:contents", children: companionMark })) }));
+}

package/dist/components/companion-mode-menu.d.ts

@@ -0,0 +1,15 @@
+import { type RefObject } from "react";
+import type { PanelDock } from "../persistence/panel-mode.js";
+export declare function CompanionModeTrigger({ menuId, open, onOpenChange, triggerRef, }: {
+    menuId: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    triggerRef: RefObject<HTMLButtonElement | null>;
+}): import("react").JSX.Element;
+export declare function CompanionModeMenu({ id, dock, onSelect, onClose, triggerRef, }: {
+    id: string;
+    dock: PanelDock;
+    onSelect: (dock: PanelDock) => void;
+    onClose: () => void;
+    triggerRef: RefObject<HTMLButtonElement | null>;
+}): import("react").JSX.Element;

package/dist/components/companion-mode-menu.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "react";
+import { HeaderDisclosureMenu, HeaderDisclosureTrigger, } from "./companion-header-disclosure.js";
+import { CheckIcon, SidebarIcon } from "./icons.js";
+import { TfButton } from "./primitives/button.js";
+export function CompanionModeTrigger({ menuId, open, onOpenChange, triggerRef, }) {
+    return (_jsx(HeaderDisclosureTrigger, { menuId: menuId, open: open, onOpenChange: onOpenChange, triggerRef: triggerRef, variant: "icon", "aria-label": "Panel position", title: "Panel position", children: _jsx(SidebarIcon, {}) }));
+}
+export function CompanionModeMenu({ id, dock, onSelect, onClose, triggerRef, }) {
+    return (_jsxs(HeaderDisclosureMenu, { id: id, "aria-label": "Panel position", onClose: onClose, triggerRef: triggerRef, className: "tf:right-2 tf:w-52 tf:p-1", children: [_jsx(ModeRow, { label: "Floating", active: dock === "floating", onSelect: () => {
+                    onSelect("floating");
+                } }), _jsx(ModeRow, { label: "Sidebar", active: dock === "sidebar", onSelect: () => {
+                    onSelect("sidebar");
+                } })] }));
+}
+function ModeRow({ label, active, onSelect, }) {
+    return (_jsxs(TfButton, { variant: "row", "aria-pressed": active, onClick: onSelect, children: [_jsx("span", { className: "tf:min-w-0 tf:flex-1 tf:truncate", children: label }), active ? _jsx(CheckIcon, {}) : null] }));
+}

package/dist/components/composer-attachment-chip.d.ts

@@ -0,0 +1,7 @@
+import type { ServedAttachmentPolicy } from "../contract/assistant-config.js";
+import { type AttachmentDraft } from "../core/composer-policy.js";
+export declare function ComposerAttachmentChip({ item, onRemove, }: {
+    item: AttachmentDraft;
+    onRemove: () => void;
+}): import("react").JSX.Element;
+export declare function attachmentAcceptOf(policy: ServedAttachmentPolicy): string | undefined;

package/dist/components/composer-attachment-chip.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { attachmentDraftFailed, } from "../core/composer-policy.js";
+import { humanFileSize } from "./human-file-size.js";
+import { CloseIcon, FileIcon } from "./icons.js";
+import { TfButton } from "./primitives/button.js";
+export function ComposerAttachmentChip({ item, onRemove, }) {
+    const failed = attachmentDraftFailed(item);
+    return (_jsxs("span", { className: "tf:inline-flex tf:max-w-full tf:items-center tf:gap-1.5 tf:rounded-lg " +
+            "tf:bg-tf-background tf:py-0.5 tf:ps-2 tf:pe-0.5 tf:text-xs tf:ring-1 tf:ring-tf-border tf:ring-inset " +
+            (failed ? "tf:text-tf-destructive" : "tf:text-tf-foreground"), title: failed ? item.error : item.filename, children: [_jsx("span", { className: failed ? "tf:text-tf-destructive" : "tf:text-tf-muted-foreground", children: _jsx(FileIcon, {}) }), _jsx("span", { className: "tf:min-w-0 tf:truncate", children: item.filename }), _jsx("span", { className: "tf:shrink-0 tf:text-tf-muted-foreground", children: item.status === "uploading" ? (_jsx("span", { className: "tf:animate-tf-pulse tf:motion-reduce:animate-none", children: "uploading\u2026" })) : failed ? ((item.error ?? "failed")) : (humanFileSize(item.byteSize)) }), _jsx(TfButton, { variant: "icon", onClick: onRemove, "aria-label": `Remove ${item.filename}`, children: _jsx(CloseIcon, {}) })] }));
+}
+export function attachmentAcceptOf(policy) {
+    const kinds = policy.kinds;
+    if (kinds.includes("file")) {
+        return undefined;
+    }
+    const families = [];
+    if (kinds.includes("image")) {
+        families.push("image/png,image/jpeg,image/gif,image/webp");
+    }
+    if (kinds.includes("document")) {
+        families.push(".pdf,.txt,.md,.csv,.html,application/pdf,text/plain");
+    }
+    if (kinds.includes("video")) {
+        families.push("video/*");
+    }
+    if (kinds.includes("audio")) {
+        families.push("audio/*");
+    }
+    return families.join(",");
+}

package/dist/components/composer-banner.d.ts

@@ -0,0 +1,4 @@
+import type { ConversationGate } from "../core/connect-gate.js";
+export declare function ComposerBanner({ gate }: {
+    gate: ConversationGate;
+}): import("react").JSX.Element | null;

package/dist/components/composer-banner.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ConversationGateCard } from "./conversation-gate-card.js";
+import { SubscriptionPlanNotice } from "./subscription-plan-notice.js";
+import { useOptionalAssistantSession } from "./teaflask-assistant-provider.js";
+export function ComposerBanner({ gate }) {
+    const session = useOptionalAssistantSession();
+    if (gate.kind === "connect" ||
+        gate.kind === "wait" ||
+        gate.kind === "verifying") {
+        return _jsx(ConversationGateCard, { gate: gate });
+    }
+    if (gate.kind === "none" && session !== null) {
+        return _jsx(SubscriptionPlanNotice, {});
+    }
+    return null;
+}

package/dist/components/composer.d.ts

@@ -0,0 +1,4 @@
+export declare function Composer({ compact, surface, }: {
+    compact?: boolean;
+    surface?: string;
+}): import("react").JSX.Element;

package/dist/components/composer.js

@@ -0,0 +1,250 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState, } from "react";
+import { ASSISTANT_MAX_ATTACHMENTS, ASSISTANT_MESSAGE_MAX_CHARS, } from "../contract/threads.js";
+import { humanFileSize } from "./human-file-size.js";
+import { attachmentAcceptOf, ComposerAttachmentChip, } from "./composer-attachment-chip.js";
+import { ComposerBanner } from "./composer-banner.js";
+import { useConversation } from "./conversation-context.js";
+import { ArrowUpIcon, PlusIcon, StopIcon } from "./icons.js";
+import { TfButton } from "./primitives/button.js";
+import { TfFileInput } from "./primitives/file-input.js";
+import { TfTextarea } from "./primitives/textarea.js";
+import { ModelPickerShelf } from "./model-picker-chip.js";
+import { useOptionalAssistantSession } from "./teaflask-assistant-provider.js";
+import { NO_GATE } from "../core/connect-gate.js";
+import { attachmentDraftFailed, capSlotsSpentBy, CHARACTER_COUNT_VISIBLE_FROM, composerKeyHandlersOf, mintAttachmentDraftId, pickCapOf, } from "../core/composer-policy.js";
+import { ObservableCell } from "../core/observable-cell.js";
+import { useCell } from "./use-store-cell.js";
+const NO_POLICY = new ObservableCell(null);
+const NO_GATE_CELL = new ObservableCell(NO_GATE);
+const COMPOSER_MAX_HEIGHT_PX = 200;
+export function Composer({ compact = false, surface = "page", }) {
+    const { busy, pendingSend, sendMessage, composerRefocusPending, markComposerRefocusHandled, stopping, stopTurn, composerInput, setDraft, setAttachments, noteComposerFocus, takeComposerCaretReturn, } = useConversation();
+    const { draft, attachments } = useCell(composerInput);
+    const session = useOptionalAssistantSession();
+    const policy = useCell(session?.attachmentPolicy ?? NO_POLICY);
+    const gate = useCell(session?.conversationGate ?? NO_GATE_CELL);
+    const send = useComposerSend({
+        busy,
+        draft,
+        attachments,
+        composerInput,
+        sendMessage,
+        setDraft,
+        setAttachments,
+    });
+    const attach = useComposerAttachments({
+        session,
+        policy,
+        attachments,
+        setAttachments,
+    });
+    const { textareaRef, onTextareaFocus, onTextareaBlur } = useComposerFocus({
+        surface,
+        draft,
+        busy,
+        composerRefocusPending,
+        markComposerRefocusHandled,
+        noteComposerFocus,
+        takeComposerCaretReturn,
+    });
+    return (_jsx("div", { "data-tf-composer-root": "", "data-tf-composer-ground": "", className: "tf:relative tf:bg-tf-background tf:pt-1 tf:pb-4", children: _jsxs("div", { className: "tf:mx-auto tf:w-full tf:px-4 " +
+                (compact ? "tf:max-w-xl" : "tf:max-w-3xl"), children: [_jsx(ComposerBanner, { gate: gate }), _jsx(ComposerSlabAndShelf, { draft: draft, setDraft: setDraft, attachments: attachments, policy: policy, gate: gate, busy: busy, pendingSend: pendingSend, stopping: stopping, stopTurn: stopTurn, send: send, attach: attach, textareaRef: textareaRef, onTextareaFocus: onTextareaFocus, onTextareaBlur: onTextareaBlur })] }) }));
+}
+function useComposerSend({ busy, draft, attachments, composerInput, sendMessage, setDraft, setAttachments, }) {
+    const [sending, setSending] = useState(false);
+    const trimmedDraft = draft.trim();
+    const readyAttachments = attachments.flatMap((item) => item.status === "ready" && item.attachment !== undefined
+        ? [item.attachment]
+        : []);
+    const readyIds = readyAttachments.map((attachment) => attachment.id);
+    const uploadsSettling = attachments.some((item) => item.status === "uploading");
+    const uploadsFailed = attachments.some(attachmentDraftFailed);
+    const nothingToSend = trimmedDraft === "" && readyIds.length === 0;
+    const sendDisabled = nothingToSend || busy || sending || uploadsSettling || uploadsFailed;
+    async function submitDraft() {
+        if (sendDisabled) {
+            return;
+        }
+        const submittedDraft = trimmedDraft;
+        const submittedAttachments = attachments;
+        const optimisticAttachments = readyAttachments.map((attachment) => ({
+            id: attachment.id,
+            kind: attachment.kind,
+            format: attachment.format,
+            filename: attachment.filename,
+            byte_size: attachment.byte_size,
+        }));
+        setSending(true);
+        const submittedScope = composerInput.get().scope;
+        const landing = sendMessage(submittedDraft, readyIds, optimisticAttachments);
+        setDraft("");
+        setAttachments([]);
+        try {
+            const landed = await landing;
+            if (!landed && composerInput.get().scope === submittedScope) {
+                setDraft((current) => current === "" ? submittedDraft : `${submittedDraft}\n${current}`);
+                setAttachments((current) => current.length === 0
+                    ? submittedAttachments
+                    : [...submittedAttachments, ...current]);
+            }
+        }
+        finally {
+            setSending(false);
+        }
+    }
+    return { sending, sendDisabled, submitDraft };
+}
+function useComposerAttachments({ session, policy, attachments, setAttachments, }) {
+    useEffect(() => {
+        session?.ensureAssistantConfig();
+    }, [session]);
+    function addFiles(files) {
+        if (files === null || policy === null || session === null) {
+            return;
+        }
+        const { store } = session;
+        const room = Math.min(policy.max_per_message, ASSISTANT_MAX_ATTACHMENTS);
+        let taken = capSlotsSpentBy(attachments);
+        for (const file of Array.from(files)) {
+            const localId = mintAttachmentDraftId();
+            const entry = {
+                localId,
+                filename: file.name !== "" ? file.name : "attachment",
+                byteSize: file.size,
+                status: "uploading",
+            };
+            if (taken >= room) {
+                setAttachments((current) => [
+                    ...current,
+                    {
+                        ...entry,
+                        status: "failed",
+                        error: `Too many files — the limit is ${String(room)} per message.`,
+                    },
+                ]);
+                continue;
+            }
+            const cap = pickCapOf(file, policy.max_bytes_by_kind);
+            if (file.size > cap.bytes) {
+                setAttachments((current) => [
+                    ...current,
+                    {
+                        ...entry,
+                        status: "failed",
+                        error: `Too large — the limit for ${cap.label} is ${humanFileSize(cap.bytes)}.`,
+                    },
+                ]);
+                continue;
+            }
+            taken += 1;
+            setAttachments((current) => [...current, entry]);
+            store.uploadAttachment(file).then((settled) => {
+                setAttachments((current) => current.map((item) => item.localId === localId
+                    ? { ...item, status: "ready", attachment: settled }
+                    : item));
+            }, (error) => {
+                setAttachments((current) => current.map((item) => item.localId === localId
+                    ? {
+                        ...item,
+                        status: "failed",
+                        error: error instanceof Error
+                            ? error.message
+                            : "The upload failed.",
+                    }
+                    : item));
+            });
+        }
+    }
+    function removeAttachment(localId) {
+        setAttachments((current) => current.filter((item) => item.localId !== localId));
+    }
+    const attachmentRoom = policy === null
+        ? 0
+        : Math.min(policy.max_per_message, ASSISTANT_MAX_ATTACHMENTS);
+    return { attachmentRoom, addFiles, removeAttachment };
+}
+function useComposerFocus({ surface, draft, busy, composerRefocusPending, markComposerRefocusHandled, noteComposerFocus, takeComposerCaretReturn, }) {
+    const textareaRef = useRef(null);
+    const ownsFocusRef = useRef(false);
+    useEffect(() => {
+        const box = textareaRef.current;
+        return () => {
+            if (ownsFocusRef.current && document.activeElement !== box) {
+                noteComposerFocus(null);
+            }
+        };
+    }, [noteComposerFocus]);
+    useEffect(() => {
+        if (busy || !composerRefocusPending) {
+            return;
+        }
+        markComposerRefocusHandled();
+        if (_focusWasDroppedByTheRemount(textareaRef.current)) {
+            textareaRef.current?.focus();
+        }
+    }, [busy, composerRefocusPending, markComposerRefocusHandled]);
+    useEffect(() => {
+        if (takeComposerCaretReturn(surface) &&
+            _focusWasDroppedByTheRemount(textareaRef.current)) {
+            textareaRef.current?.focus();
+        }
+    }, [takeComposerCaretReturn, surface]);
+    useLayoutEffect(() => {
+        const textarea = textareaRef.current;
+        if (textarea === null) {
+            return;
+        }
+        textarea.style.height = "auto";
+        if (textarea.scrollHeight === 0) {
+            return;
+        }
+        textarea.style.height = `${String(Math.min(textarea.scrollHeight, COMPOSER_MAX_HEIGHT_PX))}px`;
+    }, [draft]);
+    return {
+        textareaRef,
+        onTextareaFocus: () => {
+            ownsFocusRef.current = true;
+            noteComposerFocus(surface);
+        },
+        onTextareaBlur: () => {
+            ownsFocusRef.current = false;
+            noteComposerFocus(null);
+        },
+    };
+}
+function ComposerSlabAndShelf({ draft, setDraft, attachments, policy, gate, busy, pendingSend, stopping, stopTurn, send, attach, textareaRef, onTextareaFocus, onTextareaBlur, }) {
+    const { stopOnEscape, composerKeys } = composerKeyHandlersOf({
+        busy,
+        pendingSend,
+        stopping,
+        stopTurn,
+        submit: send.submitDraft,
+    });
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-tf-composer-wash": "", className: "tf:relative tf:flex tf:flex-col tf:rounded-3xl tf:border tf:p-2 " +
+                    "tf:transition-[border-color,box-shadow] " +
+                    "tf:focus-within:border-tf-foreground/25", children: [attachments.length > 0 ? (_jsx("div", { className: "tf:flex tf:flex-wrap tf:gap-1.5 tf:px-1 tf:pt-1 tf:pb-2", children: attachments.map((item) => (_jsx(ComposerAttachmentChip, { item: item, onRemove: () => {
+                                attach.removeAttachment(item.localId);
+                            } }, item.localId))) })) : null, _jsx(TfTextarea, { ref: textareaRef, rows: 2, variant: "bare", "data-tf-autofocus": "", value: draft, maxLength: ASSISTANT_MESSAGE_MAX_CHARS, placeholder: "Ask anything", "aria-label": "Message", onChange: (event) => {
+                            setDraft(event.target.value);
+                        }, onKeyDown: composerKeys, onFocus: onTextareaFocus, onBlur: onTextareaBlur }), _jsx(ComposerControlsRow, { draft: draft, attachments: attachments, policy: policy, busy: busy, pendingSend: pendingSend, stopping: stopping, stopTurn: stopTurn, stopOnEscape: stopOnEscape, send: send, attach: attach, textareaRef: textareaRef })] }), gate.kind === "none" ? _jsx(ModelPickerShelf, {}) : null] }));
+}
+function ComposerControlsRow({ draft, attachments, policy, busy, pendingSend, stopping, stopTurn, stopOnEscape, send, attach, textareaRef, }) {
+    const fileInputRef = useRef(null);
+    return (_jsxs("div", { className: "tf:flex tf:items-center tf:gap-2 tf:pt-1", children: [policy !== null ? (_jsxs(_Fragment, { children: [_jsx(TfFileInput, { ref: fileInputRef, multiple: true, accept: attachmentAcceptOf(policy), onPickFiles: attach.addFiles }), _jsx(TfButton, { variant: "icon", onClick: () => {
+                            fileInputRef.current?.click();
+                        }, disabled: capSlotsSpentBy(attachments) >= attach.attachmentRoom ||
+                            send.sending, "aria-label": "Attach a file", children: _jsx(PlusIcon, {}) })] })) : null, _jsxs("div", { className: "tf:ml-auto tf:flex tf:shrink-0 tf:items-center tf:gap-2", children: [stopping ? (_jsx("span", { role: "status", className: "tf:text-xs tf:text-tf-muted-foreground", children: "Stopping\u2026" })) : null, draft.length >= CHARACTER_COUNT_VISIBLE_FROM ? (_jsxs("span", { className: "tf:text-xs tf:text-tf-muted-foreground", children: [draft.length, "/", ASSISTANT_MESSAGE_MAX_CHARS] })) : null, busy && !pendingSend ? (_jsx(TfButton, { variant: "stop", onClick: () => {
+                            void stopTurn();
+                            textareaRef.current?.focus();
+                        }, onKeyDown: stopOnEscape, "aria-disabled": stopping, "aria-label": "Stop generating", children: _jsx(StopIcon, {}) })) : (_jsx(TfButton, { variant: "send", onClick: () => {
+                            void send.submitDraft();
+                        }, disabled: send.sendDisabled, "aria-label": send.sending ? "Sending message" : "Send message", children: _jsx(ArrowUpIcon, {}) }))] })] }));
+}
+function _focusWasDroppedByTheRemount(textarea) {
+    const active = document.activeElement;
+    return (active === null ||
+        active === document.body ||
+        (textarea !== null && active === textarea.closest("dialog")));
+}

package/dist/components/conversation-context.d.ts

@@ -0,0 +1,4 @@
+import type { ComposerContract } from "../core/conversation-store.js";
+export type { ComposerContract };
+export declare const ConversationContext: import("react").Context<ComposerContract | null>;
+export declare function useConversation(): ComposerContract;

package/dist/components/conversation-context.js

@@ -0,0 +1,10 @@
+"use client";
+import { createContext, useContext } from "react";
+export const ConversationContext = createContext(null);
+export function useConversation() {
+    const value = useContext(ConversationContext);
+    if (value === null) {
+        throw new Error("useConversation must be called under <TeaflaskAssistantProvider> (any entry, including @teaflask/assistant/headless).");
+    }
+    return value;
+}

package/dist/components/conversation-gate-card.d.ts

@@ -0,0 +1,8 @@
+import type { ConversationGate } from "../core/connect-gate.js";
+export declare function ConversationGateCard({ gate, }: {
+    gate: Exclude<ConversationGate, {
+        kind: "none";
+    } | {
+        kind: "sign_in";
+    }>;
+}): import("react").JSX.Element;

package/dist/components/conversation-gate-card.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { OpenAiMarkIcon } from "./icons.js";
+import { TfButton } from "./primitives/button.js";
+import { pollStanding } from "./standing-poll.js";
+import { checkingPlanSentenceOf, HeartbeatLine, ManageUsageLink, notEligibleSentenceOf, planLimitSentenceOf, } from "./subscription-connect-arms.js";
+import { ConnectFlow, DISCLOSURE_LINE, providerNameOf, useSubscriptionConnectFlow, } from "./subscription-connect-flow.js";
+import { useRefreshStandingAndGate, useSubscriptionRecheck, } from "./subscription-recheck.js";
+import { useAssistantSession } from "./teaflask-assistant-provider.js";
+import { useCell } from "./use-store-cell.js";
+const _MAX_TIMEOUT_MS = 2 ** 31 - 1;
+export function ConversationGateCard({ gate, }) {
+    const session = useAssistantSession();
+    useEffect(() => {
+        session.refreshSubscriptions();
+    }, [session]);
+    const refreshStandingAndGate = useRefreshStandingAndGate();
+    return (_jsx("div", { className: "tf:mb-3 tf:flex tf:flex-col tf:gap-2 tf:rounded-xl tf:bg-tf-accent tf:p-3", children: gate.kind === "connect" ? (_jsx(ConnectGateBody, { gate: gate, refresh: refreshStandingAndGate })) : gate.kind === "wait" ? (_jsx(WaitGateBody, { retryAtMs: gate.retryAtMs, refresh: refreshStandingAndGate })) : (_jsx(VerifyingGateBody, { refresh: refreshStandingAndGate })) }));
+}
+function ConnectGateBody({ gate, refresh, }) {
+    const session = useAssistantSession();
+    const statuses = useCell(session.subscriptions);
+    const status = _theGatesStanding(gate, statuses);
+    if (status === null) {
+        return _jsx(HeartbeatLine, { sentence: "One moment\u2026", tone: "foreground" });
+    }
+    return _jsx(ConnectBannerRow, { status: status, gate: gate, refresh: refresh });
+}
+function ConnectBannerRow({ status, gate, refresh, }) {
+    const session = useAssistantSession();
+    const name = providerNameOf(status.provider);
+    const connect = useSubscriptionConnectFlow(status, session.session, refresh, () => {
+        session.notePlanSignedIn(status.provider);
+    });
+    if (connect.flow.kind !== "idle") {
+        return (_jsx(ConnectFlow, { name: name, flow: connect.flow, errorSentence: connect.errorSentence, onBegin: connect.begin, onCancel: connect.cancel, onTabOpened: connect.noteTabOpened }));
+    }
+    const taster = gate.reason === "taster_exhausted";
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "tf:flex tf:flex-wrap tf:items-center tf:gap-x-3 tf:gap-y-2", children: [_jsxs("p", { className: "tf:m-0 tf:flex tf:min-w-56 tf:flex-1 tf:items-center tf:gap-2 tf:text-tf-label tf:text-tf-foreground", children: [_jsx(OpenAiMarkIcon, {}), taster
+                                ? "You've used the free preview on this assistant."
+                                : status.bounce_cause === "not_eligible"
+                                    ? notEligibleSentenceOf(name)
+                                    : `Your ${name} connection stopped working.`] }), _jsx(TfButton, { variant: "primary", className: "tf:shrink-0", onClick: connect.begin, children: taster ? `Sign in with ${name}` : `Reconnect ${name}` })] }), taster ? (_jsx("p", { className: "tf:m-0 tf:text-xs tf:text-tf-muted-foreground", children: DISCLOSURE_LINE })) : null] }));
+}
+function WaitGateBody({ retryAtMs, refresh, }) {
+    const session = useAssistantSession();
+    const statuses = useCell(session.subscriptions);
+    const status = _thePlanLimitedStanding(statuses);
+    const name = providerNameOf(status?.provider ?? "openai_chatgpt");
+    const recheck = useSubscriptionRecheck(status, session.session, refresh);
+    useEffect(() => {
+        if (retryAtMs === null) {
+            return;
+        }
+        const timer = window.setTimeout(refresh, Math.min(Math.max(1000, retryAtMs - Date.now()), _MAX_TIMEOUT_MS));
+        return () => {
+            window.clearTimeout(timer);
+        };
+    }, [retryAtMs, refresh]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "tf:flex tf:flex-wrap tf:items-center tf:gap-x-3 tf:gap-y-2", children: [_jsxs("p", { className: "tf:m-0 tf:flex tf:min-w-56 tf:flex-1 tf:items-center tf:gap-2 tf:text-tf-label tf:text-tf-foreground", children: [_jsx(OpenAiMarkIcon, {}), planLimitSentenceOf(name)] }), recheck.rechecking ? (_jsx(HeartbeatLine, { sentence: checkingPlanSentenceOf(name) })) : (_jsxs("div", { className: "tf:flex tf:shrink-0 tf:flex-wrap tf:items-center tf:gap-2", children: [_jsx(ManageUsageLink, { provider: status?.provider ?? "openai_chatgpt" }), _jsx(TfButton, { variant: "outline", disabled: status === null, onClick: recheck.recheck, children: "Check again" })] }))] }), recheck.errorSentence === null ? null : (_jsx("p", { className: "tf:m-0 tf:text-tf-label tf:text-tf-destructive", role: "alert", children: recheck.errorSentence }))] }));
+}
+function _thePlanLimitedStanding(statuses) {
+    return (statuses?.find((status) => status.connected &&
+        status.offered &&
+        status.state === "bounced" &&
+        status.bounce_cause === "quota") ?? null);
+}
+function VerifyingGateBody({ refresh }) {
+    const session = useAssistantSession();
+    const statuses = useCell(session.subscriptions);
+    const aCredentialIsVerifying = statuses?.some((status) => status.state === "verifying") ?? false;
+    useEffect(() => pollStanding(refresh), [statuses, refresh]);
+    return (_jsx(HeartbeatLine, { sentence: aCredentialIsVerifying
+            ? "Verifying your ChatGPT connection…"
+            : "Re-checking your plan — one moment…", tone: "foreground" }));
+}
+function _theGatesStanding(gate, statuses) {
+    if (statuses === null) {
+        return null;
+    }
+    const named = statuses.find((status) => gate.providers.includes(status.provider));
+    if (named !== undefined) {
+        return named;
+    }
+    return statuses.find((status) => status.offered || status.connected) ?? null;
+}

package/dist/components/conversation-surfaces-provider.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+import type { AssistantConversationStore } from "../core/conversation-store.js";
+export declare function ConversationSurfacesProvider({ store, children, }: {
+    store: AssistantConversationStore;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/conversation-surfaces-provider.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { ApprovalsContext } from "./approval-context.js";
+import { ConversationContext } from "./conversation-context.js";
+import { ElicitationsContext, } from "./elicitation-context.js";
+import { useCell } from "./use-store-cell.js";
+export function ConversationSurfacesProvider({ store, children, }) {
+    const composerContract = useCell(store.composer);
+    const approvalCards = useCell(store.approvals);
+    const approvalSurface = useMemo(() => ({
+        cards: approvalCards,
+        submitDecision: store.submitApprovalDecision,
+    }), [approvalCards, store]);
+    const elicitationCards = useCell(store.elicitations);
+    const elicitationSurface = useMemo(() => ({
+        cards: elicitationCards,
+        submitQuestionAnswers: store.submitQuestionAnswers,
+        cancelQuestionSet: store.cancelQuestionSet,
+        drafts: store.questionDrafts,
+    }), [elicitationCards, store]);
+    return (_jsx(ConversationContext.Provider, { value: composerContract, children: _jsx(ApprovalsContext.Provider, { value: approvalSurface, children: _jsx(ElicitationsContext.Provider, { value: elicitationSurface, children: children }) }) }));
+}

package/dist/components/conversation-view.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import type { AssistantConversation } from "./use-assistant-conversation.js";
+export type AssistantSuggestionKind = "ask" | "review" | "write" | "learn";
+export interface AssistantSuggestion {
+    prompt: string;
+    kind?: AssistantSuggestionKind;
+}
+export type AssistantSuggestionInput = string | AssistantSuggestion;
+export declare function ConversationView({ core, surface, suggestions, welcomeTitle, welcomeMark, }: {
+    core: AssistantConversation;
+    surface: string;
+    suggestions?: readonly AssistantSuggestionInput[];
+    welcomeTitle?: string;
+    welcomeMark?: ReactNode;
+}): import("react").JSX.Element;
+export declare function TranscriptSkeleton(): import("react").JSX.Element;
+export declare function SetupErrorState({ message, code, }: {
+    message: string;
+    code: string;
+}): import("react").JSX.Element;
+export declare const SUGGESTION_MARKS: Record<AssistantSuggestionKind, () => ReactNode>;