From a077e50c6f5ca0b07f89fb0ca859a3dd222c4f70 Mon Sep 17 00:00:00 2001 From: mlogclub Date: Sat, 9 May 2026 23:00:55 +0800 Subject: [PATCH] refactor: improve layout responsiveness and styling for chat components --- web/components/chat/shared-message-editor.tsx | 4 +-- web/components/kefu/chat-shell.tsx | 24 ++++++++------- web/lib/sdk/cs-ai-agent-sdk.test.mjs | 22 ++++++++++++++ web/lib/sdk/cs-ai-agent-sdk.ts | 30 +++++++++++-------- web/public/sdk/cs-ai-agent-sdk.min.js | 2 +- 5 files changed, 55 insertions(+), 27 deletions(-) diff --git a/web/components/chat/shared-message-editor.tsx b/web/components/chat/shared-message-editor.tsx index a0e2819..dc62ba7 100644 --- a/web/components/chat/shared-message-editor.tsx +++ b/web/components/chat/shared-message-editor.tsx @@ -389,7 +389,7 @@ export function SharedMessageEditor({ ) : null}
-

+

Enter 发送

{isCustomer ? ( @@ -422,7 +422,7 @@ export function SharedMessageEditor({ if (isCustomer) { return ( -
+
{editorContent}
diff --git a/web/components/kefu/chat-shell.tsx b/web/components/kefu/chat-shell.tsx index b40f43d..8cfd7b5 100644 --- a/web/components/kefu/chat-shell.tsx +++ b/web/components/kefu/chat-shell.tsx @@ -255,19 +255,19 @@ export function KefuChatShell() { return (
-
-
+
+
{title}
-
{subtitle}
+
{subtitle}
-
+
{status !== "connected" ? ( ) : null} @@ -338,12 +338,14 @@ export function KefuChatShell() { loadingOlder={messagesLoadingMore} onLoadOlder={loadOlderMessages} /> - +
+ +
{error ? ( diff --git a/web/lib/sdk/cs-ai-agent-sdk.test.mjs b/web/lib/sdk/cs-ai-agent-sdk.test.mjs index 362639b..61195f4 100644 --- a/web/lib/sdk/cs-ai-agent-sdk.test.mjs +++ b/web/lib/sdk/cs-ai-agent-sdk.test.mjs @@ -142,3 +142,25 @@ test("launcher click creates chat iframe with a freshly resolved userToken", asy assert.ok(frame) assert.equal(new URL(frame.src).searchParams.get("userToken"), "click_token") }) + +test("chat iframe layout uses dynamic viewport height for iOS browser chrome", async () => { + const sandbox = await loadSdk({ + channelId: "ch_1", + baseUrl: "https://api.example", + }) + await flushPromises() + const launcher = sandbox.document.body.children.find( + (child) => child.dataset.csAgentWidget === "launcher" + ) + + launcher.click() + await flushPromises() + + const frame = sandbox.document.body.children.find( + (child) => child.dataset.csAgentWidget === "frame" + ) + + assert.ok(frame) + assert.match(frame.style.height, /100dvh/) + assert.match(frame.style.maxWidth, /100vw/) +}) diff --git a/web/lib/sdk/cs-ai-agent-sdk.ts b/web/lib/sdk/cs-ai-agent-sdk.ts index 3e4c001..19d2abf 100644 --- a/web/lib/sdk/cs-ai-agent-sdk.ts +++ b/web/lib/sdk/cs-ai-agent-sdk.ts @@ -222,25 +222,29 @@ type FrameMessage = config.position === "left" ? "left bottom" : "right bottom" if (state.isMaximized) { - frame.style.top = "20px" - frame.style.right = "20px" - frame.style.bottom = "20px" - frame.style.left = "20px" - frame.style.width = "calc(100vw - 40px)" + frame.style.top = "max(12px, env(safe-area-inset-top))" + frame.style.right = "max(12px, env(safe-area-inset-right))" + frame.style.bottom = "max(12px, env(safe-area-inset-bottom))" + frame.style.left = "max(12px, env(safe-area-inset-left))" + frame.style.width = + "calc(100vw - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right)))" frame.style.maxWidth = "none" - frame.style.height = "calc(100vh - 40px)" - frame.style.borderRadius = "24px" + frame.style.height = + "calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)))" + frame.style.borderRadius = "20px" return } frame.style.top = "" - frame.style.bottom = "112px" - frame.style.right = config.position === "left" ? "" : "24px" - frame.style.left = config.position === "left" ? "24px" : "" + frame.style.bottom = "max(88px, calc(72px + env(safe-area-inset-bottom)))" + frame.style.right = config.position === "left" ? "" : "max(12px, env(safe-area-inset-right))" + frame.style.left = config.position === "left" ? "max(12px, env(safe-area-inset-left))" : "" frame.style.width = config.width || "380px" - frame.style.maxWidth = "calc(100vw - 24px)" - frame.style.height = "min(760px, calc(100vh - 136px))" - frame.style.borderRadius = "28px" + frame.style.maxWidth = + "calc(100vw - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right)))" + frame.style.height = + "min(760px, calc(100dvh - max(104px, calc(88px + env(safe-area-inset-bottom))) - max(12px, env(safe-area-inset-top))))" + frame.style.borderRadius = "24px" } function postToFrame(message: FrameMessage) { diff --git a/web/public/sdk/cs-ai-agent-sdk.min.js b/web/public/sdk/cs-ai-agent-sdk.min.js index 1c37b31..83ab39c 100644 --- a/web/public/sdk/cs-ai-agent-sdk.min.js +++ b/web/public/sdk/cs-ai-agent-sdk.min.js @@ -1 +1 @@ -var __rest=this&&this.__rest||function(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);rString(e||"").trim())}catch(e){return Promise.reject(e)}}().then(e=>{if(!n.config)throw new Error("channelId is required");return n.frameUrl=function(e,t){const n=r(e),i=new URL(`${n}/kefu/chat/`);return i.searchParams.set("channelId",e.channelId),i.searchParams.set("baseUrl",e.baseUrl),e.apiBaseUrl&&i.searchParams.set("apiBaseUrl",e.apiBaseUrl),e.externalId&&i.searchParams.set("externalId",e.externalId),e.externalName&&i.searchParams.set("externalName",e.externalName),t&&i.searchParams.set("userToken",t),i}(n.config,e),n.frameConfig=o(n.config,e),n.frameUrl})}function s(){n.frameHideTimer&&(window.clearTimeout(n.frameHideTimer),n.frameHideTimer=null),n.frameDestroyTimer&&(window.clearTimeout(n.frameDestroyTimer),n.frameDestroyTimer=null)}function l(){const e=n.frame,t=n.config;if(e&&t){if(e.style.position="fixed",e.style.border="0",e.style.overflow="hidden",e.style.background="#fff",e.style.zIndex="2147483000",e.style.boxShadow="0 28px 80px rgba(15, 35, 65, 0.28)",e.style.willChange="top,right,bottom,left,width,height,opacity,transform,border-radius",e.style.transition="top 260ms cubic-bezier(0.22, 1, 0.36, 1), right 260ms cubic-bezier(0.22, 1, 0.36, 1), bottom 260ms cubic-bezier(0.22, 1, 0.36, 1), left 260ms cubic-bezier(0.22, 1, 0.36, 1), width 260ms cubic-bezier(0.22, 1, 0.36, 1), height 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1), border-radius 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease",e.style.transformOrigin="left"===t.position?"left bottom":"right bottom",n.isMaximized)return e.style.top="20px",e.style.right="20px",e.style.bottom="20px",e.style.left="20px",e.style.width="calc(100vw - 40px)",e.style.maxWidth="none",e.style.height="calc(100vh - 40px)",void(e.style.borderRadius="24px");e.style.top="",e.style.bottom="112px",e.style.right="left"===t.position?"":"24px",e.style.left="left"===t.position?"24px":"",e.style.width=t.width||"380px",e.style.maxWidth="calc(100vw - 24px)",e.style.height="min(760px, calc(100vh - 136px))",e.style.borderRadius="28px"}}function c(e){var t;if((null===(t=n.frame)||void 0===t?void 0:t.contentWindow)&&n.frameUrl)try{n.frame.contentWindow.postMessage(e,n.frameUrl.origin)}catch(e){console.error("[cs-agent-widget] postMessage failed",e)}}function d(){n.frame&&n.frameLoaded&&n.frameReady&&n.config&&(n.initSent||(n.initSent=!0,c({type:"cs-agent:init",payload:n.frameConfig||o(n.config,"")})),c({type:n.isOpen?"cs-agent:open":"cs-agent:minimize"}),c({type:"cs-agent:maximized",payload:{isMaximized:n.isMaximized}}))}function f(){const e=n.frame;if(e){if(s(),l(),e.style.display="block",n.isOpen)return e.style.visibility="visible",e.style.pointerEvents="auto",n.frameHideTimer=window.setTimeout(()=>{n.frame&&(n.frame.style.opacity="1",n.frame.style.transform="translate3d(0, 0, 0) scale(1)")},16),void d();e.style.pointerEvents="none",e.style.opacity="0",e.style.transform=n.isMaximized?"translate3d(0, 10px, 0) scale(0.985)":"translate3d(0, 16px, 0) scale(0.96)",n.frameHideTimer=window.setTimeout(()=>{n.frame&&!n.isOpen&&(n.frame.style.visibility="hidden")},n.animationDuration),d()}}function m(e){const t=e||window.CSAgentConfig||{channelId:""};n.config=i(t);const o=r(n.config);t.baseUrl||(n.config.baseUrl=o),n.config.channelId?(n.configLoading=!0,function(e){const t=String(e.apiBaseUrl||e.baseUrl||"").replace(/\/$/,"");if(!t||!e.channelId||"function"!=typeof fetch)return Promise.resolve(e);const n=`${t}/api/channel/config?channelId=${encodeURIComponent(e.channelId)}`;return fetch(n,{method:"GET",cache:"no-store",headers:{"X-Channel-Id":e.channelId}}).then(e=>e.json()).then(t=>t&&!1!==t.success?function(e,t){if(!t)return e;const n=Object.assign({},e);return["title","subtitle","themeColor","position","width"].forEach(e=>{const i=t[e];null!=i&&(n[e]=i)}),n}(e,t.data||{}):e).catch(()=>e)}(n.config).then(e=>{var t;n.configLoading=!1,n.config=i(e),(null===(t=n.button)||void 0===t?void 0:t.parentNode)&&(n.button.parentNode.removeChild(n.button),n.button=null),function(){if(n.button)return n.button;const e=n.config;if(!e)return null;const t=document.createElement("button"),i=document.createElementNS("http://www.w3.org/2000/svg","svg"),r=document.createElement("span");t.type="button",t.dataset.csAgentWidget="launcher",t.setAttribute("aria-label",e.title||"\u5728\u7ebf\u5ba2\u670d"),i.setAttribute("viewBox","0 0 24 24"),i.setAttribute("fill","none"),i.setAttribute("stroke","currentColor"),i.setAttribute("stroke-width","2"),i.setAttribute("stroke-linecap","round"),i.setAttribute("stroke-linejoin","round"),i.setAttribute("aria-hidden","true"),i.style.width="24px",i.style.height="24px",i.style.flex="0 0 auto",["M3 11a9 9 0 1 1 18 0","M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z","M21 11h-3a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2z","M21 16v2a4 4 0 0 1-4 4h-5"].forEach(e=>{const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d",e),i.appendChild(t)}),r.textContent="\u5ba2\u670d",r.style.display="block",t.style.position="fixed",t.style.bottom="24px",t.style.right="left"===e.position?"":"24px",t.style.left="left"===e.position?"24px":"",t.style.zIndex="2147483000",t.style.display="inline-flex",t.style.flexDirection="column",t.style.alignItems="center",t.style.justifyContent="center",t.style.gap="4px",t.style.width="64px",t.style.height="64px",t.style.border="0",t.style.borderRadius="999px",t.style.padding="0",t.style.background=e.themeColor||"#0f6cbd",t.style.color="#fff",t.style.font="600 13px/1 sans-serif",t.style.boxShadow="0 18px 40px rgba(15, 35, 65, 0.24)",t.style.cursor="pointer",t.appendChild(i),t.appendChild(r),t.addEventListener("click",()=>{if(n.isOpen)return n.isOpen=!1,void f();u()}),document.body.appendChild(t),n.button=t}()})):console.error("[cs-agent-widget] channelId is required")}function u(){return a().then(()=>{n.frame||(n.frame?n.frame:n.frameUrl&&n.config&&(n.frame=document.createElement("iframe"),n.frame.dataset.csAgentWidget="frame",n.frame.title=n.config.title||"\u5728\u7ebf\u5ba2\u670d",n.frame.src=n.frameUrl.toString(),l(),n.frame.style.display="block",n.frame.style.visibility="hidden",n.frame.style.pointerEvents="none",n.frame.style.opacity="0",n.frame.style.transform="translate3d(0, 18px, 0) scale(0.96)",n.frame.addEventListener("load",()=>{n.frameLoaded=!0,f()}),document.body.appendChild(n.frame),n.frame)),n.frame&&(n.isOpen=!0,f())}).catch(e=>{console.error("[cs-agent-widget] open failed",e)})}t||(window.__CS_AGENT_WIDGET_STATE__=n),window.CSAgentWidget={mount:m,destroy:function(){var e,t;s(),(null===(e=n.frame)||void 0===e?void 0:e.parentNode)&&n.frame.parentNode.removeChild(n.frame),(null===(t=n.button)||void 0===t?void 0:t.parentNode)&&n.button.parentNode.removeChild(n.button),n.button=null,n.frame=null,n.frameLoaded=!1,n.frameReady=!1,n.initSent=!1,n.isOpen=!1,n.isMaximized=!1,n.configLoading=!1,n.frameConfig=null,n.frameUrl=null},open:()=>u(),close:()=>{n.isOpen=!1,f()},getChatUrl:()=>{var e;return n.config||m(window.CSAgentConfig||{channelId:""}),(null===(e=n.config)||void 0===e?void 0:e.channelId)?a().then(e=>e.toString()):Promise.reject(new Error("channelId is required"))}},n.listenerBound||(window.addEventListener("message",function(e){if(!n.frame||e.source!==n.frame.contentWindow)return;const t=e.data||{};return"cs-agent:ready"===t.type?(n.frameReady=!0,void d()):"cs-agent:request-minimize"===t.type?(n.isOpen=!1,void f()):void("cs-agent:request-close"!==t.type?"cs-agent:request-toggle-maximize"===t.type&&(n.isMaximized=!n.isMaximized,f()):n.frame&&(s(),n.frame.style.pointerEvents="none",n.frame.style.opacity="0",n.frame.style.transform="translate3d(0, 18px, 0) scale(0.94)",n.frame.style.visibility="hidden",n.frameDestroyTimer=window.setTimeout(()=>{n.frame&&(n.frame.parentNode&&n.frame.parentNode.removeChild(n.frame),n.frame=null,n.frameLoaded=!1,n.frameReady=!1,n.initSent=!1,n.isOpen=!1,n.isMaximized=!1,s())},n.animationDuration)))}),n.listenerBound=!0),window.CSAgentConfig&&m(window.CSAgentConfig)}(); +var __rest=this&&this.__rest||function(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);rString(e||"").trim())}catch(e){return Promise.reject(e)}}().then(e=>{if(!n.config)throw new Error("channelId is required");return n.frameUrl=function(e,t){const n=r(e),i=new URL(`${n}/kefu/chat/`);return i.searchParams.set("channelId",e.channelId),i.searchParams.set("baseUrl",e.baseUrl),e.apiBaseUrl&&i.searchParams.set("apiBaseUrl",e.apiBaseUrl),e.externalId&&i.searchParams.set("externalId",e.externalId),e.externalName&&i.searchParams.set("externalName",e.externalName),t&&i.searchParams.set("userToken",t),i}(n.config,e),n.frameConfig=a(n.config,e),n.frameUrl})}function s(){n.frameHideTimer&&(window.clearTimeout(n.frameHideTimer),n.frameHideTimer=null),n.frameDestroyTimer&&(window.clearTimeout(n.frameDestroyTimer),n.frameDestroyTimer=null)}function l(){const e=n.frame,t=n.config;if(e&&t){if(e.style.position="fixed",e.style.border="0",e.style.overflow="hidden",e.style.background="#fff",e.style.zIndex="2147483000",e.style.boxShadow="0 28px 80px rgba(15, 35, 65, 0.28)",e.style.willChange="top,right,bottom,left,width,height,opacity,transform,border-radius",e.style.transition="top 260ms cubic-bezier(0.22, 1, 0.36, 1), right 260ms cubic-bezier(0.22, 1, 0.36, 1), bottom 260ms cubic-bezier(0.22, 1, 0.36, 1), left 260ms cubic-bezier(0.22, 1, 0.36, 1), width 260ms cubic-bezier(0.22, 1, 0.36, 1), height 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1), border-radius 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease",e.style.transformOrigin="left"===t.position?"left bottom":"right bottom",n.isMaximized)return e.style.top="max(12px, env(safe-area-inset-top))",e.style.right="max(12px, env(safe-area-inset-right))",e.style.bottom="max(12px, env(safe-area-inset-bottom))",e.style.left="max(12px, env(safe-area-inset-left))",e.style.width="calc(100vw - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right)))",e.style.maxWidth="none",e.style.height="calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)))",void(e.style.borderRadius="20px");e.style.top="",e.style.bottom="max(88px, calc(72px + env(safe-area-inset-bottom)))",e.style.right="left"===t.position?"":"max(12px, env(safe-area-inset-right))",e.style.left="left"===t.position?"max(12px, env(safe-area-inset-left))":"",e.style.width=t.width||"380px",e.style.maxWidth="calc(100vw - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right)))",e.style.height="min(760px, calc(100dvh - max(104px, calc(88px + env(safe-area-inset-bottom))) - max(12px, env(safe-area-inset-top))))",e.style.borderRadius="24px"}}function c(e){var t;if((null===(t=n.frame)||void 0===t?void 0:t.contentWindow)&&n.frameUrl)try{n.frame.contentWindow.postMessage(e,n.frameUrl.origin)}catch(e){console.error("[cs-agent-widget] postMessage failed",e)}}function d(){n.frame&&n.frameLoaded&&n.frameReady&&n.config&&(n.initSent||(n.initSent=!0,c({type:"cs-agent:init",payload:n.frameConfig||a(n.config,"")})),c({type:n.isOpen?"cs-agent:open":"cs-agent:minimize"}),c({type:"cs-agent:maximized",payload:{isMaximized:n.isMaximized}}))}function f(){const e=n.frame;if(e){if(s(),l(),e.style.display="block",n.isOpen)return e.style.visibility="visible",e.style.pointerEvents="auto",n.frameHideTimer=window.setTimeout(()=>{n.frame&&(n.frame.style.opacity="1",n.frame.style.transform="translate3d(0, 0, 0) scale(1)")},16),void d();e.style.pointerEvents="none",e.style.opacity="0",e.style.transform=n.isMaximized?"translate3d(0, 10px, 0) scale(0.985)":"translate3d(0, 16px, 0) scale(0.96)",n.frameHideTimer=window.setTimeout(()=>{n.frame&&!n.isOpen&&(n.frame.style.visibility="hidden")},n.animationDuration),d()}}function m(e){const t=e||window.CSAgentConfig||{channelId:""};n.config=i(t);const a=r(n.config);t.baseUrl||(n.config.baseUrl=a),n.config.channelId?(n.configLoading=!0,function(e){const t=String(e.apiBaseUrl||e.baseUrl||"").replace(/\/$/,"");if(!t||!e.channelId||"function"!=typeof fetch)return Promise.resolve(e);const n=`${t}/api/channel/config?channelId=${encodeURIComponent(e.channelId)}`;return fetch(n,{method:"GET",cache:"no-store",headers:{"X-Channel-Id":e.channelId}}).then(e=>e.json()).then(t=>t&&!1!==t.success?function(e,t){if(!t)return e;const n=Object.assign({},e);return["title","subtitle","themeColor","position","width"].forEach(e=>{const i=t[e];null!=i&&(n[e]=i)}),n}(e,t.data||{}):e).catch(()=>e)}(n.config).then(e=>{var t;n.configLoading=!1,n.config=i(e),(null===(t=n.button)||void 0===t?void 0:t.parentNode)&&(n.button.parentNode.removeChild(n.button),n.button=null),function(){if(n.button)return n.button;const e=n.config;if(!e)return null;const t=document.createElement("button"),i=document.createElementNS("http://www.w3.org/2000/svg","svg"),r=document.createElement("span");t.type="button",t.dataset.csAgentWidget="launcher",t.setAttribute("aria-label",e.title||"\u5728\u7ebf\u5ba2\u670d"),i.setAttribute("viewBox","0 0 24 24"),i.setAttribute("fill","none"),i.setAttribute("stroke","currentColor"),i.setAttribute("stroke-width","2"),i.setAttribute("stroke-linecap","round"),i.setAttribute("stroke-linejoin","round"),i.setAttribute("aria-hidden","true"),i.style.width="24px",i.style.height="24px",i.style.flex="0 0 auto",["M3 11a9 9 0 1 1 18 0","M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z","M21 11h-3a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2z","M21 16v2a4 4 0 0 1-4 4h-5"].forEach(e=>{const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d",e),i.appendChild(t)}),r.textContent="\u5ba2\u670d",r.style.display="block",t.style.position="fixed",t.style.bottom="24px",t.style.right="left"===e.position?"":"24px",t.style.left="left"===e.position?"24px":"",t.style.zIndex="2147483000",t.style.display="inline-flex",t.style.flexDirection="column",t.style.alignItems="center",t.style.justifyContent="center",t.style.gap="4px",t.style.width="64px",t.style.height="64px",t.style.border="0",t.style.borderRadius="999px",t.style.padding="0",t.style.background=e.themeColor||"#0f6cbd",t.style.color="#fff",t.style.font="600 13px/1 sans-serif",t.style.boxShadow="0 18px 40px rgba(15, 35, 65, 0.24)",t.style.cursor="pointer",t.appendChild(i),t.appendChild(r),t.addEventListener("click",()=>{if(n.isOpen)return n.isOpen=!1,void f();u()}),document.body.appendChild(t),n.button=t}()})):console.error("[cs-agent-widget] channelId is required")}function u(){return o().then(()=>{n.frame||(n.frame?n.frame:n.frameUrl&&n.config&&(n.frame=document.createElement("iframe"),n.frame.dataset.csAgentWidget="frame",n.frame.title=n.config.title||"\u5728\u7ebf\u5ba2\u670d",n.frame.src=n.frameUrl.toString(),l(),n.frame.style.display="block",n.frame.style.visibility="hidden",n.frame.style.pointerEvents="none",n.frame.style.opacity="0",n.frame.style.transform="translate3d(0, 18px, 0) scale(0.96)",n.frame.addEventListener("load",()=>{n.frameLoaded=!0,f()}),document.body.appendChild(n.frame),n.frame)),n.frame&&(n.isOpen=!0,f())}).catch(e=>{console.error("[cs-agent-widget] open failed",e)})}t||(window.__CS_AGENT_WIDGET_STATE__=n),window.CSAgentWidget={mount:m,destroy:function(){var e,t;s(),(null===(e=n.frame)||void 0===e?void 0:e.parentNode)&&n.frame.parentNode.removeChild(n.frame),(null===(t=n.button)||void 0===t?void 0:t.parentNode)&&n.button.parentNode.removeChild(n.button),n.button=null,n.frame=null,n.frameLoaded=!1,n.frameReady=!1,n.initSent=!1,n.isOpen=!1,n.isMaximized=!1,n.configLoading=!1,n.frameConfig=null,n.frameUrl=null},open:()=>u(),close:()=>{n.isOpen=!1,f()},getChatUrl:()=>{var e;return n.config||m(window.CSAgentConfig||{channelId:""}),(null===(e=n.config)||void 0===e?void 0:e.channelId)?o().then(e=>e.toString()):Promise.reject(new Error("channelId is required"))}},n.listenerBound||(window.addEventListener("message",function(e){if(!n.frame||e.source!==n.frame.contentWindow)return;const t=e.data||{};return"cs-agent:ready"===t.type?(n.frameReady=!0,void d()):"cs-agent:request-minimize"===t.type?(n.isOpen=!1,void f()):void("cs-agent:request-close"!==t.type?"cs-agent:request-toggle-maximize"===t.type&&(n.isMaximized=!n.isMaximized,f()):n.frame&&(s(),n.frame.style.pointerEvents="none",n.frame.style.opacity="0",n.frame.style.transform="translate3d(0, 18px, 0) scale(0.94)",n.frame.style.visibility="hidden",n.frameDestroyTimer=window.setTimeout(()=>{n.frame&&(n.frame.parentNode&&n.frame.parentNode.removeChild(n.frame),n.frame=null,n.frameLoaded=!1,n.frameReady=!1,n.initSent=!1,n.isOpen=!1,n.isMaximized=!1,s())},n.animationDuration)))}),n.listenerBound=!0),window.CSAgentConfig&&m(window.CSAgentConfig)}();