feat(react): remove the smooth behavior in scrollIntoView function an…

…d add it as a CSS property in the ScrollableMessageList component
hubtype · Dec 20, 2024 · 57ea791 · 57ea791
1 parent d69ed11
commit 57ea791
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 10 deletions.
diff --git a/packages/botonic-react/package.json b/packages/botonic-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@botonic/react",
-  "version": "0.30.7",
+  "version": "0.30.8-alpha.1",
   "license": "MIT",
   "description": "Build Chatbots using React",
   "main": "./lib/cjs",
@@ -20,7 +20,7 @@
     "lint_core": "../../node_modules/.bin/eslint_d --cache --quiet '.*.js' '*.js' 'src/**/*.js*' --fix"
   },
   "dependencies": {
-    "@botonic/core": "^0.30.0",
+    "@botonic/core": "^0.30.2",
     "axios": "^1.7.2",
     "emoji-picker-react": "^4.4.9",
     "lodash.merge": "^4.6.2",

diff --git a/packages/botonic-react/src/webchat/hooks/use-scroll-to-bottom.ts b/packages/botonic-react/src/webchat/hooks/use-scroll-to-bottom.ts
@@ -3,11 +3,7 @@ import {
   getWebchatElement,
 } from '../../util/dom'
 
-export const useScrollToBottom = ({
-  host,
-  behavior = 'smooth',
-  timeout = 200,
-}) => {
+export const useScrollToBottom = ({ host, timeout = 200 }) => {
   const scrollToBottom = () => {
     const webchatElement = getWebchatElement(host)
     if (!webchatElement) return
@@ -17,7 +13,6 @@ export const useScrollToBottom = ({
     setTimeout(() => {
       scrollableMessagesListElement.scrollTo({
         top: scrollableMessagesListElement.scrollHeight,
-        behavior: behavior as ScrollBehavior,
       })
     }, timeout)
   }

diff --git a/packages/botonic-react/src/webchat/message-list/index.tsx b/packages/botonic-react/src/webchat/message-list/index.tsx
@@ -12,11 +12,9 @@ import { useNotifications } from './use-notifications'
 
 const SCROLL_TIMEOUT = 200
 const scrollOptionsEnd: ScrollIntoViewOptions = {
-  behavior: 'smooth',
   block: 'end',
 }
 const scrollOptionsCenter: ScrollIntoViewOptions = {
-  behavior: 'smooth',
   block: 'center',
 }
 

diff --git a/packages/botonic-react/src/webchat/message-list/styles.ts b/packages/botonic-react/src/webchat/message-list/styles.ts
@@ -55,5 +55,6 @@ export const ScrollableMessageList = styled.div`
   overflow-y: auto;
   overflow-x: hidden;
   overscroll-behavior: contain; // https://css-tricks.com/almanac/properties/o/overscroll-behavior/
+  scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
 `