@page-speed/agent-everywhere 0.3.1 → 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

@@ -1238,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"
     };
@@ -1247,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";
@@ -7717,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) => {
@@ -7737,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);
   }) });
@@ -7958,6 +8024,7 @@ function AgentSurface({
   showAvatars = true,
   renderMessage,
   onFeedback,
+  onConfirmAction,
   report,
   dataPanel,
   isOpen = true,
@@ -7974,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(
@@ -8097,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;
@@ -8117,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;