blsmedia/bot
2
0
Fork 0
Code Activity

feat(bot): ⚡️ Improve first paint delay

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-06-12 07:57:35 +02:00
parent 4fd5d452a3
commit aeaaa5c398
13 changed files with 42 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/viewer/layouts/TypebotPage.tsx
View File

@ -3,7 +3,7 @@ import { Answer, PublicTypebot, VariableWithValue } from 'models'
import { useRouter } from 'next/router'
import React, { useEffect, useState } from 'react'
import { upsertAnswer } from 'services/answer'
import { isDefined } from 'utils'
import { isDefined, isNotDefined } from 'utils'
import { SEO } from '../components/Seo'
import { createResult, updateResult } from '../services/result'
import { ErrorPage } from './ErrorPage'
@ -34,6 +34,7 @@ export const TypebotPage = ({
const [resultId, setResultId] = useState<string | undefined>()
useEffect(() => {
setShowTypebot(true)
const urlParams = new URLSearchParams(location.search)
clearQueryParams()
const predefinedVariables: { [key: string]: string } = {}
@ -68,7 +69,6 @@ export const TypebotPage = ({
setResultInSession(result.id)
}
}
setShowTypebot(true)
}
const handleNewVariables = async (variables: VariableWithValue[]) => {
@ -108,6 +108,7 @@ export const TypebotPage = ({
onNewAnswer={handleNewAnswer}
onCompleted={handleCompleted}
onVariablesUpdated={handleNewVariables}
isLoading={isNotDefined(resultId)}
/>
)}
</div>

2
packages/bot-engine/package.json
View File

@ -10,7 +10,7 @@
"db": "*",
"models": "*",
"qs": "^6.10.3",
"react-frame-component": "5.2.2-alpha.1",
"react-frame-component": "5.2.3",
"react-phone-number-input": "^3.1.52",
"react-scroll": "^1.8.7",
"react-transition-group": "^4.4.2",

1
packages/bot-engine/src/components/ChatGroup/AvatarSideContainer.tsx
View File

@ -33,6 +33,7 @@ export const AvatarSideContainer = forwardRef(
}))
useEffect(() => {
if (!document) return
setShow(true)
const resizeObserver = new ResizeObserver(refreshTopOffset)
resizeObserver.observe(document.body)

5
packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/EmbedBubble.tsx
View File

@ -12,7 +12,7 @@ type Props = {
export const showAnimationDuration = 400
export const EmbedBubble = ({ block, onTransitionEnd }: Props) => {
const { typebot } = useTypebot()
const { typebot, isLoading } = useTypebot()
const messageContainer = useRef<HTMLDivElement | null>(null)
const [isTyping, setIsTyping] = useState(true)
@ -22,9 +22,10 @@ export const EmbedBubble = ({ block, onTransitionEnd }: Props) => {
)
useEffect(() => {
if (!isTyping || isLoading) return
showContentAfterMediaLoad()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
}, [isLoading])
const showContentAfterMediaLoad = () => {
setTimeout(() => {

5
packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/ImageBubble.tsx
View File

@ -14,7 +14,7 @@ export const showAnimationDuration = 400
export const mediaLoadingFallbackTimeout = 5000
export const ImageBubble = ({ block, onTransitionEnd }: Props) => {
const { typebot } = useTypebot()
const { typebot, isLoading } = useTypebot()
const messageContainer = useRef<HTMLDivElement | null>(null)
const image = useRef<HTMLImageElement | null>(null)
const [isTyping, setIsTyping] = useState(true)
@ -25,9 +25,10 @@ export const ImageBubble = ({ block, onTransitionEnd }: Props) => {
)
useEffect(() => {
if (!isTyping || isLoading) return
showContentAfterMediaLoad()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
}, [isLoading])
const showContentAfterMediaLoad = () => {
if (!image.current) return

5
packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/TextBubble.tsx
View File

@ -19,7 +19,7 @@ const defaultTypingEmulation = {
}
export const TextBubble = ({ block, onTransitionEnd }: Props) => {
const { typebot } = useTypebot()
const { typebot, isLoading } = useTypebot()
const messageContainer = useRef<HTMLDivElement | null>(null)
const [isTyping, setIsTyping] = useState(true)
@ -28,6 +28,7 @@ export const TextBubble = ({ block, onTransitionEnd }: Props) => {
)
useEffect(() => {
if (!isTyping || isLoading) return
const typingTimeout = computeTypingTimeout(
block.content.plainText,
typebot.settings?.typingEmulation ?? defaultTypingEmulation
@ -36,7 +37,7 @@ export const TextBubble = ({ block, onTransitionEnd }: Props) => {
onTypingEnd()
}, typingTimeout)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
}, [isLoading])
const onTypingEnd = () => {
setIsTyping(false)

5
packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/VideoBubble.tsx
View File

@ -19,14 +19,15 @@ export const showAnimationDuration = 400
export const mediaLoadingFallbackTimeout = 5000
export const VideoBubble = ({ block, onTransitionEnd }: Props) => {
const { typebot } = useTypebot()
const { typebot, isLoading } = useTypebot()
const messageContainer = useRef<HTMLDivElement | null>(null)
const [isTyping, setIsTyping] = useState(true)
useEffect(() => {
if (!isTyping || isLoading) return
showContentAfterMediaLoad()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
}, [isLoading])
const showContentAfterMediaLoad = () => {
setTimeout(() => {

2
packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/PaymentForm/StripePaymentForm.tsx
View File

@ -42,7 +42,7 @@ export const StripePaymentForm = ({ options, onSuccess }: Props) => {
description: error.name + ' ' + error.message,
details: error.message,
})
if (!data) return
if (!data || !frameDocument || !frameWindow?.Stripe) return
await initStripe(frameDocument)
setStripe(frameWindow.Stripe(data.publicKey))
setClientSecret(data.clientSecret)

18
packages/bot-engine/src/components/ConversationContainer.tsx
View File

@ -5,7 +5,7 @@ import { useFrame } from 'react-frame-component'
import { setCssVariablesValue } from '../services/theme'
import { useAnswers } from '../contexts/AnswersContext'
import { Group, Edge, PublicTypebot, Theme, VariableWithValue } from 'models'
import { byId, isNotDefined } from 'utils'
import { byId, isDefined, isNotDefined } from 'utils'
import { animateScroll as scroll } from 'react-scroll'
import { LinkedTypebot, useTypebot } from 'contexts/TypebotContext'
import { ChatContext } from 'contexts/ChatContext'
@ -83,8 +83,13 @@ export const ConversationContainer = ({
}
useEffect(() => {
const prefilledVariables = injectPredefinedVariables(predefinedVariables)
updateVariables(prefilledVariables)
if (
isDefined(predefinedVariables) &&
Object.keys(predefinedVariables).length > 0
) {
const prefilledVariables = injectPredefinedVariables(predefinedVariables)
updateVariables(prefilledVariables)
}
displayNextGroup({
edgeId: startGroupId
? undefined
@ -92,13 +97,13 @@ export const ConversationContainer = ({
groupId: startGroupId,
})
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
}, [predefinedVariables])
const injectPredefinedVariables = (predefinedVariables?: {
const injectPredefinedVariables = (predefinedVariables: {
[key: string]: string | undefined
}) => {
const prefilledVariables: VariableWithValue[] = []
Object.keys(predefinedVariables ?? {}).forEach((key) => {
Object.keys(predefinedVariables).forEach((key) => {
const matchingVariable = typebot.variables.find(
(v) => v.name.toLowerCase() === key.toLowerCase()
)
@ -112,6 +117,7 @@ export const ConversationContainer = ({
}
useEffect(() => {
if (!frameDocument) return
setCssVariablesValue(theme, frameDocument.body.style)
}, [theme, frameDocument])

1
packages/bot-engine/src/components/LiteBadge.tsx
View File

@ -6,6 +6,7 @@ export const LiteBadge = () => {
const liteBadge = useRef<HTMLAnchorElement | null>(null)
useEffect(() => {
if (!document) return
const container = document.querySelector(
'[data-testid="container"]'
) as HTMLDivElement

3
packages/bot-engine/src/components/TypebotViewer.tsx
View File

@ -31,6 +31,7 @@ export type TypebotViewerProps = {
predefinedVariables?: { [key: string]: string | undefined }
resultId?: string
startGroupId?: string
isLoading?: boolean
onNewGroupVisible?: (edge: Edge) => void
onNewAnswer?: (answer: Answer) => Promise<void>
onNewLog?: (log: Omit<Log, 'id' | 'createdAt' | 'resultId'>) => void
@ -42,6 +43,7 @@ export const TypebotViewer = ({
typebot,
apiHost = process.env.NEXT_PUBLIC_VIEWER_URL?.split(',')[0],
isPreview = false,
isLoading = false,
style,
resultId,
startGroupId,
@ -98,6 +100,7 @@ export const TypebotViewer = ({
apiHost={apiHost}
isPreview={isPreview}
onNewLog={handleNewLog}
isLoading={isLoading}
>
<AnswersContext
resultId={resultId}

4
packages/bot-engine/src/contexts/TypebotContext.tsx
View File

@ -25,6 +25,7 @@ const typebotContext = createContext<{
apiHost: string
isPreview: boolean
linkedBotQueue: LinkedTypebotQueue
isLoading: boolean
setCurrentTypebotId: (id: string) => void
updateVariableValue: (variableId: string, value: string) => void
createEdge: (edge: Edge) => void
@ -44,11 +45,13 @@ export const TypebotContext = ({
typebot,
apiHost,
isPreview,
isLoading,
onNewLog,
}: {
children: ReactNode
typebot: PublicTypebot
apiHost: string
isLoading: boolean
isPreview: boolean
onNewLog: (log: Omit<Log, 'id' | 'createdAt' | 'resultId'>) => void
}) => {
@ -123,6 +126,7 @@ export const TypebotContext = ({
injectLinkedTypebot,
onNewLog,
linkedBotQueue,
isLoading,
pushEdgeIdInLinkedTypebotQueue,
popEdgeIdFromLinkedTypebotQueue,
currentTypebotId,

8
yarn.lock
View File

@ -12440,10 +12440,10 @@ react-focus-lock@2.5.2:
use-callback-ref "^1.2.5"
use-sidecar "^1.0.5"
react-frame-component@5.2.2-alpha.1:
version "5.2.2-alpha.1"
resolved "https://registry.yarnpkg.com/react-frame-component/-/react-frame-component-5.2.2-alpha.1.tgz#fcfec38e0670ea78b3e9b6d00ef7a18613b3b089"
integrity sha512-pCXLlBDO8+yh4qbax8M2U+Cl+5tFxyZ0p6HzD0MP+P47u3ZK4fPiOzWQIOi7Eand4tq6nawKZC+vsSHC2KT1Zg==
react-frame-component@5.2.3:
version "5.2.3"
resolved "https://registry.yarnpkg.com/react-frame-component/-/react-frame-component-5.2.3.tgz#2d5d1e29b23d5b915c839b44980d03bb9cafc453"
integrity sha512-r+h0o3r/uqOLNT724z4CRVkxQouKJvoi3OPfjqWACD30Y87rtEmeJrNZf1WYPGknn1Y8200HAjx7hY/dPUGgmA==
react-helmet-async@*, react-helmet-async@^1.2.3, react-helmet-async@^1.3.0:
version "1.3.0"