@invergent/agent-chat-react 2.15.1 → 2.15.3

package/dist/index.js

@@ -1,6 +1,6 @@
 import { cn, __publicField } from './chunk-47MF6JUW.js';
 import { createContext, memo, useRef, useEffect, useCallback, useMemo, useState, useLayoutEffect, forwardRef, useId, lazy, useContext, useSyncExternalStore, Fragment as Fragment$1, Suspense, Children } from 'react';
-import { ChevronDownIcon, AlertTriangle, ChevronDown, ChevronRight, RefreshCw, CreditCard, File as File$1, FileImage, FileAudio, FileVideo, FileText, FileCode, FileArchive, FileSpreadsheet, PlugZapIcon, ChevronRightIcon, ArrowLeftIcon, Loader2Icon, InboxIcon, Loader2, AlertCircle, Pause, Play, Ban, TargetIcon, CalendarClockIcon, UsersIcon, Pen, Eraser, Type, Bot, MousePointer2, Hand, Maximize2, Undo2, Redo2, CheckIcon, CopyIcon, DownloadIcon, Maximize2Icon, MessageSquareIcon, ZapIcon, FolderOpenIcon, UploadIcon, RefreshCwIcon, AlertCircleIcon, ExternalLinkIcon, ClipboardCheckIcon, ShieldAlertIcon, TimerIcon, CircleDotIcon, ChevronLeftIcon, XIcon, Trash2Icon, SquareIcon, ArrowDownIcon, RotateCcwIcon, MousePointer2Icon, TrashIcon, ImageIcon, FileTextIcon, Clock, ArrowRight, ListTreeIcon, PenLineIcon, TerminalIcon, SparklesIcon, ClockIcon, PaperclipIcon, CloudIcon, HardDriveIcon, GlobeIcon, FolderIcon, IdCardIcon, PlusIcon, ShrinkIcon, FileIcon, MinusIcon, SearchIcon, CircleDot, XCircle, CheckCircle2, ArrowUpIcon, CircleCheckIcon, ThumbsUpIcon, ThumbsDownIcon, BookOpenIcon, GitBranchIcon, ActivityIcon, EyeIcon, ListTodoIcon, BotIcon, ListIcon, FileEditIcon, WrenchIcon, FileCodeIcon, CodeIcon, FileArchiveIcon, FileVideoIcon, FileAudioIcon, FileImageIcon, FileChartLineIcon, FileSpreadsheetIcon, XCircleIcon, CheckCircle2Icon, Code, CircleXIcon, SkullIcon, CheckCircleIcon, CircleIcon } from 'lucide-react';
+import { ChevronDownIcon, AlertTriangle, ChevronDown, ChevronRight, RefreshCw, CreditCard, File as File$1, FileImage, FileAudio, FileVideo, FileText, FileCode, FileArchive, FileSpreadsheet, PlugZapIcon, ChevronRightIcon, ArrowLeftIcon, Loader2Icon, InboxIcon, Loader2, AlertCircle, Pause, Play, Ban, TargetIcon, CalendarClockIcon, UsersIcon, Pen, Eraser, Type, MousePointer2, Hand, Maximize2, Undo2, Redo2, CheckIcon, CopyIcon, DownloadIcon, Maximize2Icon, MessageSquareIcon, ZapIcon, FolderOpenIcon, UploadIcon, RefreshCwIcon, AlertCircleIcon, ExternalLinkIcon, ClipboardCheckIcon, ShieldAlertIcon, TimerIcon, CircleDotIcon, ChevronLeftIcon, XIcon, Trash2Icon, SquareIcon, ArrowDownIcon, RotateCcwIcon, MousePointer2Icon, TrashIcon, ImageIcon, FileTextIcon, Clock, ArrowRight, ListTreeIcon, PenLineIcon, TerminalIcon, SparklesIcon, ClockIcon, PaperclipIcon, CloudIcon, HardDriveIcon, GlobeIcon, FolderIcon, IdCardIcon, PlusIcon, ShrinkIcon, FileIcon, MinusIcon, SearchIcon, CircleDot, XCircle, CheckCircle2, ArrowUpIcon, CircleCheckIcon, ThumbsUpIcon, ThumbsDownIcon, BookOpenIcon, GitBranchIcon, ActivityIcon, EyeIcon, ListTodoIcon, BotIcon, ListIcon, FileEditIcon, WrenchIcon, FileCodeIcon, CodeIcon, FileArchiveIcon, FileVideoIcon, FileAudioIcon, FileImageIcon, FileChartLineIcon, FileSpreadsheetIcon, XCircleIcon, CheckCircle2Icon, Code, CircleXIcon, SkullIcon, CheckCircleIcon, CircleIcon } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { Collapsible as Collapsible$1, Slot, Tooltip as Tooltip$1, Checkbox as Checkbox$1, Label as Label$1, Progress as Progress$1, Tabs as Tabs$1, Dialog as Dialog$1, ScrollArea as ScrollArea$1, Popover as Popover$1 } from 'radix-ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -15577,6 +15577,24 @@ function mapSelected(doc, edit) {
     objects: doc.objects.map((o) => o.selected ? edit(o) : o)
   };
 }
