@kitn.ai/ui 0.15.1 → 0.17.0

package/src/components/confirm-card.tsx

@@ -12,6 +12,7 @@ import {
 import { cn } from '../utils/cn';
 import { Button } from '../ui/button';
 import { Card } from './card';
+import { DismissedStub } from './dismissed-stub';
 import type { CardEnvelope, CardEvent, CardHost, CardResolution } from '../primitives/card-contract';
 import { useCardResolution } from './use-card-resolution';
 import { emitCardEvent } from '../primitives/card-routing';
@@ -208,7 +209,15 @@ export function ConfirmCard(props: ConfirmCardProps): JSX.Element {
     });
   };
 
-  const onDismiss = (): void => emit({ kind: 'dismiss', cardId: local.cardId });
+  // Dismiss: emit the contract `dismiss` AND optimistically flip to a `dismissed`
+  // resolution so the card collapses to its re-openable stub immediately (the host
+  // confirms/overrides via the resolution prop on the next render).
+  const onDismiss = (): void => {
+    if (res.isResolved()) return;
+    emit({ kind: 'dismiss', cardId: local.cardId });
+    res.setLocal({ kind: 'dismissed' });
+  };
+  const onReopen = (): void => emit({ kind: 'reopen', cardId: local.cardId });
 
   let bodyRef: HTMLDivElement | undefined;
 
@@ -229,6 +238,10 @@ export function ConfirmCard(props: ConfirmCardProps): JSX.Element {
           return <Card heading={local.heading} errorMessage="The card failed to render." />;
         }}
       >
+        <Show
+          when={!res.isDeferred()}
+          fallback={<DismissedStub type={CONFIRM_CARD_TYPE} title={local.heading} onReopen={onReopen} />}
+        >
         <Card
           heading={local.heading}
           actions={
@@ -309,6 +322,7 @@ export function ConfirmCard(props: ConfirmCardProps): JSX.Element {
             </Show>
           </div>
         </Card>
+        </Show>
       </ErrorBoundary>
     </Show>
   );

package/src/components/dismissed-stub.tsx

@@ -0,0 +1,80 @@
+import { type JSX, Show } from 'solid-js';
+import { cn } from '../utils/cn';
+import { Button } from '../ui/button';
+import { Card } from './card';
+import { RotateCcw } from 'lucide-solid';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// DismissedStub — the collapsed, re-openable read-only view a card renders once
+// the user has dismissed it (a DEFERRED resolution, not a terminal one). It's a
+// dense `Card` showing "<intent>: <title> — dismissed" + a ghost Reopen button.
+// Pure/presentational: the owning card wires `onReopen` to emit `{kind:'reopen'}`.
+// ─────────────────────────────────────────────────────────────────────────────
+
+/** The card types that render a dismissed stub, mapped to their intent verb. */
+export type DismissedCardType = 'confirm' | 'choice' | 'form' | 'tasks';
+
+const INTENT_LABELS: Record<DismissedCardType, string> = {
+  confirm: 'Proposed',
+  choice: 'Choose',
+  form: 'Form',
+  tasks: 'Tasks',
+};
+
+/** Map a card `type` to its dismissed-stub intent label ("Proposed:", "Choose:",
+ *  "Form:", "Tasks:"). Falls back to a capitalized type for unknown card types. */
+export function stubIntent(type: string): string {
+  const known = INTENT_LABELS[type as DismissedCardType];
+  if (known) return `${known}:`;
+  if (type.length === 0) return 'Card:';
+  return `${type.charAt(0).toUpperCase()}${type.slice(1)}:`;
+}
+
+export interface DismissedStubProps {
+  /** The card type, used to derive the intent label ("Proposed:" etc.). */
+  type: string;
+  /** The card's title/heading; shown after the intent label. Falls back gracefully. */
+  title?: string;
+  /** Re-open handler. The owning card emits `{ kind:'reopen', cardId }`. */
+  onReopen: () => void;
+  /** The Reopen button label. Default 'Reopen'. */
+  reopenLabel?: string;
+  class?: string;
+}
+
+/**
+ * `DismissedStub` — the compact stub a card collapses to after it's been dismissed.
+ * Group-labelled for a11y; the Reopen affordance is a ghost button.
+ */
+export function DismissedStub(props: DismissedStubProps): JSX.Element {
+  const intent = (): string => stubIntent(props.type);
+  const title = (): string => props.title ?? 'this card';
+  const label = (): string => props.reopenLabel ?? 'Reopen';
+  const groupLabel = (): string => `${intent()} ${title()} — dismissed`;
+
+  return (
+    <Card dense class={props.class}>
+      <div
+        role="group"
+        aria-label={groupLabel()}
+        class="flex flex-wrap items-center gap-x-2 gap-y-1"
+      >
+        <span class="min-w-0 text-sm text-muted-foreground">
+          <span class="font-medium text-foreground">{intent()}</span>{' '}
+          <span class="text-foreground">{title()}</span>
+          <span class="text-muted-foreground"> — dismissed</span>
+        </span>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          class={cn('ml-auto gap-1.5')}
+          onClick={() => props.onReopen()}
+        >
+          <RotateCcw size={14} aria-hidden="true" />
+          <Show when={label()}>{label()}</Show>
+        </Button>
+      </div>
+    </Card>
+  );
+}

package/src/components/form.tsx

@@ -14,6 +14,7 @@ import { createStore, produce, unwrap } from 'solid-js/store';
 import { cn } from '../utils/cn';
 import { Button } from '../ui/button';
 import { Card } from './card';
+import { DismissedStub } from './dismissed-stub';
 import {
   validateAgainstSchema,
   type JsonSchema,
@@ -437,11 +438,12 @@ export function Form(props: FormProps): JSX.Element {
     else emit({ kind: 'error', cardId: local.cardId, message: state.message });
   }));
 
