@page-speed/agent-everywhere 0.3.0 → 0.4.0

package/dist/index.js

@@ -6,7 +6,7 @@ import { createContext, forwardRef, useRef, useImperativeHandle, useCallback, us
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { AnimatePresence, motion } from 'motion/react';
 import { Markdown } from '@page-speed/markdown-to-jsx';
-import { SendIcon, PaperclipIcon, FileTextIcon, MicIcon, ImageIcon, XIcon, SearchIcon, UploadIcon, FileIcon, UserCircleIcon, CheckIcon, SparklesIcon, BookmarkIcon, InfoIcon, CheckCircle2Icon, AlertTriangleIcon, LightbulbIcon, BrainIcon, ChevronDownIcon, ZapIcon, CopyIcon, ThumbsUpIcon, ThumbsDownIcon, BotIcon, UserIcon, DownloadIcon, MinusIcon, TrendingDownIcon, TrendingUpIcon, ChevronUpIcon, ArrowUpDownIcon, LinkIcon, PlayIcon, ExternalLinkIcon, WandIcon, LayoutGridIcon, Grid3X3Icon, ArrowUpRightIcon, ShuffleIcon, SkipForwardIcon, ChevronLeftIcon, ChevronRightIcon, XCircleIcon, HelpCircleIcon, Minimize2Icon, Maximize2Icon, RotateCcwIcon, MessageSquareIcon, GripVerticalIcon, PanelLeftOpenIcon, PanelLeftCloseIcon, CheckCircleIcon, AlertCircleIcon, MoreHorizontalIcon, ArrowLeftIcon, MoreVerticalIcon, Loader2Icon, ArrowRightIcon, AlignLeftIcon, ListIcon, HashIcon, TypeIcon, ClockIcon, CoinsIcon, ActivityIcon, ArrowUpIcon, ArrowDownIcon } from 'lucide-react';
+import { SendIcon, PaperclipIcon, FileTextIcon, MicIcon, ImageIcon, XIcon, SearchIcon, UploadIcon, FileIcon, UserCircleIcon, CheckIcon, SparklesIcon, BookmarkIcon, InfoIcon, CheckCircle2Icon, AlertTriangleIcon, LightbulbIcon, BrainIcon, ChevronDownIcon, ZapIcon, CopyIcon, ThumbsUpIcon, ThumbsDownIcon, BotIcon, UserIcon, DownloadIcon, MinusIcon, TrendingDownIcon, TrendingUpIcon, ChevronUpIcon, ArrowUpDownIcon, LinkIcon, PlayIcon, ExternalLinkIcon, WandIcon, LayoutGridIcon, Grid3X3Icon, ArrowUpRightIcon, ShuffleIcon, SkipForwardIcon, ChevronLeftIcon, ChevronRightIcon, XCircleIcon, HelpCircleIcon, Minimize2Icon, Maximize2Icon, RotateCcwIcon, MessageSquareIcon, GripVerticalIcon, PanelLeftOpenIcon, PanelLeftCloseIcon, CheckCircleIcon, AlertCircleIcon, MoreHorizontalIcon, ClipboardListIcon, ArrowLeftIcon, MoreVerticalIcon, Loader2Icon, ArrowRightIcon, AlignLeftIcon, ListIcon, HashIcon, TypeIcon, ClockIcon, CoinsIcon, ActivityIcon, ArrowUpIcon, ArrowDownIcon } from 'lucide-react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -981,33 +981,70 @@ function MessageBubble({ role, children, className, unstyled }) {
     }
   );
 }
