@djangocfg/ui-tools 2.1.404 → 2.1.408

package/src/tools/Chat/lazy.tsx

@@ -12,28 +12,38 @@
  * Rules of thumb:
  * - **Heavy** (ChatRoot, ChatLauncher, ChatFAB, ChatDock, MessageList,
  *   MessageBubble, Composer, ToolCalls, Attachments*, ChatHeader*, …) —
- *   loaded only via `Lazy*` wrappers below. Do NOT add synchronous
- *   re-exports for these from this file.
+ *   loaded only via `Lazy*` wrappers below for maximum laziness. They are
+ *   ALSO re-exported synchronously (composable surface, see note below)
+ *   so custom chat shells can import them. The sync re-export is a flat
+ *   `export *` from the domain barrels — never a hand-listed copy.
  * - **Light** (types, config constants, pure core reducer/utils,
  *   transports, hooks without UI, audio prefs, draft sanitizer) —
- *   re-exported synchronously here. Types are erased at compile time;
- *   helpers and hooks pull in no UI components.
+ *   re-exported synchronously via `./public`. Types are erased at compile
+ *   time; helpers and hooks pull in no UI components.
  *
- * Consumers that need synchronous access to the heavy components
- * (custom chat layouts, Storybook stories) can import from the root
- * barrel `@djangocfg/ui-tools` instead.
+ * The light surface lives in `./public` and is shared verbatim with the
+ * root barrel `index.ts` — one list, edited once.
+ *
+ * Consumers that want maximum laziness should use `LazyChat` /
+ * `LazyChatLauncher` and skip the synchronous component re-exports.
  */
 
 import { createLazyComponent, LoadingFallback } from '../../components/lazy-wrapper';
-import type { ChatRootProps } from './components/ChatRoot';
+import type { ChatRootProps } from './shell/ChatRoot';
 import type { ChatLauncherProps } from './launcher';
 
