@kitnai/chat 0.1.0

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

@@ -0,0 +1,139 @@
+import { type JSX, splitProps, children as resolveChildren, For, Show } from 'solid-js';
+import { cn } from '../utils/cn';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '../ui/collapsible';
+import { ChevronDown, Circle } from 'lucide-solid';
+
+// --- ChainOfThoughtItem ---
+
+export interface ChainOfThoughtItemProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  children: JSX.Element;
+}
+
+function ChainOfThoughtItem(props: ChainOfThoughtItemProps) {
+  const [local, rest] = splitProps(props, ['children', 'class']);
+  return (
+    <div class={cn('text-muted-foreground text-sm', local.class)} {...rest}>
+      {local.children}
+    </div>
+  );
+}
+
+// --- ChainOfThoughtTrigger ---
+
+export interface ChainOfThoughtTriggerProps {
+  children: JSX.Element;
+  class?: string;
+  leftIcon?: JSX.Element;
+  swapIconOnHover?: boolean;
+}
+
+function ChainOfThoughtTrigger(props: ChainOfThoughtTriggerProps) {
+  const swapOnHover = () => props.swapIconOnHover ?? true;
+
+  return (
+    <CollapsibleTrigger
+      class={cn(
+        'group text-muted-foreground hover:text-foreground flex cursor-pointer items-center justify-start gap-1 text-left text-sm transition-colors',
+        props.class
+      )}
+    >
+      <div class="flex items-center gap-2">
+        <Show
+          when={props.leftIcon}
+          fallback={
+            <span class="relative inline-flex size-4 items-center justify-center">
+              <Circle class="size-2 fill-current" />
+            </span>
+          }
+        >
+          <span class="relative inline-flex size-4 items-center justify-center">
+            <span
+              class={cn(
+                'transition-opacity',
+                swapOnHover() && 'group-hover:opacity-0'
+              )}
+            >
+              {props.leftIcon}
+            </span>
+            <Show when={swapOnHover()}>
+              <ChevronDown class="absolute size-4 opacity-0 transition-opacity group-hover:opacity-100 group-data-[state=open]:rotate-180" />
+            </Show>
+          </span>
+        </Show>
+        <span>{props.children}</span>
+      </div>
+      <Show when={!props.leftIcon}>
+        <ChevronDown class="size-4 transition-transform group-data-[state=open]:rotate-180" />
+      </Show>
+    </CollapsibleTrigger>
+  );
+}
+
+// --- ChainOfThoughtContent ---
+
+export interface ChainOfThoughtContentProps {
+  children: JSX.Element;
+  class?: string;
+}
+
+function ChainOfThoughtContent(props: ChainOfThoughtContentProps) {
+  return (
+    <CollapsibleContent
+      class={cn(
+        'text-popover-foreground data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden',
+        props.class
+      )}
+    >
+      <div class="grid grid-cols-[min-content_minmax(0,1fr)] gap-x-4">
+        <div class="bg-primary/20 ml-1.75 h-full w-px group-data-[last=true]:hidden" />
+        <div class="ml-1.75 h-full w-px bg-transparent group-data-[last=false]:hidden" />
+        <div class="mt-2 space-y-2">{props.children}</div>
+      </div>
+    </CollapsibleContent>
+  );
+}
+
+// --- ChainOfThought (Root) ---
+
+export interface ChainOfThoughtProps {
+  children: JSX.Element;
+  class?: string;
+}
+
+function ChainOfThought(props: ChainOfThoughtProps) {
+  return (
+    <div class={cn('space-y-0', props.class)}>
+      {props.children}
+    </div>
+  );
+}
+
+// --- ChainOfThoughtStep ---
+
+export interface ChainOfThoughtStepProps {
+  children: JSX.Element;
+  class?: string;
+  isLast?: boolean;
+}
+
+function ChainOfThoughtStep(props: ChainOfThoughtStepProps) {
+  return (
+    <Collapsible
+      class={cn('group', props.class)}
+      data-last={props.isLast ?? false}
+    >
+      {props.children}
+      <div class="flex justify-start group-data-[last=true]:hidden">
+        <div class="bg-primary/20 ml-1.75 h-4 w-px" />
+      </div>
+    </Collapsible>
+  );
+}
+
+export {
+  ChainOfThought,
+  ChainOfThoughtStep,
+  ChainOfThoughtTrigger,
+  ChainOfThoughtContent,
+  ChainOfThoughtItem,
+};