-var PROSE_CLASSES = cn(
-  "text-sm leading-relaxed",
-  "[&_p]:my-1.5 first:[&_p]:mt-0 last:[&_p]:mb-0",
-  "[&_ul]:my-1.5 [&_ul]:list-disc [&_ul]:pl-5",
-  "[&_ol]:my-1.5 [&_ol]:list-decimal [&_ol]:pl-5",
-  "[&_li]:my-0.5",
-  "[&_h1]:mt-2 [&_h1]:mb-1 [&_h1]:text-base [&_h1]:font-semibold",
-  "[&_h2]:mt-2 [&_h2]:mb-1 [&_h2]:text-sm [&_h2]:font-semibold",
-  "[&_h3]:mt-2 [&_h3]:mb-1 [&_h3]:text-sm [&_h3]:font-semibold",
-  "[&_strong]:font-semibold",
-  "[&_a]:underline [&_a]:underline-offset-2",
-  "[&_code]:rounded [&_code]:bg-black/10 [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-[0.85em]",
-  "[&_pre]:my-1.5 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-black/10 [&_pre]:p-2 [&_pre]:text-xs",
-  "[&_pre_code]:bg-transparent [&_pre_code]:p-0",
-  "[&_blockquote]:border-l-2 [&_blockquote]:border-current/30 [&_blockquote]:pl-3 [&_blockquote]:opacity-90",
-  "[&_hr]:my-2 [&_hr]:border-current/20",
-  "whitespace-normal"
+var SPACE = "0.5rem";
+var mdStyle = { lineHeight: 1.6 };
+var MdP = ({ children }) => /* @__PURE__ */ jsx("p", { style: { margin: `${SPACE} 0` }, children });
+var MdUl = ({ children }) => /* @__PURE__ */ jsx("ul", { style: { margin: `${SPACE} 0`, paddingLeft: "1.25rem", listStyle: "disc" }, children });
+var MdOl = ({ children }) => /* @__PURE__ */ jsx(
+  "ol",
+  {
+    style: { margin: `${SPACE} 0`, paddingLeft: "1.25rem", listStyle: "decimal" },
+    children
+  }
 );
+var MdLi = ({ children }) => /* @__PURE__ */ jsx("li", { style: { margin: "0.2rem 0" }, children });
+var mkHeading = (level, fontSize) => ({ children }) => {
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ jsx(Tag, { style: { margin: `${SPACE} 0 0.25rem`, fontSize, fontWeight: 600 }, children });
+};
+var MdBlockquote = ({ children }) => /* @__PURE__ */ jsx(
+  "blockquote",
+  {
+    style: {
+      margin: `${SPACE} 0`,
+      paddingLeft: "0.75rem",
+      borderLeft: "2px solid currentColor",
+      opacity: 0.85
+    },
+    children
+  }
+);
+var MARKDOWN_OVERRIDES = {
+  p: MdP,
+  ul: MdUl,
+  ol: MdOl,
+  li: MdLi,
+  h1: mkHeading(1, "1rem"),
+  h2: mkHeading(2, "0.95rem"),
+  h3: mkHeading(3, "0.9rem"),
+  blockquote: MdBlockquote
+};
 function MessageContent({
   children,
   className,
   markdown = true
 }) {
   if (markdown && typeof children === "string") {
-    return /* @__PURE__ */ jsx(Markdown, { className: cn(PROSE_CLASSES, className), children });
+    return /* @__PURE__ */ jsx(
+      Markdown,
+      {
+        className: cn(
+          "text-sm [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+          className
+        ),
+        overrides: MARKDOWN_OVERRIDES,
+        children
+      }
+    );
   }
-  return /* @__PURE__ */ jsx("div", { className: cn("text-sm leading-relaxed whitespace-pre-wrap", className), children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("text-sm leading-relaxed whitespace-pre-wrap", className),
+      style: mdStyle,
+      children
+    }
+  );
 }
 function MessageContainer({ role, children, className }) {
   return /* @__PURE__ */ jsx(
@@ -1175,7 +1212,7 @@ var PromptInput = forwardRef(
       [handleSubmit]
     );
     const variantStyles = {
-      default: "border-t px-3 py-2.5",
+      default: "px-3 py-2.5",
       minimal: "px-3 py-2",
       bordered: "border rounded-lg px-3 py-2.5"
     };
@@ -1184,41 +1221,48 @@ var PromptInput = forwardRef(
       minimal: "bg-transparent px-0",
       bordered: "bg-muted/50"
     };
-    return /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, className: cn(variantStyles[variant], className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
-      leftActions,
-      /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          ref: textareaRef,
-          value,
-          onChange: (e) => onChange(e.target.value),
-          onKeyDown: handleKeyDown,
-          placeholder,
-          disabled: disabled || loading,
-          autoFocus,
-          rows: minRows,
-          className: cn(
-            "flex-1 resize-none border-0 px-0 py-1 text-sm leading-5 shadow-none",
-            "placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0",
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            inputVariantStyles[variant],
-            inputClassName
+    return /* @__PURE__ */ jsx(
+      "form",
+      {
+        onSubmit: handleSubmit,
+        className: cn(variantStyles[variant], className),
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
+          leftActions,
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              value,
+              onChange: (e) => onChange(e.target.value),
+              onKeyDown: handleKeyDown,
+              placeholder,
+              disabled: disabled || loading,
+              autoFocus,
+              rows: minRows,
+              className: cn(
+                "flex-1 resize-none border-0 px-0 py-1 text-sm leading-5 shadow-none",
+                "placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+                inputVariantStyles[variant],
+                inputClassName
+              )
+            }
+          ),
+          rightActions,
+          showSendButton && /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "submit",
+              size: "sm",
+              variant: variant === "minimal" ? "ghost" : "outline",
+              disabled: !value.trim() || disabled || loading,
+              className: "size-8 shrink-0 p-0",
+              children: sendButtonContent || /* @__PURE__ */ jsx(SendIcon, { className: "size-4" })
+            }
           )
-        }
-      ),
-      rightActions,
-      showSendButton && /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "submit",
-          size: "sm",
-          variant: variant === "minimal" ? "ghost" : "outline",
-          disabled: !value.trim() || disabled || loading,
-          className: "size-8 shrink-0 p-0",
-          children: sendButtonContent || /* @__PURE__ */ jsx(SendIcon, { className: "size-4" })
-        }
-      )
-    ] }) });
+        ] })
+      }
+    );
   }
 );
 PromptInput.displayName = "PromptInput";