+// ============================================================================
+// Light surface — shared with the root barrel via ./public
+// ============================================================================
+
+export * from './public';
+
 // ============================================================================
 // Lazy UI components
 // ============================================================================
 
 export const LazyChat = createLazyComponent<ChatRootProps>(
-  () => import('./components/ChatRoot').then((m) => ({ default: m.ChatRoot })),
+  () => import('./shell/ChatRoot').then((m) => ({ default: m.ChatRoot })),
   {
     displayName: 'LazyChat',
     fallback: <LoadingFallback minHeight={320} text="Loading chat…" />,
@@ -49,289 +59,33 @@ export const LazyChatLauncher = createLazyComponent<ChatLauncherProps>(
   },
 );
 
-// ============================================================================
-// Light surface re-exports — types + pure helpers + hooks without UI
-// ============================================================================
-
-// Types (erased at compile time, free to re-export)
-export type {
-  ChatRole,
-  ChatMessage,
-  ChatPersona,
-  ChatToolCall,
-  ChatAttachment,
-  ChatSource,
-  ChatDisplayMode,
-  ChatUserContext,
-  ChatAssistantContext,
-  ChatPrefs,
-  ChatConfig,
-  ChatLabels,
-  ChatTransport,
-  ChatStreamEvent,
-  CreateSessionOptions,
-  SessionInfo,
-  HistoryPage,
-  StreamOptions,
-  SendOptions,
-} from './types';
-export { DEFAULT_LABELS } from './types';
-
-// Config — plain constants, no UI imports
-export {
-  STORAGE_KEYS,
-  CSS_VARS,
-  DEFAULT_Z_INDEX,
-  LIMITS,
-  DEFAULT_SIDEBAR,
-  HOTKEYS,
-  CHAT_EVENT_NAME,
-  type ChatEventDetail,
-} from './config';
-
-// Core — pure reducer / id / token buffer / persona / initials
-export {
-  reducer,
-  initialState,
-  createId,
-  createTokenBuffer,
-  resolvePersona,
-  deriveInitials,
-  type ChatState,
-  type ChatAction,
-  type TokenBuffer,
-} from './core';
-
-// Transports — pure functions, no UI
-export {
-  createHttpTransport,
-  createMockTransport,
-  parseSSE,
-  TransportError,
-  createPydanticAIChatTransport,
-  createToolIdQueue,
-  mapPydanticAIEvent,
-  createPydanticAISSEMap,
-  type HttpTransportConfig,
-  type MockTransportOptions,
-  type ParseSSEOptions,
-  type PydanticAIChatTransportOpts,
-  type PydanticAIEvent,
-  type ToolIdQueue,
-} from './core/transport';
-
-// Hooks — no JSX, no UI
-export {
-  useChat,
-  useChatComposer,
-  useChatScroll,
-  useChatHistory,
-  useChatLayout,
-  useChatAudio,
-  useAutoFocusOnStreamEnd,
-  useRegisterComposer,
-  useChatReset,
-  useVisitorFingerprint,
-  useChatDockPrefs,
-  DEFAULT_DOCK_PREFS,
-  useFocusOnEmptyClick,
-  useChatUnread,
-  useChatUnreadNotifier,
-  useChatLightbox,
-  type UseChatUnreadOptions,
-  type UseChatUnreadReturn,
-  type UseChatUnreadNotifierOptions,
-  type UseChatConfig,
-  type UseChatReturn,
-  type UseChatComposerOptions,
-  type UseChatComposerReturn,
-  type UseChatScrollOptions,
-  type UseChatScrollReturn,
-  type UseChatHistoryOptions,
-  type UseChatLayoutConfig,
-  type UseChatLayoutReturn,
-  type UseAutoFocusOnStreamEndOptions,
-  type Focusable,
-  type UseChatResetOptions,
-  type UseChatResetReturn,
-  type UseVisitorFingerprintOptions,
-  type ChatDockPrefs,
-  type UseChatDockPrefsOptions,
-  type UseChatDockPrefsReturn,
-  type UseFocusOnEmptyClickOptions,
-  type UseChatLightboxReturn,
-  type ChatLightboxState,
-} from './hooks';
-
-// Audio
-export {
-  useChatAudioPrefs,
-  DEFAULT_CHAT_SOUNDS,
-  type ChatAudioEvent,
-  type ChatAudioSounds,
-  type ChatAudioConfig,
-  type UseChatAudioReturn,
-} from './core/audio';
-
-// Notifier — title rotation + favicon badge + cross-tab decorator. Pure
-// browser-API code, no React, no UI components.
-export {
-  createBrowserNotifier,
-  createNoopNotifier,
-  createTitleRotator,
-  createFaviconBadge,
-  createCrossTabNotifier,
-  isPageHidden,
-  onVisibilityChange,
-  type ChatNotifier,
-  type BrowserNotifierOptions,
-  type TitleRotatorOptions,
-  type TitleMode,
-  type FaviconBadgeOptions,
-  type CrossTabNotifierOptions,
-} from './notifier';
-
-// Tool-call payload dispatcher — pure
-export {
-  dispatchToolPayload,
-  isPlainObject,
-  isLatLng,
-  isGeoJSONFeatureCollection,
-  isStringValue,
-  type ToolPayloadMatcher,
-  type ToolPayloadFallback,
-} from './core/payload-dispatch';
-
-// Logger — pure
-export {
-  getChatLogger,
-  type ChatLogger,
-  type ChatLogScope,
-} from './core/logger';
-
-// Utils — pure
-export { sanitizeDraft, isSubmittableDraft } from './utils/sanitizeDraft';
-export { collectImageAttachments } from './utils/collectImageAttachments';
-
-// Style tokens — strings + hooks, no UI components
-export {
-  BUBBLE_SURFACE,
-  ANCHOR,
-  TOGGLE,
-  DESTRUCTIVE_SURFACE,
-  TOOL_CALL,
-  useChatBubbleStyles,
-  useChatRoleStyles,
-  useChatDestructiveStyles,
-  type ChatBubbleSurface,
-  type ChatBubbleStyles,
-  type ChatRoleStyles,
-  type ChatDestructiveStyles,
-} from './styles';
-
-// Provider / context — needed by callers wiring custom chat shells
-export {
-  ChatProvider,
-  useChatContext,
-  useChatContextOptional,
-  type ChatContextValue,
-  type ChatProviderProps,
-} from './context';
-
 // ============================================================================
 // Composable surface — synchronously re-exported components and their prop
 // types. These are needed by consumers that build custom chat shells
-// (e.g. `@djangocfg/crm`'s AdminChat / PublicChat) rather than rendering
-// `LazyChat` directly.
+// (e.g. `@djangocfg/crm`'s AdminChat / PublicChat, Storybook stories)
+// rather than rendering `LazyChat` directly.
 //
 // They DO transitively pull in MarkdownMessage / Sources / StreamingIndicator
 // when actually rendered. Importing the types alone is free. Importing the
 // component costs the dependency graph — that's the price of a custom shell.
-//
-// Apps that want maximum laziness should use `LazyChat` / `LazyChatLauncher`
-// above and skip these.
 // ============================================================================
 
-export {
-  ChatLauncher,
-  ChatFAB,
-  ChatDock,
-  ChatHeader,
-  ChatHeaderActionButton,
-  ChatHeaderAudioToggle,
-  ChatHeaderLanguageButton,
-  ChatHeaderModeToggle,
-  ChatHeaderResetButton,
-  ChatGreeting,
-  ChatUnreadPreview,
-} from './launcher';
+export * from './messages';
+export * from './composer';
+export * from './shell';
+export * from './launcher';
 
+// Highlight — AI-driven `point` directives (lightweight, no heavy deps).
 export {
-  ChatRoot,
-  MessageList,
-  MessageBubble,
-  MessageActions,
-  Composer,
-  Sources,
-  ToolCalls,
-  Attachments,
-  AttachmentsGrid,
-  AttachmentsList,
-  EmptyState,
-  ErrorBanner,
-  JumpToLatest,
-  StreamingIndicator,
-  AudioToggle,
-} from './components';
-
-// Heavy-component prop types
-export type {
-  ChatLauncherProps,
-  ChatLauncherHotkey,
-  ChatLauncherGreeting,
-  ChatHeaderSlots,
-  ChatHeaderResetSlot,
-  ChatHeaderLanguageSlot,
-  ChatHeaderModeToggleSlot,
-  ChatFABProps,
-  ChatFABPosition,
-  ChatFABVariant,
-  ChatFABSize,
-  ChatDockProps,
-  ChatDockMode,
-  ChatDockSide,
-  ChatHeaderProps,
-  ChatHeaderActionButtonProps,
-  ChatHeaderModeToggleProps,
-  ChatHeaderAudioToggleProps,
-  ChatHeaderResetButtonProps,
-  ChatHeaderLanguageButtonProps,
-  ChatGreetingProps,
-  ChatUnreadPreviewProps,
-  ChatPresencePhase,
-} from './launcher';
-
-export { useChatPresence } from './launcher';
-
-export type {
-  ChatRootProps,
-  MessageListProps,
-  MessageListHandle,
-  MessageBubbleProps,
-  MessageActionsProps,
-  ComposerProps,
-  SourcesProps,
-  ToolCallsProps,
-  ToolPayloadKind,
-  AttachmentsProps,
-  AttachmentsGridProps,
-  AttachmentsListProps,
-  AttachmentRenderer,
-  AttachmentRendererArgs,
-  AttachmentRendererMap,
-  EmptyStateProps,
-  ErrorBannerProps,
-  JumpToLatestProps,
-  StreamingIndicatorProps,
-  AudioToggleProps,
-} from './components';
+  HighlightOverlay,
+  SpotlightCanvas,
+  useHighlightTargets,
+  resolveRefs,
+  type HighlightOverlayProps,
+  type SpotlightCanvasProps,
+  type RefResolver,
+  type PointDirective,
+  type HighlightTarget,
+  type SpotlightRect,
+  type CSTRefId,
+} from './highlight';

