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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taruvi/navkit",
-  "version": "0.0.48-beta.3",
+  "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"} />
@@ -20,7 +37,7 @@ const ChatIcon = ({ color }: { color?: string }) => (
 )
 
 const NavkitContent = () => {
-  const { isUserAuthenticated, appSettings, appSettingsLoaded, appName, userData, appsList, chatUrl, themeMode, navbarColor, iconColor } = useNavigation();
+  const { isUserAuthenticated, appSettings, appSettingsLoaded, appName, userData, appsList, chatUrl, themeMode, navbarColor, iconColor, sessionToken } = useNavigation();
   const resolvedAppName = appName || appSettings?.displayName
   const showTaruviLogo = appSettingsLoaded && !resolvedAppName && !appSettings?.icon
   const styles = getAppStyles(themeMode)
@@ -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>
             )}
@@ -122,7 +145,13 @@ const NavkitContent = () => {
               <FontAwesomeIcon icon={["fas", "external-link-alt"]} style={{ fontSize: "10px" }} />
             </IconButton>
           </Box>
-          <MattermostChat mattermostUrl={chatUrl} width="100%" height="100%" />
+          <MattermostChat
+            mattermostUrl={chatUrl}
+            loginId={userData?.username ?? ''}
+            sessionToken={sessionToken ?? ''}
+            width="100%"
+            height="100%"
+          />
         </DraggableResizable>
       )}
     </>

package/src/NavkitContext.tsx

@@ -129,17 +129,6 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName, navba
       const userDataResponse = await auth.getCurrentUser()
       setUserData(userDataResponse?.data || null)
 
-      // Login to Mattermost on init if chat is configured
-      const token = auth.getSessionToken() || ''
-      if (chatUrl && token && userDataResponse?.data?.username) {
-        fetch(`${chatUrl.replace(/\/$/, '')}/api/v4/users/login`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-Environment': 'Browser' },
-          credentials: 'include',
-          body: JSON.stringify({ login_id: userDataResponse.data.username, password: token, auth_type: "session" })
-        }).catch(() => {})
-      }
-
       // Fetch user apps using username from userData
       if (userDataResponse?.data?.username) {
         const appsResponse = await user.current.getUserApps?.(userDataResponse.data.username)

package/src/components/MattermostChat/MattermostChat.tsx

@@ -1,41 +1,46 @@
-import {useEffect, useRef, useState} from 'react'
+import {useLayoutEffect, useRef, useState} from 'react'
 import {Box, Badge} from '@mui/material'
 
 interface MattermostChatProps {
   mattermostUrl: string  // Mattermost server URL (must be passed from parent app)
+  loginId: string        // Mattermost login_id (username)
+  sessionToken: string   // Taruvi session token used as password for auth_type=session
   onNotification?: (count: number) => void
   onUrlClick?: (url: string) => void
   width?: string | number
   height?: string | number
 }
 
-interface NotifyMessage {
-  event: string
-  data?: {
-    title?: string
-    body?: string
-    channel?: string
-    teamId?: string
-    url?: string
-  }
-}
-
-const MattermostChat = ({ mattermostUrl, onNotification, onUrlClick, width = '100%', height = '100%' }: 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
+
+  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
 
-  useEffect(() => {
-    // Handle postMessage events from Mattermost iframe
-    const handleMessage = (event: MessageEvent<NotifyMessage>) => {
-      // Validate origin for security
-      const mattermostOrigin = new URL(mattermostUrl).origin
-      if (event.origin !== mattermostOrigin) {
-        console.warn('Received message from untrusted origin:', event.origin)
+      // Bridge ready — send login credentials
+      if (event.data?.type === 'mm-bridge-ready') {
+        postLoginToBridge()
         return
       }
 
-      // Handle Notify events
+      // Mattermost Notify events (unread badge, URL clicks)
       if (event.data?.event === 'Notify') {
         if (!isWindowFocused) {
           setUnreadCount(prev => {
@@ -44,41 +49,34 @@ const MattermostChat = ({ mattermostUrl, onNotification, onUrlClick, width = '10
             return newCount
           })
         }
-
-        // Handle URL clicks if provided
         if (event.data.data?.url && onUrlClick) {
           onUrlClick(event.data.data.url)
         }
       }
     }
 
-    // Handle window focus/blur to track unread messages
     const handleFocus = () => {
       setIsWindowFocused(true)
       setUnreadCount(0)
       onNotification?.(0)
     }
 
-    const handleBlur = () => {
-      setIsWindowFocused(false)
-    }
+    const handleBlur = () => setIsWindowFocused(false)
 
-    // Add event listeners
     window.addEventListener('message', handleMessage)
     window.addEventListener('focus', handleFocus)
     window.addEventListener('blur', handleBlur)
 
-    // Cleanup event listeners on unmount
     return () => {
       window.removeEventListener('message', handleMessage)
       window.removeEventListener('focus', handleFocus)
       window.removeEventListener('blur', handleBlur)
     }
-  }, [mattermostUrl, isWindowFocused, onNotification, onUrlClick])
+  }, [mattermostOrigin, isWindowFocused, onNotification, onUrlClick])
 
-  // Construct iframe URL with JWT authentication
-  // const iframeUrl = `${mattermostUrl.replace(/\/$/, '')}/login`
-  const iframeUrl = mattermostUrl
+  // Always load the autologin bridge first — it handles storage access + login,
+  // then redirects the iframe to Mattermost
+  const bridgeUrl = `${mattermostOrigin}/static/autologin.html`
 
   return (
     <Box
@@ -108,10 +106,11 @@ const MattermostChat = ({ mattermostUrl, onNotification, onUrlClick, width = '10
         />
       )}
       <iframe
+        key={`${loginId}:${sessionToken ? '1' : '0'}`}
         ref={iframeRef}
-        src={iframeUrl}
+        src={bridgeUrl}
         title="Mattermost Chat"
-        allow="clipboard-read; clipboard-write"
+        allow="clipboard-read; clipboard-write; storage-access"
         style={{
           width: '100%',
           height: '100%',