@page-speed/agent-everywhere 0.3.1 → 0.5.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';
@@ -1212,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"
     };
@@ -1221,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";
@@ -7189,6 +7196,7 @@ function useSemanticBuilder({
   onGeneratedBlocks,
   onUndoRequest,
   buildWelcomeMessage,
+  seedWelcomeMessage = true,
   webSocketImpl
 }) {
   const [messages, setMessages] = useState([]);
@@ -7222,6 +7230,7 @@ function useSemanticBuilder({
     resolveSocketUrlRef.current = resolveSocketUrl;
   }, [resolveSocketUrl]);
   useEffect(() => {
+    if (!seedWelcomeMessage) return;
     const hasContentBrief = !!contentBrief;
     const content = buildWelcomeMessage?.({ pageName, hasContentBrief }) ?? (hasContentBrief ? `Connected to ${pageName}. The page brief is loaded and ready. Describe the page you want and I'll stream back layout guidance and design reasoning.` : `Connected to ${pageName}. There is no saved content brief yet, so I'll work from the current page structure and brand context.`);
     setMessages([
@@ -7232,7 +7241,7 @@ function useSemanticBuilder({
         createdAt: Date.now()
       }
     ]);
-  }, [contentBrief, pageName, pageSlug]);
+  }, [contentBrief, pageName, pageSlug, seedWelcomeMessage]);
   const handleEnvelope = useCallback((envelope) => {
     switch (envelope.type) {
       case "connection_ready":
@@ -7444,6 +7453,14 @@ function useSemanticBuilder({
   const retry = useCallback(() => {
     clientRef.current?.retry();
   }, []);
+  const reset = useCallback(() => {
+    pendingHiddenRequestsRef.current = 0;
+    hiddenAssistantMessageIdsRef.current.clear();
+    clientRef.current?.close();
+    setConnectionState("idle");
+    setConnectionError(null);
+    setMessages([]);
+  }, []);
   const isConnected = connectionState === "ready" || connectionState === "streaming";
   const isStreaming = connectionState === "streaming";
   const statusLabel = useMemo(() => {
@@ -7470,7 +7487,8 @@ function useSemanticBuilder({
     isConnected,
     isStreaming,
     sendMessage,
-    retry
+    retry,
+    reset
   };
 }
 var ScrollArea = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
@@ -7691,10 +7709,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) => {
@@ -7711,7 +7777,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);
   }) });
@@ -7915,6 +7992,54 @@ function FullBleedSurface({
     }
   );
 }
+function NativeSurface({
+  children,
+  input,
+  title,
+  subtitle,
+  icon,
+  headerActions,
+  suggestions,
+  footer,
+  isLoading = false,
+  autoScroll = true,
+  className,
+  contentClassName
+}) {
+  const scrollRef = useRef(null);
+  useEffect(() => {
+    if (autoScroll && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [children, isLoading, autoScroll]);
+  const showHeader = !!title || !!headerActions || !!icon;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full min-h-0 flex-col", className), children: [
+    showHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-4 py-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        icon,
+        (title || subtitle) && /* @__PURE__ */ jsxs("div", { children: [
+          title && /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: title }),
+          subtitle && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: subtitle })
+        ] })
+      ] }),
+      headerActions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: headerActions })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollRef,
+        className: cn("min-h-0 flex-1 overflow-y-auto", contentClassName),
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4", children: [
+          children,
+          isLoading && /* @__PURE__ */ jsx(TypingIndicator, {})
+        ] })
+      }
+    ),
+    suggestions && /* @__PURE__ */ jsx("div", { className: "border-t px-4 py-2", children: suggestions }),
+    input,
+    footer && /* @__PURE__ */ jsx("div", { className: "border-t px-4 py-1.5", children: footer })
+  ] });
+}
 function AgentSurface({
   mode,
   messages,
@@ -7932,6 +8057,7 @@ function AgentSurface({
   showAvatars = true,
   renderMessage,
   onFeedback,
+  onConfirmAction,
   report,
   dataPanel,
   isOpen = true,
@@ -7948,7 +8074,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(
@@ -8036,6 +8163,21 @@ function AgentSurface({
           children: conversation
         }
       );
+    case "native":
+      return /* @__PURE__ */ jsx(
+        NativeSurface,
+        {
+          title,
+          subtitle,
+          icon,
+          headerActions,
+          input: resolvedInput,
+          suggestions,
+          isLoading,
+          className,
+          children: conversation
+        }
+      );
     case "panel":
     default:
       return /* @__PURE__ */ jsx(
@@ -8054,7 +8196,337 @@ function AgentSurface({
       );
   }
 }
+var NativeAgentContext = createContext(
+  null
+);
+function useNativeAgent() {
+  const ctx = useContext(NativeAgentContext);
+  if (!ctx) {
+    throw new Error(
+      "useNativeAgent must be used within a <NativeAgentProvider>."
+    );
+  }
+  return ctx;
+}
+function useNativeAgentOptional() {
+  return useContext(NativeAgentContext);
+}
+var EMPTY_BLOCKS = [];
+var REASONING_STATUS = {
+  active: "active",
+  complete: "complete"
+};
+function toAgentMessage(message) {
+  const reasoning = message.thinking ? [
+    {
+      id: `${message.id}__thinking`,
+      label: "Thinking",
+      content: message.thinking,
+      status: message.streaming ? REASONING_STATUS.active : REASONING_STATUS.complete
+    }
+  ] : void 0;
+  return {
+    id: message.id,
+    role: message.role,
+    content: message.content,
+    timestamp: new Date(message.createdAt),
+    reasoning
+  };
+}
+function deriveStatus(connectionState) {
+  switch (connectionState) {
+    case "streaming":
+      return "busy";
+    case "ready":
+      return "online";
+    case "connecting":
+      return "away";
+    default:
+      return "offline";
+  }
+}
+function NativeAgentProvider({
+  children,
+  socketUrl,
+  resolveSocketUrl,
+  websiteId,
+  pageCategoryId,
+  pageName = "",
+  pageSlug,
+  blocks,
+  contentBrief,
+  onGeneratedBlocks,
+  webSocketImpl,
+  connectionStrategy = "lazy",
+  seedWelcomeMessage = false,
+  onError,
+  onActivate
+}) {
+  const [enabled, setEnabled] = useState(connectionStrategy === "eager");
+  const [isActive, setIsActive] = useState(false);
+  const [input, setInput] = useState("");
+  const [pendingCount, setPendingCount] = useState(0);
+  const [optimistic, setOptimistic] = useState([]);
+  const blocksValue = blocks ?? EMPTY_BLOCKS;
+  const {
+    messages: builderMessages,
+    connectionState,
+    connectionError,
+    statusLabel,
+    isConnected,
+    isStreaming,
+    sendMessage,
+    retry,
+    reset: resetSession
+  } = useSemanticBuilder({
+    socketUrl,
+    resolveSocketUrl,
+    websiteId,
+    pageCategoryId,
+    pageName,
+    pageSlug,
+    blocks: blocksValue,
+    contentBrief,
+    enabled,
+    onGeneratedBlocks,
+    webSocketImpl,
+    seedWelcomeMessage
+  });
+  const pendingPromptsRef = useRef([]);
+  const optimisticSeqRef = useRef(0);
+  const onActivateRef = useRef(onActivate);
+  const onErrorRef = useRef(onError);
+  useEffect(() => {
+    onActivateRef.current = onActivate;
+  }, [onActivate]);
+  useEffect(() => {
+    onErrorRef.current = onError;
+  }, [onError]);
+  useEffect(() => {
+    if (connectionError) onErrorRef.current?.(connectionError);
+  }, [connectionError]);
+  const markActive = useCallback(() => {
+    setIsActive((prev) => {
+      if (!prev) onActivateRef.current?.();
+      return true;
+    });
+  }, []);
+  useEffect(() => {
+    if (connectionState !== "ready" || pendingPromptsRef.current.length === 0) {
+      return;
+    }
+    const next = pendingPromptsRef.current.shift();
+    if (next === void 0) return;
+    setPendingCount(pendingPromptsRef.current.length);
+    setOptimistic((prev) => prev.slice(1));
+    void sendMessage(next).then((ok) => {
+      if (!ok) {
+        pendingPromptsRef.current.unshift(next);
+        setPendingCount(pendingPromptsRef.current.length);
+      }
+    });
+  }, [connectionState, pendingCount, sendMessage]);
+  const submit = useCallback(
+    (content) => {
+      const text = (content ?? input).trim();
+      if (!text) return;
+      markActive();
+      setEnabled(true);
+      setInput("");
+      pendingPromptsRef.current.push(text);
+      setPendingCount(pendingPromptsRef.current.length);
+      const id = `native-pending-${optimisticSeqRef.current}`;
+      optimisticSeqRef.current += 1;
+      setOptimistic((prev) => [
+        ...prev,
+        { id, role: "user", content: text, timestamp: /* @__PURE__ */ new Date() }
+      ]);
+    },
+    [input, markActive]
+  );
+  const activate = useCallback(() => {
+    markActive();
+    setEnabled(true);
+  }, [markActive]);
+  const reset = useCallback(() => {
+    pendingPromptsRef.current = [];
+    setPendingCount(0);
+    setOptimistic([]);
+    setIsActive(false);
+    setInput("");
+    setEnabled(false);
+    resetSession();
+  }, [resetSession]);
+  const messages = useMemo(
+    () => [...builderMessages.map(toAgentMessage), ...optimistic],
+    [builderMessages, optimistic]
+  );
+  const isResponding = isStreaming || pendingCount > 0 && !connectionError && connectionState !== "error" && connectionState !== "requires_shared_domain";
+  const status = deriveStatus(connectionState);
+  const value = useMemo(
+    () => ({
+      messages,
+      isActive,
+      isConnected,
+      isResponding,
+      isStreaming,
+      connectionState,
+      statusLabel,
+      status,
+      error: connectionError,
+      input,
+      setInput,
+      submit,
+      activate,
+      reset,
+      retry
+    }),
+    [
+      messages,
+      isActive,
+      isConnected,
+      isResponding,
+      isStreaming,
+      connectionState,
+      statusLabel,
+      status,
+      connectionError,
+      input,
+      submit,
+      activate,
+      reset,
+      retry
+    ]
+  );
+  return /* @__PURE__ */ jsx(NativeAgentContext.Provider, { value, children });
+}
+var noop = () => {
+};
+function warnDev(message) {
+  const env = globalThis.process?.env;
+  if (env && env.NODE_ENV !== "production") {
+    console.warn(`[AgentComposer] ${message}`);
+  }
+}
+function AgentComposer({
+  value: valueProp,
+  onChange,
+  onSubmit,
+  loading: loadingProp,
+  disabled: disabledProp,
+  placeholder = "Ask anything\u2026",
+  variant = "default",
+  bare = false,
+  suggestions,
+  footer,
+  leftActions,
+  rightActions,
+  autoFocus = false,
+  className,
+  inputClassName
+}) {
+  const ctx = useNativeAgentOptional();
+  const [draft, setDraft] = useState("");
+  const propsControlEditing = valueProp !== void 0 || onChange !== void 0;
+  const value = propsControlEditing ? valueProp ?? "" : ctx ? ctx.input : draft;
+  const handleChange = propsControlEditing ? onChange ?? noop : ctx ? ctx.setInput : setDraft;
+  const loading = loadingProp ?? ctx?.isResponding ?? false;
+  const disabled = disabledProp ?? false;
+  const handleSubmit = useCallback(() => {
+    if (onSubmit) {
+      onSubmit(value);
+      return;
+    }
+    if (!propsControlEditing && ctx) {
+      ctx.submit();
+      return;
+    }
+    warnDev(
+      "submit was ignored: provide `onSubmit`, or render inside a <NativeAgentProvider>."
+    );
+  }, [onSubmit, propsControlEditing, ctx, value]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        !bare && "rounded-2xl border bg-background shadow-sm",
+        className
+      ),
+      children: [
+        suggestions && /* @__PURE__ */ jsx("div", { className: cn("px-3", bare ? "pb-2" : "pt-3"), children: suggestions }),
+        /* @__PURE__ */ jsx(
+          PromptInput,
+          {
+            value,
+            onChange: handleChange,
+            onSubmit: handleSubmit,
+            placeholder,
+            loading,
+            disabled,
+            variant,
+            autoFocus,
+            leftActions,
+            rightActions,
+            inputClassName
+          }
+        ),
+        footer && /* @__PURE__ */ jsx("div", { className: "px-4 pb-2 text-muted-foreground text-xs", children: footer })
+      ]
+    }
+  );
+}
+var EMPTY_MESSAGES = [];
+function AgentConversation({
+  messages: messagesProp,
+  isLoading: isLoadingProp,
+  header,
+  emptyState,
+  showAvatars = true,
+  renderMessage,
+  onFeedback,
+  onConfirmAction,
+  autoScroll = true,
+  className,
+  contentClassName
+}) {
+  const ctx = useNativeAgentOptional();
+  const messages = useMemo(
+    () => messagesProp ?? ctx?.messages ?? EMPTY_MESSAGES,
+    [messagesProp, ctx?.messages]
+  );
+  const isLoading = isLoadingProp ?? ctx?.isResponding ?? false;
+  const scrollRef = useRef(null);
+  useEffect(() => {
+    if (autoScroll && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages, isLoading, autoScroll]);
+  const showEmptyState = messages.length === 0 && !isLoading && !!emptyState;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full min-h-0 flex-col", className), children: [
+    header,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollRef,
+        className: cn("min-h-0 flex-1 overflow-y-auto", contentClassName),
+        children: showEmptyState ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center p-6", children: emptyState }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4", children: [
+          /* @__PURE__ */ jsx(
+            MessageList,
+            {
+              messages,
+              showAvatars,
+              renderMessage,
+              onFeedback,
+              onConfirmAction
+            }
+          ),
+          isLoading && /* @__PURE__ */ jsx(TypingIndicator, {})
+        ] })
+      }
+    )
+  ] });
+}
 
-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, AgentComposer, AgentConversation, 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, NativeAgentProvider, NativeSurface, 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, useNativeAgent, useNativeAgentOptional, useSemanticBuilder };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map