@ripperts/poco-agent-embed 0.1.2 → 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(/\/+$/, "");
@@ -114,6 +115,7 @@
         ? 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 +
@@ -137,6 +139,7 @@
       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);
 
@@ -165,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",
@@ -201,10 +202,15 @@
         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 anchorContainerToButton() {
@@ -255,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) {
@@ -358,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"

package/package.json

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