package/src/tools/Chat/{components → messages}/MessageBubble.tsx

@@ -26,7 +26,10 @@ import {
   type AttachmentRendererMap,
 } from './Attachments';
 import { MessageActions } from './MessageActions';
+import { MessageBlocks } from './blocks';
+import type { BlockRegistry } from './blocks';
 import type { ToolCallsProps } from './ToolCalls';
+import type { ComposerAppearance } from '../composer/types';
 
 export interface MessageBubbleProps {
   message: ChatMessage;
@@ -42,6 +45,9 @@ export interface MessageBubbleProps {
   showTimestamp?: boolean;
   showActions?: boolean;
   isCompact?: boolean;
+  /** Spaciousness of the bubble — `full` scales padding, text, avatar up
+   * for full-page chat. `compact` (default) keeps the current geometry. */
+  appearance?: ComposerAppearance;
   className?: string;
   beforeContent?: ReactNode;
   afterContent?: ReactNode;
@@ -52,6 +58,11 @@ export interface MessageBubbleProps {
   attachmentsRenderer?: (atts: ChatAttachment[]) => ReactNode;
   /** Per-type attachment renderers forwarded to default `<Attachments>`. */
   attachmentRenderers?: AttachmentRendererMap;
+  /**
+   * Registry of `kind` → renderer for `message.blocks`. Prop beats
+   * context; both fall back to `BUILTIN_BLOCK_REGISTRY`.
+   */
+  blockRegistry?: BlockRegistry;
   /** Click handler for attachment tiles (e.g. open lightbox). */
   onAttachmentOpen?: (a: ChatAttachment) => void;
   onCopy?: () => void;
@@ -96,6 +107,28 @@ export interface MessageBubbleProps {
   renderAfterMessage?: (m: ChatMessage) => ReactNode;
 }
 
+/** Extra spaciousness layered on top of the default bubble geometry when
+ *  `appearance="full"`. Empty strings for `compact` keep every pixel of the
+ *  current geometry untouched (backward-compat). */
+const APPEARANCE_CLASSES: Record<ComposerAppearance, {
+  row: string;
+  avatar: string;
+  avatarFallback: string;
+  bubble: string;
+  meta: string;
+}> = {
+  compact: { row: '', avatar: '', avatarFallback: '', bubble: '', meta: '' },
+  full: {
+    row: 'gap-4',
+    avatar: 'size-10',
+    avatarFallback: 'text-sm',
+    // Roomy ChatGPT-style bubble: larger text with generous line-height
+    // and padding so a full-page chat reads spacious, not just bigger.
+    bubble: 'rounded-3xl px-5 py-3.5 text-base leading-relaxed',
+    meta: 'text-xs',
+  },
+};
+
 const MessageBubbleInner = ({
   message,
   isUser: isUserProp,
@@ -107,6 +140,7 @@ const MessageBubbleInner = ({
   showTimestamp = false,
   showActions = true,
   isCompact = false,
+  appearance = 'compact',
   className,
   beforeContent,
   afterContent,
@@ -115,6 +149,7 @@ const MessageBubbleInner = ({
   sourcesRenderer,
   attachmentsRenderer,
   attachmentRenderers,
+  blockRegistry,
   onAttachmentOpen,
   onCopy,
   onRegenerate,
@@ -133,6 +168,9 @@ const MessageBubbleInner = ({
   );
 
   const ctx = useChatContextOptional();
+  // Prop beats context; `<MessageBlocks>` falls back to the built-in
+  // registry when both are absent.
+  const resolvedBlockRegistry = blockRegistry ?? ctx?.blockRegistry;
   const persona = resolvePersona(
     message,
     user ?? ctx?.config.user,
@@ -140,6 +178,9 @@ const MessageBubbleInner = ({
   );
   const initials = deriveInitials(persona, message.role);
   const personaName = persona.name ?? (isUser ? 'You' : 'Assistant');
+  // `appearance` scales the whole bubble (padding, text, avatar) so a
+  // full-page chat reads like ChatGPT/Gemini. `compact` = no changes.
+  const ap = APPEARANCE_CLASSES[appearance];
 
   return (
     <div
@@ -149,19 +190,20 @@ const MessageBubbleInner = ({
       data-role={message.role}
       className={cn(
         'group/msg flex gap-2.5 px-2.5 py-2',
+        ap.row,
         isUser ? 'flex-row-reverse' : 'flex-row',
         className,
       )}
     >
       {showAvatar ? (
         <Avatar
-          className="size-7 shrink-0"
+          className={cn('size-7 shrink-0', ap.avatar)}
           title={persona.description ?? personaName}
         >
           {avatarSrc || persona.avatarUrl ? (
             <AvatarImage src={avatarSrc ?? persona.avatarUrl} alt={personaName} />
           ) : null}
-          <AvatarFallback className="text-[10px]">
+          <AvatarFallback className={cn('text-[10px]', ap.avatarFallback)}>
             {avatarFallback ?? initials}
           </AvatarFallback>
         </Avatar>
@@ -195,6 +237,7 @@ const MessageBubbleInner = ({
         <div
           className={cn(
             'inline-block max-w-full rounded-2xl px-3.5 py-2 text-sm',
+            ap.bubble,
             bubbleSurface,
           )}
         >
@@ -210,7 +253,7 @@ const MessageBubbleInner = ({
             <MarkdownMessage
               content={message.content || (isErr ? '*Failed to generate a response.*' : '')}
               isUser={isUser}
-              isCompact={isCompact}
+              size={appearance === 'full' ? 'base' : isCompact ? 'xs' : 'sm'}
               plainText={isStreaming}
             />
           ) : (
@@ -218,6 +261,15 @@ const MessageBubbleInner = ({
           )}
         </div>
 
+        {message.blocks?.length ? (
+          <MessageBlocks
+            blocks={message.blocks}
+            registry={resolvedBlockRegistry}
+            appearance={appearance}
+            isUser={isUser}
+          />
+        ) : null}
+
         {message.toolCalls?.length
           ? toolCallsRenderer
             ? toolCallsRenderer(message.toolCalls)
@@ -246,7 +298,7 @@ const MessageBubbleInner = ({
         ) : null}
 
         {showTimestamp ? (
-          <div className="mt-1 text-[10px] text-muted-foreground">
+          <div className={cn('mt-1 text-[10px] text-muted-foreground', ap.meta)}>
             {new Date(message.createdAt).toLocaleTimeString()}
           </div>
         ) : null}
@@ -269,7 +321,8 @@ export const MessageBubble = memo(MessageBubbleInner, (prev, next) => {
     a.toolActivity === b.toolActivity &&
     a.toolCalls === b.toolCalls &&
     a.sources === b.sources &&
-    a.attachments === b.attachments
+    a.attachments === b.attachments &&
+    a.blocks === b.blocks
   );
 });
 MessageBubble.displayName = 'MessageBubble';

package/src/tools/Chat/{components → messages}/MessageList.tsx

@@ -2,7 +2,6 @@
 
 import {
   type ReactNode,
-  type RefObject,
   forwardRef,
   useCallback,
   useEffect,
@@ -20,6 +19,7 @@ import { useCopy } from '@djangocfg/ui-core/hooks';
 import type { ChatMessage } from '../types';
 import { useChatContextOptional } from '../context';
 import { MessageBubble } from './MessageBubble';
+import type { ComposerAppearance } from '../composer/types';
 
 export interface MessageListProps {
   messages?: ChatMessage[];
@@ -34,18 +34,6 @@ export interface MessageListProps {
    * `startReached` until `data` length grows).
    */
   onStartReached?: () => void;
-  /**
-   * @deprecated Kept as a no-op for backwards compatibility — wire
-   * `onStartReached` instead. Virtuoso owns the scroll viewport now,
-   * external sentinels never see scroll events.
-   */
-  topSentinelRef?: RefObject<HTMLDivElement | null>;
-  /**
-   * @deprecated Kept as a no-op for backwards compatibility — Virtuoso
-   * exposes `scrollToIndex` via the imperative handle instead. See
-   * `useChatScroll` for the chat-friendly wrapper.
-   */
-  bottomRef?: RefObject<HTMLDivElement | null>;
   className?: string;
   itemClassName?: string;
   /**
@@ -55,15 +43,6 @@ export interface MessageListProps {
    * always. Plan64.
    */
   noVirtualize?: boolean;
-  /**
-   * @deprecated No-op as of 2.1.373. We intentionally let Virtuoso run
-   * its first-item probe pass: cmdop bubbles vary from 40px (one-line
-   * user message) to 800px (markdown with code blocks), so any single
-   * estimate fed here forces a measure/reshape loop on every render.
-   * The kept prop avoids a breaking-change bump for hosts that still
-   * pass it explicitly.
-   */
-  defaultItemHeight?: number;
   /**
    * Fires when the viewport sticky state changes — `true` when the
    * user is pinned to the bottom (streaming token deltas keep them
@@ -86,6 +65,10 @@ export interface MessageListProps {
    * reply, even if they were scrolled up. Plan11.
    */
   scrollAnchorId?: string | number | null;
+  /** Spaciousness of the default `<MessageBubble>`s — `full` scales the
+   * whole bubble up for full-page chat. Default `compact` (no change).
+   * Ignored when `renderItem` is set (the host owns bubble rendering). */
+  appearance?: ComposerAppearance;
 }
 
 export interface MessageListHandle {
@@ -103,14 +86,13 @@ export const MessageList = forwardRef<MessageListHandle, MessageListProps>(funct
     className,
     itemClassName,
     noVirtualize = false,
-    defaultItemHeight: _deprecatedDefaultItemHeight,
     onAtBottomChange,
     atBottomThreshold = 120,
     scrollAnchorId,
+    appearance = 'compact',
   },
   ref,
 ) {
-  void _deprecatedDefaultItemHeight;
   const ctx = useChatContextOptional();
   const messages = messagesProp ?? ctx?.messages ?? [];
   const isLoadingMore = isLoadingMoreProp ?? ctx?.isLoadingMore ?? false;
@@ -167,13 +149,14 @@ export const MessageList = forwardRef<MessageListHandle, MessageListProps>(funct
       <div className={itemClassName}>
         <MessageBubble
           message={m}
+          appearance={appearance}
           onCopy={() => void copyToClipboard(m.content)}
           onRegenerate={ctx ? () => void ctx.regenerate(m.id) : undefined}
           onDelete={ctx ? () => ctx.deleteMessage(m.id) : undefined}
         />
       </div>
     ),
-    [itemClassName, ctx, copyToClipboard],
+    [itemClassName, ctx, copyToClipboard, appearance],
   );
 
   const itemRenderer = renderItem ?? defaultRenderItem;