@kitnai/chat 0.1.0

package/src/components/empty.tsx

@@ -0,0 +1,166 @@
+import { type JSX, splitProps } from 'solid-js';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+/**
+ * Empty — a composable empty-state block, modeled on shadcn/ui's `Empty`.
+ * Structure:
+ *   Empty
+ *   ├── EmptyHeader
+ *   │   ├── EmptyMedia   (icon / avatar)
+ *   │   ├── EmptyTitle
+ *   │   └── EmptyDescription
+ *   └── EmptyContent     (actions / suggestions)
+ *
+ * Styling is token-driven (`--color-*`), so it themes with the rest of the kit.
+ * No visible border by default; add `border border-dashed` via `class` for a card.
+ */
+
+// --- Empty (root) ---
+
+export interface EmptyProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  children: JSX.Element;
+}
+
+function Empty(props: EmptyProps) {
+  const [local, rest] = splitProps(props, ['class', 'children']);
+  return (
+    <div
+      data-slot="empty"
+      class={cn(
+        'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg p-6 text-center text-balance',
+        local.class,
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+}
+
+// --- EmptyHeader ---
+
+export interface EmptyHeaderProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  children: JSX.Element;
+}
+
+function EmptyHeader(props: EmptyHeaderProps) {
+  const [local, rest] = splitProps(props, ['class', 'children']);
+  return (
+    <div
+      data-slot="empty-header"
+      class={cn('flex max-w-sm flex-col items-center gap-2 text-center', local.class)}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+}
+
+// --- EmptyMedia ---
+
+const emptyMediaVariants = cva(
+  'flex shrink-0 items-center justify-center mb-2 [&_svg]:size-6',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        icon: 'bg-muted text-foreground size-10 rounded-lg',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  },
+);
+
+export interface EmptyMediaProps
+  extends JSX.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof emptyMediaVariants> {
+  children: JSX.Element;
+}
+
+function EmptyMedia(props: EmptyMediaProps) {
+  const [local, rest] = splitProps(props, ['class', 'variant', 'children']);
+  return (
+    <div
+      data-slot="empty-media"
+      data-variant={local.variant ?? 'default'}
+      class={cn(emptyMediaVariants({ variant: local.variant }), local.class)}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+}
+
+// --- EmptyTitle ---
+
+export interface EmptyTitleProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  children: JSX.Element;
+}
+
+function EmptyTitle(props: EmptyTitleProps) {
+  const [local, rest] = splitProps(props, ['class', 'children']);
+  return (
+    <div
+      data-slot="empty-title"
+      class={cn('text-lg font-medium tracking-tight', local.class)}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+}
+
+// --- EmptyDescription ---
+
+export interface EmptyDescriptionProps extends JSX.HTMLAttributes<HTMLParagraphElement> {
+  children: JSX.Element;
+}
+
+function EmptyDescription(props: EmptyDescriptionProps) {
+  const [local, rest] = splitProps(props, ['class', 'children']);
+  return (
+    <p
+      data-slot="empty-description"
+      class={cn(
+        'text-muted-foreground text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+        local.class,
+      )}
+      {...rest}
+    >
+      {local.children}
+    </p>
+  );
+}
+
+// --- EmptyContent ---
+
+export interface EmptyContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  children: JSX.Element;
+}
+
+function EmptyContent(props: EmptyContentProps) {
+  const [local, rest] = splitProps(props, ['class', 'children']);
+  return (
+    <div
+      data-slot="empty-content"
+      class={cn(
+        'flex w-full max-w-sm min-w-0 flex-col items-center gap-2 text-sm text-balance',
+        local.class,
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  emptyMediaVariants,
+};

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

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { fn } from 'storybook/test';
+import { FeedbackBar } from './feedback-bar';
+
+const meta = {
+  title: 'Components/FeedbackBar',
+  component: FeedbackBar,
+  tags: ['autodocs'],
+  parameters: {
+    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'),
+      },
+    },
+  },
+  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.',
+    },
+    class: {
+      control: 'text',
+      description: 'Additional CSS classes for the root element.',
+    },
+    onHelpful: {
+      action: 'helpful',
+      description: 'Fired when the thumbs-up (Helpful) button is clicked.',
+      table: { category: 'Events' },
+    },
+    onNotHelpful: {
+      action: 'notHelpful',
+      description: 'Fired when the thumbs-down (Not helpful) button is clicked.',
+      table: { category: 'Events' },
+    },
+    onClose: {
+      action: 'close',
+      description: 'Fired when the close (X) button is clicked.',
+      table: { category: 'Events' },
+    },
+  },
+  args: {
+    title: 'Was this response helpful?',
+    onHelpful: fn(),
+    onNotHelpful: fn(),
+    onClose: fn(),
+  },
+  render: (args) => <FeedbackBar {...args} />,
+} satisfies Meta<typeof FeedbackBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { FeedbackBar } from '@kitnai/chat';`;
+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?"
+  onHelpful={() => {}}
+  onNotHelpful={() => {}}
+  onClose={() => {}}
+/>`),
+};
+
+export const CustomTitle: Story = {
+  args: { title: 'Rate this answer' },
+  ...src(`<FeedbackBar title="Rate this answer" onHelpful={() => {}} onNotHelpful={() => {}} />`),
+};
+
+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 />}
+  onHelpful={() => {}}
+  onNotHelpful={() => {}}
+/>`),
+};

package/src/components/feedback-bar.tsx

@@ -0,0 +1,58 @@
+import { type JSX, Show } from 'solid-js';
+import { cn } from '../utils/cn';
+import { ThumbsUp, ThumbsDown, X } from 'lucide-solid';
+
+export interface FeedbackBarProps {
+  class?: string;
+  title?: string;
+  icon?: JSX.Element;
+  onHelpful?: () => void;
+  onNotHelpful?: () => void;
+  onClose?: () => void;
+}
+
+export function FeedbackBar(props: FeedbackBarProps) {
+  return (
+    <div
+      class={cn(
+        'bg-background border-border inline-flex rounded-[12px] border text-sm',
+        props.class
+      )}
+    >
+      <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="text-muted-foreground hover:text-foreground flex size-8 items-center justify-center rounded-md transition-colors"
+            aria-label="Helpful"
+            onClick={props.onHelpful}
+          >
+            <ThumbsUp class="size-4" />
+          </button>
+          <button
+            type="button"
+            class="text-muted-foreground hover:text-foreground flex size-8 items-center justify-center rounded-md transition-colors"
+            aria-label="Not helpful"
+            onClick={props.onNotHelpful}
+          >
+            <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>
+    </div>
+  );
+}

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

@@ -0,0 +1,157 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { fn } from 'storybook/test';
+import { createSignal, For } from 'solid-js';
+import { FileUpload, FileUploadTrigger, FileUploadContent } from './file-upload';
+import { Upload } from 'lucide-solid';
+
+const meta = {
+  title: 'Components/FileUpload',
+  component: FileUpload,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      controls: { exclude: ['use:eventListener'] },
+      description: {
+        component: [
+          'A headless file-upload root that handles window-wide drag-and-drop plus a hidden file input, composed with `FileUploadTrigger` (opens the picker) and `FileUploadContent` (full-screen drop overlay).',
+          '**When to use:** to let users attach files to a chat — via a button click or by dragging files anywhere onto the page.',
+          '**How to use:** wrap a `FileUploadTrigger` and optional `FileUploadContent` in `FileUpload`, and read selected files from `onFilesAdded`. Set `multiple`, `accept`, or `disabled` as needed.',
+          '**Placement:** in the prompt input area or composer toolbar where attachments are added.',
+        ].join('\n\n'),
+      },
+    },
+  },
+  argTypes: {
+    multiple: {
+      control: 'boolean',
+      description: 'Allow selecting / dropping more than one file.',
+      table: { defaultValue: { summary: 'true' } },
+    },
+    accept: {
+      control: 'text',
+      description: 'Accepted file types, forwarded to the file input (e.g. `image/*`).',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the file input and suppresses the drop overlay.',
+    },
+    onFilesAdded: {
+      action: 'filesAdded',
+      description: 'Fired with the selected/dropped `File[]` (capped to one when `multiple` is false).',
+      table: { category: 'Events' },
+    },
+    children: {
+      control: false,
+      description: 'Trigger and overlay composition (`FileUploadTrigger`, `FileUploadContent`).',
+    },
+  },
+  args: {
+    multiple: true,
+    onFilesAdded: fn(),
+  },
+  render: (args) => (
+    <FileUpload {...args}>
+      <FileUploadTrigger class="inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground hover:bg-primary/90">
+        <Upload class="size-4" />
+        Upload files
+      </FileUploadTrigger>
+      <FileUploadContent class="flex flex-col items-center gap-2">
+        <Upload class="size-12 text-muted-foreground" />
+        <p class="text-lg font-medium">Drop files here</p>
+      </FileUploadContent>
+    </FileUpload>
+  ),
+} satisfies Meta<typeof FileUpload>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { FileUpload, FileUploadTrigger, FileUploadContent } from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — toggle multiple/disabled and watch the `filesAdded` action. */
+export const Playground: Story = {
+  ...src(`<FileUpload onFilesAdded={(files) => console.log(files)}>
+  <FileUploadTrigger class="...">
+    <Upload class="size-4" /> Upload files
+  </FileUploadTrigger>
+  <FileUploadContent class="...">
+    <Upload class="size-12" />
+    <p>Drop files here</p>
+  </FileUploadContent>
+</FileUpload>`),
+};
+
+/** Multi-file upload with a live list of selected files (showcase). */
+export const Default: Story = {
+  render: () => {
+    const [files, setFiles] = createSignal<File[]>([]);
+    return (
+      <div class="space-y-4">
+        <FileUpload onFilesAdded={(f) => setFiles((prev) => [...prev, ...f])}>
+          <FileUploadTrigger class="inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground hover:bg-primary/90">
+            <Upload class="size-4" />
+            Upload files
+          </FileUploadTrigger>
+          <FileUploadContent class="flex flex-col items-center gap-2">
+            <Upload class="size-12 text-muted-foreground" />
+            <p class="text-lg font-medium">Drop files here</p>
+          </FileUploadContent>
+        </FileUpload>
+        <div class="space-y-1">
+          <For each={files()}>
+            {(file) => (
+              <div class="text-sm text-muted-foreground">
+                {file.name} ({(file.size / 1024).toFixed(1)} KB)
+              </div>
+            )}
+          </For>
+        </div>
+      </div>
+    );
+  },
+  ...src(`<FileUpload onFilesAdded={(f) => setFiles((prev) => [...prev, ...f])}>
+  <FileUploadTrigger class="...">
+    <Upload class="size-4" /> Upload files
+  </FileUploadTrigger>
+  <FileUploadContent class="...">
+    <Upload class="size-12" />
+    <p>Drop files here</p>
+  </FileUploadContent>
+</FileUpload>`),
+};
+
+/** Single-file, image-only upload (showcase). */
+export const SingleFile: Story = {
+  render: () => {
+    const [file, setFile] = createSignal<File | null>(null);
+    return (
+      <div class="space-y-4">
+        <FileUpload
+          onFilesAdded={(f) => setFile(f[0] ?? null)}
+          multiple={false}
+          accept="image/*"
+        >
+          <FileUploadTrigger class="rounded-md bg-muted px-4 py-2 text-sm hover:bg-muted/80">
+            Choose image
+          </FileUploadTrigger>
+          <FileUploadContent>
+            <p class="text-lg font-medium">Drop an image here</p>
+          </FileUploadContent>
+        </FileUpload>
+        <div class="text-sm text-muted-foreground">
+          {file() ? `Selected: ${file()!.name}` : 'No file selected'}
+        </div>
+      </div>
+    );
+  },
+  ...src(`<FileUpload onFilesAdded={(f) => setFile(f[0] ?? null)} multiple={false} accept="image/*">
+  <FileUploadTrigger class="...">Choose image</FileUploadTrigger>
+  <FileUploadContent>
+    <p>Drop an image here</p>
+  </FileUploadContent>
+</FileUpload>`),
+};

