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

package/package.json

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

package/src/App.tsx

@@ -20,7 +20,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)
@@ -122,7 +122,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: 'omit',
-          body: JSON.stringify({ username: 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

@@ -3,39 +3,34 @@ 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 [unreadCount, setUnreadCount] = useState(0)
   const [isWindowFocused, setIsWindowFocused] = useState(true)
+  const mattermostOrigin = new URL(mattermostUrl).origin
 
   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)
+    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
+        )
         return
       }
 
-      // Handle Notify events
+      // Mattermost Notify events (unread badge, URL clicks)
       if (event.data?.event === 'Notify') {
         if (!isWindowFocused) {
           setUnreadCount(prev => {
@@ -44,41 +39,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, loginId, sessionToken, 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
@@ -109,9 +97,9 @@ const MattermostChat = ({ mattermostUrl, onNotification, onUrlClick, width = '10
       )}
       <iframe
         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%',