@taruvi/navkit 0.0.47 → 0.0.48-beta.0

package/package.json

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

package/src/App.tsx

@@ -1,6 +1,7 @@
 import AppBar from "@mui/material/AppBar"
 import Toolbar from "@mui/material/Toolbar"
 import IconButton from "@mui/material/IconButton"
+import { SvgIcon } from "@mui/material"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { useState } from "react"
 import { AppLauncher, Profile, ProfileMenu, Shortcuts, ShortcutsMenu, MattermostChat } from "./components"
@@ -12,8 +13,14 @@ import taruviLogo from "./assets/logo.svg";
 import taruviLogoWhite from "./assets/taruvi-logo-white.png";
 import type { Client } from "@taruvi/sdk"
 
+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"} />
+  </SvgIcon>
+)
+
 const NavkitContent = () => {
-  const { isUserAuthenticated, siteSettings, appSettings, appSettingsLoaded, appName, userData, jwtToken, themeMode, navbarColor, iconColor } = useNavigation();
+  const { isUserAuthenticated, siteSettings, appSettings, appSettingsLoaded, appName, userData, themeMode, navbarColor, iconColor } = useNavigation();
   const resolvedAppName = appName || appSettings?.displayName
   const showTaruviLogo = appSettingsLoaded && !resolvedAppName && !appSettings?.icon
   const styles = getAppStyles(themeMode)
@@ -52,7 +59,12 @@ const NavkitContent = () => {
             ) : null}
           </Box>
           <Box component={"div"} sx={styles.rightSection}>
