From db6d2582fcf00384e726024e8ea8fbf76ae883ec Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
Date: Fri, 12 Apr 2024 15:23:08 +0200
Subject: [PATCH] :bug: Fix invalid format for code blocks in streaming bubble

---
 packages/embeds/js/package.json               |  2 +-
 .../components/bubbles/StreamingBubble.tsx    | 25 ++++++++++++++-----
 packages/embeds/nextjs/package.json           |  2 +-
 packages/embeds/react/package.json            |  2 +-
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
index ab522c68c..d86a2c01c 100644
--- a/packages/embeds/js/package.json
+++ b/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",
diff --git a/packages/embeds/js/src/components/bubbles/StreamingBubble.tsx b/packages/embeds/js/src/components/bubbles/StreamingBubble.tsx
index 383f62987..6eb66c494 100644
--- a/packages/embeds/js/src/components/bubbles/StreamingBubble.tsx
+++ b/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) ?? []
     )
   })
 
diff --git a/packages/embeds/nextjs/package.json b/packages/embeds/nextjs/package.json
index 3f5e0412c..cfa935d6d 100644
--- a/packages/embeds/nextjs/package.json
+++ b/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",
diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
index 3e4e6f251..0d64cfdb3 100644
--- a/packages/embeds/react/package.json
+++ b/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",