fix(typebot-js): 🐛 Open iframe on proactive message click

.github/workflows/publish-lib-to-npm.yml

@@ -1,9 +1,8 @@
 name: Publish package to NPM
 
 on:
-  push:
-    tags:
-      - 'js-lib-v*.*.*'
+  create:
+    tags: ['js-lib-v*']
 
 jobs:
   publish:

packages/typebot-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "typebot-js",
-  "version": "2.2.8",
+  "version": "2.2.9",
   "main": "dist/index.js",
   "unpkg": "dist/index.umd.min.js",
   "license": "AGPL-3.0-or-later",

packages/typebot-js/src/embedTypes/chat/index.ts

@@ -77,8 +77,9 @@ const onProactiveMessageClick = (
   bubble: HTMLDivElement,
   iframe: HTMLIFrameElement
 ): void => {
-  loadTypebotIfFirstOpen(iframe)
-  bubble.classList.add('iframe-opened')
+  iframe.style.display === 'none'
+    ? openIframe(bubble, iframe)
+    : closeIframe(bubble, iframe)
   bubble.classList.remove('message-opened')
 }
 

packages/typebot-js/tests/chat/proactiveMessage.spec.ts

@@ -75,3 +75,22 @@ it('show after the corresponding delay', async () => {
   await new Promise((r) => setTimeout(r, 1000))
   expect(bubble.classList.contains('message-opened')).toBe(true)
 })
+
+it('show the chat on click', async () => {
+  expect.assertions(3)
+  Typebot.initBubble({
+    proactiveMessage: {
+      textContent: 'Hi click here!',
+      delay: 1000,
+    },
+    url: 'https://typebot.io/typebot-id',
+  })
+  const bubble = document.querySelector('#typebot-bubble') as HTMLDivElement
+  const iframe = document.querySelector('.typebot-iframe') as HTMLIFrameElement
+  expect(bubble.classList.contains('message-opened')).toBe(false)
+  await new Promise((r) => setTimeout(r, 1000))
+  expect(bubble.classList.contains('message-opened')).toBe(true)
+  const message = document.querySelector('.proactive-message') as HTMLDivElement
+  message.click()
+  expect(iframe.style.display).not.toBe('none')
+})