feat: #20 1. 添加关闭chat窗口功能

Author: jinmingpang

index.html

@@ -33,6 +33,5 @@
     <!--TODO: 将 react 从 chatSdk 剥离出来 使用 pure.js （） -->
     <script src="https://g.alicdn.com/code/npm/@ali/chatui-sdk/6.6.2/ChatSDK.js"></script>
     <script src="https://g.alicdn.com/chatui/icons/2.0.2/index.js"></script>
-    <script type="module" src="/src/aiChat/index.tsx"></script>
   </body>
 </html>

src/AiChat/components/ChatWindow/Header/Close.svg

@@ -1,26 +1,39 @@
 .wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 40px;
+  padding: 0 8px;
+  border-bottom: 1px solid #e3e3e3;
+
+  button {
+    border: none;
+    padding: 4px;
+    border-radius: 4px;
+    font-size: 14px;
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
-    height: 40px;
-    padding: 0 8px;
-    border-bottom: 1px solid #e3e3e3;
 
-    button {
-        border: none;
-        padding: 4px;
-        border-radius: 4px;
-        font-size: 14px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: nesw-resize;
-        &:hover {
-            background: #e0e0e0;
-        }
-    }
-    svg {
-        width: 18px;
-        height: 18px;
+    &:hover {
+      background: #e0e0e0;
     }
-}
+  }
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .right {
+    display: flex;
+    gap: 0 6px;
+  }
+
+  .close {
+    cursor: pointer;
+  }
+
+  .resize {
+    cursor: nesw-resize;
+  }
+}

src/AiChat/components/ChatWindow/Header/index.module.less

@@ -1,3 +1,5 @@
+// TODO:  整理所有 ICON 封装成组件
+import CloseIcon from './Close.svg?raw'
 import SizeIcon from './Size.svg?raw'
 
 import styles from './index.module.less'
@@ -56,15 +58,30 @@ export const Header = () => {
     }
   }, [])
 
+  const handleClose = () => {
+    window.postMessage({
+      action: 'closeChatWindow',
+    })
+  }
+
   return (
     <div className={styles.wrapper}>
       <i></i>
       <span>Amis Bot</span>
-      <button
-        title='调整大小'
-        ref={(ref) => (storeRef.current.resizeTrigger = ref)}
-        dangerouslySetInnerHTML={{ __html: SizeIcon }}
-      />
+      <div className={styles.right}>
+        <button
+          title='调整大小'
+          className={styles.resize}
+          ref={(ref) => (storeRef.current.resizeTrigger = ref)}
+          dangerouslySetInnerHTML={{ __html: SizeIcon }}
+        />
+        <button
+          title='关闭'
+          className={styles.close}
+          onClick={handleClose}
+          dangerouslySetInnerHTML={{ __html: CloseIcon }}
+        />
+      </div>
     </div>
   )
 }

src/AiChat/components/ChatWindow/Header/index.tsx

@@ -20,6 +20,10 @@ export const getChatBot = () => {
   return chatBot
 }
 
+export const isChatSdkLoad = () => {
+  return !!ChatSDK
+}
+
 const setInputDisabled = (toggle: boolean) => {
   chatBot.bot.setConfig({
     inputOptions: {

src/AiChat/components/ChatWindow/chatContrl.ts

@@ -7,18 +7,19 @@ import {
   clearCurrConversion,
   abortCurrReplying,
   askToHumanPrompt,
+  isChatSdkLoad,
 } from './chatContrl'
 import { Header } from './Header'
 import defBot from '../../assets/def-bot.jpeg'
 import defUser from '../../assets/def-user.png'
 
 import styles from './index.module.less'
 
-export { getChatBot }
+export { getChatBot, isChatSdkLoad }
 
 export const initChatBot = (opts: { root: any }) => {
   // 未加载成功 SDK 不处理
-  if (!ChatSDK) {
+  if (!isChatSdkLoad()) {
     return
   }
 

src/AiChat/components/ChatWindow/index.tsx

@@ -6,7 +6,7 @@
 import { useEffect, useRef, useState } from 'react'
 import ReactDOM from 'react-dom'
 
-import { initChatBot, getChatBot } from './components/ChatWindow'
+import { initChatBot, getChatBot, isChatSdkLoad } from './components/ChatWindow'
 import { FloatAiIcon } from './components/FloatAiIcon'
 
 const AppEntry = () => {
@@ -18,10 +18,48 @@ const AppEntry = () => {
     setShowWindow(!showWindow)
   }
 
+  const handleDefOpenChat = () => {
+    let timer: any = 0
+    let reTryCount = 0
+    const doDefOpenChat = () => {
+      if (reTryCount > 3) {
+        clearTimeout(timer)
+        return
+      }
+
+      if (isChatSdkLoad() && !getChatBot()) {
+        clearTimeout(timer)
+        reTryCount = 0
+        setShowWindow(true)
+        return
+      }
+
+      reTryCount += 1
+      clearTimeout(timer)
+      timer = setTimeout(doDefOpenChat, 1500)
+    }
+
+    doDefOpenChat()
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }
+
   useEffect(() => {
-    setTimeout(() => {
-      setShowWindow(true)
-    }, 2000)
+    // TODO: 梳理项目 postMsg 通信，封装公共方法
+    window.addEventListener('message', ({ data }) => {
+      const { action } = data
+      if (action === 'closeChatWindow') {
+        setShowWindow(false)
+      }
+    })
+
+    const unMount = handleDefOpenChat()
+
+    return () => {
+      unMount()
+    }
   }, [])
 
   useEffect(() => {
@@ -42,3 +80,5 @@ const AppEntry = () => {
 }
 
 ReactDOM.createRoot(document.getElementById('aiChatRoot')!).render(<AppEntry />)
+
+

src/AiChat/index.tsx

@@ -2,6 +2,7 @@
 import ReactDOM from 'react-dom/client'
 
 import App from './App'
+import './AiChat'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(