@kitnai/chat 0.1.0

package/src/components/prompt-suggestion.tsx

@@ -0,0 +1,115 @@
+import { type JSX, Show, splitProps } from 'solid-js';
+import { cn } from '../utils/cn';
+import { Button } from '../ui/button';
+
+export interface PromptSuggestionProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: JSX.Element | string;
+  variant?: 'outline' | 'ghost' | 'default';
+  size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm';
+  highlight?: string;
+  /** Render as a full-width, left-aligned list row (the "suggested questions"
+   *  idiom) instead of a rounded pill. Wraps long text. Ignored in highlight
+   *  mode, which is always a list row. */
+  block?: boolean;
+}
+
+function PromptSuggestion(props: PromptSuggestionProps) {
+  const [local, rest] = splitProps(props, ['children', 'variant', 'size', 'class', 'highlight', 'block']);
+
+  const isHighlightMode = () => local.highlight !== undefined && local.highlight.trim() !== '';
+  const content = () => typeof local.children === 'string' ? local.children : '';
+
+  return (
+    <Show
+      when={isHighlightMode()}
+      fallback={
+        <Show
+          when={local.block}
+          fallback={
+            <Button
+              variant={local.variant ?? 'outline'}
+              size={local.size ?? 'lg'}
+              class={cn('rounded-full', local.class)}
+              {...rest}
+            >
+              {local.children}
+            </Button>
+          }
+        >
+          <Button
+            variant={local.variant ?? 'outline'}
+            size={local.size ?? 'md'}
+            class={cn(
+              'h-auto w-full cursor-pointer justify-start rounded-xl px-4 py-2.5',
+              'text-left text-sm leading-snug whitespace-normal text-pretty',
+              local.class,
+            )}
+            {...rest}
+          >
+            {local.children}
+          </Button>
+        </Show>
+      }
+    >
+      <Show
+        when={content()}
+        fallback={
+          <Button
+            variant={local.variant ?? 'ghost'}
+            size={local.size ?? 'sm'}
+            class={cn(
+              'w-full cursor-pointer justify-start rounded-xl py-2',
+              'hover:bg-accent',
+              local.class
+            )}
+            {...rest}
+          >
+            {local.children}
+          </Button>
+        }
+      >
+        <Button
+          variant={local.variant ?? 'ghost'}
+          size={local.size ?? 'sm'}
+          class={cn(
+            'w-full cursor-pointer justify-start gap-0 rounded-xl py-2',
+            'hover:bg-accent',
+            local.class
+          )}
+          {...rest}
+        >
+          {renderHighlighted(content(), local.highlight!)}
+        </Button>
+      </Show>
+    </Show>
+  );
+}
+
+function renderHighlighted(text: string, highlight: string) {
+  const trimmed = highlight.trim();
+  const textLower = text.toLowerCase();
+  const highlightLower = trimmed.toLowerCase();
+  const index = textLower.indexOf(highlightLower);
+
+  if (index === -1) {
+    return <span class="text-muted-foreground whitespace-pre-wrap">{text}</span>;
+  }
+
+  const before = text.substring(0, index);
+  const matched = text.substring(index, index + highlightLower.length);
+  const after = text.substring(index + matched.length);
+
+  return (
+    <>
+      <Show when={before}>
+        <span class="text-muted-foreground whitespace-pre-wrap">{before}</span>
+      </Show>
+      <span class="text-primary font-medium whitespace-pre-wrap">{matched}</span>
+      <Show when={after}>
+        <span class="text-muted-foreground whitespace-pre-wrap">{after}</span>
+      </Show>
+    </>
+  );
+}
+
+export { PromptSuggestion };

package/src/components/reasoning.stories.tsx

