@schlenkr/quassel 0.6.0 → 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,6 +43,7 @@ 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
@@ -91,11 +92,38 @@ 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.
 
+## Pill composer
+
+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.
+
+```tsx
+<ChatInputToolbar
+  layout="pill"
+  maxRows={5}
+  running={running}
+  onSend={send}
+  onStop={stop}
+  microphone={microphone}
+  replaceInput={microphone.state === "recording" ? <LiveWaveform /> : undefined}
+  toolbarLeft={<ConversationControls />}
+/>
+```
+
+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. All small UI text, including tools and timestamps, uses 85% with line height 1.4.
+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.
 

package/RecordingAura.d.ts

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

package/chat.css

@@ -21,12 +21,57 @@
     container-type: inline-size;
     container-name: chat;
   }
+  .qsl\:recording-aura {
+    position: fixed;
+    visibility: hidden;
+    pointer-events: none;
+    border: 2px solid var(--qsl-pill-aura-ring-color);
+    @supports (color: color-mix(in lab, red, red)) {
+      border: 2px solid color-mix(in srgb, var(--qsl-pill-aura-ring-color) 55%, transparent);
+    }
+    border-radius: 50%;
+    background: radial-gradient(circle, transparent 42%, var(--qsl-pill-aura-color) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: radial-gradient(circle, transparent 42%, color-mix(in srgb, var(--qsl-pill-aura-color) 30%, transparent) 70%, transparent);
+    }
+    box-shadow: 0 0 18px 5px var(--qsl-pill-aura-color);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 18px 5px color-mix(in srgb, var(--qsl-pill-aura-color) 25%, transparent);
+    }
+    transition: opacity 80ms linear, transform 80ms linear;
+  }
+  .qsl\:primary-icon {
+    position: absolute;
+    display: grid;
+    place-items: center;
+    opacity: 0;
+    transform: scale(0.6) rotate(-30deg);
+    transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+    pointer-events: none;
+    &[data-active="true"] {
+      opacity: 1;
+      transform: scale(1) rotate(0);
+    }
+    & svg {
+      width: 22px;
+      height: 22px;
+    }
+  }
   .qsl\:pointer-events-auto {
     pointer-events: auto;
   }
   .qsl\:pointer-events-none {
     pointer-events: none;
   }
+  .qsl\:recording-dot {
+    position: absolute;
+    right: 7px;
+    top: 7px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: currentColor;
+  }
   .qsl\:sr-only {
     position: absolute;
     width: 1px;
@@ -38,6 +83,48 @@
     white-space: nowrap;
     border-width: 0;
   }
+  .qsl\:primary-action {
+    position: relative;
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: var(--qsl-pill-primary-background, var(--qsl-primary));
+    color: var(--qsl-pill-primary-foreground, var(--qsl-primary-foreground));
+    box-shadow: var(--qsl-pill-primary-shadow, 0 5px 20px -5px var(--qsl-primary));
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: var(--qsl-pill-primary-shadow, 0 5px 20px -5px color-mix(in srgb, var(--qsl-primary) 50%, transparent));
+    }
+    cursor: pointer;
+    touch-action: none;
+    user-select: none;
+    -webkit-touch-callout: none;
+    transition: transform 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
+    &:hover:not(:disabled) {
+      filter: brightness(1.08);
+    }
+    &:active:not(:disabled) {
+      transform: scale(0.94);
+    }
+    &:focus-visible {
+      outline: 3px solid var(--qsl-primary);
+      outline-offset: 3px;
+    }
+    &:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+    &[data-primary-action="recording"] {
+      background: var(--qsl-pill-recording-background, var(--qsl-destructive));
+      color: var(--qsl-pill-recording-foreground, var(--qsl-background));
+      box-shadow: 0 0 0 4px var(--qsl-pill-aura-color, var(--qsl-destructive));
+      @supports (color: color-mix(in lab, red, red)) {
+        box-shadow: 0 0 0 4px color-mix(in srgb, var(--qsl-pill-aura-color, var(--qsl-destructive)) 22%, transparent);
+      }
+    }
+  }
   .qsl\:absolute {
     position: absolute;
   }
@@ -131,6 +218,45 @@
   .qsl\:ml-1\.5 {
     margin-left: calc(var(--qsl-spacing) * 1.5);
   }
