@djangocfg/ui-tools 2.1.407 → 2.1.409

package/src/tools/Chat/messages/blocks/MessageBlocks.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+/**
+ * `<MessageBlocks>` — walks `message.blocks`, dispatches each through the
+ * registry, and renders it under the bubble (text/markdown in a bubble
+ * wrapper, media full-width). Per-block error isolation + unknown-kind
+ * fallback keep one bad block from blanking the transcript.
+ */
+
+import { Component, type ReactNode } from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+import type { MessageBlock } from '../../types/block';
+import { useChatBubbleStyles } from '../../styles';
+import { BUILTIN_BLOCK_REGISTRY, type BlockRegistry } from './registry';
+
+export interface MessageBlocksProps {
+  blocks?: MessageBlock[];
+  /** Registry of `kind` → renderer. Defaults to `BUILTIN_BLOCK_REGISTRY`. */
+  registry?: BlockRegistry;
+  /** Spaciousness forwarded to renderers. */
+  appearance?: 'compact' | 'full';
+  isUser?: boolean;
+  /**
+   * When true, an unknown `kind` renders a visible dev notice. When
+   * false (default) it is skipped silently — production-lenient.
+   */
+  strict?: boolean;
+}
+
+/** Block kinds rendered inside a chat-bubble surface, not full-width. */
+const PROSE_KINDS = new Set<MessageBlock['kind']>(['text', 'markdown']);
+
+interface BoundaryProps {
+  kind: string;
+  children: ReactNode;
+}
+interface BoundaryState {
+  failed: boolean;
+}
+
+/** Minimal per-block error boundary. */
+class BlockErrorBoundary extends Component<BoundaryProps, BoundaryState> {
+  state: BoundaryState = { failed: false };
+
+  static getDerivedStateFromError(): BoundaryState {
+    return { failed: true };
+  }
+
+  render() {
+    if (this.state.failed) {
+      return (
+        <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-muted-foreground">
+          Failed to render a {this.props.kind} block.
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+function UnknownBlock({ kind }: { kind: string }) {
+  return (
+    <div className="rounded-lg border border-dashed border-border px-3 py-2 text-xs text-muted-foreground">
+      Unknown block kind: <code className="font-mono">{kind}</code>
+    </div>
+  );
+}
+
+export function MessageBlocks({
+  blocks,
+  registry = BUILTIN_BLOCK_REGISTRY,
+  appearance = 'compact',
+  isUser = false,
+  strict = false,
+}: MessageBlocksProps) {
+  const { surface: bubbleSurface } = useChatBubbleStyles(
+    isUser ? 'user' : 'assistant',
+    false,
+  );
+
+  if (!blocks?.length) return null;
+
+  return (
+    <div
+      className={cn('mt-1.5 flex w-full flex-col gap-2', isUser && 'items-end')}
+    >
+      {blocks.map((block) => {
+        const renderer = registry[block.kind] as
+          | ((b: MessageBlock, c: { appearance: 'compact' | 'full'; isUser: boolean }) => ReactNode)
+          | undefined;
+
+        let body: ReactNode;
+        if (renderer) {
+          body = renderer(block, { appearance, isUser });
+        } else if (strict) {
+          body = <UnknownBlock kind={block.kind} />;
+        } else {
+          return null;
+        }
+
+        const isProse = PROSE_KINDS.has(block.kind);
+
+        return (
+          <div key={block.id} data-block-kind={block.kind} className="w-full">
+            {block.caption ? (
+              <div className="mb-1 text-xs font-medium text-muted-foreground">
+                {block.caption}
+              </div>
+            ) : null}
+            <BlockErrorBoundary kind={block.kind}>
+              {isProse ? (
+                <div
+                  className={cn(
+                    'inline-block max-w-full rounded-2xl px-3.5 py-2 text-sm',
+                    bubbleSurface,
+                  )}
+                >
+                  {body}
+                </div>
+              ) : (
+                body
+              )}
+            </BlockErrorBoundary>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/tools/Chat/messages/blocks/builtin.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+/**
+ * Built-in block registry.
+ *
+ * Each media renderer is reached through a `React.lazy` indirection, so a
+ * chat that never shows (say) a map block never downloads MapLibre. This
+ * module must NOT statically import any tool — only `React.lazy(() =>
+ * import('./renderers/…'))` thunks. The `text`/`markdown` kinds are the
+ * sole exception: `MarkdownMessage` is already a Chat dependency.
+ */
+
+import { lazy, Suspense, type ComponentType } from 'react';
+
+import { MarkdownMessage } from '../../../MarkdownMessage';
+import type {
+  AudioBlock,
+  CodeBlock,
+  GalleryBlock,
+  ImageBlock,
+  JsonBlock,
+  LottieBlock,
+  MapBlock,
+  MarkdownBlock,
+  MermaidBlock,
+  MessageBlock,
+  TextBlock,
+  VideoBlock,
+} from '../../types/block';
+import type { BlockRegistry } from './registry';
+import type { BlockRendererProps } from './renderers/types';
+
+/** Minimal inline placeholder while a renderer chunk streams in. */
+function BlockFallback() {
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className="h-16 w-full animate-pulse rounded-xl bg-muted/60"
+    />
+  );
+}
+
+/** Wrap a lazily-loaded renderer in a Suspense boundary. */
+function lazyBlock<B extends MessageBlock>(
+  loader: () => Promise<{ default: ComponentType<BlockRendererProps<B>> }>,
+) {
+  const Lazy = lazy(loader);
+  return function LazyBlockRenderer(props: BlockRendererProps<B>) {
+    return (
+      <Suspense fallback={<BlockFallback />}>
+        <Lazy {...props} />
+      </Suspense>
+    );
+  };
+}
+
+const AudioBlockRenderer = lazyBlock<AudioBlock>(() => import('./renderers/AudioBlock'));
+const VideoBlockRenderer = lazyBlock<VideoBlock>(() => import('./renderers/VideoBlock'));
+const ImageBlockRenderer = lazyBlock<ImageBlock>(() => import('./renderers/ImageBlock'));
+const GalleryBlockRenderer = lazyBlock<GalleryBlock>(() => import('./renderers/GalleryBlock'));
+const MapBlockRenderer = lazyBlock<MapBlock>(() => import('./renderers/MapBlock'));
+const JsonBlockRenderer = lazyBlock<JsonBlock>(() => import('./renderers/JsonBlock'));
+const MermaidBlockRenderer = lazyBlock<MermaidBlock>(() => import('./renderers/MermaidBlock'));
+const CodeBlockRenderer = lazyBlock<CodeBlock>(() => import('./renderers/CodeBlock'));
+const LottieBlockRenderer = lazyBlock<LottieBlock>(() => import('./renderers/LottieBlock'));
+
+/** Render a `text` / `markdown` block as bubble-styled prose. */
+function renderProse(content: string, isUser: boolean) {
+  return <MarkdownMessage content={content} isUser={isUser} size="sm" />;
+}
+
+/**
+ * The default registry. Host registries are merged over this via
+ * `createBlockRegistry(overrides)`.
+ */
+export const BUILTIN_BLOCK_REGISTRY: BlockRegistry = {
+  text: (block: TextBlock, ctx) => renderProse(block.text, ctx.isUser),
+  markdown: (block: MarkdownBlock, ctx) => renderProse(block.markdown, ctx.isUser),
+  audio: (block, ctx) => <AudioBlockRenderer block={block} ctx={ctx} />,
+  video: (block, ctx) => <VideoBlockRenderer block={block} ctx={ctx} />,
+  image: (block, ctx) => <ImageBlockRenderer block={block} ctx={ctx} />,
+  gallery: (block, ctx) => <GalleryBlockRenderer block={block} ctx={ctx} />,
+  map: (block, ctx) => <MapBlockRenderer block={block} ctx={ctx} />,
+  json: (block, ctx) => <JsonBlockRenderer block={block} ctx={ctx} />,
+  mermaid: (block, ctx) => <MermaidBlockRenderer block={block} ctx={ctx} />,
+  code: (block, ctx) => <CodeBlockRenderer block={block} ctx={ctx} />,
+  lottie: (block, ctx) => <LottieBlockRenderer block={block} ctx={ctx} />,
+  // `custom` has no built-in renderer — it falls through to the
+  // unknown-kind fallback unless the host registers one.
+};

package/src/tools/Chat/messages/blocks/index.ts

@@ -0,0 +1,12 @@
+'use client';
+
+/** Message blocks — typed rich-content slots rendered under a bubble. */
+
+export { MessageBlocks, type MessageBlocksProps } from './MessageBlocks';
+export {
+  createBlockRegistry,
+  BUILTIN_BLOCK_REGISTRY,
+  type BlockRegistry,
+  type BlockRenderer,
+  type BlockRenderContext,
+} from './registry';

package/src/tools/Chat/messages/blocks/registry.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+/**
+ * Block registry — maps a `MessageBlock['kind']` to a renderer.
+ *
+ * Mirrors `AttachmentRendererMap`, but keyed by a discriminant instead of
+ * a predicate: cheaper, exhaustively typed, host-extensible. The built-in
+ * registry (`BUILTIN_BLOCK_REGISTRY`) lives in `./builtin` so this module
+ * stays free of any tool import.
+ */
+
+import type { ReactNode } from 'react';
+
+import type { MessageBlock, MessageBlockKind, BlockAppearance } from '../../types/block';
+import { BUILTIN_BLOCK_REGISTRY } from './builtin';
+
+/** Context passed to every renderer alongside the block. */
+export interface BlockRenderContext {
+  appearance: BlockAppearance;
+  isUser: boolean;
+}
+
+/** A renderer for one `kind`. The union is narrowed by the registry key. */
+export type BlockRenderer<K extends MessageBlockKind = MessageBlockKind> = (
+  block: Extract<MessageBlock, { kind: K }>,
+  ctx: BlockRenderContext,
+) => ReactNode;
+
+/** Partial map of `kind` → renderer. Missing kinds fall back to unknown. */
+export type BlockRegistry = {
+  [K in MessageBlockKind]?: BlockRenderer<K>;
+};
+
+/**
+ * Merge host overrides over the built-in registry. Overrides win by key —
+ * `{ map: myMapRenderer }` swaps only the map renderer.
+ */
+export function createBlockRegistry(overrides?: BlockRegistry): BlockRegistry {
+  return { ...BUILTIN_BLOCK_REGISTRY, ...overrides };
+}
+
+export { BUILTIN_BLOCK_REGISTRY };

package/src/tools/Chat/messages/blocks/renderers/AudioBlock.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+/** Audio block — thin chat wrapper around `AudioPlayer`. */
+
+import { LazyPlayer } from '../../../../AudioPlayer/lazy';
+import type { AudioBlock } from '../../../types/block';
+import type { BlockRendererProps } from './types';
+
+export default function AudioBlockRenderer({ block, ctx }: BlockRendererProps<AudioBlock>) {
+  const variant = block.variant ?? (ctx.appearance === 'compact' ? 'compact' : 'default');
+  return (
+    <LazyPlayer
+      src={block.src}
+      title={block.title}
+      artist={block.artist}
+      cover={block.cover}
+      variant={variant}
+    />
+  );
+}

package/src/tools/Chat/messages/blocks/renderers/CodeBlock.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+/** Code block — read-only syntax highlighting via `PrettyCode`. */
+
+import { LazyPrettyCode } from '../../../../PrettyCode/lazy';
+import type { Language } from '../../../../PrettyCode/lazy';
+import type { CodeBlock } from '../../../types/block';
+import type { BlockRendererProps } from './types';
+
+export default function CodeBlockRenderer({ block, ctx }: BlockRendererProps<CodeBlock>) {
+  const compact = ctx.appearance === 'compact';
+  return (
+    <LazyPrettyCode
+      data={block.code}
+      language={block.language as Language}
+      isCompact={compact}
+    />
+  );
+}

package/src/tools/Chat/messages/blocks/renderers/GalleryBlock.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+/** Gallery block — thin chat wrapper around `Gallery`. */
+
+import { Gallery } from '../../../../Gallery';
+import type { GalleryMediaItem } from '../../../../Gallery';
+import type { GalleryBlock } from '../../../types/block';
+import type { BlockRendererProps } from './types';
+
+export default function GalleryBlockRenderer({ block, ctx }: BlockRendererProps<GalleryBlock>) {
+  const images: GalleryMediaItem[] = block.items.map((item) => ({
+    id: item.id,
+    src: item.src,
+    thumbnail: item.thumbnail,
+    alt: item.alt,
+  }));
+  return (
+    <div className="overflow-hidden rounded-xl border border-border">
+      <Gallery
+        images={images}
+        showThumbnails={ctx.appearance !== 'compact'}
+        enableLightbox
+      />
+    </div>
+  );
+}

package/src/tools/Chat/messages/blocks/renderers/ImageBlock.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+/** Image block — interactive → `ImageViewer`, otherwise a plain `<img>`. */
+
+import { LazyImageViewer } from '../../../../ImageViewer/lazy';
+import type { ImageBlock } from '../../../types/block';
+import type { BlockRendererProps } from './types';
+
+export default function ImageBlockRenderer({ block }: BlockRendererProps<ImageBlock>) {
+  if (block.interactive) {
+    return (
+      <div className="overflow-hidden rounded-xl border border-border">
+        <LazyImageViewer
+          images={[{ file: { name: block.alt ?? 'image', path: block.src }, src: block.src }]}
+        />
+      </div>
+    );
+  }
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={block.src}
+      alt={block.alt ?? ''}
+      className="max-h-96 w-auto max-w-full rounded-xl border border-border object-contain"
+    />
+  );
+}

package/src/tools/Chat/messages/blocks/renderers/JsonBlock.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+/** JSON block — thin chat wrapper around `JsonTree`. */
+
+import { LazyJsonTree } from '../../../../JsonTree/lazy';
+import type { JsonBlock } from '../../../types/block';
+import type { BlockRendererProps } from './types';
+
+export default function JsonBlockRenderer({ block, ctx }: BlockRendererProps<JsonBlock>) {
+  const mode = block.mode ?? (ctx.appearance === 'compact' ? 'compact' : 'full');
+  return <LazyJsonTree data={block.data} mode={mode} />;
+}

package/src/tools/Chat/messages/blocks/renderers/LottieBlock.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+/** Lottie block — thin chat wrapper around `LottiePlayer`. */
+
+import { LazyLottiePlayer } from '../../../../LottiePlayer/lazy';
+import type { LottieBlock } from '../../../types/block';
+import type { BlockRendererProps } from './types';
+
+export default function LottieBlockRenderer({ block, ctx }: BlockRendererProps<LottieBlock>) {
+  return <LazyLottiePlayer src={block.src} size={ctx.appearance === 'compact' ? 'sm' : 'md'} />;
+}

package/src/tools/Chat/messages/blocks/renderers/MapBlock.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+/** Map block — thin chat wrapper around `LazyMapContainer` + `MapMarker`. */
+
+import { LazyMapContainer, MapMarker } from '../../../../Map/lazy';
+import type { MarkerData } from '../../../../Map/lazy';
+import type { MapBlock } from '../../../types/block';
+import type { BlockRendererProps } from './types';
+
+export default function MapBlockRenderer({ block, ctx }: BlockRendererProps<MapBlock>) {
+  const height = ctx.appearance === 'compact' ? 240 : 380;
+  return (
+    <div
+      className="overflow-hidden rounded-xl border border-border"
+      style={{ height }}
+    >
+      <LazyMapContainer
+        initialViewport={{
+          longitude: block.center.lng,
+          latitude: block.center.lat,
+          zoom: block.zoom ?? 11,
+        }}
+      >
+        {block.markers?.map((m) => {
+          const marker: MarkerData = {
+            id: m.id,
+            longitude: m.lng,
+            latitude: m.lat,
+            data: m.label ? { label: m.label } : undefined,
+          };
+          return <MapMarker key={m.id} marker={marker} ariaLabel={m.label} />;
+        })}
+      </LazyMapContainer>
+    </div>
+  );
+}

package/src/tools/Chat/messages/blocks/renderers/MermaidBlock.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+/** Mermaid block — thin chat wrapper around `Mermaid`. */
+
+import { LazyMermaid } from '../../../../Mermaid/lazy';
+import type { MermaidBlock } from '../../../types/block';
+import type { BlockRendererProps } from './types';
+
+export default function MermaidBlockRenderer({ block }: BlockRendererProps<MermaidBlock>) {
+  return <LazyMermaid chart={block.chart} />;
+}

package/src/tools/Chat/messages/blocks/renderers/VideoBlock.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+/** Video block — thin chat wrapper around `VideoPlayer`. */
+
+import { VideoPlayer } from '../../../../VideoPlayer/VideoPlayer';
+import type { UrlSource } from '../../../../VideoPlayer/types';
+import type { VideoBlock } from '../../../types/block';
+import type { BlockRendererProps } from './types';
+
+export default function VideoBlockRenderer({ block }: BlockRendererProps<VideoBlock>) {
+  // `poster` lives on the structured source, not as a top-level prop. A
+  // raw URL string is auto-classified, but to carry a poster we wrap it
+  // in a `UrlSource`.
+  const source: UrlSource | string = block.poster
+    ? { type: 'url', url: block.src, poster: block.poster, title: block.title }
+    : block.src;
+  return (
+    <VideoPlayer
+      source={source}
+      aspectRatio={block.aspectRatio ?? 16 / 9}
+      className="overflow-hidden rounded-xl"
+    />
+  );
+}

package/src/tools/Chat/messages/blocks/renderers/types.ts

@@ -0,0 +1,8 @@
+/** Shared prop shape for every per-kind renderer module. */
+import type { MessageBlock } from '../../../types/block';
+import type { BlockRenderContext } from '../registry';
+
+export interface BlockRendererProps<B extends MessageBlock = MessageBlock> {
+  block: B;
+  ctx: BlockRenderContext;
+}

package/src/tools/Chat/{components → messages}/index.ts

@@ -1,6 +1,7 @@
 'use client';
 
-export { ChatRoot, type ChatRootProps } from './ChatRoot';
+/** Messages — chat transcript rendering (list, bubble, tool calls, …). */
+
 export {
   MessageList,
   type MessageListProps,
@@ -8,7 +9,6 @@ export {
 } from './MessageList';
 export { MessageBubble, type MessageBubbleProps } from './MessageBubble';
 export { MessageActions, type MessageActionsProps } from './MessageActions';
-export { Composer, type ComposerProps, type ComposerSize } from './Composer';
 export { Sources, type SourcesProps } from './Sources';
 export { ToolCalls, type ToolCallsProps, type ToolPayloadKind } from './ToolCalls';
 export {
@@ -22,8 +22,14 @@ export {
   type AttachmentRendererArgs,
   type AttachmentRendererMap,
 } from './Attachments';
-export { EmptyState, type EmptyStateProps } from './EmptyState';
-export { ErrorBanner, type ErrorBannerProps } from './ErrorBanner';
 export { JumpToLatest, type JumpToLatestProps } from './JumpToLatest';
 export { StreamingIndicator, type StreamingIndicatorProps } from './StreamingIndicator';
-export { AudioToggle, type AudioToggleProps } from './AudioToggle';
+export {
+  MessageBlocks,
+  type MessageBlocksProps,
+  createBlockRegistry,
+  BUILTIN_BLOCK_REGISTRY,
+  type BlockRegistry,
+  type BlockRenderer,
+  type BlockRenderContext,
+} from './blocks';