-            <Shortcuts showChat={setShowChat} onMenuToggle={() => setShowShortcutsMenu(!showShortcutsMenu)} iconColor={iconColor} />
+            <Shortcuts onMenuToggle={() => setShowShortcutsMenu(!showShortcutsMenu)} iconColor={iconColor} />
+            {isUserAuthenticated && siteSettings['show-chat'] && siteSettings['chat-url'] && (
+              <Box onClick={() => setShowChat(true)} sx={{ ...styles.appLauncherContainer, cursor: 'pointer' }}>
+                <ChatIcon color={iconColor} />
+              </Box>
+            )}
             <Box
                 onClick={() => {
                   if (isUserAuthenticated) {
@@ -99,7 +111,7 @@ const NavkitContent = () => {
 
       {showShortcutsMenu && (
         <Box>
-          <ShortcutsMenu showChat={setShowChat} />
+          <ShortcutsMenu />
         </Box>
       )}
 
@@ -110,7 +122,7 @@ const NavkitContent = () => {
               <FontAwesomeIcon icon={["fas", "external-link-alt"]} style={{ fontSize: "10px" }} />
             </IconButton>
           </Box>
-          <MattermostChat jwtToken={jwtToken} mattermostUrl={siteSettings['chat-url']} loginId={userData?.email || ''} width="100%" height="100%" />
+          <MattermostChat mattermostUrl={siteSettings['chat-url']} width="100%" height="100%" />
         </DraggableResizable>
       )}
     </>

package/src/NavkitContext.tsx

@@ -24,7 +24,7 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName, navba
 
   const user = useRef<any>(null)
   const settings = useRef<any>(null)
-  const siteSettings = useRef<SiteSettings>({
+  const [siteSettings, setSiteSettings] = useState<SiteSettings>({
     shortcuts: [],
     logo: '',
     'show-chat': false,
@@ -38,7 +38,7 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName, navba
   const [isDesk, setIsDesk] = useState<boolean>(false)
   const [appsList, setAppsList] = useState<AppData[]>([])
   const [userData, setUserData] = useState<UserData | null>(null)
-  const [jwtToken, setJwtToken] = useState<string>('')
+  const [sessionToken, setSessionToken] = useState<string>('')
   const [isUserAuthenticated, setIsUserAuthenticated] = useState<boolean>(false)
   const [themeMode, setThemeMode] = useState<ThemeMode>(getInitialTheme)
 
@@ -75,8 +75,8 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName, navba
 
     // Get JWT token if authenticated from sdk
     if (authenticated) {
-      const token = client.tokenClient.getToken() || ''
-      setJwtToken(token)
+      const token = auth.getSessionToken() || ''
+      setSessionToken(token)
     }
   }
 
@@ -104,18 +104,31 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName, navba
     }
 
     const rawSettings = (fetchedSettings?.data ?? fetchedSettings)?.settings ?? {}
-    siteSettings.current = {
-      ...siteSettings.current,
+    const newSiteSettings: SiteSettings = {
+      shortcuts: [],
+      logo: rawSettings['navkit.logo'] ?? '',
       'show-chat': rawSettings['navkit.show-chat'] ?? false,
       'chat-url': rawSettings['navkit.chat-url'] ?? '',
       frontendUrl: rawSettings['navkit.frontend-url'] ?? '',
-      logo: rawSettings['navkit.logo'] ?? '',
       enableDarkMode: rawSettings['navkit.enable-dark-mode'] ?? false,
     }
+    setSiteSettings(newSiteSettings)
     if (isUserAuthenticated) {
       const userDataResponse = await auth.getCurrentUser()
       setUserData(userDataResponse?.data || null)
 
+      // Login to Mattermost on init if chat is configured
+      const chatUrl = newSiteSettings['chat-url']
+      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 })
+        }).catch(() => {})
+      }
+
       // Fetch user apps using username from userData
       if (userDataResponse?.data?.username) {
         const appsResponse = await user.current.getUserApps?.(userDataResponse.data.username)
@@ -176,7 +189,7 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName, navba
   }, [themeMode, onThemeChange])
 
   return (
-    <NavigationContext.Provider value={{ navigateToUrl, isDesk, appsList, userData, siteSettings: siteSettings.current, appSettings, appSettingsLoaded, appName, jwtToken, isUserAuthenticated, client, auth, themeMode, toggleTheme, navbarColor, iconColor }}>
+    <NavigationContext.Provider value={{ navigateToUrl, isDesk, appsList, userData, siteSettings, appSettings, appSettingsLoaded, appName, sessionToken, isUserAuthenticated, client, auth, themeMode, toggleTheme, navbarColor, iconColor }}>
       {children}
     </NavigationContext.Provider>
   )

package/src/components/MattermostChat/MattermostChat.tsx

@@ -1,10 +1,8 @@
-import { useEffect, useRef, useState } from 'react'
-import { Box, Badge, CircularProgress, Typography } from '@mui/material'
+import {useEffect, useRef, useState} from 'react'
+import {Box, Badge} from '@mui/material'
 
 interface MattermostChatProps {
-  jwtToken: string
-  mattermostUrl: string
-  loginId: string
+  mattermostUrl: string  // Mattermost server URL (must be passed from parent app)
   onNotification?: (count: number) => void
   onUrlClick?: (url: string) => void
   width?: string | number
@@ -22,77 +20,22 @@ interface NotifyMessage {
   }
 }
 
-const MattermostChat = ({
-  jwtToken,
-  mattermostUrl,
-  loginId,
-  onNotification,
-  onUrlClick,
-  width = '100%',
-  height = '100%'
-}: MattermostChatProps) => {
+const MattermostChat = ({ mattermostUrl, onNotification, onUrlClick, width = '100%', height = '100%' }: MattermostChatProps) => {
   const iframeRef = useRef<HTMLIFrameElement>(null)
   const [unreadCount, setUnreadCount] = useState(0)
   const [isWindowFocused, setIsWindowFocused] = useState(true)
-  const [authToken, setAuthToken] = useState<string | null>(null)
-  const [authError, setAuthError] = useState<string | null>(null)
-  const [isLoading, setIsLoading] = useState(true)
-
-  // Authenticate with Mattermost on mount
-  useEffect(() => {
-    const login = async () => {
-      try {
-        const res = await fetch(`${mattermostUrl.replace(/\/$/, '')}/api/v4/users/login`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
-          credentials: 'omit',
-          body: JSON.stringify({ login_id: loginId, password: jwtToken, token: '', deviceId: '' })
-        })
-
-        if (!res.ok) {
-          setAuthError(`Login failed (${res.status})`)
-          setIsLoading(false)
-          return
-        }
-
-        const token = res.headers.get('Token')
-        if (token) {
-          setAuthToken(token)
-        } else {
-          setAuthError('No token in response')
-        }
-      } catch (e: any) {
-        setAuthError(e.message || 'Login failed')
-      }
-      setIsLoading(false)
-    }
-
-    if (loginId && jwtToken) login()
-    else { setAuthError('Missing credentials'); setIsLoading(false) }
-  }, [mattermostUrl, loginId, jwtToken])
-
-  // Inject auth token into iframe via postMessage once loaded
-  useEffect(() => {
-    if (!authToken || !iframeRef.current) return
-
-    const handleIframeLoad = () => {
-      // Set the auth cookie/token in the iframe context
-      iframeRef.current?.contentWindow?.postMessage(
-        { type: 'token', data: authToken },
-        new URL(mattermostUrl).origin
-      )
-    }
-
-    const iframe = iframeRef.current
-    iframe.addEventListener('load', handleIframeLoad)
-    return () => iframe.removeEventListener('load', handleIframeLoad)
-  }, [authToken, mattermostUrl])
 
   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) return
+      if (event.origin !== mattermostOrigin) {
+        console.warn('Received message from untrusted origin:', event.origin)
+        return
+      }
 
+      // Handle Notify events
       if (event.data?.event === 'Notify') {
         if (!isWindowFocused) {
           setUnreadCount(prev => {
@@ -101,16 +44,31 @@ const MattermostChat = ({
             return newCount
           })
         }
-        if (event.data.data?.url && onUrlClick) onUrlClick(event.data.data.url)
+
+        // Handle URL clicks if provided
+        if (event.data.data?.url && onUrlClick) {
+          onUrlClick(event.data.data.url)
+        }
       }
     }
 
-    const handleFocus = () => { setIsWindowFocused(true); setUnreadCount(0); onNotification?.(0) }
-    const handleBlur = () => setIsWindowFocused(false)
+    // Handle window focus/blur to track unread messages
+    const handleFocus = () => {
+      setIsWindowFocused(true)
+      setUnreadCount(0)
+      onNotification?.(0)
+    }
+
+    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)
@@ -118,34 +76,34 @@ const MattermostChat = ({
     }
   }, [mattermostUrl, isWindowFocused, onNotification, onUrlClick])
 