package/src/components/chat-container.stories.tsx

@@ -0,0 +1,188 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { For } from 'solid-js';
+import { ChatContainerRoot, ChatContainerContent, ChatContainerScrollAnchor } from './chat-container';
+import { Message, MessageAvatar, MessageContent } from './message';
+
+const sampleMessages = [
+  { role: 'user', content: 'What is SolidJS?' },
+  { role: 'assistant', content: '**SolidJS** is a declarative, efficient, and flexible JavaScript library for building user interfaces. Unlike React, it uses fine-grained reactivity with no Virtual DOM, resulting in excellent performance.' },
+  { role: 'user', content: 'How does reactivity work in SolidJS?' },
+  { role: 'assistant', content: `SolidJS uses **signals** as its core reactive primitive. Here's how it works:
+
+1. **Signals** -- Store reactive values that track their dependencies
+2. **Effects** -- Side effects that re-run when their signal dependencies change
+3. **Memos** -- Derived values that cache their results
+
+Unlike React's useState, SolidJS signals are getter/setter pairs that update only the specific DOM nodes that depend on them.` },
+  { role: 'user', content: 'Can you show me an example?' },
+  { role: 'assistant', content: `Here's a simple counter example:
+
+\`\`\`typescript
+import { createSignal } from 'solid-js';
+
+function Counter() {
+  const [count, setCount] = createSignal(0);
+  return (
+    <button onClick={() => setCount(c => c + 1)}>
+      Count: {count()}
+    </button>
+  );
+}
+\`\`\`
+
+Notice that \`count\` is called as a function -- this is how SolidJS tracks which parts of the UI depend on which signals.` },
+];
+
+const meta = {
+  title: 'Components/ChatContainer',
+  component: ChatContainerRoot,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: [
+          'A scrollable message viewport that automatically sticks to the bottom as new content streams in. Composed of `ChatContainerRoot` (the scroll region), `ChatContainerContent` (the message stack), and `ChatContainerScrollAnchor` (the stick-to-bottom target).',
+          '**When to use:** as the conversation transcript region of a chat UI, where messages append over time and the view should follow the latest output unless the user scrolls up.',
+          '**How to use:** wrap your message list in `ChatContainerRoot`, place messages inside `ChatContainerContent`, and end with `ChatContainerScrollAnchor`. Give the root a fixed height so it can scroll.',
+          '**Placement:** the central pane of a chat layout, between the header and the prompt input.',
+        ].join('\n\n'),
+      },
+      controls: { exclude: ['use:eventListener'] },
+    },
+  },
+  argTypes: {
+    children: {
+      control: false,
+      description: 'The container content — typically `ChatContainerContent` with messages.',
+    },
+    class: {
+      control: 'text',
+      description: 'Extra classes for the scroll region (set a height so it can scroll).',
+    },
+  },
+  args: {
+    class: 'h-full flex-col p-4',
+  },
+  render: (args) => (
+    <div class="h-[500px] w-full max-w-2xl border border-border rounded-lg overflow-hidden">
+      <ChatContainerRoot {...args}>
+        <ChatContainerContent class="space-y-4">
+          <For each={sampleMessages}>
+            {(msg) => (
+              <Message>
+                <MessageAvatar src="" fallback={msg.role === 'user' ? 'U' : 'AI'} alt={msg.role} />
+                <MessageContent markdown={msg.role === 'assistant'}>{msg.content}</MessageContent>
+              </Message>
+            )}
+          </For>
+          <ChatContainerScrollAnchor />
+        </ChatContainerContent>
+      </ChatContainerRoot>
+    </div>
+  ),
+} satisfies Meta<typeof ChatContainerRoot>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import {
+  ChatContainerRoot, ChatContainerContent, ChatContainerScrollAnchor,
+  Message, MessageAvatar, MessageContent,
+} from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — a full transcript inside the stick-to-bottom container. */
+export const Playground: Story = {
+  ...src(`<div class="h-[500px]">
+  <ChatContainerRoot class="h-full flex-col p-4">
+    <ChatContainerContent class="space-y-4">
+      <For each={messages}>
+        {(msg) => (
+          <Message>
+            <MessageAvatar src="" fallback={msg.role === 'user' ? 'U' : 'AI'} alt={msg.role} />
+            <MessageContent markdown={msg.role === 'assistant'}>{msg.content}</MessageContent>
+          </Message>
+        )}
+      </For>
+      <ChatContainerScrollAnchor />
+    </ChatContainerContent>
+  </ChatContainerRoot>
+</div>`),
+};
+
+export const FullChat: Story = {
+  render: () => (
+    <div class="h-[500px] w-full max-w-2xl border border-border rounded-lg overflow-hidden">
+      <ChatContainerRoot class="h-full flex-col p-4">
+        <ChatContainerContent class="space-y-4">
+          <For each={sampleMessages}>
+            {(msg) => (
+              <Message>
+                <MessageAvatar src="" fallback={msg.role === 'user' ? 'U' : 'AI'} alt={msg.role} />
+                <MessageContent markdown={msg.role === 'assistant'}>{msg.content}</MessageContent>
+              </Message>
+            )}
+          </For>
+          <ChatContainerScrollAnchor />
+        </ChatContainerContent>
+      </ChatContainerRoot>
+    </div>
+  ),
+  ...src(`<ChatContainerRoot class="h-full flex-col p-4">
+  <ChatContainerContent class="space-y-4">
+    <For each={messages}>
+      {(msg) => (
+        <Message>
+          <MessageAvatar src="" fallback={msg.role === 'user' ? 'U' : 'AI'} alt={msg.role} />
+          <MessageContent markdown={msg.role === 'assistant'}>{msg.content}</MessageContent>
+        </Message>
+      )}
+    </For>
+    <ChatContainerScrollAnchor />
+  </ChatContainerContent>
+</ChatContainerRoot>`),
+};
+
+export const LongConversation: Story = {
+  render: () => {
+    const manyMessages = Array.from({ length: 20 }, (_, i) => ({
+      role: i % 2 === 0 ? 'user' : 'assistant',
+      content: i % 2 === 0
+        ? `This is user message number ${Math.floor(i / 2) + 1}. It asks a question about the topic.`
+        : `This is the assistant's response to message ${Math.floor(i / 2) + 1}. It provides a detailed explanation with relevant examples and context.`,
+    }));
+    return (
+      <div class="h-[400px] w-full max-w-2xl border border-border rounded-lg overflow-hidden">
+        <ChatContainerRoot class="h-full flex-col p-4">
+          <ChatContainerContent class="space-y-4">
+            <For each={manyMessages}>
+              {(msg) => (
+                <Message>
+                  <MessageAvatar src="" fallback={msg.role === 'user' ? 'U' : 'AI'} alt={msg.role} />
+                  <MessageContent>{msg.content}</MessageContent>
+                </Message>
+              )}
+            </For>
+            <ChatContainerScrollAnchor />
+          </ChatContainerContent>
+        </ChatContainerRoot>
+      </div>
+    );
+  },
+  ...src(`<ChatContainerRoot class="h-full flex-col p-4">
+  <ChatContainerContent class="space-y-4">
+    <For each={manyMessages}>
+      {(msg) => (
+        <Message>
+          <MessageAvatar src="" fallback={msg.role === 'user' ? 'U' : 'AI'} alt={msg.role} />
+          <MessageContent>{msg.content}</MessageContent>
+        </Message>
+      )}
+    </For>
+    <ChatContainerScrollAnchor />
+  </ChatContainerContent>
+</ChatContainerRoot>`),
+};

