feat(ai-chat-log): story for user cancel scroll to end

twilio-labs · Jan 16, 2025 · d62b979 · d62b979
1 parent 869544f
commit d62b979
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 8 deletions.
diff --git a/packages/paste-core/components/ai-chat-log/stories/scrollableSidePanel.stories.tsx b/packages/paste-core/components/ai-chat-log/stories/scrollableSidePanel.stories.tsx
@@ -195,8 +195,9 @@ export const SidePanelScroll: StoryFn = () => {
   );
   const [message, setMessage] = React.useState("");
   const [mounted, setMounted] = React.useState(false);
-  const loggerRef = React.useRef(null);
-  const scrollerRef = React.useRef(null);
+  const [userInterctedScroll, setUserInteractedScroll] = React.useState(false);
+  const loggerRef = React.useRef<HTMLDivElement>(null);
+  const scrollerRef = React.useRef<HTMLDivElement>(null);
 
   React.useEffect(() => {
     setMounted(true);
@@ -222,20 +223,27 @@ export const SidePanelScroll: StoryFn = () => {
 
   const onAnimationEnd = (): void => {
     setIsAnimating(false);
-    scrollToChatEnd();
+    setUserInteractedScroll(false);
   };
 
   const onAnimationStart = (): void => {
+    setUserInteractedScroll(false);
     setIsAnimating(true);
   };
 
+  const userScrolled = (): void => setUserInteractedScroll(true);
+
   React.useEffect(() => {
-    const interval = setInterval(() => isAnimating && scrollToChatEnd(), 30);
+    scrollerRef.current?.addEventListener("wheel", userScrolled);
+    scrollerRef.current?.addEventListener("touchmove", userScrolled);
 
+    const interval = setInterval(() => isAnimating && !userInterctedScroll && scrollToChatEnd(), 5);
     return () => {
       if (interval) clearInterval(interval);
+      scrollerRef.current?.removeEventListener("wheel", userScrolled);
+      scrollerRef.current?.removeEventListener("touchmove", userScrolled);
     };
-  }, [isAnimating]);
+  }, [isAnimating, userInterctedScroll]);
 
   // eslint-disable-next-line storybook/prefer-pascal-case
   const createNewMessage = (newMessage: any, forceBot?: boolean): Omit<AIChat, "id"> => {

diff --git a/packages/paste-website/src/component-examples/AIChatLogExamples.ts b/packages/paste-website/src/component-examples/AIChatLogExamples.ts
@@ -770,6 +770,7 @@ const exampleAIResponseText =
 
 const AnimatedBotScrollable = () => {
   const [isAnimating, setIsAnimating] = React.useState(false);
+  const [userInterctedScroll, setUserInteractedScroll] = React.useState(false);
   const loggerRef = React.useRef(null);
   const scrollerRef = React.useRef(null);
 
@@ -789,22 +790,30 @@ const AnimatedBotScrollable = () => {
     scrollPosition?.scrollTo({ top: scrollHeight.scrollHeight, behavior: "smooth" });
   };
 
+  const userScrolled = () => setUserInteractedScroll(true);
+
   const onAnimationEnd = () => {
     setIsAnimating(false);
-    scrollToChatEnd();
+    setUserInteractedScroll(false);
   };
 
   const onAnimationStart = () => {
+    setUserInteractedScroll(false);
     setIsAnimating(true);
   };
 
   React.useEffect(() => {
-    const interval = setInterval(() => isAnimating && scrollToChatEnd(), 30);
+    scrollerRef.current?.addEventListener("wheel", userScrolled);
+    scrollerRef.current?.addEventListener("touchmove", userScrolled);
+
+    const interval = setInterval(() => isAnimating && !userInterctedScroll && scrollToChatEnd(), 5);
 
     return () => {
       if (interval) clearInterval(interval);
+      scrollerRef.current?.removeEventListener("wheel", userScrolled);
+      scrollerRef.current?.removeEventListener("touchmove", userScrolled);
     };
-  }, [isAnimating]);
+  }, [isAnimating, userInterctedScroll, scrollerRef]);
 
   const pushLargeBotMessage = () => {
     push({