@kitnai/chat 0.1.0

package/src/components/slash-command.stories.tsx

@@ -0,0 +1,164 @@
+import type { Meta, StoryObj } from "storybook-solidjs-vite";
+import { fn } from "storybook/test";
+import { createSignal } from "solid-js";
+import { SlashCommand, type SlashCommandItem } from "./slash-command";
+import { PromptInput, PromptInputTextarea } from "./prompt-input";
+import { ChatConfig } from "../primitives/chat-config";
+
+const skillCommands: SlashCommandItem[] = [
+  { id: "caveman", label: "Caveman", description: "Ultra-compressed terse responses", category: "Skills" },
+  { id: "detailed", label: "Detailed", description: "Thorough, comprehensive responses", category: "Skills" },
+  { id: "eli5", label: "ELI5", description: "Explain simply, avoid jargon", category: "Skills" },
+  { id: "socratic", label: "Socratic", description: "Ask guiding questions", category: "Skills" },
+  { id: "concise", label: "Concise", description: "Short, direct answers", category: "Skills" },
+];
+
+const mixedCommands: SlashCommandItem[] = [
+  ...skillCommands,
+  { id: "clear", label: "Clear", description: "Clear conversation history", category: "Actions" },
+  { id: "export", label: "Export", description: "Export conversation as markdown", category: "Actions" },
+];
+
+/**
+ * `SlashCommand` reads the input value from the enclosing `PromptInput`
+ * context, so every story mounts it inside a `PromptInput`. The popup opens
+ * when the input starts with `/`.
+ */
+function SlashDemo(props: { commands: SlashCommandItem[]; activeIds?: string[]; compact?: boolean; onSelect: (cmd: SlashCommandItem) => void }) {
+  const [value, setValue] = createSignal("/");
+  return (
+    <ChatConfig proseSize="sm">
+      <div style={{ width: "420px" }} class="bg-card rounded-lg p-4">
+        <div class="relative">
+          <PromptInput value={value()} onValueChange={setValue} onSubmit={() => setValue("")}>
+            <PromptInputTextarea placeholder="Type / for commands..." class="min-h-[36px] pt-2 pl-3" />
+            <SlashCommand
+              commands={props.commands}
+              activeIds={props.activeIds}
+              compact={props.compact}
+              onSelect={(cmd) => {
+                props.onSelect(cmd);
+                setValue("");
+              }}
+            />
+          </PromptInput>
+        </div>
+        <p class="text-xs text-muted-foreground/40 mt-2 text-center">
+          Type <code class="bg-muted px-1 rounded">/</code> to see commands. Arrow keys + Tab/Enter to select.
+        </p>
+      </div>
+    </ChatConfig>
+  );
+}
+
+const meta = {
+  title: "Components/SlashCommand",
+  component: SlashCommand,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: [
+          "A keyboard-navigable command palette that pops above a `PromptInput` when the user types `/`. Filters and groups commands by category, with arrow-key navigation and Tab/Enter to select.",
+          "**When to use:** to offer slash commands or toggleable skills/modes directly from the prompt input as the user types `/name`.",
+          "**How to use:** render it as a child of `PromptInput` (it consumes that context). Pass `commands`, handle `onSelect`, and optionally pass `activeIds` to mark active toggles. Set `compact={false}` for two-line rows.",
+          "**Placement:** inside the relative-positioned `PromptInput`, absolutely anchored to the top of the textarea.",
+        ].join("\n\n"),
+      },
+      controls: { exclude: ["use:eventListener"] },
+    },
+  },
+  argTypes: {
+    commands: {
+      control: "object",
+      description: "List of selectable commands ({ id, label, description?, category? }).",
+    },
+    activeIds: {
+      control: "object",
+      description: "IDs currently marked active — selecting an active command toggles it off.",
+    },
+    compact: {
+      control: "boolean",
+      description: "Single-line rows (label + description side by side). When false, two-line rows.",
+      table: { defaultValue: { summary: "true" } },
+    },
+    onSelect: {
+      action: "select",
+      description: "Fired with the chosen command when an item is selected.",
+      table: { category: "Events" },
+    },
+    class: { control: "text", description: "Additional classes on the popup container." },
+  },
+  args: {
+    commands: skillCommands,
+    compact: true,
+    activeIds: [],
+    onSelect: fn(),
+  },
+  render: (args) => (
+    <SlashDemo commands={args.commands} activeIds={args.activeIds} compact={args.compact} onSelect={args.onSelect} />
+  ),
+} satisfies Meta<typeof SlashCommand>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { SlashCommand, PromptInput, PromptInputTextarea } from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — type `/` in the input; tweak `commands`/`compact`/`activeIds`. */
+export const Playground: Story = {
+  ...src(`<PromptInput value={value()} onValueChange={setValue} onSubmit={() => setValue('')}>
+  <PromptInputTextarea placeholder="Type / for commands..." />
+  <SlashCommand commands={commands} onSelect={(cmd) => { /* apply */ }} />
+</PromptInput>`),
+};
+
+/** Compact single-line rows (default). */
+export const Compact: Story = {
+  args: { compact: true },
+  ...src(`<SlashCommand commands={commands} onSelect={handleSelect} />`),
+};
+
+/** Two-line rows with label above description. */
+export const Expanded: Story = {
+  args: { compact: false },
+  ...src(`<SlashCommand commands={commands} compact={false} onSelect={handleSelect} />`),
+};
+
+/** Commands grouped by category (Skills + Actions). */
+export const WithCategories: Story = {
+  args: { commands: mixedCommands },
+  ...src(`const commands = [
+  { id: 'eli5', label: 'ELI5', description: 'Explain simply', category: 'Skills' },
+  { id: 'clear', label: 'Clear', description: 'Clear conversation', category: 'Actions' },
+];
+
+<SlashCommand commands={commands} onSelect={handleSelect} />`),
+};
+
+/** Toggleable skills — active IDs are marked and toggle off when reselected (showcase). */
+export const ActiveToggles: Story = {
+  render: () => {
+    const [selected, setSelected] = createSignal<string[]>(["eli5"]);
+    return (
+      <SlashDemo
+        commands={skillCommands}
+        activeIds={selected()}
+        onSelect={(cmd) =>
+          setSelected((prev) =>
+            prev.includes(cmd.id) ? prev.filter((id) => id !== cmd.id) : [...prev, cmd.id],
+          )
+        }
+      />
+    );
+  },
+  ...src(`<SlashCommand
+  commands={skillCommands}
+  activeIds={selected()}
+  onSelect={(cmd) => toggle(cmd.id)}
+/>`),
+};

