From 80498808ffb495e567cc8bb343e5e1269a41d41f Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
Date: Mon, 24 Mar 2025 18:30:59 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20Make=20entire=20screen=20scrolla?=
 =?UTF-8?q?ble=20when=20chat=20container=20is=20disabled?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #2089
---
 bun.lockb                                     | Bin 1294608 -> 1294576 bytes
 packages/embeds/js/package.json               |   3 +-
 packages/embeds/js/src/assets/index.css       |   2 -
 packages/embeds/js/src/components/Button.tsx  |   4 +-
 .../ConversationContainer.tsx                 | 116 ++++++++++--------
 .../embeds/js/src/components/SendButton.tsx   |   4 +-
 .../src/components/TextInputAddFileButton.tsx |   6 +-
 .../js/src/components/bubbles/GuestBubble.tsx |   8 +-
 .../bubbles/audio/components/AudioBubble.tsx  |   4 +-
 .../embed/components/CustomEmbedBubble.tsx    |   6 +-
 .../bubbles/embed/components/EmbedBubble.tsx  |   6 +-
 .../bubbles/image/components/ImageBubble.tsx  |  10 +-
 .../textBubble/components/TextBubble.tsx      |   6 +-
 .../bubbles/video/components/VideoBubble.tsx  |   6 +-
 .../inputs/date/components/DateForm.tsx       |   4 +-
 .../fileUpload/components/FilePreview.tsx     |   4 +-
 .../inputs/textInput/components/TextInput.tsx |  10 +-
 .../textInput/components/VoiceRecorder.tsx    |   4 +-
 .../src/features/bubble/components/Bubble.tsx |   6 +-
 .../bubble/components/BubbleButton.tsx        |  16 +--
 .../bubble/components/PreviewMessage.tsx      |   4 +-
 .../embeds/js/src/utils/scrollContainer.ts    |   4 +
 packages/embeds/js/tailwind.config.js         |   3 +
 packages/embeds/nextjs/package.json           |   2 +-
 packages/embeds/react/package.json            |   2 +-
 yarn.lock                                     |   3 +-
 26 files changed, 129 insertions(+), 114 deletions(-)
 create mode 100644 packages/embeds/js/src/utils/scrollContainer.ts

