@ripperts/poco-agent-embed 0.1.1 → 0.1.3

package/README.md

@@ -120,4 +120,4 @@ export function AgentChat({ getAccessToken }: AgentChatProps) {
 
 支持现代 Chrome、Edge、Firefox 和 Safari。Vue 2 项目可以正常接入，但不支持 Internet Explorer 11。
 
-完整参数和安全配置请参阅 [Agent 外部嵌入文档](https://ai-agent.fsxgt.cn/docs/external-integration/agent-embed)。
+完整参数和安全配置请参阅 [Agent 外部嵌入文档](https://ai-agent.fsxgt.cn/docs/getting-started/agent-embed)。

package/index.js

@@ -18,6 +18,7 @@
     var MESSAGE_REQUEST_AUTH = "poco-agent-embed:request-auth";
     var MESSAGE_AUTHENTICATE = "poco-agent-embed:authenticate";
     var MESSAGE_ERROR = "poco-agent-embed:error";
+    var MESSAGE_DRAG = "poco-agent-embed:drag";
 
     function trimTrailingSlash(value) {
       return String(value || "").replace(/\/+$/, "");
@@ -106,10 +107,15 @@
       var language = ["en", "zh"].includes(requestedLanguage)
         ? requestedLanguage
         : "en";
+      var toggleButtonLabels =
+        language === "zh"
+          ? { open: "打开 AI 助手", close: "关闭 AI 助手" }
+          : { open: "Open AI Agent", close: "Close AI Agent" };
       var theme = ["light", "dark", "system"].includes(options.theme)
         ? options.theme
         : "system";
       var query = new URLSearchParams({ channel: channel, theme: theme });
+      if (!target && options.draggable !== false) query.set("draggable", "1");
       var iframe = document.createElement("iframe");
       iframe.src =
         baseUrl +
@@ -133,9 +139,26 @@
       var container = document.createElement("div");
       var button = null;
       var updateViewportPosition = null;
+      var handleFrameDrag = null;
       var openIcon = createIcon(options.openIcon, false);
       var closeIcon = createIcon(options.closeIcon, true);
 
+      function renderFloatingState() {
+        container.style.opacity = opened ? "1" : "0";
+        container.style.visibility = opened ? "visible" : "hidden";
+        container.style.pointerEvents = opened ? "auto" : "none";
+        container.style.transform = opened ? "scale(1)" : "scale(.96)";
+        if (!button) return;
+        button.replaceChildren(opened ? closeIcon : openIcon);
+        button.setAttribute("aria-expanded", opened ? "true" : "false");
+        button.setAttribute(
+          "aria-label",
+          opened
+            ? toggleButtonLabels.close
+            : options.ariaLabel || toggleButtonLabels.open,
+        );
+      }
+
       if (target) {
         container.style.cssText =
           "position:relative;width:100%;height:100%;overflow:hidden";
@@ -145,8 +168,6 @@
         container.style.cssText = [
           "position:fixed",
           "width:min(420px,calc(100vw - 24px))",
-          "height:min(720px,calc(100dvh - 96px))",
-          "min-height:min(360px,calc(100dvh - 96px))",
           "overflow:hidden",
           "border:1px solid color-mix(in srgb,CanvasText 25%,transparent)",
           "border-radius:16px",
@@ -160,7 +181,6 @@
 
         button = document.createElement("button");
         button.type = "button";
-        button.setAttribute("aria-label", options.ariaLabel || "Open AI Agent");
         button.style.cssText = [
           "position:fixed",
           "display:flex",
@@ -182,25 +202,17 @@
         var position = options.position || "bottom-right";
         var vertical = position.indexOf("top") === 0 ? "top" : "bottom";
         var horizontal = position.indexOf("left") > -1 ? "left" : "right";
-        button.style[vertical] = "20px";
+        var verticalOffset = vertical === "bottom" ? 100 : 20;
+        var popupAvailableHeight =
+          "calc(100dvh - " + (verticalOffset + 76) + "px)";
+        button.style[vertical] = verticalOffset + "px";
         button.style[horizontal] = "20px";
-        container.style[vertical] = "84px";
+        container.style[vertical] = verticalOffset + 64 + "px";
         container.style[horizontal] = "20px";
+        container.style.height = "min(720px," + popupAvailableHeight + ")";
+        container.style.minHeight = "min(360px," + popupAvailableHeight + ")";
         container.style.transformOrigin = vertical + " " + horizontal;
 
-        function renderButtonIcon() {
-          button.replaceChildren(opened ? closeIcon : openIcon);
-          button.setAttribute("aria-expanded", opened ? "true" : "false");
-        }
-
-        function renderOpenState() {
-          container.style.opacity = opened ? "1" : "0";
-          container.style.visibility = opened ? "visible" : "hidden";
-          container.style.pointerEvents = opened ? "auto" : "none";
-          container.style.transform = opened ? "scale(1)" : "scale(.96)";
-          renderButtonIcon();
-        }
-
         function anchorContainerToButton() {
           var rect = button.getBoundingClientRect();
           var useLeft = rect.left + rect.width / 2 < window.innerWidth / 2;
@@ -249,6 +261,52 @@
           anchorContainerToButton();
         };
 
+        var frameDrag = null;
+        handleFrameDrag = function (data) {
+          if (data.phase === "start") {
+            var buttonRect = button.getBoundingClientRect();
+            var containerRect = container.getBoundingClientRect();
+            frameDrag = {
+              buttonLeft: buttonRect.left,
+              buttonTop: buttonRect.top,
+              containerLeft: containerRect.left,
+              containerTop: containerRect.top,
+              minX: 8 - Math.min(buttonRect.left, containerRect.left),
+              maxX:
+                window.innerWidth -
+                8 -
+                Math.max(buttonRect.right, containerRect.right),
+              minY: 8 - Math.min(buttonRect.top, containerRect.top),
+              maxY:
+                window.innerHeight -
+                8 -
+                Math.max(buttonRect.bottom, containerRect.bottom),
+            };
+            container.style.height = containerRect.height + "px";
+            container.style.minHeight = containerRect.height + "px";
+            return;
+          }
+          if (!frameDrag) return;
+          if (data.phase === "move") {
+            var offsetX = Math.max(
+              frameDrag.minX,
+              Math.min(frameDrag.maxX, data.dx),
+            );
+            var offsetY = Math.max(
+              frameDrag.minY,
+              Math.min(frameDrag.maxY, data.dy),
+            );
+            button.style.left = frameDrag.buttonLeft + offsetX + "px";
+            button.style.top = frameDrag.buttonTop + offsetY + "px";
+            container.style.left = frameDrag.containerLeft + offsetX + "px";
+            container.style.top = frameDrag.containerTop + offsetY + "px";
+            container.style.bottom = "auto";
+            return;
+          }
+          frameDrag = null;
+          anchorContainerToButton();
+        };
+
         var dragState = null;
         var suppressClickUntil = 0;
         button.addEventListener("pointerdown", function (event) {
@@ -299,9 +357,10 @@
         button.addEventListener("click", function () {
           if (Date.now() < suppressClickUntil) return;
           opened = !opened;
-          renderOpenState();
+          renderFloatingState();
         });
 
+        renderFloatingState();
         document.body.appendChild(container);
         document.body.appendChild(button);
         window.addEventListener("resize", updateViewportPosition);
@@ -313,7 +372,6 @@
           );
         }
         updateViewportPosition();
-        renderOpenState();
       }
 
       async function authenticate() {
@@ -352,6 +410,15 @@
           event.data.type === MESSAGE_REQUEST_AUTH
         ) {
           authenticate();
+        } else if (
+          event.data.type === MESSAGE_DRAG &&
+          handleFrameDrag &&
+          options.draggable !== false &&
+          ["start", "move", "end"].includes(event.data.phase) &&
+          Number.isFinite(event.data.dx) &&
+          Number.isFinite(event.data.dy)
+        ) {
+          handleFrameDrag(event.data);
         } else if (
           event.data.type === MESSAGE_ERROR &&
           typeof options.onError === "function"
@@ -367,14 +434,7 @@
       function setOpened(next) {
         if (destroyed || target) return;
         opened = next;
-        container.style.opacity = opened ? "1" : "0";
-        container.style.visibility = opened ? "visible" : "hidden";
-        container.style.pointerEvents = opened ? "auto" : "none";
-        container.style.transform = opened ? "scale(1)" : "scale(.96)";
-        if (button) {
-          button.replaceChildren(opened ? closeIcon : openIcon);
-          button.setAttribute("aria-expanded", opened ? "true" : "false");
-        }
+        renderFloatingState();
       }
 
       return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ripperts/poco-agent-embed",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Zero-dependency SDK for embedding a Poco Agent conversation",
   "main": "index.js",
   "module": "index.mjs",