@@ -0,0 +1,141 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { fn } from 'storybook/test';
+import { createSignal } from 'solid-js';
+import { Reasoning, ReasoningTrigger, ReasoningContent } from './reasoning';
+
+const meta = {
+  title: 'Components/Reasoning',
+  component: Reasoning,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: [
+          'A collapsible disclosure for a model\'s thinking/reasoning. Compose `Reasoning` (root) with `ReasoningTrigger` (the toggle) and `ReasoningContent` (the body, with optional markdown).',
+          '**When to use:** to surface an assistant\'s chain-of-thought or scratch reasoning that should be available but collapsed by default. It can auto-open while streaming and auto-close when streaming ends.',
+          '**How to use:** wrap a trigger and content in `Reasoning`. Leave it uncontrolled, or drive it with `open` + `onOpenChange`. Set `isStreaming` to auto-open during generation. Pass `markdown` on `ReasoningContent` to render a markdown string.',
+          '**Placement:** inside or above an assistant message, before the final answer.',
+        ].join('\n\n'),
+      },
+      controls: { exclude: ['use:eventListener'] },
+    },
+  },
+  argTypes: {
+    open: {
+      control: 'boolean',
+      description: 'Controlled open state. Omit for uncontrolled behavior.',
+    },
+    isStreaming: {
+      control: 'boolean',
+      description: 'When true, auto-opens the disclosure; auto-closes when it returns to false.',
+      table: { defaultValue: { summary: 'false' } },
+    },
+    onOpenChange: {
+      action: 'openChange',
+      description: 'Fired with the next open state when the trigger is toggled.',
+      table: { category: 'Events' },
+    },
+    children: { control: false, description: 'Trigger and content composition.' },
+  },
+  args: {
+    isStreaming: false,
+    onOpenChange: fn(),
+  },
+  render: (args) => (
+    <Reasoning {...args}>
+      <ReasoningTrigger>View reasoning</ReasoningTrigger>
+      <ReasoningContent>
+        <p>The user is asking about reactive programming. Let me break down the key concepts of signals, effects, and memos in SolidJS.</p>
+      </ReasoningContent>
+    </Reasoning>
+  ),
+} satisfies Meta<typeof Reasoning>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { Reasoning, ReasoningTrigger, ReasoningContent } from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — toggle `open` / `isStreaming` via the controls. */
+export const Playground: Story = {
+  ...src(`<Reasoning>
+  <ReasoningTrigger>View reasoning</ReasoningTrigger>
+  <ReasoningContent>
+    <p>Let me break down signals, effects, and memos in SolidJS.</p>
+  </ReasoningContent>
+</Reasoning>`),
+};
+
+/** Content rendered from a markdown string. */
+export const WithMarkdown: Story = {
+  render: (args: Parameters<NonNullable<Story['render']>>[0]) => (
+    <Reasoning {...args}>
+      <ReasoningTrigger>View reasoning</ReasoningTrigger>
+      <ReasoningContent markdown>
+        {'The user wants to understand **reactive primitives**.\n\n- `createSignal` for state\n- `createEffect` for side effects\n- `createMemo` for derived values'}
+      </ReasoningContent>
+    </Reasoning>
+  ),
+  ...src(`<Reasoning>
+  <ReasoningTrigger>View reasoning</ReasoningTrigger>
+  <ReasoningContent markdown>
+    {'The user wants **reactive primitives**.\\n\\n- \`createSignal\`\\n- \`createEffect\`\\n- \`createMemo\`'}
+  </ReasoningContent>
+</Reasoning>`),
+};
+
+/** Controlled via `open` + `onOpenChange`, starting open (showcase). */
+export const Controlled: Story = {
+  render: () => {
+    const [open, setOpen] = createSignal(true);
+    return (
+      <Reasoning open={open()} onOpenChange={setOpen}>
+        <ReasoningTrigger>Thinking process</ReasoningTrigger>
+        <ReasoningContent>
+          <p>This is a controlled reasoning component that starts open.</p>
+        </ReasoningContent>
+      </Reasoning>
+    );
+  },
+  ...src(`const [open, setOpen] = createSignal(true);
+
+<Reasoning open={open()} onOpenChange={setOpen}>
+  <ReasoningTrigger>Thinking process</ReasoningTrigger>
+  <ReasoningContent>
+    <p>This is a controlled reasoning component that starts open.</p>
+  </ReasoningContent>
+</Reasoning>`),
+};
+
+/** Auto-opens while streaming, auto-closes when it ends (showcase). */
+export const Streaming: Story = {
+  render: () => {
+    const [streaming, setStreaming] = createSignal(true);
+    return (
+      <div class="space-y-4">
+        <button
+          class="rounded bg-primary px-3 py-1 text-sm text-primary-foreground"
+          onClick={() => setStreaming((s) => !s)}
+        >
+          {streaming() ? 'Stop streaming' : 'Start streaming'}
+        </button>
+        <Reasoning isStreaming={streaming()}>
+          <ReasoningTrigger>Thinking...</ReasoningTrigger>
+          <ReasoningContent>
+            <p>Auto-opens during streaming and auto-closes when streaming ends.</p>
+          </ReasoningContent>
+        </Reasoning>
+      </div>
+    );
+  },
+  ...src(`<Reasoning isStreaming={streaming()}>
+  <ReasoningTrigger>Thinking...</ReasoningTrigger>
+  <ReasoningContent>
+    <p>Auto-opens during streaming and auto-closes when streaming ends.</p>
+  </ReasoningContent>
+</Reasoning>`),
+};