package/src/components/file-upload.tsx

@@ -0,0 +1,161 @@
+import { type JSX, splitProps, createSignal, createContext, useContext, createEffect, onCleanup, Show } from 'solid-js';
+import { Portal } from 'solid-js/web';
+import { cn } from '../utils/cn';
+
+interface FileUploadContextValue {
+  isDragging: () => boolean;
+  inputRef: HTMLInputElement | undefined;
+  setInputRef: (el: HTMLInputElement) => void;
+  multiple?: boolean;
+  disabled?: boolean;
+}
+
+const FileUploadContext = createContext<FileUploadContextValue>();
+
+// --- FileUpload (Root) ---
+
+export interface FileUploadProps {
+  onFilesAdded: (files: File[]) => void;
+  children: JSX.Element;
+  multiple?: boolean;
+  accept?: string;
+  disabled?: boolean;
+}
+
+function FileUpload(props: FileUploadProps) {
+  const [local] = splitProps(props, ['onFilesAdded', 'children', 'multiple', 'accept', 'disabled']);
+  let inputRef: HTMLInputElement | undefined;
+  const [isDragging, setIsDragging] = createSignal(false);
+  let dragCounter = 0;
+
+  const multiple = () => local.multiple ?? true;
+
+  const handleFiles = (files: FileList) => {
+    const newFiles = Array.from(files);
+    if (multiple()) {
+      local.onFilesAdded(newFiles);
+    } else {
+      local.onFilesAdded(newFiles.slice(0, 1));
+    }
+  };
+
+  createEffect(() => {
+    const handleDrag = (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+
+    const handleDragIn = (e: DragEvent) => {
+      handleDrag(e);
+      dragCounter++;
+      if (e.dataTransfer?.items.length) setIsDragging(true);
+    };
+
+    const handleDragOut = (e: DragEvent) => {
+      handleDrag(e);
+      dragCounter--;
+      if (dragCounter === 0) setIsDragging(false);
+    };
+
+    const handleDrop = (e: DragEvent) => {
+      handleDrag(e);
+      setIsDragging(false);
+      dragCounter = 0;
+      if (e.dataTransfer?.files.length) {
+        handleFiles(e.dataTransfer.files);
+      }
+    };
+
+    window.addEventListener('dragenter', handleDragIn);
+    window.addEventListener('dragleave', handleDragOut);
+    window.addEventListener('dragover', handleDrag);
+    window.addEventListener('drop', handleDrop);
+
+    onCleanup(() => {
+      window.removeEventListener('dragenter', handleDragIn);
+      window.removeEventListener('dragleave', handleDragOut);
+      window.removeEventListener('dragover', handleDrag);
+      window.removeEventListener('drop', handleDrop);
+    });
+  });
+
+  const handleFileSelect = (e: Event) => {
+    const target = e.target as HTMLInputElement;
+    if (target.files?.length) {
+      handleFiles(target.files);
+      target.value = '';
+    }
+  };
+
+  const contextValue: FileUploadContextValue = {
+    isDragging,
+    get inputRef() { return inputRef; },
+    setInputRef: (el: HTMLInputElement) => { inputRef = el; },
+    multiple: local.multiple,
+    disabled: local.disabled,
+  };
+
+  return (
+    <FileUploadContext.Provider value={contextValue}>
+      <input
+        type="file"
+        ref={(el) => { inputRef = el; }}
+        onInput={handleFileSelect}
+        class="hidden"
+        multiple={multiple()}
+        accept={local.accept}
+        aria-hidden="true"
+        disabled={local.disabled}
+      />
+      {local.children}
+    </FileUploadContext.Provider>
+  );
+}
+
+// --- FileUploadTrigger ---
+
+export interface FileUploadTriggerProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+function FileUploadTrigger(props: FileUploadTriggerProps) {
+  const [local, rest] = splitProps(props, ['class', 'children']);
+  const context = useContext(FileUploadContext);
+
+  const handleClick = () => context?.inputRef?.click();
+
+  return (
+    <button
+      type="button"
+      class={local.class}
+      onClick={handleClick}
+      {...rest}
+    >
+      {local.children}
+    </button>
+  );
+}
+
+// --- FileUploadContent ---
+
+export interface FileUploadContentProps extends JSX.HTMLAttributes<HTMLDivElement> {}
+
+function FileUploadContent(props: FileUploadContentProps) {
+  const [local, rest] = splitProps(props, ['class']);
+  const context = useContext(FileUploadContext);
+
+  return (
+    <Show when={context && context.isDragging() && !context.disabled}>
+      <Portal>
+        <div
+          class={cn(
+            'bg-background/80 fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm',
+            'animate-in fade-in-0 slide-in-from-bottom-10 zoom-in-90 duration-150',
+            local.class
+          )}
+          {...rest}
+        />
+      </Portal>
+    </Show>
+  );
+}
+
+export { FileUpload, FileUploadTrigger, FileUploadContent };