diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json index 7bc17deaf..056c8f326 100644 --- a/packages/embeds/js/package.json +++ b/packages/embeds/js/package.json @@ -1,6 +1,6 @@ { "name": "@typebot.io/js", - "version": "0.2.56", + "version": "0.2.57", "description": "Javascript library to display typebots on your website", "type": "module", "main": "dist/index.js", diff --git a/packages/embeds/js/src/features/bubble/components/PreviewMessage.tsx b/packages/embeds/js/src/features/bubble/components/PreviewMessage.tsx index ba29d01f3..70e2a63d1 100644 --- a/packages/embeds/js/src/features/bubble/components/PreviewMessage.tsx +++ b/packages/embeds/js/src/features/bubble/components/PreviewMessage.tsx @@ -20,6 +20,27 @@ const defaultTextColor = '#303235' export const PreviewMessage = (props: PreviewMessageProps) => { const [isPreviewMessageHovered, setIsPreviewMessageHovered] = createSignal(false) + const [touchStartPosition, setTouchStartPosition] = createSignal({ + x: 0, + y: 0, + }) + + const handleTouchStart = (e: TouchEvent) => { + setTouchStartPosition({ x: e.touches[0].clientX, y: e.touches[0].clientY }) + } + + const handleTouchEnd = (e: TouchEvent) => { + const x = e.changedTouches[0].clientX + const y = e.changedTouches[0].clientY + + if ( + Math.abs(x - touchStartPosition().x) > 10 || + y - touchStartPosition().y > 10 + ) + props.onCloseClick() + + setTouchStartPosition({ x: 0, y: 0 }) + } return (
{ }} onMouseEnter={() => setIsPreviewMessageHovered(true)} onMouseLeave={() => setIsPreviewMessageHovered(false)} + onTouchStart={handleTouchStart} + onTouchEnd={handleTouchEnd} >