package/src/components/reasoning.tsx

@@ -0,0 +1,157 @@
+import { type JSX, splitProps, createSignal, createContext, useContext, createEffect, onCleanup, Show } from 'solid-js';
+import { cn } from '../utils/cn';
+import { ChevronDown } from 'lucide-solid';
+import { Markdown } from './markdown';
+
+interface ReasoningContextValue {
+  isOpen: () => boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const ReasoningContext = createContext<ReasoningContextValue>();
+
+function useReasoningContext() {
+  const context = useContext(ReasoningContext);
+  if (!context) {
+    throw new Error('useReasoningContext must be used within a Reasoning provider');
+  }
+  return context;
+}
+
+// --- Reasoning (Root) ---
+
+export interface ReasoningProps {
+  children: JSX.Element;
+  class?: string;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  isStreaming?: boolean;
+}
+
+function Reasoning(props: ReasoningProps) {
+  const [local] = splitProps(props, ['children', 'class', 'open', 'onOpenChange', 'isStreaming']);
+  const [internalOpen, setInternalOpen] = createSignal(false);
+  const [wasAutoOpened, setWasAutoOpened] = createSignal(false);
+
+  const isControlled = () => local.open !== undefined;
+  const isOpen = () => (isControlled() ? local.open! : internalOpen());
+
+  const handleOpenChange = (newOpen: boolean) => {
+    if (!isControlled()) {
+      setInternalOpen(newOpen);
+    }
+    local.onOpenChange?.(newOpen);
+  };
+
+  createEffect(() => {
+    const streaming = local.isStreaming;
+    if (streaming && !wasAutoOpened()) {
+      if (!isControlled()) setInternalOpen(true);
+      setWasAutoOpened(true);
+    }
+    if (!streaming && wasAutoOpened()) {
+      if (!isControlled()) setInternalOpen(false);
+      setWasAutoOpened(false);
+    }
+  });
+
+  return (
+    <ReasoningContext.Provider value={{ isOpen, onOpenChange: handleOpenChange }}>
+      <div class={local.class}>{local.children}</div>
+    </ReasoningContext.Provider>
+  );
+}
+
+// --- ReasoningTrigger ---
+
+export interface ReasoningTriggerProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: JSX.Element;
+}
+
+function ReasoningTrigger(props: ReasoningTriggerProps) {
+  const [local, rest] = splitProps(props, ['children', 'class']);
+  const { isOpen, onOpenChange } = useReasoningContext();
+
+  return (
+    <button
+      class={cn('flex cursor-pointer items-center gap-2', local.class)}
+      onClick={() => onOpenChange(!isOpen())}
+      {...rest}
+    >
+      <span class="text-primary">{local.children}</span>
+      <div
+        class={cn(
+          'transform transition-transform',
+          isOpen() ? 'rotate-180' : ''
+        )}
+      >
+        <ChevronDown class="size-4" />
+      </div>
+    </button>
+  );
+}
+
+// --- ReasoningContent ---
+
+export interface ReasoningContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  children: JSX.Element;
+  markdown?: boolean;
+  contentClass?: string;
+}
+
+function ReasoningContent(props: ReasoningContentProps) {
+  const [local, rest] = splitProps(props, ['children', 'class', 'contentClass', 'markdown']);
+  const { isOpen } = useReasoningContext();
+
+  let contentRef: HTMLDivElement | undefined;
+  let innerRef: HTMLDivElement | undefined;
+
+  createEffect(() => {
+    if (!contentRef || !innerRef) return;
+
+    const observer = new ResizeObserver(() => {
+      if (contentRef && innerRef && isOpen()) {
+        contentRef.style.maxHeight = `${innerRef.scrollHeight}px`;
+      }
+    });
+
+    observer.observe(innerRef);
+
+    if (isOpen()) {
+      contentRef.style.maxHeight = `${innerRef.scrollHeight}px`;
+    } else {
+      contentRef.style.maxHeight = '0px';
+    }
+
+    onCleanup(() => observer.disconnect());
+  });
+
+  return (
+    <div
+      ref={contentRef}
+      class={cn(
+        'overflow-hidden transition-[max-height] duration-150 ease-out',
+        local.class
+      )}
+      style={{ 'max-height': '0px' }}
+      {...rest}
+    >
+      <div
+        ref={innerRef}
+        class={cn(
+          // Markdown content is styled by the token-based `.chat-markdown` (see
+          // Markdown component), which themes via design tokens — so no Tailwind
+          // `prose`/`dark:prose-invert` is needed (those wouldn't follow a scoped theme).
+          'text-muted-foreground',
+          local.contentClass
+        )}
+      >
+        <Show when={local.markdown} fallback={local.children}>
+          <Markdown content={local.children as string} />
+        </Show>
+      </div>
+    </div>
+  );
+}
+
+export { Reasoning, ReasoningTrigger, ReasoningContent };

