@kitn.ai/ui 0.14.1

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

@@ -0,0 +1,211 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import {
+  ChainOfThought,
+  ChainOfThoughtStep,
+  ChainOfThoughtTrigger,
+  ChainOfThoughtContent,
+  ChainOfThoughtItem,
+} from './chain-of-thought';
+import { componentDescription } from '../stories/docs/element-controls';
+
+const meta = {
+  title: 'Solid (Advanced)/Elements/ChainOfThought',
+  component: ChainOfThought,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: componentDescription([
+        '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.',
+      ]),
+      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 '@kitn.ai/ui';`;
+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>`),
+};

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-meta 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,187 @@
+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';
+import { componentDescription } from '../stories/docs/element-controls';
+
+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: 'Solid (Advanced)/Elements/ChatContainer',
+  component: ChatContainerRoot,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: componentDescription([
+        '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.',
+      ]),
+      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 '@kitn.ai/ui';`;
+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,82 @@
+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"
+        // Keyboard users must be able to scroll the conversation even when no
+        // message contains a focusable control (WCAG 2.1.1 — axe
+        // `scrollable-region-focusable`).
+        tabindex={0}
+        {...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">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">Tags</div>
+          <For each={local.availableTags}>
+            {(tag) => (
+              <DropdownItem onSelect={() => local.onScopeChange({ tags: [tag] })}>{tag}</DropdownItem>
+            )}
+          </For>
+        </Show>
+      </DropdownContent>
+    </Dropdown>
+  );
+}