layoiut improvements

Author: Veikkosuhonen

src/client/App.tsx

@@ -126,10 +126,9 @@ const Layout = () => {
         ref={appRef}
       >
         {!isEmbedded && <NavBar />}
-        <Box sx={{ flex: 1 }}>
+        <Box sx={{ flex: 1, overscrollBehavior: 'none' }}>
           <Outlet />
         </Box>
-        {!isEmbedded && <Footer />}
         <Feedback />
       </Box>
       <AdminLoggedInAsBanner />

src/client/components/ChatV2/Annotations.tsx

@@ -202,7 +202,7 @@ const Annotations = ({ fileSearchResult, setShowAnnotations }: { fileSearchResul
       p={{ xs: 1, md: 3 }}
       sx={{
         width: '100%',
-        height: '90vh',
+        height: '100%',
         display: 'flex',
         flexDirection: 'column',
         overflowY: 'scroll',

src/client/components/ChatV2/ChatV2.tsx

@@ -34,6 +34,7 @@ import EmailButton from './EmailButton'
 import { MenuBookTwoTone, Tune } from '@mui/icons-material'
 import { useChatScroll } from '../../hooks/useChatScroll'
 import { TestUseInfoV2 } from './TestUseInfo'
+import Footer from '../Footer'
 
 function useLocalStorageStateWithURLDefault(key: string, defaultValue: string, urlKey: string) {
   const [value, setValue] = useLocalStorageState(key, defaultValue)
@@ -347,10 +348,11 @@ export const ChatV2 = () => {
       sx={{
         display: 'flex',
         flexDirection: 'row',
-        height: '100%',
+        // height: '100%',
         width: '100%',
         maxWidth: '100%',
         overflowX: 'clip',
+        overscrollBehavior: 'none',
       }}
     >
       {/* Chat side panel column -------------------------------------------------------------------------------------------*/}
@@ -378,7 +380,7 @@ export const ChatV2 = () => {
             />
           </Drawer>
           <LeftMenu
-            sx={{ display: { xs: 'none', lg: 'block' }, position: 'sticky', bottom: '0px' }}
+            sx={{ display: { xs: 'none', lg: 'flex' }, position: 'sticky', top: 0 }}
             course={course}
             handleReset={handleReset}
             user={user}
@@ -403,16 +405,13 @@ export const ChatV2 = () => {
           display: 'flex',
           position: 'relative',
           flexDirection: 'column',
-          height: '100%',
           overflowY: 'visible',
           // Padding for navbar
           paddingTop: !isEmbeddedMode ? '4rem' : '0',
         }}
       >
         <Box
           sx={(theme) => ({
-            height: '80vh',
-
             [theme.breakpoints.down('sm')]: {
               width: '95%',
               maxWidth: '95%',
@@ -557,21 +556,19 @@ export const ChatV2 = () => {
       {!isMobile && showAnnotations && activeFileSearchResult && (
         <Box
           sx={{
-            flex: 0,
-            position: 'relative',
+            maxWidth: { xs: 300, md: 400 },
+            height: '100vh',
+            display: 'flex',
+            flexDirection: 'column',
+            flex: 1,
+            position: 'sticky',
+            top: 0,
             borderLeft: '1px solid rgba(0,0,0,0.12)',
             width: 400,
             minWidth: 400,
           }}
         >
-          <Box
-            sx={{
-              position: 'sticky',
-              top: 20,
-            }}
-          >
-            <Annotations fileSearchResult={activeFileSearchResult} setShowAnnotations={setShowAnnotations} />
-          </Box>
+          <Annotations fileSearchResult={activeFileSearchResult} setShowAnnotations={setShowAnnotations} />
         </Box>
       )}
 
@@ -606,32 +603,37 @@ const LeftMenu = ({
   messages,
 }) => {
   return (
-    <Box sx={sx}>
-      <Box
-        sx={{
+    <Box
+      sx={[
+        {
           flex: 1,
           minWidth: 300,
           maxWidth: { xs: 300, md: 400 },
           position: 'relative',
-          height: '100%',
+          height: '100vh',
           borderRight: '1px solid rgba(0, 0, 0, 0.12)',
-        }}
-      >
-        <Box sx={{ position: 'sticky', top: 70, padding: '2rem 1.5rem' }}>
-          {course && <ChatInfo course={course} />}
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: '0.6rem', mb: '2rem' }}>
-            <OutlineButtonBlack startIcon={<RestartAltIcon />} onClick={handleReset} id="empty-conversation-button">
-              {t('chat:emptyConversation')}
-            </OutlineButtonBlack>
-
-            <EmailButton messages={messages} disabled={!messages?.length} />
-            <OutlineButtonBlack startIcon={<Tune />} onClick={() => setSettingsModalOpen(true)} id="settings-button">
-              {t('chat:settings')}
-            </OutlineButtonBlack>
-            <OutlineButtonBlack startIcon={<HelpIcon />} onClick={() => setDisclaimerStatus(true)} id="help-button">
-              {t('info:title')}
-            </OutlineButtonBlack>
-          </Box>
+          paddingTop: '4rem',
+
+          display: 'flex',
+          flexDirection: 'column',
+        },
+        sx,
+      ]}
+    >
+      <Box p="1rem">
+        {course && <ChatInfo course={course} />}
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: '0.6rem', mb: '2rem' }}>
+          <OutlineButtonBlack startIcon={<RestartAltIcon />} onClick={handleReset} id="empty-conversation-button">
+            {t('chat:emptyConversation')}
+          </OutlineButtonBlack>
+
+          <EmailButton messages={messages} disabled={!messages?.length} />
+          <OutlineButtonBlack startIcon={<Tune />} onClick={() => setSettingsModalOpen(true)} id="settings-button">
+            {t('chat:settings')}
+          </OutlineButtonBlack>
+          <OutlineButtonBlack startIcon={<HelpIcon />} onClick={() => setDisclaimerStatus(true)} id="help-button">
+            {t('info:title')}
+          </OutlineButtonBlack>
           {course && showRagSelector && (
             <>
               <Typography variant="h6" sx={{ mb: 1, display: 'flex', gap: 1, alignItems: 'center' }} fontWeight="bold">
@@ -645,7 +647,8 @@ const LeftMenu = ({
             </>
           )}
         </Box>
-      </Box>{' '}
+      </Box>
+      <Footer />
     </Box>
   )
 }

src/client/components/Footer/index.tsx

@@ -12,18 +12,11 @@ const supportEmail = '[email protected]'
 
 const styles = {
   supportBox: {
-    py: '1rem',
-    px: '3rem',
+    p: '1rem',
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
   },
-  imageBox: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    rowGap: '1rem',
-  },
 }
 
 const Footer = () => {
@@ -43,8 +36,6 @@ const Footer = () => {
     <Box
       component="footer"
       sx={(theme) => ({
-        backgroundColor: theme.palette.toskaDark.main,
-        color: theme.palette.toskaDark.contrastText,
         mt: 'auto',
         width: '100%',
       })}
@@ -63,7 +54,7 @@ const Footer = () => {
           <Typography variant="caption">{t('footer:version', { version: changelog?.[0]?.version, publishedAgo })}</Typography>
         </Box>
 
-        <Box sx={styles.imageBox}>
+        <Box>
           <Link href="https://toska.dev" target="_blank" rel="noopener" underline="hover">
             <img src={toskaColor} alt="Toska" width="70" />
           </Link>

src/client/styles.css

@@ -39,3 +39,7 @@
       100% 100%;
   }
 }
+
+/*body {
+  overscroll-behavior: none;
+}*/

src/server/util/azure/mocks/MockStream.ts

@@ -24,7 +24,7 @@ class MockStream {
     while (this.index < this.events.length) {
       // Longer delay for simulating responses creation
       if (this.index === 0) {
-        await new Promise((r) => setTimeout(r, 800))
+        await new Promise((r) => setTimeout(r, 400))
       }
 
       const event = this.events[this.index++]