Fix after testing

src/components/chat/ChatIframe.module.sass

@@ -1,5 +1,5 @@
 @import 'src/styles/subsocial-vars.scss'
-  
+
 .ChatIframe
   transition: opacity 150ms ease-out
   opacity: 1
@@ -8,13 +8,15 @@
     opacity: 0
 
 .ButtonWrapper
-  display: flex
-  align-items: center
-  gap: $space_tiny
-  align-items: center
   margin: 0 19px 0 0
   padding: 12px 0
 
+  button
+    display: flex
+    align-items: center
+    gap: $space_tiny
+    align-items: center
+
 .ChatButton
   height: auto
   position: relative

src/components/chat/ChatLinkButtonWithCounter.tsx

@@ -4,6 +4,7 @@ import clsx from 'clsx'
 import { useEffect, useState } from 'react'
 import { useSetChatEntityConfig, useSetChatOpen } from 'src/rtk/app/hooks'
 import { useAppSelector } from 'src/rtk/app/store'
+import { useSendEvent } from 'src/stores/analytics'
 import { getUnreadCount } from './ChatFloatingModal'
 import styles from './ChatIframe.module.sass'
 
@@ -14,6 +15,7 @@ type ChatLinkButtonWithCounterProps = {
 const ChatLinkButtonWithCounter = ({ post }: ChatLinkButtonWithCounterProps) => {
   const setChatConfig = useSetChatEntityConfig()
   const setChatOpen = useSetChatOpen()
+  const sendEvent = useSendEvent()
 
   const entity = useAppSelector(state => state.chat.entity)
 
@@ -37,13 +39,15 @@ const ChatLinkButtonWithCounter = ({ post }: ChatLinkButtonWithCounterProps) =>
             withFloatingButton: false,
           })
           setChatOpen(true)
+
+          sendEvent('open_chat_clicked', { eventSource: 'profile_page' })
         }}
         type='link'
         className={styles.ChatButton}
       >
         Chat
+        <div className={clsx(styles.ChatUnreadCount)}>{unreadCount ? unreadCount : 'New'}</div>
       </Button>
-      {!!unreadCount && <div className={clsx(styles.ChatUnreadCount)}>{unreadCount}</div>}
     </span>
   )
 }

src/components/chat/CreateChatModal.tsx

@@ -1,7 +1,7 @@
-import { Button } from 'antd'
+import { Button, ButtonProps } from 'antd'
 import { useRouter } from 'next/router'
