@lostgradient/cinder 0.2.0 → 0.3.0

package/src/components/chat/message/chat-message.svelte

@@ -2,6 +2,8 @@
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
   import type { Message, ToolCallPair } from '../conversation-model.ts';
+  import type { MessagePartOverride } from './chat-message-parts.ts';
+  import type { StepInfo } from '../utilities/types.ts';
 
   /**
    * Role labels for display purposes.
@@ -32,6 +34,12 @@
     actions?: Snippet;
     /** Status indicator snippet (sending, delivered, error) */
     status?: Snippet;
+    /**
+     * Per-part render override. Forwarded to the parts renderer; lets a consumer
+     * replace the rendering of an individual body part while delegating the rest
+     * to the built-ins (inversion of control — see the renderer).
+     */
+    messagePart?: MessagePartOverride | undefined;
     /** Show built-in copy button alongside custom actions (default: true) */
     showDefaultActions?: boolean;
     /** Whether this message is currently streaming */
@@ -44,20 +52,45 @@
     onretry?: ((messageId: string) => void) | undefined;
     /** Called when user edits a message (fires with new content). Only applies to user messages. */
     onedit?: ((event: { messageId: string; content: string }) => void) | undefined;
+    /** The set of approved tool call IDs for deriving approval state. */
+    approvedToolCallIds?: ReadonlySet<string> | undefined;
+    /** The set of denied tool call IDs for deriving denial state. */
+    deniedToolCallIds?: ReadonlySet<string> | undefined;
+    /** Called when the user approves an action-required tool call. */
+    onapprove?: ((toolCallId: string) => void) | undefined;
+    /** Called when the user denies an action-required tool call. */
+    ondeny?: ((toolCallId: string) => void) | undefined;
+    /**
+     * Reasoning text to surface as a collapsible block before the body.
+     * When present and non-empty, a `reasoning` part is prepended to the derived parts.
+     */
+    reasoning?: string | undefined;
+    /**
+     * Step list to surface as a stepper before the body.
+     * Each entry maps to one `step` part in the derived parts.
+     */
+    steps?: ReadonlyArray<StepInfo> | undefined;
+    /** Whether the reasoning disclosure is expanded. Owned by the container's reasoning state. */
+    reasoningExpanded?: boolean | undefined;
+    /** Called when the reasoning disclosure toggle is activated. */
+    onreasoning?: (() => void) | undefined;
+    /**
+     * Suggestion labels to surface as clickable chips after the body.
+     * Each entry maps to one `suggestion` part in the derived parts.
+     */
+    suggestions?: ReadonlyArray<string> | undefined;
+    /** Called when the user selects a suggestion chip. */
+    onsuggestionselect?: ((label: string) => void) | undefined;
   };
 </script>
 
 <script lang="ts">
   import { classNames } from '../../../utilities/class-names.ts';
-  import { stringify } from '../../../utilities/stringify.ts';
-  import { getMessageText, getMessageParts } from '../utilities/utilities.js';
+  import { deriveMessageParts, getMessageText } from '../utilities/utilities.js';
   import Pencil from 'lucide-svelte/icons/pencil';
   import RotateCcw from 'lucide-svelte/icons/rotate-ccw';
   import CopyButton from '../../copy-button/copy-button.svelte';
-  import MessageContent from './message-content.svelte';
-  import MessageAttachments from './message-attachments.svelte';
-  import ToolCallGroup from './tool-call-group.svelte';
-  import ToolPayloadCode from './tool-payload-code.svelte';
+  import ChatMessagePartsRenderer from './chat-message-parts-renderer.svelte';
 
   let {
     message,
@@ -67,12 +100,23 @@
     searchMatch = false,
     actions,
     status,
+    messagePart,
     showDefaultActions = true,
     streaming = false,
     overrideContent,
     onexpandedchange,
     onretry,
     onedit,
+    approvedToolCallIds,
+    deniedToolCallIds,
+    onapprove,
+    ondeny,
+    reasoning,
+    steps,
+    suggestions,
+    reasoningExpanded = false,
+    onreasoning,
+    onsuggestionselect,
     tabindex,
     ...rest
   }: ChatMessageProps = $props();
@@ -118,51 +162,56 @@
   );
   const isFailed = $derived(deliveryStatus === 'failed');
 
