File tree Expand file tree Collapse file tree 8 files changed +109
-33
lines changed Expand file tree Collapse file tree 8 files changed +109
-33
lines changed Original file line number Diff line number Diff line change 33
33
<!--TODO: 将 react 从 chatSdk 剥离出来 使用 pure.js () -->
34
34
< script src ="https://g.alicdn.com/code/npm/@ali/chatui-sdk/6.6.2/ChatSDK.js "> </ script >
35
35
< script src ="https://g.alicdn.com/chatui/icons/2.0.2/index.js "> </ script >
36
- < script type ="module " src ="/src/aiChat/index.tsx "> </ script >
37
36
</ body >
38
37
</ html >
Original file line number Diff line number Diff line change 1
1
.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 ;
2
14
display : flex ;
3
- justify-content : space-between ;
15
+ justify-content : center ;
4
16
align-items : center ;
5
- height : 40px ;
6
- padding : 0 8px ;
7
- border-bottom : 1px solid #e3e3e3 ;
8
17
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 ;
25
20
}
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
+ }
Original file line number Diff line number Diff line change
1
+ // TODO: 整理所有 ICON 封装成组件
2
+ import CloseIcon from './Close.svg?raw'
1
3
import SizeIcon from './Size.svg?raw'
2
4
3
5
import styles from './index.module.less'
@@ -56,15 +58,30 @@ export const Header = () => {
56
58
}
57
59
} , [ ] )
58
60
61
+ const handleClose = ( ) => {
62
+ window . postMessage ( {
63
+ action : 'closeChatWindow' ,
64
+ } )
65
+ }
66
+
59
67
return (
60
68
< div className = { styles . wrapper } >
61
69
< i > </ i >
62
70
< 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 >
68
85
</ div >
69
86
)
70
87
}
Original file line number Diff line number Diff line change @@ -20,6 +20,10 @@ export const getChatBot = () => {
20
20
return chatBot
21
21
}
22
22
23
+ export const isChatSdkLoad = ( ) => {
24
+ return ! ! ChatSDK
25
+ }
26
+
23
27
const setInputDisabled = ( toggle : boolean ) => {
24
28
chatBot . bot . setConfig ( {
25
29
inputOptions : {
Original file line number Diff line number Diff line change @@ -7,18 +7,19 @@ import {
7
7
clearCurrConversion ,
8
8
abortCurrReplying ,
9
9
askToHumanPrompt ,
10
+ isChatSdkLoad ,
10
11
} from './chatContrl'
11
12
import { Header } from './Header'
12
13
import defBot from '../../assets/def-bot.jpeg'
13
14
import defUser from '../../assets/def-user.png'
14
15
15
16
import styles from './index.module.less'
16
17
17
- export { getChatBot }
18
+ export { getChatBot , isChatSdkLoad }
18
19
19
20
export const initChatBot = ( opts : { root : any } ) => {
20
21
// 未加载成功 SDK 不处理
21
- if ( ! ChatSDK ) {
22
+ if ( ! isChatSdkLoad ( ) ) {
22
23
return
23
24
}
24
25
Original file line number Diff line number Diff line change 6
6
import { useEffect , useRef , useState } from 'react'
7
7
import ReactDOM from 'react-dom'
8
8
9
- import { initChatBot , getChatBot } from './components/ChatWindow'
9
+ import { initChatBot , getChatBot , isChatSdkLoad } from './components/ChatWindow'
10
10
import { FloatAiIcon } from './components/FloatAiIcon'
11
11
12
12
const AppEntry = ( ) => {
@@ -18,10 +18,48 @@ const AppEntry = () => {
18
18
setShowWindow ( ! showWindow )
19
19
}
20
20
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
+
21
49
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
+ }
25
63
} , [ ] )
26
64
27
65
useEffect ( ( ) => {
@@ -42,3 +80,5 @@ const AppEntry = () => {
42
80
}
43
81
44
82
ReactDOM . createRoot ( document . getElementById ( 'aiChatRoot' ) ! ) . render ( < AppEntry /> )
83
+
84
+
Original file line number Diff line number Diff line change 2
2
import ReactDOM from 'react-dom/client'
3
3
4
4
import App from './App'
5
+ import './AiChat'
5
6
import './index.css'
6
7
7
8
ReactDOM . createRoot ( document . getElementById ( 'root' ) ! ) . render (
You can’t perform that action at this time.
0 commit comments