@twentyfourg/chat-kit 1.0.0-beta.1

package/dist/composables/useChatEngine.d.ts

@@ -0,0 +1,335 @@
+import { type TypewriterSetting } from '../services/typewriter';
+import type { MathSetting } from '../services/math';
+import type { AgentDetails, ChatCitation, ChatEvent, ChatInputMode, CreateThreadBody, CreateThreadResponse, FeedbackResponse, MessageFeedback, MessageListResponse, QuotaResponse, SendMessageBody, StopMessageResponse, Thread, UsedSource } from '../types';
+/**
+ * What the engine needs from a chat backend. The real Base Camp client
+ * satisfies this, and so does the mock used for tests and local development.
+ */
+export interface ChatTransport {
+    getAgent(agentId: string): Promise<AgentDetails>;
+    createThread(agentId: string, body?: CreateThreadBody): Promise<CreateThreadResponse>;
+    sendMessage(agentId: string, threadId: string, body: SendMessageBody, options?: {
+        signal?: AbortSignal;
+    }): Promise<Response>;
+    stopMessage(agentId: string, threadId: string, assistantMessageId: string): Promise<StopMessageResponse>;
+    submitFeedback(agentId: string, threadId: string, messageId: string, feedback: MessageFeedback): Promise<FeedbackResponse>;
+    clearFeedback(agentId: string, threadId: string, messageId: string): Promise<FeedbackResponse>;
+    /**
+     * The two history methods are optional so a minimal transport stays easy to
+     * write. The real Base Camp client implements both; the engine's listThreads
+     * and loadThread refuse clearly when a transport leaves them out.
+     *
+     * getThreads returns at most `limit` threads, newest first, in whatever
+     * status they are in; the engine does the filtering.
+     */
+    getThreads?(agentId: string, limit: number): Promise<Thread[]>;
+    getMessages?(agentId: string, threadId: string): Promise<MessageListResponse>;
+    /**
+     * The sender's remaining message allowance. Optional like the history
+     * methods, and read on the engine's own initiative rather than on request,
+     * so a transport without it leaves `quota` null instead of refusing.
+     */
+    getQuota?(agentId: string): Promise<QuotaResponse>;
+}
+/** One message as the components render it. */
+export interface ChatEngineMessage {
+    /** Local id, stable for the life of the conversation. */
+    id: string;
+    role: 'user' | 'assistant';
+    /** The raw text. For assistant messages it grows while streaming. */
+    text: string;
+    /** Rendered, sanitized HTML for assistant messages. */
+    html: string;
+    /** The model's reasoning for this reply; grows while it streams. Empty for user messages. */
+    thinking: string;
+    basecampMessageId?: string;
+    sources: UsedSource[];
+    /** Passage-level inline citations; stays empty for prose-mode agents. */
+    citations: ChatCitation[];
+    feedback: MessageFeedback | null;
+    isOutOfScope: boolean;
+    isStreaming: boolean;
+    /**
+     * True while the server is still sending this reply.
+     *
+     * Goes false when the stream closes, which is when citations land and their
+     * popovers start working. That is earlier than `isStreaming`, because the
+     * reveal carries on typing out text that has already arrived, so this is
+     * the one to watch for "is the server still working".
+     */
+    isReceiving: boolean;
+    failed: boolean;
+    /** How the user entered this message (typed or voice); only user messages set it. */
+    inputMode?: ChatInputMode;
+}
+/**
+ * What the engine needs to exist at all: which agent, reached how. Not
+ * settings, and there are no defaults to fall back on.
+ */
+export interface ChatEngineConnection {
+    transport: ChatTransport;
+    agentId: string;
+}
+/**
+ * Everything an app may adjust. All optional, and every default is the
+ * behaviour the kit had before the setting existed, so an engine built from
+ * the connection alone is a working chat.
+ */
+export interface ChatEngineSettings {
+    /**
+     * Reveals answers a few characters at a time instead of in raw network
+     * bursts. On unless explicitly turned off. Pass { speed } to retune the
+     * pace for an app: 2 types twice as fast as the default, 0.5 at half.
+     */
+    typewriter?: TypewriterSetting;
+    /**
+     * Decides whether a finished answer is the assistant declining a question it
+     * cannot help with. Those replies get the out-of-scope marking and no thumbs
+     * rating. Apps that recognise a set decline message match against it here.
+     */
+    isOutOfScope?: (text: string) => boolean;
+    /**
+     * Renders `$...$` and `$$...$$` in answers as formulas. Needs the optional
+     * `mathlive` peer dependency (`pnpm add mathlive`), which is loaded on the
+     * first answer that contains any. Leave off unless the corpus has math: `$`
+     * is also a currency symbol, and prices should stay prices.
+     *
+     * `true` uses MathLive's defaults; pass `{ fontsDirectory }` to say where
+     * its font files are served from.
+     */
+    showMath?: MathSetting;
+    /**
+     * Called when something the app may want to record happens: a turn
+     * finishes, a thumbs rating is saved, a citation is opened. Listening
+     * never changes how the chat behaves, even if the listener throws.
+     */
+    onEvent?: (event: ChatEvent) => void;
+}
+/** The two halves together, as useChatEngine takes them. */
+export type ChatEngineOptions = ChatEngineConnection & ChatEngineSettings;
+/** One page of a history rail, from listThreads. */
+export interface ThreadPage {
+    /** Open threads only, newest first. */
+    threads: Thread[];
+    /** True when the page came back full, so asking for more may find more. */
+    mightHaveMore: boolean;
+}
+export type ChatStatus = 'idle' | 'thinking' | 'streaming';
+export declare function useChatEngine(options: ChatEngineOptions): {
+    agent: Readonly<import("vue").Ref<{
+        readonly id: string;
+        readonly name: string;
+        readonly description: string;
+        readonly firstMessage: string;
+        readonly config?: {
+            readonly showThinkingProcess: boolean;
+            readonly showThinkingProcessButton: boolean;
+            readonly enableVoiceInteraction?: boolean | undefined;
+            readonly showExpertLocker: boolean;
+            readonly showKnowledgeSources: boolean;
+            readonly showSourcesButton: boolean;
+            readonly defaultLockerViewThisExpertOnly: boolean;
+            readonly showTokenUsageIndicator: boolean;
+            readonly chatTokenLimit: number;
+            readonly conversationType: import("..").ConversationType;
+        } | undefined;
+        readonly variableNames?: readonly string[] | undefined;
+        readonly knowledgeSource: readonly {
+            readonly type: import("..").KnowledgeSourceKind;
+            readonly uniqueExternalId: string | null;
+            readonly baseCampId: string | null;
+        }[];
+    } | null, {
+        readonly id: string;
+        readonly name: string;
+        readonly description: string;
+        readonly firstMessage: string;
+        readonly config?: {
+            readonly showThinkingProcess: boolean;
+            readonly showThinkingProcessButton: boolean;
+            readonly enableVoiceInteraction?: boolean | undefined;
+            readonly showExpertLocker: boolean;
+            readonly showKnowledgeSources: boolean;
+            readonly showSourcesButton: boolean;
+            readonly defaultLockerViewThisExpertOnly: boolean;
+            readonly showTokenUsageIndicator: boolean;
+            readonly chatTokenLimit: number;
+            readonly conversationType: import("..").ConversationType;
+        } | undefined;
+        readonly variableNames?: readonly string[] | undefined;
+        readonly knowledgeSource: readonly {
+            readonly type: import("..").KnowledgeSourceKind;
+            readonly uniqueExternalId: string | null;
+            readonly baseCampId: string | null;
+        }[];
+    } | null>>;
+    agentReady: Promise<AgentDetails | null>;
+    threadId: Readonly<import("vue").Ref<string | null, string | null>>;
+    messages: import("vue").Ref<{
+        id: string;
+        role: "user" | "assistant";
+        text: string;
+        html: string;
+        thinking: string;
+        basecampMessageId?: string | undefined;
+        sources: {
+            entityId: string | null;
+            metadata?: {
+                [x: string]: unknown;
+                title?: string | undefined;
+                entityId?: string | undefined;
+                page?: number | undefined;
+                textPage?: number | undefined;
+                link?: string | undefined;
+                screenshotUrl?: string | undefined;
+            } | undefined;
+            screenshotUrl?: string | undefined;
+            results: {
+                index?: number | undefined;
+                content?: string | undefined;
+                score?: number | undefined;
+                metadata?: {
+                    [x: string]: unknown;
+                    title?: string | undefined;
+                    entityId?: string | undefined;
+                    page?: number | undefined;
+                    textPage?: number | undefined;
+                    link?: string | undefined;
+                    screenshotUrl?: string | undefined;
+                } | undefined;
+            }[];
+        }[];
+        citations: {
+            ref: number;
+            label: number;
+            passage: string;
+            entityId?: string | undefined;
+            variationId?: string | undefined;
+            title?: string | undefined;
+            link?: string | undefined;
+            canonicalLink?: string | undefined;
+            sourceId?: string | undefined;
+            screenshotUrl?: string | undefined;
+            page?: number | undefined;
+            textPage?: number | undefined;
+        }[];
+        feedback: MessageFeedback | null;
+        isOutOfScope: boolean;
+        isStreaming: boolean;
+        isReceiving: boolean;
+        failed: boolean;
+        inputMode?: ChatInputMode | undefined;
+    }[], ChatEngineMessage[] | {
+        id: string;
+        role: "user" | "assistant";
+        text: string;
+        html: string;
+        thinking: string;
+        basecampMessageId?: string | undefined;
+        sources: {
+            entityId: string | null;
+            metadata?: {
+                [x: string]: unknown;
+                title?: string | undefined;
+                entityId?: string | undefined;
+                page?: number | undefined;
+                textPage?: number | undefined;
+                link?: string | undefined;
+                screenshotUrl?: string | undefined;
+            } | undefined;
+            screenshotUrl?: string | undefined;
+            results: {
+                index?: number | undefined;
+                content?: string | undefined;
+                score?: number | undefined;
+                metadata?: {
+                    [x: string]: unknown;
+                    title?: string | undefined;
+                    entityId?: string | undefined;
+                    page?: number | undefined;
+                    textPage?: number | undefined;
+                    link?: string | undefined;
+                    screenshotUrl?: string | undefined;
+                } | undefined;
+            }[];
+        }[];
+        citations: {
+            ref: number;
+            label: number;
+            passage: string;
+            entityId?: string | undefined;
+            variationId?: string | undefined;
+            title?: string | undefined;
+            link?: string | undefined;
+            canonicalLink?: string | undefined;
+            sourceId?: string | undefined;
+            screenshotUrl?: string | undefined;
+            page?: number | undefined;
+            textPage?: number | undefined;
+        }[];
+        feedback: MessageFeedback | null;
+        isOutOfScope: boolean;
+        isStreaming: boolean;
+        isReceiving: boolean;
+        failed: boolean;
+        inputMode?: ChatInputMode | undefined;
+    }[]>;
+    status: Readonly<import("vue").Ref<ChatStatus, ChatStatus>>;
+    error: Readonly<import("vue").Ref<Error | null, Error | null>>;
+    errorKind: import("vue").ComputedRef<"error" | "rate-limited" | null>;
+    busy: import("vue").ComputedRef<boolean>;
+    tokenUsage: Readonly<import("vue").Ref<{
+        readonly cumulative: {
+            readonly totalInputTokens: number;
+            readonly totalOutputTokens: number;
+            readonly totalTokens: number;
+            readonly percentOfContextLimit: number;
+            readonly percentOfCumulativeLimit: number;
+        };
+        readonly active: {
+            readonly inputTokens: number;
+            readonly outputTokens: number;
+            readonly totalTokens: number;
+            readonly messageCount: number;
+            readonly percentOfContextLimit: number;
+        };
+        readonly contextLimit: number;
+        readonly cumulativeLimit: number;
+    } | null, {
+        readonly cumulative: {
+            readonly totalInputTokens: number;
+            readonly totalOutputTokens: number;
+            readonly totalTokens: number;
+            readonly percentOfContextLimit: number;
+            readonly percentOfCumulativeLimit: number;
+        };
+        readonly active: {
+            readonly inputTokens: number;
+            readonly outputTokens: number;
+            readonly totalTokens: number;
+            readonly messageCount: number;
+            readonly percentOfContextLimit: number;
+        };
+        readonly contextLimit: number;
+        readonly cumulativeLimit: number;
+    } | null>>;
+    quota: Readonly<import("vue").Ref<{
+        readonly limit: number | "unlimited";
+        readonly remaining: number | "unlimited";
+        readonly resetAt: string;
+    } | null, {
+        readonly limit: number | "unlimited";
+        readonly remaining: number | "unlimited";
+        readonly resetAt: string;
+    } | null>>;
+    liveThinking: import("vue").ComputedRef<string>;
+    sendMessage: (text: string, inputMode?: ChatInputMode) => Promise<void>;
+    stopGeneration: () => Promise<void>;
+    newConversation: () => Promise<void>;
+    listThreads: (limit?: number) => Promise<ThreadPage>;
+    loadThread: (id: string) => Promise<void>;
+    setFeedback: (messageId: string, value: MessageFeedback) => Promise<void>;
+    noteCitationClick: (messageId: string, citation: ChatCitation) => void;
+    retry: () => Promise<void>;
+};
+export type ChatEngine = ReturnType<typeof useChatEngine>;

