⚗️ Implement bot v2 MVP (#194)

Closes #190

packages/js/src/components/bubbles/GuestBubble.tsx

@@ -0,0 +1,26 @@
+import { Show } from 'solid-js'
+import { isDefined } from 'utils'
+import { Avatar } from '../avatars/Avatar'
+
+type Props = {
+  message: string
+  showAvatar: boolean
+  avatarSrc?: string
+}
+
+export const GuestBubble = (props: Props) => (
+  <div
+    class="flex justify-end mb-2 items-end animate-fade-in"
+    style={{ 'margin-left': '50px' }}
+  >
+    <span
+      class="px-4 py-2 rounded-lg mr-2 whitespace-pre-wrap max-w-full typebot-guest-bubble cursor-pointer"
+      data-testid="guest-bubble"
+    >
+      {props.message}
+    </span>
+    <Show when={isDefined(props.avatarSrc)}>
+      <Avatar avatarSrc={props.avatarSrc} />
+    </Show>
+  </div>
+)

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

@@ -0,0 +1,61 @@
+import { AudioBubble } from '@/features/blocks/bubbles/audio'
+import { EmbedBubble } from '@/features/blocks/bubbles/embed'
+import { ImageBubble } from '@/features/blocks/bubbles/image'
+import { TextBubble } from '@/features/blocks/bubbles/textBubble'
+import { VideoBubble } from '@/features/blocks/bubbles/video'
+import {
+  AudioBubbleContent,
+  BubbleBlockType,
+  ChatMessage,
+  EmbedBubbleContent,
+  ImageBubbleContent,
+  TextBubbleContent,
+  VideoBubbleContent,
+} from 'models'
+import { Match, Switch } from 'solid-js'
+
+type Props = {
+  message: ChatMessage
+  onTransitionEnd: () => void
+}
+
+export const HostBubble = (props: Props) => {
+  const onTransitionEnd = () => {
+    props.onTransitionEnd()
+  }
+
+  return (
+    <Switch>
+      <Match when={props.message.type === BubbleBlockType.TEXT}>
+        <TextBubble
+          content={props.message.content as Omit<TextBubbleContent, 'richText'>}
+          onTransitionEnd={onTransitionEnd}
+        />
+      </Match>
+      <Match when={props.message.type === BubbleBlockType.IMAGE}>
+        <ImageBubble
+          url={(props.message.content as ImageBubbleContent).url}
+          onTransitionEnd={onTransitionEnd}
+        />
+      </Match>
+      <Match when={props.message.type === BubbleBlockType.VIDEO}>
+        <VideoBubble
+          content={props.message.content as VideoBubbleContent}
+          onTransitionEnd={onTransitionEnd}
+        />
+      </Match>
+      <Match when={props.message.type === BubbleBlockType.EMBED}>
+        <EmbedBubble
+          content={props.message.content as EmbedBubbleContent}
+          onTransitionEnd={onTransitionEnd}
+        />
+      </Match>
+      <Match when={props.message.type === BubbleBlockType.AUDIO}>
+        <AudioBubble
+          url={(props.message.content as AudioBubbleContent).url}
+          onTransitionEnd={onTransitionEnd}
+        />
+      </Match>
+    </Switch>
+  )
+}

packages/js/src/components/bubbles/TypingBubble.tsx

@@ -0,0 +1,7 @@
+export const TypingBubble = () => (
+  <div class="flex items-center">
+    <div class="w-2 h-2 mr-1 rounded-full bubble1" />
+    <div class="w-2 h-2 mr-1 rounded-full bubble2" />
+    <div class="w-2 h-2 rounded-full bubble3" />
+  </div>
+)