package/src/components/slash-command.tsx

@@ -0,0 +1,223 @@
+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) {
+    ctx.setValue("");
+    setOpen(false);
+    props.onSelect(item);
+    // Refocus textarea
+    setTimeout(() => ctx.textareaRef?.focus(), 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/60 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/50 text-foreground"
+                            : "text-foreground/80 hover:bg-muted/30",
+                        )}
+                        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-400">active</span>
+                              </Show>
+                            </div>
+                            <Show when={item.description}>
+                              <div class="text-xs text-muted-foreground/50 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-400")}>{item.label}</span>
+                          <Show when={item.description}>
+                            <span class="text-xs text-muted-foreground/40 truncate">{item.description}</span>
+                          </Show>
+                        </Show>
+                      </button>
+                    );
+                  }}
+                </For>
+              </>
+            )}
+          </For>
+        </div>
+      </div>
+    </Show>
+  );
+}
+
+export { SlashCommand };

package/src/components/source.stories.tsx

@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { Source, SourceTrigger, SourceContent, SourceList } from './source';
+
+const meta = {
+  title: 'Components/Source',
+  component: Source,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: [
+          '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`.',
+        ].join('\n\n'),
+      },
+      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 '@kitnai/chat';`;
+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} closeDelay={0}>
+        {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-muted-foreground hover:bg-muted-foreground/30 hover:text-primary 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 };