From 9bbb30f30d784d9d73bd04c578eef37651033cf0 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Thu, 12 Oct 2023 17:33:23 +0200
Subject: [PATCH] :bug: (textBubble) Fix overflow with long links

Closes #764
---
 packages/embeds/js/package.json               |  2 +-
 .../ConversationContainer/ChatChunk.tsx       | 21 ++++++++++---------
 .../bubbles/audio/components/AudioBubble.tsx  |  2 +-
 .../bubbles/embed/components/EmbedBubble.tsx  |  4 +---
 .../bubbles/image/components/ImageBubble.tsx  |  2 +-
 .../textBubble/components/TextBubble.tsx      |  2 +-
 .../bubbles/video/components/VideoBubble.tsx  |  2 +-
 packages/embeds/nextjs/package.json           |  2 +-
 packages/embeds/react/package.json            |  2 +-
 9 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
index 374d54702..08544393d 100644
--- a/packages/embeds/js/package.json
+++ b/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",
diff --git a/packages/embeds/js/src/components/ConversationContainer/ChatChunk.tsx b/packages/embeds/js/src/components/ConversationContainer/ChatChunk.tsx
index 1715fdbe3..efc9af81e 100644
--- a/packages/embeds/js/src/components/ConversationContainer/ChatChunk.tsx
+++ b/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'
-                  : '48px'
-                : undefined,
+                  ? 'calc(100% - 32px - 32px)'
+                  : 'calc(100% - 48px - 48px)'
+                : 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} />
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 7d54cc236..c283782e8 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
@@ -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={{
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 5e51adcd6..fa330c831 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
@@ -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
-          class={'flex relative z-10 items-start typebot-host-bubble w-full'}
-        >
+        <div class="flex relative z-10 items-start typebot-host-bubble w-full max-w-full">
           <div
             class="flex items-center absolute px-4 py-2 bubble-typing z-10 "
             style={{
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 68628064c..b05041a5a 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
@@ -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={{
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 51a5ea687..e7c4fe827 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
@@ -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={{
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 981b4e66b..939805827 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
@@ -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={{
diff --git a/packages/embeds/nextjs/package.json b/packages/embeds/nextjs/package.json
index 8033c7e8d..33f492d15 100644
--- a/packages/embeds/nextjs/package.json
+++ b/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",
diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
index 68887caf8..846223d12 100644
--- a/packages/embeds/react/package.json
+++ b/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",