@webjsdev/ui 0.3.17 → 0.5.0

package/packages/registry/blocks/preview-03/cards/group-chat.ts

@@ -0,0 +1,114 @@
+/**
+ * The preview-03 group chat card: several people planning a dinner, with
+ * join, leave and typing notices between their messages, and an assistant
+ * the group calls with `@chat,`. Your own messages sit at the end in a
+ * tinted bubble; everyone else's carry their name. A fragment helper,
+ * rendered by the server; `<preview-03-chat>` plays the turns, one message
+ * each, and the notices on their own timing.
+ *
+ * Installed by `npx @webjsdev/ui add preview-03` at
+ * `components/preview-03/group-chat.ts`. Ported from shadcn/ui's preview-03,
+ * whose script it keeps except that its em-dashes are written as commas.
+ */
+import { html } from '@webjsdev/core';
+import { messageHeaderClass } from '../../../components/message.ts';
+import { chatCard, chatItem, chatMarker, chatMessage, type ChatPrompt } from '../components/chat-card.ts';
+import { partText } from '../components/part-text.ts';
+
+interface GroupMessage {
+  /** Absent for your own messages. */
+  name?: string;
+  text: string;
+}
+
+const MESSAGES: GroupMessage[] = [
+  { text: 'Hey everyone, dinner this Saturday? I was thinking something casual at my place.' },
+  { name: 'Stella', text: "I'm in! Should we do potluck or does someone want to cook the whole thing?" },
+  { name: 'Marcus', text: 'Potluck sounds good. I can handle appetizers and drinks.' },
+  { text: 'Alright! Aleena?' },
+  { name: 'Aleena', text: "Can't make it. I'm out of town. 😭" },
+  { name: 'Aleena', text: "Sorry guys, let's catch up another time. Bye." },
+  { text: '@chat, can you suggest a menu and split up what each of us should bring?' },
+];
+
+const REPLY = `Here's a simple **Saturday potluck** for the three of you:
+
+**Who brings what**
+- **You:** main, salmon or mushroom risotto
+- **Stella:** salad + bread
+- **Marcus:** appetizers + drinks
+- **Chat:** dessert ideas below
+
+**Menu**
+- **Starter:** caprese skewers or whipped ricotta crostini
+- **Main:** lemon-herb salmon with roasted asparagus *(or risotto for vegetarians)*
+- **Side:** arugula salad with shaved parmesan
+- **Dessert:** berry crisp or pistachio gelato
+
+**Timing:** aim for **6:30 PM** so Marcus can set up apps while you finish the main.
+
+Want me to scale this for **6 guests** or swap the main for something vegetarian-only?`;
+
+/** The notices, each shown after message `turn`, `delay` milliseconds after it. */
+const EVENTS: Array<{ type: 'user-joined' | 'user-left' | 'user-typing'; name: string; turn: number; delay: number }> = [
+  { type: 'user-joined', name: 'Stella', turn: 0, delay: 2000 },
+  { type: 'user-typing', name: 'Stella', turn: 0, delay: 4000 },
+  { type: 'user-joined', name: 'Marcus', turn: 1, delay: 2000 },
+  { type: 'user-typing', name: 'Marcus', turn: 1, delay: 4000 },
+  { type: 'user-joined', name: 'Aleena', turn: 2, delay: 0 },
+  { type: 'user-typing', name: 'Aleena', turn: 3, delay: 0 },
+  { type: 'user-left', name: 'Aleena', turn: 5, delay: 2000 },
+];
+
+function eventText(e: (typeof EVENTS)[number]): string {
+  if (e.type === 'user-joined') return `${e.name} joined the chat`;
+  if (e.type === 'user-left') return `${e.name} left the chat`;
+  return `${e.name} is typing...`;
+}
+
+export function groupChat() {
+  const prompts: ChatPrompt[] = MESSAGES.map((m) => ({ text: m.text, sender: m.name ?? 'You' }));
+  const transcript = MESSAGES.map((m, turn) => {
+    const own = m.name === undefined;
+    const message = chatItem({
+      turn, kind: 'user', id: `group-${turn}`, anchor: m.text.trim().toLowerCase().startsWith('@chat,'),
+      content: chatMessage({
+        role: 'user',
+        align: own ? 'end' : 'start',
+        header: own ? '' : html`<div data-slot="message-header" class=${messageHeaderClass()}>${m.name}</div>`,
+        content: partText({ text: m.text, variant: 'bubble', tinted: own }),
+      }),
+    });
+    const events = EVENTS.filter((e) => e.turn === turn).map((e) => chatItem({
+      turn,
+      kind: e.type === 'user-typing' ? 'typing' : 'event',
+      name: e.name,
+      delay: e.delay,
+      content: chatMarker({ text: eventText(e), variant: e.type === 'user-typing' ? 'default' : 'separator', status: e.type === 'user-typing' }),
+    }));
+    const reply = turn === MESSAGES.length - 1
+      ? chatItem({
+        turn, kind: 'reply', id: 'group-reply', delay: 1000,
+        content: chatMessage({
+          role: 'assistant',
+          align: 'start',
+          header: html`<div data-slot="message-header" class=${messageHeaderClass()}>Chat</div>`,
+          content: partText({ text: REPLY, variant: 'default' }),
+        }),
+      })
+      : '';
+    return html`${message}${events}${reply}`;
+  });
+
+  return chatCard({
+    id: 'group-chat-prompt',
+    caption: 'Group Chat',
+    title: 'Saturday dinner plans',
+    description: 'A group chat with multiple users. Includes tinted bubbles for user messages.',
+    descriptionClass: 'leading-relaxed',
+    prompts,
+    transcript,
+    footerClass: 'flex-col items-stretch gap-2',
+    footerTop: html`<p class="px-1 text-xs text-muted-foreground">Posting as <span data-chat-sender>You</span>.</p>`,
+  });
+}

