@djangocfg/ui-tools 2.1.430 → 2.1.432

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

@@ -1,35 +1,197 @@
 'use client';
 
-/** Map block — thin chat wrapper around `LazyMapContainer` + `MapMarker`. */
+/**
+ * Map block — thin chat wrapper around `LazyMapContainer`. Renders point
+ * markers plus optional routes (polylines) and polygons (filled zones) by
+ * building GeoJSON from the block's lat/lng payloads and feeding the map's
+ * existing `MapSource` + layer factories — no bespoke layer logic here.
+ */
 
-import { LazyMapContainer, MapMarker } from '../../../../dev/Map/lazy';
+import { LazyMapContainer, MapMarker, MapPopup, MarkerCard, MapSource, MapLayer, useMarkerCard } from '../../../../dev/Map/lazy';
 import type { MarkerData } from '../../../../dev/Map/lazy';
+import type { MapContainerProps } from '../../../../dev/Map/components';
+import {
+  createRouteLayers,
+  createPolygonLayer,
+  createPolygonOutlineLayer,
+} from '../../../../dev/Map/layers';
+import {
+  calculateBounds,
+  createLineString,
+  createPolygon,
+  createFeatureCollection,
+} from '../../../../dev/Map/utils';
 import type { MapBlock } from '../../../types/block';
 import type { BlockRendererProps } from './types';
 
