♿ (js) Improve auto scroll when no host bubble

Closes #522
baptisteArno · May 26, 2023 · 0ca48e4 · 0ca48e4
1 parent 68f0202
commit 0ca48e4
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.58",
+  "version": "0.0.59",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

diff --git a/packages/embeds/js/src/components/ConversationContainer/ChatChunk.tsx b/packages/embeds/js/src/components/ConversationContainer/ChatChunk.tsx
@@ -21,13 +21,16 @@ type Props = Pick<ChatReply, 'messages' | 'input'> & {
 }
 
 export const ChatChunk = (props: Props) => {
+  let inputRef: HTMLDivElement | undefined
   const [displayedMessageIndex, setDisplayedMessageIndex] = createSignal(0)
 
   onMount(() => {
     if (props.messages.length === 0) {
       props.onAllBubblesDisplayed()
     }
-    props.onScrollToBottom()
+    props.onScrollToBottom(
+      inputRef?.offsetTop ? inputRef?.offsetTop - 50 : undefined
+    )
   })
 
   const displayNextMessage = async (bubbleOffsetTop?: number) => {
@@ -84,6 +87,7 @@ export const ChatChunk = (props: Props) => {
       </Show>
       {props.input && displayedMessageIndex() === props.messages.length && (
         <InputChatBlock
+          ref={inputRef}
           block={props.input}
           inputIndex={props.inputIndex}
           onSubmit={props.onSubmit}

diff --git a/packages/embeds/js/src/components/InputChatBlock.tsx b/packages/embeds/js/src/components/InputChatBlock.tsx
@@ -35,6 +35,7 @@ import { SinglePictureChoice } from '@/features/blocks/inputs/pictureChoice/Sing
 import { MultiplePictureChoice } from '@/features/blocks/inputs/pictureChoice/MultiplePictureChoice'
 
 type Props = {
+  ref: HTMLDivElement | undefined
   block: NonNullable<ChatReply['input']>
   hasHostAvatar: boolean
   guestAvatar?: Theme['chat']['guestAvatar']
@@ -72,6 +73,7 @@ export const InputChatBlock = (props: Props) => {
         <div
           class="flex justify-end animate-fade-in gap-2"
           data-blockid={props.block.id}
+          ref={props.ref}
         >
           {props.hasHostAvatar && (
             <div

diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.58",
+  "version": "0.0.59",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",