Merge pull request #222 from apecloud/feat/chat

feat: css
apecloud · Mar 14, 2024 · ace1868 · ace1868
2 parents 922d51c + 10243d5
commit ace1868
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 22 deletions.
diff --git a/src/pages/chatInput.less b/src/pages/chatInput.less
@@ -30,22 +30,6 @@
       animation: typing 1s linear infinite;
     }
   }
-  .kubechat {
-    position: fixed;
-    right: -25px;
-    bottom: -25px;
-    z-index: 10000;
-    transition: 0.3s;
-    display: none;
-    &.kubechat-ready {
-      display: block;
-    }
-    &:hover,
-    &.kubechat-open {
-      right: 0;
-      bottom: 0;
-    }
-  }
 }
 
 @keyframes typing {

diff --git a/src/pages/chatInput.tsx b/src/pages/chatInput.tsx
@@ -7,12 +7,13 @@ import styles from './index.module.less';
 const TypeWriterInput = () => {
   const [open, setOpen] = useState<boolean>(false);
   const [chatReady, setChatReady] = useState<boolean>(false);
-  const [currentTips, setTips] = useState <string>('');
+  const [currentTips, setTips] = useState<string>('');
+
 
-
 
   useEffect(() => {
-    document.getElementsByTagName('kube-chat')[0].style.display= 'none'
+    document.getElementById('chat').style.display = 'none'
+    document.getElementsByTagName('kube-chat')[0].style.display = 'none'
     const chatTips = () => {
       const tips1 = "how to install kubeblocks".split(/\s/);
       const tips2 = "how to create a mysql cluster".split(/\s/);
@@ -57,17 +58,19 @@ const TypeWriterInput = () => {
     chatTips();
   }, []);
 
- 
+
   const handleClick = (event) => {
     event.preventDefault();
-    document.getElementsByTagName('kube-chat')[0].style.display= 'block'
+    document.getElementById('chat').style.display = 'block'
+    document.getElementsByTagName('kube-chat')[0].style.display = 'block'
     document.getElementsByTagName('kube-chat')[0].setBotExpand(true);
     document.getElementsByTagName('kube-chat')[0].askQuestion(currentTips)
   };
 
   return <span className='chat-box'>
     <a href="#" onClick={handleClick} className="chat-btn">How to create a MySQL cluster </a>
     <span
+      id='chat'
       className={classNames({
         [styles.kubechat]: true,
         [styles.kubechatOpen]: open,
@@ -80,7 +83,7 @@ const TypeWriterInput = () => {
         }}
         onClose={() => {
           setOpen(false);
-          document.getElementsByTagName('kube-chat')[0].style.display= 'none'
+          document.getElementsByTagName('kube-chat')[0].style.display = 'none'
         }}
         onReady={() => {
           setChatReady(true);