@kitnai/chat 0.1.0

package/src/components/attachments.tsx

@@ -0,0 +1,394 @@
+import { type JSX, createContext, useContext, splitProps, Show } from 'solid-js';
+import { cn } from '../utils/cn';
+import { Button } from '../ui/button';
+import { HoverCardRoot, HoverCardTrigger, HoverCardContent } from '../ui/hover-card';
+import {
+  FileText,
+  Globe,
+  Image as ImageIcon,
+  Music2,
+  Paperclip,
+  Video,
+  X,
+} from 'lucide-solid';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface AttachmentData {
+  id: string;
+  type: 'file' | 'source-document';
+  filename?: string;
+  mediaType?: string;
+  url?: string;
+  title?: string;
+}
+
+export type AttachmentMediaCategory = 'image' | 'video' | 'audio' | 'document' | 'source' | 'unknown';
+export type AttachmentVariant = 'grid' | 'inline' | 'list';
+
+const mediaCategoryIcons: Record<AttachmentMediaCategory, typeof ImageIcon> = {
+  audio: Music2,
+  document: FileText,
+  image: ImageIcon,
+  source: Globe,
+  unknown: Paperclip,
+  video: Video,
+};
+
+// ============================================================================
+// Utility Functions
+// ============================================================================
+
+export const getMediaCategory = (data: AttachmentData): AttachmentMediaCategory => {
+  if (data.type === 'source-document') {
+    return 'source';
+  }
+
+  const mediaType = data.mediaType ?? '';
+
+  if (mediaType.startsWith('image/')) return 'image';
+  if (mediaType.startsWith('video/')) return 'video';
+  if (mediaType.startsWith('audio/')) return 'audio';
+  if (mediaType.startsWith('application/') || mediaType.startsWith('text/')) return 'document';
+
+  return 'unknown';
+};
+
+export const getAttachmentLabel = (data: AttachmentData): string => {
+  if (data.type === 'source-document') {
+    return data.title || data.filename || 'Source';
+  }
+
+  const category = getMediaCategory(data);
+  return data.filename || (category === 'image' ? 'Image' : 'Attachment');
+};
+
+// ============================================================================
+// Contexts
+// ============================================================================
+
+interface AttachmentsContextValue {
+  variant: AttachmentVariant;
+}
+
+const AttachmentsContext = createContext<AttachmentsContextValue>();
+
+interface AttachmentContextValue {
+  data: AttachmentData;
+  mediaCategory: AttachmentMediaCategory;
+  onRemove?: () => void;
+  variant: AttachmentVariant;
+}
+
+const AttachmentContext = createContext<AttachmentContextValue>();
+
+// ============================================================================
+// Hooks
+// ============================================================================
+
+export const useAttachmentsContext = () =>
+  useContext(AttachmentsContext) ?? { variant: 'grid' as const };
+
+export const useAttachmentContext = () => {
+  const ctx = useContext(AttachmentContext);
+  if (!ctx) {
+    throw new Error('Attachment components must be used within <Attachment>');
+  }
+  return ctx;
+};
+
+// ============================================================================
+// Attachments - Container
+// ============================================================================
+
+export interface AttachmentsProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  variant?: AttachmentVariant;
+}
+
+function Attachments(props: AttachmentsProps) {
+  const [local, rest] = splitProps(props, ['variant', 'class', 'children']);
+  const variant = () => local.variant ?? 'grid';
+
+  return (
+    <AttachmentsContext.Provider value={{ get variant() { return variant(); } }}>
+      <div
+        class={cn(
+          'flex items-start',
+          variant() === 'list' ? 'flex-col gap-2' : 'flex-wrap gap-2',
+          variant() === 'grid' && 'w-fit',
+          local.class,
+        )}
+        {...rest}
+      >
+        {local.children}
+      </div>
+    </AttachmentsContext.Provider>
+  );
+}
+
+// ============================================================================
+// Attachment - Item
+// ============================================================================
+
+export interface AttachmentProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  data: AttachmentData;
+  onRemove?: () => void;
+}
+
+function Attachment(props: AttachmentProps) {
+  const [local, rest] = splitProps(props, ['data', 'onRemove', 'class', 'children']);
+  const { variant } = useAttachmentsContext();
+  const mediaCategory = () => getMediaCategory(local.data);
+
+  return (
+    <AttachmentContext.Provider
+      value={{
+        get data() { return local.data; },
+        get mediaCategory() { return mediaCategory(); },
+        get onRemove() { return local.onRemove; },
+        get variant() { return variant; },
+      }}
+    >
+      <div
+        class={cn(
+          'group relative',
+          variant === 'grid' && 'size-24 overflow-hidden rounded-lg',
+          variant === 'inline' && [
+            'flex h-8 cursor-pointer select-none items-center gap-1.5',
+            'rounded-md bg-muted/50 px-1.5',
+            'font-medium text-sm transition-all',
+            'hover:bg-muted',
+          ],
+          variant === 'list' && [
+            'flex w-full items-center gap-3 rounded-lg bg-muted/30 p-3',
+            'hover:bg-muted/50',
+          ],
+          local.class,
+        )}
+        {...rest}
+      >
+        {local.children}
+      </div>
+    </AttachmentContext.Provider>
+  );
+}
+
+// ============================================================================
+// AttachmentPreview - Media preview
+// ============================================================================
+
+export interface AttachmentPreviewProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  fallbackIcon?: JSX.Element;
+}
+
+function AttachmentPreview(props: AttachmentPreviewProps) {
+  const [local, rest] = splitProps(props, ['fallbackIcon', 'class']);
+  const ctx = useAttachmentContext();
+
+  const iconSize = () => ctx.variant === 'inline' ? 'size-3' : 'size-4';
+
+  const renderIcon = (Icon: typeof ImageIcon) => (
+    <Icon class={cn(iconSize(), 'text-muted-foreground')} />
+  );
+
+  const renderContent = () => {
+    if (ctx.mediaCategory === 'image' && ctx.data.type === 'file' && ctx.data.url) {
+      return ctx.variant === 'grid' ? (
+        <img
+          alt={ctx.data.filename || 'Image'}
+          class="size-full object-cover"
+          height={96}
+          src={ctx.data.url}
+          width={96}
+        />
+      ) : (
+        <img
+          alt={ctx.data.filename || 'Image'}
+          class="size-full rounded object-cover"
+          height={20}
+          src={ctx.data.url}
+          width={20}
+        />
+      );
+    }
+
+    if (ctx.mediaCategory === 'video' && ctx.data.type === 'file' && ctx.data.url) {
+      return <video class="size-full object-cover" muted src={ctx.data.url} />;
+    }
+
+    const Icon = mediaCategoryIcons[ctx.mediaCategory];
+    return local.fallbackIcon ?? renderIcon(Icon);
+  };
+
+  return (
+    <div
+      class={cn(
+        'flex shrink-0 items-center justify-center overflow-hidden',
+        ctx.variant === 'grid' && 'size-full bg-muted',
+        ctx.variant === 'inline' && 'size-5 rounded bg-background',
+        ctx.variant === 'list' && 'size-12 rounded bg-muted',
+        local.class,
+      )}
+      {...rest}
+    >
+      {renderContent()}
+    </div>
+  );
+}
+
+// ============================================================================
+// AttachmentInfo - Name and type display
+// ============================================================================
+
+export interface AttachmentInfoProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  showMediaType?: boolean;
+}
+
+function AttachmentInfo(props: AttachmentInfoProps) {
+  const [local, rest] = splitProps(props, ['showMediaType', 'class']);
+  const ctx = useAttachmentContext();
+  const label = () => getAttachmentLabel(ctx.data);
+
+  return (
+    <Show when={ctx.variant !== 'grid'}>
+      <div class={cn('min-w-0 flex-1', local.class)} {...rest}>
+        <span class="block truncate">{label()}</span>
+        <Show when={local.showMediaType && ctx.data.mediaType}>
+          <span class="block truncate text-muted-foreground text-xs">
+            {ctx.data.mediaType}
+          </span>
+        </Show>
+      </div>
+    </Show>
+  );
+}
+
+// ============================================================================
+// AttachmentRemove - Remove button
+// ============================================================================
+
+export interface AttachmentRemoveProps {
+  label?: string;
+  class?: string;
+  children?: JSX.Element;
+}
+
+function AttachmentRemove(props: AttachmentRemoveProps) {
+  const ctx = useAttachmentContext();
+
+  const handleClick = (e: MouseEvent) => {
+    e.stopPropagation();
+    ctx.onRemove?.();
+  };
+
+  return (
+    <Show when={ctx.onRemove}>
+      <Button
+        aria-label={props.label ?? 'Remove'}
+        class={cn(
+          ctx.variant === 'grid' && [
+            'absolute top-2 right-2 size-6 rounded-full p-0',
+            'bg-background/80 backdrop-blur-sm',
+            'opacity-0 transition-opacity group-hover:opacity-100',
+            'hover:bg-background',
+            '[&>svg]:size-3',
+          ],
+          ctx.variant === 'inline' && [
+            'size-5 rounded p-0',
+            'opacity-0 transition-opacity group-hover:opacity-100',
+            '[&>svg]:size-2.5',
+          ],
+          ctx.variant === 'list' && ['size-8 shrink-0 rounded p-0', '[&>svg]:size-4'],
+          props.class,
+        )}
+        onClick={handleClick}
+        type="button"
+        variant="ghost"
+      >
+        {props.children ?? <X />}
+        <span class="sr-only">{props.label ?? 'Remove'}</span>
+      </Button>
+    </Show>
+  );
+}
+
+// ============================================================================
+// AttachmentHoverCard - Hover preview
+// ============================================================================
+
+export interface AttachmentHoverCardProps {
+  children: JSX.Element;
+  openDelay?: number;
+  closeDelay?: number;
+}
+
+function AttachmentHoverCard(props: AttachmentHoverCardProps) {
+  return (
+    <HoverCardRoot
+      openDelay={props.openDelay ?? 0}
+      closeDelay={props.closeDelay ?? 0}
+    >
+      {props.children}
+    </HoverCardRoot>
+  );
+}
+
+export interface AttachmentHoverCardTriggerProps {
+  children: JSX.Element;
+}
+
+function AttachmentHoverCardTrigger(props: AttachmentHoverCardTriggerProps) {
+  return <HoverCardTrigger>{props.children}</HoverCardTrigger>;
+}
+
+export interface AttachmentHoverCardContentProps {
+  children: JSX.Element;
+  class?: string;
+}
+
+function AttachmentHoverCardContent(props: AttachmentHoverCardContentProps) {
+  return (
+    <HoverCardContent class={cn('w-auto p-2', props.class)}>
+      {props.children}
+    </HoverCardContent>
+  );
+}
+
+// ============================================================================
+// AttachmentEmpty - Empty state
+// ============================================================================
+
+export interface AttachmentEmptyProps extends JSX.HTMLAttributes<HTMLDivElement> {}
+
+function AttachmentEmpty(props: AttachmentEmptyProps) {
+  const [local, rest] = splitProps(props, ['class', 'children']);
+  return (
+    <div
+      class={cn(
+        'flex items-center justify-center p-4 text-muted-foreground text-sm',
+        local.class,
+      )}
+      {...rest}
+    >
+      {local.children ?? 'No attachments'}
+    </div>
+  );
+}
+
+// ============================================================================
+// Exports
+// ============================================================================
+
+export {
+  Attachments,
+  Attachment,
+  AttachmentPreview,
+  AttachmentInfo,
+  AttachmentRemove,
+  AttachmentHoverCard,
+  AttachmentHoverCardTrigger,
+  AttachmentHoverCardContent,
+  AttachmentEmpty,
+};

