@lostgradient/cinder 0.5.0 → 0.7.0

package/src/components/chat/container/use-chat-disclosure-state.svelte.ts

@@ -8,34 +8,6 @@
  * (optional), toggling fires it so the virtualizer can remeasure the row after
  * the disclosure opens/closes.
  */
-
-/** Options for the disclosure state helper. */
-export type UseChatDisclosureStateOptions = {
-  /**
-   * Optional callback to trigger a virtualizer remeasure for a specific message
-   * row after the disclosure state changes. If the virtualizer is not wired
-   * (e.g. in non-virtualized mode), pass `undefined` or omit — the toggle
-   * still works, no remeasure fires.
-   */
-  onRemeasureRow?: ((messageId: string) => void) | undefined;
-};
-
-/** Return type for the disclosure state helper. */
-export type UseChatDisclosureStateReturn = {
-  /** Whether the disclosure for the given message id is expanded. */
-  isExpanded: (messageId: string) => boolean;
-  /**
-   * Toggle the expanded state for the given message id. Also fires the
-   * remeasure callback when wired (virtualizer support).
-   */
-  toggle: (messageId: string) => void;
-  /**
-   * Reset all expanded state to empty. Called on conversation change so stale
-   * expanded disclosures from the previous conversation are cleared.
-   */
-  reset: () => void;
-};
-
 /**
  * Creates reactive state for per-message disclosure expansion.
  *
@@ -58,39 +30,33 @@ export type UseChatDisclosureStateReturn = {
  * />
  * ```
  */
