@kitn.ai/ui 0.14.1

package/src/components/prompt-suggestion.stories.tsx

@@ -0,0 +1,142 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { fn } from 'storybook/test';
+import { PromptSuggestion } from './prompt-suggestion';
+import { componentDescription } from '../stories/docs/element-controls';
+
+const meta = {
+  title: 'Solid (Advanced)/Elements/PromptSuggestion',
+  component: PromptSuggestion,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: componentDescription([
+        'A clickable suggestion chip built on `Button` — renders as a rounded pill, a full-width list row (`block`), or a search-style row that highlights a matching substring (`highlight`).',
+        '**When to use:** offer the user ready-made prompts to send — empty-state starter questions, follow-up suggestions, or a filtered list of matching prompts as they type.',
+        '**How to use:** pass the prompt text as children and wire `onClick` to submit it. Use `block` for stacked, left-aligned list rows; pass `highlight` to emphasize a matched substring (forces list-row layout). Override `variant`/`size` to restyle.',
+        '**Placement:** chat empty states, below the prompt input as follow-ups, or in a suggestion dropdown.',
+      ]),
+      controls: { exclude: ['use:eventListener'] },
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+      description: 'Suggestion content — the prompt text (or an element).',
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'ghost', 'outline'],
+      description: 'Button visual emphasis. Defaults vary by mode (`outline` pill, `ghost` highlight).',
+      table: { defaultValue: { summary: 'outline' } },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'icon', 'icon-sm'],
+      description: 'Button size preset. Defaults vary by mode.',
+      table: { defaultValue: { summary: 'lg' } },
+    },
+    highlight: {
+      control: 'text',
+      description: 'Substring to emphasize within the text. When set, renders as a list row with the match highlighted.',
+    },
+    block: {
+      control: 'boolean',
+      description: 'Render as a full-width, left-aligned list row that wraps long text instead of a pill. Ignored in highlight mode.',
+      table: { defaultValue: { summary: 'false' } },
+    },
+    onClick: {
+      action: 'click',
+      description: 'Fired when the suggestion is clicked.',
+      table: { category: 'Events' },
+    },
+  },
+  args: {
+    children: 'Tell me about TypeScript',
+    variant: 'outline',
+    block: false,
+    onClick: fn(),
+  },
+  render: (args) => <PromptSuggestion {...args} />,
+} satisfies Meta<typeof PromptSuggestion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { PromptSuggestion } from '@kitn.ai/ui';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — tweak the controls to explore every mode. */
+export const Playground: Story = {
+  ...src(`<PromptSuggestion onClick={() => send('Tell me about TypeScript')}>
+  Tell me about TypeScript
+</PromptSuggestion>`),
+};
+
+export const WithHighlight: Story = {
+  args: { highlight: 'TypeScript', children: 'Tell me about TypeScript generics' },
+  ...src(`<PromptSuggestion highlight="TypeScript">
+  Tell me about TypeScript generics
+</PromptSuggestion>`),
+};
+
+export const Block: Story = {
+  name: 'Block (list idiom)',
+  args: { block: true, children: 'What does being a Catalyst mean for how I work with others?' },
+  ...src(`<PromptSuggestion block>
+  What does being a Catalyst mean for how I work with others?
+</PromptSuggestion>`),
+};
+
+/** A row of pill suggestions (showcase — not driven by controls). */
+export const MultipleSuggestions: Story = {
+  render: () => (
+    <div class="flex flex-wrap gap-2">
+      <PromptSuggestion>What is SolidJS?</PromptSuggestion>
+      <PromptSuggestion>Explain reactive signals</PromptSuggestion>
+      <PromptSuggestion>Compare SolidJS vs React</PromptSuggestion>
+      <PromptSuggestion>Best practices for state management</PromptSuggestion>
+    </div>
+  ),
+  ...src(`<div class="flex flex-wrap gap-2">
+  <PromptSuggestion>What is SolidJS?</PromptSuggestion>
+  <PromptSuggestion>Explain reactive signals</PromptSuggestion>
+  <PromptSuggestion>Compare SolidJS vs React</PromptSuggestion>
+  <PromptSuggestion>Best practices for state management</PromptSuggestion>
+</div>`),
+};
+
+/** Filtered list with a highlighted match (showcase). */
+export const WithHighlightedSearch: Story = {
+  render: () => (
+    <div class="w-72 space-y-1">
+      <PromptSuggestion highlight="solid">How does SolidJS handle reactivity?</PromptSuggestion>
+      <PromptSuggestion highlight="solid">What makes SolidJS fast?</PromptSuggestion>
+      <PromptSuggestion highlight="solid">SolidJS vs Svelte comparison</PromptSuggestion>
+    </div>
+  ),
+  ...src(`<div class="w-72 space-y-1">
+  <PromptSuggestion highlight="solid">How does SolidJS handle reactivity?</PromptSuggestion>
+  <PromptSuggestion highlight="solid">What makes SolidJS fast?</PromptSuggestion>
+  <PromptSuggestion highlight="solid">SolidJS vs Svelte comparison</PromptSuggestion>
+</div>`),
+};
+
+/** Stacked, full-width list rows (showcase). */
+export const BlockList: Story = {
+  name: 'Block list',
+  render: () => (
+    <div class="w-72 flex flex-col gap-1">
+      <PromptSuggestion block>What does being a Catalyst mean for how I work with others?</PromptSuggestion>
+      <PromptSuggestion block>How do my Dominance and Influence styles play off each other?</PromptSuggestion>
+      <PromptSuggestion block>Where might my lower Conscientiousness trip me up?</PromptSuggestion>
+    </div>
+  ),
+  ...src(`<div class="w-72 flex flex-col gap-1">
+  <PromptSuggestion block>What does being a Catalyst mean for how I work with others?</PromptSuggestion>
+  <PromptSuggestion block>How do my Dominance and Influence styles play off each other?</PromptSuggestion>
+  <PromptSuggestion block>Where might my lower Conscientiousness trip me up?</PromptSuggestion>
+</div>`),
+};

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-foreground/70 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-foreground/70 whitespace-pre-wrap">{before}</span>
+      </Show>
+      <span class="text-primary font-medium whitespace-pre-wrap">{matched}</span>
+      <Show when={after}>
+        <span class="text-foreground/70 whitespace-pre-wrap">{after}</span>
+      </Show>
+    </>
+  );
+}
+
+export { PromptSuggestion };

