@webless/agent 0.2.14 → 0.2.15

package/dist/embed.cjs

@@ -50,10 +50,90 @@ function closeAgentPanel(customerId) {
 }
 
 // src/react/components/AgentWidget/AgentWidget.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
-// src/react/hooks/useAgentChat.ts
+// src/react/page-shift.ts
 var import_react = require("react");
+var PAGE_SHIFT_CLASS = "webless-agent-page-shift";
+var DEFAULT_RAIL_WIDTH_PX = 450;
+function shouldApplyPageShift(input) {
+  return input.pageShift && !input.isMobile && !input.railCollapsed && !input.railExpanded;
+}
+function resolvePageShiftWidth(railWidth) {
+  if (typeof railWidth === "number" && railWidth > 0) {
+    return railWidth;
+  }
+  if (typeof document !== "undefined") {
+    const token = getComputedStyle(document.documentElement).getPropertyValue("--as-rail-max-width").trim();
+    const parsed = Number.parseFloat(token);
+    if (Number.isFinite(parsed) && parsed > 0) {
+      return parsed;
+    }
+  }
+  return DEFAULT_RAIL_WIDTH_PX;
+}
+var savedPageMargin = null;
+function readPageMarginSnapshot(style) {
+  return {
+    value: style.getPropertyValue("margin-right"),
+    priority: style.getPropertyPriority("margin-right")
+  };
+}
+function restorePageMargin(style, snapshot) {
+  if (snapshot.value) {
+    style.setProperty("margin-right", snapshot.value, snapshot.priority || void 0);
+    return;
+  }
+  style.removeProperty("margin-right");
+}
+function snapshotPageMarginIfNeeded() {
+  if (savedPageMargin !== null) {
+    return;
+  }
+  savedPageMargin = readPageMarginSnapshot(document.documentElement.style);
+}
+function setPageMargin(margin) {
+  snapshotPageMarginIfNeeded();
+  document.documentElement.style.setProperty("margin-right", margin, "important");
+}
+function clearPageMargin() {
+  if (savedPageMargin === null) {
+    return;
+  }
+  restorePageMargin(document.documentElement.style, savedPageMargin);
+  savedPageMargin = null;
+}
+function usePageShift(input) {
+  const { active, railSlotRef } = input;
+  (0, import_react.useEffect)(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    if (!active) {
+      document.documentElement.classList.remove(PAGE_SHIFT_CLASS);
+      clearPageMargin();
+      return;
+    }
+    document.documentElement.classList.add(PAGE_SHIFT_CLASS);
+    function applyMargin() {
+      const rail = railSlotRef.current?.querySelector(".agent-rail");
+      const width = resolvePageShiftWidth(
+        rail instanceof HTMLElement ? rail.offsetWidth : null
+      );
+      setPageMargin(`${width}px`);
+    }
+    applyMargin();
+    const frame = requestAnimationFrame(applyMargin);
+    return () => {
+      cancelAnimationFrame(frame);
+      document.documentElement.classList.remove(PAGE_SHIFT_CLASS);
+      clearPageMargin();
+    };
+  }, [active, railSlotRef]);
+}
+
+// src/react/hooks/useAgentChat.ts
+var import_react2 = require("react");
 
 // src/runtime/client.ts
 var import_client2 = require("eve/client");
