@kitnai/chat 0.7.0 → 0.8.1

package/src/components/embed.tsx

@@ -0,0 +1,196 @@
+import {
+  type JSX,
+  splitProps,
+  createSignal,
+  createEffect,
+  createMemo,
+  on,
+  onMount,
+  Show,
+} from 'solid-js';
+import { cn } from '../utils/cn';
+import { Play, Video, ExternalLink, TriangleAlert } from 'lucide-solid';
+import type { CardEvent } from '../primitives/card-contract';
+import {
+  type EmbedCardData,
+  type ResolvedEmbed,
+  resolveEmbed,
+  watchUrl,
+  providerLabel,
+  aspectRatioValue,
+} from '../primitives/embed-providers';
+
+export interface EmbedProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onError'> {
+  /** The card id correlating every emitted event. */
+  cardId: string;
+  /** The embed payload (data-down). */
+  data: EmbedCardData;
+  /** Emit a contract CardEvent up (host routes it). */
+  onEmit?: (event: CardEvent) => void;
+}
+
+/**
+ * `Embed` — a privacy-first lazy media facade. Initial render is a poster + a play
+ * button: NO provider iframe, NO provider JS, NO cookies until the user opts in.
+ * On play it swaps in the provider `<iframe>` (youtube-nocookie / vimeo dnt /
+ * allowlisted generic). A persistent "Open on {provider}" affordance routes the
+ * contract `open` verb so a blocked embed is never a dead end. The only verbs it
+ * emits are lifecycle `ready`, `open`, and failure `error`.
+ */
+export function Embed(props: EmbedProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['cardId', 'data', 'onEmit', 'class']);
+
+  const emit = (event: CardEvent) => local.onEmit?.(event);
+
+  const [playing, setPlaying] = createSignal(false);
+  const [posterBroken, setPosterBroken] = createSignal(false);
+  let playerRegion: HTMLDivElement | undefined;
+
+  // Resolve the provider URL/poster/sandbox; capture a resolution error to render inline.
+  const resolved = createMemo<{ ok: true; value: ResolvedEmbed } | { ok: false; error: string }>(
+    () => {
+      try {
+        return { ok: true, value: resolveEmbed(local.data) };
+      } catch (e) {
+        return { ok: false, error: e instanceof Error ? e.message : String(e) };
+      }
+    },
+  );
+
+  const ratio = createMemo(() => aspectRatioValue(local.data.aspectRatio));
+  const titleText = () => local.data.title ?? 'Embedded video';
+  const poster = createMemo(() =>
+    resolved().ok && !posterBroken() ? (resolved() as { value: ResolvedEmbed }).value.posterUrl : undefined,
+  );
+  const watch = createMemo(() => watchUrl(local.data));
+  const label = () => providerLabel(local.data.provider);
+
+  onMount(() => emit({ kind: 'ready', cardId: local.cardId }));
+
+  // Resolution failure → a single `error` event (defense in depth; the schema allOf
+  // and the origin allowlist should catch most of these earlier).
+  createEffect(
+    on(resolved, (r) => {
+      if (!r.ok) emit({ kind: 'error', cardId: local.cardId, message: r.error });
+    }),
+  );
+
+  // Reset facade state when the payload changes.
+  createEffect(
+    on(
+      () => local.data,
+      () => {
+        setPlaying(false);
+        setPosterBroken(false);
+      },
+      { defer: true },
+    ),
+  );
+
+  const play = () => {
+    if (!resolved().ok) return;
+    setPlaying(true);
+    // Move focus into the player region for SR/keyboard continuity.
+    queueMicrotask(() => playerRegion?.focus());
+  };
+  const onPlayKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      play();
+    }
+  };
+  const openOnProvider = () => {
+    const w = watch();
+    if (w) emit({ kind: 'open', cardId: local.cardId, url: w, target: 'tab' });
+  };
+
+  return (
+    <div
+      class={cn('overflow-hidden rounded-xl border border-border bg-card text-card-foreground', local.class)}
+      {...rest}
+    >
+      <div class="relative w-full bg-black" style={{ 'aspect-ratio': ratio() }}>
+        <Show
+          when={resolved().ok}
+          fallback={
+            <div
+              role="img"
+              aria-label="Can't load this video"
+              class="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-muted p-4 text-center text-sm text-muted-foreground"
+            >
+              <TriangleAlert size={28} aria-hidden="true" />
+              <span>Can't load this video</span>
+            </div>
+          }
+        >
+          <Show
+            when={playing()}
+            fallback={
+              <button
+                type="button"
+                aria-label={`Play ${local.data.title ?? 'video'}`}
+                class="group absolute inset-0 flex h-full w-full items-center justify-center outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+                onClick={() => play()}
+                onKeyDown={onPlayKeyDown}
+              >
+                {/* Poster (or a neutral placeholder when absent/broken). */}
+                <Show
+                  when={poster()}
+                  fallback={
+                    <div
+                      class="absolute inset-0 bg-gradient-to-br from-zinc-800 to-zinc-950"
+                      aria-hidden="true"
+                    />
+                  }
+                >
+                  <img
+                    src={poster()}
+                    alt={local.data.title ?? ''}
+                    class="absolute inset-0 h-full w-full object-cover"
+                    onError={() => setPosterBroken(true)}
+                  />
+                </Show>
+                <span
+                  class="relative flex h-14 w-14 items-center justify-center rounded-full bg-black/60 text-white shadow-lg transition-transform motion-safe:group-hover:scale-110"
+                  aria-hidden="true"
+                >
+                  <Play size={26} fill="currentColor" />
+                </span>
+              </button>
+            }
+          >
+            <div ref={(el) => (playerRegion = el)} tabindex="-1" class="absolute inset-0 outline-none">
+              <iframe
+                src={(resolved() as { value: ResolvedEmbed }).value.embedUrl}
+                title={titleText()}
+                sandbox={(resolved() as { value: ResolvedEmbed }).value.sandbox}
+                allow={(resolved() as { value: ResolvedEmbed }).value.allow}
+                allowfullscreen
+                class="absolute inset-0 h-full w-full border-0"
+              />
+            </div>
+          </Show>
+        </Show>
+      </div>
+      {/* Footer: title + the always-available "Open on {provider}" fallback affordance. */}
+      <div class="flex items-center justify-between gap-2 px-3 py-2">
+        <span class="flex min-w-0 items-center gap-1.5 text-sm text-foreground">
+          <Video size={14} class="shrink-0 opacity-70" aria-hidden="true" />
+          <span class="truncate">{local.data.title ?? label()}</span>
+        </span>
+        <Show when={watch()}>
+          <button
+            type="button"
+            class="inline-flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+            onClick={() => openOnProvider()}
+          >
+            Open on {label()}
+            <ExternalLink size={12} aria-hidden="true" />
+          </button>
+        </Show>
+      </div>
+    </div>
+  );
+}
+
+export type { EmbedCardData } from '../primitives/embed-providers';

