blsmedia/bot
2
0
Fork 0
Code Activity

🚸 (bot) Keep bubble content in local state for each bubble

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-02-14 15:40:37 +01:00
parent c35ba58fae
commit 97e2578bcc
4 changed files with 10 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/bot-engine/src/features/blocks/bubbles/audio/components/AudioBubble.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useMemo, useRef, useState } from 'react' import { useEffect, useRef, useState } from 'react'
import { useTypebot } from '@/providers/TypebotProvider' import { useTypebot } from '@/providers/TypebotProvider'
import { AudioBubbleContent } from 'models' import { AudioBubbleContent } from 'models'
import { TypingBubble } from '@/components/TypingBubble' import { TypingBubble } from '@/components/TypingBubble'
@ -16,11 +16,7 @@ export const AudioBubble = ({ url, onTransitionEnd }: Props) => {
const { typebot, isLoading } = useTypebot() const { typebot, isLoading } = useTypebot()
const audio = useRef<HTMLAudioElement | null>(null) const audio = useRef<HTMLAudioElement | null>(null)
const [isTyping, setIsTyping] = useState(true) const [isTyping, setIsTyping] = useState(true)
const [parsedUrl] = useState(parseVariables(typebot.variables)(url))
const parsedUrl = useMemo(
() => parseVariables(typebot.variables)(url),
[url, typebot.variables]
)
useEffect(() => { useEffect(() => {
if (!isTyping || isLoading) return if (!isTyping || isLoading) return

8
packages/bot-engine/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx
View File

@ -1,4 +1,4 @@
import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { useCallback, useEffect, useRef, useState } from 'react'
import { EmbedBubbleBlock } from 'models' import { EmbedBubbleBlock } from 'models'
import { TypingBubble } from '../../../../../components/TypingBubble' import { TypingBubble } from '../../../../../components/TypingBubble'
import { parseVariables } from '@/features/variables' import { parseVariables } from '@/features/variables'
@ -15,11 +15,7 @@ export const EmbedBubble = ({ block, onTransitionEnd }: Props) => {
const { typebot, isLoading } = useTypebot() const { typebot, isLoading } = useTypebot()
const messageContainer = useRef<HTMLDivElement | null>(null) const messageContainer = useRef<HTMLDivElement | null>(null)
const [isTyping, setIsTyping] = useState(true) const [isTyping, setIsTyping] = useState(true)
const [url] = useState(parseVariables(typebot.variables)(block.content?.url))
const url = useMemo(
() => parseVariables(typebot.variables)(block.content?.url),
[block.content?.url, typebot.variables]
)
const onTypingEnd = useCallback(() => { const onTypingEnd = useCallback(() => {
setIsTyping(false) setIsTyping(false)

8
packages/bot-engine/src/features/blocks/bubbles/image/components/ImageBubble.tsx
View File

@ -1,4 +1,4 @@
import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { useCallback, useEffect, useRef, useState } from 'react'
import { useTypebot } from '@/providers/TypebotProvider' import { useTypebot } from '@/providers/TypebotProvider'
import { ImageBubbleBlock } from 'models' import { ImageBubbleBlock } from 'models'
import { TypingBubble } from '@/components/TypingBubble' import { TypingBubble } from '@/components/TypingBubble'
@ -18,11 +18,7 @@ export const ImageBubble = ({ block, onTransitionEnd }: Props) => {
const messageContainer = useRef<HTMLDivElement | null>(null) const messageContainer = useRef<HTMLDivElement | null>(null)
const image = useRef<HTMLImageElement | null>(null) const image = useRef<HTMLImageElement | null>(null)
const [isTyping, setIsTyping] = useState(true) const [isTyping, setIsTyping] = useState(true)
const [url] = useState(parseVariables(typebot.variables)(block.content?.url))
const url = useMemo(
() => parseVariables(typebot.variables)(block.content?.url),
[block.content?.url, typebot.variables]
)
const onTypingEnd = useCallback(() => { const onTypingEnd = useCallback(() => {
setIsTyping(false) setIsTyping(false)

10
packages/bot-engine/src/features/blocks/bubbles/video/components/VideoBubble.tsx
View File

@ -1,4 +1,4 @@
import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { useCallback, useEffect, useRef, useState } from 'react'
import { useTypebot } from '@/providers/TypebotProvider' import { useTypebot } from '@/providers/TypebotProvider'
import { import {
Variable, Variable,
@ -75,12 +75,10 @@ const VideoContent = ({
isTyping: boolean isTyping: boolean
variables: Variable[] variables: Variable[]
}) => { }) => {
const url = useMemo( const [url] = useState(parseVariables(variables)(content?.url))
() => parseVariables(variables)(content?.url),
// eslint-disable-next-line react-hooks/exhaustive-deps
[variables]
)
if (!content?.type) return <></> if (!content?.type) return <></>
switch (content.type) { switch (content.type) {
case VideoBubbleContentType.URL: { case VideoBubbleContentType.URL: {
const isSafariBrowser = window.navigator.vendor.match(/apple/i) const isSafariBrowser = window.navigator.vendor.match(/apple/i)