🧑‍💻 Add more convenient classes to typebot elements

Closes #1073

packages/embeds/js/src/components/ConversationContainer/ChatChunk.tsx

@@ -72,7 +72,7 @@ export const ChatChunk = (props: Props) => {
   }
 
   return (
-    <div class="flex flex-col w-full min-w-0 gap-2">
+    <div class="flex flex-col w-full min-w-0 gap-2 typebot-chat-chunk">
       <Show when={props.messages.length > 0}>
         <div class={'flex' + (isMobile() ? ' gap-1' : ' gap-2')}>
           <Show

packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx

@@ -354,11 +354,9 @@ export const ConversationContainer = (props: Props) => {
   )
 }
 
-const BottomSpacer = () => {
-  return (
+const BottomSpacer = () => (
   <div
-      class="w-full flex-shrink-0"
+    class="w-full flex-shrink-0 typebot-bottom-spacer"
     style={{ height: bottomSpacerHeight + 'px' }}
   />
 )
-}

packages/embeds/js/src/components/ConversationContainer/LoadingChunk.tsx

@@ -9,7 +9,7 @@ type Props = {
 }
 
 export const LoadingChunk = (props: Props) => (
-  <div class="flex w-full">
+  <div class="flex w-full typebot-loading-chunk">
     <div class="flex flex-col w-full min-w-0">
       <div class="flex gap-2">
         <Show

packages/embeds/js/src/components/InputChatBlock.tsx

@@ -90,7 +90,7 @@ export const InputChatBlock = (props: Props) => {
       </Match>
       <Match when={isNotDefined(answer()) || props.hasError}>
         <div
-          class="flex justify-end animate-fade-in gap-2"
+          class="flex justify-end animate-fade-in gap-2 typebot-input-container"
           data-blockid={props.block.id}
           ref={props.ref}
         >

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

@@ -45,7 +45,7 @@ export const StreamingBubble = (props: Props) => {
   })
 
   return (
-    <div class="flex flex-col animate-fade-in">
+    <div class="flex flex-col animate-fade-in typebot-streaming-container">
       <div class="flex w-full items-center">
         <div class="flex relative items-start typebot-host-bubble max-w-full">
           <div