package/src/components/empty.stories.tsx

@@ -10,6 +10,7 @@ import { PromptInput, PromptInputTextarea, PromptInputActions } from './prompt-i
 import {
   FolderPlus, MessageCircleQuestion, Inbox, Search, Sparkles, FileText, ArrowUp, Plus, Upload,
 } from 'lucide-solid';
+import { componentDescription } from '../stories/docs/element-controls';
 
 /**
  * Story for the compound `Empty` family. `Empty` is the root container; the
@@ -24,14 +25,12 @@ const meta = {
   parameters: {
     layout: 'padded',
     docs: {
-      description: {
-        component: [
-          'A composable empty-state block (modeled on shadcn/ui `Empty`): a centered media tile, title, description, and a content slot for actions or suggestions. Token-driven styling; no border by default.',
-          '**When to use:** when a region has nothing to show yet — an empty list/inbox, no search results, a blank chat, or a drop zone — and you want to guide the user toward a next action.',
-          '**How to use:** compose `Empty > EmptyHeader (EmptyMedia + EmptyTitle + EmptyDescription)` and an optional `EmptyContent` for buttons or prompt suggestions. Set `EmptyMedia` `variant` to `icon` for a muted tile or `default` for a bare slot (avatar/illustration). Add `border border-dashed` via `class` for a card.',
-          '**Placement:** empty lists/sidebars, search-result panes, blank chat launch states, and file drop zones.',
-        ].join('\n\n'),
-      },
+      description: componentDescription([
+        'A composable empty-state block (modeled on shadcn/ui `Empty`): a centered media tile, title, description, and a content slot for actions or suggestions. Token-driven styling; no border by default.',
+        '**When to use:** when a region has nothing to show yet — an empty list/inbox, no search results, a blank chat, or a drop zone — and you want to guide the user toward a next action.',
+        '**How to use:** compose `Empty > EmptyHeader (EmptyMedia + EmptyTitle + EmptyDescription)` and an optional `EmptyContent` for buttons or prompt suggestions. Set `EmptyMedia` `variant` to `icon` for a muted tile or `default` for a bare slot (avatar/illustration). Add `border border-dashed` via `class` for a card.',
+        '**Placement:** empty lists/sidebars, search-result panes, blank chat launch states, and file drop zones.',
+      ]),
       controls: { exclude: ['use:eventListener'] },
     },
   },
@@ -346,7 +345,7 @@ export const WithInput: Story = {
             <PromptInput value={value()} onValueChange={setValue} onSubmit={() => setValue('')} class="w-full">
               <PromptInputTextarea placeholder="Ask anything..." class="min-h-[44px] px-3 pt-2.5" />
               <PromptInputActions class="justify-end px-2 pb-2">
-                <Button size="icon-sm" class="rounded-full" disabled={!value().trim()}>
+                <Button size="icon-sm" class="rounded-full" aria-label="Send message" disabled={!value().trim()}>
                   <ArrowUp class="size-4" />
                 </Button>
               </PromptInputActions>

package/src/components/feedback-bar.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { fn } from 'storybook/test';
 import { FeedbackBar } from './feedback-bar';
+import { componentDescription } from '../stories/docs/element-controls';
 
 const meta = {
   title: 'Components/FeedbackBar',
@@ -10,14 +11,12 @@ const meta = {
     layout: 'padded',
     docs: {
       controls: { exclude: ['use:eventListener'] },
-      description: {
-        component: [
-          'An inline bar that prompts the user to rate a response, with thumbs-up / thumbs-down actions and a dismiss button.',
-          '**When to use:** after an assistant message, to collect quick helpful / not-helpful feedback on the answer.',
-          '**How to use:** set a `title`, optionally pass an `icon`, and wire `onHelpful`, `onNotHelpful`, and `onClose` to capture the rating or hide the bar.',
-          '**Placement:** directly beneath a completed assistant message, or in a message action row.',
-        ].join('\n\n'),
-      },
+      description: componentDescription([
+        'An inline bar that prompts the user to rate a response, with thumbs-up / thumbs-down actions and a dismiss button.',
+        '**When to use:** after an assistant message, to collect quick helpful / not-helpful feedback on the answer.',
+        '**How to use:** set a `title`, optionally pass an `icon`, and wire `onHelpful`, `onNotHelpful`, and `onClose` to capture the rating or hide the bar.',
+        '**Placement:** directly beneath a completed assistant message, or in a message action row.',
+      ]),
     },
   },
   argTypes: {

package/src/components/file-tree.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { createSignal } from 'solid-js';
+import { FileTree, type FileTreeFile } from './file-tree';
+import { componentDescription } from '../stories/docs/element-controls';
+
+const FILES: FileTreeFile[] = [
+  { path: 'index.html', type: 'html' },
+  { path: 'about.html', type: 'html' },
+  { path: 'css/site.css', type: 'other', language: 'css' },
+  { path: 'src/app.ts', type: 'other', language: 'ts' },
+  { path: 'src/lib/format.ts', type: 'other', language: 'ts' },
+  { path: 'src/lib/parse.ts', type: 'other', language: 'ts' },
+  { path: 'assets/logo.svg', type: 'image' },
+  { path: 'assets/report.pdf', type: 'pdf' },
+];
+
+const meta = {
+  title: 'Components/FileTree',
+  component: FileTree,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: componentDescription([
+        'A collapsible, keyboard-navigable file explorer built from a flat list of `/`-delimited paths — nested folders are derived automatically. ARIA `tree`/`treeitem`.',
+        '**When to use:** any file/folder tree — the Code tab of `Artifact` uses it, and it is exported for standalone reuse (project explorers, attachment browsers, doc outlines).',
+        '**How to use:** pass `files` (`{ path, url?, code?, language?, type? }[]`); folders come from `/` in each path and `type` picks the icon. Control highlight via `activeFile`, initial open folders via `defaultExpanded`, and handle `onSelect(path, file)`. Arrow keys navigate; Enter/Space selects or toggles.',
+        '**Placement:** a sidebar/explorer column.',
+      ]),
+    },
+  },
+  argTypes: {
+    files: { control: false },
+    activeFile: { control: 'text' },
+  },
+  args: { files: FILES, activeFile: 'src/app.ts' },
+  render: (args) => (
+    <div class="w-64 h-80 overflow-auto rounded-lg border border-border scrollbar-thin">
+      <FileTree files={args.files} activeFile={args.activeFile} />
+    </div>
+  ),
+} satisfies Meta<typeof FileTree>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { FileTree } from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+export const Playground: Story = {
+  ...src(`<FileTree files={files} activeFile="src/app.ts" onSelect={(p) => set(p)} />`),
+};
+
+/** Drives selection from `onSelect` — the controlled pattern. */
+export const Interactive: Story = {
+  render: () => {
+    const [active, setActive] = createSignal('src/lib/format.ts');
+    return (
+      <div class="flex flex-col gap-2">
+        <div class="w-64 h-80 overflow-auto rounded-lg border border-border scrollbar-thin">
+          <FileTree files={FILES} activeFile={active()} onSelect={(p) => setActive(p)} />
+        </div>
+        <span class="text-sm text-muted-foreground">
+          Selected: <code>{active()}</code>
+        </span>
+      </div>
+    );
+  },
+  ...src(`const [active, setActive] = createSignal('src/lib/format.ts');
+<FileTree files={files} activeFile={active()} onSelect={setActive} />`),
+};