package/src/components/chat-container.tsx

@@ -0,0 +1,78 @@
+import { type JSX, splitProps, createContext, useContext } from 'solid-js';
+import { cn } from '../utils/cn';
+import { useStickToBottom } from '../primitives/use-stick-to-bottom';
+
+interface ChatContainerContextValue {
+  isAtBottom: () => boolean;
+  scrollToBottom: (behavior?: ScrollBehavior) => void;
+}
+
+const ChatContainerContext = createContext<ChatContainerContextValue>();
+
+export function useChatContainer() {
+  const ctx = useContext(ChatContainerContext);
+  if (!ctx) throw new Error('useChatContainer must be used within ChatContainer');
+  return ctx;
+}
+
+// --- ChatContainerRoot ---
+
+export interface ChatContainerRootProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  children: JSX.Element;
+}
+
+function ChatContainerRoot(props: ChatContainerRootProps) {
+  const [local, rest] = splitProps(props, ['children', 'class']);
+  const { ref, isAtBottom, scrollToBottom } = useStickToBottom();
+  return (
+    <ChatContainerContext.Provider value={{ isAtBottom, scrollToBottom }}>
+      <div
+        ref={ref}
+        class={cn('flex flex-col overflow-y-auto', local.class)}
+        role="log"
+        {...rest}
+      >
+        {local.children}
+      </div>
+    </ChatContainerContext.Provider>
+  );
+}
+
+// --- ChatContainerContent ---
+
+export interface ChatContainerContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  children: JSX.Element;
+}
+
+function ChatContainerContent(props: ChatContainerContentProps) {
+  const [local, rest] = splitProps(props, ['children', 'class']);
+  return (
+    <div class={cn('flex w-full flex-col', local.class)} {...rest}>
+      {local.children}
+    </div>
+  );
+}
+
+// --- ChatContainerScrollAnchor ---
+
+export interface ChatContainerScrollAnchorProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  ref?: HTMLDivElement | ((el: HTMLDivElement) => void);
+}
+
+function ChatContainerScrollAnchor(props: ChatContainerScrollAnchorProps) {
+  const [local, rest] = splitProps(props, ['class']);
+  return (
+    <div
+      class={cn('h-px w-full shrink-0 scroll-mt-4', local.class)}
+      aria-hidden="true"
+      {...rest}
+    />
+  );
+}
+
+export {
+  ChatContainerRoot as ChatContainer,
+  ChatContainerRoot,
+  ChatContainerContent,
+  ChatContainerScrollAnchor,
+};

