blsmedia/bot
2
0
Fork 0
Code Activity

fix(bot-engine): 🩹 Avatar scroll on media bubbles

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-02-16 10:18:09 +01:00
parent b1916e4f9c
commit 1d3917f440
3 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -74,6 +74,7 @@ export const ChatBlock = ({
} }
const displayNextStep = (answerContent?: string, isRetry?: boolean) => { const displayNextStep = (answerContent?: string, isRetry?: boolean) => {
onScroll()
const currentStep = [...displayedSteps].pop() const currentStep = [...displayedSteps].pop()
if (currentStep) { if (currentStep) {
if (isRetry && stepCanBeRetried(currentStep)) if (isRetry && stepCanBeRetried(currentStep))

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

@@ -27,6 +27,7 @@ export const ImageBubble = ({ step, onTransitionEnd }: Props) => {
) )
useEffect(() => { useEffect(() => {
sendAvatarOffset()
showContentAfterMediaLoad() showContentAfterMediaLoad()
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []) }, [])
@@ -55,7 +56,9 @@ export const ImageBubble = ({ step, onTransitionEnd }: Props) => {
const sendAvatarOffset = () => { const sendAvatarOffset = () => {
if (!messageContainer.current) return if (!messageContainer.current) return
const containerDimensions = messageContainer.current.getBoundingClientRect() const containerDimensions = messageContainer.current.getBoundingClientRect()
updateLastAvatarOffset(containerDimensions.top + containerDimensions.height) updateLastAvatarOffset(
messageContainer.current.offsetTop + containerDimensions.height
)
} }
return ( return (

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

@@ -26,6 +26,7 @@ export const VideoBubble = ({ step, onTransitionEnd }: Props) => {
const [isTyping, setIsTyping] = useState(true) const [isTyping, setIsTyping] = useState(true)
useEffect(() => { useEffect(() => {
sendAvatarOffset()
showContentAfterMediaLoad() showContentAfterMediaLoad()
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []) }, [])
@@ -48,7 +49,9 @@ export const VideoBubble = ({ step, onTransitionEnd }: Props) => {
const sendAvatarOffset = () => { const sendAvatarOffset = () => {
if (!messageContainer.current) return if (!messageContainer.current) return
const containerDimensions = messageContainer.current.getBoundingClientRect() const containerDimensions = messageContainer.current.getBoundingClientRect()
updateLastAvatarOffset(containerDimensions.top + containerDimensions.height) updateLastAvatarOffset(
messageContainer.current.offsetTop + containerDimensions.height
)
} }
return ( return (