🐛 Fix invalid format for code blocks in streaming bubble

Author: baptisteArno

packages/embeds/js/package.json

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

packages/embeds/js/src/components/bubbles/StreamingBubble.tsx

@@ -2,6 +2,7 @@ import { streamingMessage } from '@/utils/streamingMessageSignal'
 import { For, createEffect, createSignal } from 'solid-js'
 import { marked } from 'marked'
 import domPurify from 'dompurify'
+import { isNotEmpty } from '@typebot.io/lib'
 
 type Props = {
   streamingMessageId: string
@@ -22,12 +23,24 @@ export const StreamingBubble = (props: Props) => {
     if (streamingMessage()?.id !== props.streamingMessageId) return []
     setContent(
       streamingMessage()
-        ?.content.split('\n\n')
-        .map((line) =>
-          domPurify.sanitize(marked.parse(line), {
-            ADD_ATTR: ['target'],
-          })
-        ) ?? []
+        ?.content.split('```')
+        .map((block, index) => {
+          if (index % 2 === 0) {
+            return block.split('\n\n').map((line) =>
+              domPurify.sanitize(marked.parse(line), {
+                ADD_ATTR: ['target'],
+              })
+            )
+          } else {
+            return [
+              domPurify.sanitize(marked.parse('```' + block + '```'), {
+                ADD_ATTR: ['target'],
+              }),
+            ]
+          }
+        })
+        .flat()
+        .filter(isNotEmpty) ?? []
     )
   })
 

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.71",
+  "version": "0.2.72",
   "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.71",
+  "version": "0.2.72",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",