package/src/components/response-stream.tsx

@@ -0,0 +1,103 @@
+import { splitProps, Show, For, createEffect, on } from 'solid-js';
+import { cn } from '../utils/cn';
+import { useTextStream } from '../primitives/use-text-stream';
+
+export type Mode = 'typewriter' | 'fade';
+
+export interface ResponseStreamProps {
+  textStream: string | AsyncIterable<string>;
+  mode?: Mode;
+  speed?: number;
+  class?: string;
+  onComplete?: () => void;
+  as?: string;
+  fadeDuration?: number;
+  segmentDelay?: number;
+  characterChunkSize?: number;
+}
+
+function ResponseStream(props: ResponseStreamProps) {
+  const [local] = splitProps(props, [
+    'textStream', 'mode', 'speed', 'class', 'onComplete',
+    'as', 'fadeDuration', 'segmentDelay', 'characterChunkSize',
+  ]);
+
+  const mode = () => local.mode ?? 'typewriter';
+  const speed = () => local.speed ?? 20;
+
+  const stream = useTextStream({
+    mode: mode(),
+    speed: speed(),
+    characterChunkSize: local.characterChunkSize,
+    fadeDuration: local.fadeDuration,
+  });
+
+  createEffect(on(
+    () => local.textStream,
+    (source) => {
+      if (source) stream.startStreaming(source);
+    }
+  ));
+
+  createEffect(on(
+    () => stream.isComplete(),
+    (complete) => {
+      if (complete) local.onComplete?.();
+    }
+  ));
+
+  const fadeStyle = () => {
+    const dur = local.fadeDuration ?? Math.round(1000 / Math.sqrt(Math.min(100, Math.max(1, speed()))));
+    return `
+      @keyframes fadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+      .fade-segment {
+        display: inline-block;
+        opacity: 0;
+        animation: fadeIn ${dur}ms ease-out forwards;
+      }
+      .fade-segment-space {
+        white-space: pre;
+      }
+    `;
+  };
+
+  const segDelay = () => {
+    if (typeof local.segmentDelay === 'number') return Math.max(0, local.segmentDelay);
+    const normalizedSpeed = Math.min(100, Math.max(1, speed()));
+    return Math.max(1, Math.round(100 / Math.sqrt(normalizedSpeed)));
+  };
+
+  return (
+    <div class={local.class}>
+      <Show
+        when={mode() === 'fade'}
+        fallback={<>{stream.displayedText()}</>}
+      >
+        <style>{fadeStyle()}</style>
+        <div class="relative">
+          <For each={stream.segments()}>
+            {(segment, idx) => {
+              const isWhitespace = () => /^\s+$/.test(segment.text);
+              return (
+                <span
+                  class={cn(
+                    'fade-segment',
+                    isWhitespace() && 'fade-segment-space'
+                  )}
+                  style={{ 'animation-delay': `${idx() * segDelay()}ms` }}
+                >
+                  {segment.text}
+                </span>
+              );
+            }}
+          </For>
+        </div>
+      </Show>
+    </div>
+  );
+}
+
+export { ResponseStream };

