From 5cb75c3cbafcbbe2c00aadb57738e94a01186e2f Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Tue, 9 Nov 2021 20:05:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(widget):=20=E5=A2=9E=E5=8A=A0=E4=BA=86clos?=
 =?UTF-8?q?ebtn?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 widget/src/index.ts | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/widget/src/index.ts b/widget/src/index.ts
index bbca1d59..85468ad0 100644
--- a/widget/src/index.ts
+++ b/widget/src/index.ts
@@ -1,4 +1,4 @@
-interface TailchatWidgetOptions {
+export interface TailchatWidgetOptions {
   /**
    * @default https://nightly.paw.msgbyte.com/
    */
@@ -42,6 +42,7 @@ const defaultFrameStyle: Partial<CSSStyleDeclaration> = {
 
 const iconSize = 32;
 const iconSvg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="${iconSize}" height="${iconSize}" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M12 3C6.5 3 2 6.58 2 11a7.218 7.218 0 0 0 2.75 5.5c0 .6-.42 2.17-2.75 4.5c2.37-.11 4.64-1 6.47-2.5c1.14.33 2.34.5 3.53.5c5.5 0 10-3.58 10-8s-4.5-8-10-8m0 14c-4.42 0-8-2.69-8-6s3.58-6 8-6s8 2.69 8 6s-3.58 6-8 6m5-5v-2h-2v2h2m-4 0v-2h-2v2h2m-4 0v-2H7v2h2z" fill="currentColor"/></svg>`;
+const closeIconSvg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="${iconSize}" height="${iconSize}" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" style="display: block;"><path d="M11 4h2v12l5.5-5.5l1.42 1.42L12 19.84l-7.92-7.92L5.5 10.5L11 16V4z" fill="currentColor"/></svg>`;
 
 /**
  * 创建聊天小部件
@@ -86,7 +87,28 @@ export function createTailchatWidget(_options: TailchatWidgetOptions) {
         ..._options.frameStyle,
       });
 
+      // closeBtn
+      const closeBtnEl = document.createElement('div');
+      closeBtnEl.innerHTML = closeIconSvg;
+      applyStyle(closeBtnEl, {
+        position: 'absolute',
+        right: '0',
+        top: `-${iconSize}px`,
+        backgroundColor: 'white',
+        cursor: 'pointer',
+        boxShadow: '0px -1px 4px rgba(0, 0, 0, 0.2)',
+        borderRadius: '50% 50% 0 0',
+      });
+      closeBtnEl.addEventListener('click', () => {
+        // 关闭操作
+        iconContainer.style.display = 'flex';
+        if (frameContainer) {
+          frameContainer.style.display = 'none';
+        }
+      });
+
       _frameContainer.appendChild(frameEl);
+      _frameContainer.appendChild(closeBtnEl);
       container.appendChild(_frameContainer);
     } else {
       // 已创建