Skip to content

Commit efe1e90

Browse files
committed
feat: #20 1. 添加关闭chat窗口功能
1 parent 05b4fa1 commit efe1e90

File tree

8 files changed

+109
-33
lines changed

8 files changed

+109
-33
lines changed

index.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,5 @@
3333
<!--TODO: 将 react 从 chatSdk 剥离出来 使用 pure.js () -->
3434
<script src="https://g.alicdn.com/code/npm/@ali/chatui-sdk/6.6.2/ChatSDK.js"></script>
3535
<script src="https://g.alicdn.com/chatui/icons/2.0.2/index.js"></script>
36-
<script type="module" src="/src/aiChat/index.tsx"></script>
3736
</body>
3837
</html>
Lines changed: 1 addition & 0 deletions
Loading
Lines changed: 34 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,39 @@
11
.wrapper {
2+
display: flex;
3+
justify-content: space-between;
4+
align-items: center;
5+
height: 40px;
6+
padding: 0 8px;
7+
border-bottom: 1px solid #e3e3e3;
8+
9+
button {
10+
border: none;
11+
padding: 4px;
12+
border-radius: 4px;
13+
font-size: 14px;
214
display: flex;
3-
justify-content: space-between;
15+
justify-content: center;
416
align-items: center;
5-
height: 40px;
6-
padding: 0 8px;
7-
border-bottom: 1px solid #e3e3e3;
817

9-
button {
10-
border: none;
11-
padding: 4px;
12-
border-radius: 4px;
13-
font-size: 14px;
14-
display: flex;
15-
justify-content: center;
16-
align-items: center;
17-
cursor: nesw-resize;
18-
&:hover {
19-
background: #e0e0e0;
20-
}
21-
}
22-
svg {
23-
width: 18px;
24-
height: 18px;
18+
&:hover {
19+
background: #e0e0e0;
2520
}
26-
}
21+
}
22+
svg {
23+
width: 18px;
24+
height: 18px;
25+
}
26+
27+
.right {
28+
display: flex;
29+
gap: 0 6px;
30+
}
31+
32+
.close {
33+
cursor: pointer;
34+
}
35+
36+
.resize {
37+
cursor: nesw-resize;
38+
}
39+
}

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

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
// TODO: 整理所有 ICON 封装成组件
2+
import CloseIcon from './Close.svg?raw'
13
import SizeIcon from './Size.svg?raw'
24

35
import styles from './index.module.less'
@@ -56,15 +58,30 @@ export const Header = () => {
5658
}
5759
}, [])
5860

61+
const handleClose = () => {
62+
window.postMessage({
63+
action: 'closeChatWindow',
64+
})
65+
}
66+
5967
return (
6068
<div className={styles.wrapper}>
6169
<i></i>
6270
<span>Amis Bot</span>
63-
<button
64-
title='调整大小'
65-
ref={(ref) => (storeRef.current.resizeTrigger = ref)}
66-
dangerouslySetInnerHTML={{ __html: SizeIcon }}
67-
/>
71+
<div className={styles.right}>
72+
<button
73+
title='调整大小'
74+
className={styles.resize}
75+
ref={(ref) => (storeRef.current.resizeTrigger = ref)}
76+
dangerouslySetInnerHTML={{ __html: SizeIcon }}
77+
/>
78+
<button
79+
title='关闭'
80+
className={styles.close}
81+
onClick={handleClose}
82+
dangerouslySetInnerHTML={{ __html: CloseIcon }}
83+
/>
84+
</div>
6885
</div>
6986
)
7087
}

src/AiChat/components/ChatWindow/chatContrl.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ export const getChatBot = () => {
2020
return chatBot
2121
}
2222

23+
export const isChatSdkLoad = () => {
24+
return !!ChatSDK
25+
}
26+
2327
const setInputDisabled = (toggle: boolean) => {
2428
chatBot.bot.setConfig({
2529
inputOptions: {

src/AiChat/components/ChatWindow/index.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,19 @@ import {
77
clearCurrConversion,
88
abortCurrReplying,
99
askToHumanPrompt,
10+
isChatSdkLoad,
1011
} from './chatContrl'
1112
import { Header } from './Header'
1213
import defBot from '../../assets/def-bot.jpeg'
1314
import defUser from '../../assets/def-user.png'
1415

1516
import styles from './index.module.less'
1617

17-
export { getChatBot }
18+
export { getChatBot, isChatSdkLoad }
1819

1920
export const initChatBot = (opts: { root: any }) => {
2021
// 未加载成功 SDK 不处理
21-
if (!ChatSDK) {
22+
if (!isChatSdkLoad()) {
2223
return
2324
}
2425

src/AiChat/index.tsx

Lines changed: 44 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
import { useEffect, useRef, useState } from 'react'
77
import ReactDOM from 'react-dom'
88

9-
import { initChatBot, getChatBot } from './components/ChatWindow'
9+
import { initChatBot, getChatBot, isChatSdkLoad } from './components/ChatWindow'
1010
import { FloatAiIcon } from './components/FloatAiIcon'
1111

1212
const AppEntry = () => {
@@ -18,10 +18,48 @@ const AppEntry = () => {
1818
setShowWindow(!showWindow)
1919
}
2020

21+
const handleDefOpenChat = () => {
22+
let timer: any = 0
23+
let reTryCount = 0
24+
const doDefOpenChat = () => {
25+
if (reTryCount > 3) {
26+
clearTimeout(timer)
27+
return
28+
}
29+
30+
if (isChatSdkLoad() && !getChatBot()) {
31+
clearTimeout(timer)
32+
reTryCount = 0
33+
setShowWindow(true)
34+
return
35+
}
36+
37+
reTryCount += 1
38+
clearTimeout(timer)
39+
timer = setTimeout(doDefOpenChat, 1500)
40+
}
41+
42+
doDefOpenChat()
43+
44+
return () => {
45+
clearTimeout(timer)
46+
}
47+
}
48+
2149
useEffect(() => {
22-
setTimeout(() => {
23-
setShowWindow(true)
24-
}, 2000)
50+
// TODO: 梳理项目 postMsg 通信,封装公共方法
51+
window.addEventListener('message', ({ data }) => {
52+
const { action } = data
53+
if (action === 'closeChatWindow') {
54+
setShowWindow(false)
55+
}
56+
})
57+
58+
const unMount = handleDefOpenChat()
59+
60+
return () => {
61+
unMount()
62+
}
2563
}, [])
2664

2765
useEffect(() => {
@@ -42,3 +80,5 @@ const AppEntry = () => {
4280
}
4381

4482
ReactDOM.createRoot(document.getElementById('aiChatRoot')!).render(<AppEntry />)
83+
84+

src/main.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import ReactDOM from 'react-dom/client'
33

44
import App from './App'
5+
import './AiChat'
56
import './index.css'
67

78
ReactDOM.createRoot(document.getElementById('root')!).render(

0 commit comments

Comments
 (0)