package/src/components/chat-scope-picker.tsx

@@ -0,0 +1,47 @@
+import { splitProps, Show, For } from 'solid-js';
+import { cn } from '../utils/cn';
+import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from '../ui/dropdown';
+import { Button } from '../ui/button';
+import type { SearchFilters } from '../types';
+
+export interface ChatScopePickerProps {
+  currentLabel: string;
+  onScopeChange: (filters: SearchFilters | undefined) => void;
+  availableAuthors?: string[];
+  availableTags?: string[];
+  class?: string;
+}
+
+export function ChatScopePicker(props: ChatScopePickerProps) {
+  const [local] = splitProps(props, ['currentLabel', 'onScopeChange', 'availableAuthors', 'availableTags', 'class']);
+  return (
+    <Dropdown>
+      <DropdownTrigger as={(triggerProps: any) => (
+        <Button variant="ghost" size="sm" class={cn('gap-1 text-xs', local.class)} {...triggerProps}>
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
+          {local.currentLabel}
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
+        </Button>
+      )} />
+      <DropdownContent class="min-w-[180px]">
+        <DropdownItem onSelect={() => local.onScopeChange(undefined)}>All Content</DropdownItem>
+        <Show when={local.availableAuthors?.length}>
+          <div class="px-2 py-1 text-[10px] uppercase tracking-wider text-muted-foreground/60">Authors</div>
+          <For each={local.availableAuthors}>
+            {(author) => (
+              <DropdownItem onSelect={() => local.onScopeChange({ authors: [author] })}>{author}</DropdownItem>
+            )}
+          </For>
+        </Show>
+        <Show when={local.availableTags?.length}>
+          <div class="px-2 py-1 text-[10px] uppercase tracking-wider text-muted-foreground/60">Tags</div>
+          <For each={local.availableTags}>
+            {(tag) => (
+              <DropdownItem onSelect={() => local.onScopeChange({ tags: [tag] })}>{tag}</DropdownItem>
+            )}
+          </For>
+        </Show>
+      </DropdownContent>
+    </Dropdown>
+  );
+}