+var RABBIT_MARK_PATH = "M49.71,46.83c0,.23.02.45.07.67,2.1.49,4.16,1.07,6.18,1.74.58-.64.94-1.48.94-2.42,0-1.98-1.61-3.59-3.59-3.59s-3.59,1.61-3.59,3.59M33.95,78.3c3.1-5.1,6.72-8.89,11.64-12.21.61-.42,1.24-.8,1.88-1.17.44-.25.61-.66.58-1.05,0-.53-.49-.91-.93-1.12-1.34-.62-2.72-1.5-4.06-2.54-1.57-1.22-3.01-2.59-4.36-4.06-.95-1.04-2.02-2.38-3-3.81-.81-1.18-.63-2.77.43-3.73,1.1-1,2.26-1.92,3.48-2.76.36-.25.72-.49,1.1-.73,2.43-1.55,5.05-2.79,7.79-3.7,3.23-1.07,6.62-1.66,10.03-1.74.59-.35,1.19-.69,1.8-1.01,1.66-.88,3.38-1.62,5.17-2.21,1.58-.54,3.2-.95,4.85-1.24,3.28-.59,6.64-.7,9.95-.32,1.23.14,2.45.34,3.68.62,2.87.64,5.59,1.62,8.09,2.9.54.27.71.95.36,1.45-1.58,2.22-3.46,4.25-5.5,6.05-3.01,2.65-6.51,4.75-10.26,6.17-2.32.88-4.75,1.53-7.22,1.91-.62.1-.78.9-.24,1.22,0,0,.01,0,.02.01,6.97,4.05,13.1,9.22,18.36,15.32.72.83,1.42,1.68,2.1,2.53,3.36,4.22,6.23,8.82,8.56,13.68,1.8,3.73,3.27,7.63,4.39,11.62.73,2.6,1.34,5.24,1.76,7.91.11.76-.87,1.16-1.3.53-1.15-1.69-2.31-3.35-3.61-4.93-1.2-1.46-2.46-2.86-3.75-4.24-5.44-5.8-11.84-10.7-18.84-14.48-7.32-3.94-15.09-6.38-23.44-6.53-2.23-.04-4.46.08-6.68.3-4.05.43-8.02,1.28-11.93,2.4-.03,0-.05.01-.08.02,0,0-.01,0-.02,0-.07.02-.14.03-.21.03-.53,0-.91-.6-.61-1.09M50.95,12.97c-1.31,1.16-2.2,2.71-2.9,4.29-1.66,3.74-2.85,7.74-3.52,11.77-.32,1.92-.56,3.87-1.28,5.69-.17.44-.37.87-.6,1.28-1.18,2.1-3.37,3.19-5.6,3.86-4.96,1.47-10.14,1.97-15.25,2.65-2.37.31-8.03,1.12-7.34,4.69.46,2.36,2.26,4.16,4.08,5.6,2.66,2.11,5.44,4.09,8.33,5.88,1.87,1.15,3.85,2.11,5.6,3.44,1.74,1.33,3.15,3.05,3.58,5.25.22,1.16-.18,2.35-1,3.2-1.57,1.63-3,3.41-4.25,5.29-1.32,2.1-2.38,4.35-3.25,6.65-.59,1.44.97,2.98,2.41,2.37.53-.21,1.07-.41,1.61-.61,2.26-.82,4.68.73,4.93,3.12.17,1.61.38,3.17.63,4.57.46,2.57,3.14,3.63,5.32,1.41,2.84-2.88,4.66-6.31,7.84-8.86,2.53-2.03,6.26-4.17,9.71-3.59,3.17.56,6.27,1.52,9.23,2.85,5.32,2.32,10.36,5.29,14.95,8.86,9.17,7.1,16.56,16.51,21.27,27.1.93,2.07,4.03,1.44,4.1-.83.55-17.71-5.72-35.46-17.11-49.01-2.87-3.42-6.07-6.65-9.59-9.44-.88-.8-1.54-1.7-1.38-2.93.38-2.97,2-4.32,4.04-5.85,2.51-1.89,5.02-3.85,7.16-6.21.03-.03.06-.06.09-.1,1.24-1.37,2.38-2.83,3.4-4.37,1.2-1.81.6-4.26-1.3-5.31,0,0-.96-.52-1.45-.76-2.72-1.34-5.61-2.36-8.6-3.03-2.76-.62-5.58-.93-8.38-.93-2.38,0-4.76.22-7.09.67-1.96.37-3.97-.31-5.25-1.84-.28-.34-.54-.69-.79-1.04-.58-.84-1.09-1.71-1.63-2.58-1.29-2.06-1.87-3.63-2.89-5.84-1.06-2.29-1.85-4.73-3.26-6.86-.73-1.11-1.53-1.54-2.32-1.54s-1.54.41-2.24,1.02";
+var RABBIT_MARK_BOX = {
+  x: 14.4021,
+  y: 11.93,
+  h: 109.058
+};
+function RabbitMark({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "14.4021 11.93 95.1813 109.058",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: RABBIT_MARK_PATH })
+    }
+  );
+}
 
 // src/components/whiteboard/render.ts
 var TEXT_GLYPH_ADVANCE = 0.6;