-  // Surface the resolved state for host styling.
+  // Surface the resolved state for host styling. Only a `submit` resolution is the
+  // "submitted" state; a deferred `dismissed` (or `expired`) is not.
   createEffect(() => {
     const el = local.hostElement;
     if (!el) return;
-    if (res.isResolved()) el.setAttribute('data-kai-resolved', 'submitted');
+    if (res.resolution()?.kind === 'submit') el.setAttribute('data-kai-resolved', 'submitted');
     else el.removeAttribute('data-kai-resolved');
   });
 
@@ -488,6 +490,15 @@ export function Form(props: FormProps): JSX.Element {
     res.setLocal({ kind: 'submit', data: out });
   };
 
+  // Dismiss: emit `dismiss` AND optimistically flip to a `dismissed` resolution so
+  // the form collapses to its re-openable stub immediately.
+  const onDismiss = (): void => {
+    if (res.isResolved()) return;
+    emit({ kind: 'dismiss', cardId: local.cardId });
+    res.setLocal({ kind: 'dismissed' });
+  };
+  const onReopen = (): void => emit({ kind: 'reopen', cardId: local.cardId });
+
   const actions = createMemo(() => def()['x-kai-actions'] ?? []);
   const submitLabel = () => def()['x-kai-submitLabel'] ?? 'Submit';
   const dismissible = () => def()['x-kai-dismissible'] === true;
@@ -509,6 +520,12 @@ export function Form(props: FormProps): JSX.Element {
           return <Card heading={local.heading} errorMessage="The form failed to render." />;
         }}
       >
+        <Show
+          when={!res.isDeferred()}
+          fallback={
+            <DismissedStub type="form" title={local.heading ?? def().title} onReopen={onReopen} />
+          }
+        >
         <Card
           heading={local.heading ?? def().title}
           description={def().description}
