✨ Introducing The Forge (#1072)

The Forge allows anyone to easily create their own Typebot Block.

Closes #380

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

@@ -15,6 +15,7 @@ import immutableCss from '../assets/immutable.css'
 import { InputBlock } from '@typebot.io/schemas'
 import { StartFrom } from '@typebot.io/schemas'
 import { defaultTheme } from '@typebot.io/schemas/features/typebot/theme/constants'
+import { clsx } from 'clsx'
 
 export type BotProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -213,10 +214,10 @@ const BotContent = (props: BotContentProps) => {
   return (
     <div
       ref={botContainer}
-      class={
-        'relative flex w-full h-full text-base overflow-hidden bg-cover bg-center flex-col items-center typebot-container ' +
+      class={clsx(
+        'relative flex w-full h-full text-base overflow-hidden bg-cover bg-center flex-col items-center typebot-container @container',
         props.class
-      }
+      )}
     >
       <div class="flex w-full h-full justify-center">
         <ConversationContainer

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

@@ -19,7 +19,7 @@ type Props = Pick<ContinueChatResponse, 'messages' | 'input'> & {
   streamingMessageId: ChatChunkType['streamingMessageId']
   onNewBubbleDisplayed: (blockId: string) => Promise<void>
   onScrollToBottom: (top?: number) => void
-  onSubmit: (input: string) => void
+  onSubmit: (input?: string) => void
   onSkip: () => void
   onAllBubblesDisplayed: () => void
 }
@@ -91,6 +91,7 @@ export const ChatChunk = (props: Props) => {
                   message={message}
                   typingEmulation={props.settings.typingEmulation}
                   onTransitionEnd={displayNextMessage}
+                  onCompleted={props.onSubmit}
                 />
               )}
             </For>

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

@@ -1,11 +1,13 @@
 import { AudioBubble } from '@/features/blocks/bubbles/audio'
 import { EmbedBubble } from '@/features/blocks/bubbles/embed'
+import { CustomEmbedBubble } from '@/features/blocks/bubbles/embed/components/CustomEmbedBubble'
 import { ImageBubble } from '@/features/blocks/bubbles/image'
 import { TextBubble } from '@/features/blocks/bubbles/textBubble'
 import { VideoBubble } from '@/features/blocks/bubbles/video'
 import type {
   AudioBubbleBlock,
   ChatMessage,
+  CustomEmbedBubble as CustomEmbedBubbleProps,
   EmbedBubbleBlock,
   ImageBubbleBlock,
   Settings,
@@ -19,6 +21,7 @@ type Props = {
   message: ChatMessage
   typingEmulation: Settings['typingEmulation']
   onTransitionEnd: (offsetTop?: number) => void
+  onCompleted: (reply?: string) => void
 }
 
 export const HostBubble = (props: Props) => {
@@ -26,6 +29,10 @@ export const HostBubble = (props: Props) => {
     props.onTransitionEnd(offsetTop)
   }
 
+  const onCompleted = (reply?: string) => {
+    props.onCompleted(reply)
+  }
+
   return (
     <Switch>
       <Match when={props.message.type === BubbleBlockType.TEXT}>
@@ -53,6 +60,13 @@ export const HostBubble = (props: Props) => {
           onTransitionEnd={onTransitionEnd}
         />
       </Match>
+      <Match when={props.message.type === 'custom-embed'}>
+        <CustomEmbedBubble
+          content={props.message.content as CustomEmbedBubbleProps['content']}
+          onTransitionEnd={onTransitionEnd}
+          onCompleted={onCompleted}
+        />
+      </Match>
       <Match when={props.message.type === BubbleBlockType.AUDIO}>
         <AudioBubble
           content={props.message.content as AudioBubbleBlock['content']}