@kitnai/chat 0.1.0

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@kitnai/chat",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "SolidJS + Shadow-DOM web component kit for building AI chat interfaces.",
+  "license": "MIT",
+  "homepage": "https://github.com/kitn-ai/chat#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kitn-ai/chat.git"
+  },
+  "bugs": {
+    "url": "https://github.com/kitn-ai/chat/issues"
+  },
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "unpkg": "./dist/kitn-chat.es.js",
+  "jsdelivr": "./dist/kitn-chat.es.js",
+  "exports": {
+    ".": "./src/index.ts",
+    "./elements": "./dist/kitn-chat.es.js",
+    "./theme.css": "./theme.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "theme.css"
+  ],
+  "scripts": {
+    "prepublishOnly": "npm run build",
+    "prebuild": "npm run build:css",
+    "build": "vite build --config vite.config.ts",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "dev": "npm run build:css && storybook dev -p 6006",
+    "storybook": "npm run build:css && storybook dev -p 6006",
+    "build-storybook": "npm run build:css && storybook build",
+    "build:css": "tailwindcss -i src/elements/styles.css -o src/elements/compiled.css --minify",
+    "build:css:watch": "tailwindcss -i src/elements/styles.css -o src/elements/compiled.css --watch"
+  },
+  "dependencies": {
+    "@kobalte/core": "^0.13.0",
+    "@shikijs/langs": "^4.2.0",
+    "@shikijs/themes": "^4.2.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "lucide-solid": "^0.400.0",
+    "marked": "^18.0.0",
+    "shiki": "^4.0.2",
+    "solid-element": "^1.9.1",
+    "solid-js": "^1.9.0",
+    "tailwind-merge": "^2.5.0"
+  },
+  "devDependencies": {
+    "@solidjs/testing-library": "^0.8.0",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/addon-themes": "^10.3.5",
+    "@storybook/addon-vitest": "^10.3.5",
+    "@tailwindcss/cli": "^4.3.0",
+    "@tailwindcss/postcss": "^4.2.2",
+    "@tailwindcss/typography": "^0.5.19",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@vitest/browser-playwright": "4.1.2",
+    "@vitest/coverage-v8": "4.1.2",
+    "jsdom": "^24.0.0",
+    "playwright": "^1.59.1",
+    "storybook": "^10.3.5",
+    "storybook-dark-mode": "^5.0.0",
+    "storybook-solidjs-vite": "^10.0.12",
+    "tailwindcss": "^4.2.2",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.5.0",
+    "vite": "^6.0.0",
+    "vite-plugin-solid": "^2.11.0",
+    "vitest": "^4.1.0"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.9.0"
+  }
+}

package/src/components/attachments.stories.tsx

