@page-speed/agent-everywhere 0.4.0 → 0.6.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, ClipboardListIcon, 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, Loader2, ArrowUp, PanelLeft, PanelRight, Sparkles, RotateCcw, ChevronDown, MessageSquare, Paperclip, 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';
@@ -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,768 @@ 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, {})
+        ] })
+      }
+    )
+  ] });
+}
+var AgentWorkspaceContext = createContext(null);
+function useAgentWorkspace() {
+  const ctx = useContext(AgentWorkspaceContext);
+  if (!ctx) {
+    throw new Error(
+      "useAgentWorkspace must be used within an <AgentWorkspace>."
+    );
+  }
+  return ctx;
+}
+function useAgentWorkspaceOptional() {
+  return useContext(AgentWorkspaceContext);
+}
+var noop2 = () => {
+};
+function warnDev2(message) {
+  const env = globalThis.process?.env;
+  if (env && env.NODE_ENV !== "production") {
+    console.warn(`[AgentWorkspaceComposer] ${message}`);
+  }
+}
+var LINE_HEIGHT_PX2 = 20;
+var VERTICAL_PADDING_PX2 = 16;
+function AgentWorkspaceComposer({
+  value: valueProp,
+  onChange,
+  onSubmit,
+  loading: loadingProp,
+  disabled = false,
+  placeholder = "Ask anything\u2026",
+  onAttach,
+  leftActions,
+  minRows = 1,
+  maxRows = 6,
+  autoFocus = false,
+  className,
+  inputClassName
+}) {
+  const agent = useNativeAgentOptional();
+  const workspace = useAgentWorkspaceOptional();
+  const [draft, setDraft] = useState("");
+  const textareaRef = useRef(null);
+  const propsControlEditing = valueProp !== void 0 || onChange !== void 0;
+  const value = propsControlEditing ? valueProp ?? "" : agent ? agent.input : draft;
+  const handleChange = propsControlEditing ? onChange ?? noop2 : agent ? agent.setInput : setDraft;
+  const loading = loadingProp ?? agent?.isResponding ?? false;
+  const resize = useCallback(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    const maxHeight = maxRows * LINE_HEIGHT_PX2 + VERTICAL_PADDING_PX2;
+    const minHeight = minRows * LINE_HEIGHT_PX2 + VERTICAL_PADDING_PX2;
+    const next = Math.min(Math.max(el.scrollHeight, minHeight), maxHeight);
+    el.style.height = `${next}px`;
+    el.style.overflowY = el.scrollHeight > maxHeight ? "auto" : "hidden";
+  }, [maxRows, minRows]);
+  useLayoutEffect(() => {
+    resize();
+  }, [value, resize]);
+  const handleSubmit = useCallback(
+    (e) => {
+      e?.preventDefault();
+      if (!value.trim() || disabled || loading) return;
+      workspace?.openConversation();
+      if (onSubmit) {
+        onSubmit(value);
+        return;
+      }
+      if (!propsControlEditing && agent) {
+        agent.submit();
+        return;
+      }
+      warnDev2(
+        "submit was ignored: provide `onSubmit`, or render inside a <NativeAgentProvider>."
+      );
+    },
+    [value, disabled, loading, workspace, onSubmit, propsControlEditing, agent]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+  const attach = leftActions ?? (onAttach ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: onAttach,
+      "aria-label": "Attach",
+      className: "flex size-9 shrink-0 items-center justify-center rounded-xl text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
+      children: /* @__PURE__ */ jsx(Paperclip, { className: "size-4" })
+    }
+  ) : null);
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      className: cn(
+        "flex items-end gap-2 rounded-2xl border border-border bg-background p-2 shadow-sm transition-colors focus-within:border-foreground/30",
+        className
+      ),
+      children: [
+        attach,
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ref: textareaRef,
+            value,
+            onChange: (e) => handleChange(e.target.value),
+            onKeyDown: handleKeyDown,
+            placeholder,
+            disabled,
+            autoFocus,
+            rows: minRows,
+            className: cn(
+              "flex-1 resize-none border-0 bg-transparent px-1 py-2 text-sm leading-5 shadow-none outline-none",
+              "placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              inputClassName
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "submit",
+            "aria-label": "Send",
+            disabled: !value.trim() || disabled || loading,
+            className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground transition-opacity disabled:opacity-30",
+            children: loading ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(ArrowUp, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function AgentWorkspacePanelToggle({
+  side,
+  open: openProp,
+  onToggle,
+  className
+}) {
+  const workspace = useAgentWorkspaceOptional();
+  const propsControlled = openProp !== void 0 || onToggle !== void 0;
+  if (!propsControlled && workspace) {
+    const hasPanel = side === "left" ? workspace.hasLeftPanel : workspace.hasRightPanel;
+    if (!hasPanel) return null;
+  }
+  const open = propsControlled ? openProp ?? false : side === "left" ? workspace?.leftPanelOpen ?? false : workspace?.rightPanelOpen ?? false;
+  const handleToggle = propsControlled ? onToggle : side === "left" ? workspace?.toggleLeftPanel : workspace?.toggleRightPanel;
+  const Icon = side === "left" ? PanelLeft : PanelRight;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: handleToggle,
+      "aria-label": side === "left" ? "Toggle left panel" : "Toggle right panel",
+      "aria-pressed": open,
+      className: cn(
+        "flex size-8 items-center justify-center rounded-lg transition-colors",
+        open ? "bg-secondary text-foreground" : "text-muted-foreground hover:bg-secondary",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
+    }
+  );
+}
+var inertProps = (inert) => inert ? { inert: "" } : {};
+function useOpenState(controlled, defaultOpen, onChange) {
+  const [internal, setInternal] = useState(defaultOpen);
+  const isControlled = controlled !== void 0;
+  const open = isControlled ? controlled : internal;
+  const onChangeRef = useRef(onChange);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  const setOpen = useCallback(
+    (next) => {
+      if (!isControlled) setInternal(next);
+      onChangeRef.current?.(next);
+    },
+    [isControlled]
+  );
+  return [open, setOpen];
+}
+function AgentWorkspace({
+  children,
+  leftPanel,
+  rightPanel,
+  leftPanelWidth = 320,
+  rightPanelWidth = 460,
+  defaultLeftPanelOpen = true,
+  defaultRightPanelOpen = true,
+  leftPanelOpen: leftPanelOpenProp,
+  rightPanelOpen: rightPanelOpenProp,
+  onLeftPanelOpenChange,
+  onRightPanelOpenChange,
+  showPanelToggles = true,
+  conversation,
+  conversationOpen: conversationOpenProp,
+  onConversationOpenChange,
+  conversationTitle = "AI Assistant",
+  showConversationHeader = true,
+  composer = true,
+  composerPlaceholder,
+  composerHint,
+  onComposerSubmit,
+  className,
+  contentClassName,
+  conversationClassName,
+  leftPanelClassName,
+  rightPanelClassName,
+  composerClassName
+}) {
+  const agent = useNativeAgentOptional();
+  const hasLeftPanel = leftPanel !== void 0 && leftPanel !== null;
+  const hasRightPanel = rightPanel !== void 0 && rightPanel !== null;
+  const [leftOpen, setLeftOpen] = useOpenState(
+    leftPanelOpenProp,
+    defaultLeftPanelOpen,
+    onLeftPanelOpenChange
+  );
+  const [rightOpen, setRightOpen] = useOpenState(
+    rightPanelOpenProp,
+    defaultRightPanelOpen,
+    onRightPanelOpenChange
+  );
+  const [conversationOpen, setConversationOpen] = useOpenState(
+    conversationOpenProp,
+    false,
+    onConversationOpenChange
+  );
+  const isActive = agent?.isActive ?? false;
+  const wasActiveRef = useRef(false);
+  useEffect(() => {
+    if (isActive !== wasActiveRef.current) {
+      wasActiveRef.current = isActive;
+      setConversationOpen(isActive);
+    }
+  }, [isActive, setConversationOpen]);
+  const value = useMemo(
+    () => ({
+      hasLeftPanel,
+      hasRightPanel,
+      leftPanelOpen: leftOpen,
+      rightPanelOpen: rightOpen,
+      setLeftPanelOpen: setLeftOpen,
+      setRightPanelOpen: setRightOpen,
+      toggleLeftPanel: () => setLeftOpen(!leftOpen),
+      toggleRightPanel: () => setRightOpen(!rightOpen),
+      conversationOpen,
+      setConversationOpen,
+      openConversation: () => setConversationOpen(true),
+      closeConversation: () => setConversationOpen(false)
+    }),
+    [
+      hasLeftPanel,
+      hasRightPanel,
+      leftOpen,
+      rightOpen,
+      setLeftOpen,
+      setRightOpen,
+      conversationOpen,
+      setConversationOpen
+    ]
+  );
+  const showDock = composer !== false;
+  const dockNode = composer === true || composer === void 0 ? /* @__PURE__ */ jsx(
+    AgentWorkspaceComposer,
+    {
+      placeholder: composerPlaceholder,
+      onSubmit: onComposerSubmit
+    }
+  ) : composer;
+  const statusLine = agent ? agent.error ?? agent.statusLabel : null;
+  return /* @__PURE__ */ jsx(AgentWorkspaceContext.Provider, { value, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-conversation-open": conversationOpen || void 0,
+      className: cn(
+        "flex h-full w-full overflow-hidden bg-background text-foreground",
+        className
+      ),
+      children: [
+        hasLeftPanel && /* @__PURE__ */ jsx(
+          "aside",
+          {
+            "data-state": leftOpen ? "open" : "collapsed",
+            "aria-hidden": !leftOpen || void 0,
+            className: cn(
+              "relative hidden h-full shrink-0 overflow-hidden border-r border-border transition-[width] duration-300 ease-in-out lg:block",
+              !leftOpen && "border-r-0",
+              leftPanelClassName
+            ),
+            style: { width: leftOpen ? leftPanelWidth : 0 },
+            children: /* @__PURE__ */ jsx("div", { className: "h-full", style: { width: leftPanelWidth }, children: leftPanel })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex h-full min-w-0 grow flex-col", children: [
+          showPanelToggles && hasLeftPanel && /* @__PURE__ */ jsx("div", { className: "absolute left-3 top-3 z-30 hidden lg:block", children: /* @__PURE__ */ jsx(
+            AgentWorkspacePanelToggle,
+            {
+              side: "left",
+              className: "border border-border/60 bg-background/80 shadow-sm backdrop-blur"
+            }
+          ) }),
+          showPanelToggles && hasRightPanel && /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-3 z-30 hidden lg:block", children: /* @__PURE__ */ jsx(
+            AgentWorkspacePanelToggle,
+            {
+              side: "right",
+              className: "border border-border/60 bg-background/80 shadow-sm backdrop-blur"
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 grow", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": conversationOpen || void 0,
+                ...inertProps(conversationOpen),
+                className: cn("h-full overflow-y-auto", contentClassName),
+                children
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "data-state": conversationOpen ? "open" : "closed",
+                "aria-hidden": !conversationOpen || void 0,
+                ...inertProps(!conversationOpen),
+                className: cn(
+                  "absolute inset-0 z-20 flex flex-col bg-background transition-[opacity,transform] duration-300 ease-out",
+                  conversationOpen ? "translate-y-0 opacity-100" : "pointer-events-none translate-y-8 opacity-0",
+                  conversationClassName
+                ),
+                children: [
+                  showConversationHeader && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-border bg-background px-4 py-2.5", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+                      /* @__PURE__ */ jsx("span", { className: "flex size-7 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(Sparkles, { className: "size-3.5" }) }),
+                      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                        /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium", children: conversationTitle }),
+                        statusLine && /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-muted-foreground", children: statusLine })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+                      (hasLeftPanel || hasRightPanel) && /* @__PURE__ */ jsxs("div", { className: "mr-1 hidden items-center gap-1 border-r border-border pr-2 lg:flex", children: [
+                        /* @__PURE__ */ jsx(AgentWorkspacePanelToggle, { side: "left" }),
+                        /* @__PURE__ */ jsx(AgentWorkspacePanelToggle, { side: "right" })
+                      ] }),
+                      agent && /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => agent.reset(),
+                          "aria-label": "Start a new conversation",
+                          title: "New conversation",
+                          className: "flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
+                          children: /* @__PURE__ */ jsx(RotateCcw, { className: "size-4" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setConversationOpen(false),
+                          "aria-label": "Hide conversation",
+                          title: "Hide conversation",
+                          className: "flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
+                          children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" })
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "min-h-0 grow", children: conversation ?? /* @__PURE__ */ jsx(
+                    AgentConversation,
+                    {
+                      contentClassName: "mx-auto w-full max-w-3xl",
+                      showAvatars: true
+                    }
+                  ) })
+                ]
+              }
+            )
+          ] }),
+          showDock && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "relative z-30 shrink-0 border-t border-border bg-background/80 px-4 py-3 backdrop-blur",
+                composerClassName
+              ),
+              children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-3xl", children: [
+                isActive && !conversationOpen && /* @__PURE__ */ jsx("div", { className: "mb-2 flex justify-center", children: /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setConversationOpen(true),
+                    className: "inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:border-foreground/20 hover:text-foreground",
+                    children: [
+                      agent?.isResponding ? /* @__PURE__ */ jsx(Loader2, { className: "size-3 animate-spin" }) : /* @__PURE__ */ jsx(MessageSquare, { className: "size-3" }),
+                      "View conversation"
+                    ]
+                  }
+                ) }),
+                dockNode,
+                composerHint && /* @__PURE__ */ jsx("div", { className: "mt-2 text-center text-[11px] text-muted-foreground", children: composerHint })
+              ] })
+            }
+          )
+        ] }),
+        hasRightPanel && /* @__PURE__ */ jsx(
+          "aside",
+          {
+            "data-state": rightOpen ? "open" : "collapsed",
+            "aria-hidden": !rightOpen || void 0,
+            className: cn(
+              "relative hidden h-full shrink-0 overflow-hidden border-l border-border transition-[width] duration-300 ease-in-out lg:block",
+              !rightOpen && "border-l-0",
+              rightPanelClassName
+            ),
+            style: { width: rightOpen ? rightPanelWidth : 0 },
+            children: /* @__PURE__ */ jsx("div", { className: "h-full", style: { width: rightPanelWidth }, children: rightPanel })
+          }
+        )
+      ]
+    }
+  ) });
+}
 
-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, AgentWorkspace, AgentWorkspaceComposer, AgentWorkspacePanelToggle, 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, useAgentWorkspace, useAgentWorkspaceOptional, useNativeAgent, useNativeAgentOptional, useSemanticBuilder };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map