package/dist/composables/useDictation.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Voice dictation through the browser's built-in speech recognition.
+ *
+ * Chrome, Edge and Safari expose the Web Speech API (Safari under the webkit
+ * prefix); Firefox has no implementation, so callers should hide their mic
+ * button when `isSupported` is false. Chrome and Edge run recognition on
+ * Google's servers rather than on the device, which matters to
+ * privacy-sensitive products.
+ *
+ * The transcript is written into the caller's text ref as the user speaks,
+ * after whatever was already typed. Nothing is submitted from here; the user
+ * reviews the dictated text and sends it like a typed message. Dictation
+ * stops itself after a stretch of silence, so the mic is not left hot while
+ * the user reads their question back.
+ */
+import { type Ref } from 'vue';
+export interface DictationOptions {
+    /** Recognition language, as a BCP 47 tag. */
+    lang?: string;
+    /** Milliseconds of silence before dictation stops itself. 0 turns this off. */
+    idleMs?: number;
+}
+export default function useDictation(text: Ref<string>, options?: DictationOptions): {
+    /** False where the browser has no speech recognition, notably Firefox. */
+    isSupported: boolean;
+    isListening: Ref<boolean, boolean>;
+    toggle: () => void;
+    stop: () => void;
+};

package/dist/copy.d.ts