package/src/components/reasoning.stories.tsx

@@ -0,0 +1,140 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { fn } from 'storybook/test';
+import { createSignal } from 'solid-js';
+import { Reasoning, ReasoningTrigger, ReasoningContent } from './reasoning';
+import { componentDescription } from '../stories/docs/element-controls';
+
+const meta = {
+  title: 'Solid (Advanced)/Elements/Reasoning',
+  component: Reasoning,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: componentDescription([
+        '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.',
+      ]),
+      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 '@kitn.ai/ui';`;
+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,156 @@
+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';
+import { observeContentHeight } from '../primitives/use-resize-observer';
+
+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 text-meta', 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 dispose = observeContentHeight(innerRef, () => {
+      if (contentRef && innerRef && isOpen()) {
+        contentRef.style.maxHeight = `${innerRef.scrollHeight}px`;
+      }
+    });
+
+    if (isOpen()) {
+      contentRef.style.maxHeight = `${innerRef.scrollHeight}px`;
+    } else {
+      contentRef.style.maxHeight = '0px';
+    }
+
+    onCleanup(dispose);
+  });
+
+  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 text-body',
+          local.contentClass
+        )}
+      >
+        <Show when={local.markdown} fallback={local.children}>
+          <Markdown content={local.children as string} />
+        </Show>
+      </div>
+    </div>
+  );
+}
+
+export { Reasoning, ReasoningTrigger, ReasoningContent };