Scroll indicator full implementation

dancecard · Oct 6, 2021 · 700467a · 700467a
1 parent 2007c70
commit 700467a
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/src/Widget/Conversation/Message/Message.tsx b/src/Widget/Conversation/Message/Message.tsx
@@ -13,6 +13,8 @@ import { MessageContainer, WistiaVideoContainer, MessageWrapper, MessageScrollTo
 
 /* - - - - - - - - - - - - - - - - - - - - - - */
 
+const DEFAULT_WRAPPER_HEIGHT = 100;
+
 function Message() {
   const {
     appState: {
@@ -34,22 +36,34 @@ function Message() {
   const { animationId, wistiaMatcher } = currentMessageData;
   const animation = animationId && animations[animationId];
 
-  const [animationWrapperScrollHeight, setAnimationWrapperScrollHeight] = useState(100);
+  const [messageWrapperScrollHeight, setMessageWrapperScrollHeight] = useState(DEFAULT_WRAPPER_HEIGHT);
 
   const messageWrapperRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    setMessageWrapperScrollHeight(DEFAULT_WRAPPER_HEIGHT);
+  }, [currentMessageId]);
+
   useEffect(() => {
     if (messageWrapperRef.current) {
       messageWrapperRef.current.scrollTop = 0;
 
       const currentScrollHeight = messageWrapperRef.current.scrollHeight;
 
-      if (currentScrollHeight !== animationWrapperScrollHeight) {
-        setAnimationWrapperScrollHeight(currentScrollHeight);
+      if (messageWrapperScrollHeight !== 0 && currentScrollHeight !== messageWrapperScrollHeight) {
+        setMessageWrapperScrollHeight(currentScrollHeight);
       }
+
+      messageWrapperRef.current.addEventListener('scroll', handleOnScroll);
     }
+
+    return () => messageWrapperRef?.current?.removeEventListener('scroll', handleOnScroll);
   });
 
+  const handleOnScroll = () => {
+    setMessageWrapperScrollHeight(0);
+  };
+
   const renderWistiaWidget = () => {
     if (wistiaMatcher) {
       const widgetWidth = chatbotWidth - 30;
@@ -109,7 +123,7 @@ function Message() {
   const renderScrollIndicator = () => {
     const maxHeight = defineMessageWrapperMaxHeight(responsesCurrentBlobInfo.itemsWithin);
     const physicalConditionsMatch =
-      maxHeight < animationWrapperScrollHeight && Math.abs(maxHeight - animationWrapperScrollHeight) > 20;
+      maxHeight < messageWrapperScrollHeight && Math.abs(maxHeight - messageWrapperScrollHeight) > 20;
 
     if (!emailRequestIsAllowed && physicalConditionsMatch && !isWindows) {
       return <MessageScrollToBottomIndicator items={responsesCurrentBlobInfo.itemsWithin} />;

diff --git a/src/Widget/Conversation/Message/style.ts b/src/Widget/Conversation/Message/style.ts
@@ -109,6 +109,17 @@ export const scrollDown = keyframes`
   }
 `;
 
+const fadeIn = keyframes`
+0% {
+  opacity: 0;
+}
+90% {
+  opacity: 0;
+}
+100% {
+  opacity: 0.6;
+}`;
+
 export const MessageScrollToBottomIndicator = styled.div<{ items: number }>`
   display: flex;
   position: absolute;
@@ -128,6 +139,7 @@ export const MessageScrollToBottomIndicator = styled.div<{ items: number }>`
   border-radius: 10px;
   border: 2px solid black;
   opacity: 0.6;
+  animation: ${fadeIn} 3s ease-in-out;
 
   &:before,
   &:after {