mintify layout

Author: sutigit

src/client/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect } from 'react'
 import { Outlet, useLocation, useParams } from 'react-router-dom'
 import { SnackbarProvider } from 'notistack'
 import { initShibbolethPinger } from 'unfuck-spa-shibboleth-session'
@@ -69,7 +69,6 @@ const AdminLoggedInAsBanner = () => {
 
 const App = () => {
   const theme = useTheme()
-  const appRef = useRef<HTMLDivElement>(null)
   const { courseId } = useParams()
   const location = useLocation()
 
@@ -95,9 +94,9 @@ const App = () => {
       <CssBaseline />
       <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={fi}>
         <SnackbarProvider preventDuplicate>
-          <Box minHeight="100vh" height="100vh" display="flex" flexDirection="column" ref={appRef}>
+          <Box minHeight="100vh" height="100vh" display="flex" flexDirection="column">
             <NavBar />
-            <Box component="main" sx={{ flex: 1 }}>
+            <Box sx={{ flex: 1 }}>
               <Outlet />
             </Box>
             <Footer />

src/client/components/ChatV2/ChatV2.tsx

@@ -203,7 +203,6 @@ export const ChatV2 = () => {
   return (
     <Box
       sx={{
-        flex: 1,
         display: 'flex',
         flexDirection: 'row',
         height: '100%',
@@ -228,10 +227,9 @@ export const ChatV2 = () => {
       <Box
         sx={{
           flex: 4,
-          position: 'relative',
           display: 'flex',
+          position: 'relative',
           flexDirection: 'column',
-          height: '100%',
         }}
       >
         <Box
@@ -264,9 +262,11 @@ export const ChatV2 = () => {
           </SettingsButton>
         </Box>
 
-        <Conversation messages={messages} completion={completion} fileSearchResult={fileSearchResult} />
+        <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column', gap: 3, width: '70%', minWidth: 600, margin: 'auto', paddingBottom: '5rem' }}>
+          <Conversation messages={messages} completion={completion} fileSearchResult={fileSearchResult} />
+        </Box>
 
-        <Box sx={{ position: 'sticky', bottom: 0, backgroundColor: 'white', paddingBottom: '1.2rem' }}>
+        <Box sx={{ position: 'sticky', bottom: 0, backgroundColor: 'white', paddingBottom: '1.5rem' }}>
           <ChatBox
             disabled={false}
             onSubmit={(message) => {
@@ -280,7 +280,7 @@ export const ChatV2 = () => {
       </Box>
 
       {/* Annotations columns */}
-      <Box sx={{ flex: 1, borderLeft: '1px solid lightgray', position: 'relative' }}>
+      <Box sx={{ flex: 1, borderLeft: 'none', position: 'relative' }}>
         {ragIndex && (
           <Box sx={{ position: 'sticky', top: 0 }}>
             <CitationsBox messages={messages} fileSearchResult={fileSearchResult} />

src/client/components/ChatV2/Conversation.tsx

@@ -21,11 +21,11 @@ const MessageItem = ({ message }: { message: Message }) => (
 )
 
 export const Conversation = ({ messages, completion, fileSearchResult }: { messages: Message[]; completion: string; fileSearchResult: FileSearchResult }) => (
-  <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 3, width: '70%', minWidth: 600, margin: 'auto', paddingBottom: '5rem' }}>
+  <>
     {messages.length === 0 && <ConversationSplash />}
     {messages.map((message, idx) => (
       <MessageItem key={idx} message={message} />
     ))}
     {completion && <MessageItem message={{ role: 'assistant', content: completion, fileSearchResult }} />}
-  </Box>
+  </>
 )

src/client/components/ChatV2/generics/ConversationSplash.tsx

@@ -9,7 +9,7 @@ export const ConversationSplash = () => (
       flexDirection: 'column',
       justifyContent: 'center',
       alignItems: 'center',
-      height: '40rem',
+      height: '100%',
       transition: 'opacity 0.6s, transform 0.6s',
       opacity: 1,
       transform: 'scale(1)',