@kitn.ai/ui 0.14.1

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

@@ -0,0 +1,138 @@
+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: 'Solid (Advanced)/Elements/FeedbackBar',
+  component: FeedbackBar,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      controls: { exclude: ['use:eventListener'] },
+      description: componentDescription([
+        'An inline bar that prompts the user to rate a response. It owns its own flow — it asks, optionally collects a category + comment on a not-helpful vote, then confirms with a thank-you, all in place (the way ChatGPT/Claude do it). It does **not** disappear on a vote; only the close (X) button dismisses it.',
+        '**When to use:** after an assistant message, to collect quick helpful / not-helpful feedback (optionally with a reason).',
+        '**How to use:** set a `title`; for the richer flow set `collect-detail` and pass `categories`. The vote fires `onFeedback` immediately; the optional detail fires `onSubmitDetail`; `onClose` dismisses the bar.',
+        '**Placement:** directly beneath a completed assistant message, or in a message action row.',
+      ]),
+    },
+  },
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Prompt text shown next to the rating buttons.',
+    },
+    icon: {
+      control: false,
+      description: 'Optional leading icon element shown before the title.',
+    },
+    collectDetail: {
+      control: 'boolean',
+      description: 'When on, a not-helpful vote opens an optional detail form (category chips + comment) before the thank-you.',
+    },
+    categories: {
+      control: 'object',
+      description: 'Category chips offered in the detail form.',
+    },
+    thanksMessage: {
+      control: 'text',
+      description: 'Confirmation copy shown after a vote/submit.',
+    },
+    class: {
+      control: 'text',
+      description: 'Additional CSS classes for the root element.',
+    },
+    onFeedback: {
+      action: 'feedback',
+      description: 'Fired with `value: "helpful" | "not-helpful"` immediately when a rating button is clicked (the vote is recorded even if the detail form is skipped).',
+      table: { category: 'Events' },
+    },
+    onSubmitDetail: {
+      action: 'submitDetail',
+      description: 'Fired with `{ value, category?, comment? }` when the optional detail form is submitted.',
+      table: { category: 'Events' },
+    },
+    onClose: {
+      action: 'close',
+      description: 'Fired when the close (X) button is clicked.',
+      table: { category: 'Events' },
+    },
+  },
+  args: {
+    title: 'Was this response helpful?',
+    onFeedback: fn(),
+    onSubmitDetail: fn(),
+    onClose: fn(),
+  },
+  render: (args) => <FeedbackBar {...args} />,
+} satisfies Meta<typeof FeedbackBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { FeedbackBar } from '@kitn.ai/ui';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — tweak the controls to explore the feedback bar. */
+export const Playground: Story = {
+  ...src(`<FeedbackBar
+  title="Was this response helpful?"
+  onFeedback={(value) => console.log('feedback:', value)}
+  onClose={() => {}}
+/>`),
+};
+
+export const CustomTitle: Story = {
+  args: { title: 'Rate this answer' },
+  ...src(`<FeedbackBar title="Rate this answer" onFeedback={(value) => console.log('feedback:', value)} />`),
+};
+
+const SmileyIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-muted-foreground">
+    <circle cx="12" cy="12" r="10" />
+    <path d="M8 14s1.5 2 4 2 4-2 4-2" />
+    <line x1="9" y1="9" x2="9.01" y2="9" />
+    <line x1="15" y1="9" x2="15.01" y2="9" />
+  </svg>
+);
+
+export const WithIcon: Story = {
+  args: { title: 'How did I do?', icon: <SmileyIcon /> },
+  ...src(`<FeedbackBar
+  title="How did I do?"
+  icon={<SmileyIcon />}
+  onFeedback={(value) => console.log('feedback:', value)}
+/>`),
+};
+
+/** The full flow: a not-helpful vote opens an optional detail form (category
+ *  chips + comment) before the thank-you. A helpful vote skips straight to thanks.
+ *  Click 👎 to see the detail step. */
+export const WithDetail: Story = {
+  args: {
+    title: 'Was this response helpful?',
+    collectDetail: true,
+    categories: ['Inaccurate', 'Not helpful', 'Unsafe', 'Other'],
+  },
+  ...src(`<FeedbackBar
+  title="Was this response helpful?"
+  collectDetail
+  categories={['Inaccurate', 'Not helpful', 'Unsafe', 'Other']}
+  onFeedback={(value) => console.log('vote:', value)}
+  onSubmitDetail={(d) => console.log('detail:', d)} // { value, category?, comment? }
+/>`),
+};
+
+/** A custom confirmation message shown after the vote. */
+export const CustomThanks: Story = {
+  args: { title: 'Rate this answer', thanksMessage: 'Got it — thanks for helping us improve!' },
+  ...src(`<FeedbackBar
+  title="Rate this answer"
+  thanksMessage="Got it — thanks for helping us improve!"
+  onFeedback={(value) => console.log('feedback:', value)}
+/>`),
+};

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