@@ -522,7 +539,7 @@ export function Form(props: FormProps): JSX.Element {
                   <Button
                     type="button"
                     variant="ghost"
-                    onClick={() => emit({ kind: 'dismiss', cardId: local.cardId })}
+                    onClick={onDismiss}
                   >
                     Dismiss
                   </Button>
@@ -575,6 +592,7 @@ export function Form(props: FormProps): JSX.Element {
             </form>
           </Show>
         </Card>
+        </Show>
       </ErrorBoundary>
     </Show>
   );

package/src/components/message.tsx

@@ -5,8 +5,11 @@ import { cn } from "../utils/cn";
 import { Markdown } from "./markdown";
 import { Button } from "../ui/button";
 import { actionIcon, BUILTIN_ACTION_LABEL } from "../ui/action-icons";
-import type { ChatMessageAction, CustomAction } from "../elements/chat-types";
+import type { ChatMessageAction, CustomAction, FeedbackVote } from "../elements/chat-types";
 import { useChatConfig, textClass } from "../primitives/chat-config";
+import { Reasoning, ReasoningTrigger, ReasoningContent } from "./reasoning";
+import { Tool, type ToolPart } from "./tool";
+import { Attachments, Attachment, AttachmentPreview, AttachmentInfo, type AttachmentData } from "./attachments";
 
 // --- Message ---
 
@@ -119,6 +122,13 @@ export interface MessageActionBarProps {
   reveal?: 'always' | 'hover';
   /** Fired with the built-in name or the custom action id when a button is clicked. */
   onAction: (id: string) => void;
+  /** The active feedback vote. When `'like'`/`'dislike'` is set, that button is
+   *  marked pressed (filled) and the OTHER vote button animates out. `undefined`
+   *  shows both. Pure/prop-driven so the bar survives re-renders. */
+  activeFeedback?: FeedbackVote;
+  /** When true, the `copy` button shows its emerald check icon instead of the
+   *  copy glyph (cleared by the owner after ~2s). */
+  copied?: boolean;
   class?: string;
 }
 
@@ -130,12 +140,25 @@ function normalizeAction(a: ChatMessageAction | CustomAction) {
   return { id: a.id, label: a.label, Icon: actionIcon(a.icon) };
 }
 
+/** Is this entry one of the two feedback votes? */
+function feedbackVoteOf(a: ChatMessageAction | CustomAction): FeedbackVote | undefined {
+  return a === 'like' || a === 'dislike' ? a : undefined;
+}
+
 /**
  * The shared message action toolbar. Renders one ghost icon button per entry —
  * built-in names pull their label+icon from the curated registry; custom
  * descriptors use their `label` plus `actionIcon(icon)` (label-only when the
  * icon is unknown or absent). `reveal="hover"` makes the bar fade in on the
  * parent `.group`'s hover.
+ *
+ * Pure/prop-driven: feedback (`activeFeedback`) and copy (`copied`) state are
+ * owned by the parent facade and passed in — the bar holds no internal signals,
+ * so it survives the new-array-per-chunk re-renders of a streaming thread. With
+ * a vote active, the chosen `like`/`dislike` button is marked `aria-pressed` +
+ * filled and the other vote button collapses its width (sliding the active thumb
+ * into its place) via a 0fr↔1fr grid transition. The
+ * `copy` button swaps to an emerald check while `copied`.
  */
 function MessageActionBar(props: MessageActionBarProps) {
   return (
@@ -150,38 +173,156 @@ function MessageActionBar(props: MessageActionBarProps) {
         {(a) => {
           const item = normalizeAction(a);
           const tooltipText = () => (typeof a !== 'string' && a.tooltip) ? a.tooltip : item.label;
+          const vote = feedbackVoteOf(a);
+          // A vote button is the active one when it matches the resolved vote.
+          const isActiveVote = () => vote !== undefined && props.activeFeedback === vote;
+          // The COPY button reflects the copied check.
+          const isCopy = item.id === 'copy';
+          const showCheck = () => isCopy && props.copied === true;
+
           // Factory (not a shared node): each Show branch gets its own Button so
           // the eager DOM node is never referenced from two places.
           const button = () => (
             <Button
               variant="ghost"
               size="icon-sm"
-              class="rounded-full"
+              class={cn('rounded-full', isActiveVote() && 'text-primary')}
               data-action={item.id}
-              aria-label={item.label}
+              aria-label={showCheck() ? 'Copied' : item.label}
+              aria-pressed={vote !== undefined ? isActiveVote() : undefined}
               onClick={() => props.onAction(item.id)}
             >
-              <Show when={item.Icon} fallback={<span class="px-1 text-xs">{item.label}</span>}>
-                {(Icon) => {
-                  const I = Icon();
-                  return <I class="size-3.5" />;
-                }}
+              <Show
+                when={showCheck()}
+                fallback={
+                  <Show when={item.Icon} fallback={<span class="px-1 text-xs">{item.label}</span>}>
+                    {(Icon) => {
+                      const I = Icon();
+                      return <I class={cn('size-3.5', isActiveVote() && 'fill-current')} />;
+                    }}
+                  </Show>
+                }
+              >
+                <Check class="size-3.5 text-emerald-400" />
               </Show>
             </Button>
           );
           // Icon-only buttons get a tooltip; label-only buttons (text already
           // visible) don't.
-          return (
+          const rendered = () => (
             <Show when={item.Icon} fallback={button()}>
               <Tooltip content={tooltipText()}>{button()}</Tooltip>
             </Show>
           );
+
+          // When the OTHER vote is active, this vote button collapses — its WIDTH
+          // animates to zero via a 0fr↔1fr grid so the remaining thumb slides into
+          // its place, while it fades out; it slides + fades back on un-vote. (Kept
+          // mounted-but-collapsed, not unmounted, so the sibling can slide.) No
+          // vote active → both shown; non-vote entries always render.
+          return (
+            <Show when={vote !== undefined} fallback={rendered()}>
+              {(() => {
+                const show = () => props.activeFeedback === undefined || props.activeFeedback === vote;
+                return (
+                  <span
+                    data-feedback-collapsed={show() ? undefined : ''}
+                    class={cn(
+                      'grid transition-[grid-template-columns,opacity] duration-300 ease-out',
+                      show() ? 'grid-cols-[1fr] opacity-100' : 'grid-cols-[0fr] opacity-0',
+                    )}
+                  >
+                    <span class="min-w-0 overflow-hidden">{rendered()}</span>
+                  </span>
+                );
+              })()}
+            </Show>
+          );
         }}
       </For>
     </MessageActions>
   );
 }
 
+// --- MessageBody ---
+
+export interface MessageBodyProps {
+  /** The message text/markdown. */
+  content: string;
+  /** Optional collapsible reasoning block, rendered above the content. */
+  reasoning?: { text: string; label?: string };
+  /** Tool-call parts, rendered above the content. */
+  tools?: ToolPart[];
+  /** Inline attachment previews, rendered above the content. */
+  attachments?: AttachmentData[];
+  /** Whether this is a user message (right-aligned bubble) vs an assistant
+   *  message (full-width transparent). */
+  isUser: boolean;
+  /** Whether the content renders as markdown. */
+  markdown: boolean;
+  /** Action-bar entries — built-in names and/or custom descriptors. When empty
+   *  the bar is not rendered. */
+  actions?: (ChatMessageAction | CustomAction)[];
+  /** `'always'` (default) keeps the bar visible; `'hover'` reveals it on parent
+   *  `.group` hover. */
+  actionsReveal?: 'always' | 'hover';
+  /** Fired with the built-in name or custom id when an action is clicked. */
+  onAction?: (id: string) => void;
+  /** The currently-active feedback vote, so the bar can mark like/dislike and
+   *  hide the other. */
+  activeFeedback?: FeedbackVote;
+  /** When true, the copy button shows its "copied" check icon. */
+  copied?: boolean;
+}
+
+/**
+ * The shared message body: an optional reasoning block, tool calls, inline
+ * attachments, the content bubble, and the action bar — in that order. This is
+ * the single source of truth for how a message renders, consumed by `ChatThread`
+ * (the `<For>` over `messages`), the standalone `<kai-message>` facade, and (in
+ * future) `kai-compare` for each candidate. Pure/prop-driven: all interaction
+ * state (copied, feedback vote) is owned above and passed in.
+ */
+function MessageBody(props: MessageBodyProps) {
+  return (
+    <>
+      <Show when={props.reasoning}>
+        {(r) => (
+          <Reasoning class="mb-2 w-full">
+            <ReasoningTrigger>{r().label ?? 'Reasoning'}</ReasoningTrigger>
+            <ReasoningContent markdown>{r().text}</ReasoningContent>
+          </Reasoning>
+        )}
+      </Show>
+      <For each={props.tools ?? []}>{(tp) => <Tool toolPart={tp} class="mb-2 w-full" />}</For>
+      <Show when={props.attachments?.length}>
+        <Attachments variant="inline" class={props.isUser ? 'mb-2 justify-end' : 'mb-2'}>
+          <For each={props.attachments!}>
+            {(att) => (<Attachment data={att}><AttachmentPreview /><AttachmentInfo /></Attachment>)}
+          </For>
+        </Attachments>
+      </Show>
+      <MessageContent
+        markdown={props.markdown}
+        class={props.isUser
+          ? 'bg-muted text-primary max-w-[85%] rounded-2xl px-4 py-2'
+          : 'bg-transparent p-0'}
+      >
+        {props.content}
+      </MessageContent>
+      <Show when={(props.actions?.length ?? 0) > 0}>
+        <MessageActionBar
+          actions={props.actions!}
+          reveal={props.actionsReveal === 'hover' ? 'hover' : 'always'}
+          activeFeedback={props.activeFeedback}
+          copied={props.copied}
+          onAction={(id) => props.onAction?.(id)}
+        />
+      </Show>
+    </>
+  );
+}
+
 // --- MessageAction ---
 
 export interface MessageActionProps {
@@ -224,4 +365,4 @@ function MessageCopyButton(props: MessageCopyButtonProps) {
   );
 }
 
-export { Message, MessageAvatar, MessageContent, MessageActions, MessageActionBar, MessageAction, MessageCopyButton };
+export { Message, MessageAvatar, MessageContent, MessageActions, MessageActionBar, MessageBody, MessageAction, MessageCopyButton };

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);
+}