@djangocfg/ui-tools 2.1.407 → 2.1.409

package/src/tools/Uploader/components/UploadPreviewList.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react';
 import {
   useBatchAddListener,
   useItemProgressListener,
@@ -28,6 +28,11 @@ export function UploadPreviewList({
   const abortItem = useAbortItem();
   const { upload } = useUploady();
 
+  // Live ref to items so unmount cleanup sees the latest object URLs
+  // (a [] effect would only ever capture the initial empty Map).
+  const itemsRef = useRef(items);
+  itemsRef.current = items;
+
   // Batch added - create initial items
   useBatchAddListener((batch) => {
     setItems(prev => {
@@ -36,8 +41,8 @@ export function UploadPreviewList({
         const file = item.file as File;
         let previewUrl: string | undefined;
 
-        // Create object URL for image preview
-        if (file.type.startsWith('image/')) {
+        // Create object URL for image/video preview
+        if (file.type.startsWith('image/') || file.type.startsWith('video/')) {
           previewUrl = URL.createObjectURL(file);
         }
 
@@ -80,11 +85,18 @@ export function UploadPreviewList({
           ? buildAssetFromResponse(response, existing.file)
           : undefined;
 
+        // The server now hosts the file — revoke the local object URL so it
+        // can be garbage-collected, and keep only a server-hosted preview URL.
+        if (existing.previewUrl) {
+          URL.revokeObjectURL(existing.previewUrl);
+        }
+
         next.set(item.id, {
           ...existing,
           status: 'complete',
           progress: 100,
           asset,
+          previewUrl: asset?.thumbnailUrl || asset?.url || undefined,
         });
       }
       return next;
@@ -153,15 +165,15 @@ export function UploadPreviewList({
   const handleRetry = useCallback((id: string) => {
     const item = items.get(id);
     if (item && (item.status === 'error' || item.status === 'aborted')) {
-      // Reset status to pending
+      // rpldy.upload() creates a NEW batch item with a fresh id, so the old
+      // entry must be dropped (and its object URL revoked) to avoid a stale
+      // ghost item and a leaked URL. useBatchAddListener adds the new one.
+      if (item.previewUrl) {
+        URL.revokeObjectURL(item.previewUrl);
+      }
       setItems(prev => {
         const next = new Map(prev);
-        next.set(id, {
-          ...item,
-          status: 'pending',
-          progress: 0,
-          error: undefined,
-        });
+        next.delete(id);
         return next;
       });
 
@@ -171,10 +183,10 @@ export function UploadPreviewList({
     }
   }, [items, upload, onRetry]);
 
-  // Cleanup object URLs on unmount
+  // Cleanup object URLs on unmount (reads live ref, not a stale closure)
   useEffect(() => {
     return () => {
-      items.forEach(item => {
+      itemsRef.current.forEach(item => {
         if (item.previewUrl) {
           URL.revokeObjectURL(item.previewUrl);
         }

package/src/tools/Uploader/utils/formatters.ts

@@ -27,17 +27,22 @@ export function truncateFilename(filename: string, maxLength = 32): string {
 }
 
 export function formatFileSize(bytes: number): string {
-  if (bytes === 0) return '0 B';
+  if (!Number.isFinite(bytes) || bytes <= 0) return '0 B';
 
-  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
   const k = 1024;
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  // Clamp the unit index so absurdly large values never index out of bounds.
+  const i = Math.min(
+    Math.floor(Math.log(bytes) / Math.log(k)),
+    units.length - 1,
+  );
   const size = bytes / Math.pow(k, i);
 
   return `${size.toFixed(i > 0 ? 1 : 0)} ${units[i]}`;
 }
 
 export function formatDuration(seconds: number): string {
+  if (!Number.isFinite(seconds) || seconds < 0) return '0:00';
   const mins = Math.floor(seconds / 60);
   const secs = Math.floor(seconds % 60);
   return `${mins}:${secs.toString().padStart(2, '0')}`;

package/src/tools/VideoPlayer/canvas/hls-canvas.tsx

@@ -7,6 +7,7 @@
  */
 
 import 'hls-video-element';
+import './jsx-augmentation';
 import { MediaPosterImage } from 'media-chrome/react';
 import type { HlsSource, VideoPlayerSettings } from '../types';
 

package/src/tools/VideoPlayer/canvas/{jsx.d.ts → jsx-augmentation.ts}

@@ -3,14 +3,18 @@
  * shipped by `youtube-video-element`, `vimeo-video-element`,
  * `hls-video-element`.
  *
- * media-chrome relies on `slot="media"` to attach a media element to
- * its `<MediaController>`. We declare the bare minimum prop surface
- * we use — `src`, `slot`, `autoplay`, `muted`, `loop`, `playsinline`,
- * `crossorigin`, `preload`, `poster`.
+ * This is a real module (not an ambient `.d.ts`) so that it is reliably
+ * pulled into the type graph when imported as a side effect. Ambient
+ * `.d.ts` files are only loaded when they fall inside a project's
+ * `include` — consumers (e.g. the Storybook tsconfig) only `include`
+ * their own `stories/`, so a bare `.d.ts` here was silently skipped.
  *
- * All custom elements are HTMLElement subclasses with `HTMLVideoElement`
- * -shaped APIs, so we type their JSX props as a partial of
- * `HTMLVideoElementAttributes` + `slot`.
+ * media-chrome relies on `slot="media"` to attach a media element to
+ * its `<MediaController>`. We declare the bare prop surface we use:
+ * `src`, `slot`, `autoplay`, `muted`, `loop`, `playsinline`,
+ * `crossorigin`, `preload`, `poster`. All three elements are
+ * `HTMLElement` subclasses with `HTMLVideoElement`-shaped APIs, so
+ * their JSX props are typed as a partial of `VideoHTMLAttributes`.
  */
 
 import type { DetailedHTMLProps, HTMLAttributes, VideoHTMLAttributes } from 'react';
@@ -22,7 +26,7 @@ type VideoLikeElement = DetailedHTMLProps<
 
 /**
  * `youtube-video-element` accepts a `config` property — an object merged
- * into the YouTube IFrame `playerVars` (it is JSON-serialized into a
+ * into the YouTube IFrame `playerVars` (JSON-serialized into a
  * `data-config` attribute internally). Used to suppress native chrome.
  */
 type YouTubeVideoElement = VideoLikeElement & {
@@ -40,15 +44,4 @@ declare module 'react' {
   }
 }
 
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace JSX {
-    interface IntrinsicElements {
-      'youtube-video': YouTubeVideoElement;
-      'vimeo-video': VideoLikeElement;
-      'hls-video': VideoLikeElement;
-    }
-  }
-}
-
 export {};

package/src/tools/VideoPlayer/canvas/vimeo-canvas.tsx

@@ -7,6 +7,7 @@
  */
 
 import 'vimeo-video-element';
+import './jsx-augmentation';
 import { MediaPosterImage } from 'media-chrome/react';
 import type { VimeoSource, VideoPlayerSettings } from '../types';
 

package/src/tools/VideoPlayer/canvas/youtube-canvas.tsx

@@ -19,6 +19,7 @@
  */
 
 import 'youtube-video-element';
+import './jsx-augmentation';
 import { MediaPosterImage } from 'media-chrome/react';
 import type { YouTubeSource, VideoPlayerSettings } from '../types';
 

package/src/tools/VideoPlayer/parts/fullscreen.tsx

@@ -11,7 +11,7 @@ export function Fullscreen({ className, ...props }: FullscreenProps) {
     <MediaFullscreenButton
       {...props}
       className={cn(
-        'media-control-square h-8 w-8 rounded-md text-foreground hover:bg-foreground/10',
+        'media-control-square video-player__control h-8 w-8',
         className,
       )}
     />

package/src/tools/VideoPlayer/parts/pip.tsx

@@ -11,7 +11,7 @@ export function Pip({ className, ...props }: PipProps) {
     <MediaPipButton
       {...props}
       className={cn(
-        'media-control-square h-8 w-8 rounded-md text-foreground hover:bg-foreground/10',
+        'media-control-square video-player__control h-8 w-8',
         className,
       )}
     />

package/src/tools/VideoPlayer/parts/playback-rate.tsx

@@ -23,7 +23,7 @@ export function PlaybackRate({ className, rates, ...props }: PlaybackRateProps)
       // React typing pulls from the getter only, which is narrower.
       rates={value as unknown as ArrayLike<number>}
       className={cn(
-        'h-8 rounded-md px-2 text-xs tabular-nums text-foreground hover:bg-foreground/10',
+        'video-player__control h-8 px-2 text-xs tabular-nums',
         className,
       )}
     />

package/src/tools/VideoPlayer/parts/seek-bar.tsx

@@ -13,12 +13,12 @@ export function SeekBar({ className, showTime = true, ...props }: SeekBarProps)
     <>
       <MediaTimeRange
         {...props}
-        className={cn('h-8 flex-1 text-foreground', className)}
+        className={cn('h-8 flex-1', className)}
       />
       {showTime && (
         <MediaTimeDisplay
           showDuration
-          className="px-2 text-xs tabular-nums text-muted-foreground"
+          className="video-player__time px-2 text-xs tabular-nums"
         />
       )}
     </>

package/src/tools/VideoPlayer/parts/volume.tsx

@@ -17,14 +17,14 @@ export function Volume({ className, iconOnly, muteProps, rangeProps }: VolumePro
       <MediaMuteButton
         {...muteProps}
         className={cn(
-          'media-control-square h-8 w-8 rounded-md text-foreground hover:bg-foreground/10',
+          'media-control-square video-player__control h-8 w-8',
           muteProps?.className,
         )}
       />
       {!iconOnly && (
         <MediaVolumeRange
           {...rangeProps}
-          className={cn('h-8 w-20 text-foreground', rangeProps?.className)}
+          className={cn('h-8 w-20', rangeProps?.className)}
         />
       )}
     </div>

package/src/tools/index.ts

@@ -22,12 +22,13 @@ export type { JsonTreeConfig } from './JsonTree';
 export { default as Mermaid } from './Mermaid';
 export { default as PrettyCode } from './PrettyCode';
 export type { Language } from './PrettyCode';
-export { LottiePlayer, useLottie } from './LottiePlayer';
+export { LottiePlayer, useLottie, usePrefersReducedMotion } from './LottiePlayer';
 export type {
   LottiePlayerProps,
   LottieSize,
   LottieSpeed,
   LottieDirection,
+  LottieSegment,
   UseLottieOptions,
   UseLottieReturn,
 } from './LottiePlayer';

package/src/tools/Chat/components/AudioToggle.tsx

@@ -1,78 +0,0 @@
-'use client';
-
-/**
- * Mute / unmute toggle for chat audio events.
- *
- * Reads the current ``muted`` state from the active chat context and
- * persists changes through ``useChatAudioPrefs`` (cross-tab safe). The
- * button auto-hides when no ``audio.sounds`` config is provided —
- * showing a mute toggle for a chat with no sounds is just clutter.
- *
- * Drop into a ChatRoot ``header`` slot or anywhere inside a chat
- * provider:
- *
- * ```tsx
- * <ChatRoot
- *   header={<AudioToggle />}
- *   audio={{ sounds: { messageReceived: '/ping.mp3' } }}
- *   ...
- * />
- * ```
- */
-
-import { Volume2, VolumeX } from 'lucide-react';
-
-import { Button } from '@djangocfg/ui-core/components';
-import { cn } from '@djangocfg/ui-core/lib';
-
-import { useChatContextOptional } from '../context';
-import { useChatAudioPrefs } from '../core/audio/preferences';
-
-export interface AudioToggleProps {
-  /** Visual size — matches Button sizes. Default: ``icon``. */
-  size?: 'sm' | 'icon';
-  /** Variant passed to the underlying Button. Default: ``ghost``. */
-  variant?: 'ghost' | 'outline' | 'secondary';
-  /** Force-show even when no audio config is wired (e.g. for stories). */
-  alwaysShow?: boolean;
-  className?: string;
-}
-
-export function AudioToggle({
-  size = 'icon',
-  variant = 'ghost',
-  alwaysShow = false,
-  className,
-}: AudioToggleProps) {
-  // Read straight from the persist store so the toggle works even
-  // when rendered OUTSIDE the ChatRoot (e.g. in a parent header). The
-  // chat audio bus reads the same store, so a click here flips the
-  // "muted" state for any sibling ChatRoot in the same tab and
-  // mirrors across tabs via the storage event.
-  const muted = useChatAudioPrefs((s) => s.muted);
-  const setMuted = useChatAudioPrefs((s) => s.setMuted);
-
-  // If a ChatRoot is in scope, hide unless it actually wired sounds —
-  // otherwise the button is a no-op for that surface. When rendered
-  // standalone (no context), default to visible.
-  const ctx = useChatContextOptional();
-  if (ctx && !ctx.hasAudio && !alwaysShow) return null;
-
-  const Icon = muted ? VolumeX : Volume2;
-  const label = muted ? 'Unmute chat sounds' : 'Mute chat sounds';
-
-  return (
-    <Button
-      type="button"
-      variant={variant}
-      size={size}
-      onClick={() => setMuted(!muted)}
-      aria-label={label}
-      aria-pressed={muted}
-      title={label}
-      className={cn(size === 'icon' ? 'h-9 w-9' : '', className)}
-    >
-      <Icon aria-hidden className="size-4" />
-    </Button>
-  );
-}

package/src/tools/Chat/components/ChatRoot.tsx

@@ -1,305 +0,0 @@
-'use client';
-
-import { type ReactNode, useMemo, useRef, useState } from 'react';
-
-import { cn } from '@djangocfg/ui-core/lib';
-
-import type { ChatAttachment, ChatConfig, ChatMessage, ChatTransport } from '../types';
-import type { ChatAudioConfig } from '../core/audio/types';
-import {
-  ChatProvider,
-  useChatContext,
-  useChatContextOptional,
-  type ChatContextValue,
-} from '../context';
-import { useAutoFocusOnStreamEnd } from '../hooks/useAutoFocusOnStreamEnd';
-import { useChatComposer, type UseChatComposerReturn } from '../hooks/useChatComposer';
-import { useFocusOnEmptyClick } from '../hooks/useFocusOnEmptyClick';
-import { Composer, type ComposerSize } from './Composer';
-import { EmptyState } from './EmptyState';
-import { ErrorBanner } from './ErrorBanner';
-import { JumpToLatest } from './JumpToLatest';
-import { MessageBubble } from './MessageBubble';
-import { MessageList, type MessageListHandle } from './MessageList';
-import type { AttachmentRendererMap } from './Attachments';
-import type { ToolCallsProps } from './ToolCalls';
-
-export interface ChatRootProps {
-  // ---- core wiring -------------------------------------------------------
-  /**
-   * Transport. Required UNLESS `<ChatRoot>` is rendered inside an
-   * existing `<ChatProvider>` (e.g. mounted by `<ChatLauncher>`), in
-   * which case the ambient provider is reused and `transport` is
-   * ignored.
-   */
-  transport?: ChatTransport;
-  config?: ChatConfig;
-  initialSessionId?: string;
-  autoCreateSession?: boolean;
-  streaming?: boolean;
-  /** Audio-trigger configuration. Off by default (no `sounds` map). */
-  audio?: ChatAudioConfig;
-  /**
-   * Verbose dev-mode logging via `consola` (namespace `chat:*`).
-   * Defaults to `isDev` from `@djangocfg/ui-core/lib`. Pass `false` to silence
-   * even in development, or `true` to force on in production for debugging.
-   */
-  debug?: boolean;
-  className?: string;
-
-  // ---- named ReactNode slots --------------------------------------------
-  /** Sticky banner above the message list (e.g. quota warning). */
-  banner?: ReactNode;
-  /** Header row below the banner — title / actions / session switcher. */
-  header?: ReactNode;
-  /** Footer slot below the composer (disclaimers, model picker). */
-  footer?: ReactNode;
-  /** Replaces the default `<EmptyState>` rendered when the conversation is empty. */
-  empty?: ReactNode;
-  /** Slot left of the textarea inside `<Composer>`. */
-  composerToolbarStart?: ReactNode;
-  /** Slot right of the textarea inside `<Composer>`. */
-  composerToolbarEnd?: ReactNode;
-  /** Replaces the default attachment tray inside `<Composer>`. */
-  composerAttachmentTray?: ReactNode;
-  /** Replaces the default `<JumpToLatest>` floating pill. */
-  jumpToLatest?: ReactNode;
-
-  // ---- render-prop slots (need access to data) --------------------------
-  /** Replace `<MessageBubble>` per message. */
-  renderMessage?: (m: ChatMessage, i: number) => ReactNode;
-  /**
-   * Render arbitrary content beneath every default `<MessageBubble>`
-   * (not invoked when `renderMessage` is set — the host owns layout
-   * in that case). Useful for product widgets driven by a side channel
-   * (e.g. `ui_payload` SSE frames) where the widget is per-message but
-   * not tied to the bubble's tool-calls array.
-   */
-  renderAfterMessage?: (m: ChatMessage) => ReactNode;
-  /** Render the header lazily — receives the chat context. */
-  renderHeader?: (ctx: ChatContextValue) => ReactNode;
-  /** Render the empty-state lazily — receives a `setValue` to seed the composer. */
-  renderEmpty?: (api: { setValue: (v: string) => void; focus: () => void }) => ReactNode;
-  /**
-   * Replace the default `<Composer>` entirely. Receives the live
-   * `useChatComposer` return and the composer-related slot props
-   * (placeholder, size, attach button, toolbar slots) — host can wire
-   * them into a custom widget (e.g. a MarkdownEditor with mentions).
-   *
-   * When set, `composerToolbarStart/End`, `composerAttachmentTray`,
-   * `composerSize`, `showAttachmentButton`, `onPickFiles` are passed
-   * to the render-prop but are no longer auto-rendered.
-   */
-  renderComposer?: (api: {
-    composer: UseChatComposerReturn;
-    placeholder?: string;
-    size?: ComposerSize;
-    showAttachmentButton?: boolean;
-    onPickFiles?: () => void;
-    toolbarStart?: ReactNode;
-    toolbarEnd?: ReactNode;
-    attachmentTray?: ReactNode;
-  }) => ReactNode;
-  /** Forwarded into `<MessageBubble toolCallsProps>` so hosts can swap payload renderers. */
-  toolCallsProps?: Omit<ToolCallsProps, 'calls'>;
-  /** Per-type attachment renderers — `{ image, audio, video, file, default }`. */
-  attachmentRenderers?: AttachmentRendererMap;
-  /** Called when an attachment tile is clicked (e.g. open lightbox). */
-  onAttachmentOpen?: (attachment: ChatAttachment) => void;
-
-  // ---- composer customization -------------------------------------------
-  /** Show the paperclip "attach" button in the composer. */
-  showAttachmentButton?: boolean;
-  /** Called when the user clicks the attach button (host opens its file picker). */
-  onPickFiles?: () => void;
-  /** Hide the composer input area entirely (e.g. while waiting for human approval). */
-  hideComposer?: boolean;
-  /** Composer size variant. Default ``md`` (36px slot). Use ``lg`` for primary
-   * surfaces (onboarding, full-page chat), ``sm`` for dense sidebars. */
-  composerSize?: ComposerSize;
-  /** Extra className forwarded to the `<MessageList>` scroll container.
-   * Use to add padding inside the scroll area so the scrollbar stays flush
-   * with the edge (e.g. `"px-6 pt-6 sm:px-8"`). */
-  listClassName?: string;
-  /** Extra className forwarded to the `<Composer>` wrapper div. */
-  composerClassName?: string;
-  /**
-   * Click in the message area → focus the composer (Slack / ChatGPT / Linear).
-   * Honours selection drag, interactive elements, and touch input.
-   * @default true
-   */
-  focusOnEmptyClick?: boolean;
-}
-
-export function ChatRoot(props: ChatRootProps) {
-  const { transport, config, initialSessionId, autoCreateSession, streaming, audio, debug, className, listClassName, ...slots } = props;
-  // When mounted under a launcher-owned `<ChatProvider>`, reuse that
-  // provider instead of wrapping in a second one. This lets host code
-  // freely nest `<ChatRoot>` inside `<ChatLauncher>` without losing
-  // `headerSlots` access to the same session / clearMessages / audio.
-  const ambient = useChatContextOptional();
-  if (ambient) {
-    return <ChatRootShell className={className} listClassName={listClassName} slots={slots} />;
-  }
-  if (!transport) {
-    throw new Error(
-      '<ChatRoot> requires `transport` when mounted outside a <ChatProvider>.',
-    );
-  }
-  return (
-    <ChatProvider
-      transport={transport}
-      config={config}
-      initialSessionId={initialSessionId}
-      autoCreateSession={autoCreateSession}
-      streaming={streaming}
-      audio={audio}
-      debug={debug}
-    >
-      <ChatRootShell className={className} listClassName={listClassName} slots={slots} />
-    </ChatProvider>
-  );
-}
-
-interface ChatRootShellProps {
-  className?: string;
-  listClassName?: string;
-  slots: Omit<ChatRootProps, 'transport' | 'config' | 'initialSessionId' | 'autoCreateSession' | 'streaming' | 'audio' | 'debug' | 'className' | 'listClassName'>;
-}
-
-function ChatRootShell({ className, listClassName, slots }: ChatRootShellProps) {
-  const chat = useChatContext();
-  const composer = useChatComposer({
-    onSubmit: (content, attachments) => chat.sendMessage(content, attachments),
-    disabled: chat.isStreaming,
-  });
-  const onMessagesMouseUp = useFocusOnEmptyClick({
-    enabled: slots.focusOnEmptyClick !== false,
-  });
-  // Re-focus the composer on the streaming → idle edge. Was dropped in
-  // a previous refactor — restored here so the standard chat UX (type
-  // → send → read → keep typing without clicking) works again.
-  useAutoFocusOnStreamEnd();
-  // MessageList (virtuoso) owns the scroll viewport. We talk to it
-  // via the imperative handle (scrollToBottom on JumpToLatest click)
-  // and via the `onAtBottomChange` callback (drives the pill).
-  const listRef = useRef<MessageListHandle | null>(null);
-  const [isAtBottom, setIsAtBottom] = useState(true);
-  // The id of the most-recent user-sent message. We pass it as
-  // `scrollAnchorId` to MessageList so every send re-anchors the
-  // viewport — fixes "I sent a message but the chat didn't scroll
-  // down". Recomputed lazily; the resulting id only flips when a new
-  // user message lands.
-  const lastUserMessageId = useMemo(() => {
-    const msgs = chat.messages;
-    for (let i = msgs.length - 1; i >= 0; i -= 1) {
-      if (msgs[i].role === 'user') return msgs[i].id;
-    }
-    return null;
-  }, [chat.messages]);
-  const handleStartReached = chat.hasMore && !chat.isLoadingMore
-    ? () => void chat.loadMore()
-    : undefined;
-
-  const greeting = chat.config.greeting ?? 'How can I help?';
-  const description = chat.config.description;
-  const suggestions = chat.config.suggestions;
-
-  const headerNode = slots.renderHeader ? slots.renderHeader(chat) : slots.header;
-
-  const emptyNode = slots.empty
-    ?? (slots.renderEmpty
-      ? slots.renderEmpty({ setValue: composer.setValue, focus: composer.focus })
-      : (
-          <EmptyState
-            greeting={greeting}
-            description={description}
-            suggestions={suggestions}
-            onPickSuggestion={(prompt) => {
-              composer.setValue(prompt);
-              composer.focus();
-            }}
-          />
-        ));
-
-  const renderItem = slots.renderMessage
-    ?? ((m: ChatMessage) => (
-      <MessageBubble
-        key={m.id}
-        message={m}
-        toolCallsProps={slots.toolCallsProps}
-        attachmentRenderers={slots.attachmentRenderers}
-        onAttachmentOpen={slots.onAttachmentOpen}
-        renderAfterMessage={slots.renderAfterMessage}
-        onCopy={() => copy(m.content)}
-        onRegenerate={() => void chat.regenerate(m.id)}
-        onDelete={() => chat.deleteMessage(m.id)}
-      />
-    ));
-
-  return (
-    <div className={cn('relative flex h-full min-h-0 flex-col overflow-hidden', className)}>
-      {slots.banner ?? null}
-      {headerNode ?? null}
-      <div className="relative flex min-h-0 flex-1 flex-col" onMouseUp={onMessagesMouseUp}>
-        <ErrorBanner
-          error={chat.error}
-          onDismiss={chat.error ? () => chat.clearMessages() : undefined}
-          onRetry={chat.error ? () => void chat.regenerate() : undefined}
-        />
-        <MessageList
-          ref={listRef}
-          renderItem={renderItem}
-          renderEmpty={() => <>{emptyNode}</>}
-          className={listClassName}
-          onStartReached={handleStartReached}
-          onAtBottomChange={setIsAtBottom}
-          scrollAnchorId={lastUserMessageId}
-        />
-        <div className="pointer-events-none absolute inset-x-0 bottom-2 flex justify-center">
-          {slots.jumpToLatest ?? (
-            <JumpToLatest
-              visible={!isAtBottom}
-              onClick={() => listRef.current?.scrollToBottom(true)}
-            />
-          )}
-        </div>
-      </div>
-      {!slots.hideComposer && (
-        slots.renderComposer
-          ? slots.renderComposer({
-              composer,
-              placeholder: chat.config.placeholder,
-              size: slots.composerSize,
-              showAttachmentButton: slots.showAttachmentButton,
-              onPickFiles: slots.onPickFiles,
-              toolbarStart: slots.composerToolbarStart,
-              toolbarEnd: slots.composerToolbarEnd,
-              attachmentTray: slots.composerAttachmentTray,
-            })
-          : (
-              <Composer
-                composer={composer}
-                placeholder={chat.config.placeholder}
-                showAttachmentButton={slots.showAttachmentButton}
-                onPickFiles={slots.onPickFiles}
-                toolbarStart={slots.composerToolbarStart}
-                toolbarEnd={slots.composerToolbarEnd}
-                attachmentTray={slots.composerAttachmentTray}
-                size={slots.composerSize}
-              />
-            )
-      )}
-      {slots.footer ?? null}
-    </div>
-  );
-}
-
-function copy(text: string) {
-  if (typeof navigator !== 'undefined' && navigator.clipboard) {
-    void navigator.clipboard.writeText(text);
-  }
-}
-
-// re-export for convenience: composer hook return is a common slot dependency
-export type { UseChatComposerReturn };