@@ -0,0 +1,144 @@
+export interface ChatCopy {
+    /**
+     * 'welcome' is shown before the first message is sent. Apps that want more than text here,
+     * such as a logo or buttons, use the chat's welcome slot instead.
+     */
+    welcome: {
+        eyebrow: string;
+        heading: string;
+        body: string;
+    };
+    /** The names shown above each message. */
+    roles: {
+        assistant: string;
+        user: string;
+    };
+    composer: {
+        placeholder: string;
+        /** Tooltip on the mic spot when the browser has no speech recognition. */
+        micUnsupported: string;
+        /** Names of the composer's icon-only buttons, shown on hover. */
+        dictateLabel: string;
+        sendLabel: string;
+        stopLabel: string;
+    };
+    status: {
+        /** Held beside the waiting animation. Leave empty to show the animation alone. */
+        thinking: string;
+        error: string;
+        retryLabel: string;
+        /**
+         * Shown when the server refuses a message because the sender is over
+         * their message limit. Optional: an app that does not set it shows its
+         * own `error` string for these too, exactly as before this key existed.
+         */
+        rateLimited?: string;
+        /**
+         * Lines the thinking indicator steps through while an answer is being
+         * retrieved, in place of the single `thinking` label. Only read when the
+         * chat's `rotateThinkingLabel` prop is on. An empty array falls back to
+         * `thinking`, which is also how to switch the sequence off per-app.
+         */
+        thinkingSequence?: string[];
+    };
+    feedback: {
+        question: string;
+    };
+    sources: {
+        openSourceLabel: string;
+        /** Heading over the quoted passage in a citation popover. */
+        citedPassageLabel: string;
+        /** Caveat shown with a source, such as a login the reader may need. Leave empty to hide it. */
+        noticeLine: string;
+        /** The copy-link button in a citation popover, and what it says right after copying. */
+        copyUrlLabel: string;
+        copiedLabel: string;
+        /**
+         * The rest of this section belongs to the source cards that list mode
+         * shows under an answer. All optional; see ResolvedChatCopy.
+         */
+        /** Line above the cards. Leave empty to hide it. */
+        introLine?: string;
+        /** Numbered heading on each card; {n} is the card's position. */
+        sourceLabel?: string;
+        /** Heading over a card's cited passages. */
+        referenceLabel?: string;
+        /** Where a passage sits in the document; {page} is the page number. */
+        pageLabel?: string;
+        /** Appended to pageLabel when the printed page differs; {textPage}. */
+        textPageLabel?: string;
+        /** Names of the card's fold toggle, and of the page-image dialog's close button. */
+        expandLabel?: string;
+        collapseLabel?: string;
+        closeLabel?: string;
+    };
+    /** Shown when the assistant declines a question it cannot answer. */
+    outOfScope: {
+        label: string;
+    };
+    /**
+     * The collapsible panel showing the model's reasoning. Only rendered when
+     * the app turns on the chat's `showThinking` prop, so the section is
+     * optional here too.
+     */
+    reasoning?: {
+        showLabel: string;
+        hideLabel: string;
+    };
+    /**
+     * The row of actions under a finished answer. Only the copy button uses
+     * these, and only when the app turns on `showCopy`, so the section is
+     * optional here too.
+     */
+    actions?: {
+        /** Names the button that copies the answer. */
+        copyLabel: string;
+        /** Replaces it for a moment afterwards, since nothing else visibly happens. */
+        copiedLabel: string;
+    };
+}
+/**
+ * Copy with every later-added optional part guaranteed present. This is what
+ * resolveChatCopy returns and what components read through useChatCopy, so a
+ * component never carries a fallback for a string the defaults already have.
+ *
+ * The optional keys exist because apps were already shipping complete maps
+ * with `satisfies ChatCopy` when these strings were added; making them
+ * required would have broken those builds.
+ */
+export type ResolvedChatCopy = ChatCopy & {
+    status: ChatCopy['status'] & {
+        rateLimited: string;
+        thinkingSequence: string[];
+    };
+    sources: ChatCopy['sources'] & {
+        introLine: string;
+        sourceLabel: string;
+        referenceLabel: string;
+        pageLabel: string;
+        textPageLabel: string;
+        expandLabel: string;
+        collapseLabel: string;
+        closeLabel: string;
+    };
+    reasoning: NonNullable<ChatCopy['reasoning']>;
+    actions: NonNullable<ChatCopy['actions']>;
+};
+type DeepPartial<T> = {
+    [K in keyof T]?: DeepPartial<T[K]>;
+};
+/** What an app passes to the chat's `copy` prop. Any part can be left out. */
+export type ChatCopyInput = DeepPartial<ChatCopy>;
+export declare const defaultChatCopy: ResolvedChatCopy;
+/** Drops values into a string, so formatCopy('{n} sources', { n: 3 }) gives '3 sources'. */
+export declare function formatCopy(template: string, params: Record<string, string | number>): string;
+/**
+ * Merges provided copy with the default values. Any missing strings fall back to the default and gets listed in a warning
+ * during development. That way an incomplete set of text is easy to spot but never leaves blank labels in the interface.
+ */
+export declare function resolveChatCopy(input?: ChatCopyInput): ResolvedChatCopy;
+/** Called once by the chat root component with its `copy` prop value. */
+export declare function provideChatCopy(input?: ChatCopyInput): ResolvedChatCopy;
+/** Read the resolved copy anywhere inside the chat component tree. */
+export declare function useChatCopy(): ResolvedChatCopy;
+export {};