package/src/components/scroll-button.stories.tsx

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { For } from 'solid-js';
+import { ScrollButton } from './scroll-button';
+import { ChatContainerRoot, ChatContainerContent } from './chat-container';
+
+/**
+ * `ScrollButton` reads scroll state from the surrounding `ChatContainerRoot`
+ * context, so every story wraps it in a scrollable container. It is hidden
+ * (faded out) while pinned to the bottom and appears once you scroll up.
+ */
+function ScrollDemo(props: { variant?: 'outline' | 'ghost' | 'default'; size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm'; class?: string }) {
+  return (
+    <div class="relative h-64 w-80 overflow-hidden rounded-lg border">
+      <ChatContainerRoot class="h-full p-4">
+        <ChatContainerContent class="gap-2">
+          <For each={Array.from({ length: 20 })}>
+            {(_, i) => (
+              <div class="rounded-md bg-muted/40 px-3 py-2 text-sm">Message {i() + 1}</div>
+            )}
+          </For>
+        </ChatContainerContent>
+        {/* ScrollButton must live INSIDE ChatContainerRoot (it reads that
+            context); it's absolutely positioned relative to the outer .relative
+            box, so it stays pinned and doesn't scroll with the content. */}
+        <div class="absolute inset-x-0 bottom-3 flex justify-center">
+          <ScrollButton variant={props.variant} size={props.size} class={props.class} />
+        </div>
+      </ChatContainerRoot>
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Components/ScrollButton',
+  component: ScrollButton,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: [
+          'A floating "scroll to bottom" button wired to the enclosing `ChatContainerRoot`. It calls `scrollToBottom()` on click and animates in/out based on `isAtBottom`.',
+          '**When to use:** in a scrollable message log, to let the user jump back to the latest message after scrolling up. It hides itself automatically while pinned to the bottom.',
+          '**How to use:** render it inside a `ChatContainerRoot` (it consumes that context). Position it with absolute layout and optionally restyle via `variant`, `size`, and `class`.',
+          '**Placement:** overlaid near the bottom-center of the chat message area.',
+        ].join('\n\n'),
+      },
+      controls: { exclude: ['use:eventListener'] },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'ghost', 'outline'],
+      description: 'Underlying button visual emphasis.',
+      table: { defaultValue: { summary: 'outline' } },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'icon', 'icon-sm'],
+      description: 'Underlying button size preset.',
+      table: { defaultValue: { summary: 'sm' } },
+    },
+    class: {
+      control: 'text',
+      description: 'Additional classes merged onto the button.',
+    },
+  },
+  args: {
+    variant: 'outline',
+    size: 'sm',
+  },
+  render: (args) => <ScrollDemo variant={args.variant} size={args.size} class={args.class} />,
+} satisfies Meta<typeof ScrollButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { ScrollButton, ChatContainerRoot, ChatContainerContent } from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — scroll up to reveal the button; tweak `variant`/`size`. */
+export const Playground: Story = {
+  ...src(`<div class="relative">
+  <ChatContainerRoot class="h-full overflow-y-auto">
+    <ChatContainerContent>{/* messages */}</ChatContainerContent>
+    {/* inside the Root (reads its context); absolutely positioned to stay pinned */}
+    <div class="absolute inset-x-0 bottom-3 flex justify-center">
+      <ScrollButton />
+    </div>
+  </ChatContainerRoot>
+</div>`),
+};
+
+/** Ghost variant overlaid in a chat area (showcase). */
+export const Ghost: Story = {
+  args: { variant: 'ghost' },
+  ...src(`<ScrollButton variant="ghost" />`),
+};

package/src/components/scroll-button.tsx

@@ -0,0 +1,33 @@
+import { cn } from '../utils/cn';
+import { Button } from '../ui/button';
+import { useChatContainer } from './chat-container';
+import { ChevronDown } from 'lucide-solid';
+
+export interface ScrollButtonProps {
+  class?: string;
+  variant?: 'outline' | 'ghost' | 'default';
+  size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm';
+}
+
+function ScrollButton(props: ScrollButtonProps) {
+  const { isAtBottom, scrollToBottom } = useChatContainer();
+
+  return (
+    <Button
+      variant={props.variant ?? 'outline'}
+      size={props.size ?? 'sm'}
+      class={cn(
+        'h-10 w-10 rounded-full transition-all duration-150 ease-out',
+        !isAtBottom()
+          ? 'translate-y-0 scale-100 opacity-100'
+          : 'pointer-events-none translate-y-4 scale-95 opacity-0',
+        props.class
+      )}
+      onClick={() => scrollToBottom()}
+    >
+      <ChevronDown class="h-5 w-5" />
+    </Button>
+  );
+}
+
+export { ScrollButton };