@kitn.ai/ui 0.18.2 → 0.20.0

package/src/components/composer.tsx

@@ -855,6 +855,10 @@ export function Composer(props: ComposerProps): JSX.Element {
         .kai-composer-pill-glyph svg { width: 1em; height: 1em; display: block; }
         /* The editable is the containing block for the placeholder pseudo-element. */
         [data-kai-composer-editable] { position: relative; }
+        /* While a pill is arrow-selected the pill IS the selection, so hide the text
+           caret so a blinking cursor doesn't sit beside the highlight box. Returns
+           the moment the pill selection clears (arrow off, type, click, backspace). */
+        [data-kai-composer-editable][data-pill-selected] { caret-color: transparent; }
         /* Placeholder via pseudo-element — exempt from axe color-contrast like a
            native <textarea> placeholder. position:absolute (with auto offsets =
            its static text-origin spot) takes it OUT of flow, so the caret sits at
@@ -874,6 +878,7 @@ export function Composer(props: ComposerProps): JSX.Element {
         <div
           ref={(el) => { editable = el; props.editableRef?.(el); }}
           data-kai-composer-editable
+          data-pill-selected={selectedPill() ? '' : undefined}
           data-placeholder={props.placeholder ?? ''}
           contentEditable={props.disabled ? false : ('plaintext-only' as unknown as boolean)}
           role="textbox"

package/src/components/thread.tsx

@@ -0,0 +1,177 @@
+import { For, Show, onMount, type JSX } from 'solid-js';
+import { ChatConfig, useChatConfig } from '../primitives/chat-config';
+import { ChatContainer, ChatContainerContent, ChatContainerScrollAnchor } from './chat-container';
+import { Message, MessageAvatar, MessageBody } from './message';
+import { createMessageFeedback, type MessageActionDetail } from '../primitives/message-feedback';
+import { ScrollButton } from './scroll-button';
+import { Loader } from './loader';
+import type { ChatMessage } from '../elements/chat-types';
+import type { ProseSize } from '../primitives/chat-config';
+
+/** Imperative handle exposed via `controllerRef` — the thread's scroll control,
+ *  forwarded onto `<kai-thread>` as the `scrollToBottom()` instance method. */
+export interface ThreadController {
+  /** Scroll the message list to the bottom (default `'smooth'`). */
+  scrollToBottom(behavior?: ScrollBehavior): void;
+}
+
+export interface ThreadProps {
+  /** Extra classes for the thread root (e.g. `rounded-xl`). */
+  class?: string;
+  /** The full message thread to render, newest last. Each entry carries its role,
+   *  content, and optional reasoning/tools/attachments/actions/avatar. A new array
+   *  reference per streaming chunk re-renders (mutating in place does not). */
+  messages: ChatMessage[];
+  /** Show a typing indicator on the pending assistant turn — use while awaiting
+   *  the assistant's reply. */
+  loading?: boolean;
+  /** Body/prose font scale for rendered markdown (`'xs' | 'sm' | 'base' | 'lg'`).
+   *  Defaults to `'sm'`. */
+  proseSize?: ProseSize;
+  /** 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;
+  /** Custom zero-state shown while the thread is empty. A sensible default renders
+   *  when omitted (the `<kai-thread>` facade wires this to `slot="empty"`). */
+  empty?: JSX.Element;
+  /** Fired when a message's action button is clicked (copy / vote / regenerate /
+   *  edit / custom). The facade re-dispatches this as `kai-message-action`. */
+  onMessageAction?: (detail: MessageActionDetail) => void;
+  /** Receive the imperative controller once mounted — the `<kai-thread>` facade
+   *  forwards `scrollToBottom` onto the host. */
+  controllerRef?: (controller: ThreadController) => void;
+}
+
+/** Built-in zero-state, shown when the thread is empty and no `empty` is supplied. */
+function DefaultEmpty() {
+  return (
+    <div class="flex min-h-[10rem] flex-1 flex-col items-center justify-center gap-1 py-12 text-center">
+      <p class="text-sm font-medium text-foreground">No messages yet</p>
+      <p class="text-xs text-muted-foreground">
+        Messages will appear here as the conversation starts.
+      </p>
+    </div>
+  );
+}
+
+/**
+ * `Thread` — the message-list slice of a chat, as a standalone composable: the
+ * scrolling list of messages + per-message rendering (markdown, code highlight,
+ * reasoning + tool panels, avatars, and the action row), stick-to-bottom scroll
+ * with a scroll-to-bottom button, an optional typing indicator, and an empty
+ * state. No composer, header, suggestions, or sidebar — those are sibling/preset
+ * concerns. This is the source of truth behind the `<kai-thread>` facade; it is
+ * composed from the same internal pieces `ChatThread` uses for its message list.
+ */
+export function Thread(props: ThreadProps) {
+  const outer = useChatConfig();
+  const reveal = () => (props.actionsReveal === 'hover' ? 'hover' : 'always');
+  // Feedback (copy + vote) state lives ABOVE the per-message <For>, so streaming
+  // re-renders (a fresh `messages` array ref per chunk) don't wipe it. The
+  // copy/feedback toasts scope to this thread's root so they appear in-thread
+  // rather than at the page top.
+  let rootEl: HTMLElement | undefined;
+  const feedback = createMessageFeedback({
+    emit: (detail) => props.onMessageAction?.(detail),
+    target: () => rootEl,
+  });
+  const showScrollButton = () => props.scrollButton !== false;
+  const showEmpty = () => props.messages.length === 0 && !props.loading;
+
+  // Hand the imperative controller to the facade once mounted (rootEl is set).
+  onMount(() => {
+    props.controllerRef?.({
+      scrollToBottom: (behavior) => {
+        const vp = rootEl?.querySelector<HTMLElement>('.overflow-y-auto');
+        vp?.scrollTo({ top: vp.scrollHeight, behavior: behavior ?? 'smooth' });
+      },
+    });
+  });
+
+  return (
+    <ChatConfig
+      proseSize={props.proseSize}
+      codeTheme={props.codeTheme}
+      codeHighlight={props.codeHighlight !== false}
+      portalMount={outer.portalMount()}
+    >
+      <div
+        ref={(e) => (rootEl = e as HTMLElement)}
+        class={`relative flex h-full min-h-0 flex-col bg-background ${props.class ?? ''}`}
+      >
+        <ChatContainer class="h-full px-4 py-3">
+          <ChatContainerContent class="mx-auto w-full max-w-3xl space-y-4">
+            {/* Zero-state: the consumer owns WHAT it looks like (`empty`); the
+                component owns WHEN it shows (empty + not loading). */}
+            <Show when={showEmpty()}>
+              <Show when={props.empty} fallback={<DefaultEmpty />}>
+                {props.empty}
+              </Show>
+            </Show>
+            <For each={props.messages}>
+              {(m) => {
+                const body = (
+                  <MessageBody
+                    content={m.content}
+                    reasoning={m.reasoning}
+                    tools={m.tools}
+                    attachments={m.attachments}
+                    isUser={m.role === 'user'}
+                    markdown={m.role === 'assistant'}
+                    actions={m.actions}
+                    actionsReveal={reveal()}
+                    activeFeedback={feedback.resolveFeedback(m)}
+                    copied={feedback.isCopied(m.id)}
+                    onAction={(action) => feedback.handleAction(m, action)}
+                  />
+                );
+                const rowGroup = reveal() === 'hover' ? 'group ' : '';
+                return (
+                  <Show
+                    when={m.avatar}
+                    fallback={
+                      <Message class={`${rowGroup}${m.role === 'user' ? 'flex-col items-end' : 'flex-col items-start'}`}>
+                        {body}
+                      </Message>
+                    }
+                  >
+                    {(av) => (
+                      <Message class={rowGroup}>
+                        <MessageAvatar src={av().src ?? ''} alt={av().alt ?? ''} fallback={av().fallback} />
+                        <div class={`flex min-w-0 flex-1 flex-col ${m.role === 'user' ? 'items-end' : 'items-start'}`}>
+                          {body}
+                        </div>
+                      </Message>
+                    )}
+                  </Show>
+                );
+              }}
+            </For>
+            {/* Typing indicator on the pending assistant turn. */}
+            <Show when={props.loading}>
+              <Message class="flex-col items-start">
+                <div class="rounded-lg px-1 py-2">
+                  <Loader variant="typing" />
+                </div>
+              </Message>
+            </Show>
+            <ChatContainerScrollAnchor />
+          </ChatContainerContent>
+          <Show when={showScrollButton()}>
+            <div class="absolute bottom-4 left-1/2 flex w-full max-w-3xl -translate-x-1/2 justify-center px-5">
+              <ScrollButton class="shadow-sm" />
+            </div>
+          </Show>
+        </ChatContainer>
+      </div>
+    </ChatConfig>
+  );
+}

package/src/elements/audio-visualizer.tsx

@@ -0,0 +1,183 @@
+import type { JSX } from 'solid-js';
+import { AudioVisualizer, type ShaderSpec, type VisualizerVariant } from '../components/audio-visualizer';
+import type { VisualizerSize } from '../components/audio-visualizer/sizes';
+import { defineWebComponent, type WebComponentContext } from './define';
+
+interface Props extends Record<string, unknown> {
+  /** 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?: ShaderSpec;
+  /** 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;
+}
+
+/**
+ * Parse a numeric attribute or JS property value. Attribute values arrive as
+ * strings, so a missing or non-numeric one must resolve to `undefined` (which
+ * the composed component then defaults itself), never `NaN`, which would
+ * poison the downstream geometry (bar counts, radii, grid dimensions).
+ */
+export function num(value: unknown): number | undefined {
+  if (value == null || value === '') return undefined;
+  const n = Number(value);
+  return Number.isFinite(n) ? n : undefined;
+}
+
+/**
+ * The facade's render logic, extracted to a named function so it can be
+ * exercised directly in tests (a plain Solid component call, no shadow DOM
+ * involved) without needing `defineWebComponent`'s browser-only custom-element
+ * upgrade path. Identical to what was previously an inline arrow passed to
+ * `defineWebComponent` below, plus forwarding the resolved theme (see `dark`
+ * below) once that context field existed to forward.
+ *
+ * `ctx` is optional so the existing declarative test (which calls this
+ * directly with just `props`, the way it did before `dark` existed) keeps
+ * working unchanged. `defineWebComponent` always supplies a real one; the
+ * `false` fallback only matters for that reduced, no-shadow-DOM call path.
+ */
+export function AudioVisualizerFacade(
+  props: Props,
+  ctx?: Partial<Pick<WebComponentContext, 'dark' | 'flag'>>,
+): JSX.Element {
+  // Every element already resolves `theme='light'|'dark'|'auto'` against a
+  // live `prefers-color-scheme` listener in `defineWebComponent` (see
+  // `createDarkMode`), to drive the `.dark` class every element's content
+  // sits inside. A WebGL shader cannot read that class or a CSS custom
+  // property, so `<kai-audio-visualizer variant="aurora">` needs the ALREADY
+  // -RESOLVED boolean forwarded explicitly instead. Passing it through as a
+  // definite 'light'/'dark' (never 'auto') means the resolution RULE itself
+  // -- explicit wins, 'auto' follows the media query -- lives in exactly one
+  // place (`createDarkMode`); this is a plain relay, not a second
+  // implementation of that rule.
+  const dark = ctx?.dark?.() ?? false;
+
+  // `flag` is what makes a BARE attribute
+  // (`<kai-audio-visualizer animate-when-not-visible>`) mean true:
+  // component-register parses a valueless boolean attribute to `undefined`, so
+  // the prop alone cannot tell it apart from an absent one. Same helper every
+  // other boolean-attribute element uses, so the coercion rule lives in one
+  // place. The `props` fallback only covers the ctx-less direct-call path the
+  // declarative test uses, where there is no host element carrying an
+  // attribute at all.
+  const animateWhenNotVisible = ctx?.flag
+    ? ctx.flag('animateWhenNotVisible')
+    : props.animateWhenNotVisible === true;
+
+  return (
+    <AudioVisualizer
+      variant={props.variant as VisualizerVariant | undefined}
+      state={props.state as string | undefined}
+      size={props.size as VisualizerSize | undefined}
+      barCount={num(props.barCount)}
+      count={num(props.count)}
+      radius={num(props.radius)}
+      spread={num(props.spread)}
+      interval={num(props.interval)}
+      color={props.color as string | undefined}
+      complexity={num(props.complexity)}
+      label={props.label as string | undefined}
+      stream={props.stream as MediaStream | undefined}
+      audioElement={props.audioElement as HTMLMediaElement | undefined}
+      bands={props.bands as number[] | undefined}
+      shader={props.shader as ShaderSpec | undefined}
+      animateWhenNotVisible={animateWhenNotVisible}
+      theme={dark ? 'dark' : 'light'}
+    />
+  );
+}
+
+/**
+ * `<kai-audio-visualizer>` renders live audio as bars, a grid, a ring, a wave,
+ * or a glowing aurora. It also animates from `state` alone with no audio at
+ * all, which is what you want when the source cannot be tapped (browser
+ * speech synthesis exposes no audio node).
+ *
+ * ```html
+ * <kai-audio-visualizer variant="bar" state="speaking" size="md"></kai-audio-visualizer>
+ * <kai-audio-visualizer variant="radial" size="lg" bar-count="24"></kai-audio-visualizer>
+ * ```
+ *
+ * Audio sources and rich data are JS properties, never attributes:
+ * ```js
+ * el.stream = micStream            // MediaStream
+ * el.audioElement = audioRef       // HTMLMediaElement
+ * el.bands = [0.2, 0.8, 0.4]       // pre-computed, skips Web Audio; new array each update
+ * el.shader = { fragment: glsl }   // variant="custom" only
+ * ```
+ *
+ * The `wave`, `aurora`, and `custom` variants render through WebGL, and a
+ * browser only allows about 16 live WebGL contexts per page. So a shader
+ * variant scrolled off screen stops drawing and hands its context back,
+ * picking up where it left off when it returns. Opt out per element when a
+ * visualizer must keep running unseen:
+ *
+ * ```html
+ * <kai-audio-visualizer variant="wave" animate-when-not-visible></kai-audio-visualizer>
+ * ```
+ *
+ * This is a display element: no methods, no events.
+ *
+ * Restyle from outside via `::part(bar)` / `::part(cell)` / `::part(canvas)`,
+ * the bar and cell parts each carrying `data-kai-index` and `data-kai-highlighted`.
+ */
+defineWebComponent<Props>('kai-audio-visualizer', {
+  variant: 'bar',
+  state: 'idle',
+  size: 'md',
+  barCount: undefined,
+  count: undefined,
+  radius: undefined,
+  spread: undefined,
+  interval: undefined,
+  color: undefined,
+  complexity: undefined,
+  label: undefined,
+  stream: undefined,
+  audioElement: undefined,
+  bands: undefined,
+  shader: undefined,
+  // `undefined`, not `false`: `resolveFlag` short-circuits on an explicit
+  // `false` prop value, so a `false` default would beat a bare
+  // `animate-when-not-visible` attribute if component-register ever left the
+  // default in place instead of writing `undefined` for a valueless attribute.
+  animateWhenNotVisible: undefined,
+}, AudioVisualizerFacade);

package/src/elements/chat-workspace.tsx

@@ -266,7 +266,7 @@ defineWebComponent<Props, Events>('kai-workspace', {
               </Show>
             </div>
           </ResizablePanel>
-          <ResizableHandle withHandle />
+          <ResizableHandle />
           <ResizablePanel>{mainRegion}</ResizablePanel>
         </ResizablePanelGroup>
       </Show>