package/packages/registry/blocks/preview-03/cards/reasoning-chat.ts

@@ -0,0 +1,88 @@
+/**
+ * The preview-03 reasoning chat card: an assistant whose replies show their
+ * reasoning steps above the answer, across two scripted turns. A fragment
+ * helper, rendered by the server; `<preview-03-chat>` plays the turns.
+ *
+ * Installed by `npx @webjsdev/ui add preview-03` at
+ * `components/preview-03/reasoning-chat.ts`. Ported from shadcn/ui's
+ * preview-03, whose script it keeps except that an em-dash is written as a
+ * comma.
+ */
+import { html } from '@webjsdev/core';
+import { chatCard, chatItem, chatMessage, type ChatPrompt } from '../components/chat-card.ts';
+import { getReasoningLevelLabel, partReasoning } from '../components/part-reasoning.ts';
+import { partText } from '../components/part-text.ts';
+
+const SCRIPT: Array<{ user: string; reasoning: string[]; text: string }> = [
+  {
+    user: 'Explain why the dashboard feels slow even though the API is fast.',
+    reasoning: [
+      `The user is separating perceived performance from backend latency. They likely measured API response times and found them acceptable, but users still complain about slowness.
+
+I should avoid jumping straight to server-side optimizations and instead frame the answer around what people actually experience.`,
+      `Perceived slowness usually lives in the gap between user action and visible feedback:
+
+- input latency before the request fires
+- loading state placement and timing
+- layout shifts when data arrives
+- whether optimistic UI gives immediate acknowledgment
+
+For a dashboard, I should also consider chart re-renders, independent card fetches, and skeleton dimensions that do not match the final layout.`,
+      `Ranking likely bottlenecks for this scenario:
+
+1. No immediate feedback on filter or refresh actions
+2. Skeleton cards that collapse or expand when data lands
+3. Waterfall requests where each widget fetches on its own
+4. Empty-state flashes because stale data is not shown while revalidating
+
+The answer should stay practical and ordered by impact, not by how technical each fix sounds.`,
+    ],
+    text: `The API can be fast while the interface still **feels** slow.
+
+Start by checking:
+
+- whether the button gives immediate feedback
+- whether skeletons match the final layout
+- whether any reflow happens after data arrives
+- whether the loading state appears near the content it replaces`,
+  },
+  {
+    user: 'What should I fix first?',
+    reasoning: [
+      `The user wants prioritization, not another diagnostic list.
+
+Given the dashboard context, immediate feedback and layout stability usually beat micro-optimizations. I should recommend one fix with a clear way to measure success.`,
+    ],
+    text: `Fix **immediate feedback** first.
+
+When someone clicks "Refresh", the button should disable and show a spinner within one frame, before the network round trip. That single change often cuts perceived latency in half.
+
+Measure it with a screen recording and count frames between click and visual response.`,
+  },
+];
+
+export function reasoningChat() {
+  const prompts: ChatPrompt[] = SCRIPT.map((t) => ({ text: t.user }));
+  return chatCard({
+    id: 'reasoning-chat-prompt',
+    caption: 'Reasoning',
+    title: 'Reasoning trace',
+    description: 'Layered reasoning traces across multiple assistant turns.',
+    prompts,
+    transcript: SCRIPT.map((t, turn) => html`
+      ${chatItem({
+        turn, kind: 'user', id: `reasoning-${turn}-user`, anchor: true,
+        content: chatMessage({ role: 'user', align: 'end', contentClass: 'flex-col items-end gap-2', content: partText({ text: t.user, variant: 'bubble' }) }),
+      })}
+      ${chatItem({
+        turn, kind: 'reply', id: `reasoning-${turn}-assistant`, delay: 1000,
+        content: chatMessage({
+          role: 'assistant',
+          align: 'start',
+          contentClass: 'flex-col items-start gap-2',
+          content: html`${t.reasoning.map((r, i) => partReasoning({ text: r, label: getReasoningLevelLabel(i) }))}${partText({ text: t.text, variant: 'default' })}`,
+        }),
+      })}
+    `),
+  });
+}