-  // Derived values for content processing
-  const parts = $derived(getMessageParts(message));
+  // Derived values for content processing. `textContent` drives message chrome
+  // (copy, edit, the Show more/less control) — the rendered body itself flows
+  // through deriveMessageParts + the parts renderer below.
   const textContent = $derived(getMessageText(message));
   const roleLabel = $derived(ROLE_LABELS[message.role] ?? message.role);
 
-  // Filter image parts from content
-  const imageParts = $derived(parts.filter((part) => part.type === 'image'));
-  const hasImages = $derived(imageParts.length > 0);
-
-  // Role detection
+  // Role detection — kept for wrapper-level layout + a11y (data-tool-pair,
+  // aria-label). The body branches that used to live here are now derived parts.
   const isToolCall = $derived(message.role === 'tool-call');
-  const isToolResult = $derived(message.role === 'tool-result');
 
-  // Find matching tool pair for tool-call messages
+  // Find matching tool pair for tool-call messages. Resolved here (the container
+  // hands down the pairs for this message) and threaded into deriveMessageParts
+  // so the bridge stays pure; also gates the data-tool-pair wrapper styling.
   const toolPair = $derived.by(() => {
     if (!isToolCall || !message.toolCall) return null;
     return toolCallPairs.find((pair) => pair.call.id === message.toolCall?.id) ?? null;
   });
 