package/src/components/checkpoint.stories.tsx

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { fn } from 'storybook/test';
+import { Checkpoint, CheckpointIcon, CheckpointTrigger } from './checkpoint';
+
+const meta = {
+  title: 'Components/Checkpoint',
+  component: Checkpoint,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: [
+          'An inline marker that lets a user restore the conversation to a saved point. Composed of `Checkpoint` (row + separator) wrapping a `CheckpointIcon` and a `CheckpointTrigger` button.',
+          '**When to use:** to mark a restorable state in a transcript — e.g. before an edit or a branching action — so the user can revert to it.',
+          '**How to use:** place a `CheckpointIcon` and a `CheckpointTrigger` inside `Checkpoint`. Give the trigger an `onClick` handler and an optional `tooltip`; pass custom SVG children to `CheckpointIcon` to override the default flag.',
+          '**Placement:** between messages in a chat transcript, as a thin separator-style row.',
+        ].join('\n\n'),
+      },
+      controls: { exclude: ['use:eventListener'] },
+    },
+  },
+  argTypes: {
+    children: {
+      control: false,
+      description: 'The `CheckpointIcon` and `CheckpointTrigger` contents.',
+    },
+    class: {
+      control: 'text',
+      description: 'Extra classes for the checkpoint row.',
+    },
+  },
+  args: {},
+  render: (args) => (
+    <div class="max-w-md">
+      <Checkpoint {...args}>
+        <CheckpointIcon />
+        <CheckpointTrigger tooltip="Restore to this point" onClick={fn()}>
+          Restore
+        </CheckpointTrigger>
+      </Checkpoint>
+    </div>
+  ),
+} satisfies Meta<typeof Checkpoint>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { Checkpoint, CheckpointIcon, CheckpointTrigger } from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — the default flag icon with a restore trigger. */
+export const Playground: Story = {
+  ...src(`<Checkpoint>
+  <CheckpointIcon />
+  <CheckpointTrigger tooltip="Restore to this point" onClick={handleRestore}>
+    Restore
+  </CheckpointTrigger>
+</Checkpoint>`),
+};
+
+export const WithCustomIcon: Story = {
+  render: () => (
+    <div class="max-w-md">
+      <Checkpoint>
+        <CheckpointIcon>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4">
+            <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
+            <path d="M12 6v6l4 2" />
+          </svg>
+        </CheckpointIcon>
+        <CheckpointTrigger tooltip="Go back to this checkpoint" onClick={fn()}>
+          Revert to checkpoint
+        </CheckpointTrigger>
+      </Checkpoint>
+    </div>
+  ),
+  ...src(`<Checkpoint>
+  <CheckpointIcon>
+    <ClockIcon class="size-4" />
+  </CheckpointIcon>
+  <CheckpointTrigger tooltip="Go back to this checkpoint" onClick={handleRevert}>
+    Revert to checkpoint
+  </CheckpointTrigger>
+</Checkpoint>`),
+};
+
+export const NoTooltip: Story = {
+  render: () => (
+    <div class="max-w-md">
+      <Checkpoint>
+        <CheckpointIcon />
+        <CheckpointTrigger onClick={fn()}>Restore</CheckpointTrigger>
+      </Checkpoint>
+    </div>
+  ),
+  ...src(`<Checkpoint>
+  <CheckpointIcon />
+  <CheckpointTrigger onClick={handleRestore}>Restore</CheckpointTrigger>
+</Checkpoint>`),
+};

package/src/components/checkpoint.tsx

@@ -0,0 +1,81 @@
+import { type JSX, Show, splitProps } from 'solid-js';
+import { cn } from '../utils/cn';
+import { Button } from '../ui/button';
+import { Tooltip } from '../ui/tooltip';
+import { Separator } from '../ui/separator';
+
+export interface CheckpointProps extends JSX.HTMLAttributes<HTMLDivElement> {}
+
+export function Checkpoint(props: CheckpointProps) {
+  const [local, rest] = splitProps(props, ['class', 'children']);
+  return (
+    <div
+      class={cn(
+        'flex items-center gap-0.5 overflow-hidden text-muted-foreground',
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+      <Separator />
+    </div>
+  );
+}
+
+export interface CheckpointIconProps {
+  class?: string;
+  children?: JSX.Element;
+}
+
+export function CheckpointIcon(props: CheckpointIconProps) {
+  return (
+    <Show
+      when={!props.children}
+      fallback={props.children}
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        class={cn('size-4 shrink-0', props.class)}
+      >
+        <path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z" />
+      </svg>
+    </Show>
+  );
+}
+
+export interface CheckpointTriggerProps {
+  tooltip?: string;
+  onClick?: () => void;
+  children?: JSX.Element;
+  class?: string;
+  variant?: 'ghost' | 'default' | 'outline';
+  size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm';
+}
+
+export function CheckpointTrigger(props: CheckpointTriggerProps) {
+  const variant = () => props.variant ?? 'ghost';
+  const size = () => props.size ?? 'sm';
+
+  const button = (
+    <Button
+      variant={variant()}
+      size={size()}
+      type="button"
+      onClick={props.onClick}
+      class={props.class}
+    >
+      {props.children}
+    </Button>
+  );
+
+  return (
+    <Show when={props.tooltip} fallback={button}>
+      <Tooltip content={props.tooltip!}>{button}</Tooltip>
+    </Show>
+  );
+}