package/packages/registry/blocks/preview-03/cards/simple-chat.ts

@@ -0,0 +1,53 @@
+/**
+ * The preview-03 simple chat card: a one-to-one conversation with an
+ * assistant, four scripted turns. A fragment helper, rendered by the server;
+ * `<preview-03-chat>` plays the turns.
+ *
+ * Installed by `npx @webjsdev/ui add preview-03` at
+ * `components/preview-03/simple-chat.ts`. Ported from shadcn/ui's
+ * preview-03, whose script it keeps word for word except that an em-dash in
+ * it is written as a comma.
+ */
+import { html } from '@webjsdev/core';
+import { chatCard, chatItem, chatMessage, type ChatPrompt } from '../components/chat-card.ts';
+import { partText } from '../components/part-text.ts';
+
+const SCRIPT: Array<{ user: string; assistant: string }> = [
+  {
+    user: "Write me a haiku about centering a div and how it's done.",
+    assistant: 'One box in the void / Twenty wrappers, still offset / `margin: 0 auto`',
+  },
+  {
+    user: "Is this conversation actually happening? I've been sitting here wondering if you're **really** reading this.\n\nEvery reply feels a little too convenient, like someone already wrote `chat.next(messages)` and I'm just clicking send on my own lines.",
+    assistant: "You're in a preview block. I'm four hardcoded replies and a transport. Real enough for the demo, philosophically, we're both props.",
+  },
+  {
+    user: 'Okay, how do I make my loading spinner feel faster? Tell me in detail about the technique.',
+    assistant: 'Add text that says “Almost there…” and never update it. Users assume progress. Ethically dubious. Statistically effective.',
+  },
+  {
+    user: 'Can you at least pretend to be surprised?',
+    assistant: '😮 WOW! I had no idea you would ask that!',
+  },
+];
+
+export function simpleChat() {
+  const prompts: ChatPrompt[] = SCRIPT.map((t) => ({ text: t.user }));
+  return chatCard({
+    id: 'simple-chat-prompt',
+    caption: 'Simple Chat',
+    title: 'What can I help you with today?',
+    description: 'A simple chat example.',
+    prompts,
+    transcript: SCRIPT.map((t, turn) => html`
+      ${chatItem({
+        turn, kind: 'user', id: `simple-${turn}-user`, anchor: true,
+        content: chatMessage({ role: 'user', align: 'end', content: partText({ text: t.user, role: 'user' }) }),
+      })}
+      ${chatItem({
+        turn, kind: 'reply', id: `simple-${turn}-assistant`, delay: 3000,
+        content: chatMessage({ role: 'assistant', align: 'start', content: partText({ text: t.assistant, role: 'assistant' }) }),
+      })}
+    `),
+  });
+}

