🐛 (stream) Fix target attribute being trimmed on message stream

baptisteArno · Dec 13, 2023 · bf626bb · bf626bb · vercel · Dec 13, 2023
1 parent fbddddc
commit bf626bb
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 9 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.27",
+  "version": "0.2.28",
   "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
@@ -21,7 +21,9 @@ export const StreamingBubble = (props: Props) => {
   createEffect(() => {
     if (streamingMessage()?.id === props.streamingMessageId)
       setContent(
-        domPurify.sanitize(marked.parse(streamingMessage()?.content ?? ''))
+        domPurify.sanitize(marked.parse(streamingMessage()?.content ?? ''), {
+          ADD_ATTR: ['target'],
+        })
       )
   })
 

diff --git a/packages/embeds/js/src/features/bubble/components/Bubble.tsx b/packages/embeds/js/src/features/bubble/components/Bubble.tsx
@@ -159,7 +159,10 @@ export const Bubble = (props: BubbleProps) => {
       <div
         part="bot"
         style={{
-          height: 'calc(100% - 80px)',
+          height:
+            props.theme?.button?.size === 'large'
+              ? 'calc(100% - 95px)'
+              : 'calc(100% - 80px)',
           'max-height': props.theme?.chatWindow?.maxHeight ?? '704px',
           'max-width': props.theme?.chatWindow?.maxWidth ?? '400px',
           transition:
@@ -177,7 +180,7 @@ export const Bubble = (props: BubbleProps) => {
           (props.theme?.button?.size === 'large'
             ? ' bottom-24'
             : ' bottom-20') +
-          (props.theme?.placement === 'left' ? ' sm:left-5' : ' sm:right-5')
+          (props.theme?.placement === 'left' ? ' left-5' : ' right-5')
         }
       >
         <Show when={isBotStarted()}>

diff --git a/packages/embeds/js/src/window.ts b/packages/embeds/js/src/window.ts
@@ -24,13 +24,13 @@ export const initStandard = (props: BotProps & { id?: string }) => {
 export const initPopup = (props: PopupProps) => {
   const popupElement = document.createElement('typebot-popup')
   Object.assign(popupElement, props)
-  document.body.appendChild(popupElement)
+  document.body.prepend(popupElement)
 }
 
 export const initBubble = (props: BubbleProps) => {
   const bubbleElement = document.createElement('typebot-bubble')
   Object.assign(bubbleElement, props)
-  document.body.appendChild(bubbleElement)
+  document.body.prepend(bubbleElement)
 }
 
 type Typebot = {

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.27",
+  "version": "0.2.28",
   "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.27",
+  "version": "0.2.28",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/packages/embeds/react/src/Bubble.tsx b/packages/embeds/react/src/Bubble.tsx
@@ -26,7 +26,7 @@ export const Bubble = (props: Props) => {
     ) as BubbleElement
     bubbleElement.current = newBubbleElement
     injectPropsToElement(bubbleElement.current, props)
-    document.body.append(bubbleElement.current)
+    document.body.prepend(bubbleElement.current)
   }, [])
 
   useEffect(() => {