💄 Better parsing of lists and code in streaming bubbles

baptisteArno · Oct 6, 2023 · 877a58d · 877a58d · vercel · Oct 6, 2023
1 parent 4746e38
commit 877a58d
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 8 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.2.1",
+  "version": "0.2.2",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

diff --git a/packages/embeds/js/src/assets/index.css b/packages/embeds/js/src/assets/index.css
@@ -100,10 +100,9 @@ a {
 
 ul,
 ol {
-  list-style-position: inside;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  padding-inline-start: 40px;
 }
 
 ol {
@@ -114,6 +113,19 @@ ul {
   list-style-type: disc;
 }
 
+li:not(:last-child) {
+  margin-bottom: 8px;
+}
+
+pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  max-height: 100%;
+  max-width: 100%;
+  overflow: auto;
+}
+
 .slate-bold {
   font-weight: bold;
 }

diff --git a/packages/embeds/js/src/components/ConversationContainer/ChatChunk.tsx b/packages/embeds/js/src/components/ConversationContainer/ChatChunk.tsx
@@ -117,6 +117,7 @@ export const ChatChunk = (props: Props) => {
             <div
               class="flex flex-col flex-1 gap-2"
               style={{
+                width: isMobile() ? 'calc(100% - 32px)' : 'calc(100% - 48px)',
                 'margin-right': props.theme.chat.guestAvatar?.isEnabled
                   ? isMobile()
                     ? '32px'

diff --git a/packages/embeds/js/src/components/bubbles/StreamingBubble.tsx b/packages/embeds/js/src/components/bubbles/StreamingBubble.tsx
@@ -28,7 +28,7 @@ export const StreamingBubble = (props: Props) => {
   return (
     <div class="flex flex-col animate-fade-in">
       <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 w-full">
           <div
             class="flex items-center absolute px-4 py-2 bubble-typing "
             style={{

diff --git a/packages/embeds/nextjs/package.json b/packages/embeds/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "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
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",