package/packages/registry/blocks/preview-03/components/chat-card.ts

@@ -0,0 +1,126 @@
+/**
+ * The preview-03 chat card: the frame every chat card shares, shadcn's
+ * Example wrapper (a caption over the card), a card with a title, a
+ * description and a start-over button, the transcript in the kit's
+ * `<ui-message-scroller>`, and the prompt input in the footer, all inside
+ * `<preview-03-chat>`, which plays the scripted turns. Plus the two helpers
+ * a card builds its transcript from. Fragment helpers, rendered by the server.
+ *
+ * Installed by `npx @webjsdev/ui add preview-03` at
+ * `components/preview-03/chat-card.ts`. Ported from shadcn/ui's preview-03,
+ * where each card repeats this frame inline.
+ */
+import { html, nothing } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { buttonClass } from '../../../components/button.ts';
+import {
+  cardActionClass,
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardFooterClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import { markerClass, markerContentClass, markerIconClass } from '../../../components/marker.ts';
+import { messageClass, messageContentClass } from '../../../components/message.ts';
+import { spinner } from '../../../components/spinner.ts';
+import '../../../components/message-scroller.ts';
+import { promptInput } from './prompt-input.ts';
+import './chat-player.ts';
+import { PlusIcon } from '../../../lib/icons.ts';
+
+export interface ChatPrompt {
+  text: string;
+  sender?: string;
+}
+
+/**
+ * One scripted item of a transcript, hidden until `<preview-03-chat>` plays
+ * its turn. `delay` is milliseconds after the turn starts (for a reply, how
+ * long the "Thinking..." marker shows first).
+ */
+export function chatItem(opts: {
+  turn: number;
+  kind: 'user' | 'reply' | 'event' | 'typing';
+  content: unknown;
+  id?: string;
+  delay?: number;
+  name?: string;
+  anchor?: boolean;
+}) {
+  return html`<ui-message-scroller-item
+    hidden
+    message-id=${opts.id ?? nothing}
+    ?scroll-anchor=${!!opts.anchor}
+    data-chat-turn=${opts.turn}
+    data-chat-kind=${opts.kind}
+    data-chat-delay=${opts.delay ?? nothing}
+    data-chat-name=${opts.name ?? nothing}
+  >${opts.content}</ui-message-scroller-item>`;
+}
+
+/** A message, shadcn's Message and MessageContent. */
+export function chatMessage(opts: { role: 'user' | 'assistant'; align: 'start' | 'end'; header?: unknown; contentClass?: string; content: unknown }) {
+  return html`<div data-slot="message" data-align=${opts.align} data-role=${opts.role} class=${messageClass()}>
+    ${opts.header ?? ''}
+    <div data-slot="message-content" class=${cn(messageContentClass(), opts.contentClass)}>${opts.content}</div>
+  </div>`;
+}
+
+/** A marker in the transcript, a join or leave notice or a typing line. */
+export function chatMarker(opts: { text: string; variant?: 'default' | 'separator'; status?: boolean; icon?: unknown }) {
+  const variant = opts.variant ?? 'default';
+  return html`<div data-slot="marker" data-variant=${variant} role=${opts.status ? 'status' : nothing} class=${markerClass({ variant })}>
+    ${opts.icon ? html`<span data-slot="marker-icon" class=${markerIconClass()}>${opts.icon}</span>` : ''}
+    <span data-slot="marker-content" class=${markerContentClass()}>${opts.text}</span>
+  </div>`;
+}
+
+export function chatCard(opts: {
+  /** Unique on the page: the textarea's id and the menu button's derive from it. */
+  id: string;
+  caption: string;
+  title: string;
+  description: string;
+  descriptionClass?: string;
+  prompts: ChatPrompt[];
+  transcript: unknown;
+  /** Shown above the prompt input (the group chat's "Posting as" line). */
+  footerTop?: unknown;
+  footerClass?: string;
+}) {
+  return html`<preview-03-chat data-prompts=${JSON.stringify(opts.prompts)} class="flex min-h-0 flex-1 flex-col">
+    <div data-slot="example" class="mx-auto flex w-full max-w-lg min-w-0 flex-1 flex-col gap-1 self-stretch lg:max-w-none">
+      <div class="px-1.5 py-2 text-xs font-medium text-muted-foreground">${opts.caption}</div>
+      <div data-slot="example-content" class="flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-transparent p-0 text-foreground style-lyra:rounded-none style-sera:rounded-none *:[div:not([class*='w-'])]:w-full">
+        <div data-slot="card" data-size="default" class=${cn(cardClass(), 'max-h-140 min-h-0 flex-1')}>
+          <div data-slot="card-header" class=${cardHeaderClass()}>
+            <div data-slot="card-title" class=${cardTitleClass()}>${opts.title}</div>
+            <div data-slot="card-description" class=${cn(cardDescriptionClass(), opts.descriptionClass)}>${opts.description}</div>
+            <div data-slot="card-action" class=${cardActionClass()}>
+              <button type="button" data-chat-reset data-slot="button" data-variant="outline" data-size="icon" aria-label="Start over" class=${buttonClass({ variant: 'outline', size: 'icon' })}>${PlusIcon()}</button>
+            </div>
+          </div>
+          <div data-slot="card-content" class=${cn(cardContentClass(), 'flex-1 overflow-hidden p-0')}>
+            <ui-message-scroller>
+              <ui-message-scroller-viewport>
+                <ui-message-scroller-content aria-label=${`${opts.title} conversation`} class="p-[var(--card-spacing,1.5rem)]">
+                  ${opts.transcript}
+                  <ui-message-scroller-item hidden data-chat-thinking>
+                    ${chatMarker({ text: 'Thinking...', status: true, icon: spinner({ decorative: true }) })}
+                  </ui-message-scroller-item>
+                </ui-message-scroller-content>
+              </ui-message-scroller-viewport>
+              <ui-message-scroller-button></ui-message-scroller-button>
+            </ui-message-scroller>
+          </div>
+          <div data-slot="card-footer" class=${cn(cardFooterClass(), opts.footerClass)}>
+            ${opts.footerTop ?? ''}
+            ${promptInput({ id: opts.id, value: opts.prompts[0]?.text })}
+          </div>
+        </div>
+      </div>
+    </div>
+  </preview-03-chat>`;
+}

package/packages/registry/blocks/preview-03/components/chat-player.ts

@@ -0,0 +1,174 @@
+/**
+ * `<preview-03-chat>` plays a scripted conversation in a preview-03 card,
+ * the part shadcn's demo gets from the AI SDK's useChat and a scripted
+ * transport.
+ *
+ * The server renders the whole script up front, every message and event
+ * `hidden` and tagged with its turn: `data-chat-turn="<n>"` and
+ * `data-chat-kind` (`user`, `reply`, `event` or `typing`), plus
+ * `data-chat-delay` (milliseconds after the turn starts) and, on a typing
+ * notice, `data-chat-name`. The card opens empty with the first prompt in the
+ * box, as shadcn's does. Send shows that turn's messages: a user message at
+ * once, then each event after its delay, then, for a turn with a reply, the
+ * "Thinking..." marker (`data-chat-thinking`) for the reply's delay before
+ * the reply itself. The box then holds the next prompt. The start-over button
+ * (`data-chat-reset`) hides everything again. The prompts, and who posts each
+ * one, are the host's `data-prompts` JSON.
+ *
+ * With JavaScript off the card shows its first state, an empty conversation
+ * and the queued prompt. Replace this element with your own once the card is
+ * wired to a real chat endpoint.
+ *
+ * Installed by `npx @webjsdev/ui add preview-03` at
+ * `components/preview-03/chat-player.ts`. Written for the WebJs port of
+ * shadcn/ui's preview-03.
+ */
+import { WebComponent, html } from '@webjsdev/core';
+
+interface Prompt {
+  text: string;
+  /** Who posts it, shown as "Posting as ..." in a group chat. */
+  sender?: string;
+}
+
+type Scroller = HTMLElement & { scrollToEnd?: () => void };
+
+const wait = (ms: number) => new Promise<void>((r) => setTimeout(r, ms));
+
+export class Preview03Chat extends WebComponent {
+  _turn = 0;
+  _run = 0;
+  _busy = false;
+  _step = 0;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('submit', this._onSubmit);
+    this.addEventListener('input', this._onInput);
+    this.addEventListener('click', this._onClick);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('submit', this._onSubmit);
+    this.removeEventListener('input', this._onInput);
+    this.removeEventListener('click', this._onClick);
+    this._run++;
+    super.disconnectedCallback();
+  }
+
+  _prompts(): Prompt[] {
+    try {
+      const parsed: unknown = JSON.parse(this.getAttribute('data-prompts') ?? '[]');
+      return Array.isArray(parsed) ? (parsed as Prompt[]) : [];
+    } catch {
+      return [];
+    }
+  }
+
+  _items(turn: number, kind?: string): HTMLElement[] {
+    const kinds = kind ? `[data-chat-kind="${kind}"]` : '';
+    return Array.from(this.querySelectorAll<HTMLElement>(`[data-chat-turn="${turn}"]${kinds}`));
+  }
+
+  _show(el: Element | null, shown: boolean): void {
+    if (!el) return;
+    if (shown) el.removeAttribute('hidden');
+    else el.setAttribute('hidden', '');
+  }
+
+  _scrollToEnd(): void {
+    const scroller = this.querySelector<Scroller>('ui-message-scroller');
+    requestAnimationFrame(() => scroller?.scrollToEnd?.());
+  }
+
+  /** The box, the send button and the sender line, for the turn now queued. */
+  _queue(): void {
+    const prompt = this._prompts()[this._turn];
+    const input = this.querySelector<HTMLTextAreaElement>('[data-chat-input]');
+    if (input) input.value = this._busy ? '' : (prompt?.text ?? '');
+    const sender = this.querySelector('[data-chat-sender]');
+    if (sender) sender.textContent = prompt?.sender ?? 'You';
+    this._sync();
+  }
+
+  _sync(): void {
+    const input = this.querySelector<HTMLTextAreaElement>('[data-chat-input]');
+    const send = this.querySelector<HTMLButtonElement>('[data-chat-send]');
+    if (send) send.disabled = this._busy || !input?.value.trim();
+  }
+
+  async _play(): Promise<void> {
+    const turn = this._turn;
+    const prompt = this._prompts()[turn];
+    if (!prompt || this._busy) return;
+    const run = this._run;
+    // A turn's notices still pending stop once the next turn is sent, as in
+    // shadcn's (a typing notice must not land after that person has posted).
+    const step = ++this._step;
+    // A sender's own typing notice goes once their message lands.
+    if (prompt.sender) {
+      for (const el of this.querySelectorAll(`[data-chat-kind="typing"][data-chat-name="${prompt.sender}"]`)) this._show(el, false);
+    }
+    for (const el of this._items(turn, 'user')) this._show(el, true);
+    this._turn++;
+    this._busy = true;
+    this._queue();
+    this._scrollToEnd();
+
+    let elapsed = 0;
+    const later = [...this._items(turn, 'event'), ...this._items(turn, 'typing')]
+      .sort((a, b) => Number(a.dataset.chatDelay ?? 0) - Number(b.dataset.chatDelay ?? 0));
+    const replies = this._items(turn, 'reply');
+    // The events run on their own clock, so a reply is not held up by them.
+    const events = (async () => {
+      for (const el of later) {
+        const delay = Number(el.dataset.chatDelay ?? 0);
+        await wait(Math.max(0, delay - elapsed));
+        elapsed = delay;
+        if (run !== this._run || step !== this._step) return;
+        this._show(el, true);
+        this._scrollToEnd();
+      }
+    })();
+
+    if (replies.length) {
+      const thinking = this.querySelector('[data-chat-thinking]');
+      this._show(thinking, true);
+      this._scrollToEnd();
+      await wait(Number(replies[0].dataset.chatDelay ?? 1000));
+      if (run !== this._run) return;
+      this._show(thinking, false);
+      for (const el of replies) this._show(el, true);
+      this._scrollToEnd();
+    }
+    this._busy = false;
+    this._queue();
+    await events;
+  }
+
+  _reset(): void {
+    this._run++;
+    this._turn = 0;
+    this._busy = false;
+    for (const el of this.querySelectorAll('[data-chat-turn], [data-chat-thinking]')) this._show(el, false);
+    this._queue();
+  }
+
+  _onSubmit = (e: Event): void => {
+    e.preventDefault();
+    void this._play();
+  };
+
+  _onInput = (e: Event): void => {
+    if ((e.target as Element).matches?.('[data-chat-input]')) this._sync();
+  };
+
+  _onClick = (e: Event): void => {
+    if ((e.target as Element).closest?.('[data-chat-reset]')) this._reset();
+  };
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+Preview03Chat.register('preview-03-chat');

package/packages/registry/blocks/preview-03/components/part-file.ts

@@ -0,0 +1,77 @@
+/**
+ * The preview-03 file part: a file attached to a chat message, as the kit's
+ * attachment. An image shows its preview above its name and type; any other
+ * file shows an icon, its name and its media type. The whole attachment links
+ * to the file. A fragment helper, rendered by the server.
+ *
+ * Installed by `npx @webjsdev/ui add preview-03` at
+ * `components/preview-03/part-file.ts`. Ported from shadcn/ui's preview-03.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import {
+  attachmentActionClass,
+  attachmentActionsClass,
+  attachmentClass,
+  attachmentContentClass,
+  attachmentDescriptionClass,
+  attachmentMediaClass,
+  attachmentTitleClass,
+  attachmentTriggerClass,
+} from '../../../components/attachment.ts';
+import { badgeClass } from '../../../components/badge.ts';
+import { buttonClass } from '../../../components/button.ts';
+import { ExternalLinkIcon, FileTextIcon, ImageIcon } from '../../../lib/icons.ts';
+
+export interface FilePart {
+  url: string;
+  mediaType: string;
+  filename?: string;
+}
+
+/** The file's name, else the last segment of its url, else a generic one. */
+function filenameOf(part: FilePart): string {
+  if (part.filename) return part.filename;
+  try {
+    const last = new URL(part.url).pathname.split('/').filter(Boolean).pop();
+    if (last?.includes('.')) return decodeURIComponent(last);
+  } catch {
+    const last = part.url.split('?')[0]?.split('/').pop();
+    if (last?.includes('.')) return last;
+  }
+  return part.mediaType.startsWith('image/') ? 'Image file' : 'File';
+}
+
+export function partFile(opts: { part: FilePart; class?: string }) {
+  const { part } = opts;
+  const filename = filenameOf(part);
+  const trigger = html`<a data-slot="attachment-trigger" class=${attachmentTriggerClass()} href=${part.url} target="_blank" rel="noreferrer" aria-label=${`Open ${filename}`}></a>`;
+
+  if (part.mediaType.startsWith('image/')) {
+    return html`<div data-slot="attachment" data-size="default" data-orientation="vertical" class=${cn(attachmentClass({ orientation: 'vertical' }), 'group/file w-full max-w-72', opts.class)}>
+      <div data-slot="attachment-media" data-variant="image" class=${cn(attachmentMediaClass({ variant: 'image' }), 'aspect-[4/3] w-full')}>
+        <img src=${part.url} alt=${filename}>
+      </div>
+      <div data-slot="attachment-content" class=${cn(attachmentContentClass(), 'flex items-center gap-2')}>
+        <div data-slot="attachment-media" data-variant="icon" class=${cn(attachmentMediaClass(), 'size-7')}>${ImageIcon()}</div>
+        <span class="min-w-0 flex-1">
+          <span data-slot="attachment-title" class=${attachmentTitleClass()}>${filename}</span>
+        </span>
+        <span data-slot="badge" data-variant="outline" class=${cn(badgeClass({ variant: 'outline' }), 'shrink-0')}>${part.mediaType.replace('image/', '').toUpperCase()}</span>
+      </div>
+      ${trigger}
+    </div>`;
+  }
+
+  return html`<div data-slot="attachment" data-size="default" data-orientation="horizontal" class=${cn(attachmentClass(), 'w-full max-w-80', opts.class)}>
+    <div data-slot="attachment-media" data-variant="icon" class=${attachmentMediaClass()}>${FileTextIcon()}</div>
+    <div data-slot="attachment-content" class=${attachmentContentClass()}>
+      <span data-slot="attachment-title" class=${attachmentTitleClass()}>${filename}</span>
+      <span data-slot="attachment-description" class=${attachmentDescriptionClass()}>${part.mediaType}</span>
+    </div>
+    <div data-slot="attachment-actions" class=${attachmentActionsClass()}>
+      <span data-slot="attachment-action" data-variant="ghost" data-size="icon-xs" aria-hidden="true" class=${cn(buttonClass({ variant: 'ghost', size: 'icon-xs' }), attachmentActionClass())}>${ExternalLinkIcon()}</span>
+    </div>
+    ${trigger}
+  </div>`;
+}

package/packages/registry/blocks/preview-03/components/part-reasoning.ts

@@ -0,0 +1,25 @@
+/**
+ * The preview-03 reasoning part: one reasoning step of an assistant turn, its
+ * text under the kit's shimmer. A fragment helper, rendered by the server.
+ *
+ * Installed by `npx @webjsdev/ui add preview-03` at
+ * `components/preview-03/part-reasoning.ts`. Ported from shadcn/ui's
+ * preview-03.
+ */
+import { html, nothing } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+
+const REASONING_LEVEL_LABELS = ['Understanding', 'Analyzing', 'Prioritizing', 'Refining'] as const;
+
+/** The name of the nth reasoning step in a turn. */
+export function getReasoningLevelLabel(index: number): string {
+  return REASONING_LEVEL_LABELS[index] ?? `Reasoning ${index + 1}`;
+}
+
+export function partReasoning(opts: { text: string; label?: string; class?: string }) {
+  return html`<div data-slot="part-reasoning" data-label=${opts.label ?? nothing} class=${cn('w-full max-w-full min-w-0', opts.class)}>
+    <div class="w-full shimmer">
+      <span class="whitespace-pre-wrap">${opts.text}</span>
+    </div>
+  </div>`;
+}