🐛 Make BottomSpacer height's dynamic to fix auto scroll with small co…

…ntainers Closes baptisteArno#1912
code · Dec 12, 2024 · 11503dc · 11503dc
1 parent 16b7776
commit 11503dc
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 31 deletions.
diff --git a/packages/bot-engine/src/startBotFlow.ts b/packages/bot-engine/src/startBotFlow.ts
@@ -98,7 +98,6 @@ const autoContinueChatIfStartingWithInput = async ({
   chatReply,
   textBubbleContentFormat,
 }: Props & { chatReply: ChatReply }): Promise<ChatReply> => {
-  console.log("HEY", message, chatReply);
   if (
     !message ||
     chatReply.messages.length > 0 ||

diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.3.34",
+  "version": "0.3.35",
   "description": "Javascript library to display typebots on your website",
   "license": "FSL-1.1-ALv2",
   "type": "module",

diff --git a/packages/embeds/js/src/assets/index.css b/packages/embeds/js/src/assets/index.css
@@ -129,6 +129,7 @@ pre {
 }
 
 .typebot-chat-view {
+  @apply pt-5 px-3;
   max-width: var(--typebot-chat-container-max-width);
   background-color: rgba(
     var(--typebot-chat-container-bg-rgb),
@@ -142,13 +143,13 @@ pre {
     var(--typebot-chat-container-border-rgb),
     var(--typebot-chat-container-border-opacity)
   );
-  padding-left: 20px;
-  padding-right: 20px;
   box-shadow: var(--typebot-chat-container-box-shadow);
 }
 
-@container (min-width: 480px) {
+/* TODO: Use @tailwindcss/container-queries*/
+@container (min-width: 432px) {
   .typebot-chat-view {
+    @apply pt-10 px-5;
     min-height: var(--typebot-chat-container-max-height);
     max-height: var(--typebot-chat-container-max-height);
     border-radius: var(--typebot-chat-container-border-radius);

diff --git a/packages/embeds/js/src/components/Bot.tsx b/packages/embeds/js/src/components/Bot.tsx
@@ -294,7 +294,7 @@ const BotContent = (props: BotContentProps) => {
   let botContainerElement: HTMLDivElement | undefined;
 
   const resizeObserver = new ResizeObserver((entries) => {
-    return setIsMobile((entries[0]?.target.clientWidth ?? 0) < 400);
+    return setIsMobile((entries[0]?.target.clientWidth ?? 0) < 432);
   });
 
   onMount(() => {

diff --git a/packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx b/packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx
@@ -36,8 +36,8 @@ import { ChatChunk } from "./ChatChunk";
 import { LoadingChunk } from "./LoadingChunk";
 import { PopupBlockedToast } from "./PopupBlockedToast";
 
-const autoScrollBottomToleranceScreenPercent = 0.6;
-const bottomSpacerHeight = 128;
+const AUTO_SCROLL_CLIENT_HEIGHT_PERCENT_TOLERANCE = 0.6;
+const AUTO_SCROLL_DELAY = 50;
 
 const parseDynamicTheme = (
   initialTheme: Theme,
@@ -230,24 +230,22 @@ export const ConversationContainer = (props: Props) => {
   const autoScrollToBottom = (lastElement?: HTMLDivElement, offset = 0) => {
     if (!chatContainer) return;
 
-    const bottomTolerance =
-      chatContainer.clientHeight * autoScrollBottomToleranceScreenPercent -
-      bottomSpacerHeight;
+    const isBottomOfLastElementTooFarBelow =
+      chatContainer.scrollTop + chatContainer.clientHeight <
+      chatContainer.scrollHeight -
+        chatContainer.clientHeight *
+          AUTO_SCROLL_CLIENT_HEIGHT_PERCENT_TOLERANCE;
 
-    const isBottomOfLastElementInView =
-      chatContainer.scrollTop + chatContainer.clientHeight >=
-      chatContainer.scrollHeight - bottomTolerance;
+    if (isBottomOfLastElementTooFarBelow) return;
 
-    if (isBottomOfLastElementInView) {
-      setTimeout(() => {
-        chatContainer?.scrollTo(
-          0,
-          lastElement
-            ? lastElement.offsetTop - offset
-            : chatContainer.scrollHeight,
-        );
-      }, 50);
-    }
+    setTimeout(() => {
+      chatContainer?.scrollTo({
+        top: lastElement
+          ? lastElement.offsetTop - offset
+          : chatContainer.scrollHeight,
+        behavior: "smooth",
+      });
+    }, AUTO_SCROLL_DELAY);
   };
 
   const handleAllBubblesDisplayed = async () => {
@@ -316,7 +314,7 @@ export const ConversationContainer = (props: Props) => {
   return (
     <div
       ref={chatContainer}
-      class="flex flex-col overflow-y-auto w-full px-3 pt-10 relative scrollable-container typebot-chat-view scroll-smooth gap-2"
+      class="flex flex-col overflow-y-auto w-full relative scrollable-container typebot-chat-view scroll-smooth gap-2"
     >
       <For each={chatChunks()}>
         {(chatChunk, index) => (
@@ -362,11 +360,9 @@ export const ConversationContainer = (props: Props) => {
   );
 };
 
+// Needed because we need to simulate a bottom padding relative to the chat view height
 const BottomSpacer = () => (
-  <div
-    class="w-full flex-shrink-0 typebot-bottom-spacer"
-    style={{ height: bottomSpacerHeight + "px" }}
-  />
+  <div class="w-full flex-shrink-0 typebot-bottom-spacer h-[20%]" />
 );
 
 const convertSubmitContentToMessage = (

diff --git a/packages/embeds/nextjs/package.json b/packages/embeds/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.3.34",
+  "version": "0.3.35",
   "license": "FSL-1.1-ALv2",
   "description": "Convenient library to display typebots on your Next.js website",
   "type": "module",

diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.3.34",
+  "version": "0.3.35",
   "description": "Convenient library to display typebots on your React app",
   "license": "FSL-1.1-ALv2",
   "type": "module",