diff --git a/bun.lockb b/bun.lockb
index 990012d2d586ad79dbe5b2ddbc822b3bcdf73efd..31283b6cbb7f650143759ef971ec1c7ed846c248 100755
GIT binary patch
delta 5425
zcmeI0dvH|c8Hdl=Y!a4lA;_ARFl}<86JlCYZcVv~CIm<@z;YD?3PhBtr86yKX;E7v
zR!m!@1Ek3(6hV!YMxY^}Jyl2vS}WM9C@4%JK)Bz-RR|L3^Rn+B@eey~|LaV?nJ3Tr
ze(%}$eCO<L&h9RJI(lwybm0hh+T7^8s5>tjm=}$EJsMmYC`of1r##hh0@&hsyiDiI
zaU%1T*u}rcGFm!;`5N*#T#aS^I+lJuZi6@Ld<&L7Z>ir-bxNEd!Mhr4#WKXb@aLLe
z$I>_;t5r**IOcMocr5b-t&2m<lQi#uWxtMC7MiT?lvWa3p+_JM($#lhxe}S`u2>e(
zQ|G<0oY}qV0xUx;eG0McKSFb{%*SHs`+$0iTz@G%gyn$`>wG4bA(r|qEC+lHOM@q|
zJT>#w&uP90%NhO_x5dk`^j(2vh~@FGs7tEYkONd>Ie?F4h~<HQ#&V#|nu{f`)BIg5
zkAEM_CI1x5fe&EWuR-&ZSo&Yk{32!{CC=5@hSQ9tQJfcZ2up*uSXP{*zFnQ7PQ^0B
zvVR(u1$V*noZp2d&%!cVI*#KzUA<fREgLp_>s&0CvLBX4cVii1dC}%#8Dcp=o_Zjb
z{Rd&$uMo><X*r?c9)CD~Y~xET4MutVVYIYd;z^#QU$iWEiWj?L)3IFgnOL5hAL9=A
z87vEY7R&K(ZTzp6g)H>s(J{*c%DmVC%CU@=mMc}^#jcq396LQRm~v|oO9^F&Wp&H2
z46)3YW4RhHW4U~*u;f)(hFH$F2FpR#V;TR>vfl=eiy#}XdHi9B<%RermLX2TJFx7x
z6U%`=)%h;<Zq5Ix^F2DR$I|Z*meJB-=8YcbFOAQ6vBnp$jFy%IUh-mR-h^fRCzig~
zJlQ*Dd3u_?*l}*E-IR1vhKuC^0i6fZ{eG+C-W*?&M%a3jXuV0a-X!E^(R!2M-@$)%
z(`da({Quu1I(^wqqO@s75aJ;L5}^%*psn9D!`$rYmf5ByroX$_&sl1^1qN*6<GhT4
zd@7OqO$Pi!vwY3EkiD<jAk8w#KCmw>Gm!xwYH5g;vM6oWtU$AGkbSIKA(`AmzX?0+
zd1<jzOGR4Bru2zs!?ne?$aZNqLbGmUyKUYJwAibqky`3OX`g1JH0w#WU$fDg^&&f9
z7fFi-EsfPu4yA*djnnKqWQR1nU$fq1hi!wjIHIKqTIx&bsAdmn){pF%W)n5*Pj=k)
zSWb%*TAHk-0hCT^_Fc{HAv>kn6wU4>J8kDmi!)l9rlmYeXEiI<Y#>>qW)EtXPj=3J
zBrVQs=^-r*rgTBGhcz2Qc2Tn#niY^;vgs>maal{>)6!5%pK11pX7`a@(d_%06_H)F
zvuNR3J8y+qk-Xm{V$9J!#<5-R_kGda3}*H5q~bVt@Q+Piz!i|~@f`)<shMTFt6#j*
z9E)?S?9eKc=`ORgs>}-atbg09CO_cL_Q$O;l?m>8+qB-y&l*Sr8LPOzB;w(8&i5p7
zoIjGuhu;xorT*FtCMo3Ju(g}aba$*xujRzYd5$xT>c@PflqGHB&mc1CvO}}?*dDCe
zPBQ8Ece2I)tXfl+=uY<I-!YRqxxcZ+_2#SgXZ7Z5?q0j3-b_lb<zat;%}@th;BEK-
zw!=q$@;*}?7ucF=-)b;_%jw?Uak_zgvv0?tlAr^01o@fac~}DH9mgr+Y==X+-Ez=u
zXxBiy{jd)X*tv(y{ABs>DIdE>cXFIDFba0~>4(h^UANdSIASuh<YWF8$8i=V^Zf(L
zp-LcM4QpU6ykhH*m^-t2vnkJFFX#?AAoup3kOG|{3%dAON6p3H;0W7^;KCU`4xfXA
zup4&3Hdqhxby~iYKMV4)S-!tN0#l&a7N0Vi$*VZ+KY;v-@+wrpGW)_QGd1fh-H*U&
zH~}Z&44i^va2yW7QJZnvRJ*(VPfnX6x5qt1dGI)tz|Y|)FdOE=Q!odfgrCA){;0F&
z(fADc86?VU_Pv1P{1w)*lJ&3wYT!k9$)31qx_!Nghh2uNa0#x!XYe^(w>g*0l@xjX
z=0hp`3Vsdq;W>ZsWm6CgZKB&oc*B-AnSyxv7IMQjG@0?q_p`Yao`;372p0RpubE#2
zQrvXMxyjsPee&v$vb_W<{1ewrQNXRYIXBIz_-vwX<r(3bB^}r@5QH0?U=v(|MvxyN
z4#O_k10TXxkRLPNfOW7MR>8|q0gGV){1TpqC*V=|0nC7DFcHQ<G|lPa3}Yh?`oOm#
z8!{mSQXmm-_&IKPPaxEvMg9mL^HYN1%z#^I^Af^Qx6v+22tVO2@Y^MZ8w0Lyn?vEu
z?9uEv2F8NC-N(ZOm<aM#m$&v1D1hJjquPe223^P2v=2uzh7sKdg)kXL!cZszsYzbu
zpJ*R02*ww){h*%{32!v6=bujvk9piLToT?J3XQDf-OG5!W><zYOD9x@p&hjMCsZb-
zcJ>$6CVeG0w7psW5AuGu)y+wHJa7KF=A_)XP_8S#KJcSTX<xSk+y))}zHa2&>QL_5
z$gNs;|L(Ps+XH4!b!^^gW5m`pCw2B`S4UO{-66K7CQ@29a#I_-?zPA?cSu>@rp$_U
zkvfSg{uHTev4=m>j~tH+6>f}mddkn+7?~O{TWe!;r%pS+QyZBc2=%Fp#nWt$y2$>2
E0nRMoPyhe`

delta 5420
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

diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
index 0309a0408..135b61742 100644
--- a/packages/embeds/js/package.json
+++ b/packages/embeds/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.3.70",
+  "version": "0.3.71",
   "description": "Javascript library to display typebots on your website",
   "license": "FSL-1.1-ALv2",
   "type": "module",
@@ -19,7 +19,6 @@
     "@ark-ui/solid": "5.0.0",
     "@fix-webm-duration/fix": "1.0.1",
     "@stripe/stripe-js": "1.54.1",
-    "clsx": "2.1.1",
     "dompurify": "3.0.6",
     "ky": "1.2.4",
     "marked": "9.0.3",
diff --git a/packages/embeds/js/src/assets/index.css b/packages/embeds/js/src/assets/index.css
index 3b86cd251..542d4c6d3 100644
--- a/packages/embeds/js/src/assets/index.css
+++ b/packages/embeds/js/src/assets/index.css
@@ -130,13 +130,11 @@ 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),
     var(--typebot-chat-container-opacity)
   );
   color: rgb(var(--typebot-chat-container-color));
-  min-height: 100%;
   backdrop-filter: blur(var(--typebot-chat-container-blur));
   border-width: var(--typebot-chat-container-border-width);
   border-color: rgba(
diff --git a/packages/embeds/js/src/components/Button.tsx b/packages/embeds/js/src/components/Button.tsx
index b0bd52d41..bb15a9183 100644
--- a/packages/embeds/js/src/components/Button.tsx
+++ b/packages/embeds/js/src/components/Button.tsx
@@ -1,4 +1,4 @@
-import clsx from "clsx";
+import { cx } from "@typebot.io/ui/lib/cva";
 import { type JSX, Show, children, splitProps } from "solid-js";
 import { Spinner } from "./Spinner";
 
@@ -25,7 +25,7 @@ export const Button = (props: ButtonProps) => {
     <button
       {...buttonProps}
       disabled={local.isDisabled || local.isLoading}
-      class={clsx(
+      class={cx(
         "py-2 px-4 font-semibold focus:outline-none filter hover:brightness-90 active:brightness-75 disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 flex justify-center flex-shrink-0 transition-[filter] duration-200",
         local.variant === "secondary"
           ? "secondary-button bg-host-bubble-bg text-host-bubble-text rounded-host-bubble border-host-bubble border-host-bubble-border"
diff --git a/packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx b/packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx
index 7fe24773f..b104f959d 100644
--- a/packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx
+++ b/packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx
@@ -37,7 +37,11 @@ import { isNotDefined } from "@typebot.io/lib/utils";
 import type { LogInSession } from "@typebot.io/logs/schemas";
 import { latestTypebotVersion } from "@typebot.io/schemas/versions";
 import { defaultSystemMessages } from "@typebot.io/settings/constants";
-import { BackgroundType } from "@typebot.io/theme/constants";
+import {
+  BackgroundType,
+  defaultContainerBackgroundColor,
+} from "@typebot.io/theme/constants";
+import { cx } from "@typebot.io/ui/lib/cva";
 import {
   For,
   Show,
@@ -540,61 +544,69 @@ export const ConversationContainer = (props: Props) => {
   return (
     <div
       ref={chatContainer}
-      class="flex flex-col overflow-y-auto w-full relative scrollable-container typebot-chat-view scroll-smooth gap-2"
+      class={cx(
+        "flex flex-col overflow-y-auto relative scrollable-container typebot-chat-view scroll-smooth gap-2 w-full min-h-full items-center",
+        (props.initialChatReply.typebot.theme.chat?.container
+          ?.backgroundColor ?? defaultContainerBackgroundColor) ===
+          "transparent" && "max-w-chat-container",
+      )}
     >
-      <For each={chatChunks().slice(0, totalChunksDisplayed() + 1)}>
-        {(chatChunk, index) => (
-          <ChatChunk
-            index={index()}
-            messages={chatChunk.messages}
-            input={chatChunk.input}
+      <div class="max-w-chat-container w-full">
+        <For each={chatChunks().slice(0, totalChunksDisplayed() + 1)}>
+          {(chatChunk, index) => (
+            <ChatChunk
+              index={index()}
+              messages={chatChunk.messages}
+              input={chatChunk.input}
+              theme={props.initialChatReply.typebot.theme}
+              avatarsHistory={avatarsHistory()}
+              settings={props.initialChatReply.typebot.settings}
+              streamingMessageId={chatChunk.streamingMessageId}
+              context={props.context}
+              hideAvatar={
+                (!chatChunk.input ||
+                  hiddenInput()[`${chatChunk.input.id}-${index()}`]) &&
+                ((
+                  chatChunks().slice(0, totalChunksDisplayed() + 1)[index() + 1]
+                    ?.messages ?? []
+                ).length > 0 ||
+                  chatChunks().slice(0, totalChunksDisplayed() + 1)[index() + 1]
+                    ?.streamingMessageId !== undefined ||
+                  (chatChunk.messages.length > 0 && isSending()))
+              }
+              hasError={
+                hasError() &&
+                index() ===
+                  chatChunks().slice(0, totalChunksDisplayed() + 1).length - 1
+              }
+              isTransitionDisabled={
+                index() !==
+                chatChunks().slice(0, totalChunksDisplayed() + 1).length - 1
+              }
+              isOngoingLastChunk={
+                !isEnded() &&
+                index() ===
+                  chatChunks().slice(0, totalChunksDisplayed() + 1).length - 1
+              }
+              onNewBubbleDisplayed={handleNewBubbleDisplayed}
+              onAllBubblesDisplayed={handleAllBubblesDisplayed}
+              onSubmit={sendMessage}
+              onScrollToBottom={autoScrollToBottom}
+              onSkip={handleSkip}
+            />
+          )}
+        </For>
+        <Show when={isSending()}>
+          <LoadingChunk
             theme={props.initialChatReply.typebot.theme}
-            avatarsHistory={avatarsHistory()}
-            settings={props.initialChatReply.typebot.settings}
-            streamingMessageId={chatChunk.streamingMessageId}
-            context={props.context}
-            hideAvatar={
-              (!chatChunk.input ||
-                hiddenInput()[`${chatChunk.input.id}-${index()}`]) &&
-              ((
-                chatChunks().slice(0, totalChunksDisplayed() + 1)[index() + 1]
-                  ?.messages ?? []
-              ).length > 0 ||
-                chatChunks().slice(0, totalChunksDisplayed() + 1)[index() + 1]
-                  ?.streamingMessageId !== undefined ||
-                (chatChunk.messages.length > 0 && isSending()))
+            avatarSrc={
+              avatarsHistory().findLast((avatar) => avatar.role === "host")
+                ?.avatarUrl
             }
-            hasError={
-              hasError() &&
-              index() ===
-                chatChunks().slice(0, totalChunksDisplayed() + 1).length - 1
-            }
-            isTransitionDisabled={
-              index() !==
-              chatChunks().slice(0, totalChunksDisplayed() + 1).length - 1
-            }
-            isOngoingLastChunk={
-              !isEnded() &&
-              index() ===
-                chatChunks().slice(0, totalChunksDisplayed() + 1).length - 1
-            }
-            onNewBubbleDisplayed={handleNewBubbleDisplayed}
-            onAllBubblesDisplayed={handleAllBubblesDisplayed}
-            onSubmit={sendMessage}
-            onScrollToBottom={autoScrollToBottom}
-            onSkip={handleSkip}
           />
-        )}
-      </For>
-      <Show when={isSending()}>
-        <LoadingChunk
-          theme={props.initialChatReply.typebot.theme}
-          avatarSrc={
-            avatarsHistory().findLast((avatar) => avatar.role === "host")
-              ?.avatarUrl
-          }
-        />
-      </Show>
+        </Show>
+      </div>
+
       <BottomSpacer />
     </div>
   );
diff --git a/packages/embeds/js/src/components/SendButton.tsx b/packages/embeds/js/src/components/SendButton.tsx
index 9d0f66597..63509ef3f 100644
--- a/packages/embeds/js/src/components/SendButton.tsx
+++ b/packages/embeds/js/src/components/SendButton.tsx
@@ -1,6 +1,6 @@
 import { isMobile } from "@/utils/isMobileSignal";
 import { isEmpty } from "@typebot.io/lib/utils";
-import clsx from "clsx";
+import { cx } from "@typebot.io/ui/lib/cva";
 import { Match, Switch, splitProps } from "solid-js";
 import { Button, type ButtonProps } from "./Button";
 import { SendIcon } from "./icons/SendIcon";
@@ -26,7 +26,7 @@ export const SendButton = (props: SendButtonProps) => {
     <Button
       {...buttonProps}
       type="submit"
-      class={clsx(buttonProps.class, "flex items-center")}
+      class={cx(buttonProps.class, "flex items-center")}
       aria-label={showIcon ? "Send" : undefined}
     >
       <Switch>
diff --git a/packages/embeds/js/src/components/TextInputAddFileButton.tsx b/packages/embeds/js/src/components/TextInputAddFileButton.tsx
index fcb623ac1..ac648d55f 100644
--- a/packages/embeds/js/src/components/TextInputAddFileButton.tsx
+++ b/packages/embeds/js/src/components/TextInputAddFileButton.tsx
@@ -1,6 +1,6 @@
 import { isMobile } from "@/utils/isMobileSignal";
 import { Menu } from "@ark-ui/solid";
-import clsx from "clsx";
+import { cx } from "@typebot.io/ui/lib/cva";
 import { Match, Switch } from "solid-js";
 import { FileIcon } from "./icons/FileIcon";
 import { PaperClipIcon } from "./icons/PaperClipIcon";
@@ -40,7 +40,7 @@ export const TextInputAddFileButton = (props: Props) => {
           <label
             aria-label="Add attachments"
             for="document-upload"
-            class={clsx(
+            class={cx(
               "filter data-[state=open]:backdrop-brightness-90 hover:backdrop-brightness-95 transition rounded-md p-2 focus:outline-none",
               props.class,
             )}
@@ -51,7 +51,7 @@ export const TextInputAddFileButton = (props: Props) => {
         <Match when={true}>
           <Menu.Root>
             <Menu.Trigger
-              class={clsx(
+              class={cx(
                 "filter data-[state=open]:backdrop-brightness-90 hover:backdrop-brightness-95 transition rounded-md p-2 focus:outline-none",
                 props.class,
               )}
diff --git a/packages/embeds/js/src/components/bubbles/GuestBubble.tsx b/packages/embeds/js/src/components/bubbles/GuestBubble.tsx
index 0a482b7ee..ea8c239c2 100644
--- a/packages/embeds/js/src/components/bubbles/GuestBubble.tsx
+++ b/packages/embeds/js/src/components/bubbles/GuestBubble.tsx
@@ -12,7 +12,7 @@ import {
 } from "@typebot.io/theme/constants";
 import { isChatContainerLight } from "@typebot.io/theme/helpers/isChatContainerLight";
 import type { Theme } from "@typebot.io/theme/schemas";
-import clsx from "clsx";
+import { cx } from "@typebot.io/ui/lib/cva";
 import { For, Match, Show, Switch, createSignal } from "solid-js";
 import { Modal } from "../Modal";
 import { Avatar } from "../avatars/Avatar";
@@ -73,7 +73,7 @@ const TextGuestBubble = (props: { answer: TextInputSubmitContent }) => {
     <div class="flex flex-col gap-1 items-end">
       <Show when={(props.answer.attachments ?? []).length > 0}>
         <div
-          class={clsx(
+          class={cx(
             "flex gap-1 overflow-auto max-w-[350px]",
             isMobile() ? "flex-wrap justify-end" : "items-center",
           )}
@@ -87,7 +87,7 @@ const TextGuestBubble = (props: { answer: TextInputSubmitContent }) => {
               <img
                 src={attachment.blobUrl ?? attachment.url}
                 alt={`Attached image ${idx() + 1}`}
-                class={clsx(
+                class={cx(
                   "typebot-guest-bubble-image-attachment cursor-pointer",
                   props.answer.attachments!.filter((attachment) =>
                     attachment.type.startsWith("image"),
@@ -101,7 +101,7 @@ const TextGuestBubble = (props: { answer: TextInputSubmitContent }) => {
           </For>
         </div>
         <div
-          class={clsx(
+          class={cx(
             "flex gap-1 overflow-auto max-w-[350px]",
             isMobile() ? "flex-wrap justify-end" : "items-center",
           )}
diff --git a/packages/embeds/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx b/packages/embeds/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx
index 8423579f0..52333acbd 100644
--- a/packages/embeds/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx
+++ b/packages/embeds/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx
@@ -2,7 +2,7 @@ import { TypingBubble } from "@/components/TypingBubble";
 import { isMobile } from "@/utils/isMobileSignal";
 import { defaultAudioBubbleContent } from "@typebot.io/blocks-bubbles/audio/constants";
 import type { AudioBubbleBlock } from "@typebot.io/blocks-bubbles/audio/schema";
-import clsx from "clsx";
+import { cx } from "@typebot.io/ui/lib/cva";
 import { createSignal, onCleanup, onMount } from "solid-js";
 
 type Props = {
@@ -38,7 +38,7 @@ export const AudioBubble = (props: Props) => {
 
   return (
     <div
-      class={clsx(
+      class={cx(
         "flex flex-col",
         props.onTransitionEnd ? "animate-fade-in" : undefined,
       )}
diff --git a/packages/embeds/js/src/features/blocks/bubbles/embed/components/CustomEmbedBubble.tsx b/packages/embeds/js/src/features/blocks/bubbles/embed/components/CustomEmbedBubble.tsx
index c3d5e8c87..a3b0d9790 100644
--- a/packages/embeds/js/src/features/blocks/bubbles/embed/components/CustomEmbedBubble.tsx
+++ b/packages/embeds/js/src/features/blocks/bubbles/embed/components/CustomEmbedBubble.tsx
@@ -4,7 +4,7 @@ import type { InputSubmitContent } from "@/types";
 import { botContainerHeight } from "@/utils/botContainerHeightSignal";
 import { isMobile } from "@/utils/isMobileSignal";
 import type { CustomEmbedBubble as CustomEmbedBubbleProps } from "@typebot.io/bot-engine/schemas/api";
-import clsx from "clsx";
+import { cx } from "@typebot.io/ui/lib/cva";
 import { createSignal, onCleanup, onMount } from "solid-js";
 
 type Props = {
@@ -55,7 +55,7 @@ export const CustomEmbedBubble = (props: Props) => {
 
   return (
     <div
-      class={clsx(
+      class={cx(
         "flex flex-col w-full",
         props.onTransitionEnd ? "animate-fade-in" : undefined,
       )}
@@ -73,7 +73,7 @@ export const CustomEmbedBubble = (props: Props) => {
             {isTyping() && <TypingBubble />}
           </div>
           <div
-            class={clsx(
+            class={cx(
               "p-2 z-20 text-fade-in w-full",
               isTyping() ? "opacity-0" : "opacity-100",
             )}
diff --git a/packages/embeds/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx b/packages/embeds/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx
index 21060cb92..38df7ec22 100644
--- a/packages/embeds/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx
+++ b/packages/embeds/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx
@@ -4,7 +4,7 @@ import { isMobile } from "@/utils/isMobileSignal";
 import { defaultEmbedBubbleContent } from "@typebot.io/blocks-bubbles/embed/constants";
 import type { EmbedBubbleBlock } from "@typebot.io/blocks-bubbles/embed/schema";
 import { isNotEmpty } from "@typebot.io/lib/utils";
-import clsx from "clsx";
+import { cx } from "@typebot.io/ui/lib/cva";
 import { createSignal, onCleanup, onMount } from "solid-js";
 
 type Props = {
@@ -62,7 +62,7 @@ export const EmbedBubble = (props: Props) => {
 
   return (
     <div
-      class={clsx(
+      class={cx(
         "flex flex-col w-full",
         props.onTransitionEnd ? "animate-fade-in" : undefined,
       )}
@@ -80,7 +80,7 @@ export const EmbedBubble = (props: Props) => {
             {isTyping() && <TypingBubble />}
           </div>
           <div
-            class={clsx(
+            class={cx(
               "p-4 z-20 text-fade-in w-full",
               isTyping() ? "opacity-0" : "opacity-100 p-4",
             )}
diff --git a/packages/embeds/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx b/packages/embeds/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx
index 95d4f092c..a60863545 100644
--- a/packages/embeds/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx
+++ b/packages/embeds/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx
@@ -3,7 +3,7 @@ import { TypingBubble } from "@/components/TypingBubble";
 import { isMobile } from "@/utils/isMobileSignal";
 import { defaultImageBubbleContent } from "@typebot.io/blocks-bubbles/image/constants";
 import type { ImageBubbleBlock } from "@typebot.io/blocks-bubbles/image/schema";
-import clsx from "clsx";
+import { cx } from "@typebot.io/ui/lib/cva";
 import { createSignal, onCleanup, onMount } from "solid-js";
 
 type Props = {
@@ -61,7 +61,7 @@ export const ImageBubble = (props: Props) => {
       alt={
         props.content?.clickLink?.alt ?? defaultImageBubbleContent.clickLink.alt
       }
-      class={clsx(
+      class={cx(
         isTyping() ? "opacity-0" : "opacity-100",
         props.onTransitionEnd ? "text-fade-in" : undefined,
         props.content?.url?.endsWith(".svg") ? "w-full" : undefined,
@@ -82,7 +82,7 @@ export const ImageBubble = (props: Props) => {
 
   return (
     <div
-      class={clsx(
+      class={cx(
         "flex flex-col",
         props.onTransitionEnd ? "animate-fade-in" : undefined,
       )}
@@ -103,14 +103,14 @@ export const ImageBubble = (props: Props) => {
             <a
               href={props.content.clickLink.url}
               target="_blank"
-              class={clsx("z-10", isTyping() ? "h-8" : "p-4")}
+              class={cx("z-10", isTyping() ? "h-8" : "p-4")}
               rel="noreferrer"
             >
               {Image}
             </a>
           ) : (
             <figure
-              class={clsx(
+              class={cx(
                 "z-10 cursor-pointer",
                 !isTyping() && "p-4",
                 isTyping() ? (isMobile() ? "h-8" : "h-9") : "",
diff --git a/packages/embeds/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx b/packages/embeds/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx
index 0c942b500..3dbe99bef 100644
--- a/packages/embeds/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx
+++ b/packages/embeds/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx
@@ -3,7 +3,7 @@ import { isMobile } from "@/utils/isMobileSignal";
 import type { TextBubbleBlock } from "@typebot.io/blocks-bubbles/text/schema";
 import { computeTypingDuration } from "@typebot.io/settings/computeTypingDuration";
 import type { Settings } from "@typebot.io/settings/schemas";
-import clsx from "clsx";
+import { cx } from "@typebot.io/ui/lib/cva";
 import { For, createSignal, onCleanup, onMount } from "solid-js";
 import { computePlainText } from "../helpers/convertRichTextToPlainText";
 import { PlateElement } from "./plate/PlateBlock";
@@ -54,7 +54,7 @@ export const TextBubble = (props: Props) => {
 
   return (
     <div
-      class={clsx(
+      class={cx(
         "flex flex-col",
         props.onTransitionEnd ? "animate-fade-in" : undefined,
       )}
@@ -73,7 +73,7 @@ export const TextBubble = (props: Props) => {
             {isTyping() && <TypingBubble />}
           </div>
           <div
-            class={clsx(
+            class={cx(
               "overflow-hidden text-fade-in mx-4 my-2 whitespace-pre-wrap slate-html-container relative text-ellipsis",
               isTyping() ? "opacity-0" : "opacity-100",
             )}
diff --git a/packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx b/packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx
index b8a5efd8e..911b9443e 100644
--- a/packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx
+++ b/packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx
@@ -11,7 +11,7 @@ import type {
   EmbeddableVideoBubbleContentType,
   VideoBubbleBlock,
 } from "@typebot.io/blocks-bubbles/video/schema";
-import { clsx } from "clsx";
+import { cx } from "@typebot.io/ui/lib/cva";
 import { Match, Switch, createSignal, onCleanup, onMount } from "solid-js";
 
 type Props = {
@@ -51,7 +51,7 @@ export const VideoBubble = (props: Props) => {
 
   return (
     <div
-      class={clsx(
+      class={cx(
         "flex flex-col w-full",
         props.onTransitionEnd ? "animate-fade-in" : undefined,
       )}
@@ -111,7 +111,7 @@ export const VideoBubble = (props: Props) => {
               }
             >
               <div
-                class={clsx(
+                class={cx(
                   "p-4 z-10 text-fade-in w-full",
                   isTyping() ? "opacity-0" : "opacity-100 p-4",
                 )}
diff --git a/packages/embeds/js/src/features/blocks/inputs/date/components/DateForm.tsx b/packages/embeds/js/src/features/blocks/inputs/date/components/DateForm.tsx
index 811f559bb..fa291cd2d 100644
--- a/packages/embeds/js/src/features/blocks/inputs/date/components/DateForm.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/date/components/DateForm.tsx
@@ -2,7 +2,7 @@ import { SendButton } from "@/components/SendButton";
 import type { InputSubmitContent } from "@/types";
 import { defaultDateInputOptions } from "@typebot.io/blocks-inputs/date/constants";
 import type { DateInputBlock } from "@typebot.io/blocks-inputs/date/schema";
-import clsx from "clsx";
+import { cx } from "@typebot.io/ui/lib/cva";
 import { createSignal } from "solid-js";
 
 type Props = {
@@ -29,7 +29,7 @@ export const DateForm = (props: Props) => {
   return (
     <div class="typebot-input-form flex gap-2 items-end">
       <form
-        class={clsx(
+        class={cx(
           "flex typebot-input",
           props.options?.isRange ? "items-end" : "items-center",
         )}
diff --git a/packages/embeds/js/src/features/blocks/inputs/fileUpload/components/FilePreview.tsx b/packages/embeds/js/src/features/blocks/inputs/fileUpload/components/FilePreview.tsx
index b564ee1f1..b9895b2b2 100644
--- a/packages/embeds/js/src/features/blocks/inputs/fileUpload/components/FilePreview.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/fileUpload/components/FilePreview.tsx
@@ -1,5 +1,5 @@
 import { FileIcon } from "@/components/icons/FileIcon";
-import clsx from "clsx";
+import { cx } from "@typebot.io/ui/lib/cva";
 
 type Props = {
   file: { name: string };
@@ -15,7 +15,7 @@ export const FilePreview = (props: Props) => {
       }
     >
       <div
-        class={clsx(
+        class={cx(
           "rounded-md text-white p-2 flex items-center",
           fileColor === "pink" && "bg-pink-400",
           fileColor === "blue" && "bg-blue-400",
diff --git a/packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx b/packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx
index 483bf1572..3720c98e6 100644
--- a/packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx
@@ -14,7 +14,7 @@ import { defaultTextInputOptions } from "@typebot.io/blocks-inputs/text/constant
 import type { TextInputBlock } from "@typebot.io/blocks-inputs/text/schema";
 import { getRuntimeVariable } from "@typebot.io/env/getRuntimeVariable";
 import { isDefined } from "@typebot.io/lib/utils";
-import clsx from "clsx";
+import { cx } from "@typebot.io/ui/lib/cva";
 import {
   For,
   Match,
@@ -252,7 +252,7 @@ export const TextInput = (props: Props) => {
 
   return (
     <div
-      class={clsx(
+      class={cx(
         "typebot-input-form flex w-full gap-2 items-end",
         props.block.options?.isLong && recordingStatus() !== "started"
           ? "max-w-full"
@@ -264,7 +264,7 @@ export const TextInput = (props: Props) => {
       onDragLeave={handleDragLeave}
     >
       <div
-        class={clsx(
+        class={cx(
           "relative typebot-input flex-col w-full",
           isDraggingOver() && "filter brightness-95",
         )}
@@ -302,7 +302,7 @@ export const TextInput = (props: Props) => {
             </div>
           </Show>
           <div
-            class={clsx(
+            class={cx(
               "flex justify-between px-2",
               props.block.options?.isLong ? "items-end" : "items-center",
             )}
@@ -338,7 +338,7 @@ export const TextInput = (props: Props) => {
             >
               <TextInputAddFileButton
                 onNewFiles={onNewFiles}
-                class={clsx(props.block.options?.isLong ? "ml-2" : undefined)}
+                class={cx(props.block.options?.isLong ? "ml-2" : undefined)}
               />
             </Show>
           </div>
diff --git a/packages/embeds/js/src/features/blocks/inputs/textInput/components/VoiceRecorder.tsx b/packages/embeds/js/src/features/blocks/inputs/textInput/components/VoiceRecorder.tsx
index 8bcc9587b..457e79d7a 100644
--- a/packages/embeds/js/src/features/blocks/inputs/textInput/components/VoiceRecorder.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/textInput/components/VoiceRecorder.tsx
@@ -4,7 +4,7 @@ import { hexToRgb } from "@typebot.io/lib/hexToRgb";
 import { isTypebotVersionAtLeastV6 } from "@typebot.io/schemas/helpers/isTypebotVersionAtLeastV6";
 import { defaultButtonsBackgroundColor } from "@typebot.io/theme/constants";
 import type { Theme } from "@typebot.io/theme/schemas";
-import clsx from "clsx";
+import { cx } from "@typebot.io/ui/lib/cva";
 import { createEffect, createSignal, onCleanup } from "solid-js";
 import { volumeProcessorCode } from "./VolumeProcessor";
 
@@ -159,7 +159,7 @@ export const VoiceRecorder = (props: Props) => {
 
   return (
     <div
-      class={clsx(
+      class={cx(
         "w-full gap-2 items-center transition-opacity px-2 typebot-recorder",
         props.recordingStatus === "started"
           ? "opacity-1 flex"
diff --git a/packages/embeds/js/src/features/bubble/components/Bubble.tsx b/packages/embeds/js/src/features/bubble/components/Bubble.tsx
index 3608966ae..b68fcb097 100644
--- a/packages/embeds/js/src/features/bubble/components/Bubble.tsx
+++ b/packages/embeds/js/src/features/bubble/components/Bubble.tsx
@@ -9,8 +9,8 @@ import {
 } from "@/utils/storage";
 import { EnvironmentProvider } from "@ark-ui/solid";
 import { isDefined, isNotDefined } from "@typebot.io/lib/utils";
+import { cx } from "@typebot.io/ui/lib/cva";
 import { zendeskWebWidgetOpenedMessage } from "@typebot.io/zendesk-block/constants";
-import clsx from "clsx";
 import {
   Show,
   createEffect,
@@ -188,7 +188,7 @@ export const Bubble = (props: BubbleProps) => {
         <style>{styles}</style>
         <div ref={progressBarContainerRef} />
         <div
-          class={clsx(
+          class={cx(
             bubbleProps.theme?.position !== "static"
               ? bubbleProps.theme?.placement === "left"
                 ? "z-[424242] fixed bottom-5 left-5"
@@ -233,7 +233,7 @@ export const Bubble = (props: BubbleProps) => {
               "background-color":
                 bubbleProps.theme?.chatWindow?.backgroundColor,
             }}
-            class={clsx(
+            class={cx(
               "absolute rounded-lg w-screen bottom-[calc(100%+12px)]",
               isBotOpened() ? "opacity-1" : "opacity-0 pointer-events-none",
               bubbleProps.theme?.placement === "left"
diff --git a/packages/embeds/js/src/features/bubble/components/BubbleButton.tsx b/packages/embeds/js/src/features/bubble/components/BubbleButton.tsx
index 933fd04f7..3f72574ab 100644
--- a/packages/embeds/js/src/features/bubble/components/BubbleButton.tsx
+++ b/packages/embeds/js/src/features/bubble/components/BubbleButton.tsx
@@ -1,7 +1,7 @@
 import { isLight } from "@typebot.io/lib/hexToRgb";
 import { isNotDefined, isSvgSrc } from "@typebot.io/lib/utils";
 import { colors } from "@typebot.io/ui/colors";
-import { clsx } from "clsx";
+import { cx } from "@typebot.io/ui/lib/cva";
 import { Match, Switch } from "solid-js";
 import type { BubbleTheme, ButtonTheme } from "../types";
 
@@ -21,7 +21,7 @@ export const BubbleButton = (props: Props) => (
   <button
     part="button"
     onClick={() => props.toggleBot()}
-    class={clsx(
+    class={cx(
       "relative shadow-md rounded-2xl hover:scale-110 active:scale-95 transition-transform duration-200 flex justify-center items-center animate-fade-in",
     )}
     style={{
@@ -47,7 +47,7 @@ const OpenIcon = (props: Props) => (
       <svg
         part="button-icon"
         viewBox="0 0 16 16"
-        class={clsx(
+        class={cx(
           "fill-transparent absolute duration-200 transition size-6",
           props.isBotOpened ? "scale-0 opacity-0" : "scale-100 opacity-100",
         )}
@@ -62,7 +62,7 @@ const OpenIcon = (props: Props) => (
       <img
         part="button-icon"
         src={props.customIconSrc}
-        class={clsx(
+        class={cx(
           "duration-200 transition",
           props.isBotOpened ? "scale-0 opacity-0" : "scale-100 opacity-100",
           isSvgSrc(props.customIconSrc) ? "w-[60%]" : "w-full h-full",
@@ -74,7 +74,7 @@ const OpenIcon = (props: Props) => (
     <Match when={props.customIconSrc && !isImageSrc(props.customIconSrc)}>
       <span
         part="button-icon"
-        class={clsx(
+        class={cx(
           "text-4xl duration-200 transition",
           props.isBotOpened ? "scale-0 opacity-0" : "scale-100 opacity-100",
         )}
@@ -98,7 +98,7 @@ const CloseIcon = (props: Props) => (
         style={{
           fill: defaultLightIconColor,
         }}
-        class={clsx(
+        class={cx(
           "absolute duration-200 transition w-[60%]",
           props.isBotOpened
             ? "scale-100 rotate-0 opacity-100"
@@ -118,7 +118,7 @@ const CloseIcon = (props: Props) => (
       <img
         part="button-icon"
         src={props.customCloseIconSrc}
-        class={clsx(
+        class={cx(
           "absolute duration-200 transition",
           props.isBotOpened
             ? "scale-100 rotate-0 opacity-100"
@@ -134,7 +134,7 @@ const CloseIcon = (props: Props) => (
     >
       <span
         part="button-icon"
-        class={clsx(
+        class={cx(
           "absolute text-4xl duration-200 transition",
           props.isBotOpened
             ? "scale-100 rotate-0 opacity-100"
diff --git a/packages/embeds/js/src/features/bubble/components/PreviewMessage.tsx b/packages/embeds/js/src/features/bubble/components/PreviewMessage.tsx
index c276b0f7d..e922347a6 100644
--- a/packages/embeds/js/src/features/bubble/components/PreviewMessage.tsx
+++ b/packages/embeds/js/src/features/bubble/components/PreviewMessage.tsx
@@ -1,4 +1,4 @@
-import clsx from "clsx";
+import { cx } from "@typebot.io/ui/lib/cva";
 import { Show, createSignal } from "solid-js";
 import type {
   BubbleTheme,
@@ -50,7 +50,7 @@ export const PreviewMessage = (props: PreviewMessageProps) => {
     <div
       part="preview-message"
       onClick={() => props.onClick()}
-      class={clsx(
+      class={cx(
         "absolute bottom-[calc(100%+12px)] w-64 rounded-md duration-200 flex items-center gap-4 shadow-md animate-fade-in cursor-pointer hover:shadow-lg p-4",
         props.placement === "left" ? "left-0" : "right-0",
       )}
diff --git a/packages/embeds/js/src/utils/scrollContainer.ts b/packages/embeds/js/src/utils/scrollContainer.ts
new file mode 100644
index 000000000..5d219187e
--- /dev/null
+++ b/packages/embeds/js/src/utils/scrollContainer.ts
@@ -0,0 +1,4 @@
+import { createSignal } from "solid-js";
+
+export const [scrollContainer, setScrollContainer] =
+  createSignal<HTMLDivElement>();
diff --git a/packages/embeds/js/tailwind.config.js b/packages/embeds/js/tailwind.config.js
index 882920c9d..6b32a775a 100644
--- a/packages/embeds/js/tailwind.config.js
+++ b/packages/embeds/js/tailwind.config.js
@@ -56,6 +56,9 @@ const config = {
         "rgba(var(--typebot-input-border-rgb), var(--typebot-input-border-opacity));",
     },
     extend: {
+      maxWidth: {
+        "chat-container": "var(--typebot-chat-container-max-width)",
+      },
       blur: {
         button: "var(--typebot-button-blur)",
         "host-bubble": "var(--typebot-host-bubble-blur)",
diff --git a/packages/embeds/nextjs/package.json b/packages/embeds/nextjs/package.json
index 43c90ba8d..ea879fc9f 100644
--- a/packages/embeds/nextjs/package.json
+++ b/packages/embeds/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.3.70",
+  "version": "0.3.71",
   "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
index a38b0e282..948a29e9a 100644
--- a/packages/embeds/react/package.json
+++ b/packages/embeds/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.3.70",
+  "version": "0.3.71",
   "description": "Convenient library to display typebots on your React app",
   "license": "FSL-1.1-ALv2",
   "type": "module",
diff --git a/yarn.lock b/yarn.lock
index 54a94d839..ca281013b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6966,7 +6966,6 @@
     "@typebot.io/zendesk-block" "packages/forge/blocks/zendesk"
     "@types/dompurify" "3.0.3"
     autoprefixer "10.4.20"
-    clsx "2.1.1"
     dompurify "3.0.6"
     esbuild-plugin-solid "^0.6.0"
     ky "1.2.4"
@@ -12015,7 +12014,7 @@ clsx@2.0.0:
   resolved "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz"
   integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
 
-clsx@2.1.1, clsx@^2.0.0, clsx@^2.1.1:
+clsx@^2.0.0, clsx@^2.1.1:
   version "2.1.1"
   resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==