@@ -7654,10 +7698,58 @@ function ReportView({ report, className }) {
     ))
   ] });
 }
+function ConfirmationPanel({
+  title = "Proposed plan",
+  summary,
+  body,
+  markdown = true,
+  icon,
+  actions,
+  onAction,
+  ariaLabel,
+  className
+}) {
+  const hasBody = body !== void 0 && body !== null && body !== "";
+  return /* @__PURE__ */ jsxs(
+    motion.section,
+    {
+      initial: { opacity: 0, y: 6 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.2 },
+      "aria-label": ariaLabel ?? title,
+      className: cn(
+        "flex w-full min-w-0 flex-col rounded-lg border bg-card p-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "flex size-6 shrink-0 items-center justify-center rounded-md bg-muted/60 text-muted-foreground", children: icon ?? /* @__PURE__ */ jsx(ClipboardListIcon, { className: "size-3.5" }) }),
+          /* @__PURE__ */ jsx("h4", { className: "min-w-0 flex-1 truncate font-medium text-sm", children: title }),
+          summary && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "shrink-0 text-[10px] font-normal", children: summary })
+        ] }),
+        hasBody && /* @__PURE__ */ jsx("div", { className: "mt-2 min-w-0", children: typeof body === "string" ? /* @__PURE__ */ jsx(MessageContent, { markdown, children: body }) : body }),
+        actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: actions.map((action, index) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: action.variant ?? (index === 0 ? "default" : "outline"),
+            disabled: action.disabled || action.busy,
+            "aria-busy": action.busy || void 0,
+            onClick: () => onAction?.(action.id),
+            children: action.label
+          },
+          action.id
+        )) })
+      ]
+    }
+  );
+}
 function MessageList({
   messages,
   showAvatars = true,
   renderMessage,
+  onConfirmAction,
   className
 }) {
   return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-4", className), children: messages.map((message) => {
@@ -7674,7 +7766,18 @@ function MessageList({
         hasSteps && /* @__PURE__ */ jsx(MessageWithSteps, { steps: message.steps }),
         message.content && /* @__PURE__ */ jsx(MessageBubble, { role: message.role, children: /* @__PURE__ */ jsx(MessageContent, { children: message.content }) }),
         hasAttachments && /* @__PURE__ */ jsx(MessageWithAttachments, { attachments: message.attachments }),
-        message.data && /* @__PURE__ */ jsx(DataPayloadView, { payload: message.data })
+        message.data && /* @__PURE__ */ jsx(DataPayloadView, { payload: message.data }),
+        message.confirmation && /* @__PURE__ */ jsx(
+          ConfirmationPanel,
+          {
+            title: message.confirmation.title,
+            summary: message.confirmation.summary,
+            body: message.confirmation.body,
+            markdown: message.confirmation.markdown,
+            actions: message.confirmation.actions,
+            onAction: (actionId) => onConfirmAction?.(message.id, actionId)
+          }
+        )
       ] })
     ] }, message.id);
   }) });
