From 9a82a3ea520e5948d384a69b2b6308d09d1d9b48 Mon Sep 17 00:00:00 2001 From: mlogclub Date: Mon, 27 Apr 2026 11:20:36 +0800 Subject: [PATCH] update button layout and add SVG icon for customer service launcher --- web/lib/sdk/cs-ai-agent-sdk.js | 43 +++++++++++++++++++++++---- web/public/sdk/cs-ai-agent-sdk.min.js | 2 +- 2 files changed, 39 insertions(+), 6 deletions(-) diff --git a/web/lib/sdk/cs-ai-agent-sdk.js b/web/lib/sdk/cs-ai-agent-sdk.js index 87263de..d49dba4 100644 --- a/web/lib/sdk/cs-ai-agent-sdk.js +++ b/web/lib/sdk/cs-ai-agent-sdk.js @@ -165,12 +165,12 @@ } frame.style.top = ""; - frame.style.bottom = "88px"; + frame.style.bottom = "112px"; frame.style.right = config.position === "left" ? "" : "24px"; frame.style.left = config.position === "left" ? "24px" : ""; frame.style.width = config.width || "380px"; frame.style.maxWidth = "calc(100vw - 24px)"; - frame.style.height = "min(760px, calc(100vh - 112px))"; + frame.style.height = "min(760px, calc(100vh - 136px))"; frame.style.borderRadius = "28px"; } @@ -331,23 +331,56 @@ var config = state.config; var button = document.createElement("button"); + var icon = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + var iconPaths = [ + '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', + ]; + var text = document.createElement("span"); button.type = "button"; button.dataset.csAgentWidget = "launcher"; button.setAttribute("aria-label", config.title || "在线客服"); - button.textContent = config.title || "在线客服"; + icon.setAttribute("viewBox", "0 0 24 24"); + icon.setAttribute("fill", "none"); + icon.setAttribute("stroke", "currentColor"); + icon.setAttribute("stroke-width", "2"); + icon.setAttribute("stroke-linecap", "round"); + icon.setAttribute("stroke-linejoin", "round"); + icon.setAttribute("aria-hidden", "true"); + icon.style.width = "24px"; + icon.style.height = "24px"; + icon.style.flex = "0 0 auto"; + iconPaths.forEach(function (pathData) { + var path = document.createElementNS("http://www.w3.org/2000/svg", "path"); + path.setAttribute("d", pathData); + icon.appendChild(path); + }); + text.textContent = "客服"; + text.style.display = "block"; button.style.position = "fixed"; button.style.bottom = "24px"; button.style.right = config.position === "left" ? "" : "24px"; button.style.left = config.position === "left" ? "24px" : ""; button.style.zIndex = "2147483000"; + button.style.display = "inline-flex"; + button.style.flexDirection = "column"; + button.style.alignItems = "center"; + button.style.justifyContent = "center"; + button.style.gap = "4px"; + button.style.width = "64px"; + button.style.height = "64px"; button.style.border = "0"; button.style.borderRadius = "999px"; - button.style.padding = "14px 18px"; + button.style.padding = "0"; button.style.background = config.themeColor || "#0f6cbd"; button.style.color = "#fff"; - button.style.font = "600 14px/1 sans-serif"; + button.style.font = "600 13px/1 sans-serif"; button.style.boxShadow = "0 18px 40px rgba(15, 35, 65, 0.24)"; button.style.cursor = "pointer"; + button.appendChild(icon); + button.appendChild(text); button.addEventListener("click", function () { if (!state.frame) { diff --git a/web/public/sdk/cs-ai-agent-sdk.min.js b/web/public/sdk/cs-ai-agent-sdk.min.js index de33153..4385224 100644 --- a/web/public/sdk/cs-ai-agent-sdk.min.js +++ b/web/public/sdk/cs-ai-agent-sdk.min.js @@ -1 +1 @@ -!function(){var e={position:"right",themeColor:"#0f6cbd",width:"380px",externalSource:"web_chat"},t=window.__CS_AGENT_WIDGET_STATE__;function n(t){var n,i={};for(n in e)Object.prototype.hasOwnProperty.call(e,n)&&(i[n]=e[n]);for(n in t=t||{})Object.prototype.hasOwnProperty.call(t,n)&&(i[n]=t[n]);return i.baseUrl=String(i.baseUrl||window.location.origin).replace(/\/$/,""),i.apiBaseUrl?i.apiBaseUrl=String(i.apiBaseUrl).replace(/\/$/,""):delete i.apiBaseUrl,i.channelId=String(i.channelId||""),i.externalSource=String(i.externalSource||"web_chat"),i}function i(e){var t=document.currentScript;return t&&t.src?t.src.replace(/\/sdk\/cs-ai-agent-sdk\.min\.js(?:\?.*)?$/,""):String(e.widgetBaseUrl||e.baseUrl||window.location.origin).replace(/\/$/,"")}function r(){t.frameHideTimer&&(window.clearTimeout(t.frameHideTimer),t.frameHideTimer=null),t.frameDestroyTimer&&(window.clearTimeout(t.frameDestroyTimer),t.frameDestroyTimer=null)}function a(){var e=t.frame,n=t.config;if(e&&n){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"===n.position?"left bottom":"right bottom",t.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="88px",e.style.right="left"===n.position?"":"24px",e.style.left="left"===n.position?"24px":"",e.style.width=n.width||"380px",e.style.maxWidth="calc(100vw - 24px)",e.style.height="min(760px, calc(100vh - 112px))",e.style.borderRadius="28px"}}function o(e){if(t.frame&&t.frame.contentWindow&&t.frameUrl)try{t.frame.contentWindow.postMessage(e,t.frameUrl.origin)}catch(e){console.error("[cs-agent-widget] postMessage failed",e)}}function s(){t.frame&&t.frameLoaded&&t.frameReady&&(t.initSent||(t.initSent=!0,o({type:"cs-agent:init",payload:t.config})),o({type:t.isOpen?"cs-agent:open":"cs-agent:minimize"}),o({type:"cs-agent:maximized",payload:{isMaximized:t.isMaximized}}))}function l(){var e=t.frame;if(e){if(r(),a(),e.style.display="block",t.isOpen)return e.style.visibility="visible",e.style.pointerEvents="auto",t.frameHideTimer=window.setTimeout(function(){t.frame&&(t.frame.style.opacity="1",t.frame.style.transform="translate3d(0, 0, 0) scale(1)")},16),void s();e.style.pointerEvents="none",e.style.opacity="0",e.style.transform=t.isMaximized?"translate3d(0, 10px, 0) scale(0.985)":"translate3d(0, 16px, 0) scale(0.96)",t.frameHideTimer=window.setTimeout(function(){t.frame&&!t.isOpen&&(t.frame.style.visibility="hidden")},t.animationDuration),s()}}function c(){return t.frame?t.frame:t.frameUrl&&t.config?(t.frame=document.createElement("iframe"),t.frame.dataset.csAgentWidget="frame",t.frame.title=t.config.title||"\u5728\u7ebf\u5ba2\u670d",t.frame.src=t.frameUrl.toString(),a(),t.frame.style.display="block",t.frame.style.visibility="hidden",t.frame.style.pointerEvents="none",t.frame.style.opacity="0",t.frame.style.transform="translate3d(0, 18px, 0) scale(0.96)",t.frame.addEventListener("load",function(){t.frameLoaded=!0,l()}),document.body.appendChild(t.frame),t.frame):null}function f(e){var r=e||window.CSAgentConfig||{};t.config=n(r);var a=i(t.config);r.baseUrl||(t.config.baseUrl=a),t.config.channelId?(t.configLoading=!0,function(e){var t=String(e.apiBaseUrl||e.baseUrl||"").replace(/\/$/,"");if(!t||!e.channelId||"function"!=typeof fetch)return Promise.resolve(e);var n=t+"/api/channel/config?channelId="+encodeURIComponent(e.channelId);return fetch(n,{method:"GET",cache:"no-store",headers:{"X-Channel-Id":e.channelId}}).then(function(e){return e.json()}).then(function(t){return t&&!1!==t.success?function(e,t){if(!t)return e;var n,i={};for(n in e)Object.prototype.hasOwnProperty.call(e,n)&&(i[n]=e[n]);for(var r=["title","subtitle","themeColor","position","width"],a=0;a