Drop react-popper-tooltip lib (#147)

package.json

@@ -31,7 +31,6 @@
   "dependencies": {
     "@sendbird/uikit-react": "^3.13.4",
     "@tanstack/react-query": "^5.17.19",
-    "react-popper-tooltip": "^4.4.2",
     "styled-components": "^5.3.11"
   },
   "devDependencies": {

src/components/BotMessageBottom.tsx

@@ -1,11 +1,6 @@
-import { useState } from 'react';
-import { createPortal } from 'react-dom';
-import { usePopperTooltip } from 'react-popper-tooltip';
 import styled from 'styled-components';
 
 import { useConstantState } from '../context/ConstantContext';
-import { ReactComponent as InfoIcon } from '../icons/info-icon.svg';
-import 'react-popper-tooltip/dist/styles.css';
 
 const Text = styled.div`
   color: ${({ theme }) => theme.textColor.incomingMessage};
@@ -36,72 +31,23 @@ const Delimiter = styled.div`
   border-top: 1px solid var(--sendbird-light-onlight-04);
 `;
 
-const InfoIconButton = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 18px;
-  cursor: pointer;
-
-  svg {
-    path {
-      fill: ${({ theme }) => theme.textColor.incomingMessage};
-    }
-  }
-`;
-
-const InfoBox = styled.div`
-  padding: 8px 12px;
-  //width: calc(100% - 140px);
-
-  max-width: 260px;
-  width: 100%;
-  background: var(--sendbird-dark-onlight-01);
-  border-radius: 8px;
-  color: ${({ theme }) => theme.textColor.sourceInfo};
-  margin-top: 8px;
-  font-family: 'Roboto', sans-serif;
-  font-size: 14px;
-  line-height: 20px;
-
-  @media screen and (min-width: 600px) {
-    max-width: 400px;
-  }
-`;
-
 export default function BotMessageBottom() {
   const { messageBottomContent } = useConstantState();
-
-  const placement = 'auto';
-
-  const { getTooltipProps, setTooltipRef, setTriggerRef } = usePopperTooltip({
-    placement,
-  });
-
-  const [showInfoBox, setShowInfoBox] = useState<boolean>(false);
+  // const [showInfoBox, setShowInfoBox] = useState<boolean>(true);
 
   return (
     <>
-      <BottomComponent ref={setTriggerRef}>
+      <BottomComponent>
         <Delimiter />
         <TextContainer>
           <Text>{messageBottomContent.text}</Text>
-          <InfoIconButton
+          {/* <InfoIconButton
             onMouseEnter={() => setShowInfoBox(true)}
             onMouseLeave={() => setShowInfoBox(false)}
           >
-            <InfoIcon height={'28px'} width={'28px'} />
-          </InfoIconButton>
+          </InfoIconButton> */}
         </TextContainer>
       </BottomComponent>
-      {showInfoBox &&
-        createPortal(
-          <div ref={setTooltipRef} {...getTooltipProps()}>
-            <InfoBox>{messageBottomContent.infoIconText}</InfoBox>
-            {/*<div {...getArrowProps({ className: 'tooltip-arrow' })} />*/}
-          </div>,
-          document.getElementById('sb_chat_root_for_z_index') as HTMLDivElement
-        )}
     </>
   );
 }