-import { useEffect, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
+import { useEffect, useState } from 'react'
+import { useSendEvent } from 'src/stores/analytics'
 import { getCurrentUrlOrigin } from 'src/utils/url'
 
 function parseMessage(data: string) {
@@ -15,74 +15,120 @@ function parseMessage(data: string) {
   return { name: name ?? '', value: value ?? '' }
 }
 
-type CreateChatModalButtonProps = {
+type CreateChatModalButtonProps = ButtonProps & {
   size?: 'small' | 'middle' | 'large'
   spaceId: string
 }
 
-const CreateChatModalButton = ({ size, spaceId }: CreateChatModalButtonProps) => {
-  const iframeRef = useRef<HTMLIFrameElement | null>(null)
-  const [openModal, setOpenModal] = useState(false)
+const CreateChatModalButton = ({ size, spaceId, ...props }: CreateChatModalButtonProps) => {
+  const [createModalIframe, setCreateModalIframe] = useState<HTMLIFrameElement | null>(null)
+
   const router = useRouter()
 
+  const sendEvent = useSendEvent()
+
+  const closeModal = (iframe: HTMLIFrameElement | null) => {
+    if (iframe) {
+      iframe.style.opacity = '0'
+      iframe.style.pointerEvents = 'none'
+    }
+  }
+
+  const listener = (event: MessageEvent, iframe: HTMLIFrameElement) => {
+    const message = parseMessage(event.data + '')
+
+    if (!message) return
+
+    const { name, value } = message
+
+    if (name === 'create-chat' && value === 'close') {
+      closeModal(iframe)
+    } else if (name === 'redirect') {
+      closeModal(iframe)
+      router.push(value)
+    } else if (name === 'redirect-hard') {
+      closeModal(iframe)
+      // Using router push for redirect don't redirect properly, it just have loading for a bit and changes the url much later
+      window.location.href = value
+    }
+  }
+
   useEffect(() => {
-    window.onmessage = event => {
-      const message = parseMessage(event.data + '')
-
-      if (!message) return
-
-      const { name, value } = message
-      if (name === 'create-chat' && value === 'close') {
-        setOpenModal(false)
-      } else if (name === 'redirect') {
-        router.push(value)
-        setOpenModal(false)
-      } else if (name === 'redirect-hard') {
-        // Using router push for redirect don't redirect properly, it just have loading for a bit and changes the url much later
-        window.location.href = value
-        setOpenModal(false)
+    const modalIframe = createModalIfNotExist()
+
+    if (modalIframe) {
+      setCreateModalIframe(modalIframe)
+      window.onmessage = event => listener(event, modalIframe)
+    }
+
+    return () => {
+      let modalIframe = document.getElementById('create-modal-iframe') as HTMLIFrameElement | null
+
+      if (modalIframe) {
+        closeModal(modalIframe)
+        window.removeEventListener('message', event =>
+          listener(event, modalIframe as HTMLIFrameElement),
+        )
       }
     }
   }, [])
 
   return (
     <span
       onClick={() => {
-        iframeRef.current?.contentWindow?.postMessage(
-          {
-            type: 'grill:create-chat',
-            payload: `open|${spaceId}`,
-          },
-          '*',
-        )
-        setOpenModal(true)
+        if (createModalIframe) {
+          createModalIframe?.contentWindow?.postMessage(
+            {
+              type: 'grill:create-chat',
+              payload: `open|${spaceId}`,
+            },
+            '*',
+          )
+
+          createModalIframe.style.opacity = '1'
+          createModalIframe.style.pointerEvents = 'auto'
+
+          sendEvent('create_chat_clicked', {
+            eventSource: router.asPath.includes('/spaces') ? 'my_spaces' : 'profile_page',
+          })
+        }
       }}
       className='DfCurrentAddress icon CursorPointer'
     >
-      <Button size={size} type='primary' ghost>
+      <Button size={size} type='primary' ghost {...props}>
         Create chat
       </Button>
-      {createPortal(
-        <iframe
-          ref={iframeRef}
-          src={`${getCurrentUrlOrigin()}/c/widget/create-chat?theme=light`}
-          style={{
-            opacity: openModal ? 1 : 0,
-            pointerEvents: openModal ? 'auto' : 'none',
-            transition: 'opacity 0.3s ease-in-out',
-            colorScheme: 'none',
-            background: 'transparent',
-            position: 'fixed',
-            inset: 0,
-            width: '100%',
-            height: '100%',
-            zIndex: 13,
-          }}
-        />,
-        document?.body,
-      )}
     </span>
   )
 }
 
+const createModalIfNotExist = () => {
+  let modalIframe = document.getElementById('create-modal-iframe') as HTMLIFrameElement | null
+
+  if (!modalIframe) {
+    document.body.appendChild(document.createElement('iframe'))
+
+    const iframe = document.querySelector('iframe')
+
+    if (!iframe) return null
+
+    iframe.id = 'create-modal-iframe'
+    iframe.src = `${getCurrentUrlOrigin()}/c/widget/create-chat?theme=light`
+
+    iframe.style.opacity = '0'
+    iframe.style.pointerEvents = 'none'
+    iframe.style.colorScheme = 'none'
+    iframe.style.background = 'transparent'
+    iframe.style.position = 'fixed'
+    iframe.style.inset = '0'
+    iframe.style.width = '100%'
+    iframe.style.height = '100%'
+    iframe.style.zIndex = '13'
+
+    return iframe
+  } else {
+    return modalIframe
+  }
+}
+
 export default CreateChatModalButton