@@ -7895,6 +7998,7 @@ function AgentSurface({
   showAvatars = true,
   renderMessage,
   onFeedback,
+  onConfirmAction,
   report,
   dataPanel,
   isOpen = true,
@@ -7911,7 +8015,8 @@ function AgentSurface({
       messages,
       showAvatars,
       renderMessage,
-      onFeedback
+      onFeedback,
+      onConfirmAction
     }
   );
   const resolvedInput = input ?? (onInputChange && onSubmit !== void 0 ? /* @__PURE__ */ jsx("div", { className: "border-t p-2", children: /* @__PURE__ */ jsx(
@@ -8018,6 +8123,6 @@ function AgentSurface({
   }
 }
 
-export { AgentAvatar, AgentHandoff, AgentProvider, AgentSurface, AllocationBreakdown, AnalyticsDashboard, Avatar, AvatarFallback, AvatarImage, Badge, Button, ChartContainer, ChatPanel, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ControlGrid, ConversationAnalytics, ConversationArtifact, DataPayloadView, DataTable, DynamicRenderer, EntityCard, FileDropZone, FloatingWidget, FullBleedSurface, FullscreenDashboard, GuidedLessonFlow, ImageGenerator, InlineSuggestionsInput, Input, ListingFeed, MediaEditorCanvas, MediaGallery, MessageActions, MessageBubble, MessageList, MessageWithAttachments, MessageWithFeedback, MessageWithReasoning, MessageWithSteps, MetricsGrid, MobileShell, MultimodalInput, OnboardingWizard, OptionCards, OverlayModal, PerformanceMetrics, PersonaSelector, Progress, ProgressTracker, PromptInput, PromptLibrary, QuickReplies, QuizCard, RecommendationCards, ReportView, ScheduleTimeline, ScrollArea, ScrollBar, SemanticBuilderSocketClient, SentimentDisplay, SettingsPanel, SlotRenderer, SplitView, StatusBadge, SystemMessage, TemplateSelector, Textarea, Timestamp, Tooltip4 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TypingIndicator, WritingAssistant, badgeVariants, buildSocketUrl, buttonVariants, calculatePercentage, cn, componentManifest, componentMap, componentRegistry, copyToClipboard, createMockBackend, debounce, delay, findComponentsByCapability, findComponentsByCategory, findComponentsBySurface, formatBytes, formatCurrency, formatNumber, formatRelativeTime, formatTime, generateId, getInitials, getManifestEntry, getSentimentBgColor, getSentimentColor, isBrowser, isInIframe, normalizeWebsiteId, parseTextWithBold, registerAllComponents, truncate, useAgent, useAgentBackend, useAgentInput, useAgentLayout, useAgentMessages, useSemanticBuilder };
+export { AgentAvatar, AgentHandoff, AgentProvider, AgentSurface, AllocationBreakdown, AnalyticsDashboard, Avatar, AvatarFallback, AvatarImage, Badge, Button, ChartContainer, ChatPanel, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ConfirmationPanel, ControlGrid, ConversationAnalytics, ConversationArtifact, DataPayloadView, DataTable, DynamicRenderer, EntityCard, FileDropZone, FloatingWidget, FullBleedSurface, FullscreenDashboard, GuidedLessonFlow, ImageGenerator, InlineSuggestionsInput, Input, ListingFeed, MediaEditorCanvas, MediaGallery, MessageActions, MessageBubble, MessageContainer, MessageContent, MessageList, MessageWithAttachments, MessageWithFeedback, MessageWithReasoning, MessageWithSteps, MetricsGrid, MobileShell, MultimodalInput, OnboardingWizard, OptionCards, OverlayModal, PerformanceMetrics, PersonaSelector, Progress, ProgressTracker, PromptInput, PromptLibrary, QuickReplies, QuizCard, RecommendationCards, ReportView, ScheduleTimeline, ScrollArea, ScrollBar, SemanticBuilderSocketClient, SentimentDisplay, SettingsPanel, SlotRenderer, SplitView, StatusBadge, SystemMessage, TemplateSelector, Textarea, Timestamp, Tooltip4 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TypingIndicator, WritingAssistant, badgeVariants, buildSocketUrl, buttonVariants, calculatePercentage, cn, componentManifest, componentMap, componentRegistry, copyToClipboard, createMockBackend, debounce, delay, findComponentsByCapability, findComponentsByCategory, findComponentsBySurface, formatBytes, formatCurrency, formatNumber, formatRelativeTime, formatTime, generateId, getInitials, getManifestEntry, getSentimentBgColor, getSentimentColor, isBrowser, isInIframe, normalizeWebsiteId, parseTextWithBold, registerAllComponents, truncate, useAgent, useAgentBackend, useAgentInput, useAgentLayout, useAgentMessages, useSemanticBuilder };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map