@taruvi/navkit 0.0.48-beta.9 → 0.0.48

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

@@ -5,6 +5,7 @@ export const shortcutsStyles = {
     display: { xs: 'none', md: 'flex' },
     alignItems: 'center',
     gap: '10px',
+    ml: spacing.md,
   },
   mobileTrigger: {
     display: { xs: 'flex', md: 'none' },
@@ -15,12 +16,9 @@ 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,10 +1,17 @@
 import type { AppData } from '../../types'
-import { Box, Link, IconButton } from '@mui/material'
+import { Box, Link, IconButton, SvgIcon } 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
@@ -12,8 +19,8 @@ interface ShortcutsProps {
 
 const Shortcuts = (props: ShortcutsProps) => {
 
-    const { onMenuToggle, triggerRef, iconColor } = props
-    const { navigateToUrl, siteSettings } = useNavigation()
+    const { showChat, onMenuToggle, triggerRef, iconColor } = props
+    const { navigateToUrl, siteSettings, isUserAuthenticated } = useNavigation()
     const shortcuts = siteSettings.shortcuts
 
     const handleShortcutClick = (shortcut: AppData) => {
@@ -38,10 +45,19 @@ 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 && (
+            {((shortcuts?.length ?? 0) > 0 || (siteSettings['show-chat'] && siteSettings['chat-url'] && isUserAuthenticated)) && (
                 <IconButton
                     ref={triggerRef}
                     onClick={onMenuToggle}

package/src/components/Shortucts/ShortcutsMenu.tsx

@@ -1,13 +1,22 @@
-import { Card, MenuItem, Typography } from '@mui/material'
+import { Card, MenuItem, Typography, SvgIcon } from '@mui/material'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import type { AppData } from '../../types'
 import { getShortcutsMenuStyles } from './ShortcutsMenu.styles'
 import { useNavigation } from '../../NavkitContext'
 
-interface ShortcutsMenuProps {}
+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>
+)
 
-const ShortcutsMenu = (_props: ShortcutsMenuProps) => {
-    const { navigateToUrl, siteSettings, themeMode } = useNavigation()
+interface ShortcutsMenuProps {
+    showChat: (showChat: boolean) => void
+}
+
+const ShortcutsMenu = (props: ShortcutsMenuProps) => {
+    const { showChat } = props
+    const { navigateToUrl, siteSettings, isUserAuthenticated, themeMode } = useNavigation()
     const shortcuts = siteSettings.shortcuts
     const themedStyles = getShortcutsMenuStyles(themeMode)
 
@@ -19,6 +28,18 @@ 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

@@ -32,13 +32,13 @@ export interface NavigationContextType {
   navigateToUrl: (url: string, openInLine: boolean) => void
   isDesk: boolean
   appsList: AppData[]
+  fetchUserAppsList: (name?: string) => Promise<void>
   userData: UserData | null
   siteSettings: SiteSettings
   appSettings: AppSettings
   appSettingsLoaded: boolean
   appName?: string
-  chatUrl: string
-  sessionToken: string
+  jwtToken: string
   isUserAuthenticated: boolean
   client: Client
   auth: Auth