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>
+  )
+}
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/GuestBubble.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/GuestBubble.tsx
@@ -0,0 +1,37 @@
+import { Avatar } from 'components/avatars/Avatar'
+import React, { useState } from 'react'
+import { CSSTransition } from 'react-transition-group'
+
+interface Props {
+  message: string
+  showAvatar: boolean
+  avatarSrc?: string
+  onClick: () => void
+}
+
+export const GuestBubble = ({
+  message,
+  showAvatar,
+  avatarSrc,
+  onClick,
+}: Props): JSX.Element => {
+  const [content] = useState(message)
+
+  return (
+    <CSSTransition classNames="bubble" timeout={1000}>
+      <div
+        className="flex justify-end mb-2 items-end"
+        onClick={onClick}
+        style={{ marginLeft: '50px' }}
+      >
+        <span
+          className="px-4 py-2 rounded-lg mr-2 whitespace-pre-wrap max-w-full typebot-guest-bubble cursor-pointer hover:brightness-90 active:brightness-75"
+          data-testid="guest-bubble"
+        >
+          {content}
+        </span>
+        {showAvatar && <Avatar avatarSrc={avatarSrc} />}
+      </div>
+    </CSSTransition>
+  )
+}
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/HostBubble.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/HostBubble.tsx
@@ -0,0 +1,24 @@
+import { BubbleBlock, BubbleBlockType } from 'models'
+import React from 'react'
+import { EmbedBubble } from './EmbedBubble'
+import { ImageBubble } from './ImageBubble'
+import { TextBubble } from './TextBubble'
+import { VideoBubble } from './VideoBubble'
+
+type Props = {
+  block: BubbleBlock
+  onTransitionEnd: () => void
+}
+
+export const HostBubble = ({ block, onTransitionEnd }: Props) => {
+  switch (block.type) {
+    case BubbleBlockType.TEXT:
+      return <TextBubble block={block} onTransitionEnd={onTransitionEnd} />
+    case BubbleBlockType.IMAGE:
+      return <ImageBubble block={block} onTransitionEnd={onTransitionEnd} />
+    case BubbleBlockType.VIDEO:
+      return <VideoBubble block={block} onTransitionEnd={onTransitionEnd} />
+    case BubbleBlockType.EMBED:
+      return <EmbedBubble block={block} onTransitionEnd={onTransitionEnd} />
+  }
+}
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/ImageBubble.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/ImageBubble.tsx
@@ -0,0 +1,83 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { useTypebot } from 'contexts/TypebotContext'
+import { ImageBubbleBlock } from 'models'
+import { TypingContent } from './TypingContent'
+import { parseVariables } from 'services/variable'
+
+type Props = {
+  block: ImageBubbleBlock
+  onTransitionEnd: () => void
+}
+
+export const showAnimationDuration = 400
+
+export const mediaLoadingFallbackTimeout = 5000
+
+export const ImageBubble = ({ block, onTransitionEnd }: Props) => {
+  const { typebot } = useTypebot()
+  const messageContainer = useRef<HTMLDivElement | null>(null)
+  const image = useRef<HTMLImageElement | 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 = () => {
+    if (!image.current) return
+    const timeout = setTimeout(() => {
+      setIsTyping(false)
+      onTypingEnd()
+    }, mediaLoadingFallbackTimeout)
+    image.current.onload = () => {
+      clearTimeout(timeout)
+      setIsTyping(false)
+      onTypingEnd()
+    }
+  }
+
+  const onTypingEnd = () => {
+    setIsTyping(false)
+    setTimeout(() => {
+      onTransitionEnd()
+    }, showAnimationDuration)
+  }
+
+  return (
+    <div className="flex flex-col" 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'}>
+          <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>
+          <img
+            ref={image}
+            src={url}
+            className={
+              'p-4 content-opacity z-10 w-auto ' +
+              (isTyping ? 'opacity-0' : 'opacity-100')
+            }
+            style={{
+              maxHeight: '32rem',
+              height: isTyping ? '2rem' : 'auto',
+              maxWidth: '100%',
+            }}
+            alt="Bubble image"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/TextBubble.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/TextBubble.tsx
@@ -0,0 +1,80 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { useTypebot } from 'contexts/TypebotContext'
+import { BubbleBlockType, TextBubbleBlock } from 'models'
+import { computeTypingTimeout } from 'services/chat'
+import { TypingContent } from './TypingContent'
+import { parseVariables } from 'services/variable'
+
+type Props = {
+  block: TextBubbleBlock
+  onTransitionEnd: () => void
+}
+
+export const showAnimationDuration = 400
+
+const defaultTypingEmulation = {
+  enabled: true,
+  speed: 300,
+  maxDelay: 1.5,
+}
+
+export const TextBubble = ({ block, onTransitionEnd }: Props) => {
+  const { typebot } = useTypebot()
+  const messageContainer = useRef<HTMLDivElement | null>(null)
+  const [isTyping, setIsTyping] = useState(true)
+
+  const [content] = useState(
+    parseVariables(typebot.variables)(block.content.html)
+  )
+
+  useEffect(() => {
+    const typingTimeout = computeTypingTimeout(
+      block.content.plainText,
+      typebot.settings?.typingEmulation ?? defaultTypingEmulation
+    )
+    setTimeout(() => {
+      onTypingEnd()
+    }, typingTimeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const onTypingEnd = () => {
+    setIsTyping(false)
+    setTimeout(() => {
+      onTransitionEnd()
+    }, showAnimationDuration)
+  }
+
+  return (
+    <div className="flex flex-col" ref={messageContainer}>
+      <div className="flex mb-2 w-full items-center">
+        <div className={'flex relative items-start typebot-host-bubble'}>
+          <div
+            className="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 ? <TypingContent /> : <></>}
+          </div>
+          {block.type === BubbleBlockType.TEXT && (
+            <p
+              style={{
+                textOverflow: 'ellipsis',
+              }}
+              className={
+                'overflow-hidden content-opacity mx-4 my-2 whitespace-pre-wrap slate-html-container relative ' +
+                (isTyping ? 'opacity-0 h-6' : 'opacity-100 h-full')
+              }
+              dangerouslySetInnerHTML={{
+                __html: content,
+              }}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/TypingContent.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/TypingContent.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const TypingContent = (): JSX.Element => (
+  <div className="flex items-center">
+    <div className="w-2 h-2 mr-1 rounded-full bubble1" />
+    <div className="w-2 h-2 mr-1 rounded-full bubble2" />
+    <div className="w-2 h-2 rounded-full bubble3" />
+  </div>
+)
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/VideoBubble.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/VideoBubble.tsx
@@ -0,0 +1,124 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { useTypebot } from 'contexts/TypebotContext'
+import {
+  Variable,
+  VideoBubbleContent,
+  VideoBubbleContentType,
+  VideoBubbleBlock,
+} from 'models'
+import { TypingContent } from './TypingContent'
+import { parseVariables } from 'services/variable'
+
+type Props = {
+  block: VideoBubbleBlock
+  onTransitionEnd: () => void
+}
+
+export const showAnimationDuration = 400
+
+export const mediaLoadingFallbackTimeout = 5000
+
+export const VideoBubble = ({ block, onTransitionEnd }: Props) => {
+  const { typebot } = useTypebot()
+  const messageContainer = useRef<HTMLDivElement | null>(null)
+  const [isTyping, setIsTyping] = useState(true)
+
+  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" 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'}>
+          <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>
+          <VideoContent
+            content={block.content}
+            isTyping={isTyping}
+            variables={typebot.variables}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const VideoContent = ({
+  content,
+  isTyping,
+  variables,
+}: {
+  content?: VideoBubbleContent
+  isTyping: boolean
+  variables: Variable[]
+}) => {
+  const url = useMemo(
+    () => parseVariables(variables)(content?.url),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [variables]
+  )
+  if (!content?.type) return <></>
+  switch (content.type) {
+    case VideoBubbleContentType.URL:
+      const isSafariBrowser = window.navigator.vendor.match(/apple/i)
+      return (
+        <video
+          controls
+          className={
+            'p-4 focus:outline-none w-full z-10 content-opacity rounded-md ' +
+            (isTyping ? 'opacity-0' : 'opacity-100')
+          }
+          style={{
+            height: isTyping ? '2rem' : 'auto',
+            maxHeight: isSafariBrowser ? '40vh' : '',
+          }}
+          autoPlay
+        >
+          <source src={url} type="video/mp4" />
+          Sorry, your browser doesn&apos;t support embedded videos.
+        </video>
+      )
+    case VideoBubbleContentType.VIMEO:
+    case VideoBubbleContentType.YOUTUBE: {
+      const baseUrl =
+        content.type === VideoBubbleContentType.VIMEO
+          ? 'https://player.vimeo.com/video'
+          : 'https://www.youtube.com/embed'
+      return (
+        <iframe
+          src={`${baseUrl}/${content.id}`}
+          className={
+            'w-full p-4 content-opacity z-10 rounded-md ' +
+            (isTyping ? 'opacity-0' : 'opacity-100')
+          }
+          height={isTyping ? '2rem' : '200px'}
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        />
+      )
+    }
+  }
+}