@kitn.ai/ui 0.14.1

package/src/components/slash-command.tsx

@@ -0,0 +1,232 @@
+import { createSignal, createEffect, createMemo, Show, For, on, onCleanup } from "solid-js";
+import { cn } from "../utils/cn";
+import { usePromptInput } from "./prompt-input";
+
+// --- Types ---
+
+export interface SlashCommandItem {
+  id: string;
+  label: string;
+  description?: string;
+  category?: string;
+}
+
+export interface SlashCommandProps {
+  commands: SlashCommandItem[];
+  activeIds?: string[]; // currently active command IDs — selecting again removes
+  onSelect: (command: SlashCommandItem) => void;
+  compact?: boolean; // single line: label + description side by side (default: true)
+  class?: string;
+}
+
+// --- Component ---
+
+function SlashCommand(props: SlashCommandProps) {
+  const ctx = usePromptInput();
+  const [open, setOpen] = createSignal(false);
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
+  const [query, setQuery] = createSignal("");
+  const isCompact = props.compact !== false; // default true
+  let listRef: HTMLDivElement | undefined;
+
+  // Detect slash at the start of input
+  const slashMatch = createMemo(() => {
+    const val = ctx.value();
+    const match = val.match(/^\/(\S*)$/);
+    return match ? match[1] : null;
+  });
+
+  // Filter and sort commands alphabetically
+  const filtered = createMemo(() => {
+    const q = slashMatch();
+    if (q === null) return [];
+    const items = q === ""
+      ? [...props.commands]
+      : props.commands.filter(
+          (cmd) =>
+            cmd.label.toLowerCase().includes(q.toLowerCase()) ||
+            (cmd.description?.toLowerCase().includes(q.toLowerCase()) ?? false),
+        );
+    return items.sort((a, b) => a.label.localeCompare(b.label));
+  });
+
+  // Group by category
+  const grouped = createMemo(() => {
+    const items = filtered();
+    const groups = new Map<string, SlashCommandItem[]>();
+    for (const item of items) {
+      const cat = item.category ?? "";
+      if (!groups.has(cat)) groups.set(cat, []);
+      groups.get(cat)!.push(item);
+    }
+    return groups;
+  });
+
+  // Flat list for keyboard navigation
+  const flatList = createMemo(() => {
+    const items: SlashCommandItem[] = [];
+    for (const group of grouped().values()) {
+      items.push(...group);
+    }
+    return items;
+  });
+
+  // Open/close based on slash detection
+  createEffect(
+    on(slashMatch, (match) => {
+      if (match !== null) {
+        setOpen(true);
+        setQuery(match);
+        setSelectedIndex(0);
+      } else {
+        setOpen(false);
+      }
+    }),
+  );
+
+  // Keep selected index in bounds
+  createEffect(() => {
+    const max = flatList().length;
+    if (selectedIndex() >= max) setSelectedIndex(Math.max(0, max - 1));
+  });
+
+  // Scroll selected item into view
+  createEffect(() => {
+    const idx = selectedIndex();
+    if (!listRef) return;
+    const el = listRef.querySelector(`[data-index="${idx}"]`) as HTMLElement;
+    el?.scrollIntoView({ block: "nearest" });
+  });
+
+  function selectItem(item: SlashCommandItem) {
+    // Insert the chosen command into the prompt (e.g. "/summarize ") so it
+    // appears in the input ready to send or edit. The trailing space ends the
+    // slash token, which closes the palette. Still fire onSelect so consumers
+    // can react to the selection.
+    ctx.setValue(item.label + " ");
+    setOpen(false);
+    props.onSelect(item);
+    // Refocus the textarea and place the caret at the end.
+    setTimeout(() => {
+      const ta = ctx.textareaRef;
+      if (!ta) return;
+      ta.focus();
+      ta.setSelectionRange(ta.value.length, ta.value.length);
+    }, 0);
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (!open()) return;
+
+    const list = flatList();
+    if (list.length === 0) return;
+
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setSelectedIndex((i) => (i + 1) % list.length);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setSelectedIndex((i) => (i - 1 + list.length) % list.length);
+        break;
+      case "Tab":
+      case "Enter":
+        e.preventDefault();
+        e.stopPropagation();
+        selectItem(list[selectedIndex()]);
+        break;
+      case "Escape":
+        e.preventDefault();
+        ctx.setValue("");
+        setOpen(false);
+        break;
+    }
+  }
+
+  // Attach keyboard listener to textarea
+  createEffect(() => {
+    const textarea = ctx.textareaRef;
+    if (!textarea) return;
+
+    textarea.addEventListener("keydown", handleKeyDown, true);
+    onCleanup(() => textarea.removeEventListener("keydown", handleKeyDown, true));
+  });
+
+  let flatIndex = 0;
+
+  return (
+    <Show when={open() && flatList().length > 0}>
+      <div
+        class={cn(
+          "absolute bottom-full left-0 right-0 mb-1 z-50 bg-card rounded-lg shadow-lg overflow-hidden",
+          props.class,
+        )}
+      >
+        <div ref={listRef} class="max-h-56 overflow-y-auto py-1">
+          {(() => {
+            flatIndex = 0;
+            return null;
+          })()}
+          <For each={[...grouped().entries()]}>
+            {([category, items]) => (
+              <>
+                <Show when={category}>
+                  <div class="px-3 pt-2 pb-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wide">
+                    {category}
+                  </div>
+                </Show>
+                <For each={items}>
+                  {(item) => {
+                    const idx = flatIndex++;
+                    const isActive = () => props.activeIds?.includes(item.id) ?? false;
+                    return (
+                      <button
+                        data-index={idx}
+                        class={cn(
+                          "w-full flex items-center gap-2 px-3 text-left transition-colors",
+                          isCompact ? "py-1" : "py-1.5",
+                          selectedIndex() === idx
+                            ? "bg-muted text-foreground"
+                            : "text-foreground hover:bg-muted",
+                        )}
+                        onMouseEnter={() => setSelectedIndex(idx)}
+                        onClick={() => selectItem(item)}
+                      >
+                        <Show when={isCompact} fallback={
+                          <div class="flex-1 min-w-0">
+                            <div class="text-xs flex items-center gap-1.5">
+                              {item.label}
+                              <Show when={isActive()}>
+                                <span class="text-[10px] text-violet-600 dark:text-violet-400">active</span>
+                              </Show>
+                            </div>
+                            <Show when={item.description}>
+                              <div class="text-xs text-muted-foreground truncate">
+                                {item.description}
+                              </div>
+                            </Show>
+                          </div>
+                        }>
+                          <Show when={isActive()}>
+                            <span class="w-1 h-1 rounded-full bg-violet-400 flex-shrink-0" />
+                          </Show>
+                          <span class={cn("text-xs flex-shrink-0", isActive() && "text-violet-600 dark:text-violet-400")}>{item.label}</span>
+                          <Show when={item.description}>
+                            <span class="text-xs text-muted-foreground truncate">{item.description}</span>
+                          </Show>
+                        </Show>
+                      </button>
+                    );
+                  }}
+                </For>
+              </>
+            )}
+          </For>
+        </div>
+      </div>
+    </Show>
+  );
+}
+
+export { SlashCommand };

