🐛 (textBubble) Fix overflow with long links

Closes #764

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

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

@@ -69,11 +69,13 @@ export const ChatChunk = (props: Props) => {
           <div
             class="flex flex-col flex-1 gap-2"
             style={{
-              'margin-right': props.theme.chat.guestAvatar?.isEnabled
+              'max-width': props.theme.chat.guestAvatar?.isEnabled
                 ? isMobile()
-                  ? '32px'
+                  ? 'calc(100% - 32px - 32px)'
-                  : '48px'
+                  : 'calc(100% - 48px - 48px)'
-                : undefined,
+                : isMobile()
+                ? 'calc(100% - 32px)'
+                : 'calc(100% - 48px)',
             }}
           >
             <For each={props.messages.slice(0, displayedMessageIndex() + 1)}>
@@ -117,14 +119,13 @@ export const ChatChunk = (props: Props) => {
             <div
               class="flex flex-col flex-1 gap-2"
               style={{
-                'max-width': isMobile()
+                'max-width': props.theme.chat.guestAvatar?.isEnabled
+                  ? isMobile()
+                    ? 'calc(100% - 32px - 32px)'
+                    : 'calc(100% - 48px - 48px)'
+                  : isMobile()
                   ? 'calc(100% - 32px)'
                   : 'calc(100% - 48px)',
-                'margin-right': props.theme.chat.guestAvatar?.isEnabled
-                  ? isMobile()
-                    ? '32px'
-                    : '48px'
-                  : undefined,
               }}
             >
               <StreamingBubble streamingMessageId={streamingMessageId} />

packages/embeds/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx

@@ -38,7 +38,7 @@ export const AudioBubble = (props: Props) => {
   return (
     <div class="flex flex-col animate-fade-in" ref={ref}>
       <div class="flex w-full items-center">
-        <div class={'flex relative z-10 items-start typebot-host-bubble'}>
+        <div class="flex relative z-10 items-start typebot-host-bubble max-w-full">
           <div
             class="flex items-center absolute px-4 py-2 bubble-typing z-10 "
             style={{

packages/embeds/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx

@@ -33,9 +33,7 @@ export const EmbedBubble = (props: Props) => {
   return (
     <div class="flex flex-col w-full animate-fade-in" ref={ref}>
       <div class="flex w-full items-center">
-        <div
+        <div class="flex relative z-10 items-start typebot-host-bubble w-full max-w-full">
-          class={'flex relative z-10 items-start typebot-host-bubble w-full'}
-        >
           <div
             class="flex items-center absolute px-4 py-2 bubble-typing z-10 "
             style={{

packages/embeds/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx

@@ -61,7 +61,7 @@ export const ImageBubble = (props: Props) => {
   return (
     <div class="flex flex-col animate-fade-in" ref={ref}>
       <div class="flex w-full items-center">
-        <div class={'flex relative z-10 items-start typebot-host-bubble'}>
+        <div class="flex relative z-10 items-start typebot-host-bubble max-w-full">
           <div
             class="flex items-center absolute px-4 py-2 bubble-typing z-10 "
             style={{

packages/embeds/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx

@@ -49,7 +49,7 @@ export const TextBubble = (props: Props) => {
   return (
     <div class="flex flex-col animate-fade-in" ref={ref}>
       <div class="flex w-full items-center">
-        <div class="flex relative items-start typebot-host-bubble">
+        <div class="flex relative items-start typebot-host-bubble max-w-full">
           <div
             class="flex items-center absolute px-4 py-2 bubble-typing "
             style={{

packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx

@@ -41,7 +41,7 @@ export const VideoBubble = (props: Props) => {
   return (
     <div class="flex flex-col w-full animate-fade-in" ref={ref}>
       <div class="flex w-full items-center">
-        <div class="flex relative z-10 items-start typebot-host-bubble overflow-hidden w-full">
+        <div class="flex relative z-10 items-start typebot-host-bubble overflow-hidden w-full max-w-full">
           <div
             class="flex items-center absolute px-4 py-2 bubble-typing z-10 "
             style={{

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",