-  if (isLoading) {
-    return (
-      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width, height }}>
-        <CircularProgress size={32} />
-      </Box>
-    )
-  }
-
-  if (authError) {
-    return (
-      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width, height }}>
-        <Typography color="error">{authError}</Typography>
-      </Box>
-    )
-  }
-
-  // Load Mattermost with the auth token as a cookie header via the access_token param
-  const iframeUrl = `${mattermostUrl.replace(/\/$/, '')}?access_token=${authToken}`
+  // Construct iframe URL with JWT authentication
+  // const iframeUrl = `${mattermostUrl.replace(/\/$/, '')}/login`
+  const iframeUrl = mattermostUrl
 
   return (
-    <Box sx={{ position: 'relative', width, height, overflow: 'hidden' }}>
+    <Box
+      sx={{
+        position: 'relative',
+        width,
+        height,
+        overflow: 'hidden'
+      }}
+    >
       {unreadCount > 0 && (
         <Badge
           badgeContent={unreadCount}
           color="error"
           sx={{
-            position: 'absolute', top: 16, right: 16, zIndex: 1000,
-            '& .MuiBadge-badge': { fontSize: '1rem', height: '28px', minWidth: '28px', borderRadius: '14px' }
+            position: 'absolute',
+            top: 16,
+            right: 16,
+            zIndex: 1000,
+            '& .MuiBadge-badge': {
+              fontSize: '1rem',
+              height: '28px',
+              minWidth: '28px',
+              borderRadius: '14px'
+            }
           }}
         />
       )}
@@ -154,7 +112,12 @@ const MattermostChat = ({
         src={iframeUrl}
         title="Mattermost Chat"
         allow="clipboard-read; clipboard-write"
-        style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
+        style={{
+          width: '100%',
+          height: '100%',
+          border: 'none',
+          display: 'block'
+        }}
       />
     </Box>
   )

package/src/components/Shortucts/Shortcuts.styles.ts

@@ -5,7 +5,6 @@ export const shortcutsStyles = {
     display: { xs: 'none', md: 'flex' },
     alignItems: 'center',
     gap: '10px',
-    ml: spacing.md,
   },
   mobileTrigger: {
     display: { xs: 'flex', md: 'none' },
@@ -16,9 +15,12 @@ export const shortcutsStyles = {
     display: 'flex',
     flexDirection: 'column' as const,
     alignItems: 'center',
+    justifyContent: 'center',
     textDecoration: 'none',
     cursor: 'pointer',
     color: colours.text.secondary,
+    minWidth: 40,
+    minHeight: 40,
     '&:hover': {
       opacity: 0.7,
     },

package/src/components/Shortucts/Shortcuts.tsx

@@ -1,17 +1,10 @@
 import type { AppData } from '../../types'
-import { Box, Link, IconButton, SvgIcon } from '@mui/material'
+import { Box, Link, IconButton } from '@mui/material'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { shortcutsStyles } from './Shortcuts.styles'
 import { useNavigation } from '../../NavkitContext'
 
-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"}/>
-    </SvgIcon>
-)
-
 interface ShortcutsProps {
-    showChat?: (showChat: boolean) => void
     onMenuToggle?: () => void
     triggerRef?: React.RefObject<HTMLButtonElement | null>
     iconColor?: string
@@ -19,8 +12,8 @@ interface ShortcutsProps {
 
 const Shortcuts = (props: ShortcutsProps) => {
 
-    const { showChat, onMenuToggle, triggerRef, iconColor } = props
-    const { navigateToUrl, siteSettings, isUserAuthenticated } = useNavigation()
+    const { onMenuToggle, triggerRef, iconColor } = props
+    const { navigateToUrl, siteSettings } = useNavigation()
     const shortcuts = siteSettings.shortcuts
 
     const handleShortcutClick = (shortcut: AppData) => {
@@ -45,19 +38,10 @@ const Shortcuts = (props: ShortcutsProps) => {
                         />
                     </Link>
                 ))}
-                {siteSettings['show-chat'] && siteSettings['chat-url'] && isUserAuthenticated &&
-                    <Link
-                        key={"chat"}
-                        onClick={() => showChat?.(true)}
-                        sx={shortcutsStyles.shortcut}
-                    >
-                        <ChatIcon color={iconColor} />
-                    </Link>
-                }
             </Box>
 
             {/* Mobile view - trigger button */}
-            {((shortcuts?.length ?? 0) > 0 || (siteSettings['show-chat'] && siteSettings['chat-url'] && isUserAuthenticated)) && (
+            {(shortcuts?.length ?? 0) > 0 && (
                 <IconButton
                     ref={triggerRef}
                     onClick={onMenuToggle}

package/src/components/Shortucts/ShortcutsMenu.tsx

@@ -1,22 +1,13 @@
-import { Card, MenuItem, Typography, SvgIcon } from '@mui/material'
+import { Card, MenuItem, Typography } from '@mui/material'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import type { AppData } from '../../types'
 import { getShortcutsMenuStyles } from './ShortcutsMenu.styles'
 import { useNavigation } from '../../NavkitContext'
 
-const ChatIcon = ({ style }: { style: Record<string, any> }) => (
-    <SvgIcon viewBox="-2 -2 24 24" sx={{ fontSize: style.fontSize, color: style.color }}>
-        <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="currentColor"/>
-    </SvgIcon>
-)
+interface ShortcutsMenuProps {}
 
-interface ShortcutsMenuProps {
-    showChat: (showChat: boolean) => void
-}
-
-const ShortcutsMenu = (props: ShortcutsMenuProps) => {
-    const { showChat } = props
-    const { navigateToUrl, siteSettings, isUserAuthenticated, themeMode } = useNavigation()
+const ShortcutsMenu = (_props: ShortcutsMenuProps) => {
+    const { navigateToUrl, siteSettings, themeMode } = useNavigation()
     const shortcuts = siteSettings.shortcuts
     const themedStyles = getShortcutsMenuStyles(themeMode)
 
@@ -28,18 +19,6 @@ const ShortcutsMenu = (props: ShortcutsMenuProps) => {
 
     return (
         <Card sx={themedStyles.menu}>
-            {siteSettings['show-chat'] && siteSettings['chat-url'] && isUserAuthenticated && (
-                <MenuItem
-                    key="chat"
-                    onClick={() => showChat(true)}
-                    sx={themedStyles.menuItem}
-                >
-                    <ChatIcon style={themedStyles.iconStyle} />
-                    <Typography sx={themedStyles.menuItemText}>
-                        Chat
-                    </Typography>
-                </MenuItem>
-            )}
             {shortcuts?.map((shortcut) => (
                 <MenuItem
                     key={shortcut.id}

package/src/types.ts

@@ -37,7 +37,7 @@ export interface NavigationContextType {
   appSettings: AppSettings
   appSettingsLoaded: boolean
   appName?: string
-  jwtToken: string
+  sessionToken: string
   isUserAuthenticated: boolean
   client: Client
   auth: Auth