Merge pull request #762 from helixml/703-fix-nav-bug

various frontend fixes

frontend/src/components/app/PreviewPanel.tsx

@@ -108,7 +108,9 @@ const PreviewPanel: React.FC<PreviewPanelProps> = ({
         backgroundPosition: 'top',
         backgroundRepeat: 'no-repeat',
         backgroundSize: image ? 'cover' : 'auto',
-        p: 2,
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
         borderRight: '1px solid #303047',
         borderBottom: '1px solid #303047',
       }}
@@ -126,14 +128,17 @@ const PreviewPanel: React.FC<PreviewPanelProps> = ({
           }}
         />
       )}
+      {/* Fixed Preview Bar */}
       <Box
         sx={{
-          mb: 3,
+          p: 2,
+          flexShrink: 0,
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
           position: 'relative',
           zIndex: 2,
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
         }}
       >
         <Typography variant="h6" sx={{mb: 2, color: 'white'}}>
@@ -213,12 +218,15 @@ const PreviewPanel: React.FC<PreviewPanelProps> = ({
           )}
         </Box>
       </Box>
+      {/* Scrollable Results Area */}
       <Box
         sx={{
           position: 'relative',
           zIndex: 2,
+          flexGrow: 1,
           overflowY: 'auto',
-          maxHeight: 'calc(100vh - 300px)',
+          p: 2,
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
         }}
       >
         {isSearchMode ? (

frontend/src/components/create/AppPicker.tsx

@@ -0,0 +1,112 @@
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
+import WebAssetIcon from '@mui/icons-material/WebAsset'
+import Box from '@mui/material/Box'
+import IconButton from '@mui/material/IconButton'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import Typography from '@mui/material/Typography'
+import React, { FC, useState } from 'react'
+import useLightTheme from '../../hooks/useLightTheme'
+import useIsBigScreen from '../../hooks/useIsBigScreen'
+import { IApp } from '../../types'
+
+const AppPicker: FC<{
+  apps: IApp[],
+  selectedApp?: IApp,
+  onSelectApp: (app: IApp | undefined) => void,
+}> = ({
+  apps,
+  selectedApp,
+  onSelectApp,
+}) => {
+  const lightTheme = useLightTheme()
+  const isBigScreen = useIsBigScreen()
+  const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLElement>()
+
+  const handleOpenMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setMenuAnchorEl(event.currentTarget)
+  }
+
+  const handleCloseMenu = () => {
+    setMenuAnchorEl(undefined)
+  }
+
+  // Only show the picker if there are apps
+  if (apps.length === 0) return null
+
+  return (
+    <>
+      {isBigScreen ? (
+        <Typography
+          component="h1"
+          variant="h6"
+          color="inherit"
+          noWrap
+          onClick={handleOpenMenu}
+          sx={{
+            flexGrow: 1,
+            mx: 0,
+            color: 'text.primary',
+            borderRadius: '15px',
+            cursor: "pointer",
+            "&:hover": {
+              backgroundColor: lightTheme.isLight ? "#efefef" : "#13132b",
+            },
+          }}
+        >
+          {selectedApp?.config.helix.name || 'Default App'} <KeyboardArrowDownIcon sx={{position:"relative", top:"5px"}}/>&nbsp;
+        </Typography>
+      ) : (
+        <IconButton
+          onClick={handleOpenMenu}
+          sx={{
+            color: 'text.primary',
+          }}
+        >
+          <WebAssetIcon />
+        </IconButton>
+      )}
+      <Box component="span" sx={{ display: 'flex', alignItems: 'center' }}>
+        <Menu
+          anchorEl={menuAnchorEl}
+          open={Boolean(menuAnchorEl)}
+          onClose={handleCloseMenu}
+          sx={{marginTop: isBigScreen ? "50px" : "0px"}}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left',
+          }}
+          transformOrigin={{
+            vertical: 'center',
+            horizontal: 'left',
+          }}
+        >
+          <MenuItem
+            key="default"
+            sx={{fontSize: "large"}}
+            onClick={() => {
+              onSelectApp(undefined)
+              handleCloseMenu()
+            }}
+          >
+            Default App
+          </MenuItem>
+          {apps.map(app => (
+            <MenuItem
+              key={app.id}
+              sx={{fontSize: "large"}}
+              onClick={() => {
+                onSelectApp(app)
+                handleCloseMenu()
+              }}
+            >
+              {app.config.helix.name} {app.config.helix.description && <>&nbsp; <small>({app.config.helix.description})</small></>}
+            </MenuItem>
+          ))}
+        </Menu>
+      </Box>
+    </>
+  )
+}
+
+export default AppPicker 