@@ -15788,6 +15806,13 @@ function paintArtifactFrame(ctx, obj) {
   ctx.strokeRect(obj.x, obj.y, obj.w, obj.h);
   ctx.restore();
 }
+var rabbit;
+function rabbitPath() {
+  if (rabbit === void 0) {
+    rabbit = typeof Path2D === "undefined" ? null : new Path2D(RABBIT_MARK_PATH);
+  }
+  return rabbit;
+}
 function paintSlot(ctx, obj) {
   ctx.save();
   ctx.setLineDash([8, 6]);
@@ -15797,10 +15822,19 @@ function paintSlot(ctx, obj) {
   ctx.fillRect(obj.x, obj.y, obj.w, obj.h);
   ctx.strokeRect(obj.x, obj.y, obj.w, obj.h);
   const glyph = Math.max(12, Math.min(obj.h * 0.5, obj.w * 0.3, 40));
-  ctx.font = `${glyph}px system-ui, sans-serif`;
-  ctx.textBaseline = "top";
-  ctx.fillStyle = "rgba(180, 83, 9, 0.9)";
-  ctx.fillText("\u{1F916}", obj.x + glyph * 0.3, obj.y + (obj.h - glyph) / 2);
+  const mark = rabbitPath();
+  if (mark) {
+    const scale = glyph / RABBIT_MARK_BOX.h;
+    ctx.save();
+    ctx.translate(
+      obj.x + glyph * 0.3 - RABBIT_MARK_BOX.x * scale,
+      obj.y + (obj.h - glyph) / 2 - RABBIT_MARK_BOX.y * scale
+    );
+    ctx.scale(scale, scale);
+    ctx.fillStyle = "rgba(180, 83, 9, 0.9)";
+    ctx.fill(mark);
+    ctx.restore();
+  }
   if (obj.hint) {
     const size2 = Math.max(10, Math.min(obj.h * 0.3, (obj.w - glyph * 1.6) / Math.max(obj.hint.length, 1) / 0.6, 22));
     ctx.font = `italic ${size2}px system-ui, sans-serif`;
@@ -15889,7 +15923,6 @@ function renderDoc(ctx, doc, view, size2, services, dpr = 1) {
 // src/components/whiteboard/atlas.ts
 var MAX_ATLAS_WIDTH = 2048;
 var MAX_ATLAS_HEIGHT = 1536;
-var HOTSPOT_GRID = 8;
 var MIN_CAPTURE_SPAN = 600;
 var CAPTURE_MARGIN = 0.25;
 var MAX_CAPTURE_SPAN_W = MAX_ATLAS_WIDTH;
@@ -15991,32 +16024,6 @@ function planAtlas(doc, latest, view, viewport, services) {
     }
   };
 }
-function occupancyCells(doc, sourceRect, services) {
-  if (sourceRect.w <= 0 || sourceRect.h <= 0) return [];
-  const seen = /* @__PURE__ */ new Set();
-  const cells = [];
-  const cellW = sourceRect.w / OCCUPANCY_GRID;
-  const cellH = sourceRect.h / OCCUPANCY_GRID;
-  for (const obj of doc.objects) {
-    if (obj.kind === "slot") continue;
-    const b = objectBounds(obj, services);
-    if (!b) continue;
-    const c0 = Math.floor((b.x - sourceRect.x) / cellW);
-    const c1 = Math.floor((b.x + b.w - sourceRect.x) / cellW);
-    const r0 = Math.floor((b.y - sourceRect.y) / cellH);
-    const r1 = Math.floor((b.y + b.h - sourceRect.y) / cellH);
-    for (let r = Math.max(0, r0); r <= Math.min(OCCUPANCY_GRID - 1, r1); r++) {
-      for (let c = Math.max(0, c0); c <= Math.min(OCCUPANCY_GRID - 1, c1); c++) {
-        const key = r * OCCUPANCY_GRID + c;
-        if (seen.has(key)) continue;
-        seen.add(key);
-        cells.push([c, r]);
-      }
-    }
-  }
-  cells.sort((a, b) => a[1] - b[1] || a[0] - b[0]);
-  return cells;
-}
 var AGENT_OBJECT_LIMIT = 8;
 function objectLabel(obj) {
   const raw = obj.kind === "text" ? obj.text : obj.kind === "formula" ? obj.latex : obj.kind === "artifact" ? `artifact ${obj.artifactId}` : obj.kind;
@@ -16251,6 +16258,14 @@ function cropRegions(marks, unit) {
   }
   return regions;
 }
+function fillBackdrop(ctx, w, h) {
+  ctx.save();
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+  ctx.globalCompositeOperation = "destination-over";
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(0, 0, w, h);
+  ctx.restore();
+}
 function buildRegionCrop(doc, region, services, unit) {
   const margin = Math.max(unit * 0.6, 8);
   const area = grow(region.rect, margin);
@@ -16264,9 +16279,6 @@ function buildRegionCrop(doc, region, services, unit) {
   const canvas = services.createCanvas(size2.w, size2.h);
   const ctx = canvas.getContext("2d");
   if (!ctx) return null;
-  ctx.setTransform(1, 0, 0, 1, 0, 0);
-  ctx.fillStyle = "#ffffff";
-  ctx.fillRect(0, 0, size2.w, size2.h);
   renderDoc(
     ctx,
     { ...doc, objects: doc.objects.map((o) => ({ ...o, selected: false })) },
@@ -16274,6 +16286,7 @@ function buildRegionCrop(doc, region, services, unit) {
     size2,
     services
   );
+  fillBackdrop(ctx, size2.w, size2.h);
   return { ids: region.ids, canvas, scale: Math.round(scale * 100) / 100 };
 }
 function contentBeyond(doc, sourceRect, services) {
@@ -16286,36 +16299,10 @@ function contentBeyond(doc, sourceRect, services) {
   if (content.x < sourceRect.x) out.push("left");
   return out;
 }
-function mapHotspots(sourceRect, points) {
-  if (sourceRect.w <= 0 || sourceRect.h <= 0) return [];
-  const cells = [];
-  for (const p of points) {
-    if (p.x < sourceRect.x || p.x > sourceRect.x + sourceRect.w || p.y < sourceRect.y || p.y > sourceRect.y + sourceRect.h) {
-      continue;
-    }
-    const col = clamp(
-      Math.floor((p.x - sourceRect.x) / sourceRect.w * HOTSPOT_GRID),
-      0,
-      HOTSPOT_GRID - 1
-    );
-    const row = clamp(
-      Math.floor((p.y - sourceRect.y) / sourceRect.h * HOTSPOT_GRID),
-      0,
-      HOTSPOT_GRID - 1
-    );
-    const last = cells[cells.length - 1];
-    if (last && last[0] === col && last[1] === row) continue;
-    cells.push([col, row]);
-  }
-  return cells;
-}
 function buildAtlas(doc, plan, services, marks = []) {
   const canvas = services.createCanvas(plan.imageSize.w, plan.imageSize.h);
   const ctx = canvas.getContext("2d");
   if (!ctx) return canvas;
-  ctx.setTransform(1, 0, 0, 1, 0, 0);
-  ctx.fillStyle = "#ffffff";
-  ctx.fillRect(0, 0, plan.imageSize.w, plan.imageSize.h);
   renderDoc(
     ctx,
     // Selection chrome is interface, not content: the model must not see
@@ -16339,6 +16326,7 @@ function buildAtlas(doc, plan, services, marks = []) {
     13,
     1.5
   );
+  fillBackdrop(ctx, plan.imageSize.w, plan.imageSize.h);
   return canvas;
 }
 function paintGridOverlay(ctx, size2) {
@@ -16389,7 +16377,7 @@ var USER_ACTIONS = [
     hint: "Give a clue toward the answer, never the answer itself."
   }
 ];
-function atlasMetadata(plan, latest, hotspots, extras) {
+function atlasMetadata(plan, latest, extras) {
   const meta = {
     sourceRect: plan.sourceRect,
     imageScale: plan.imageScale,
@@ -16398,20 +16386,11 @@ function atlasMetadata(plan, latest, hotspots, extras) {
     mode: extras.mode === "deep" ? "deep" : "sketch"
   };
   if (latest) meta.latestInput = latest;
-  if (hotspots.length > 0) meta.hotspots = hotspots;
   if (extras.selection) meta.selection = extras.selection;
   if (extras.typedInput?.trim()) meta.typedInput = extras.typedInput.trim();
   if (extras.inkHeight && extras.inkHeight > 0) {
     meta.inkHeight = Math.round(extras.inkHeight);
   }
-  if (extras.occupied?.length) {
-    meta.occupied = extras.occupied;
-    meta.occupancyGrid = OCCUPANCY_GRID;
-    meta.cellSize = {
-      w: round2(plan.sourceRect.w / OCCUPANCY_GRID),
-      h: round2(plan.sourceRect.h / OCCUPANCY_GRID)
-    };
-  }
   if (extras.beyond?.length) meta.beyond = extras.beyond;
   if (extras.marks?.length) {
     meta.marks = extras.marks.map((m) => ({
@@ -17103,7 +17082,7 @@ var TOOLS = [
   { id: "text", label: "Text", Icon: Type },
   // Where the agent should answer: click to place an answer box, or
   // drag one. The id stays "slot" -- that is what the object is.
-  { id: "slot", label: "Answer box", Icon: Bot },
+  { id: "slot", label: "Answer box", Icon: RabbitMark },
   { id: "select", label: "Select", Icon: MousePointer2 },
   { id: "pan", label: "Pan", Icon: Hand }
 ];
@@ -17281,7 +17260,6 @@ function WhiteboardSurface({
   const cursorRef = useRef(null);
   const resize = useRef(null);
   const gestureBaseline = useRef(null);
-  const hotspotsRef = useRef([]);
   const typedRef = useRef([]);
   const dirtyRef = useRef(null);
   const seenAtLastAsk = useRef(/* @__PURE__ */ new Set());
@@ -17532,7 +17510,6 @@ function WhiteboardSurface({
     return () => cancelAnimationFrame(id);
   }, [paint]);
   const noteDirty = useCallback((pt) => {
-    hotspotsRef.current.push(pt);
     const d = dirtyRef.current;
     dirtyRef.current = d ? {
       x: Math.min(d.x, pt.x),
@@ -17859,14 +17836,12 @@ function WhiteboardSurface({
         )
       });
       const atlas = buildAtlas(doc, plan, services, marks);
-      const hotspots = mapHotspots(plan.sourceRect, hotspotsRef.current);
       const legible = (unit ?? 40) * plan.imageScale >= 180;
       const crops = legible ? [] : cropRegions(marks, unit ?? 40).map((r) => buildRegionCrop(doc, r, services, unit ?? 40)).filter((c) => c !== null);
       const extras = {
         mode,
         action,
         inkHeight: unit,
-        occupied: occupancyCells(doc, plan.sourceRect, services),
         beyond: contentBeyond(doc, plan.sourceRect, services),
         marks,
         crops: crops.map((c, i) => ({
@@ -17884,7 +17859,6 @@ function WhiteboardSurface({
         const b = objectBounds(selected, services);
         if (b) extras.selection = b;
       }
-      hotspotsRef.current = [];
       dirtyRef.current = null;
       typedRef.current = [];
       const text = question;
@@ -17899,7 +17873,7 @@ function WhiteboardSurface({
           }))
         ],
         void 0,
-        { whiteboard: atlasMetadata(plan, latest, hotspots, extras) }
+        { whiteboard: atlasMetadata(plan, latest, extras) }
       );
     },
     [doc, view, size2, services, question, runtime, deep]