+/** `[lng, lat]` tuple — GeoJSON / maplibre coordinate order. */
+type LngLat = [number, number];
+
+/**
+ * Derive an `initialViewport` that frames every coordinate. The map exposes
+ * an imperative `fitBounds` only through `useMapControl` (inside its own
+ * provider), which this frameless wrapper sits outside of — so instead we
+ * seed the initial center/zoom from the bounding box. Mirrors maplibre's own
+ * fit math: zoom for whichever axis (lng/lat) needs the most room.
+ */
+function viewportForBounds(points: LngLat[]): { longitude: number; latitude: number; zoom: number } {
+  const [[minLng, minLat], [maxLng, maxLat]] = calculateBounds(points) as [LngLat, LngLat];
+  const longitude = (minLng + maxLng) / 2;
+  const latitude = (minLat + maxLat) / 2;
+
+  const lngSpan = Math.max(maxLng - minLng, 1e-6);
+  const latSpan = Math.max(maxLat - minLat, 1e-6);
+  // World is 360° at zoom 0; each zoom level halves the visible span. Add a
+  // little padding (0.6) so geometry never hugs the edges, and clamp.
+  const zoomForSpan = (span: number, fullSpan: number) =>
+    Math.log2((fullSpan / span) * 0.6);
+  const zoom = Math.min(16, Math.max(1, Math.min(zoomForSpan(lngSpan, 360), zoomForSpan(latSpan, 180))));
+
+  return { longitude, latitude, zoom };
+}
+
+type BlockMarker = NonNullable<MapBlock['markers']>[number];
+
+/**
+ * Marker layer for the chat map block. Renders each marker (preserving the
+ * `icon` thumbnail / `color` pin) and, when a marker carries a serializable
+ * `card`, opens a `MarkerCard` popup ABOVE the pin on click. Selection is
+ * single-card via `useMarkerCard`. Lives inside `LazyMapContainer` so it has
+ * the MapProvider context.
+ */
+function MapBlockMarkers({ markers }: { markers: BlockMarker[] }) {
+  const { openId, toggle, close } = useMarkerCard();
+  const open = openId ? markers.find((m) => m.id === openId) : undefined;
+
+  return (
+    <>
+      {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}
+            color={m.color}
+            ariaLabel={m.card?.title ?? m.label}
+            onClick={m.card ? () => toggle(m.id) : undefined}
+          >
+            {m.icon ? (
+              <img
+                src={m.icon}
+                alt={m.label ?? ''}
+                className="h-7 w-7 rounded-full object-cover ring-2 ring-background shadow-md"
+              />
+            ) : undefined}
+          </MapMarker>
+        );
+      })}
+
+      {open?.card && (
+        <MapPopup
+          longitude={open.lng}
+          latitude={open.lat}
+          anchor="bottom"
+          onClose={close}
+          maxWidth="none"
+        >
+          <MarkerCard {...open.card} />
+        </MapPopup>
+      )}
+    </>
+  );
+}
+
 export default function MapBlockRenderer({ block, ctx }: BlockRendererProps<MapBlock>) {
   const height = ctx.appearance === 'compact' ? 240 : 380;
+
+  // The serializable map shape (center / markers / routes / polygons) is
+  // validated centrally at the registry dispatch point (MessageBlocks) before
+  // this renderer runs, so we can trust the payload here.
+  const routes = block.routes ?? [];
+  const polygons = block.polygons ?? [];
+  const markers = block.markers ?? [];
+
+  // Collect every coordinate so the viewport can frame the whole scene when
+  // the block doesn't pin an explicit center/zoom.
+  const allPoints: LngLat[] = [
+    ...markers.map((m): LngLat => [m.lng, m.lat]),
+    ...routes.flatMap((r) => r.points.map((p): LngLat => [p.lng, p.lat])),
+    ...polygons.flatMap((p) => p.points.map((pt): LngLat => [pt.lng, pt.lat])),
+  ];
+
+  // Respect an explicit zoom (author intent); otherwise auto-fit to geometry.
+  // Center always defaults to the block's `center` unless we have geometry to
+  // frame and no explicit zoom was given.
+  const fitted = block.zoom === undefined && allPoints.length > 1 ? viewportForBounds(allPoints) : null;
+  const initialViewport = {
+    longitude: fitted?.longitude ?? block.center.lng,
+    latitude: fitted?.latitude ?? block.center.lat,
+    zoom: block.zoom ?? fitted?.zoom ?? 11,
+  };
+
+  // Build the optional props into ONE typed object before spreading, rather
+  // than several inline conditional `{...(cond ? {…} : {})}` spreads. The
+  // inline form unions each branch to `{} | {prop}` and widens the call to a
+  // shape no single `MapContainer` overload accepts (TS2769) under stricter
+  // consumer resolution; a single `Partial<MapContainerProps>` literal is
+  // checked against the prop type as a unit.
+  const mapOptions: Partial<MapContainerProps> = {
+    ...(block.basemap ? { mapStyle: block.basemap } : {}),
+    ...(block.terrain ? { terrain: true } : {}),
+    ...(block.userLocation ? { geolocate: true } : {}),
+  };
+
+  // Frame (radius / border / shadow / clip) comes from the shared
+  // `BLOCK_SURFACE` in MessageBlocks — here we only set the height.
   return (
-    <div
-      className="overflow-hidden rounded-xl border border-border"
-      style={{ height }}
-    >
+    <div className="w-full" style={{ height }}>
       <LazyMapContainer
-        initialViewport={{
-          longitude: block.center.lng,
-          latitude: block.center.lat,
-          zoom: block.zoom ?? 11,
-        }}
+        initialViewport={initialViewport}
+        fullscreenTitle={block.caption ?? 'Map'}
+        {...mapOptions}
       >
-        {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} />;
+        {/* Filled zones first so routes/markers stack above them. */}
+        {polygons.map((poly) => {
+          const sourceId = `poly-${poly.id}`;
+          const data = createFeatureCollection([
+            createPolygon(poly.points.map((p): LngLat => [p.lng, p.lat]), poly.label ? { label: poly.label } : {}),
+          ]);
+          const fill = createPolygonLayer(`${sourceId}-fill`, sourceId, {
+            fillColor: poly.fillColor,
+            strokeColor: poly.strokeColor,
+          });
+          const outline = createPolygonOutlineLayer(`${sourceId}-outline`, sourceId, {
+            color: poly.strokeColor,
+          });
+          return (
+            <MapSource key={sourceId} id={sourceId} data={data}>
+              <MapLayer {...fill} />
+              <MapLayer {...outline} />
+            </MapSource>
+          );
         })}
+
+        {/* Routes (polylines) — white-outlined line via the route factory. */}
+        {routes.map((route) => {
+          const sourceId = `route-${route.id}`;
+          const data = createFeatureCollection([
+            createLineString(route.points.map((p): LngLat => [p.lng, p.lat]), route.label ? { label: route.label } : {}),
+          ]);
+          const { outline, route: line } = createRouteLayers({ sourceId, color: route.color });
+          return (
+            <MapSource key={sourceId} id={sourceId} data={data}>
+              <MapLayer {...outline} />
+              <MapLayer {...line} />
+            </MapSource>
+          );
+        })}
+
+        <MapBlockMarkers markers={markers} />
       </LazyMapContainer>
     </div>
   );

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

@@ -14,11 +14,8 @@ export default function VideoBlockRenderer({ block }: BlockRendererProps<VideoBl
   const source: UrlSource | string = block.poster
     ? { type: 'url', url: block.src, poster: block.poster, title: block.title }
     : block.src;
+  // Frame (radius / clip) comes from the shared `BLOCK_SURFACE`.
   return (
-    <VideoPlayer
-      source={source}
-      aspectRatio={block.aspectRatio ?? 16 / 9}
-      className="overflow-hidden rounded-xl"
-    />
+    <VideoPlayer source={source} aspectRatio={block.aspectRatio ?? 16 / 9} />
   );
 }

package/src/tools/chat/messages/index.ts

@@ -8,7 +8,20 @@ export {
   type MessageListHandle,
 } from './MessageList';
 export { MessageBubble, type MessageBubbleProps } from './MessageBubble';
+// Re-exported from the shared `common/link-preview` location (the card was
+// hoisted out of chat so the NotionEditor bookmark node can reuse it). The
+// chat public surface (`@djangocfg/ui-tools/chat`) keeps exporting it from
+// here unchanged.
+export { LinkPreviewCard, type LinkPreviewCardProps } from '../../../common/link-preview';
 export { MessageActions, type MessageActionsProps } from './MessageActions';
+export {
+  BubbleContextMenu,
+  buildDefaultBubbleMenuItems,
+  composeBubbleMenuItems,
+  type BubbleContextMenuProps,
+  type BubbleMenuItem,
+  type DefaultBubbleMenuHandlers,
+} from './BubbleContextMenu';
 export { Sources, type SourcesProps } from './Sources';
 export { ToolCalls, type ToolCallsProps, type ToolPayloadKind } from './ToolCalls';
 export {

package/src/tools/chat/public.ts

@@ -53,8 +53,12 @@ export type {
   JsonBlock,
   MermaidBlock,
   CodeBlock,
-  LottieBlock,
+  DiffBlock,
+  LinkBlock,
   CustomBlock,
+  LinkPreviewData,
+  ResolveLinkPreview,
+  ChatLinkPreviewConfig,
 } from './types';
 export { DEFAULT_LABELS } from './types';
 

package/src/tools/chat/shell/ChatRoot.tsx

@@ -26,6 +26,7 @@ import { EmptyState } from './EmptyState';
 import { ErrorBanner } from './ErrorBanner';
 import { JumpToLatest } from '../messages/JumpToLatest';
 import { MessageBubble } from '../messages/MessageBubble';
+import type { BubbleMenuItem } from '../messages/BubbleContextMenu';
 import { MessageList, type MessageListHandle } from '../messages/MessageList';
 import type { AttachmentRendererMap } from '../messages/Attachments';
 import type { BlockRegistry } from '../messages/blocks';
@@ -102,6 +103,27 @@ export interface ChatMessagesConfig {
    * Omit to use `BUILTIN_BLOCK_REGISTRY`.
    */
   blockRegistry?: BlockRegistry;
+  /**
+   * Host-injected EXTRA right-click / long-press menu items per bubble,
+   * merged after the built-in Copy / Regenerate / Delete defaults.
+   * Forwarded to `<MessageBubble bubbleMenuItems>`.
+   */
+  bubbleMenuItems?: BubbleMenuItem[];
+  /**
+   * Full control over each bubble's context menu — receives the message
+   * and the built-in defaults, returns the final ordered list. Beats
+   * `bubbleMenuItems`. Forwarded to `<MessageBubble getBubbleMenuItems>`.
+   */
+  getBubbleMenuItems?: (message: ChatMessage, defaults: BubbleMenuItem[]) => BubbleMenuItem[];
+  /**
+   * Host handler for the bubble "Edit" menu item (user messages only — the
+   * builtin builder user-gates it). The host loads the message's content into
+   * its composer for editing and re-runs the turn on submit via
+   * `chat.editMessage` (engine truncate+resend). When omitted the "Edit" item
+   * never appears. This is intentionally a host hook, not an inline editor: the
+   * edit happens in the real composer, not the bubble.
+   */
+  onEdit?: (message: ChatMessage) => void;
 }
 
 export interface ChatRootProps {
@@ -278,8 +300,15 @@ function ChatRootShell({ className, listClassName, parts }: ChatRootShellProps)
         blockRegistry={messages.blockRegistry}
         onAttachmentOpen={messages.onAttachmentOpen}
         renderAfterMessage={messages.renderAfter}
+        bubbleMenuItems={messages.bubbleMenuItems}
+        getBubbleMenuItems={messages.getBubbleMenuItems}
         onCopy={() => copy(m.content)}
         onRegenerate={() => void chat.regenerate(m.id)}
+        // Edit (user bubbles): hand the message to the host so it can load the
+        // text into the real composer. The host owns the edit-mode UI + the
+        // submit branch (chat.editMessage). Omitted handler → no Edit item.
+        // No in-bubble editor: editing happens in the composer, not the bubble.
+        onEdit={messages.onEdit ? () => messages.onEdit?.(m) : undefined}
         onDelete={() => chat.deleteMessage(m.id)}
       />
     ));

package/src/tools/chat/styles/bubbleTokens.ts

@@ -23,6 +23,24 @@ export const BUBBLE_SURFACE = {
   error: 'bg-destructive/10 text-destructive rounded-tl-md border border-destructive/30',
 } as const;
 
+/**
+ * Shared media-block surface — the single frame every non-prose
+ * `message.blocks` renderer sits in (image, video, gallery, map, audio,
+ * code, json, mermaid). Owning the frame here (instead of each
+ * renderer inventing its own) guarantees one consistent corner radius,
+ * hairline border and soft shadow across all block kinds — the calm,
+ * uniform media-card look of Telegram / WhatsApp.
+ *
+ * `rounded-2xl` (16px) — large, soft messenger corner.
+ * `border-border`     — hairline, theme-aware.
+ * `shadow-sm`         — gentle lift off the transcript background.
+ * `overflow-hidden`   — clips inner content (maps, images) to the radius.
+ * `bg-card`           — neutral surface so a renderer with a transparent
+ *                       body (json tree) still reads as a card.
+ */
+export const BLOCK_SURFACE =
+  'overflow-hidden rounded-2xl border border-border bg-card shadow-sm' as const;
+
 /**
  * Anchor (link) classes for markdown content rendered inside a bubble.
  *

package/src/tools/chat/styles/index.ts

@@ -1,5 +1,6 @@
 export {
   BUBBLE_SURFACE,
+  BLOCK_SURFACE,
   ANCHOR,
   TOGGLE,
   DESTRUCTIVE_SURFACE,

package/src/tools/chat/types/attachment.ts

@@ -2,9 +2,32 @@
  * Attachments + sources attached to a chat message.
  */
 
+/**
+ * Rich-preview payload for a localpreview-style attachment card. Serializable
+ * JSON only (no React nodes) so it survives history persistence + SSE — the
+ * render seam already exists (`AttachmentRendererMap`); this is the DATA that
+ * feeds it. One generic bag instead of a typed field per media kind: a host
+ * populates `kind` + `fields[]` (duration, dimensions, pages, EXIF…) and the
+ * default/per-type renderer reads it. Absent → renderer falls back to the
+ * name+thumbnail chip.
+ */
+export interface AttachmentPreview {
+  /** Drives which rich card the renderer mounts (audio/image/pdf/doc/…). */
+  kind: string;
+  title?: string;
+  /** Cover / first-page thumbnail (audio art, pdf page-1). */
+  thumbnail?: string;
+  /** Ordered label/value rows the card renders (duration, dims, pages, EXIF…). */
+  fields?: { label: string; value: string }[];
+}
+
 export interface ChatAttachment {
   id: string;
-  type: 'image' | 'file' | 'audio' | 'video';
+  type: 'image' | 'file' | 'audio' | 'video' | 'text';
+  /**
+   * Object-URL / remote URL for binary attachments. Empty string for
+   * `type:'text'` chunks — those carry their payload in `text`, not a URL.
+   */
   url: string;
   thumbnailUrl?: string;
   name?: string;
@@ -13,8 +36,20 @@ export interface ChatAttachment {
   status?: 'uploading' | 'ready' | 'error';
   /** 0..1 while uploading. */
   progress?: number;
-  /** Extracted text from images (OCR). */
-  ocrText?: string;
+  /**
+   * Raw text payload for `type:'text'` chunks — the "Pasted text"
+   * attachment minted when a long paste is converted into a chip
+   * instead of dumped into the textarea (ChatGPT/Claude behaviour).
+   * Preserves exact content: newlines, indentation, stack traces.
+   */
+  text?: string;
+  /**
+   * Optional rich-preview payload for a localpreview-style card (audio
+   * cover+duration, image thumbnail+EXIF, pdf pages, OCR metadata…).
+   * Serializable JSON; persists through history/SSE. Absent → the default
+   * renderer falls back to the name+thumbnail chip.
+   */
+  preview?: AttachmentPreview;
 }
 
 export interface ChatSource {

package/src/tools/chat/types/block.ts

@@ -7,6 +7,9 @@
  * persistence and SSE transport. See `@docs/message-blocks.md`.
  */
 
+import type { LinkPreviewData } from '../../../common/link-preview';
+import type { MapBlockPayload } from '../../../common/blocks';
+
 /** Spaciousness hint forwarded from the bubble to renderers. */
 export type BlockAppearance = 'compact' | 'full';
 
@@ -59,11 +62,28 @@ export interface GalleryBlock extends BlockBase {
   items: Array<{ id: string; src: string; thumbnail?: string; alt?: string }>;
 }
 
-export interface MapBlock extends BlockBase {
+/**
+ * Map block — a chat message map. The serializable map SHAPE (center / zoom /
+ * basemap / terrain / markers / routes / polygons) is the shared
+ * `MapBlockPayload` (defined once in `common/blocks/types.ts`) so the chat
+ * map and the NotionEditor `mapBlock` node can't drift. Chat adds only the
+ * chat-specific `userLocation` opt-in on top.
+ */
+export interface MapBlock extends BlockBase, MapBlockPayload {
   kind: 'map';
-  center: { lat: number; lng: number };
-  zoom?: number;
-  markers?: Array<{ id: string; lat: number; lng: number; label?: string }>;
+  /**
+   * Opt in to the map's "show my location" chip (privacy-sensitive).
+   *
+   * This is a plain boolean OPT-IN flag, **not** coordinates — the browser
+   * supplies the live position; we never bake lat/lng into the serialized
+   * block. Default **off**: only set `true` when the host wants this chat
+   * map to offer locate-me. When `true` it surfaces the toolbar locate-me
+   * chip (forwarded to `MapContainer`'s `geolocate` prop); the user must
+   * still grant the OS location permission, and nothing is requested until
+   * they press the chip. Requires a secure context (HTTPS / localhost).
+   * @default false
+   */
+  userLocation?: boolean;
 }
 
 export interface JsonBlock extends BlockBase {
@@ -84,10 +104,36 @@ export interface CodeBlock extends BlockBase {
   language: string;
 }
 
-export interface LottieBlock extends BlockBase {
-  kind: 'lottie';
-  /** Animation JSON URL or inline animationData object. */
-  src: string;
+/**
+ * Code-diff block — wraps the `DiffViewer` tool. Provide EITHER
+ * `oldCode` + `newCode` (the viewer runs an internal LCS diff) OR a
+ * pre-computed unified `patch` string. `layout` pins side-by-side
+ * (`split`) vs single-column (`unified`); when omitted it follows the
+ * bubble appearance (compact → unified, full → split).
+ */
+export interface DiffBlock extends BlockBase {
+  kind: 'diff';
+  oldCode?: string;
+  newCode?: string;
+  patch?: string;
+  language?: string;
+  layout?: 'split' | 'unified';
+}
+
+/**
+ * Link-preview (URL unfurl) card — favicon + og:image + title/description/
+ * site name, Notion/Telegram style. Either the metadata is already
+ * resolved (`data`), or only `url` is given and the host's
+ * `resolveLinkPreview` resolver fills it in lazily. See
+ * `common/link-preview/types.ts` for the data contract (the browser cannot
+ * fetch meta tags itself — resolution is a host concern).
+ */
+export interface LinkBlock extends BlockBase {
+  kind: 'link';
+  /** The URL to preview (and link to). */
+  url: string;
+  /** Pre-resolved metadata. When absent, the host resolver is used. */
+  data?: LinkPreviewData;
 }
 
 /**
@@ -113,7 +159,8 @@ export type MessageBlock =
   | JsonBlock
   | MermaidBlock
   | CodeBlock
-  | LottieBlock
+  | DiffBlock
+  | LinkBlock
   | CustomBlock;
 
 /** The discriminant literal — `'audio' | 'video' | …`. */