-  // Check result outcome for styling + branching.
-  const isToolResultError = $derived(isToolResult && message.toolResult?.outcome === 'error');
-  const isToolResultActionRequired = $derived(
-    isToolResult && message.toolResult?.outcome === 'action_required',
+  // The cinder-owned render parts for this message. The streaming override and
+  // expanded state are resolved into the parts here so the renderer + part
+  // components stay dumb (no override/streaming plumbing leaks into them).
+  // C3: approval id sets are threaded in so tool-approval parts derive their
+  // `approved` state without mutating the transcript.
+  const messageParts = $derived(
+    deriveMessageParts(message, {
+      toolCallPair: toolPair ?? undefined,
+      overrideContent,
+      streaming,
+      expanded,
+      approvedToolCallIds,
+      deniedToolCallIds,
+      // C4: reasoning and steps are UI-only overlays derived from metadata or
+      // explicit per-message props; never written back to the transcript.
+      reasoning,
+      steps,
+      // C5: suggestions are UI-only overlays; never written back to the transcript.
+      suggestions,
+    }),
   );
 
-  // Safe stringify for tool result content (handles circular refs, etc.).
-  // - error: prefer the structured error's message (a ToolError OBJECT, so
-  //   render `.message`, not the object — which would stringify to
-  //   `[object Object]`).
-  // - action_required: surface the requested action's message (matching
-  //   ToolCallGroup), falling back to a neutral label so it's never blank.
-  // - otherwise: stringify the content.
-  const formattedToolResult = $derived.by(() => {
-    if (!isToolResult || !message.toolResult) return null;
-    const { outcome, content, error, action } = message.toolResult;
-
-    if (outcome === 'error' && error) {
-      return error.message;
-    }
-    if (outcome === 'action_required') {
-      return action?.message ?? 'This tool call requires action.';
-    }
+  // Whether this message has a markdown body part — gates the Show more/less
+  // control (a tool-call/tool-result message has no markdown body to truncate).
+  const hasMarkdownBody = $derived(messageParts.some((part) => part.type === 'markdown'));
 
-    return stringify(content);
-  });
+  // Split the parts so the rendered DOM matches the historical structure: body
+  // parts (text/markdown/tool) live inside `.chat-message-body`, image parts
+  // render as a sibling AFTER it — exactly where MessageAttachments used to sit,
+  // so the flex layout and spacing are unchanged.
+  const bodyParts = $derived(messageParts.filter((part) => part.type !== 'image'));
+  const imageParts = $derived(messageParts.filter((part) => part.type === 'image'));
 
   // Content truncation threshold (characters)
   const TRUNCATE_THRESHOLD = 500;
@@ -204,27 +253,9 @@
     </header>
 
     <div class="chat-message-body">
-      {#if isToolCall && toolPair}
-        <ToolCallGroup pair={toolPair} {expanded} ontoggle={toggleExpanded} />
-      {:else if isToolResult && formattedToolResult !== null}
-        <div
-          class="chat-message-tool-result"
-          data-error={isToolResultError || undefined}
-          data-action-required={isToolResultActionRequired || undefined}
-        >
-          {#if isToolResultError}
-            <div class="chat-message-tool-error" role="alert">
-              {formattedToolResult}
-            </div>
-          {:else if isToolResultActionRequired}
-            <div class="chat-message-tool-action" role="status">
-              {formattedToolResult}
-            </div>
-          {:else}
-            <ToolPayloadCode code={formattedToolResult} />
-          {/if}
-        </div>
-      {:else if isEditing}
+      {#if isEditing}
+        <!-- Edit mode replaces the body parts with a textarea, but attachments
+             stay visible (they were never inside the editable body). -->
         <div class="chat-message-edit">
           <!-- svelte-ignore a11y_autofocus -->
           <textarea
@@ -245,15 +276,25 @@
           </div>
         </div>
       {:else}
-        <MessageContent
-          content={textContent}
+        <!-- Replaces the historical role-branch body: every body render shape
+             (tool call, tool result, markdown text) flows through the cinder-
+             owned parts spine. The renderer keeps stable DOM identity across
+             streaming updates via per-part keys, so the markdown body never
+             remounts as its text grows. Image parts render below, as a sibling
+             of this body div, matching the historical structure. -->
+        <ChatMessagePartsRenderer
+          parts={bodyParts}
+          {messagePart}
           {expanded}
-          {streaming}
-          {overrideContent}
-          threshold={TRUNCATE_THRESHOLD}
+          ontoggle={toggleExpanded}
+          {onapprove}
+          {ondeny}
+          {reasoningExpanded}
+          {onreasoning}
+          {onsuggestionselect}
         />
 
-        {#if textContent.length > TRUNCATE_THRESHOLD}
+        {#if hasMarkdownBody && textContent.length > TRUNCATE_THRESHOLD}
           <button type="button" class="chat-message-expand" onclick={toggleExpanded}>
             {expanded ? 'Show less' : 'Show more'}
           </button>
@@ -261,8 +302,10 @@
       {/if}
     </div>
 
-    {#if hasImages}
-      <MessageAttachments images={imageParts} />
+    {#if imageParts.length > 0}
+      <!-- Images render through the grouped default path (the attachment grid
+           lays out by total count); they do not flow through `messagePart`. -->
+      <ChatMessagePartsRenderer parts={imageParts} />
     {/if}
 
     {#if isFailed && onretry}
@@ -536,17 +579,8 @@
     line-height: 1.6;
   }
 
-  .chat-message-tool-result {
-    inline-size: 100%;
-  }
-
-  .chat-message-tool-error {
-    padding: var(--cinder-space-3);
-    background: var(--cinder-color-danger-bg);
-    border-radius: var(--cinder-radius-md);
-    color: var(--cinder-color-danger-fg);
-    font-size: var(--cinder-text-sm);
-  }
+  /* Tool-result body styling moved to tool-result-part.svelte alongside its
+     markup (the parts spine now owns that body shape). */
 
   .chat-message-expand {
     display: inline-flex;

package/src/components/chat/message/chat-read-receipt.svelte

@@ -0,0 +1,115 @@
+<script lang="ts" module>
+  /**
+   * Per-message read receipt badge for the Chat component.
+   *
+   * Rendered inside the `messageStatus` snippet slot of the user's message bubble.
+   * Shows delivery/read state with BOTH an icon AND a text label (never color-only).
+   *
+   * Three states:
+   *   - `sent`      — single check icon + "Sent" label (text-muted)
+   *   - `delivered` — double-check icon + "Delivered" label (text-muted)
+   *   - `read`      — double-check icon + "Read" label (accent color)
+   *
+   * Accessibility:
+   *   - The wrapper has aria-label="Sent" / "Delivered" / "Read by …" (full text).
+   *   - Icon is aria-hidden="true".
+   *   - Visible text label is exposed in the accessibility tree (no aria-hidden).
+   *   - data-cinder-receipt-status=sent|delivered|read on the wrapper element.
+   *
+   * NOT shown on non-user messages — the caller gates this based on message.role.
+   */
+  import type { ReadReceipt } from '../chat.types.ts';
+
+  export type ChatReadReceiptProps = {
+    /** The receipt to render. */
+    receipt: ReadReceipt;
+  };
+</script>
+
+<script lang="ts">
+  import Check from 'lucide-svelte/icons/check';
+  import CheckCheck from 'lucide-svelte/icons/check-check';
+
+  let { receipt }: ChatReadReceiptProps = $props();
+
+  const status = $derived(receipt.status);
+
+  const ariaLabel = $derived.by(() => {
+    if (status === 'sent') return 'Sent';
+    if (status === 'delivered') return 'Delivered';
+
+    // read
+    const readers = receipt.readBy;
+    if (readers && readers.length > 0) {
+      return `Read by ${readers.join(', ')}`;
+    }
+    return 'Read';
+  });
+
+  const visibleLabel = $derived(
+    status === 'sent' ? 'Sent' : status === 'delivered' ? 'Delivered' : 'Read',
+  );
+
+  const isDoubleCheck = $derived(status === 'delivered' || status === 'read');
+</script>
+
+<!--
+  role="img" + aria-label makes the badge a single named, opaque widget so screen
+  readers announce the FULL status ("Read by Alice, Bob") authoritatively. Without
+  the role, a generic span's accessible name is computed from its subtree text —
+  only the short "Read"/"Delivered"/"Sent" visible label — and the readBy names
+  are silently dropped. The icon + visible label remain the visual representation.
+-->
+<span
+  class="chat-read-receipt"
+  role="img"
+  data-cinder-receipt-status={status}
+  aria-label={ariaLabel}
+>
+  <span class="chat-read-receipt-icon" aria-hidden="true">
+    {#if isDoubleCheck}
+      <CheckCheck size={12} />
+    {:else}
+      <Check size={12} />
+    {/if}
+  </span>
+  <span class="chat-read-receipt-label">{visibleLabel}</span>
+</span>
+
+<style>
+  .chat-read-receipt {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cinder-space-1);
+    font-size: var(--cinder-text-xs);
+    line-height: 1;
+  }
+
+  /* sent + delivered: muted text */
+  .chat-read-receipt[data-cinder-receipt-status='sent'],
+  .chat-read-receipt[data-cinder-receipt-status='delivered'] {
+    color: var(--cinder-text-muted);
+  }
+
+  /* read: accent color */
+  .chat-read-receipt[data-cinder-receipt-status='read'] {
+    color: var(--cinder-accent);
+  }
+
+  .chat-read-receipt-icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .chat-read-receipt-label {
+    font-size: var(--cinder-text-xs);
+  }
+
+  /* High-contrast mode: rely on system colors rather than accent/muted. */
+  @media (forced-colors: active) {
+    .chat-read-receipt {
+      forced-color-adjust: auto;
+    }
+  }
+</style>

package/src/components/chat/message/parts/image-part.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+  import type { ImageMessagePart } from '../../utilities/types.ts';
+
+  export type ImagePartProps = {
+    /**
+     * The contiguous run of image parts to render as one attachment group.
+     *
+     * Images are grouped rather than rendered one-per-component because the
+     * attachment grid lays out by total count (`data-count`): one image is
+     * centered, two sit side by side, three or more flow in an auto-fit grid.
+     * Splitting them into independent single-image components would each render
+     * with count 1 and break that layout — so the renderer collects adjacent
+     * image parts and hands the whole run here.
+     */
+    parts: ImageMessagePart[];
+  };
+</script>
+
+<script lang="ts">
+  import MessageAttachments from '../message-attachments.svelte';
+
+  let { parts }: ImagePartProps = $props();
+
+  const images = $derived(parts.map((part) => part.image));
+</script>
+
+<MessageAttachments {images} />

package/src/components/chat/message/parts/markdown-part.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" module>
+  import type { MarkdownMessagePart } from '../../utilities/types.ts';
+
+  export type MarkdownPartProps = {
+    /** The markdown render part to display. */
+    part: MarkdownMessagePart;
+  };
+</script>
+
+<script lang="ts">
+  import MessageContent from '../message-content.svelte';
+
+  let { part }: MarkdownPartProps = $props();
+</script>
+
+<!--
+  The body text of a message, rendered through the markdown pipeline. `content`
+  is already the effective text (streaming override resolved in by
+  `deriveMessageParts`), so this part forwards it straight to MessageContent —
+  no `overrideContent` plumbing leaks into the part layer. Streaming and
+  expanded are presentation hints carried on the part.
+-->
+<MessageContent content={part.content} streaming={part.streaming} expanded={part.expanded} />