@schlenkr/quassel 0.5.6 → 0.7.0

package/ChatInputToolbar.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode, Ref } from "react";
 import { ChatTexts } from "./texts";
 import type { ChatAttachmentInput } from "./events";
-import type { SendShortcut } from "./options";
+import type { ChatMicrophone, SendShortcut } from "./options";
 /** A toolbar button, declarative: icon, text or both - plus click handler. */
 export interface ToolbarAction {
     icon?: ReactNode;
@@ -21,20 +21,14 @@ export interface ChatInputHandle {
         allowEmpty?: boolean;
     }) => Promise<void>;
 }
-/**
- * The input card: borderless textarea on top, toolbar below a hairline. Custom buttons come
- * declaratively through `actions` or freely through the left/right slots; while work is running
- * the stop button stays visible, and typing shows the send button next to it, which then
- * interjects. `rows` sets the initial height; with `maxRows` the textarea grows with its content
- * up to that number of rows and scrolls after that. `inline` starts with one row and grows the same way.
- */
-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, }: {
+/** A composer with attachments, host slots and steering into a running turn. */
+export declare function ChatInputToolbar({ onSend, onStop, running, disabled, sendDisabled, layout, detailsContainer, onErrorChange, inputAriaControls, rows, maxRows, actions, toolbarLeft, toolbarRight, microphone, replaceInput, 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";
+    layout?: "card" | "toolbar" | "inline" | "pill";
     detailsContainer?: HTMLElement | null;
     onErrorChange?: (error: string | undefined) => void;
     inputAriaControls?: string;
@@ -43,6 +37,8 @@ export declare function ChatInputToolbar({ onSend, onStop, running, disabled, se
     actions?: ToolbarAction[];
     toolbarLeft?: ReactNode;
     toolbarRight?: ReactNode;
+    microphone?: ChatMicrophone;
+    replaceInput?: ReactNode;
     texts?: Partial<ChatTexts>;
     handleRef?: Ref<ChatInputHandle>;
     /** false = no attaching: neither button nor dropping or pasting files. */

package/ComposerPrimaryAction.d.ts

@@ -0,0 +1,13 @@
+import type { ChatMicrophone } from "./options";
+import type { ChatTexts } from "./texts";
+export declare function ComposerPrimaryAction({ hasContent, running, sending, disabled, sendDisabled, microphone, texts, onSend, onStop }: {
+    hasContent: boolean;
+    running: boolean;
+    sending: boolean;
+    disabled: boolean;
+    sendDisabled: boolean;
+    microphone?: ChatMicrophone;
+    texts: Required<ChatTexts>;
+    onSend: () => void;
+    onStop?: () => void;
+}): import("react").JSX.Element;

package/QuasselProvider.d.ts

@@ -18,6 +18,7 @@ export interface QuasselToggleProps {
     className?: string;
     disabled?: boolean;
     title?: string;
+    "aria-label"?: string;
     pressed?: boolean;
     onPressedChange?: (pressed: boolean) => void;
     children?: ReactNode;

package/README.md

@@ -43,13 +43,14 @@ variables too.
 - 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.
+- Optional pill composer: one animated action for microphone, send, steering and stop, with host-controlled recording and transcription.
 - Condensed conversation: all user inputs and the latest answer between them, independently of tool/thinking detail.
 - Timestamps, day separators, message actions, configurable bubbles and appearance.
 - Screen reader friendly: the transcript is not a live region; finished replies and new
   actions are announced once, with the host in control of the wording.
 - Complete English and German UI labels through `englishTexts` / `germanTexts`; `texts` can override any label (English by default).
 - Grouped steps show their error count even while collapsed.
-- Text size follows the host: no overrides needed to fit in (see below).
+- One text size per host, a fixed small size and shared Markdown typography (see below).
 
 ## Install
 
@@ -91,30 +92,55 @@ export function Chat({ send, stop }: { send: (text: string) => Promise<void>; st
 
 Any backend that emits the `@schlenkr/quassel/events` stream works with the same components.
 
-## Text size
+## Pill composer
 
-quassel starts at 13px with a line height of 1.5, a 10px message gap and a 3px dense
-step gap. Tool rows and timestamps use 88% of the text size. Expanded tool groups have a
-1px gap between rows; tool rows have 1px of vertical padding on each side.
+Use `layout="pill"` for a larger, rounded composer with one 48px primary action. Host buttons
+go into `toolbarLeft` and `toolbarRight`; attachments stay just before the primary action.
 
-Every size derives from one base, so nested elements never compound. Set `--qsl-font-size`
-on a wrapper, or `appearance.fontSize`, to change it. Use `1em` to follow the host's font size.
-`appearance` also offers `toolFontScale`, `toolGroupGap` and `toolRowPadding`.
+```tsx
+<ChatInputToolbar
+  layout="pill"
+  maxRows={5}
+  running={running}
+  onSend={send}
+  onStop={stop}
+  microphone={microphone}
+  replaceInput={microphone.state === "recording" ? <LiveWaveform /> : undefined}
+  toolbarLeft={<ConversationControls />}
+/>
+```
 
-User message backgrounds fill the available row by default while text keeps its width and
-alignment. `bubbleOptions={{ userBackgroundFullWidth: false }}` restores a fitted background.
-Timestamps sit beside messages by default; their size follows the tool text unless overridden:
+Empty input shows the microphone, text or attachments show send, and an empty running turn
+shows stop. Typing while running sends into that turn. Without `microphone`, empty input shows
+a disabled send button. The host owns audio, press-and-hold or click-to-latch behavior, and
+transcription through the typed `ChatMicrophone` API. Recording has a live color and an aura
+driven by `level` (0-1); preparing and transcribing show a spinner. The aura renders outside
+clipping ancestors and animations respect reduced motion. Card, inline and toolbar keep their defaults.
+See the [API, state table and microphone integration](https://github.com/SchlenkR/quassel/blob/main/docs/guide.md#pill-composer) and the gallery's Pill composer demo.
+
+## Text size
+
+quassel defaults to 13px. Set `--qsl-font-size` on a wrapper, or `1em` to inherit the host's
+font size. Messages, the composer, action cards and text buttons use that base with line height
+1.5, the pill input included. All small UI text, including tools and timestamps, uses 85% with
+line height 1.4.
+`--qsl-font` and `--qsl-mono` select the font families. There are no other typography inputs.
+Sizes derive from an absolute base, so nested small elements never compound.
+
+`Markdown` uses the same typography in answers and standalone documents:
 
 ```tsx
-<ChatMessages
-    messages={messages}
-    showTimestamps
-    timestampOptions={{ position: "above", fontScale: 0.88 }}
-/>
+<Markdown text={documentText} />
 ```
 
-`--qsl-text-trace`, `--qsl-timestamp-font-size` and the other `--qsl-text-*` variables override
-individual sizes. The [guide](https://github.com/SchlenkR/quassel/blob/main/docs/guide.md#text-size) lists the full API.
+User message backgrounds fill the available row by default while text keeps its width and
+alignment. `bubbleOptions={{ userBackgroundFullWidth: false }}` restores a fitted background.
+Timestamps sit beside messages by default; `timestampOptions={{ position: "above" }}` moves
+them above. Message gaps and tool row spacing remain configurable through `appearance`.
+
+For 0.6, replace separate size and line-height overrides with `--qsl-font-size` and remove
+all typography fields from `appearance` and timestamp options. The [migration guide](https://github.com/SchlenkR/quassel/blob/main/docs/guide.md#migration-to-06)
+lists the removed variables and options.
 
 ## Development
 

package/RecordingAura.d.ts

@@ -0,0 +1,4 @@
+export declare function RecordingAura({ anchor, level }: {
+    anchor: HTMLButtonElement;
+    level?: number;
+}): import("react").ReactPortal;