🚸 (bot) Keep bubble content in local state for each bubble
This commit is contained in:
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { useTypebot } from '@/providers/TypebotProvider'
|
||||
import { AudioBubbleContent } from 'models'
|
||||
import { TypingBubble } from '@/components/TypingBubble'
|
||||
@ -16,11 +16,7 @@ export const AudioBubble = ({ url, onTransitionEnd }: Props) => {
|
||||
const { typebot, isLoading } = useTypebot()
|
||||
const audio = useRef<HTMLAudioElement | null>(null)
|
||||
const [isTyping, setIsTyping] = useState(true)
|
||||
|
||||
const parsedUrl = useMemo(
|
||||
() => parseVariables(typebot.variables)(url),
|
||||
[url, typebot.variables]
|
||||
)
|
||||
const [parsedUrl] = useState(parseVariables(typebot.variables)(url))
|
||||
|
||||
useEffect(() => {
|
||||
if (!isTyping || isLoading) return
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { EmbedBubbleBlock } from 'models'
|
||||
import { TypingBubble } from '../../../../../components/TypingBubble'
|
||||
import { parseVariables } from '@/features/variables'
|
||||
@ -15,11 +15,7 @@ export const EmbedBubble = ({ block, onTransitionEnd }: Props) => {
|
||||
const { typebot, isLoading } = 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]
|
||||
)
|
||||
const [url] = useState(parseVariables(typebot.variables)(block.content?.url))
|
||||
|
||||
const onTypingEnd = useCallback(() => {
|
||||
setIsTyping(false)
|
||||
|
@ -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 { ImageBubbleBlock } from 'models'
|
||||
import { TypingBubble } from '@/components/TypingBubble'
|
||||
@ -18,11 +18,7 @@ export const ImageBubble = ({ block, onTransitionEnd }: Props) => {
|
||||
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]
|
||||
)
|
||||
const [url] = useState(parseVariables(typebot.variables)(block.content?.url))
|
||||
|
||||
const onTypingEnd = useCallback(() => {
|
||||
setIsTyping(false)
|
||||
|
@ -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 {
|
||||
Variable,
|
||||
@ -75,12 +75,10 @@ const VideoContent = ({
|
||||
isTyping: boolean
|
||||
variables: Variable[]
|
||||
}) => {
|
||||
const url = useMemo(
|
||||
() => parseVariables(variables)(content?.url),
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[variables]
|
||||
)
|
||||
const [url] = useState(parseVariables(variables)(content?.url))
|
||||
|
||||
if (!content?.type) return <></>
|
||||
|
||||
switch (content.type) {
|
||||
case VideoBubbleContentType.URL: {
|
||||
const isSafariBrowser = window.navigator.vendor.match(/apple/i)
|
||||
|
Reference in New Issue
Block a user