@@ -733,7 +813,7 @@ function useAgentChat({
   visitorSessionId,
   storageKeyPrefix
 }) {
-  const previewGrantProviderRef = (0, import_react.useRef)(getUnpublishedPreviewGrant);
+  const previewGrantProviderRef = (0, import_react2.useRef)(getUnpublishedPreviewGrant);
   previewGrantProviderRef.current = getUnpublishedPreviewGrant;
   const resolveUnpublishedPreviewGrant = () => {
     const provider = previewGrantProviderRef.current;
@@ -746,7 +826,7 @@ function useAgentChat({
     }
     return provider();
   };
-  const resolvedStorageKeyPrefix = (0, import_react.useMemo)(
+  const resolvedStorageKeyPrefix = (0, import_react2.useMemo)(
     () => storageKeyPrefix?.trim() || buildAgentStorageKeyPrefix({
       customerId,
       indexId,
@@ -755,19 +835,19 @@ function useAgentChat({
     }),
     [customerId, indexId, runtimeOrigin, storageKeyPrefix, version]
   );
-  const visitorId = (0, import_react.useMemo)(
+  const visitorId = (0, import_react2.useMemo)(
     () => visitorSessionId?.trim() || getOrCreateVisitorSessionId({
       storageKeyPrefix: resolvedStorageKeyPrefix
     }),
     [resolvedStorageKeyPrefix, visitorSessionId]
   );
-  const [state, setState] = (0, import_react.useState)(
+  const [state, setState] = (0, import_react2.useState)(
     () => stateFromConversation(
       loadPersistedAgentConversation(resolvedStorageKeyPrefix, visitorId)
     )
   );
-  const runRef = (0, import_react.useRef)(null);
-  const clientRef = (0, import_react.useRef)(
+  const runRef = (0, import_react2.useRef)(null);
+  const clientRef = (0, import_react2.useRef)(
     createAgentClient({
       customerId,
       getUnpublishedPreviewGrant: resolveUnpublishedPreviewGrant,
@@ -779,8 +859,8 @@ function useAgentChat({
     })
   );
   const identityKey = `${customerId ?? ""}|${indexId}|${version ?? "published"}|${runtimeOrigin ?? ""}|${resolvedStorageKeyPrefix}|${visitorId}`;
-  const identityRef = (0, import_react.useRef)(identityKey);
-  (0, import_react.useEffect)(() => {
+  const identityRef = (0, import_react2.useRef)(identityKey);
+  (0, import_react2.useEffect)(() => {
     if (identityRef.current === identityKey) {
       return;
     }
@@ -810,7 +890,7 @@ function useAgentChat({
     version,
     visitorId
   ]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!hasVisitorMessages(state.messages)) return;
     savePersistedAgentConversation(resolvedStorageKeyPrefix, visitorId, {
       messages: state.messages,
@@ -824,14 +904,14 @@ function useAgentChat({
     state.streamingText,
     visitorId
   ]);
-  const reset = (0, import_react.useCallback)(() => {
+  const reset = (0, import_react2.useCallback)(() => {
     runRef.current?.abort();
     runRef.current = null;
     clientRef.current.reset();
     clearPersistedAgentConversation(resolvedStorageKeyPrefix, visitorId);
     setState(INITIAL_STATE);
   }, [resolvedStorageKeyPrefix, visitorId]);
-  const runTurn = (0, import_react.useCallback)(
+  const runTurn = (0, import_react2.useCallback)(
     async (input) => {
       const { controller, initialText = "", resume, visitorText } = input;
       const { signal } = controller;
@@ -932,7 +1012,7 @@ function useAgentChat({
     },
     []
   );
-  const submit = (0, import_react.useCallback)(
+  const submit = (0, import_react2.useCallback)(
     async (visitorText) => {
       if (runRef.current) {
         runRef.current.abort();
@@ -962,7 +1042,7 @@ function useAgentChat({
     },
     [runTurn]
   );
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const conversation = loadPersistedAgentConversation(
       resolvedStorageKeyPrefix,
       visitorId
@@ -985,7 +1065,7 @@ function useAgentChat({
       controller.abort();
     };
   }, [identityKey, resolvedStorageKeyPrefix, runTurn, visitorId]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     return () => {
       runRef.current?.abort();
       runRef.current = null;
@@ -1014,12 +1094,12 @@ function isAgentBusy(phase) {
 }
 
 // src/react/hooks/useIsMobile.ts
-var import_react2 = require("react");
+var import_react3 = require("react");
 function useIsMobile(breakpoint = 767) {
-  const [isMobile, setIsMobile] = (0, import_react2.useState)(
+  const [isMobile, setIsMobile] = (0, import_react3.useState)(
     () => typeof window !== "undefined" && window.matchMedia(`(max-width: ${breakpoint}px)`).matches
   );
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const media = window.matchMedia(`(max-width: ${breakpoint}px)`);
     const onChange = () => setIsMobile(media.matches);
     onChange();
@@ -1047,7 +1127,7 @@ function normalizeAgentPlacement(placement) {
 }
 
 // src/react/components/AgentRail/AgentRail.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/react/components/ToolTimeline/ToolTimeline.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -1118,7 +1198,7 @@ function AgentActivityBubble({
 }
 
 // src/react/components/Composer/Composer.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function SendIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M8 12V4M8 4l-3 3M8 4l3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
@@ -1129,8 +1209,8 @@ function Composer({
   variant = "default",
   onSubmit
 }) {
-  const [value, setValue] = (0, import_react3.useState)("");
-  const inputRef = (0, import_react3.useRef)(null);
+  const [value, setValue] = (0, import_react4.useState)("");
+  const inputRef = (0, import_react4.useRef)(null);
   function submitCurrent() {
     const trimmed = value.trim();
     if (!trimmed || disabled) return;
@@ -1282,7 +1362,7 @@ function AgentRail({
   onSubmit,
   onFollowUpSelect
 }) {
-  const transcriptRef = (0, import_react4.useRef)(null);
+  const transcriptRef = (0, import_react5.useRef)(null);
   const railStyle = theme?.railMaxWidth ? { ["--rail-width"]: theme.railMaxWidth, ["--as-rail-max-width"]: theme.railMaxWidth } : void 0;
   const isBusy = state.phase === "thinking" || state.phase === "running-tools" || state.phase === "streaming";
   const showActivity = state.toolSteps.length > 0 && (state.phase === "thinking" || state.phase === "running-tools");
@@ -1296,7 +1376,7 @@ function AgentRail({
     streaming: true,
     text: state.streamingText
   } : null;
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const node = transcriptRef.current;
     if (!node) return;
     node.scrollTop = node.scrollHeight;
@@ -1465,12 +1545,24 @@ function AgentWidget({
   runtimeOrigin,
   placement: placementInput,
   defaultCollapsed = true,
+  pageShift = true,
   registerPanelController = false
 }) {
   const isMobile = useIsMobile();
   const placement = normalizeAgentPlacement(placementInput);
-  const [railCollapsed, setRailCollapsed] = (0, import_react5.useState)(defaultCollapsed);
-  const [railExpanded, setRailExpanded] = (0, import_react5.useState)(false);
+  const railSlotRef = (0, import_react6.useRef)(null);
+  const [railCollapsed, setRailCollapsed] = (0, import_react6.useState)(defaultCollapsed);
+  const [railExpanded, setRailExpanded] = (0, import_react6.useState)(false);
+  const pageShiftActive = shouldApplyPageShift({
+    pageShift,
+    isMobile,
+    railCollapsed,
+    railExpanded
+  });
+  usePageShift({
+    active: pageShiftActive,
+    railSlotRef
+  });
   const { state, submit } = useAgentChat({
     customerId,
     getUnpublishedPreviewGrant,
@@ -1479,7 +1571,7 @@ function AgentWidget({
     runtimeOrigin
   });
   const idle = state.phase === "idle" && !hasVisitorMessages(state.messages);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!registerPanelController) return;
     registerAgentPanelController(customerId, {
       open: () => setRailCollapsed(false),
@@ -1502,6 +1594,7 @@ function AgentWidget({
         children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "div",
           {
+            ref: railSlotRef,
             className: "webless-agent-root__rail-slot",
             inert: railCollapsed || void 0,
             "aria-hidden": railCollapsed,
@@ -1559,6 +1652,7 @@ function AgentWidget2({ manifest }) {
       version: manifest.version,
       runtimeOrigin: manifest.runtimeOrigin,
       placement: manifest.placement,
+      pageShift: manifest.pageShift,
       defaultCollapsed: true,
       registerPanelController: true
     }
@@ -1593,7 +1687,8 @@ function normalizeAgentTagManifest(manifest) {
       selector: manifest.mount?.selector?.trim(),
       strategy: manifest.mount?.strategy ?? "body"
     },
-    placement: normalizeAgentPlacement(manifest.placement)
+    placement: normalizeAgentPlacement(manifest.placement),
+    pageShift: manifest.pageShift ?? true
   };
 }