quassel 0.1.0 → 0.2.0

package/ChatInputToolbar.d.ts

@@ -1,5 +1,6 @@
-import { ReactNode } from "react";
+import { ReactNode, Ref } from "react";
 import { ChatTexts } from "./texts";
+import type { ChatAttachmentInput } from "./events";
 import type { SendShortcut } from "./options";
 /** Ein Toolbar-Knopf, deklarativ: Symbol, Text oder beides - plus Klick-Handler. */
 export interface ToolbarAction {
@@ -10,23 +11,51 @@ export interface ToolbarAction {
     active?: boolean;
     onClick: () => void;
 }
+/** Hosts steuern den Entwurf von aussen, z.B. um eine Vorlage zum Bearbeiten einzusetzen. */
+export interface ChatInputHandle {
+    /** Ersetzt den Entwurf, fokussiert die Eingabe und stellt die Schreibmarke ans Ende. */
+    insert: (text: string) => void;
+    focus: () => void;
+    reset: () => void;
+    submit: (onSubmit?: (text: string, attachments?: ChatAttachmentInput[]) => void | Promise<void>, options?: {
+        allowEmpty?: boolean;
+    }) => Promise<void>;
+}
 /**
  * Die Eingabe-Karte: rahmenlose Textarea oben, Toolbar unter einer Haarlinie. Eigene
- * Knöpfe kommen deklarativ über `actions` oder frei über die Slots links/rechts; im Lauf
- * bleibt der Stop-Knopf sichtbar, und Tippen zeigt daneben den Senden-Knopf, der zum
- * Dazwischenfunken wird. `rows` bestimmt die Starthöhe; mit `maxRows` wächst die Textarea
+ * Knöpfe kommen deklarativ über `actions` oder frei über die Slots links/rechts; bei
+ * laufender Arbeit bleibt der Stop-Knopf sichtbar, und Tippen zeigt daneben den Senden-Knopf,
+ * der zum Dazwischenfunken wird. `rows` bestimmt die Starthöhe; mit `maxRows` wächst die Textarea
  * mit dem Inhalt bis zu dieser Zeilenzahl und scrollt danach.
  */
-export declare function ChatInputToolbar({ onSend, onStop, running, disabled, rows, maxRows, actions, toolbarLeft, toolbarRight, texts, sendShortcut, }: {
-    onSend: (text: string) => void | Promise<void>;
+export declare function ChatInputToolbar({ onSend, onStop, running, disabled, sendDisabled, layout, detailsContainer, onErrorChange, inputAriaControls, rows, maxRows, actions, toolbarLeft, toolbarRight, texts, handleRef, attachments: attachmentsEnabled, attachmentCapabilities, attachmentCapabilitiesError, onAttachmentsChange, initialValue, onDraftChange, sendShortcut, autoFocus, onAutoFocusSettled, }: {
+    onSend: (text: string, attachments?: ChatAttachmentInput[]) => void | Promise<void>;
     onStop?: () => void;
     running?: boolean;
     disabled?: boolean;
+    sendDisabled?: boolean;
+    layout?: "card" | "toolbar" | "inline";
+    detailsContainer?: HTMLElement | null;
+    onErrorChange?: (error: string | undefined) => void;
+    inputAriaControls?: string;
     rows?: number;
     maxRows?: number;
     actions?: ToolbarAction[];
     toolbarLeft?: ReactNode;
     toolbarRight?: ReactNode;
     texts?: Partial<ChatTexts>;
+    handleRef?: Ref<ChatInputHandle>;
+    /** false = kein Anhängen: weder Knopf noch Ablegen oder Einfügen von Dateien. */
+    attachments?: boolean;
+    attachmentCapabilities?: {
+        input: readonly string[];
+        model: string;
+    };
+    attachmentCapabilitiesError?: string;
+    onAttachmentsChange?: (hasAttachments: boolean) => void;
+    initialValue?: string;
+    onDraftChange?: (text: string) => void;
     sendShortcut?: SendShortcut;
+    autoFocus?: boolean;
+    onAutoFocusSettled?: () => void;
 }): import("react").JSX.Element;

package/ChatMessages.d.ts

@@ -1,40 +1,44 @@
-import { ReactNode } from "react";
-import { type ChatAppearance, type TimestampOptions, type CodeBlockOptions, type BubbleOptions, type MessageActionsOptions } from "./options";
-import { ChatAnnouncement, DetailMode, Message, ToolInfo } from "./types";
+import { type CSSProperties, ReactNode } from "react";
+import { ChatAnnouncement, DetailMode, Message, PendingAction, ToolInfo } from "./types";
 import { ChatTexts } from "./texts";
 import { type LinkClickHandler } from "./Markdown";
+import { type ChatAppearance, type TimestampOptions, type CodeBlockOptions, type BubbleOptions, type MessageActionsOptions } from "./options";
 /**
  * Der Verlauf: eigener Scroll-Container mit Autoscroll, solange man unten ist,
  * und einem Zum-Ende-Knopf, sobald man liest. Ohne Eingabe read-only nutzbar.
  */
-export declare function ChatMessages({ messages, detailMode, running, working, workingTimeoutMs, stepsExpandable, texts, toolArgumentsText, renderTool, onAnswerQuestion, onLinkClick, announce, emptyState, className, showTimestamps, bottomThreshold, scrollerRef, appearance, timestampOptions, codeBlockOptions, bubbleOptions, messageActions, }: {
+export declare function ChatMessages({ messages, owner, detailMode, running, working, stepsExpandable, texts, toolArgumentsText, renderTool, renderAction, onDismissAction, onLinkClick, emptyState, className, showTimestamps, announce, scrollerRef, maxWidth, horizontalPadding, jumpToEndThreshold, appearance, timestampOptions, codeBlockOptions, bubbleOptions, messageActions, }: {
     messages: Message[];
-    appearance?: ChatAppearance;
-    timestampOptions?: TimestampOptions;
-    codeBlockOptions?: CodeBlockOptions;
-    bubbleOptions?: BubbleOptions;
-    messageActions?: MessageActionsOptions;
+    /** Beiträge mit diesem Message.sender erscheinen ohne Sprechblase; null behält die Nachrichtenvorgaben. */
+    owner?: string | null;
     detailMode?: DetailMode;
     running?: boolean;
     working?: ReactNode;
-    /** Ohne neue Events verschwindet der Working-Indikator nach dieser Zeit, Default 20s. */
-    workingTimeoutMs?: number;
     /** false = Denk- und Werkzeug-Schritte lassen sich nicht aufklappen (kein Popover). */
     stepsExpandable?: boolean;
     texts?: Partial<ChatTexts>;
     toolArgumentsText?: (tool: ToolInfo) => string;
     /** Eigene Darstellung fuer einzelne Werkzeuge; undefined = Standarddarstellung. */
     renderTool?: (tool: ToolInfo) => ReactNode | undefined;
-    onAnswerQuestion?: (callId: string, text: string) => void;
+    /** Darstellung einer wartenden Aktion durch ihren Eigentümer; undefined = generische Karte. */
+    renderAction?: (action: PendingAction, text: string) => ReactNode | undefined;
+    onDismissAction?: (actionId: string) => void;
     /** Faengt Klicks auf Markdown-Links ab; true = behandelt, der Browser folgt nicht. */
     onLinkClick?: LinkClickHandler;
-    /** Screenreader-Ansage je fertiger Antwort und neuer Rückfrage: Default ist ihr Text, eine Funktion liefert eigenen Text (undefined = still), false schaltet ab. */
-    announce?: false | ((announcement: ChatAnnouncement) => string | undefined);
     emptyState?: ReactNode;
     className?: string;
     /** true = dezente HH:MM-Spalte links an jedem Block (Message.at). */
     showTimestamps?: boolean;
-    bottomThreshold?: number;
+    /** Screenreader-Ansage fertiger Antworten und neuer Aktionen; false = der Host sagt selbst an. */
+    announce?: false | ((announcement: ChatAnnouncement) => string | undefined);
     /** Exposes the scroll container so hosts can scroll without querying the DOM. */
     scrollerRef?: (element: HTMLDivElement | null) => void;
+    maxWidth?: CSSProperties["maxWidth"];
+    horizontalPadding?: CSSProperties["paddingInline"];
+    jumpToEndThreshold?: number;
+    appearance?: ChatAppearance;
+    timestampOptions?: TimestampOptions;
+    codeBlockOptions?: CodeBlockOptions;
+    bubbleOptions?: BubbleOptions;
+    messageActions?: MessageActionsOptions;
 }): import("react").JSX.Element;

package/ChatPanel.d.ts

@@ -1,15 +1,17 @@
-import { type ReactNode, type Ref } from "react";
+import { type CSSProperties, type ReactNode, type Ref } from "react";
 import { type ChatAppearance } from "./options";
 /**
  * Verlauf mit ueberlagerter Eingabe. Der Rahmen misst die Eingabe selbst und
  * gibt dem Verlauf den noetigen Fussraum, damit kein Host Innenmasse setzen muss.
  */
-export declare function ChatPanel({ children, composer, className, nodeRef, appearance, scrollOnSend, }: {
+export declare function ChatPanel({ children, composer, className, nodeRef, maxWidth, horizontalPadding, appearance, scrollOnSend, }: {
     children: ReactNode;
     /** Die Eingabe; sie liegt ueber dem Verlauf, nicht darunter. */
     composer?: ReactNode;
     className?: string;
     nodeRef?: Ref<HTMLDivElement>;
+    maxWidth?: CSSProperties["maxWidth"];
+    horizontalPadding?: CSSProperties["paddingInline"];
     appearance?: ChatAppearance;
     scrollOnSend?: boolean;
 }): import("react").JSX.Element;

package/ChatSendContext.d.ts

@@ -1,12 +1,7 @@
-import type { KeyboardEvent } from "react";
-import type { SendShortcut } from "./options";
-export declare const ChatSendContext: import("react").Context<{
-    onSent: () => void;
-    registerJump: (jump: () => void) => () => void;
-} | undefined>;
-export declare function isSendKey(event: KeyboardEvent<HTMLTextAreaElement>, shortcut: SendShortcut): boolean;
-export declare function useChatSubmit(onSend: (text: string) => void | Promise<void>): {
-    submit: (text: string) => Promise<boolean>;
-    sending: boolean;
-    error: string | undefined;
-};
+import { type RefObject } from "react";
+export interface ChatSendScope {
+    notify: () => void;
+    subscribe: (listener: () => void) => () => void;
+}
+export declare const ChatSendContext: import("react").Context<ChatSendScope | undefined>;
+export declare function createChatSendScope(enabled: RefObject<boolean>): ChatSendScope;

package/DetailModeSwitch.d.ts

@@ -9,7 +9,7 @@ export declare const detailModeLabel: (mode: DetailMode, texts?: Partial<ChatTex
 export declare function DetailModeSwitch({ mode, onChange, modes, collapsible, texts, className, }: {
     mode: DetailMode;
     onChange: (mode: DetailMode) => void;
-    /** Auswahl und Reihenfolge des Weiterschaltens; Default sind alle sechs Modi. */
+    /** Auswahl und Reihenfolge des Weiterschaltens; Default sind alle Modi. */
     modes?: readonly DetailMode[];
     /** false = die Beschriftung bleibt auch in einer schmalen Eingabe-Karte stehen. */
     collapsible?: boolean;

package/Markdown.d.ts

@@ -1,26 +1,19 @@
 import { ReactNode } from "react";
 import type { CodeBlockOptions } from "./options";
 import { type ChatTexts } from "./texts";
+export type LinkClickHandler = (href: string, label: string) => boolean;
 export declare function MarkdownCodeBlocks({ children, options, texts }: {
     children: ReactNode;
     options?: CodeBlockOptions;
-    texts?: Partial<ChatTexts>;
+    texts: ChatTexts;
 }): import("react").JSX.Element;
-/**
- * Schlanker Markdown-Renderer ohne Abhängigkeit: Überschriften, **fett**, *kursiv*,
- * `code`, Links, Listen, Blockquotes, Code-Blöcke und Tabellen. Bewusst sicher (reines
- * React, kein dangerouslySetInnerHTML) und streaming-robust: zeilenbasiert, unvollständige
- * Blöcke werden so weit gerendert wie vorhanden.
- */
-/** true = der Host hat den Link behandelt, der Browser folgt ihm nicht. */
-export type LinkClickHandler = (href: string, label: string) => boolean;
-/** Faengt Klicks auf Markdown-Links im Teilbaum ab, z.B. fuer eigene Ziele der Gastseite. */
 export declare function MarkdownLinks({ children, onLinkClick }: {
     children: ReactNode;
     onLinkClick?: LinkClickHandler;
 }): import("react").JSX.Element;
-export declare function Markdown({ text }: {
+export declare function Markdown({ text, streaming }: {
     text: string;
+    streaming?: boolean;
 }): import("react").JSX.Element;
 /** Dieselbe Syntax wie der Renderer, als Klartext ohne Markup, etwa für Screenreader-Ansagen. */
 export declare function markdownPlainText(text: string): string;

package/MessageActions.d.ts

@@ -1,17 +1,8 @@
-import { type ReactNode } from "react";
 import type { MessageActionsOptions } from "./options";
 import type { ChatTexts } from "./texts";
 import type { Message } from "./types";
-export declare function ActionButton({ label, icon, disabled, onClick, successLabel }: {
-    label: string;
-    icon?: ReactNode;
-    disabled?: boolean;
-    onClick: () => void | Promise<void>;
-    successLabel?: string;
-}): import("react").JSX.Element;
-export declare function copyText(text: string, error: string): Promise<void>;
 export declare function MessageActions({ message, options, texts }: {
     message: Message;
     options?: MessageActionsOptions;
     texts: ChatTexts;
-}): import("react").JSX.Element | null;
+}): import("react").JSX.Element;

package/PendingActionCard.d.ts

@@ -0,0 +1,13 @@
+import type { PendingAction } from "./types";
+/**
+ * Die Darstellung einer wartenden Aktion ohne Beitrag ihres Eigentümers: Titel, der Hinweis,
+ * dass eine Eingabe erwartet wird, und das Verwerfen. Die Form kennt nur das Plugin.
+ */
+export declare function PendingActionCard({ text, action, waitingLabel, dismissLabel, dismissedLabel, onDismiss, }: {
+    text: string;
+    action: PendingAction;
+    waitingLabel: string;
+    dismissLabel: string;
+    dismissedLabel: string;
+    onDismiss?: () => void;
+}): import("react").JSX.Element;

package/QuasselProvider.d.ts

@@ -0,0 +1,76 @@
+import { type ComponentType, type ReactNode } from "react";
+export type QuasselButtonVariant = "default" | "outline" | "secondary" | "ghost" | "destructive" | "link";
+export type QuasselButtonSize = "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
+export interface QuasselButtonProps {
+    variant?: QuasselButtonVariant;
+    size?: QuasselButtonSize;
+    className?: string;
+    disabled?: boolean;
+    title?: string;
+    "aria-label"?: string;
+    "aria-pressed"?: boolean;
+    onClick?: () => void;
+    children?: ReactNode;
+}
+export interface QuasselToggleProps {
+    variant?: "default" | "outline";
+    size?: "default" | "sm" | "lg";
+    className?: string;
+    disabled?: boolean;
+    title?: string;
+    pressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    children?: ReactNode;
+}
+export interface QuasselCardProps {
+    size?: "default" | "sm";
+    className?: string;
+    children?: ReactNode;
+}
+export interface QuasselStopButtonProps {
+    label: string;
+    busy?: boolean;
+    size?: QuasselButtonSize;
+    className?: string;
+    disabled?: boolean;
+    title?: string;
+    onClick?: () => void;
+}
+export interface QuasselPopoverProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+}
+export interface QuasselPopoverAnchor {
+    getBoundingClientRect: () => DOMRect;
+    contextElement?: Element;
+}
+export interface QuasselPopoverContentProps {
+    anchor?: QuasselPopoverAnchor;
+    align?: "start" | "center" | "end";
+    side?: "top" | "bottom" | "left" | "right" | "inline-start" | "inline-end";
+    sideOffset?: number;
+    collisionPadding?: number;
+    className?: string;
+    "aria-label"?: string;
+    children?: ReactNode;
+}
+/** The primitives quassel renders; a host replaces any of them through QuasselProvider. */
+export interface QuasselComponents {
+    Button: ComponentType<QuasselButtonProps>;
+    Toggle: ComponentType<QuasselToggleProps>;
+    Card: ComponentType<QuasselCardProps>;
+    StopButton: ComponentType<QuasselStopButtonProps>;
+    Popover: ComponentType<QuasselPopoverProps>;
+    PopoverContent: ComponentType<QuasselPopoverContentProps>;
+}
+export declare const defaultComponents: QuasselComponents;
+export declare function QuasselProvider({ components, allowUrl, children }: {
+    /** Replaces single primitives; the rest stay the built-in ones or those of an outer provider. */
+    components?: Partial<QuasselComponents>;
+    /** Keeps Markdown link and image URLs that the default policy (http, https, mailto, tel, ftp, irc, xmpp, relative) would drop. */
+    allowUrl?: (url: string) => boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare const useQuasselComponents: () => QuasselComponents;
+export declare const useAllowUrl: () => ((url: string) => boolean) | undefined;

package/README.md

@@ -1,30 +1,33 @@
 # quassel
 
-Composable chat building blocks for React: a streaming transcript with thinking and tool steps,
-clarifying questions, an input card, a small CSS foundation, and an event contract with a
-ready-made backend for OpenAI-compatible endpoints. One package, no runtime dependencies.
+Chat building blocks for React: a streaming transcript with thinking and tool steps, pending
+actions, an input card with attachments and steering, and a small event contract that works
+on the server as well. quassel is the chat of [RAgents](https://github.com/SchlenkR/RAgents),
+published as a library. It ships a compiled stylesheet, so hosts need no Tailwind, and every
+color, radius and font is a `--qsl-*` variable.
 
 ![An agent chat with grouped steps, timestamps, Markdown and the input card](https://raw.githubusercontent.com/SchlenkR/quassel/main/docs/images/agent.png)
 
 ## What you can build
 
 **Agent chats that show their work.** Thinking and tool calls appear as steps. Pick how much
-of them the user sees - from answers only to fully expanded - and let them switch at runtime.
+of them the user sees - only the current step, icons, chips, a collapsible group, single lines
+or everything - and let them switch at runtime.
 
 ![The same steps as icons, chips and single lines](https://raw.githubusercontent.com/SchlenkR/quassel/main/docs/images/details.png)
 
-**Clarifying questions.** The agent asks, the user picks one or several options or answers
-freely. Answered questions stay in the transcript as a record.
+**Pending actions.** The agent waits for input: a generic card with dismiss, or the host's own
+rendering per action owner. Resolved actions stay in the transcript as a record.
 
 **Multi-party conversations.** Colored bubbles with labels for agents that talk to each other.
 
 <p>
-  <img src="docs/images/questions.png" alt="Clarifying questions with single and multiple choice" width="49%">
+  <img src="docs/images/questions.png" alt="Pending actions: a host-rendered choice and the generic card" width="49%">
   <img src="docs/images/party.png" alt="Planner and reviewer as labeled bubbles" width="49%">
 </p>
 
-**Your look, not a fork.** Every color, radius and font is a `--qsl-*` token. A theme is a class
-that overrides tokens; dark mode follows the system or `data-theme`.
+**Your look, not a fork.** Override `--qsl-*` variables on any wrapper, switch light and dark
+with `data-theme`, or hand quassel your own Button, Toggle, Card and Popover components.
 
 ![Default, sunset and emerald themes](https://raw.githubusercontent.com/SchlenkR/quassel/main/docs/images/themes.png)
 
@@ -32,11 +35,12 @@ that overrides tokens; dark mode follows the system or `data-theme`.
 
 ## Highlights
 
-- Streaming-safe Markdown with tables and code, no dependencies, no `dangerouslySetInnerHTML`.
-- Steering: typing while a run is active sends into the running turn.
-- Timestamps, day separators, message actions and copy buttons for code blocks.
+- Streaming-safe Markdown (tables, code with copy button, lists) via Streamdown.
+- Steering: typing while a turn runs sends into it; stop, retry and failed-send recovery built in.
+- Attachments by button, drag and drop or paste, with previews and size limits.
+- Timestamps, day separators, message actions, configurable bubbles and appearance.
 - Screen reader friendly: the transcript is not a live region; finished replies and new
-  questions are announced once, with the host in control of the wording.
+  actions are announced once, with the host in control of the wording.
 - All labels are replaceable through `texts` (defaults are German).
 
 ## Install
@@ -47,36 +51,32 @@ npm install quassel
 
 | Import | Contents |
 |---|---|
-| `quassel` | React components, `useChat`, types |
-| `quassel/events` | The event contract and the pure reducer `applyEvent`, without React |
-| `quassel/server` | Node backend for OpenAI-compatible endpoints with sessions and SSE |
-| `quassel/chat.css` | Component styles including the tokens |
-| `quassel/foundation.css` | Tokens, color wash and glass panel for the whole page |
+| `quassel` | React components, `QuasselProvider`, types, texts, `announce`, `markdownPlainText` |
+| `quassel/events` | The event contract, the pure reducer `applyEvent` and the attachment limits, without React |
+| `quassel/chat.css` | The compiled stylesheet: theme variables, scoped reset and all utilities quassel uses |
 
 ```tsx
-import { ChatInputToolbar, ChatMessages, ChatPanel, useChat } from "quassel";
+import { useReducer, useState } from "react";
+import { applyEvent, ChatInputToolbar, ChatMessages, ChatPanel, type Message } from "quassel";
 import "quassel/chat.css";
 
-export function Chat() {
-  const { messages, running, send, stop } = useChat("http://localhost:3300/chat/demo");
+export function Chat({ send, stop }: { send: (text: string) => Promise<void>; stop: () => void }) {
+  const [messages, dispatch] = useReducer(applyEvent, [] as Message[]);
+  const [running, setRunning] = useState(false);
+  // feed your backend's ChatEvent stream into dispatch(event) and setRunning(event.running) on "status"
   return (
-    <ChatPanel composer={<ChatInputToolbar onSend={send} onStop={stop} running={running} />}>
+    <ChatPanel composer={<ChatInputToolbar onSend={send} onStop={stop} running={running} rows={1} />}>
       <ChatMessages messages={messages} running={running} detailMode="grouped" />
     </ChatPanel>
   );
 }
 ```
 
-```ts
-import { createServer } from "node:http";
-import { createChatHandler, SessionManager } from "quassel/server";
-
-const manager = new SessionManager({ baseUrl: "http://localhost:11434/v1", model: "qwen3:4b" });
-const handler = createChatHandler({ manager });
-
-createServer(async (req, res) => {
-  if (!(await handler(req, res))) res.writeHead(404).end();
-}).listen(3300);
+```css
+.my-chat {
+    --qsl-primary: #11855c;
+    --qsl-radius: 0.9rem;
+}
 ```
 
 Any backend that emits the `quassel/events` stream works with the same components.
@@ -85,14 +85,15 @@ Any backend that emits the `quassel/events` stream works with the same component
 
 ```sh
 pnpm install
-pnpm dev          # gallery on http://localhost:3210
-pnpm check        # type check
-pnpm release      # build and publish to npm (see docs/guide.md)
+pnpm dev              # stylesheet in watch mode plus the gallery on http://localhost:3210
+pnpm check            # type check package and gallery
+pnpm build            # stylesheet and gallery build
+pnpm release --dry-run
 ```
 
-The full build guide - every prop, the event contract, the backend - is in
-[docs/guide.md](https://github.com/SchlenkR/quassel/blob/main/docs/guide.md) (German). It is written so that an AI assistant can build an
-application with quassel from it.
+The full guide - every prop, the event contract, theming, slots, dark mode and publishing -
+is in [docs/guide.md](https://github.com/SchlenkR/quassel/blob/main/docs/guide.md) (German). It is written so that an AI assistant can build
+an application with quassel from it.
 
 ## License
 

package/StepPopover.d.ts

@@ -9,4 +9,4 @@ export declare function StepPopover({ message, position, texts, toolArgumentsTex
     texts: ChatTexts;
     toolArgumentsText: (tool: NonNullable<Message["tool"]>) => string;
     onClose: () => void;
-}): import("react").ReactPortal;
+}): import("react").JSX.Element;

package/TimestampSwitch.d.ts

@@ -1,5 +1,5 @@
-import { ChatTexts } from "./texts";
-export declare function TimestampSwitch({ showTimestamps, onChange, collapsible, texts, className, }: {
+import { type ChatTexts } from "./texts";
+export declare function TimestampSwitch({ showTimestamps, onChange, collapsible, texts, className }: {
     showTimestamps: boolean;
     onChange: (showTimestamps: boolean) => void;
     collapsible?: boolean;

package/WorkingScenes.d.ts

@@ -1,4 +1,6 @@
 export interface WorkingScenesProps {
+    /** Limits scenes to one or two visible characters for small status fields. */
+    compact?: boolean;
     /** Text fuer Screenreader, Default "Arbeitet ...". */
     label?: string;
 }
@@ -7,4 +9,4 @@ export interface WorkingScenesProps {
  * und Startphase, damit dieselben Szenen nie wie eine Schleife wirken. Ueber die
  * working-Prop von ChatMessages laesst er sich komplett ersetzen.
  */
-export declare function WorkingScenes({ label }: WorkingScenesProps): import("react").JSX.Element;
+export declare function WorkingScenes({ label, compact }: WorkingScenesProps): import("react").JSX.Element;

package/attachments.d.ts

@@ -0,0 +1,24 @@
+import type { ChatAttachmentInput } from "./events";
+import { MAX_CHAT_ATTACHMENTS, MAX_CHAT_ATTACHMENT_BYTES } from "./chat-attachments";
+import { type ChatTexts } from "./texts";
+export { MAX_CHAT_ATTACHMENTS, MAX_CHAT_ATTACHMENT_BYTES };
+export declare const maxAttachmentSizeLabel = "20 MiB";
+export declare function attachmentMediaType(file: {
+    name: string;
+    type: string;
+}): string;
+export declare function attachmentCapabilityError(files: readonly {
+    name: string;
+    mediaType: string;
+}[], capabilities: {
+    input: readonly string[];
+    model: string;
+}, texts?: ChatTexts): string | undefined;
+export declare function validateAttachmentSelection(existing: readonly {
+    size: number;
+}[], incoming: readonly {
+    size: number;
+}[], texts?: ChatTexts): void;
+export declare function encodeAttachment(file: File): Promise<ChatAttachmentInput>;
+export declare function formatAttachmentSize(bytes: number): string;
+export declare function attachmentDownloadUrl(url: string): string;

package/chat-attachments.d.ts

@@ -0,0 +1,6 @@
+import type { ChatAttachmentInput } from "./events";
+export declare const MAX_CHAT_ATTACHMENTS = 8;
+export declare const MAX_CHAT_ATTACHMENT_BYTES: number;
+export declare const MAX_CHAT_REQUEST_BYTES: number;
+export declare const chatAttachmentMediaType: (name: string, mediaType: string) => string;
+export declare const parseChatAttachments: (value: unknown) => ChatAttachmentInput[];

package/chat-scroll.d.ts

@@ -0,0 +1,12 @@
+interface ScrollViewport {
+    scrollTop: number;
+    readonly scrollHeight: number;
+    readonly clientHeight: number;
+}
+export declare function createChatScroll(onFollowChange?: (following: boolean) => void): {
+    layout: (viewport: ScrollViewport, dragging?: boolean) => void;
+    pause(viewport: ScrollViewport): void;
+    scroll(viewport: ScrollViewport, dragging?: boolean): void;
+    jump(viewport: ScrollViewport): void;
+};
+export {};