@page-speed/agent-everywhere 0.3.0 → 0.4.0

package/README.md

@@ -71,6 +71,41 @@ import { AgentSurface } from '@page-speed/agent-everywhere';
 />;
 ```
 
+### Inline confirmation / proposed-plan panels
+
+Confirmation and proposed-plan panels flow **inline in the transcript** — attach
+one to a message via `message.confirmation` and it renders after that message's
+content, never pinned over the response. The plan body reuses the same markdown
+rendering and spacing as assistant messages, so long multi-paragraph / bulleted
+plans stay readable. Wire `onConfirmAction` (or use `ConfirmationPanel`
+directly) to handle the action buttons.
+
+```tsx
+const messages = [
+  {
+    id: 'm1',
+    role: 'assistant',
+    content: 'Here is the response and the plan.',
+    timestamp: new Date(),
+    confirmation: {
+      title: 'Proposed plan',
+      summary: '3 pages to change',
+      body: '## What changes\n\n- Rebuild the platform page\n- Refresh OG images',
+      actions: [
+        { id: 'apply', label: 'Apply changes' },
+        { id: 'cancel', label: 'Cancel', variant: 'outline' },
+      ],
+    },
+  },
+];
+
+<AgentSurface
+  mode="widget"
+  messages={messages}
+  onConfirmAction={(messageId, actionId) => apply(messageId, actionId)}
+/>;
+```
+
 ## Artifacts
 
 Components an agent can render inside responses, grouped by category. All are
@@ -81,7 +116,7 @@ prop-driven and individually importable:
   `AnalyticsDashboard`, `ReportView`.
 - **Interactive** — `EntityCard`, `OptionCards`, `ListingFeed`, `ControlGrid`,
   `RecommendationCards`, `ScheduleTimeline`, `SettingsPanel`, `AgentHandoff`,
-  `PersonaSelector`.
+  `ConfirmationPanel`, `PersonaSelector`.
 - **Messages** — `MessageList`, `MessageWithReasoning`, `MessageWithSteps`,
   `MessageWithFeedback`, `MessageWithAttachments`, `ConversationArtifact`.
 - **Input** — `PromptInput`, `MultimodalInput`, `QuickReplies`,

package/dist/index.cjs

@@ -1007,33 +1007,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__ */ jsxRuntime.jsx("p", { style: { margin: `${SPACE} 0` }, children });
+var MdUl = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("ul", { style: { margin: `${SPACE} 0`, paddingLeft: "1.25rem", listStyle: "disc" }, children });
+var MdOl = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "ol",
+  {
+    style: { margin: `${SPACE} 0`, paddingLeft: "1.25rem", listStyle: "decimal" },
+    children
+  }
 );
+var MdLi = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("li", { style: { margin: "0.2rem 0" }, children });
+var mkHeading = (level, fontSize) => ({ children }) => {
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(Tag, { style: { margin: `${SPACE} 0 0.25rem`, fontSize, fontWeight: 600 }, children });
+};
+var MdBlockquote = ({ children }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(markdownToJsx.Markdown, { className: cn(PROSE_CLASSES, className), children });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      markdownToJsx.Markdown,
+      {
+        className: cn(
+          "text-sm [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+          className
+        ),
+        overrides: MARKDOWN_OVERRIDES,
+        children
+      }
+    );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm leading-relaxed whitespace-pre-wrap", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("text-sm leading-relaxed whitespace-pre-wrap", className),
+      style: mdStyle,
+      children
+    }
+  );
 }
 function MessageContainer({ role, children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1201,7 +1238,7 @@ var PromptInput = React4.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"
     };
@@ -1210,41 +1247,48 @@ var PromptInput = React4.forwardRef(
       minimal: "bg-transparent px-0",
       bordered: "bg-muted/50"
     };
-    return /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: handleSubmit, className: cn(variantStyles[variant], className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-2", children: [
-      leftActions,
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      "form",
+      {
+        onSubmit: handleSubmit,
+        className: cn(variantStyles[variant], className),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-2", children: [
+          leftActions,
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.SendIcon, { className: "size-4" })
+            }
           )
-        }
-      ),
-      rightActions,
-      showSendButton && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.SendIcon, { className: "size-4" })
-        }
-      )
-    ] }) });
+        ] })
+      }
+    );
   }
 );
 PromptInput.displayName = "PromptInput";
@@ -7680,10 +7724,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__ */ jsxRuntime.jsxs(
+    react.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__ */ jsxRuntime.jsxs("header", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-6 shrink-0 items-center justify-center rounded-md bg-muted/60 text-muted-foreground", children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ClipboardListIcon, { className: "size-3.5" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "min-w-0 flex-1 truncate font-medium text-sm", children: title }),
+          summary && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "shrink-0 text-[10px] font-normal", children: summary })
+        ] }),
+        hasBody && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 min-w-0", children: typeof body === "string" ? /* @__PURE__ */ jsxRuntime.jsx(MessageContent, { markdown, children: body }) : body }),
+        actions && actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-4", className), children: messages.map((message) => {
@@ -7700,7 +7792,18 @@ function MessageList({
         hasSteps && /* @__PURE__ */ jsxRuntime.jsx(MessageWithSteps, { steps: message.steps }),
         message.content && /* @__PURE__ */ jsxRuntime.jsx(MessageBubble, { role: message.role, children: /* @__PURE__ */ jsxRuntime.jsx(MessageContent, { children: message.content }) }),
         hasAttachments && /* @__PURE__ */ jsxRuntime.jsx(MessageWithAttachments, { attachments: message.attachments }),
-        message.data && /* @__PURE__ */ jsxRuntime.jsx(DataPayloadView, { payload: message.data })
+        message.data && /* @__PURE__ */ jsxRuntime.jsx(DataPayloadView, { payload: message.data }),
+        message.confirmation && /* @__PURE__ */ jsxRuntime.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);
   }) });
@@ -7921,6 +8024,7 @@ function AgentSurface({
   showAvatars = true,
   renderMessage,
   onFeedback,
+  onConfirmAction,
   report,
   dataPanel,
   isOpen = true,
@@ -7937,7 +8041,8 @@ function AgentSurface({
       messages,
       showAvatars,
       renderMessage,
-      onFeedback
+      onFeedback,
+      onConfirmAction
     }
   );
   const resolvedInput = input ?? (onInputChange && onSubmit !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -8060,6 +8165,7 @@ exports.ChatPanel = ChatPanel;
 exports.Collapsible = Collapsible;
 exports.CollapsibleContent = CollapsibleContent2;
 exports.CollapsibleTrigger = CollapsibleTrigger2;
+exports.ConfirmationPanel = ConfirmationPanel;
 exports.ControlGrid = ControlGrid;
 exports.ConversationAnalytics = ConversationAnalytics;
 exports.ConversationArtifact = ConversationArtifact;
@@ -8080,6 +8186,8 @@ exports.MediaEditorCanvas = MediaEditorCanvas;
 exports.MediaGallery = MediaGallery;
 exports.MessageActions = MessageActions;
 exports.MessageBubble = MessageBubble;
+exports.MessageContainer = MessageContainer;
+exports.MessageContent = MessageContent;
 exports.MessageList = MessageList;
 exports.MessageWithAttachments = MessageWithAttachments;
 exports.MessageWithFeedback = MessageWithFeedback;