+  .qsl\:pill-slot {
+    display: flex;
+    flex: none;
+    align-items: center;
+    align-self: flex-end;
+    gap: 2px;
+    min-height: 48px;
+    & > button {
+      min-width: 36px;
+      min-height: 36px;
+      border-radius: 999px;
+    }
+  }
+  .qsl\:pill-replacement {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    align-self: center;
+    min-width: 0;
+    min-height: 48px;
+    padding-inline: 8px;
+    font-size: var(--qsl-base);
+  }
+  .qsl\:pill-row {
+    display: flex;
+    align-items: flex-end;
+    gap: 4px;
+    min-height: 64px;
+    min-width: 0;
+    padding: 7px;
+    border: 1px solid var(--qsl-pill-border, var(--qsl-border));
+    border-radius: 32px;
+    background: var(--qsl-pill-background, var(--qsl-background));
+    box-shadow: var(--qsl-pill-shadow, var(--qsl-bar-shadow));
+    transition: border-color 180ms ease, box-shadow 180ms ease;
+    &:focus-within {
+      border-color: var(--qsl-primary);
+    }
+  }
   .qsl\:block {
     display: block;
   }
@@ -170,6 +296,10 @@
     width: calc(var(--qsl-spacing) * 9);
     height: calc(var(--qsl-spacing) * 9);
   }
+  .qsl\:size-24 {
+    width: calc(var(--qsl-spacing) * 24);
+    height: calc(var(--qsl-spacing) * 24);
+  }
   .qsl\:h-5 {
     height: calc(var(--qsl-spacing) * 5);
   }
@@ -209,6 +339,20 @@
   .qsl\:max-h-\[min\(70dvh\,620px\,var\(--available-height\)\)\] {
     max-height: min(70dvh, 620px, var(--available-height));
   }
+  .qsl\:pill-input {
+    flex: 1;
+    align-self: center;
+    min-width: 0;
+    min-height: 48px;
+    padding: 12px 8px;
+    border-radius: 24px;
+    font-size: var(--qsl-base);
+    line-height: 1.5;
+    &:focus-visible {
+      outline: 2px solid var(--qsl-primary);
+      outline-offset: -2px;
+    }
+  }
   .qsl\:min-h-0 {
     min-height: 0px;
   }
@@ -230,9 +374,6 @@
   .qsl\:w-\[190px\] {
     width: 190px;
   }
-  .qsl\:w-\[320px\] {
-    width: 320px;
-  }
   .qsl\:w-\[calc\(100\%_-_2_\*_var\(--qsl-chat-horizontal-padding\,24px\)\)\] {
     width: calc(100% - 2 * var(--qsl-chat-horizontal-padding,24px));
   }
@@ -565,6 +706,9 @@
   .qsl\:object-contain {
     object-fit: contain;
   }
+  .qsl\:object-cover {
+    object-fit: cover;
+  }
   .qsl\:p-0 {
     padding: 0px;
   }
@@ -1194,6 +1338,11 @@
   .qsl\:data-\[working\=true\]\:border-primary[data-working="true"] {
     border-color: var(--qsl-primary);
   }
+  @media (prefers-reduced-motion: no-preference) {
+    .qsl\:motion-safe\:animate-spin {
+      animation: var(--qsl-animate-spin);
+    }
+  }
   @media (prefers-reduced-motion: reduce) {
     .qsl\:motion-reduce\:animate-none {
       animation: none;
@@ -1543,6 +1692,16 @@
   inherits: true;
   initial-value: 13px;
 }
+@media (prefers-reduced-motion: reduce) {
+  [data-layout="pill"] *, [data-recording-aura] {
+    transition: none !important;
+    animation: none !important;
+  }
+  [data-recording-aura] {
+    transform: scale(1.3) !important;
+    opacity: 0.6 !important;
+  }
+}
 @layer components {
   [data-quassel-markdown] {
     overflow-wrap: anywhere;

package/index.d.ts

@@ -20,6 +20,6 @@ export { ChatSendContext, createChatSendScope, type ChatSendScope } from "./Chat
 export { messageDate, timestampDay, timestampLabel } from "./timestamps";
 export { formatElapsed, useElapsed } from "./elapsed";
 export { attachmentCapabilityError, attachmentDownloadUrl, attachmentMediaType, encodeAttachment, formatAttachmentSize, validateAttachmentSelection, MAX_CHAT_ATTACHMENTS, MAX_CHAT_ATTACHMENT_BYTES, } from "./attachments";
-export type { ChatAppearance, TimestampOptions, CodeBlockOptions, BubbleOptions, MessageAction, MessageActionsOptions, SendShortcut, } from "./options";
+export type { ChatAppearance, TimestampOptions, CodeBlockOptions, BubbleOptions, MessageAction, MessageActionsOptions, SendShortcut, ChatMicrophone, MicrophonePress, } from "./options";
 export { appearanceStyle } from "./options";
 export { QuasselProvider, defaultComponents, useQuasselComponents, useQuasselPortalContainer, type QuasselComponents, type QuasselButtonProps, type QuasselButtonVariant, type QuasselButtonSize, type QuasselToggleProps, type QuasselCardProps, type QuasselStopButtonProps, type QuasselPopoverProps, type QuasselPopoverContentProps, type QuasselPopoverAnchor, type QuasselPortalContainer, type QuasselPortalTarget, } from "./QuasselProvider";