frontend/src/components/create/ModelPicker.tsx

@@ -1,10 +1,13 @@
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
+import ExtensionIcon from '@mui/icons-material/Extension'
 import Box from '@mui/material/Box'
+import IconButton from '@mui/material/IconButton'
 import Menu from '@mui/material/Menu'
 import MenuItem from '@mui/material/MenuItem'
 import Typography from '@mui/material/Typography'
-import React, { FC, useContext, useEffect, useState } from 'react'
+import React, { FC, useContext, useState, useMemo } from 'react'
 import { AccountContext } from '../../contexts/account'
+import useIsBigScreen from '../../hooks/useIsBigScreen'
 import useLightTheme from '../../hooks/useLightTheme'
 
 const ModelPicker: FC<{
@@ -17,6 +20,7 @@ const ModelPicker: FC<{
   onSetModel
 }) => {
   const lightTheme = useLightTheme()
+  const isBigScreen = useIsBigScreen()
   const [modelMenuAnchorEl, setModelMenuAnchorEl] = useState<HTMLElement>()
   const { models } = useContext(AccountContext)
 
@@ -30,43 +34,49 @@ const ModelPicker: FC<{
 
   const modelData = models.find(m => m.id === model) || models[0];
 
-  const filteredModels = models.filter(m => m.type && m.type === type || (type === "text" && m.type === "chat"))
+  const filteredModels = useMemo(() => {
+    return models.filter(m => m.type && m.type === type || (type === "text" && m.type === "chat"))
+  }, [models, type])
 
-  useEffect(() => {
-    // Set the first model as default if current model is not set or not in the list
-    if (filteredModels.length > 0 && (!model || model === '' || !filteredModels.some(m => m.id === model))) {
-      onSetModel(filteredModels[0].id);
-    }
-  }, [filteredModels, model, onSetModel])
-
   return (
     <>
-      <Typography
-        className="inferenceTitle"
-        component="h1"
-        variant="h6"
-        color="inherit"
-        noWrap
-        onClick={ handleOpenMenu }
-        sx={{
-          flexGrow: 1,
-          mx: 0,
-          color: 'text.primary',
-          borderRadius: '15px',
-          cursor: "pointer",
-          "&:hover": {
-            backgroundColor: lightTheme.isLight ? "#efefef" : "#13132b",
-          },
-        }}
-      >
-        {modelData?.name || 'Default Model'} <KeyboardArrowDownIcon sx={{position:"relative", top:"5px"}}/>&nbsp;
-      </Typography>
+      {isBigScreen ? (
+        <Typography
+          className="inferenceTitle"
+          component="h1"
+          variant="h6"
+          color="inherit"
+          noWrap
+          onClick={handleOpenMenu}
+          sx={{
+            flexGrow: 1,
+            mx: 0,
+            color: 'text.primary',
+            borderRadius: '15px',
+            cursor: "pointer",
+            "&:hover": {
+              backgroundColor: lightTheme.isLight ? "#efefef" : "#13132b",
+            },
+          }}
+        >
+          {modelData?.name || 'Default Model'} <KeyboardArrowDownIcon sx={{position:"relative", top:"5px"}}/>&nbsp;
+        </Typography>
+      ) : (
+        <IconButton
+          onClick={handleOpenMenu}
+          sx={{
+            color: 'text.primary',
+          }}
+        >
+          <ExtensionIcon />
+        </IconButton>
+      )}
       <Box component="span" sx={{ display: 'flex', alignItems: 'center' }}>
         <Menu
           anchorEl={modelMenuAnchorEl}
           open={Boolean(modelMenuAnchorEl)}
           onClose={handleCloseMenu}
-          sx={{marginTop:"50px"}}
+          sx={{marginTop: isBigScreen ? "50px" : "0px"}}
           anchorOrigin={{
             vertical: 'bottom',
             horizontal: 'left',
@@ -79,14 +89,14 @@ const ModelPicker: FC<{
           {
             filteredModels.map(model => (
               <MenuItem
-                key={ model.id }
+                key={model.id}
                 sx={{fontSize: "large"}}
                 onClick={() => {
                   onSetModel(model.id)
                   handleCloseMenu()
                 }}
               >
-                { model.name } {model.description && <>&nbsp; <small>({model.description})</small></>}
+                {model.name} {model.description && <>&nbsp; <small>({model.description})</small></>}
               </MenuItem>
             ))
           }

frontend/src/components/create/Toolbar.tsx

@@ -2,16 +2,19 @@ import ConstructionIcon from '@mui/icons-material/Construction'
 import LoginIcon from '@mui/icons-material/Login'
 import Button from '@mui/material/Button'
 import IconButton from '@mui/material/IconButton'
-import { FC } from 'react'
+import { FC, useEffect } from 'react'
 
 import Cell from '../widgets/Cell'
 import Row from '../widgets/Row'
 import ModelPicker from './ModelPicker'
+import AppPicker from './AppPicker'
 import SessionModeDropdown from './SessionModeDropdown'
 import SessionModeSwitch from './SessionModeSwitch'
 
 import useAccount from '../../hooks/useAccount'
 import useIsBigScreen from '../../hooks/useIsBigScreen'
+import useApps from '../../hooks/useApps'
+import useRouter from '../../hooks/useRouter'
 
 import {
   IApp,
@@ -39,20 +42,36 @@ const CreateToolbar: FC<{
 }) => {
   const bigScreen = useIsBigScreen()
   const account = useAccount()
+  const {
+    navigate,
+  } = useRouter()
+  const {
+    data: apps,
+    loadData,
+  } = useApps()
   const appRequested = new URLSearchParams(window.location.search).get('app_id') || '';
+
+  useEffect(() => {
+    if (!account.user) return
+    loadData()
+  }, [account.user])
+
   return (
     <Row>
-      <Cell>
-        {
-          !(app || appRequested) && mode === SESSION_MODE_INFERENCE && (
-            <ModelPicker
-              type={type}
-              model={model || ''}
-              onSetModel={onSetModel}
-            />
-          )
-        }
-      </Cell>
+      {!appRequested && apps.length > 0 && mode == SESSION_MODE_INFERENCE && (
+        <Cell>
+          <AppPicker
+            apps={apps}
+            selectedApp={app}
+            onSelectApp={(app) => {
+              if(!app) return
+              navigate('new', {
+                app_id: app.id,
+              })
+            }}
+          />
+        </Cell>
+      )}
       <Cell grow>
 
       </Cell>
@@ -70,7 +89,18 @@ const CreateToolbar: FC<{
           </Cell>
         )
       }
-      {
+      <Cell>
+        {
+          !(app || appRequested) && mode === SESSION_MODE_INFERENCE && (
+            <ModelPicker
+              type={type}
+              model={model || ''}
+              onSetModel={onSetModel}
+            />
+          )
+        }
+      </Cell>
+      {/* {
         !app && (
           <Cell>
             {
@@ -88,7 +118,7 @@ const CreateToolbar: FC<{
             }
           </Cell>
         )
-      }
+      } */}
       <Cell>
         {
           !account.user && (bigScreen ? (