-export function useChatDisclosureState(
-  options: UseChatDisclosureStateOptions,
-): UseChatDisclosureStateReturn {
-  const { onRemeasureRow } = options;
-
-  // Set of message ids whose disclosures are currently expanded.
-  // Collapsed by default (disclosures start closed).
-  let expandedIds = $state(new Set<string>());
-
-  function isExpanded(messageId: string): boolean {
-    return expandedIds.has(messageId);
-  }
-
-  function toggle(messageId: string): void {
-    const next = new Set(expandedIds);
-    if (next.has(messageId)) {
-      next.delete(messageId);
-    } else {
-      next.add(messageId);
+export function useChatDisclosureState(options) {
+    const { onRemeasureRow } = options;
+    // Set of message ids whose disclosures are currently expanded.
+    // Collapsed by default (disclosures start closed).
+    let expandedIds = $state(new Set());
+    function isExpanded(messageId) {
+        return expandedIds.has(messageId);
     }
-    expandedIds = next;
-    // Notify the virtualizer so it can remeasure the row after the DOM
-    // transitions to its new open/closed height. No-op when not wired.
-    onRemeasureRow?.(messageId);
-  }
-
-  function reset(): void {
-    expandedIds = new Set();
-  }
-
-  return {
-    isExpanded,
-    toggle,
-    reset,
-  };
+    function toggle(messageId) {
+        const next = new Set(expandedIds);
+        if (next.has(messageId)) {
+            next.delete(messageId);
+        }
+        else {
+            next.add(messageId);
+        }
+        expandedIds = next;
+        // Notify the virtualizer so it can remeasure the row after the DOM
+        // transitions to its new open/closed height. No-op when not wired.
+        onRemeasureRow?.(messageId);
+    }
+    function reset() {
+        expandedIds = new Set();
+    }
+    return {
+        isExpanded,
+        toggle,
+        reset,
+    };
 }

package/src/components/chat/container/use-chat-keyboard-nav.svelte.ts

@@ -6,40 +6,10 @@
  * - PageUp/PageDown for viewport scrolling
  * - Arrow keys for message-to-message navigation
  */
-
 import { tick } from 'svelte';
-
-// ==========================================================================
-// Types
-// ==========================================================================
-
-/** Options for the keyboard navigation helper */
-export interface UseChatKeyboardNavOptions {
-  /** Callback when jump-to-latest is triggered (End key) */
-  onJumpToLatest: () => void;
-  /** Optional callback for virtualized top scrolling. */
-  onJumpToStart?: () => void;
-  /** Function that returns the appropriate scroll behavior based on user preference */
-  getScrollBehavior: () => ScrollBehavior;
-  /** Optional load-earlier trigger focus target. */
-  getHistoryTrigger?: () => { focus: () => void } | null | undefined;
-  /** Optional virtualized message navigation hook for off-window rows. */
-  onVirtualMessageNavigation?: (direction: 'next' | 'previous') => boolean;
-}
-
-/** Return type for the keyboard navigation helper */
-export interface UseChatKeyboardNavReturn {
-  /**
-   * Handle keydown events for the chat container.
-   * Should be attached to the container's onkeydown event.
-   */
-  handleKeyDown(event: KeyboardEvent, viewport: HTMLElement | null): void;
-}
-
 // ==========================================================================
 // Helper
 // ==========================================================================
-
 /**
  * Creates keyboard navigation handlers for the chat container.
  *
@@ -65,139 +35,119 @@ export interface UseChatKeyboardNavReturn {
  * </div>
  * ```
  */
-export function useChatKeyboardNav(options: UseChatKeyboardNavOptions): UseChatKeyboardNavReturn {
-  const {
-    onJumpToLatest,
-    onJumpToStart,
-    getScrollBehavior,
-    getHistoryTrigger,
-    onVirtualMessageNavigation,
-  } = options;
-
-  /**
-   * Navigate to next or previous message.
-   * Scrolls the focused message into view.
-   */
-  function navigateMessages(viewport: HTMLElement, direction: 'next' | 'previous'): void {
-    const allMessages = viewport.querySelectorAll<HTMLElement>('.chat-message');
-    if (allMessages.length === 0) return;
-
-    const currentIndex = Array.from(allMessages).findIndex((msg) => msg === document.activeElement);
-
-    let targetIndex: number;
-    if (currentIndex === -1) {
-      // No message currently focused: default to first/last message based on direction
-      targetIndex = direction === 'next' ? 0 : allMessages.length - 1;
-    } else if (direction === 'next') {
-      targetIndex = currentIndex < allMessages.length - 1 ? currentIndex + 1 : currentIndex;
-    } else {
-      targetIndex = currentIndex > 0 ? currentIndex - 1 : currentIndex;
-    }
-
-    const targetMessage = allMessages[targetIndex];
-    if (targetMessage && targetMessage !== document.activeElement) {
-      targetMessage.focus();
-      targetMessage.scrollIntoView({ behavior: getScrollBehavior(), block: 'nearest' });
-    }
-  }
-
-  /**
-   * Text-editing element selectors where Home/End/PageUp/PageDown are used for
-   * cursor/scroll movement within the element itself.
-   *
-   * We intentionally exclude `button` and `a` because those elements do not
-   * consume these keys, and blocking viewport navigation when a message action
-   * button is focused would silently break PageUp/PageDown for keyboard users.
-   */
-  const TEXT_EDITING_SELECTOR = 'input, textarea, select, [contenteditable]';
-
-  /**
-   * Handle keydown events for keyboard navigation.
-   */
-  function handleKeyDown(event: KeyboardEvent, viewport: HTMLElement | null): void {
-    if (!viewport) return;
-
-    // Don't intercept if focus is inside a text-editing element that uses
-    // these keys for cursor movement (input, textarea, contenteditable, etc.).
-    // Buttons and links do not consume Home/End/PageUp/PageDown, so they are
-    // excluded from the guard to preserve viewport navigation for those cases.
-    if (
-      document.activeElement?.closest('.chat-input') ||
-      document.activeElement?.matches(TEXT_EDITING_SELECTOR)
-    )
-      return;
-
-    const behavior = getScrollBehavior();
-
-    switch (event.key) {
-      case 'End':
-        event.preventDefault();
-        onJumpToLatest();
-        break;
-
-      case 'Home':
-        event.preventDefault();
-        if (onJumpToStart) {
-          onJumpToStart();
-        } else {
-          viewport.scrollTo({ top: 0, behavior });
+export function useChatKeyboardNav(options) {
+    const { onJumpToLatest, onJumpToStart, getScrollBehavior, getHistoryTrigger, onVirtualMessageNavigation, } = options;
+    /**
+     * Navigate to next or previous message.
+     * Scrolls the focused message into view.
+     */
+    function navigateMessages(viewport, direction) {
+        const allMessages = viewport.querySelectorAll('.chat-message');
+        if (allMessages.length === 0)
+            return;
+        const currentIndex = Array.from(allMessages).findIndex((msg) => msg === document.activeElement);
+        let targetIndex;
+        if (currentIndex === -1) {
+            // No message currently focused: default to first/last message based on direction
+            targetIndex = direction === 'next' ? 0 : allMessages.length - 1;
+        }
+        else if (direction === 'next') {
+            targetIndex = currentIndex < allMessages.length - 1 ? currentIndex + 1 : currentIndex;
         }
-        // Focus the explicit history trigger first when present; otherwise focus
-        // the first rendered message.
-        void tick().then(
-          () => {
-            const historyTrigger = getHistoryTrigger?.();
-            if (historyTrigger) {
-              historyTrigger.focus();
-            } else {
-              const firstMessage = viewport.querySelector<HTMLElement>('.chat-message');
-              firstMessage?.focus();
-            }
-            return undefined;
-          },
-          () => undefined,
-        );
-        break;
-
-      case 'PageDown':
-        event.preventDefault();
-        viewport.scrollBy({ top: viewport.clientHeight * 0.9, behavior });
-        break;
-
-      case 'PageUp':
-        event.preventDefault();
-        viewport.scrollBy({ top: -viewport.clientHeight * 0.9, behavior });
-        break;
-
-      // Arrow key navigation between messages. Suppressed whenever the focused
-      // element is NOT the `.chat-message` article itself (tabindex=-1). This
-      // means focus inside any child interactive element (tool-approval buttons,
-      // suggestion chips, etc.) is already excluded because those elements do
-      // not have the `chat-message` class. The previous `.closest()` guards
-      // were dead code: `closest()` traverses upward to ancestors, but
-      // `[data-cinder-tool-approval]` and `[data-cinder-suggested-replies]` are
-      // descendants — so they always returned null, making `!null` always true.
-      case 'ArrowDown':
-        if (document.activeElement?.classList.contains('chat-message')) {
-          event.preventDefault();
-          if (!onVirtualMessageNavigation?.('next')) {
-            navigateMessages(viewport, 'next');
-          }
+        else {
+            targetIndex = currentIndex > 0 ? currentIndex - 1 : currentIndex;
         }
-        break;
-
-      case 'ArrowUp':
-        if (document.activeElement?.classList.contains('chat-message')) {
-          event.preventDefault();
-          if (!onVirtualMessageNavigation?.('previous')) {
-            navigateMessages(viewport, 'previous');
-          }
+        const targetMessage = allMessages[targetIndex];
+        if (targetMessage && targetMessage !== document.activeElement) {
+            targetMessage.focus();
+            targetMessage.scrollIntoView({ behavior: getScrollBehavior(), block: 'nearest' });
+        }
+    }
+    /**
+     * Text-editing element selectors where Home/End/PageUp/PageDown are used for
+     * cursor/scroll movement within the element itself.
+     *
+     * We intentionally exclude `button` and `a` because those elements do not
+     * consume these keys, and blocking viewport navigation when a message action
+     * button is focused would silently break PageUp/PageDown for keyboard users.
+     */
+    const TEXT_EDITING_SELECTOR = 'input, textarea, select, [contenteditable]';
+    /**
+     * Handle keydown events for keyboard navigation.
+     */
+    function handleKeyDown(event, viewport) {
+        if (!viewport)
+            return;
+        // Don't intercept if focus is inside a text-editing element that uses
+        // these keys for cursor movement (input, textarea, contenteditable, etc.).
+        // Buttons and links do not consume Home/End/PageUp/PageDown, so they are
+        // excluded from the guard to preserve viewport navigation for those cases.
+        if (document.activeElement?.closest('.chat-input') ||
+            document.activeElement?.matches(TEXT_EDITING_SELECTOR))
+            return;
+        const behavior = getScrollBehavior();
+        switch (event.key) {
+            case 'End':
+                event.preventDefault();
+                onJumpToLatest();
+                break;
+            case 'Home':
+                event.preventDefault();
+                if (onJumpToStart) {
+                    onJumpToStart();
+                }
+                else {
+                    viewport.scrollTo({ top: 0, behavior });
+                }
+                // Focus the explicit history trigger first when present; otherwise focus
+                // the first rendered message.
+                void tick().then(() => {
+                    const historyTrigger = getHistoryTrigger?.();
+                    if (historyTrigger) {
+                        historyTrigger.focus();
+                    }
+                    else {
+                        const firstMessage = viewport.querySelector('.chat-message');
+                        firstMessage?.focus();
+                    }
+                    return undefined;
+                }, () => undefined);
+                break;
+            case 'PageDown':
+                event.preventDefault();
+                viewport.scrollBy({ top: viewport.clientHeight * 0.9, behavior });
+                break;
+            case 'PageUp':
+                event.preventDefault();
+                viewport.scrollBy({ top: -viewport.clientHeight * 0.9, behavior });
+                break;
+            // Arrow key navigation between messages. Suppressed whenever the focused
+            // element is NOT the `.chat-message` article itself (tabindex=-1). This
+            // means focus inside any child interactive element (tool-approval buttons,
+            // suggestion chips, etc.) is already excluded because those elements do
+            // not have the `chat-message` class. The previous `.closest()` guards
+            // were dead code: `closest()` traverses upward to ancestors, but
+            // `[data-cinder-tool-approval]` and `[data-cinder-suggested-replies]` are
+            // descendants — so they always returned null, making `!null` always true.
+            case 'ArrowDown':
+                if (document.activeElement?.classList.contains('chat-message')) {
+                    event.preventDefault();
+                    if (!onVirtualMessageNavigation?.('next')) {
+                        navigateMessages(viewport, 'next');
+                    }
+                }
+                break;
+            case 'ArrowUp':
+                if (document.activeElement?.classList.contains('chat-message')) {
+                    event.preventDefault();
+                    if (!onVirtualMessageNavigation?.('previous')) {
+                        navigateMessages(viewport, 'previous');
+                    }
+                }
+                break;
         }
-        break;
     }
-  }
-
-  return {
-    handleKeyDown,
-  };
+    return {
+        handleKeyDown,
+    };
 }