@taruvi/navkit 0.0.48-beta.4 → 0.0.48-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taruvi/navkit",
-  "version": "0.0.48-beta.4",
+  "version": "0.0.48-beta.5",
   "main": "src/App.tsx",
   "type": "module",
   "scripts": {

package/src/App.tsx

@@ -13,6 +13,23 @@ import taruviLogo from "./assets/logo.svg";
 import taruviLogoWhite from "./assets/taruvi-logo-white.png";
 import type { Client } from "@taruvi/sdk"
 
+/** Top-level storage access for the chat origin (Chromium). Call synchronously from the chat button click
+ *  so transient activation is preserved; pairs with the iframe autologin bridge so no second in-frame login
+ *  click is needed when the browser supports this API. */
+function requestMattermostStorageAccessFromUserGesture(chatUrl: string) {
+  try {
+    const origin = new URL(chatUrl).origin
+    const doc = document as Document & {
+      requestStorageAccessFor?: (requestedOrigin: string) => Promise<void>
+    }
+    if (typeof doc.requestStorageAccessFor === "function") {
+      void doc.requestStorageAccessFor(origin).catch(() => {})
+    }
+  } catch {
+    // invalid chatUrl or API unavailable
+  }
+}
+
 const ChatIcon = ({ color }: { color?: string }) => (
   <SvgIcon viewBox="-2 -2 24 24" sx={{ fontSize: 23, display: 'block', position: 'relative', top: 2 }}>
     <path d="M18 0H2C0.9 0 0 0.9 0 2V20L4 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0Z" fill={color || "#9DE5FD"} />
@@ -61,7 +78,13 @@ const NavkitContent = () => {
           <Box component={"div"} sx={styles.rightSection}>
             <Shortcuts onMenuToggle={() => setShowShortcutsMenu(!showShortcutsMenu)} iconColor={iconColor} />
             {isUserAuthenticated && appsList.some(a => a.id === 'chat') && chatUrl && (
-              <Box onClick={() => setShowChat(true)} sx={{ ...styles.appLauncherContainer, cursor: 'pointer' }}>
+              <Box
+                onClick={() => {
+                  requestMattermostStorageAccessFromUserGesture(chatUrl)
+                  setShowChat(true)
+                }}
+                sx={{ ...styles.appLauncherContainer, cursor: 'pointer' }}
+              >
                 <ChatIcon color={iconColor} />
               </Box>
             )}

package/src/components/MattermostChat/MattermostChat.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useRef, useState} from 'react'
+import {useLayoutEffect, useRef, useState} from 'react'
 import {Box, Badge} from '@mui/material'
 
 interface MattermostChatProps {
@@ -13,20 +13,30 @@ interface MattermostChatProps {
 
 const MattermostChat = ({ mattermostUrl, loginId, sessionToken, onNotification, onUrlClick, width = '100%', height = '100%' }: MattermostChatProps) => {
   const iframeRef = useRef<HTMLIFrameElement>(null)
+  const credentialsRef = useRef({ loginId, sessionToken })
+  credentialsRef.current = { loginId, sessionToken }
   const [unreadCount, setUnreadCount] = useState(0)
   const [isWindowFocused, setIsWindowFocused] = useState(true)
   const mattermostOrigin = new URL(mattermostUrl).origin
 
-  useEffect(() => {
+  const postLoginToBridge = () => {
+    const { loginId: id, sessionToken: token } = credentialsRef.current
+    if (!id || !token) return
+    iframeRef.current?.contentWindow?.postMessage(
+      { type: 'mm-login', loginId: id, token },
+      mattermostOrigin
+    )
+  }
+
+  // useLayoutEffect so the listener is attached in the same commit as the iframe
+  // before the bridge can fire mm-bridge-ready (useEffect runs too late and misses it).
+  useLayoutEffect(() => {
     const handleMessage = (event: MessageEvent) => {
       if (event.origin !== mattermostOrigin) return
 
       // Bridge ready — send login credentials
       if (event.data?.type === 'mm-bridge-ready') {
-        iframeRef.current?.contentWindow?.postMessage(
-          { type: 'mm-login', loginId, token: sessionToken },
-          mattermostOrigin
-        )
+        postLoginToBridge()
         return
       }
 
@@ -62,7 +72,7 @@ const MattermostChat = ({ mattermostUrl, loginId, sessionToken, onNotification,
       window.removeEventListener('focus', handleFocus)
       window.removeEventListener('blur', handleBlur)
     }
-  }, [mattermostOrigin, loginId, sessionToken, isWindowFocused, onNotification, onUrlClick])
+  }, [mattermostOrigin, isWindowFocused, onNotification, onUrlClick])
 
   // Always load the autologin bridge first — it handles storage access + login,
   // then redirects the iframe to Mattermost
@@ -96,6 +106,7 @@ const MattermostChat = ({ mattermostUrl, loginId, sessionToken, onNotification,
         />
       )}
       <iframe
+        key={`${loginId}:${sessionToken ? '1' : '0'}`}
         ref={iframeRef}
         src={bridgeUrl}
         title="Mattermost Chat"