@page-speed/agent-everywhere 0.4.0 → 0.5.0

package/dist/index.js

@@ -7196,6 +7196,7 @@ function useSemanticBuilder({
   onGeneratedBlocks,
   onUndoRequest,
   buildWelcomeMessage,
+  seedWelcomeMessage = true,
   webSocketImpl
 }) {
   const [messages, setMessages] = useState([]);
@@ -7229,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([
@@ -7239,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":
@@ -7451,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(() => {
@@ -7477,7 +7487,8 @@ function useSemanticBuilder({
     isConnected,
     isStreaming,
     sendMessage,
-    retry
+    retry,
+    reset
   };
 }
 var ScrollArea = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
@@ -7981,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,
@@ -8104,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(
@@ -8122,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, 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 };
+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