feat: switch to use-stick-to-bottom (#803)

src/interfaces/assistants_web/Dockerfile

@@ -4,7 +4,6 @@ WORKDIR /app
 
 # Install dependencies based on the preferred package manager
 COPY package.json package-lock.json ./
-COPY patches ./patches
 RUN npm ci
 
 COPY src ./src
@@ -29,4 +28,4 @@ CMD npm run dev
 # Production specifc tareget
 FROM base AS prod
 RUN npm run build
-CMD npm run start
+CMD npm run start

src/interfaces/assistants_web/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

src/interfaces/assistants_web/package.json

@@ -22,8 +22,7 @@
     "start:single-docker-proxy": "next start --port 8090",
     "generate:client": "openapi-ts",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "postinstall": "patch-package"
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.9",
@@ -70,7 +69,7 @@
     "react-lottie-player": "^1.4.3",
     "react-markdown": "^9.0.1",
     "react-popper": "^2.3.0",
-    "react-scroll-to-bottom": "^4.2.0",
+    "use-stick-to-bottom": "^1.0.39",
     "react-swipeable": "^7.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "rehype-highlight": "6.0.0",
@@ -107,7 +106,6 @@
     "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.14.185",
     "@types/node": "^18.15.0",
-    "@types/react-scroll-to-bottom": "^4.2.0",
     "@types/react-syntax-highlighter": "^15.5.11",
     "@typescript-eslint/eslint-plugin": "^6.7.4",
     "@typescript-eslint/parser": "^6.7.4",
@@ -117,7 +115,6 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-storybook": "^0.8.0",
     "jsdom": "^24.1.1",
-    "patch-package": "^8.0.0",
     "postcss-100vh-fix": "^1.0.2",
     "prettier": "2.8.7",
     "prettier-plugin-tailwindcss": "0.4.1",

src/interfaces/assistants_web/src/components/MessagingContainer/MessagingContainer.tsx

@@ -3,7 +3,7 @@
 import { Transition } from '@headlessui/react';
 import { usePrevious } from '@react-hookz/web';
 import React, { ReactNode, memo, useEffect, useMemo } from 'react';
-import ScrollToBottom, { useScrollToBottom, useSticky } from 'react-scroll-to-bottom';
+import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom';
 
 import { MessageRow } from '@/components/MessageRow';
 import { Welcome } from '@/components/MessagingContainer';
@@ -34,24 +34,20 @@ type Props = {
 const MessagingContainerContents: React.FC<Props> = (props) => {
   const { scrollViewClassName = '', ...rest } = props;
   return (
-    <ScrollToBottom
-      mode={props.messages.length === 0 ? 'top' : 'bottom'}
-      initialScrollBehavior="smooth"
-      className="relative flex h-0 flex-grow flex-col"
-      scrollViewClassName={cn(
-        '!h-full',
-        'flex relative mt-auto overflow-x-hidden',
-        {
-          // For vertically centering the content in @/components/Welcome.tsx
-          'mt-0 md:mt-auto': props.messages.length === 0,
-        },
-        scrollViewClassName
-      )}
-      followButtonClassName="hidden"
-      debounce={100}
-    >
-      <Content {...rest} />
-    </ScrollToBottom>
+    <StickToBottom className="relative flex h-0 flex-grow flex-col">
+      <StickToBottom.Content
+        className={cn(
+          'relative mt-auto flex overflow-x-hidden',
+          {
+            // For vertically centering the content in @/components/Welcome.tsx
+            'mt-0 md:mt-auto': props.messages.length === 0,
+          },
+          scrollViewClassName
+        )}
+      >
+        <Content {...rest} />
+      </StickToBottom.Content>
+    </StickToBottom>
   );
 };
 export const MessagingContainer = memo(MessagingContainerContents);
@@ -62,10 +58,9 @@ export const MessagingContainer = memo(MessagingContainerContents);
  */
 const Content: React.FC<Props> = (props) => {
   const { isStreaming, messages, composer, streamingMessage } = props;
-  const scrollToBottom = useScrollToBottom();
+  const { scrollToBottom, isAtBottom } = useStickToBottomContext();
 
   useFixCopyBug();
-  const [isAtBottom] = useSticky();
   const prevIsStreaming = usePrevious(isStreaming);
 
   // Show the `New Message` button if the user has scrolled up
@@ -86,12 +81,12 @@ const Content: React.FC<Props> = (props) => {
   useEffect(() => {
     const lastMessage = messages[messages.length - 1];
     if (lastMessage?.type === MessageType.USER) {
-      scrollToBottom({ behavior: 'smooth' });
+      scrollToBottom();
     }
   }, [messages.length, scrollToBottom]);
 
   const handleScrollToNewMessage = () => {
-    scrollToBottom({ behavior: 'smooth' });
+    scrollToBottom();
   };
 
   return (

src/interfaces/assistants_web/src/types/index.d.ts

@@ -4,40 +4,3 @@ declare module 'js-resume-parser' {
   export function getDataFromPDF(file: File): Promise<{ text: string }>;
   export function getDataFromDocx(file: File): Promise<{ text: string }>;
 }
-
-// from https://github.com/compulim/react-scroll-to-bottom/issues/81 with additions
-declare module 'react-scroll-to-bottom' {
-  import * as React from 'react';
-
-  interface ReactScrollToBottomProps {
-    checkInterval?: number;
-    className?: string;
-    debounce?: number;
-    followButtonClassName?: string;
-    mode?: string;
-    scrollViewClassName?: string;
-    children: React.ReactNode;
-    debug?: boolean;
-    initialScrollBehavior?: 'smooth' | 'auto';
-  }
-
-  interface ScrollOptions {
-    behavior: ScrollBehavior;
-  }
-
-  interface FunctionContextProps {
-    scrollTo: (scrollTo: number, options: ScrollOptions) => void;
-    scrollToBottom: (options: ScrollOptions) => void;
-    scrollToEnd: (options: ScrollOptions) => void;
-    scrollToStart: (options: ScrollOptions) => void;
-    scrollToTop: (options: ScrollOptions) => void;
-  }
-
-  export const useScrollToBottom: () => FunctionContextProps.scrollToBottom;
-  export const useAtTop: () => [boolean];
-  export const useSticky: () => [boolean];
-
-  const FunctionContext: React.Context<FunctionContextProps>;
-
-  export default class ScrollToBottom extends React.PureComponent<ReactScrollToBottomProps> {}
-}