package/dist/index.css

@@ -0,0 +1 @@
+.icon-button[data-v-ce6d8ce0]{border-radius:var(--r-pill);background:var(--icon-button-state-bg,var(--icon-button-bg));width:40px;height:40px;color:var(--icon-button-state-fg,var(--text-primary));cursor:pointer;border:none;place-items:center;padding:0;display:grid;position:relative}.icon-button[data-v-ce6d8ce0]:disabled{color:var(--text-secondary);cursor:default}.icon-button[data-v-ce6d8ce0]:not(:disabled):hover{background:var(--icon-button-state-bg,var(--icon-button-bg-hover))}.icon-button__label[data-v-ce6d8ce0]{bottom:calc(100% + var(--spacing-1));border-radius:var(--card-radius);background:var(--surface-card);width:max-content;box-shadow:var(--card-shadow);color:var(--text-primary);font-family:var(--font-label);font-size:var(--t-xs);font-weight:var(--fw-bold);text-transform:uppercase;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;padding:15px;line-height:1;transition:opacity .15s;position:absolute;left:50%;transform:translate(-50%)}@media (hover:hover){.icon-button:not(:disabled):hover .icon-button__label[data-v-ce6d8ce0]{opacity:1;visibility:visible}}.input-bar[data-v-752f72a0]{gap:var(--spacing-3);padding:var(--spacing-6);flex-direction:column;padding-top:0;display:flex}.input-bar__field[data-v-752f72a0]{align-items:center;gap:var(--spacing-5);padding:var(--spacing-6);border:1px solid var(--card-stroke);border-radius:var(--card-radius);background:var(--composer-bg);display:flex}.input-bar__field[data-v-752f72a0]:focus-within{border-color:var(--accent)}.input-bar__send[data-v-752f72a0]:enabled{--icon-button-state-bg:var(--icon-button-bg-active);--icon-button-state-fg:var(--icon-button-fg-active)}.input-bar__send[data-v-752f72a0]:enabled:hover{--icon-button-state-bg:var(--icon-button-bg-active-hover)}.input-bar__textarea[data-v-752f72a0]{--composer-line:32px;min-width:0;max-height:100px;min-height:var(--composer-line);resize:none;color:var(--composer-fg);font-family:var(--font-body);font-size:var(--t-base);font-weight:var(--fw-regular);line-height:var(--composer-line);background:0 0;border:none;flex:1;padding:0}.input-bar__textarea[data-v-752f72a0]::placeholder{color:var(--composer-placeholder)}.input-bar__textarea[data-v-752f72a0]:focus{outline:none}.input-bar__buttons[data-v-752f72a0]{align-items:center;gap:var(--spacing-2);flex-shrink:0;display:flex}.input-bar__mic-unsupported[data-v-752f72a0]{width:40px;height:40px;color:var(--text-secondary);cursor:help;place-items:center;display:grid;position:relative}.input-bar__mic-unsupported[data-v-752f72a0]:after{content:attr(data-tooltip);bottom:calc(100% + var(--spacing-2));width:max-content;max-width:240px;padding:var(--spacing-2) var(--spacing-3);border:1px solid var(--card-stroke);border-radius:var(--r-md);background:var(--surface-card);box-shadow:var(--card-shadow);color:var(--text-primary);font-size:var(--t-sm);line-height:var(--lh-sm);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s;position:absolute;right:0}.input-bar__mic-unsupported[data-v-752f72a0]:hover:after{opacity:1;visibility:visible}.input-bar__button--listening[data-v-752f72a0]{--icon-button-state-bg:var(--icon-button-bg-active);--icon-button-state-fg:var(--icon-button-fg-active);animation:1.6s ease-in-out infinite mic-pulse-752f72a0}@keyframes mic-pulse-752f72a0{50%{opacity:.65}}.citation-popover[data-v-c713f6b3]{gap:var(--spacing-5);width:min(350px,100%);padding:var(--spacing-6);border:1px solid var(--card-stroke);border-radius:var(--card-radius);background:var(--surface-card);box-shadow:var(--card-shadow);overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent;flex-direction:column;display:flex;overflow-y:auto}.citation-popover__source[data-v-c713f6b3]{align-items:flex-start;gap:var(--spacing-2);flex-shrink:0;display:flex}.citation-popover__thumb[data-v-c713f6b3]{width:64px;height:72px;margin-right:var(--spacing-2);border:1px solid var(--card-stroke);border-radius:var(--r-lg);object-fit:cover;object-position:top center;flex-shrink:0;display:block}.citation-popover__badge[data-v-c713f6b3]{border-radius:var(--r-md);background:var(--citation-bg);min-width:20px;height:20px;color:var(--accent-fg);font-family:var(--font-body);font-size:var(--t-xs);font-weight:var(--fw-bold);flex-shrink:0;place-items:center;padding:0 5px;display:grid}.citation-popover__source-text[data-v-c713f6b3]{gap:var(--spacing-1);flex-direction:column;min-width:0;display:flex}.citation-popover__title[data-v-c713f6b3]{color:var(--text-primary);font-family:var(--font-body);font-size:var(--t-sm);font-weight:var(--fw-bold);overflow-wrap:break-word}.citation-popover__page[data-v-c713f6b3]{color:var(--text-helper);font-family:var(--font-body);font-size:var(--t-sm)}.citation-popover__passage-block[data-v-c713f6b3]{gap:var(--spacing-2);flex-direction:column;flex:1;min-height:0;display:flex}.citation-popover__passage-label[data-v-c713f6b3]{color:var(--text-helper);font-family:var(--font-label);font-size:var(--t-xs);font-weight:var(--fw-bold);text-transform:uppercase}.citation-popover__passage[data-v-c713f6b3]{padding-left:var(--spacing-6);border-left:2px solid var(--accent);color:var(--text-primary);font-family:var(--font-body);font-size:var(--t-sm);line-height:var(--lh-body);overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent;min-height:0;margin:0;overflow-y:auto}.citation-popover__notice[data-v-c713f6b3]{color:var(--text-helper);font-family:var(--font-body);font-size:var(--t-xs);line-height:var(--lh-body);white-space:pre-wrap}.citation-popover__footer[data-v-c713f6b3]{gap:var(--spacing-4);flex-shrink:0;display:flex}.citation-popover__copy[data-v-c713f6b3],.citation-popover__open[data-v-c713f6b3]{justify-content:center;align-items:center;gap:var(--spacing-2);height:35px;padding:0 var(--spacing-4);border-radius:var(--r-md);font-family:var(--font-ui);font-size:var(--t-sm);font-weight:var(--fw-bold);cursor:pointer;flex:1;display:flex}.citation-popover__copy[data-v-c713f6b3]{border:1px solid var(--card-stroke);color:var(--text-primary);background:0 0}.citation-popover__open[data-v-c713f6b3]{background:var(--accent);color:var(--accent-fg);border:none;text-decoration:none}.feedback[data-v-6aa14982]{justify-content:flex-end;align-items:center;gap:var(--spacing-4);width:100%;display:flex}.feedback__question[data-v-6aa14982]{color:var(--text-helper);font-family:var(--font-label);font-size:var(--t-xs);font-weight:var(--fw-bold);text-transform:uppercase}.feedback__thumbs[data-v-6aa14982]{gap:var(--spacing-4);display:flex}.feedback__thumb[data-v-6aa14982]{color:var(--text-helper);cursor:pointer;background:0 0;border:none;place-items:center;padding:2px;display:grid}.feedback__thumb[data-v-6aa14982]:hover{color:var(--text-primary)}.feedback__thumb.is-active[data-v-6aa14982]{color:var(--accent)}.page-image-modal[data-v-33820e23]{z-index:200;padding:var(--spacing-6);background:var(--overlay-scrim);place-items:center;display:grid;position:fixed;inset:0}.page-image-modal__card[data-v-33820e23]{gap:var(--spacing-4);max-width:min(720px,100%);max-height:100%;padding:var(--spacing-6);border:1px solid var(--card-stroke);border-radius:var(--card-radius);background:var(--surface-card);box-shadow:var(--card-shadow);flex-direction:column;display:flex}.page-image-modal__header[data-v-33820e23]{justify-content:space-between;align-items:flex-start;gap:var(--spacing-4);display:flex}.page-image-modal__title[data-v-33820e23]{color:var(--text-primary);font-family:var(--font-body);font-size:var(--t-sm);font-weight:var(--fw-bold);overflow-wrap:break-word}.page-image-modal__detail[data-v-33820e23]{color:var(--text-helper);font-family:var(--font-body);font-size:var(--t-sm)}.page-image-modal__close[data-v-33820e23]{padding:var(--spacing-1) var(--spacing-3);border:1px solid var(--card-stroke);border-radius:var(--r-md);color:var(--text-primary);font-family:var(--font-ui);font-size:var(--t-sm);font-weight:var(--fw-bold);cursor:pointer;background:0 0}.page-image-modal__close[data-v-33820e23]:hover{background:var(--surface-hover)}.page-image-modal__image[data-v-33820e23]{border:1px solid var(--card-stroke);border-radius:var(--r-lg);object-fit:contain;min-height:0;overflow-y:auto}.source-card[data-v-49b414a6]{gap:var(--spacing-4);padding:var(--spacing-6);border:1px solid var(--card-stroke);border-radius:var(--r-md);background:var(--surface-raised);flex-direction:column;display:flex;position:relative;container:source-card/inline-size}.source-card__front[data-v-49b414a6]{gap:var(--spacing-4);flex-direction:column;width:100%;display:flex}.source-card__details[data-v-49b414a6]{gap:var(--spacing-5);flex-direction:column;display:flex}@container source-card (width>=420px){.source-card__details[data-v-49b414a6]{flex-direction:row;align-items:center}}.source-card__toggle[data-v-49b414a6]{top:var(--spacing-6);right:var(--spacing-6);border-radius:var(--r-sm);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;place-items:center;padding:0;transition:transform .3s;display:grid;position:absolute}.source-card__toggle[data-v-49b414a6]:hover{background:var(--surface-hover);color:var(--text-primary)}.source-card__toggle--open[data-v-49b414a6]{transform:rotate(180deg)}.source-card__cover[data-v-49b414a6]{object-fit:contain;flex-shrink:0;width:150px;height:150px}.source-card__naming[data-v-49b414a6]{align-items:flex-start;gap:var(--spacing-5);flex-direction:column;min-width:0;display:flex}.source-card__heading[data-v-49b414a6]{color:var(--text-helper);font-family:var(--font-label);font-size:var(--t-xs);font-weight:var(--fw-bold);text-transform:uppercase}.source-card__title[data-v-49b414a6]{color:var(--text-primary);font-family:var(--font-display);font-size:var(--t-2xl);font-weight:var(--fw-regular);text-align:start;overflow-wrap:break-word}.source-card__link[data-v-49b414a6]{align-items:center;gap:var(--spacing-1);color:var(--accent);font-family:var(--font-ui);font-size:var(--t-xs);font-weight:var(--fw-bold);align-self:flex-start;display:inline-flex}.source-card__body[data-v-49b414a6]{gap:var(--spacing-4);padding-top:var(--spacing-4);border-top:1px solid var(--card-stroke);flex-direction:column;display:flex}.source-card__reference-heading[data-v-49b414a6]{color:var(--text-helper);font-family:var(--font-label);font-size:var(--t-xs);font-weight:var(--fw-bold);text-transform:uppercase}.source-card__reference[data-v-49b414a6]{gap:var(--spacing-5);text-align:left;flex-direction:column;width:100%;display:flex}@container source-card (width>=420px){.source-card__reference[data-v-49b414a6]{flex-direction:row;align-items:flex-start}}.source-card__page-thumb[data-v-49b414a6]{object-fit:contain;cursor:pointer;flex-shrink:0;width:150px;height:150px}.source-card__reference-text[data-v-49b414a6]{gap:var(--spacing-4);flex-direction:column;width:100%;min-width:0;display:flex}.source-card__page-line[data-v-49b414a6]{color:var(--text-primary);font-family:var(--font-label);font-size:var(--t-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.12px}.source-card__passage[data-v-49b414a6]{color:var(--text-secondary);font-family:var(--font-body);font-size:var(--t-sm);line-height:var(--lh-body);overflow-wrap:break-word}.source-list[data-v-124ee2ae]{gap:var(--spacing-3);flex-direction:column;display:flex}.source-list__intro[data-v-124ee2ae]{color:var(--text-primary);font-family:var(--font-body);font-size:var(--t-sm);font-weight:var(--fw-bold)}.source-list__notice[data-v-124ee2ae]{color:var(--text-helper);font-family:var(--font-body);font-size:var(--t-xs);line-height:var(--lh-body);white-space:pre-wrap}@property --thinking-arc{syntax:"<angle>";inherits:false;initial-value:121deg}.thinking__spinner[data-v-a73d8186]{border-radius:var(--r-pill);background:var(--accent);width:26px;height:26px;-webkit-mask:conic-gradient(from 90deg, transparent 0deg, #000 var(--thinking-arc), transparent calc(var(--thinking-arc) + 1deg)), radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));mask:conic-gradient(from 90deg, transparent 0deg, #000 var(--thinking-arc), transparent calc(var(--thinking-arc) + 1deg)), radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));flex:none;animation:1s linear infinite thinking-spin-a73d8186,1.8s ease-in-out infinite thinking-chase-a73d8186;-webkit-mask-composite:source-in;mask-composite:intersect}@keyframes thinking-spin-a73d8186{to{transform:rotate(1turn)}}@keyframes thinking-chase-a73d8186{0%{--thinking-arc:40deg;animation-timing-function:ease-in-out}40%{--thinking-arc:247deg;animation-timing-function:linear}to{--thinking-arc:40deg}}.thinking__sparkles[data-v-a73d8186]{width:32px;height:32px;color:var(--accent);flex:none;position:relative}.thinking__dots[data-v-a73d8186]{align-items:center;gap:var(--spacing-1);flex:none;display:flex}.thinking__dot[data-v-a73d8186]{border-radius:var(--r-pill);background:var(--accent);width:6px;height:6px;animation:1.2s ease-in-out infinite both thinking-dot-a73d8186}.thinking__dot[data-v-a73d8186]:nth-child(2){animation-delay:.15s}.thinking__dot[data-v-a73d8186]:nth-child(3){animation-delay:.3s}@keyframes thinking-dot-a73d8186{0%,60%,to{opacity:.4;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}.thinking__sparkle[data-v-a73d8186]{animation:1.5s linear infinite both thinking-sparkle-a73d8186;position:absolute}.thinking__sparkle[data-v-a73d8186]:first-child{width:18px;height:18px;top:7px;left:6px}.thinking__sparkle[data-v-a73d8186]:nth-child(2){width:11px;height:11px;animation-delay:-.5s;top:1.7px;left:19.3px}.thinking__sparkle[data-v-a73d8186]:nth-child(3){width:8px;height:8px;animation-delay:-1s;top:20.3px;left:3.7px}@keyframes thinking-sparkle-a73d8186{0%{opacity:0;transform:translate(-9px,-9px)scale(0)}35%{opacity:1;transform:translate(-2.7px,-2.7px)scale(1)}65%{opacity:1;transform:translate(2.7px,2.7px)scale(1)}to{opacity:0;transform:translate(9px,9px)scale(0)}}.thinking-process[data-v-3dcefa4f]{gap:var(--spacing-2);flex-direction:column;width:100%;display:flex}.thinking-process__toggle[data-v-3dcefa4f]{color:var(--text-helper);font-family:var(--font-label);font-size:var(--t-xs);font-weight:var(--fw-bold);text-transform:uppercase;cursor:pointer;background:0 0;border:none;align-self:flex-start;padding:0}.thinking-process__toggle[data-v-3dcefa4f]:hover{color:var(--text-primary)}.thinking-process__body[data-v-3dcefa4f]{max-height:220px;padding:var(--spacing-3) var(--spacing-4);border-radius:var(--r-lg);background:var(--surface-raised);color:var(--text-secondary);font-family:var(--font-body);font-size:var(--t-sm);line-height:var(--lh-body);white-space:pre-wrap;overflow-wrap:break-word;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent;overflow-y:auto}.assistant-message[data-v-81f04579]{gap:var(--spacing-2);flex-direction:column;width:100%;display:flex}.assistant-message__footer[data-v-81f04579]{justify-content:space-between;align-items:center;gap:var(--spacing-4);display:flex}.assistant-message__actions[data-v-81f04579]{align-items:center;gap:var(--spacing-2);flex:none;display:flex}.assistant-message__header[data-v-81f04579]{align-items:center;gap:var(--spacing-4);display:flex}.assistant-message__avatar[data-v-81f04579]{border-radius:var(--r-pill);background:var(--accent);width:32px;height:32px;color:var(--accent-fg);flex-shrink:0;place-items:center;display:grid}.assistant-message__name[data-v-81f04579]{color:var(--text-primary);font-family:var(--font-body);font-size:var(--t-base);font-weight:var(--fw-bold)}.assistant-message__body-wrap[data-v-81f04579]{width:100%}.assistant-message__popover[data-v-81f04579]{z-index:100;position:fixed}.assistant-message__body[data-v-81f04579] .citation-chip{min-width:20px;height:20px;margin-left:var(--spacing-1);border-radius:var(--r-md);background:var(--citation-bg);color:var(--accent-fg);font-size:var(--t-xs);font-weight:var(--fw-bold);vertical-align:text-bottom;cursor:pointer;-webkit-user-select:none;user-select:none;place-items:center;padding:0 5px;display:inline-grid}.assistant-message__body[data-v-81f04579] .citation-chip:not(.citation-chip--pending):hover{opacity:.7}.assistant-message__body[data-v-81f04579] .citation-chip--pending{cursor:default;opacity:.55}.assistant-message__body[data-v-81f04579]{color:var(--text-primary);font-family:var(--font-body);font-size:var(--t-base);font-weight:var(--fw-regular);line-height:var(--lh-body);overflow-wrap:break-word}.assistant-message__body[data-v-81f04579] p,.assistant-message__body[data-v-81f04579] ul,.assistant-message__body[data-v-81f04579] ol,.assistant-message__body[data-v-81f04579] pre,.assistant-message__body[data-v-81f04579] table,.assistant-message__body[data-v-81f04579] blockquote{margin-block:0 var(--spacing-4)}.assistant-message__body[data-v-81f04579] ul,.assistant-message__body[data-v-81f04579] ol{padding-inline-start:var(--spacing-6)}.assistant-message__body[data-v-81f04579] a{color:var(--accent)}.assistant-message__body[data-v-81f04579] .chat-math{max-width:100%;overflow-x:auto}.assistant-message__body[data-v-81f04579] .chat-math--display{margin-block:var(--spacing-4);text-align:center;display:block}.assistant-message__body[data-v-81f04579] code{font-family:var(--font-mono);font-size:var(--t-sm);background:var(--surface-raised);border-radius:var(--r-sm);padding:1px 5px}.assistant-message__body[data-v-81f04579] pre{background:var(--surface-raised);padding:var(--spacing-4);border-radius:var(--r-lg);overflow-x:auto}.assistant-message__body[data-v-81f04579] blockquote{padding:var(--spacing-3) var(--spacing-4);border-left:3px solid var(--accent);border-radius:0 var(--r-md) var(--r-md) 0;background:var(--surface-raised)}.assistant-message__body[data-v-81f04579] blockquote>:last-child{margin-bottom:0}.assistant-message__body[data-v-81f04579] table{border-collapse:collapse;max-width:100%;display:block;overflow-x:auto}.assistant-message__body[data-v-81f04579] th,.assistant-message__body[data-v-81f04579] td{padding:var(--spacing-2) var(--spacing-3);border:1px solid var(--card-stroke);text-align:left;vertical-align:top}.assistant-message__body[data-v-81f04579] th{background:var(--surface-raised);font-weight:var(--fw-bold)}.assistant-message__out-of-scope[data-v-81f04579]{align-self:flex-start;align-items:center;gap:var(--spacing-2);padding:var(--spacing-3);border:1px solid var(--accent);border-radius:var(--r-sm);background:color-mix(in srgb, var(--accent) 15%, transparent);color:var(--accent);font-family:var(--font-body);font-size:var(--t-xs);font-weight:var(--fw-bold);letter-spacing:.6px;text-transform:uppercase;display:flex}.assistant-message__out-of-scope+.assistant-message__body[data-v-81f04579]{margin-top:var(--spacing-2)}.assistant-message__error[data-v-81f04579]{align-items:center;gap:var(--spacing-4);color:var(--warning);font-family:var(--font-body);font-size:var(--t-sm);display:flex}.assistant-message__retry[data-v-81f04579]{padding:var(--spacing-1) var(--spacing-3);border:1px solid var(--card-stroke);border-radius:var(--r-md);color:var(--text-primary);font-family:var(--font-ui);font-size:var(--t-sm);font-weight:var(--fw-bold);cursor:pointer;background:0 0}.assistant-message__retry[data-v-81f04579]:hover{background:var(--surface-hover)}.thinking[data-v-c804834e]{align-items:center;gap:var(--spacing-4);color:var(--text-secondary);font-family:var(--font-body);font-size:var(--t-base);display:flex}.user-message[data-v-2eb946f2]{justify-content:flex-end;width:100%;display:flex}.user-message__bubble[data-v-2eb946f2]{max-width:70%;padding:var(--spacing-4);border-radius:var(--card-radius);background:var(--user-bubble-bg);color:var(--user-bubble-fg);font-family:var(--font-body);font-size:var(--t-base);font-weight:var(--fw-regular);white-space:pre-wrap;overflow-wrap:break-word;line-height:normal}.message-list[data-v-1e679b5e]{gap:var(--spacing-5);min-height:0;padding:var(--spacing-6);scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent;flex-direction:column;flex:1;display:flex;overflow-y:auto}.message-list[data-v-1e679b5e]::-webkit-scrollbar{width:10px}.message-list[data-v-1e679b5e]::-webkit-scrollbar-track{background:0 0}.message-list[data-v-1e679b5e]::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--r-pill);background-clip:padding-box;border:3px solid #0000}.message-list[data-v-1e679b5e]::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover);background-clip:padding-box}.message-list__welcome-eyebrow[data-v-1e679b5e]{color:var(--accent);font-family:var(--font-label);font-size:var(--t-xs);font-weight:var(--fw-bold);text-transform:uppercase;margin-bottom:var(--spacing-3)}.message-list__welcome-heading[data-v-1e679b5e]{color:var(--text-primary);font-family:var(--font-display);font-size:var(--t-2xl);font-weight:var(--fw-bold);letter-spacing:var(--tr-tight);margin-bottom:var(--spacing-3)}.message-list__welcome-body[data-v-1e679b5e]{color:var(--text-primary);font-family:var(--font-body);font-size:var(--t-base);line-height:var(--lh-body)}.message-list__error[data-v-1e679b5e]{align-items:center;gap:var(--spacing-4);color:var(--warning);font-family:var(--font-body);font-size:var(--t-sm);display:flex}.message-list__retry[data-v-1e679b5e]{padding:var(--spacing-1) var(--spacing-3);border:1px solid var(--card-stroke);border-radius:var(--r-md);color:var(--text-primary);font-family:var(--font-ui);font-size:var(--t-sm);font-weight:var(--fw-bold);cursor:pointer;background:0 0}.message-list__retry[data-v-1e679b5e]:hover{background:var(--surface-hover)}.chat[data-v-f63ed144]{flex-direction:column;flex:1;min-height:0;display:flex}

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Everything the chat kit makes available. Import from '@twentyfourg/chat-kit'
+ * rather than reaching into files inside src, since only what is listed here
+ * is meant to stay stable.
+ */
+export * from './types';
+export * from './copy';
+export * from './services/anonymous-auth';
+export * from './services/base-camp-client';
+export * from './services/streaming.service';
+export * from './services/markdown';
+export * from './services/entities';
+export type { MathOptions, MathSetting } from './services/math';
+export { default as StreamingMessage } from './services/streaming-message';
+export * from './composables/useChatEngine';
+export * from './testing/mock-transport';
+export { default as Chat } from './components/Chat.vue';
+export { default as IconButton } from './components/IconButton.vue';

package/dist/services/anonymous-auth.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Signs the visitor in without asking them for anything.
+ *
+ * Base Camp will not answer without an identity, but this product is open to
+ * the public. LXS provides an "anonymous" login for exactly this: the browser
+ * asks for a throwaway session, then trades it for a token Base Camp accepts.
+ * Nothing here is secret, so it runs in the browser with no server of ours in
+ * the middle.
+ *
+ * The exchange happens in two steps, and the second proves the first came from
+ * this same page:
+ *   1. Ask for a session, sending a fingerprint of a random string.
+ *   2. Hand back the original random string to collect the token.
+ */
+export interface AnonymousAuthOptions {
+    /** Base URL of the LXS API. */
+    lxsApiUrl: string;
+    /**
+     * Which login configuration to use. Optional: when left out, the tenant's
+     * default one is looked up instead, which is what the LXP frontend does.
+     */
+    authConfigId?: string;
+    /** Identifies the tenant these sessions belong to. */
+    tenantNumber: string;
+    deployEnv?: string;
+    jobNumber?: string;
+}
+interface AuthConfig {
+    PK: string;
+    authenticationStrategies?: {
+        id: string;
+        type: string;
+        enabled: boolean;
+    }[];
+}
+/**
+ * Asks LXS which login configuration applies to this tenant. The endpoint is
+ * public, so it works before anyone has signed in. Saves having to hardcode an
+ * id per tenant, and lets us check that guest sign-in is actually switched on.
+ */
+export declare function fetchAuthConfig(options: AnonymousAuthOptions): Promise<AuthConfig>;
+export declare class AnonymousAuthError extends Error {
+    constructor(message: string);
+}
+/** Runs the two-step exchange and returns a token Base Camp will accept. */
+export declare function signInAnonymously(options: AnonymousAuthOptions): Promise<string>;
+/** What the Base Camp client asks for, with a way to start it early. */
+export interface AnonymousTokenProvider {
+    (): Promise<string>;
+    /**
+     * Signs in now rather than waiting for the first request. Call it once the
+     * page has loaded so the exchange finishes while the visitor is still
+     * reading, instead of delaying their first question. Failures are ignored
+     * here: the next real request tries again and reports properly.
+     */
+    prefetch(): void;
+}
+/**
+ * Wraps the sign-in so the token is fetched once and shared. Hand the returned
+ * function to the Base Camp client, which calls it before every request.
+ */
+export declare function createAnonymousTokenProvider(options: AnonymousAuthOptions): AnonymousTokenProvider;
+export {};