@@ -0,0 +1,103 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import '@testing-library/jest-dom/vitest';
+import { render, cleanup, fireEvent } from '@solidjs/testing-library';
+import { FeedbackBar } from './feedback-bar';
+
+afterEach(cleanup);
+
+describe('FeedbackBar', () => {
+  it('shows the prompt and rating buttons in the ask phase', () => {
+    const { getByText, getByLabelText } = render(() => <FeedbackBar title="Helpful?" />);
+    expect(getByText('Helpful?')).toBeInTheDocument();
+    expect(getByLabelText('Helpful')).toBeInTheDocument();
+    expect(getByLabelText('Not helpful')).toBeInTheDocument();
+  });
+
+  it('fires onFeedback immediately and confirms in place (no detail by default)', () => {
+    const onFeedback = vi.fn();
+    const { getByLabelText, getByText, queryByLabelText } = render(() => (
+      <FeedbackBar title="Helpful?" onFeedback={onFeedback} />
+    ));
+    fireEvent.click(getByLabelText('Helpful'));
+    expect(onFeedback).toHaveBeenCalledWith('helpful');
+    // Confirms in place — does not disappear; the prompt is replaced by thanks.
+    expect(getByText('Thanks for your feedback')).toBeInTheDocument();
+    expect(queryByLabelText('Helpful')).not.toBeInTheDocument();
+  });
+
+  it('a not-helpful vote goes straight to thanks when collectDetail is off', () => {
+    const { getByLabelText, getByText, queryByText } = render(() => <FeedbackBar title="Helpful?" />);
+    fireEvent.click(getByLabelText('Not helpful'));
+    expect(getByText('Thanks for your feedback')).toBeInTheDocument();
+    expect(queryByText('What went wrong?')).not.toBeInTheDocument();
+  });
+
+  it('opens the detail form on a not-helpful vote when collectDetail is set', () => {
+    const onFeedback = vi.fn();
+    const { getByLabelText, getByText } = render(() => (
+      <FeedbackBar title="Helpful?" collectDetail categories={['Inaccurate', 'Unhelpful']} onFeedback={onFeedback} />
+    ));
+    fireEvent.click(getByLabelText('Not helpful'));
+    // Vote still recorded immediately, AND the detail form appears.
+    expect(onFeedback).toHaveBeenCalledWith('not-helpful');
+    expect(getByText('What went wrong?')).toBeInTheDocument();
+    expect(getByText('Inaccurate')).toBeInTheDocument();
+  });
+
+  it('a helpful vote skips the detail form even when collectDetail is set', () => {
+    const { getByLabelText, getByText, queryByText } = render(() => (
+      <FeedbackBar title="Helpful?" collectDetail categories={['Inaccurate']} />
+    ));
+    fireEvent.click(getByLabelText('Helpful'));
+    expect(getByText('Thanks for your feedback')).toBeInTheDocument();
+    expect(queryByText('What went wrong?')).not.toBeInTheDocument();
+  });
+
+  it('submits the detail form with the selected category and comment', () => {
+    const onSubmitDetail = vi.fn();
+    const { getByLabelText, getByText, getByPlaceholderText } = render(() => (
+      <FeedbackBar
+        title="Helpful?"
+        collectDetail
+        categories={['Inaccurate', 'Unhelpful']}
+        onSubmitDetail={onSubmitDetail}
+      />
+    ));
+    fireEvent.click(getByLabelText('Not helpful'));
+    fireEvent.click(getByText('Inaccurate'));
+    fireEvent.input(getByPlaceholderText('Tell us more (optional)'), { target: { value: 'wrong answer' } });
+    fireEvent.click(getByText('Submit'));
+    expect(onSubmitDetail).toHaveBeenCalledWith({
+      value: 'not-helpful',
+      category: 'Inaccurate',
+      comment: 'wrong answer',
+    });
+    expect(getByText('Thanks for your feedback')).toBeInTheDocument();
+  });
+
+  it('Skip dismisses the detail form to thanks without firing onSubmitDetail', () => {
+    const onSubmitDetail = vi.fn();
+    const { getByLabelText, getByText } = render(() => (
+      <FeedbackBar title="Helpful?" collectDetail categories={['Inaccurate']} onSubmitDetail={onSubmitDetail} />
+    ));
+    fireEvent.click(getByLabelText('Not helpful'));
+    fireEvent.click(getByText('Skip'));
+    expect(onSubmitDetail).not.toHaveBeenCalled();
+    expect(getByText('Thanks for your feedback')).toBeInTheDocument();
+  });
+
+  it('fires onClose when dismissed from the ask phase', () => {
+    const onClose = vi.fn();
+    const { getByLabelText } = render(() => <FeedbackBar title="Helpful?" onClose={onClose} />);
+    fireEvent.click(getByLabelText('Close'));
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('honors a custom thanksMessage', () => {
+    const { getByLabelText, getByText } = render(() => (
+      <FeedbackBar title="Helpful?" thanksMessage="Got it — thank you!" />
+    ));
+    fireEvent.click(getByLabelText('Helpful'));
+    expect(getByText('Got it — thank you!')).toBeInTheDocument();
+  });
+});

package/src/components/feedback-bar.tsx

@@ -0,0 +1,166 @@
+import { type JSX, Switch, Match, For, Show, createSignal } from 'solid-js';
+import { cn } from '../utils/cn';
+import { ThumbsUp, ThumbsDown, X, Check } from 'lucide-solid';
+import { Button } from '../ui/button';
+import { Textarea } from '../ui/textarea';
+
+export type FeedbackValue = 'helpful' | 'not-helpful';
+
+/** Payload of the optional detail form (phase 2). */
+export interface FeedbackDetail {
+  value: FeedbackValue;
+  /** The selected category chip, if any. */
+  category?: string;
+  /** The free-text comment, if entered. */
+  comment?: string;
+}
+
+export interface FeedbackBarProps {
+  class?: string;
+  /** Prompt shown in the initial "ask" state. */
+  title?: string;
+  /** Optional leading icon shown before the title. */
+  icon?: JSX.Element;
+  /** When set, a not-helpful vote opens an optional detail form before the
+   *  thank-you confirmation. Off → a vote goes straight to thanks. */
+  collectDetail?: boolean;
+  /** Optional category chips offered in the detail form. */
+  categories?: string[];
+  /** Heading for the detail form. */
+  detailTitle?: string;
+  /** Placeholder for the detail comment box. */
+  detailPlaceholder?: string;
+  /** Submit button label in the detail form. */
+  submitLabel?: string;
+  /** Confirmation copy shown after a vote/submit. */
+  thanksMessage?: string;
+  /** Fired immediately when a rating button is clicked (the vote is recorded
+   *  even if the user never fills in the detail form). */
+  onFeedback?: (value: FeedbackValue) => void;
+  /** Fired when the optional detail form is submitted. */
+  onSubmitDetail?: (detail: FeedbackDetail) => void;
+  /** Fired when the bar is dismissed via the close (X) button. */
+  onClose?: () => void;
+}
+
+type Phase = 'ask' | 'detail' | 'thanks';
+
+/**
+ * An inline thumbs up/down feedback bar that owns its own flow: it asks, then
+ * (optionally, on a not-helpful vote) collects a category + comment, then
+ * confirms with a thank-you — all in place, the way ChatGPT/Claude do it. The
+ * vote fires `onFeedback` immediately; the optional detail fires
+ * `onSubmitDetail`; `onClose` dismisses the bar.
+ */
+export function FeedbackBar(props: FeedbackBarProps) {
+  const [phase, setPhase] = createSignal<Phase>('ask');
+  const [vote, setVote] = createSignal<FeedbackValue>();
+  const [category, setCategory] = createSignal<string>();
+  const [comment, setComment] = createSignal('');
+
+  const rate = (value: FeedbackValue) => {
+    setVote(value);
+    props.onFeedback?.(value);
+    setPhase(value === 'not-helpful' && props.collectDetail ? 'detail' : 'thanks');
+  };
+
+  const submitDetail = () => {
+    props.onSubmitDetail?.({ value: vote()!, category: category(), comment: comment() || undefined });
+    setPhase('thanks');
+  };
+
+  const iconBtn =
+    'text-muted-foreground hover:text-foreground flex size-8 items-center justify-center rounded-md transition-colors';
+
+  return (
+    <div
+      class={cn('bg-background border-border inline-flex rounded-[12px] border text-sm', props.class)}
+    >
+      <Switch>
+        {/* ── Ask ── */}
+        <Match when={phase() === 'ask'}>
+          <div class="flex w-full items-center justify-between">
+            <div class="flex flex-1 items-center justify-start gap-4 py-3 pl-4">
+              <Show when={props.icon}>{props.icon}</Show>
+              <span class="text-foreground font-medium">{props.title}</span>
+            </div>
+            <div class="flex items-center justify-center gap-0.5 px-3 py-0">
+              <button type="button" class={iconBtn} aria-label="Helpful" onClick={() => rate('helpful')}>
+                <ThumbsUp class="size-4" />
+              </button>
+              <button type="button" class={iconBtn} aria-label="Not helpful" onClick={() => rate('not-helpful')}>
+                <ThumbsDown class="size-4" />
+              </button>
+            </div>
+            <div class="border-border flex items-center justify-center border-l">
+              <button
+                type="button"
+                onClick={() => props.onClose?.()}
+                class="text-muted-foreground hover:text-foreground flex items-center justify-center rounded-md p-3"
+                aria-label="Close"
+              >
+                <X class="size-5" />
+              </button>
+            </div>
+          </div>
+        </Match>
+
+        {/* ── Detail (phase 2, not-helpful only) ── */}
+        <Match when={phase() === 'detail'}>
+          <div class="flex w-[min(22rem,80vw)] flex-col gap-2.5 p-3">
+            <div class="flex items-center justify-between">
+              <span class="text-foreground font-medium">{props.detailTitle ?? 'What went wrong?'}</span>
+              <button
+                type="button"
+                aria-label="Skip"
+                onClick={() => setPhase('thanks')}
+                class="text-muted-foreground hover:text-foreground"
+              >
+                <X class="size-4" />
+              </button>
+            </div>
+            <Show when={props.categories?.length}>
+              <div class="flex flex-wrap gap-1.5">
+                <For each={props.categories}>
+                  {(c) => (
+                    <button
+                      type="button"
+                      aria-pressed={category() === c}
+                      onClick={() => setCategory(category() === c ? undefined : c)}
+                      class={cn(
+                        'rounded-full border px-2.5 py-1 text-xs transition-colors',
+                        category() === c
+                          ? 'border-primary bg-primary text-primary-foreground'
+                          : 'border-border text-muted-foreground hover:text-foreground',
+                      )}
+                    >
+                      {c}
+                    </button>
+                  )}
+                </For>
+              </div>
+            </Show>
+            <Textarea
+              value={comment()}
+              onInput={(e) => setComment(e.currentTarget.value)}
+              placeholder={props.detailPlaceholder ?? 'Tell us more (optional)'}
+              class="border-border min-h-[3rem] rounded-md border px-2 py-1.5"
+            />
+            <div class="flex justify-end gap-2">
+              <Button variant="ghost" size="sm" onClick={() => setPhase('thanks')}>Skip</Button>
+              <Button variant="default" size="sm" onClick={submitDetail}>{props.submitLabel ?? 'Submit'}</Button>
+            </div>
+          </div>
+        </Match>
+
+        {/* ── Thanks ── */}
+        <Match when={phase() === 'thanks'}>
+          <div class="flex items-center gap-2 px-4 py-3" role="status">
+            <Check class="size-4 text-emerald-500" />
+            <span class="text-foreground font-medium">{props.thanksMessage ?? 'Thanks for your feedback'}</span>
+          </div>
+        </Match>
+      </Switch>
+    </div>
+  );
+}

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: 'Solid (Advanced)/Elements/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 '@kitn.ai/ui';`;
+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} />`),
+};