@@ -0,0 +1,304 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { createSignal, For } from 'solid-js';
+import {
+  Attachments,
+  Attachment,
+  AttachmentPreview,
+  AttachmentInfo,
+  AttachmentRemove,
+  AttachmentHoverCard,
+  AttachmentHoverCardTrigger,
+  AttachmentHoverCardContent,
+  AttachmentEmpty,
+} from './attachments';
+import type { AttachmentData } from './attachments';
+
+const sampleAttachments: AttachmentData[] = [
+  {
+    id: '1',
+    type: 'file',
+    filename: 'mountain-landscape.jpg',
+    mediaType: 'image/jpeg',
+    url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop',
+  },
+  {
+    id: '2',
+    type: 'file',
+    filename: 'sunset-beach.png',
+    mediaType: 'image/png',
+    url: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400&h=400&fit=crop',
+  },
+  {
+    id: '3',
+    type: 'file',
+    filename: 'architecture-report.pdf',
+    mediaType: 'application/pdf',
+  },
+  {
+    id: '4',
+    type: 'file',
+    filename: 'demo-recording.mp4',
+    mediaType: 'video/mp4',
+  },
+  {
+    id: '5',
+    type: 'file',
+    filename: 'podcast-episode.mp3',
+    mediaType: 'audio/mpeg',
+  },
+  {
+    id: '6',
+    type: 'source-document',
+    filename: 'SolidJS Documentation',
+    title: 'SolidJS Reactivity Guide',
+    url: 'https://solidjs.com/docs',
+  },
+];
+
+const meta = {
+  title: 'Components/Attachments',
+  component: Attachments,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: [
+          'A composable container for displaying file and source-document attachments as thumbnails, inline chips, or a vertical list. Built from `Attachments` + per-item `Attachment` with `AttachmentPreview`, `AttachmentInfo`, and `AttachmentRemove` parts.',
+          '**When to use:** to show files a user attached to a prompt, or documents/sources referenced by a message. Choose `grid` for thumbnails, `inline` for compact chips, `list` for a detailed rows view.',
+          '**How to use:** set `variant` on `Attachments`, then map your data to `Attachment` (passing each item via `data` and an `onRemove` handler) and compose the preview/info/remove parts inside.',
+          '**Placement:** prompt input area (pending uploads), message bodies (attached or cited files), and document panels.',
+        ].join('\n\n'),
+      },
+      controls: { exclude: ['use:eventListener'] },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['grid', 'inline', 'list'],
+      description: 'Layout of the attachment items.',
+      table: { defaultValue: { summary: 'grid' } },
+    },
+    children: {
+      control: false,
+      description: 'The `Attachment` items to render inside the container.',
+    },
+    class: {
+      control: 'text',
+      description: 'Extra classes for the container element.',
+    },
+  },
+  args: {
+    variant: 'grid',
+  },
+  render: (args) => {
+    const [items, setItems] = createSignal([...sampleAttachments]);
+    const remove = (id: string) => setItems((prev) => prev.filter((a) => a.id !== id));
+    return (
+      <Attachments {...args}>
+        <For each={items()}>
+          {(item) => (
+            <Attachment data={item} onRemove={() => remove(item.id)}>
+              <AttachmentPreview />
+              <AttachmentInfo />
+              <AttachmentRemove />
+            </Attachment>
+          )}
+        </For>
+      </Attachments>
+    );
+  },
+} satisfies Meta<typeof Attachments>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import {
+  Attachments, Attachment, AttachmentPreview, AttachmentInfo, AttachmentRemove,
+} from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — switch `variant` to compare grid / inline / list. */
+export const Playground: Story = {
+  ...src(`<Attachments variant="grid">
+  <For each={items()}>
+    {(item) => (
+      <Attachment data={item} onRemove={() => remove(item.id)}>
+        <AttachmentPreview />
+        <AttachmentInfo />
+        <AttachmentRemove />
+      </Attachment>
+    )}
+  </For>
+</Attachments>`),
+};
+
+export const Grid: Story = {
+  render: () => {
+    const [items, setItems] = createSignal([...sampleAttachments]);
+    const remove = (id: string) => setItems((prev) => prev.filter((a) => a.id !== id));
+    return (
+      <div class="space-y-4">
+        <Attachments variant="grid">
+          <For each={items()}>
+            {(item) => (
+              <Attachment data={item} onRemove={() => remove(item.id)}>
+                <AttachmentPreview />
+                <AttachmentRemove />
+              </Attachment>
+            )}
+          </For>
+        </Attachments>
+        <button
+          class="text-sm text-muted-foreground hover:text-foreground transition-colors"
+          onClick={() => setItems([...sampleAttachments])}
+        >
+          Reset
+        </button>
+      </div>
+    );
+  },
+  ...src(`<Attachments variant="grid">
+  <For each={items()}>
+    {(item) => (
+      <Attachment data={item} onRemove={() => remove(item.id)}>
+        <AttachmentPreview />
+        <AttachmentRemove />
+      </Attachment>
+    )}
+  </For>
+</Attachments>`),
+};
+
+export const Inline: Story = {
+  render: () => {
+    const [items, setItems] = createSignal([...sampleAttachments]);
+    const remove = (id: string) => setItems((prev) => prev.filter((a) => a.id !== id));
+    return (
+      <div class="space-y-4">
+        <Attachments variant="inline">
+          <For each={items()}>
+            {(item) => (
+              <Attachment data={item} onRemove={() => remove(item.id)}>
+                <AttachmentPreview />
+                <AttachmentInfo />
+                <AttachmentRemove />
+              </Attachment>
+            )}
+          </For>
+        </Attachments>
+        <button
+          class="text-sm text-muted-foreground hover:text-foreground transition-colors"
+          onClick={() => setItems([...sampleAttachments])}
+        >
+          Reset
+        </button>
+      </div>
+    );
+  },
+  ...src(`<Attachments variant="inline">
+  <For each={items()}>
+    {(item) => (
+      <Attachment data={item} onRemove={() => remove(item.id)}>
+        <AttachmentPreview />
+        <AttachmentInfo />
+        <AttachmentRemove />
+      </Attachment>
+    )}
+  </For>
+</Attachments>`),
+};
+
+export const List: Story = {
+  render: () => {
+    const [items, setItems] = createSignal([...sampleAttachments]);
+    const remove = (id: string) => setItems((prev) => prev.filter((a) => a.id !== id));
+    return (
+      <div class="w-96 space-y-4">
+        <Attachments variant="list">
+          <For each={items()}>
+            {(item) => (
+              <Attachment data={item} onRemove={() => remove(item.id)}>
+                <AttachmentPreview />
+                <AttachmentInfo showMediaType />
+                <AttachmentRemove />
+              </Attachment>
+            )}
+          </For>
+        </Attachments>
+        <button
+          class="text-sm text-muted-foreground hover:text-foreground transition-colors"
+          onClick={() => setItems([...sampleAttachments])}
+        >
+          Reset
+        </button>
+      </div>
+    );
+  },
+  ...src(`<Attachments variant="list">
+  <For each={items()}>
+    {(item) => (
+      <Attachment data={item} onRemove={() => remove(item.id)}>
+        <AttachmentPreview />
+        <AttachmentInfo showMediaType />
+        <AttachmentRemove />
+      </Attachment>
+    )}
+  </For>
+</Attachments>`),
+};
+
+export const WithHoverCard: Story = {
+  render: () => (
+    <Attachments variant="grid">
+      <AttachmentHoverCard>
+        <AttachmentHoverCardTrigger>
+          <Attachment
+            data={{
+              id: '1',
+              type: 'file',
+              filename: 'mountain-landscape.jpg',
+              mediaType: 'image/jpeg',
+              url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop',
+            }}
+          >
+            <AttachmentPreview />
+          </Attachment>
+        </AttachmentHoverCardTrigger>
+        <AttachmentHoverCardContent>
+          <img
+            src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop"
+            alt="Mountain landscape"
+            class="max-w-xs rounded"
+          />
+        </AttachmentHoverCardContent>
+      </AttachmentHoverCard>
+    </Attachments>
+  ),
+  ...src(`<Attachments variant="grid">
+  <AttachmentHoverCard>
+    <AttachmentHoverCardTrigger>
+      <Attachment data={item}>
+        <AttachmentPreview />
+      </Attachment>
+    </AttachmentHoverCardTrigger>
+    <AttachmentHoverCardContent>
+      <img src={item.url} alt={item.filename} class="max-w-xs rounded" />
+    </AttachmentHoverCardContent>
+  </AttachmentHoverCard>
+</Attachments>`),
+};
+
+export const Empty: Story = {
+  render: () => (
+    <Attachments variant="grid">
+      <AttachmentEmpty />
+    </Attachments>
+  ),
+  ...src(`<Attachments variant="grid">
+  <AttachmentEmpty />
+</Attachments>`),
+};