package/src/components/chain-of-thought.stories.tsx

@@ -0,0 +1,212 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import {
+  ChainOfThought,
+  ChainOfThoughtStep,
+  ChainOfThoughtTrigger,
+  ChainOfThoughtContent,
+  ChainOfThoughtItem,
+} from './chain-of-thought';
+
+const meta = {
+  title: 'Components/ChainOfThought',
+  component: ChainOfThought,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: [
+          'A vertical, collapsible timeline that reveals an agent\'s reasoning as a series of connected steps. Composed of `ChainOfThought` (root) wrapping `ChainOfThoughtStep` items, each with a `ChainOfThoughtTrigger`, `ChainOfThoughtContent`, and one or more `ChainOfThoughtItem`s.',
+          '**When to use:** to surface multi-step reasoning, tool calls, or research progress behind an assistant response, letting users expand each step on demand.',
+          '**How to use:** map each reasoning step to a `ChainOfThoughtStep` (mark the final one with `isLast`); put the summary in `ChainOfThoughtTrigger` and the detail inside `ChainOfThoughtContent` / `ChainOfThoughtItem`.',
+          '**Placement:** above or within an assistant message, typically before the final answer.',
+        ].join('\n\n'),
+      },
+      controls: { exclude: ['use:eventListener'] },
+    },
+  },
+  argTypes: {
+    children: {
+      control: false,
+      description: 'The `ChainOfThoughtStep` items that make up the timeline.',
+    },
+    class: {
+      control: 'text',
+      description: 'Extra classes for the root wrapper.',
+    },
+  },
+  args: {},
+  render: (args) => (
+    <ChainOfThought {...args}>
+      <ChainOfThoughtStep>
+        <ChainOfThoughtTrigger>Understanding the question</ChainOfThoughtTrigger>
+        <ChainOfThoughtContent>
+          <ChainOfThoughtItem>
+            The user is asking about reactive programming concepts in SolidJS.
+          </ChainOfThoughtItem>
+        </ChainOfThoughtContent>
+      </ChainOfThoughtStep>
+      <ChainOfThoughtStep isLast>
+        <ChainOfThoughtTrigger>Formulating response</ChainOfThoughtTrigger>
+        <ChainOfThoughtContent>
+          <ChainOfThoughtItem>
+            Combining insights from documentation and examples into a clear answer.
+          </ChainOfThoughtItem>
+        </ChainOfThoughtContent>
+      </ChainOfThoughtStep>
+    </ChainOfThought>
+  ),
+} satisfies Meta<typeof ChainOfThought>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import {
+  ChainOfThought, ChainOfThoughtStep, ChainOfThoughtTrigger,
+  ChainOfThoughtContent, ChainOfThoughtItem,
+} from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — expand the steps to reveal each reasoning item. */
+export const Playground: Story = {
+  ...src(`<ChainOfThought>
+  <ChainOfThoughtStep>
+    <ChainOfThoughtTrigger>Understanding the question</ChainOfThoughtTrigger>
+    <ChainOfThoughtContent>
+      <ChainOfThoughtItem>The user is asking about SolidJS reactivity.</ChainOfThoughtItem>
+    </ChainOfThoughtContent>
+  </ChainOfThoughtStep>
+  <ChainOfThoughtStep isLast>
+    <ChainOfThoughtTrigger>Formulating response</ChainOfThoughtTrigger>
+    <ChainOfThoughtContent>
+      <ChainOfThoughtItem>Combining insights into a clear answer.</ChainOfThoughtItem>
+    </ChainOfThoughtContent>
+  </ChainOfThoughtStep>
+</ChainOfThought>`),
+};
+
+export const SingleStep: Story = {
+  render: () => (
+    <ChainOfThought>
+      <ChainOfThoughtStep isLast>
+        <ChainOfThoughtTrigger>Analyzing the question</ChainOfThoughtTrigger>
+        <ChainOfThoughtContent>
+          <ChainOfThoughtItem>
+            Breaking down the user's query into key concepts and identifying relevant knowledge areas.
+          </ChainOfThoughtItem>
+        </ChainOfThoughtContent>
+      </ChainOfThoughtStep>
+    </ChainOfThought>
+  ),
+  ...src(`<ChainOfThought>
+  <ChainOfThoughtStep isLast>
+    <ChainOfThoughtTrigger>Analyzing the question</ChainOfThoughtTrigger>
+    <ChainOfThoughtContent>
+      <ChainOfThoughtItem>Breaking down the query into key concepts.</ChainOfThoughtItem>
+    </ChainOfThoughtContent>
+  </ChainOfThoughtStep>
+</ChainOfThought>`),
+};
+
+export const MultipleSteps: Story = {
+  render: () => (
+    <ChainOfThought>
+      <ChainOfThoughtStep>
+        <ChainOfThoughtTrigger>Understanding the question</ChainOfThoughtTrigger>
+        <ChainOfThoughtContent>
+          <ChainOfThoughtItem>
+            The user is asking about reactive programming concepts in SolidJS.
+          </ChainOfThoughtItem>
+        </ChainOfThoughtContent>
+      </ChainOfThoughtStep>
+      <ChainOfThoughtStep>
+        <ChainOfThoughtTrigger>Searching knowledge base</ChainOfThoughtTrigger>
+        <ChainOfThoughtContent>
+          <ChainOfThoughtItem>
+            Found 3 relevant documents about SolidJS signals and reactivity.
+          </ChainOfThoughtItem>
+        </ChainOfThoughtContent>
+      </ChainOfThoughtStep>
+      <ChainOfThoughtStep isLast>
+        <ChainOfThoughtTrigger>Formulating response</ChainOfThoughtTrigger>
+        <ChainOfThoughtContent>
+          <ChainOfThoughtItem>
+            Combining insights from documentation and examples to create a comprehensive answer.
+          </ChainOfThoughtItem>
+        </ChainOfThoughtContent>
+      </ChainOfThoughtStep>
+    </ChainOfThought>
+  ),
+  ...src(`<ChainOfThought>
+  <ChainOfThoughtStep>
+    <ChainOfThoughtTrigger>Understanding the question</ChainOfThoughtTrigger>
+    <ChainOfThoughtContent>
+      <ChainOfThoughtItem>The user is asking about SolidJS reactivity.</ChainOfThoughtItem>
+    </ChainOfThoughtContent>
+  </ChainOfThoughtStep>
+  <ChainOfThoughtStep>
+    <ChainOfThoughtTrigger>Searching knowledge base</ChainOfThoughtTrigger>
+    <ChainOfThoughtContent>
+      <ChainOfThoughtItem>Found 3 relevant documents.</ChainOfThoughtItem>
+    </ChainOfThoughtContent>
+  </ChainOfThoughtStep>
+  <ChainOfThoughtStep isLast>
+    <ChainOfThoughtTrigger>Formulating response</ChainOfThoughtTrigger>
+    <ChainOfThoughtContent>
+      <ChainOfThoughtItem>Combining insights into a clear answer.</ChainOfThoughtItem>
+    </ChainOfThoughtContent>
+  </ChainOfThoughtStep>
+</ChainOfThought>`),
+};
+
+export const WithCustomIcons: Story = {
+  render: () => (
+    <ChainOfThought>
+      <ChainOfThoughtStep>
+        <ChainOfThoughtTrigger
+          leftIcon={
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="11" cy="11" r="8" />
+              <line x1="21" y1="21" x2="16.65" y2="16.65" />
+            </svg>
+          }
+        >
+          Searching documents
+        </ChainOfThoughtTrigger>
+        <ChainOfThoughtContent>
+          <ChainOfThoughtItem>Found 5 relevant results.</ChainOfThoughtItem>
+        </ChainOfThoughtContent>
+      </ChainOfThoughtStep>
+      <ChainOfThoughtStep isLast>
+        <ChainOfThoughtTrigger
+          leftIcon={
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+          }
+        >
+          Analysis complete
+        </ChainOfThoughtTrigger>
+        <ChainOfThoughtContent>
+          <ChainOfThoughtItem>All sources have been analyzed and synthesized.</ChainOfThoughtItem>
+        </ChainOfThoughtContent>
+      </ChainOfThoughtStep>
+    </ChainOfThought>
+  ),
+  ...src(`<ChainOfThought>
+  <ChainOfThoughtStep>
+    <ChainOfThoughtTrigger leftIcon={<SearchIcon />}>Searching documents</ChainOfThoughtTrigger>
+    <ChainOfThoughtContent>
+      <ChainOfThoughtItem>Found 5 relevant results.</ChainOfThoughtItem>
+    </ChainOfThoughtContent>
+  </ChainOfThoughtStep>
+  <ChainOfThoughtStep isLast>
+    <ChainOfThoughtTrigger leftIcon={<CheckIcon />}>Analysis complete</ChainOfThoughtTrigger>
+    <ChainOfThoughtContent>
+      <ChainOfThoughtItem>All sources analyzed and synthesized.</ChainOfThoughtItem>
+    </ChainOfThoughtContent>
+  </ChainOfThoughtStep>
+</ChainOfThought>`),
+};