@taruvi/navkit 0.0.48-beta.0 → 0.0.48-beta.1

package/package.json

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

package/src/App.tsx

@@ -20,7 +20,7 @@ const ChatIcon = ({ color }: { color?: string }) => (
 )
 
 const NavkitContent = () => {
-  const { isUserAuthenticated, siteSettings, appSettings, appSettingsLoaded, appName, userData, themeMode, navbarColor, iconColor } = useNavigation();
+  const { isUserAuthenticated, appSettings, appSettingsLoaded, appName, userData, appsList, chatUrl, themeMode, navbarColor, iconColor } = useNavigation();
   const resolvedAppName = appName || appSettings?.displayName
   const showTaruviLogo = appSettingsLoaded && !resolvedAppName && !appSettings?.icon
   const styles = getAppStyles(themeMode)
@@ -60,7 +60,7 @@ const NavkitContent = () => {
           </Box>
           <Box component={"div"} sx={styles.rightSection}>
             <Shortcuts onMenuToggle={() => setShowShortcutsMenu(!showShortcutsMenu)} iconColor={iconColor} />
-            {isUserAuthenticated && siteSettings['show-chat'] && siteSettings['chat-url'] && (
+            {isUserAuthenticated && appsList.some(a => a.id === 'chat') && chatUrl && (
               <Box onClick={() => setShowChat(true)} sx={{ ...styles.appLauncherContainer, cursor: 'pointer' }}>
                 <ChatIcon color={iconColor} />
               </Box>
@@ -115,14 +115,14 @@ const NavkitContent = () => {
         </Box>
       )}
 
-      {showChat && siteSettings['chat-url'] && (
+      {showChat && chatUrl && (
         <DraggableResizable onClose={() => setShowChat(false)} initialWidth={Math.min(1200, window.innerWidth * 0.9)} initialHeight={Math.min(600, window.innerHeight * 0.8)}>
           <Box sx={styles.chatHeader}>
-            <IconButton onClick={() => window.open(siteSettings['chat-url'], "_blank")} sx={styles.chatOpenButton}>
+            <IconButton onClick={() => window.open(chatUrl, "_blank")} sx={styles.chatOpenButton}>
               <FontAwesomeIcon icon={["fas", "external-link-alt"]} style={{ fontSize: "10px" }} />
             </IconButton>
           </Box>
-          <MattermostChat mattermostUrl={siteSettings['chat-url']} width="100%" height="100%" />
+          <MattermostChat mattermostUrl={chatUrl} width="100%" height="100%" />
         </DraggableResizable>
       )}
     </>

package/src/NavkitContext.tsx

@@ -2,7 +2,7 @@ import { version } from '../package.json' with { type: 'json' }
 import { createContext, startTransition, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import type { AppData, AppSettings, NavigationContextType, NavkitProviderProps, SiteSettings, UserData } from './types'
 import type { ThemeMode } from './styles/variables'
-import { User, Settings, Auth, App } from "@taruvi/sdk"
+import { User, Settings, Auth, App, Secrets } from "@taruvi/sdk"
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'
 import { far } from '@fortawesome/free-regular-svg-icons'
@@ -38,6 +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 [chatUrl, setChatUrl] = useState<string>('')
   const [sessionToken, setSessionToken] = useState<string>('')
   const [isUserAuthenticated, setIsUserAuthenticated] = useState<boolean>(false)
   const [themeMode, setThemeMode] = useState<ThemeMode>(getInitialTheme)
@@ -104,11 +105,22 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName, navba
     }
 
     const rawSettings = (fetchedSettings?.data ?? fetchedSettings)?.settings ?? {}
+
+    let chatUrl = ''
+    try {
+      const secretResponse = await new Secrets(client).get('chat-url').execute<{ data: { value: string | { chat_url?: string, url?: string } } }>()
+      const secretValue = secretResponse?.data?.value
+      chatUrl = typeof secretValue === 'string'
+        ? secretValue
+        : (secretValue?.chat_url ?? secretValue?.url ?? '')
+    } catch { }
+    setChatUrl(chatUrl)
+
     const newSiteSettings: SiteSettings = {
       shortcuts: [],
       logo: rawSettings['navkit.logo'] ?? '',
       'show-chat': rawSettings['navkit.show-chat'] ?? false,
-      'chat-url': rawSettings['navkit.chat-url'] ?? '',
+      'chat-url': chatUrl,
       frontendUrl: rawSettings['navkit.frontend-url'] ?? '',
       enableDarkMode: rawSettings['navkit.enable-dark-mode'] ?? false,
     }
@@ -118,7 +130,6 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName, navba
       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`, {
@@ -189,7 +200,7 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName, navba
   }, [themeMode, onThemeChange])
 
   return (
-    <NavigationContext.Provider value={{ navigateToUrl, isDesk, appsList, userData, siteSettings, appSettings, appSettingsLoaded, appName, sessionToken, isUserAuthenticated, client, auth, themeMode, toggleTheme, navbarColor, iconColor }}>
+    <NavigationContext.Provider value={{ navigateToUrl, isDesk, appsList, userData, siteSettings, appSettings, appSettingsLoaded, appName, chatUrl, sessionToken, isUserAuthenticated, client, auth, themeMode, toggleTheme, navbarColor, iconColor }}>
       {children}
     </NavigationContext.Provider>
   )

package/src/components/AppLauncher/AppLauncher.tsx

@@ -19,7 +19,8 @@ const isValidFaIcon = (icon: string): boolean => {
 }
 
 const AppLauncher = () => {
-    const { navigateToUrl, appsList, themeMode } = useNavigation()
+    const { navigateToUrl, appsList: allApps, themeMode } = useNavigation()
+    const appsList = allApps.filter(a => a.id !== 'chat')
     const styles = getAppLauncherStyles(themeMode)
     const [filteredApps, setFilteredApps] = useState<AppData[]>(appsList || [])
 

package/src/types.ts

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