🚸 Auto scroll once picture choice images are fully loaded

packages/embeds/js/src/components/ConversationContainer/ChatChunk.tsx

@@ -27,6 +27,7 @@ type Props = Pick<ContinueChatResponse, 'messages' | 'input'> & {
 export const ChatChunk = (props: Props) => {
   let inputRef: HTMLDivElement | undefined
   const [displayedMessageIndex, setDisplayedMessageIndex] = createSignal(0)
+  const [lastBubbleOffsetTop, setLastBubbleOffsetTop] = createSignal<number>()
 
   onMount(() => {
     if (props.streamingMessageId) return
@@ -48,6 +49,7 @@ export const ChatChunk = (props: Props) => {
     )
     props.onScrollToBottom(bubbleOffsetTop)
     if (displayedMessageIndex() === props.messages.length) {
+      setLastBubbleOffsetTop(bubbleOffsetTop)
       props.onAllBubblesDisplayed()
     }
   }
@@ -111,6 +113,7 @@ export const ChatChunk = (props: Props) => {
             defaultSettings.general.isInputPrefillEnabled
           }
           hasError={props.hasError}
+          onTransitionEnd={() => props.onScrollToBottom(lastBubbleOffsetTop())}
           onSubmit={props.onSubmit}
           onSkip={props.onSkip}
         />

packages/embeds/js/src/components/InputChatBlock.tsx

@@ -46,6 +46,7 @@ type Props = {
   context: BotContext
   isInputPrefillEnabled: boolean
   hasError: boolean
+  onTransitionEnd: () => void
   onSubmit: (answer: string) => void
   onSkip: () => void
 }
@@ -102,6 +103,7 @@ export const InputChatBlock = (props: Props) => {
             block={props.block}
             inputIndex={props.inputIndex}
             isInputPrefillEnabled={props.isInputPrefillEnabled}
+            onTransitionEnd={props.onTransitionEnd}
             onSubmit={handleSubmit}
             onSkip={handleSkip}
           />
@@ -116,6 +118,7 @@ const Input = (props: {
   block: NonNullable<ContinueChatResponse['input']>
   inputIndex: number
   isInputPrefillEnabled: boolean
+  onTransitionEnd: () => void
   onSubmit: (answer: InputSubmitContent) => void
   onSkip: (label: string) => void
 }) => {
@@ -208,6 +211,7 @@ const Input = (props: {
                 defaultItems={block.items}
                 options={block.options}
                 onSubmit={onSubmit}
+                onTransitionEnd={props.onTransitionEnd}
               />
             </Match>
             <Match when={block.options?.isMultipleChoice}>
@@ -215,6 +219,7 @@ const Input = (props: {
                 defaultItems={block.items}
                 options={block.options}
                 onSubmit={onSubmit}
+                onTransitionEnd={props.onTransitionEnd}
               />
             </Match>
           </Switch>
@@ -245,6 +250,7 @@ const Input = (props: {
             } as PaymentInputBlock['options'] & RuntimeOptions
           }
           onSuccess={submitPaymentSuccess}
+          onTransitionEnd={props.onTransitionEnd}
         />
       </Match>
     </Switch>