refactor: ♻️ Rename step to block

2022-06-11 07:27:38 +02:00
parent 8751766d0e
commit 2df8338505
297 changed files with 4292 additions and 3989 deletions
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/EmbedBubble.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/EmbedBubble.tsx
@ -0,0 +1,76 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { EmbedBubbleBlock } from 'models'
+import { TypingContent } from './TypingContent'
+import { parseVariables } from 'services/variable'
+import { useTypebot } from 'contexts/TypebotContext'
+
+type Props = {
+  block: EmbedBubbleBlock
+  onTransitionEnd: () => void
+}
+
+export const showAnimationDuration = 400
+
+export const EmbedBubble = ({ block, onTransitionEnd }: Props) => {
+  const { typebot } = useTypebot()
+  const messageContainer = useRef<HTMLDivElement | null>(null)
+  const [isTyping, setIsTyping] = useState(true)
+
+  const url = useMemo(
+    () => parseVariables(typebot.variables)(block.content?.url),
+    [block.content?.url, typebot.variables]
+  )
+
+  useEffect(() => {
+    showContentAfterMediaLoad()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const showContentAfterMediaLoad = () => {
+    setTimeout(() => {
+      setIsTyping(false)
+      onTypingEnd()
+    }, 1000)
+  }
+
+  const onTypingEnd = () => {
+    setIsTyping(false)
+    setTimeout(() => {
+      onTransitionEnd()
+    }, showAnimationDuration)
+  }
+
+  return (
+    <div className="flex flex-col w-full" ref={messageContainer}>
+      <div className="flex mb-2 w-full lg:w-11/12 items-center">
+        <div
+          className={
+            'flex relative z-10 items-start typebot-host-bubble w-full'
+          }
+        >
+          <div
+            className="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
+            style={{
+              width: isTyping ? '4rem' : '100%',
+              height: isTyping ? '2rem' : '100%',
+            }}
+          >
+            {isTyping ? <TypingContent /> : <></>}
+          </div>
+          <iframe
+            id="embed-bubble-content"
+            src={url}
+            className={
+              'w-full z-20 p-4 content-opacity ' +
+              (isTyping ? 'opacity-0' : 'opacity-100')
+            }
+            style={{
+              height: isTyping ? '2rem' : block.content.height,
+              borderRadius: '15px',
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}