⚗️ Implement bot v2 MVP (#194)

Closes #190

packages/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx

@@ -0,0 +1,69 @@
+import { TypingBubble } from '@/components/bubbles/TypingBubble'
+import { TextBubbleContent, TypingEmulation } from 'models'
+import { createSignal, onMount } from 'solid-js'
+import { computeTypingDuration } from '../utils/computeTypingDuration'
+
+type Props = {
+  content: Pick<TextBubbleContent, 'html' | 'plainText'>
+  onTransitionEnd: () => void
+  typingEmulation?: TypingEmulation
+}
+
+export const showAnimationDuration = 400
+
+const defaultTypingEmulation = {
+  enabled: true,
+  speed: 300,
+  maxDelay: 1.5,
+}
+
+export const TextBubble = (props: Props) => {
+  const [isTyping, setIsTyping] = createSignal(true)
+
+  const onTypingEnd = () => {
+    setIsTyping(false)
+    setTimeout(() => {
+      props.onTransitionEnd()
+    }, showAnimationDuration)
+  }
+
+  onMount(() => {
+    if (!isTyping) return
+    const typingDuration = computeTypingDuration(
+      props.content.plainText,
+      props.typingEmulation ?? defaultTypingEmulation
+    )
+    setTimeout(() => {
+      onTypingEnd()
+    }, typingDuration)
+  })
+
+  return (
+    <div class="flex flex-col animate-fade-in">
+      <div class="flex mb-2 w-full items-center">
+        <div class={'flex relative items-start typebot-host-bubble'}>
+          <div
+            class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing "
+            style={{
+              width: isTyping() ? '4rem' : '100%',
+              height: isTyping() ? '2rem' : '100%',
+            }}
+            data-testid="host-bubble"
+          >
+            {isTyping() && <TypingBubble />}
+          </div>
+          <p
+            style={{
+              'text-overflow': 'ellipsis',
+            }}
+            class={
+              'overflow-hidden text-fade-in mx-4 my-2 whitespace-pre-wrap slate-html-container relative ' +
+              (isTyping() ? 'opacity-0 h-6' : 'opacity-100 h-full')
+            }
+            innerHTML={props.content.html}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}