package/src/components/source-list.test.tsx

@@ -0,0 +1,152 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import '@testing-library/jest-dom/vitest';
+import { render, cleanup } from '@solidjs/testing-library';
+import { For } from 'solid-js';
+import { Source, SourceTrigger, SourceContent, SourceList } from './source';
+import { parseKaiSourceElement } from '../elements/source';
+
+afterEach(cleanup);
+
+// ---------------------------------------------------------------------------
+// parseKaiSourceElement — unit-tests for the attribute→SourceItem mapping
+// ---------------------------------------------------------------------------
+
+describe('parseKaiSourceElement', () => {
+  function makeEl(attrs: Record<string, string | null>): Element {
+    const el = document.createElement('kai-source');
+    for (const [k, v] of Object.entries(attrs)) {
+      if (v !== null) el.setAttribute(k, v);
+    }
+    return el;
+  }
+
+  it('maps href, label, headline→title, description', () => {
+    const el = makeEl({
+      href: 'https://kitn.dev',
+      label: 'kitn',
+      headline: 'kitn — the kit',
+      description: 'Composable SolidJS chat UI.',
+    });
+    expect(parseKaiSourceElement(el)).toEqual({
+      href: 'https://kitn.dev',
+      label: 'kitn',
+      title: 'kitn — the kit',
+      description: 'Composable SolidJS chat UI.',
+      showFavicon: false,
+    });
+  });
+
+  it('sets showFavicon=true for a bare show-favicon attribute', () => {
+    const el = makeEl({ href: 'https://kitn.dev', 'show-favicon': '' });
+    expect(parseKaiSourceElement(el).showFavicon).toBe(true);
+  });
+
+  it('sets showFavicon=false when show-favicon="false"', () => {
+    const el = makeEl({ href: 'https://kitn.dev', 'show-favicon': 'false' });
+    expect(parseKaiSourceElement(el).showFavicon).toBe(false);
+  });
+
+  it('returns undefined for optional attrs when absent', () => {
+    const el = makeEl({ href: 'https://kitn.dev' });
+    const item = parseKaiSourceElement(el);
+    expect(item.label).toBeUndefined();
+    expect(item.title).toBeUndefined();
+    expect(item.description).toBeUndefined();
+  });
+
+  it('falls back to empty string for missing href', () => {
+    const el = makeEl({});
+    expect(parseKaiSourceElement(el).href).toBe('');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// SourceList component — verify citations render as anchor links
+// ---------------------------------------------------------------------------
+
+describe('SourceList with Source children', () => {
+  it('renders citation links for each source', () => {
+    const sources = [
+      { href: 'https://kitn.dev', title: 'kitn', description: 'Composable chat UI.' },
+      { href: 'https://solidjs.com', title: 'SolidJS', description: 'A reactive UI library.' },
+    ];
+
+    const { container } = render(() => (
+      <SourceList>
+        {sources.map((s) => (
+          <Source href={s.href}>
+            <SourceTrigger />
+            <SourceContent title={s.title} description={s.description} />
+          </Source>
+        ))}
+      </SourceList>
+    ));
+
+    const links = container.querySelectorAll('a[href]');
+    // SourceTrigger and SourceContent each render an <a>; 2 sources × 2 = 4
+    expect(links.length).toBeGreaterThanOrEqual(2);
+    const hrefs = [...links].map((a) => a.getAttribute('href'));
+    expect(hrefs).toContain('https://kitn.dev');
+    expect(hrefs).toContain('https://solidjs.com');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// numbered prop — kai-sources web component behavior reproduced at Solid level
+// ---------------------------------------------------------------------------
+
+describe('numbered citations', () => {
+  /** Helper: render N sources with explicit numeric labels (mirroring numbered mode). */
+  function renderNumbered(sources: { href: string; label?: string | number }[]) {
+    return render(() => (
+      <SourceList>
+        <For each={sources}>
+          {(s, i) => (
+            <Source href={s.href}>
+              {/* When numbered is active the element replaces label with i()+1. */}
+              <SourceTrigger label={i() + 1} />
+              <SourceContent title="" description="" />
+            </Source>
+          )}
+        </For>
+      </SourceList>
+    ));
+  }
+
+  it('labels N sources 1..N in order', () => {
+    const sources = [
+      { href: 'https://kitn.dev' },
+      { href: 'https://solidjs.com' },
+      { href: 'https://vitejs.dev' },
+    ];
+
+    const { container } = renderNumbered(sources);
+
+    // SourceTrigger renders a <span> with the label inside the trigger <a>.
+    // Grab all trigger anchors — they have target="_blank".
+    const triggerLinks = [...container.querySelectorAll('a[target="_blank"]')];
+    // One trigger per source (SourceContent also renders an <a target="_blank">,
+    // so we narrow to ones whose text content is a number 1–N).
+    const labels = triggerLinks
+      .map((a) => a.querySelector('span')?.textContent?.trim())
+      .filter(Boolean);
+
+    expect(labels).toEqual(['1', '2', '3']);
+  });
+
+  it('label sequence resets from 1 for each independent list', () => {
+    const firstSources = [{ href: 'https://kitn.dev' }, { href: 'https://solidjs.com' }];
+    const secondSources = [{ href: 'https://vitejs.dev' }, { href: 'https://vitest.dev' }];
+
+    const { container: c1 } = renderNumbered(firstSources);
+    const { container: c2 } = renderNumbered(secondSources);
+
+    const getLabels = (c: HTMLElement) =>
+      [...c.querySelectorAll('a[target="_blank"]')]
+        .map((a) => a.querySelector('span')?.textContent?.trim())
+        .filter(Boolean);
+
+    expect(getLabels(c1)).toEqual(['1', '2']);
+    expect(getLabels(c2)).toEqual(['1', '2']);
+  });
+});

package/src/components/source.stories.tsx

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { Source, SourceTrigger, SourceContent, SourceList } from './source';
+import { componentDescription } from '../stories/docs/element-controls';
+
+const meta = {
+  title: 'Solid (Advanced)/Elements/Source',
+  component: Source,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: componentDescription([
+        'An inline citation chip with a hover-card preview. Compose `Source` (root, holds the `href`) with `SourceTrigger` (the clickable pill) and `SourceContent` (the hover preview). `SourceList` lays out several side by side.',
+        '**When to use:** to cite a referenced web source inline in an assistant message — show a compact domain/number pill that previews the title and description on hover.',
+        '**How to use:** wrap `SourceTrigger` and `SourceContent` in `Source` with the target `href`. Use `label` for custom text or a citation number, `showFavicon` for the site icon, and pass `title`/`description` to `SourceContent`.',
+        '**Placement:** within message body text as citations, or grouped under a message in a `SourceList`.',
+      ]),
+      controls: { exclude: ['use:eventListener'] },
+    },
+  },
+  argTypes: {
+    href: {
+      control: 'text',
+      description: 'Target URL of the source. The domain is derived from it for the default label.',
+    },
+    children: { control: false, description: 'Trigger and content composition.' },
+  },
+  args: {
+    href: 'https://solidjs.com/docs/basic-reactivity/signals',
+  },
+  render: (args) => (
+    <Source href={args.href}>
+      <SourceTrigger label="solidjs.com" />
+      <SourceContent
+        title="Signals - SolidJS"
+        description="Signals are the most basic reactive primitive. They track a single value that changes over time."
+      />
+    </Source>
+  ),
+} satisfies Meta<typeof Source>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { Source, SourceTrigger, SourceContent, SourceList } from '@kitn.ai/ui';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — set the `href` and hover the chip to preview. */
+export const Playground: Story = {
+  ...src(`<Source href="https://solidjs.com/docs/basic-reactivity/signals">
+  <SourceTrigger label="solidjs.com" />
+  <SourceContent
+    title="Signals - SolidJS"
+    description="The most basic reactive primitive — a single value that changes over time."
+  />
+</Source>`),
+};
+
+/** Trigger shows the site favicon and derives its label from the domain. */
+export const WithFavicon: Story = {
+  render: () => (
+    <Source href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">
+      <SourceTrigger showFavicon />
+      <SourceContent
+        title="JavaScript | MDN"
+        description="JavaScript (JS) is a lightweight interpreted programming language with first-class functions."
+      />
+    </Source>
+  ),
+  ...src(`<Source href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">
+  <SourceTrigger showFavicon />
+  <SourceContent title="JavaScript | MDN" description="A lightweight interpreted language." />
+</Source>`),
+};
+
+/** A numbered citation chip. */
+export const NumberedCitation: Story = {
+  render: () => (
+    <Source href="https://example.com/article">
+      <SourceTrigger label={1} />
+      <SourceContent
+        title="Example Article"
+        description="This is a sample article used as a citation reference."
+      />
+    </Source>
+  ),
+  ...src(`<Source href="https://example.com/article">
+  <SourceTrigger label={1} />
+  <SourceContent title="Example Article" description="A sample citation reference." />
+</Source>`),
+};
+
+/** Several sources laid out together with `SourceList` (showcase). */
+export const SourceListExample: Story = {
+  name: 'Source list',
+  render: () => (
+    <SourceList>
+      <Source href="https://solidjs.com">
+        <SourceTrigger showFavicon />
+        <SourceContent title="SolidJS" description="Simple and performant reactivity for building user interfaces." />
+      </Source>
+      <Source href="https://developer.mozilla.org">
+        <SourceTrigger showFavicon />
+        <SourceContent title="MDN Web Docs" description="Resources for developers, by developers." />
+      </Source>
+      <Source href="https://tailwindcss.com">
+        <SourceTrigger showFavicon />
+        <SourceContent title="Tailwind CSS" description="A utility-first CSS framework." />
+      </Source>
+    </SourceList>
+  ),
+  ...src(`<SourceList>
+  <Source href="https://solidjs.com">
+    <SourceTrigger showFavicon />
+    <SourceContent title="SolidJS" description="Simple and performant reactivity." />
+  </Source>
+  <Source href="https://tailwindcss.com">
+    <SourceTrigger showFavicon />
+    <SourceContent title="Tailwind CSS" description="A utility-first CSS framework." />
+  </Source>
+</SourceList>`),
+};

package/src/components/source.tsx

@@ -0,0 +1,129 @@
+import { type JSX, createContext, useContext, Show, splitProps } from 'solid-js';
+import { cn } from '../utils/cn';
+import { HoverCardRoot, HoverCardTrigger, HoverCardContent } from '../ui/hover-card';
+
+// --- Context ---
+
+interface SourceContextValue {
+  href: string;
+  domain: string;
+}
+
+const SourceContext = createContext<SourceContextValue>();
+
+function useSourceContext() {
+  const ctx = useContext(SourceContext);
+  if (!ctx) throw new Error('Source.* must be used inside <Source>');
+  return ctx;
+}
+
+// --- Source (Root) ---
+
+export interface SourceProps {
+  href: string;
+  children: JSX.Element;
+}
+
+function Source(props: SourceProps) {
+  const domain = () => {
+    try {
+      return new URL(props.href).hostname;
+    } catch {
+      return props.href.split('/').pop() || props.href;
+    }
+  };
+
+  return (
+    <SourceContext.Provider value={{ get href() { return props.href; }, get domain() { return domain(); } }}>
+      <HoverCardRoot openDelay={150}>
+        {props.children}
+      </HoverCardRoot>
+    </SourceContext.Provider>
+  );
+}
+
+// --- SourceTrigger ---
+
+export interface SourceTriggerProps {
+  label?: string | number;
+  showFavicon?: boolean;
+  class?: string;
+}
+
+function SourceTrigger(props: SourceTriggerProps) {
+  const ctx = useSourceContext();
+  const labelToShow = () => props.label ?? ctx.domain.replace('www.', '');
+
+  return (
+    <HoverCardTrigger>
+      <a
+        href={ctx.href}
+        target="_blank"
+        rel="noopener noreferrer"
+        class={cn(
+          'bg-muted text-foreground/80 hover:bg-muted-foreground/30 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background inline-flex h-5 max-w-32 items-center gap-1 overflow-hidden rounded-full py-0 text-xs no-underline transition-colors duration-150',
+          props.showFavicon ? 'pr-2 pl-1' : 'px-2',
+          props.class
+        )}
+      >
+        <Show when={props.showFavicon}>
+          <img
+            src={`https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(ctx.href)}`}
+            alt="favicon"
+            width={14}
+            height={14}
+            class="size-3.5 rounded-full"
+          />
+        </Show>
+        <span class="truncate tabular-nums text-center font-normal">{labelToShow()}</span>
+      </a>
+    </HoverCardTrigger>
+  );
+}
+
+// --- SourceContent ---
+
+export interface SourceContentProps {
+  title: string;
+  description: string;
+  class?: string;
+}
+
+function SourceContent(props: SourceContentProps) {
+  const ctx = useSourceContext();
+  return (
+    <HoverCardContent class={cn('w-80 p-0 shadow-xs', props.class)}>
+      <a
+        href={ctx.href}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex flex-col gap-2 p-3"
+      >
+        <div class="flex items-center gap-1.5">
+          <img
+            src={`https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(ctx.href)}`}
+            alt="favicon"
+            class="size-4 rounded-full"
+            width={16}
+            height={16}
+          />
+          <div class="text-primary truncate text-sm">
+            {ctx.domain.replace('www.', '')}
+          </div>
+        </div>
+        <div class="line-clamp-2 text-sm font-medium">{props.title}</div>
+        <div class="text-muted-foreground line-clamp-2 text-sm">
+          {props.description}
+        </div>
+      </a>
+    </HoverCardContent>
+  );
+}
+
+// --- SourceList (convenience) ---
+
+function SourceList(props: { children: JSX.Element; class?: string }) {
+  return <div class={cn('flex flex-wrap gap-1.5 mt-3', props.class)}>{props.children}</div>;
+}
+
+export { Source, SourceTrigger, SourceContent, SourceList };