@kitn.ai/ui 0.16.0 → 0.18.0

package/src/components/prompt-suggestion.tsx

@@ -1,20 +1,30 @@
 import { type JSX, Show, splitProps } from 'solid-js';
 import { cn } from '../utils/cn';
 import { Button } from '../ui/button';
+import { renderIcon } from '../ui/icon';
 
 export interface PromptSuggestionProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
   children: JSX.Element | string;
   variant?: 'outline' | 'ghost' | 'default';
-  size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm';
+  /** Row height for the `list` layout: `'md'` (default) or `'lg'` for taller
+   *  rows (more vertical padding). Chips/block/highlight are unaffected. */
+  size?: 'md' | 'lg';
+  /** Optional leading icon (named icon, image URL/data-URI, or text). */
+  icon?: string;
   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;
+  /** Render as a full-width "Ideas for you" list row: a leading icon, a
+   *  left-aligned label, and a hover background. Like `block`, but keeps the
+   *  leading icon. Ignored in highlight mode. */
+  list?: boolean;
 }
 
 function PromptSuggestion(props: PromptSuggestionProps) {
-  const [local, rest] = splitProps(props, ['children', 'variant', 'size', 'class', 'highlight', 'block']);
+  const [local, rest] = splitProps(props, ['children', 'variant', 'size', 'class', 'icon', 'highlight', 'block', 'list']);
+  const Icon = () => <Show when={local.icon}>{renderIcon(local.icon, { class: 'size-3.5 shrink-0' })}</Show>;
 
   const isHighlightMode = () => local.highlight !== undefined && local.highlight.trim() !== '';
   const content = () => typeof local.children === 'string' ? local.children : '';
@@ -24,29 +34,51 @@ function PromptSuggestion(props: PromptSuggestionProps) {
       when={isHighlightMode()}
       fallback={
         <Show
-          when={local.block}
+          when={local.list}
           fallback={
-            <Button
-              variant={local.variant ?? 'outline'}
-              size={local.size ?? 'lg'}
-              class={cn('rounded-full', local.class)}
-              {...rest}
+            <Show
+              when={local.block}
+              fallback={
+                <Button
+                  variant={local.variant ?? 'outline'}
+                  size="lg"
+                  class={cn('rounded-full', local.class)}
+                  {...rest}
+                >
+                  <Icon />
+                  {local.children}
+                </Button>
+              }
             >
-              {local.children}
-            </Button>
+              <Button
+                variant={local.variant ?? 'outline'}
+                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>
           }
         >
           <Button
-            variant={local.variant ?? 'outline'}
-            size={local.size ?? 'md'}
+            variant={local.variant ?? 'ghost'}
+            size="md"
             class={cn(
-              'h-auto w-full cursor-pointer justify-start rounded-xl px-4 py-2.5',
+              'group h-auto w-full cursor-pointer items-center justify-start gap-2.5 rounded-xl px-3',
+              local.size === 'lg' ? 'py-3.5' : 'py-2.5',
               'text-left text-sm leading-snug whitespace-normal text-pretty',
+              'hover:bg-accent',
               local.class,
             )}
             {...rest}
           >
-            {local.children}
+            <Icon />
+            <span class="min-w-0 flex-1">{local.children}</span>
           </Button>
         </Show>
       }
@@ -56,7 +88,7 @@ function PromptSuggestion(props: PromptSuggestionProps) {
         fallback={
           <Button
             variant={local.variant ?? 'ghost'}
-            size={local.size ?? 'sm'}
+            size="sm"
             class={cn(
               'w-full cursor-pointer justify-start rounded-xl py-2',
               'hover:bg-accent',
@@ -70,7 +102,7 @@ function PromptSuggestion(props: PromptSuggestionProps) {
       >
         <Button
           variant={local.variant ?? 'ghost'}
-          size={local.size ?? 'sm'}
+          size="sm"
           class={cn(
             'w-full cursor-pointer justify-start gap-0 rounded-xl py-2',
             'hover:bg-accent',

package/src/components/reasoning.tsx

@@ -1,4 +1,4 @@
-import { type JSX, splitProps, createSignal, createContext, useContext, createEffect, onCleanup, Show } from 'solid-js';
+import { type JSX, type Accessor, splitProps, createSignal, createContext, useContext, createEffect, onCleanup, Show } from 'solid-js';
 import { cn } from '../utils/cn';
 import { ChevronDown } from 'lucide-solid';
 import { Markdown } from './markdown';
@@ -7,8 +7,14 @@ import { observeContentHeight } from '../primitives/use-resize-observer';
 interface ReasoningContextValue {
   isOpen: () => boolean;
   onOpenChange: (open: boolean) => void;
+  disabled: () => boolean;
 }
 
+/** Imperative open controller, handed to a parent (the kai-reasoning facade) via
+ *  `controllerRef` so it can drive/observe open state — mirrors
+ *  CollapsibleController/HoverCardController. */
+export interface ReasoningController { open: Accessor<boolean>; setOpen: (v: boolean) => void; }
+
 const ReasoningContext = createContext<ReasoningContextValue>();
 
 function useReasoningContext() {
@@ -25,19 +31,30 @@ export interface ReasoningProps {
   children: JSX.Element;
   class?: string;
   open?: boolean;
+  /** Initial open state (uncontrolled seed). */
+  defaultOpen?: boolean;
   onOpenChange?: (open: boolean) => void;
   isStreaming?: boolean;
+  /** Gate the trigger — programmatic control via the controller still works. */
+  disabled?: boolean;
+  /** Receive the open controller (open accessor + setOpen) once mounted. */
+  controllerRef?: (api: ReasoningController) => void;
 }
 
 function Reasoning(props: ReasoningProps) {
-  const [local] = splitProps(props, ['children', 'class', 'open', 'onOpenChange', 'isStreaming']);
-  const [internalOpen, setInternalOpen] = createSignal(false);
+  const [local] = splitProps(props, ['children', 'class', 'open', 'defaultOpen', 'onOpenChange', 'isStreaming', 'disabled', 'controllerRef']);
+  const [internalOpen, setInternalOpen] = createSignal(local.defaultOpen ?? false);
   const [wasAutoOpened, setWasAutoOpened] = createSignal(false);
 
   const isControlled = () => local.open !== undefined;
   const isOpen = () => (isControlled() ? local.open! : internalOpen());
+  const disabled = () => !!local.disabled;
 
+  // The single open-mutate path, shared by the trigger and the imperative
+  // controller. In controlled mode we don't touch internal state; the consumer
+  // reflects via the `open` prop and observes via onOpenChange.
   const handleOpenChange = (newOpen: boolean) => {
+    if (isOpen() === newOpen) return;
     if (!isControlled()) {
       setInternalOpen(newOpen);
     }
@@ -56,8 +73,13 @@ function Reasoning(props: ReasoningProps) {
     }
   });
 
+  // Hand the controller up once. setOpen routes through handleOpenChange so it
+  // notifies onOpenChange and respects controlled/uncontrolled mode. Not gated
+  // by disabled — the facade's wireDisclosure applies disabled-gating itself.
+  local.controllerRef?.({ open: isOpen, setOpen: handleOpenChange });
+
   return (
-    <ReasoningContext.Provider value={{ isOpen, onOpenChange: handleOpenChange }}>
+    <ReasoningContext.Provider value={{ isOpen, onOpenChange: handleOpenChange, disabled }}>
       <div class={local.class}>{local.children}</div>
     </ReasoningContext.Provider>
   );
@@ -71,12 +93,13 @@ export interface ReasoningTriggerProps extends JSX.ButtonHTMLAttributes<HTMLButt
 
 function ReasoningTrigger(props: ReasoningTriggerProps) {
   const [local, rest] = splitProps(props, ['children', 'class']);
-  const { isOpen, onOpenChange } = useReasoningContext();
+  const { isOpen, onOpenChange, disabled } = useReasoningContext();
 
   return (
     <button
       class={cn('flex cursor-pointer items-center gap-2 text-meta', local.class)}
-      onClick={() => onOpenChange(!isOpen())}
+      disabled={disabled() || undefined}
+      onClick={() => { if (!disabled()) onOpenChange(!isOpen()); }}
       {...rest}
     >
       <span class="text-primary">{local.children}</span>

package/src/components/response-compare-types.ts

@@ -0,0 +1,127 @@
+// Types + pure helpers for the dual-response comparison card (`ResponseCompare` /
+// `<kai-compare>`). A compare presents exactly TWO assistant candidates for the
+// same prompt side-by-side; the user picks the better one (a COMMIT, not a
+// Submit), which the consumer turns into a `(prompt, chosen, rejected)`
+// preference pair. Kept framework-agnostic and DOM-free so it unit-tests in
+// isolation.
+import type { ToolPart } from './tool';
+import type { AttachmentData } from './attachments';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+/** One assistant response in a comparison. Rendered identically to an assistant
+ *  message (reasoning + tools + attachments + markdown content) via `MessageBody`. */
+export interface CompareCandidate {
+  /** Stable id, unique within the pair; echoed back in the selection. */
+  id: string;
+  /** The response text/markdown. */
+  content: string;
+  /** Optional collapsible reasoning block. */
+  reasoning?: { text: string; label?: string };
+  /** Tool-call parts rendered above the content. */
+  tools?: ToolPart[];
+  /** Inline attachment previews rendered above the content. */
+  attachments?: AttachmentData[];
+  /** Optional short column label (e.g. "A" / "B" / "Concise"). */
+  label?: string;
+  /** Optional model name shown as a sub-label. */
+  model?: string;
+  /** When true this candidate is still streaming — its pick control is disabled
+   *  and a per-column shimmer shows until it (and its sibling) settle. */
+  streaming?: boolean;
+}
+
+/** The two-candidate tuple. Enforced at the type level; validated at runtime by
+ *  `normalizeCandidates`. */
+export type ComparePair = [CompareCandidate, CompareCandidate];
+
+/** How the card collapses once the user picks. `'winner'` (default) shows just the
+ *  chosen candidate's body; `'none'` keeps both columns but marks the choice. */
+export type CompareCollapse = 'winner' | 'none';
+
+/** The compare definition (set as the `data` JS property on `<kai-compare>`). */
+export interface ResponseCompareData {
+  /** Optional prompt/question shown above the two columns. */
+  prompt?: string;
+  /** Exactly two candidates: [A, B]. */
+  candidates: ComparePair;
+  /** Collapse behaviour after a pick. Default `'winner'`. */
+  collapse?: CompareCollapse;
+}
+
+/** Emitted (and re-hydratable) when the user picks. The consumer pairs
+ *  `(prompt, chosenId, rejectedIds)` for preference capture / RLHF. */
+export interface CompareSelection {
+  /** The id of the chosen candidate. */
+  chosenId: string;
+  /** The id(s) of the rejected candidate(s) — for a pair, the other one. */
+  rejectedIds: string[];
+  /** Epoch ms when the pick was made. */
+  at?: number;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Pure helpers (unit-tested in isolation).
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Validate + normalize the candidate list. A compare requires EXACTLY two
+ * candidates with unique, non-empty string ids. Returns the usable pair, or an
+ * error message when the definition is unusable (rendered as an inline error /
+ * emitted as a `kai-error`). Modeled on `normalizeOptions`.
+ */
+export function normalizeCandidates(candidates: unknown): {
+  candidates: ComparePair | null;
+  error?: string;
+} {
+  if (!Array.isArray(candidates)) {
+    return { candidates: null, error: "This comparison couldn't be displayed." };
+  }
+  if (candidates.length !== 2) {
+    return {
+      candidates: null,
+      error: `A comparison needs exactly two candidates (got ${candidates.length}).`,
+    };
+  }
+  const out: CompareCandidate[] = [];
+  const seen = new Set<string>();
+  for (const c of candidates) {
+    if (!c || typeof c !== 'object') {
+      return { candidates: null, error: "This comparison couldn't be displayed." };
+    }
+    const cand = c as Partial<CompareCandidate>;
+    if (typeof cand.id !== 'string' || cand.id.length === 0) {
+      return { candidates: null, error: 'Each candidate needs a non-empty id.' };
+    }
+    if (seen.has(cand.id)) {
+      return { candidates: null, error: `Duplicate candidate id "${cand.id}".` };
+    }
+    seen.add(cand.id);
+    out.push({
+      id: cand.id,
+      content: typeof cand.content === 'string' ? cand.content : '',
+      reasoning: cand.reasoning,
+      tools: Array.isArray(cand.tools) ? cand.tools : undefined,
+      attachments: Array.isArray(cand.attachments) ? cand.attachments : undefined,
+      label: typeof cand.label === 'string' ? cand.label : undefined,
+      model: typeof cand.model === 'string' ? cand.model : undefined,
+      streaming: cand.streaming === true,
+    });
+  }
+  return { candidates: [out[0], out[1]] };
+}
+
+/** Build the selection payload for choosing `chosenId` out of the pair (the other
+ *  candidate is the rejected one). Stamps `at` with the current time. */
+export function buildSelection(pair: ComparePair, chosenId: string): CompareSelection {
+  const rejectedIds = pair.filter((c) => c.id !== chosenId).map((c) => c.id);
+  return { chosenId, rejectedIds, at: Date.now() };
+}
+
+/** Whether any candidate in the pair is still streaming (pick stays disabled). */
+export function isAnyStreaming(pair: ComparePair | null): boolean {
+  if (!pair) return false;
+  return pair.some((c) => c.streaming === true);
+}