@kitn.ai/ui 0.18.2 → 0.20.0

package/dist/react/index.d.ts

@@ -2,6 +2,7 @@ import { registerAll, WebComponentProps } from './runtime';
 export { registerAll };
 export { useKaiChat } from './use-kai-chat';
 export type { UseKaiChatOptions, KaiChatController, ChatMessage } from './use-kai-chat';
+export { useVoiceInput } from './use-voice-input';
 export interface AgentCardProps extends WebComponentProps {
     /** The agent's name — the primary label. Attribute: `name`. */
     name?: string;
@@ -111,6 +112,47 @@ export interface AttachmentsProps extends WebComponentProps {
     }>) => void;
 }
 export declare const Attachments: import('react').ForwardRefExoticComponent<AttachmentsProps & import('react').RefAttributes<HTMLElement>>;
+export interface AudioVisualizerProps extends WebComponentProps {
+    /** Look to render: `bar` (default), `grid`, `radial`, `wave`, `aurora`, `custom`. `aura` is accepted as a LiveKit-markup alias for `aurora`. Attribute: `variant`. */
+    variant?: string;
+    /** `idle` (default), `connecting`, `listening`, `thinking`, `speaking`, `disconnected` (connection down: the dead, flat look). LiveKit's room-lifecycle state names are accepted as aliases. Attribute: `state`. */
+    state?: string;
+    /** `icon` | `sm` | `md` (default) | `lg` | `xl`. Attribute: `size`. */
+    size?: string;
+    /** Bars to draw. Bar and radial only. Attribute: `bar-count`. */
+    barCount?: number;
+    /** Grid only: rows and columns of the (always square) grid. Attribute: `count`. */
+    count?: number;
+    /** Radial only: ring distance from center, in px. Attribute: `radius`. */
+    radius?: number;
+    /** Grid only: ring distance for the connecting animation, in cells. Attribute: `spread`. */
+    spread?: number;
+    /** Grid only: ms between scripted frames. Attribute: `interval`. */
+    interval?: number;
+    /** CSS color for the geometry, overriding the inherited `currentColor`. Attribute: `color`. */
+    color?: string;
+    /** Shader variants only: pattern density, 0..1. Attribute: `complexity`. */
+    complexity?: number;
+    /** Setting this makes the element an announced image (`role="img"`) instead of decorative (`aria-hidden`). Attribute: `label`. */
+    label?: string;
+    /** Live microphone or WebRTC audio to analyze. JS property only. */
+    stream?: MediaStream;
+    /** An `<audio>` or `<video>` element to tap for its audio. JS property only. */
+    audioElement?: HTMLMediaElement;
+    /** Pre-computed levels, 0..1. Set this and no AudioContext is ever built, which is what keeps headless/SSR rendering and browser-speech-synthesis playback (which exposes no audio node) free of Web Audio entirely. JS property only. A new array reference is required for each update; mutating the existing array in place will not re-render. */
+    bands?: number[];
+    /** Custom fragment shader for `variant="custom"`. JS property only. */
+    shader?: {
+        fragment: string;
+        uniforms?: Record<string, {
+            type: "1f" | "1i" | "1fv" | "2f" | "3f" | "3fv" | "4f" | "4fv" | "Matrix2fv" | "Matrix3fv" | "Matrix4fv";
+            value: number | number[];
+        }>;
+    };
+    /** Shader variants only: keep animating while scrolled off screen. Off by default, which stops drawing and releases the WebGL context until the element comes back (browsers ration contexts to roughly 16 a page). Does not override `prefers-reduced-motion`. Attribute: `animate-when-not-visible`. */
+    animateWhenNotVisible?: boolean;
+}
+export declare const AudioVisualizer: import('react').ForwardRefExoticComponent<AudioVisualizerProps & import('react').RefAttributes<HTMLElement>>;
 export interface AvatarProps extends WebComponentProps {
     /** Image URL/data-URI. When absent, the `fallback` initials show instead. */
     src?: string;
@@ -1536,6 +1578,8 @@ export interface ResizableProps extends WebComponentProps {
     orientation?: "vertical" | "horizontal";
     /** Which item index is maximized (null = none). Declarative source of truth. */
     maximizedIndex?: null | number;
+    /** Divider affordance drawn inside each draggable handle's 8px grab zone: - `line` (default) — a 1px hairline, transparent at rest, tinting on hover/drag. - `grip` — a dotted grip handle. - `none` — no visible divider, just the invisible hit-area. The full grab zone and keyboard/ARIA behavior are identical for all three. */
+    handle?: "none" | "line" | "grip";
     /** Fired on drag-end / keyboard resize / visibility change. `detail.sizes` = panel sizes in percent. */
     onChange?: (event: CustomEvent<{
         sizes: number[];
@@ -1875,6 +1919,67 @@ export interface ThinkingBarProps extends WebComponentProps {
     onStop?: (event: CustomEvent) => void;
 }
 export declare const ThinkingBar: import('react').ForwardRefExoticComponent<ThinkingBarProps & import('react').RefAttributes<HTMLElement>>;
+export interface ThreadProps extends WebComponentProps {
+    /** The full message thread to render, newest last. Each entry carries its role, content, and optional reasoning/tools/attachments/actions/avatar. Set as a JS property (`el.messages = [...]`); a NEW array reference per streaming chunk re-renders (mutating in place does not). */
+    messages?: {
+        id: string;
+        role: "user" | "assistant";
+        content: string;
+        reasoning?: {
+            text: string;
+            label?: string;
+        };
+        tools?: {
+            type: string;
+            state: "input-streaming" | "input-available" | "output-available" | "output-error";
+            input?: Record<string, unknown>;
+            output?: Record<string, unknown>;
+            toolCallId?: string;
+            errorText?: string;
+        }[];
+        attachments?: {
+            id: string;
+            type: "file" | "source-document";
+            filename?: string;
+            mediaType?: string;
+            url?: string;
+            title?: string;
+        }[];
+        actions?: ("copy" | "like" | "dislike" | "regenerate" | "edit" | {
+            id: string;
+            label: string;
+            icon?: string;
+            tooltip?: string;
+        })[];
+        avatar?: {
+            src?: string;
+            fallback?: string;
+            alt?: string;
+        };
+        feedback?: "like" | "dislike";
+    }[];
+    /** Show a typing indicator on the pending assistant turn — set while awaiting the assistant's reply. */
+    loading?: boolean;
+    /** Body/prose font scale for rendered markdown (`'xs' | 'sm' | 'base' | 'lg'`). Defaults to `'sm'`. */
+    proseSize?: "sm" | "lg" | "xs" | "base";
+    /** Shiki theme name for syntax-highlighted code blocks (e.g. `'github-dark-dimmed'`). */
+    codeTheme?: string;
+    /** Enable Shiki syntax highlighting in code blocks. Turn off to render plain `<pre>` blocks (lighter, no highlighter load). Default true. */
+    codeHighlight?: boolean;
+    /** Whether each message's action bar is always visible (`'always'`, default) or only revealed on hover of that message row (`'hover'`). */
+    actionsReveal?: "always" | "hover";
+    /** Show the scroll-to-bottom button inside the scroll area. Default true. */
+    scrollButton?: boolean;
+    /** Extra classes applied to the thread's inner root. */
+    class?: string;
+    /** A message's action button was clicked. `action` is the built-in name (`copy` / `like` / `dislike` / `regenerate` / `edit`) or a custom id. `state` is present only for the toggleable feedback votes: `'on'` when a like/dislike is set, `'off'` when re-tapped to clear. */
+    onMessageAction?: (event: CustomEvent<{
+        messageId: string;
+        action: string;
+        state?: undefined | "on" | "off";
+    }>) => void;
+}
+export declare const Thread: import('react').ForwardRefExoticComponent<ThreadProps & import('react').RefAttributes<HTMLElement>>;
 export interface ToastRegionProps extends WebComponentProps {
     /** The toasts to render. Newest is shown on top. Set as a JS property (array); pass a new array reference to update. */
     toasts: {

package/dist/react/use-voice-input.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Web Speech mic → one-shot transcript. Chromium-only (`webkitSpeechRecognition`);
+ * `supported` is false elsewhere so the caller can degrade gracefully. This hook is
+ * deliberately ONLY about speech recognition: it hands the raw transcript to
+ * `onTranscript` and lets the caller decide what to do with it (e.g. a composer mic
+ * button appends it to the live text). No composer or DOM knowledge.
+ *
+ * @param onTranscript called with the final recognized transcript.
+ * @returns `supported` (Chromium-only availability) and a referentially stable,
+ *   one-shot `start` (a no-op when unsupported).
+ */
+export declare function useVoiceInput(onTranscript: (transcript: string) => void): {
+    supported: boolean;
+    start: () => void;
+};