1111// You should have received a copy of the GNU Affero General Public License
1212// along with this program. If not, see <http://www.gnu.org/licenses/>.
1313
14- import React , { useState } from 'react' ;
14+ import React , { useState , useRef } from 'react' ;
1515import { Modal , Tabs } from 'antd' ;
1616import i18n from 'i18n' ;
1717import { ErdaIcon as CustomIcon } from 'common' ;
1818import routeInfoStore from 'core/stores/route' ;
19+ import { useEffectOnce } from 'react-use' ;
1920import Chat from './chat' ;
2021import FunctionalTestCases from './functional-test-cases' ;
2122import KnowledgeBase from './knowledge-base' ;
@@ -25,12 +26,42 @@ import './index.scss';
2526const ChatGPT = ( ) => {
2627 const { projectId } = routeInfoStore . useStore ( ( s ) => s . params ) ;
2728 const [ visible , setVisible ] = useState ( false ) ;
29+ const divRef = useRef < HTMLDivElement > ( null ) ;
30+ const activeRef = useRef ( false ) ;
31+ const [ bottom , setBottom ] = useState ( 64 ) ;
32+
33+ useEffectOnce ( ( ) => {
34+ const onDown = ( ) => {
35+ activeRef . current = true ;
36+ } ;
37+ const onUp = ( ) => {
38+ activeRef . current = false ;
39+ } ;
40+ const onMove = ( e : MouseEvent ) => {
41+ if ( activeRef . current ) {
42+ setBottom ( window . innerHeight - ( e . clientY + 20 ) ) ;
43+ }
44+ } ;
45+ if ( divRef . current ) {
46+ divRef . current . addEventListener ( 'mousedown' , onDown ) ;
47+ document . addEventListener ( 'mousemove' , onMove ) ;
48+ document . addEventListener ( 'mouseup' , onUp ) ;
49+ }
50+
51+ return ( ) => {
52+ divRef . current ?. removeEventListener ( 'mousedown' , onDown ) ;
53+ document . removeEventListener ( 'mousemove' , onMove ) ;
54+ document . removeEventListener ( 'mouseup' , onUp ) ;
55+ } ;
56+ } ) ;
2857
2958 return (
3059 < >
3160 < div
32- className = "fixed bottom-16 right-[8px] shadow-card p-2 rounded-[10px] bg-white cursor-pointer w-[40px] text-center z-[2050]"
61+ ref = { divRef }
62+ className = "fixed right-[8px] shadow-card p-2 rounded-[10px] bg-white cursor-pointer w-[40px] text-center z-[2050]"
3363 onClick = { ( ) => setVisible ( true ) }
64+ style = { { bottom } }
3465 >
3566 < CustomIcon type = "ai" className = "text-xl mr-0" />
3667 </ div >
0 commit comments