From 7c9ce6c98b255991ec6e6231a650a805c9ce8edf Mon Sep 17 00:00:00 2001
From: SuperTurk <alim.tunc@outlook.fr>
Date: Mon, 16 Oct 2023 11:43:29 +0200
Subject: [PATCH 1/5] fix: Improve UX for mobile user

---
 .../src/components/organisms/chat/index.tsx   | 18 ++++---
 .../sidebar/OpenChatHistoryButton.tsx         | 48 +++++++++++++++++++
 .../conversationsHistory/sidebar/index.tsx    | 41 ++++++----------
 frontend/src/components/organisms/header.tsx  | 18 +++----
 frontend/src/pages/Page.tsx                   |  2 +
 frontend/src/state/settings.ts                |  2 +
 6 files changed, 88 insertions(+), 41 deletions(-)
 create mode 100644 frontend/src/components/organisms/conversationsHistory/sidebar/OpenChatHistoryButton.tsx

diff --git a/frontend/src/components/organisms/chat/index.tsx b/frontend/src/components/organisms/chat/index.tsx
index 3ebe2af49b..034620c438 100644
--- a/frontend/src/components/organisms/chat/index.tsx
+++ b/frontend/src/components/organisms/chat/index.tsx
@@ -157,16 +157,22 @@ const Chat = () => {
       ) : null}
       <SideView>
         <TaskList tasklist={tasklist} isMobile={true} />
-
-        <Box my={1} />
         {error && (
-          <Alert id="session-error" severity="error">
-            Could not reach the server.
-          </Alert>
+          <Box
+            sx={{
+              width: '100%',
+              maxWidth: '60rem',
+              mx: 'auto',
+              my: 2
+            }}
+          >
+            <Alert sx={{ mx: 2 }} id="session-error" severity="error">
+              Could not reach the server.
+            </Alert>
+          </Box>
         )}
         <ErrorBoundary>
           <ChatProfiles />
-
           {!messages.length && pSettings?.ui.show_readme_as_default ? (
             <WelcomeScreen />
           ) : (
diff --git a/frontend/src/components/organisms/conversationsHistory/sidebar/OpenChatHistoryButton.tsx b/frontend/src/components/organisms/conversationsHistory/sidebar/OpenChatHistoryButton.tsx
new file mode 100644
index 0000000000..6fdc0ef725
--- /dev/null
+++ b/frontend/src/components/organisms/conversationsHistory/sidebar/OpenChatHistoryButton.tsx
@@ -0,0 +1,48 @@
+import { useRecoilState } from 'recoil';
+
+import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+
+import { settingsState } from 'state/settings';
+
+const OpenChatHistoryButton = ({ mode }: { mode: 'mobile' | 'desktop' }) => {
+  const [settings, setSettings] = useRecoilState(settingsState);
+  const isDesktop = mode === 'desktop';
+
+  return !settings.isChatHistoryOpen ? (
+    <Box
+      sx={
+        isDesktop
+          ? {
+              zIndex: 1,
+              mt: 1,
+              ml: 1,
+              display: 'none',
+              '@media (min-width: 66rem)': {
+                position: 'absolute',
+                display: 'block'
+              }
+            }
+          : {}
+      }
+    >
+      <IconButton
+        sx={{
+          borderRadius: isDesktop ? 1 : 8,
+          backgroundColor: (theme) => theme.palette.background.paper
+        }}
+        onClick={() =>
+          setSettings((prev) => ({
+            ...prev,
+            isChatHistoryOpen: true
+          }))
+        }
+      >
+        <KeyboardDoubleArrowRightIcon />
+      </IconButton>
+    </Box>
+  ) : null;
+};
+
+export default OpenChatHistoryButton;
diff --git a/frontend/src/components/organisms/conversationsHistory/sidebar/index.tsx b/frontend/src/components/organisms/conversationsHistory/sidebar/index.tsx
index fed44e0149..9b13775849 100644
--- a/frontend/src/components/organisms/conversationsHistory/sidebar/index.tsx
+++ b/frontend/src/components/organisms/conversationsHistory/sidebar/index.tsx
@@ -4,8 +4,6 @@ import { useEffect, useRef, useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
 import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
-import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
-import Box from '@mui/material/Box';
 import Drawer from '@mui/material/Drawer';
 import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
@@ -20,6 +18,7 @@ import {
   conversationsHistoryState
 } from 'state/conversations';
 import { projectSettingsState } from 'state/project';
+import { settingsState } from 'state/settings';
 import { accessTokenState } from 'state/user';
 
 import { ConversationsHistoryList } from './ConversationsHistoryList';
@@ -31,15 +30,15 @@ const BATCH_SIZE = 20;
 let _scrollTop = 0;
 
 const _ConversationsHistorySidebar = () => {
-  const isMobile = useMediaQuery('(max-width:800px)');
+  const isMobile = useMediaQuery('(max-width:66rem)');
 
   const [conversations, setConversations] = useRecoilState(
     conversationsHistoryState
   );
   const accessToken = useRecoilValue(accessTokenState);
   const filters = useRecoilValue(conversationsFiltersState);
+  const [settings, setSettings] = useRecoilState(settingsState);
 
-  const [open, setOpen] = useState(true);
   const [shouldLoadMore, setShouldLoadMore] = useState(false);
   const [error, setError] = useState<string | undefined>(undefined);
   const [prevFilters, setPrevFilters] =
@@ -98,10 +97,17 @@ const _ConversationsHistorySidebar = () => {
     }
   };
 
+  const setChatHistoryOpen = (open: boolean) =>
+    setSettings((prev) => ({ ...prev, isChatHistoryOpen: open }));
+
   useEffect(() => {
     if (ref.current) {
       ref.current.scrollTop = _scrollTop;
     }
+
+    if (isMobile) {
+      setChatHistoryOpen(false);
+    }
   }, []);
 
   useEffect(() => {
@@ -135,7 +141,7 @@ const _ConversationsHistorySidebar = () => {
       <Drawer
         className="chat-history-drawer"
         anchor="left"
-        open={open}
+        open={settings.isChatHistoryOpen}
         variant={isMobile ? 'temporary' : 'persistent'}
         hideBackdrop
         PaperProps={{
@@ -143,7 +149,7 @@ const _ConversationsHistorySidebar = () => {
           onScroll: handleScroll
         }}
         sx={{
-          width: open ? DRAWER_WIDTH : 0,
+          width: settings.isChatHistoryOpen ? DRAWER_WIDTH : 0,
           '& .MuiDrawer-paper': {
             position: 'inherit',
             gap: 1,
@@ -171,8 +177,8 @@ const _ConversationsHistorySidebar = () => {
           >
             Chat History
           </Typography>
-          <IconButton edge="end" onClick={() => setOpen(false)}>
-            <KeyboardDoubleArrowLeftIcon sx={{ color: 'grey.500' }} />
+          <IconButton edge="end" onClick={() => setChatHistoryOpen(false)}>
+            <KeyboardDoubleArrowLeftIcon sx={{ color: 'text.primary' }} />
           </IconButton>
         </Stack>
         <Filters />
@@ -186,25 +192,6 @@ const _ConversationsHistorySidebar = () => {
           />
         ) : null}
       </Drawer>
-      <Box
-        sx={{
-          position: 'absolute',
-          mt: 1,
-          ml: 1,
-          zIndex: !open ? 1 : -1,
-          opacity: !open ? 1 : 0
-        }}
-      >
-        <IconButton
-          sx={{
-            borderRadius: 1,
-            backgroundColor: (theme) => theme.palette.background.paper
-          }}
-          onClick={() => setOpen(true)}
-        >
-          <KeyboardDoubleArrowRightIcon />
-        </IconButton>
-      </Box>
     </>
   );
 };
diff --git a/frontend/src/components/organisms/header.tsx b/frontend/src/components/organisms/header.tsx
index 5d4a4d7a68..cc67007f3d 100644
--- a/frontend/src/components/organisms/header.tsx
+++ b/frontend/src/components/organisms/header.tsx
@@ -10,9 +10,7 @@ import {
   IconButton,
   Menu,
   Stack,
-  Theme,
-  Toolbar,
-  useTheme
+  Toolbar
 } from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
 
@@ -23,8 +21,12 @@ import UserButton from 'components/atoms/buttons/userButton';
 import { Logo } from 'components/atoms/logo';
 import NewChatButton from 'components/molecules/newChatButton';
 
+import { useAuth } from 'hooks/auth';
+
 import { projectSettingsState } from 'state/project';
 
+import OpenChatHistoryButton from './conversationsHistory/sidebar/OpenChatHistoryButton';
+
 interface INavItem {
   to: string;
   label: string;
@@ -63,7 +65,7 @@ interface NavProps {
 
 function Nav({ hasReadme }: NavProps) {
   const location = useLocation();
-  const theme = useTheme();
+  const { isAuthenticated } = useAuth();
   const [open, setOpen] = useState(false);
   const ref = useRef<any>();
 
@@ -73,8 +75,7 @@ function Nav({ hasReadme }: NavProps) {
     anchorEl = ref.current;
   }
 
-  const matches = useMediaQuery(theme.breakpoints.down('md'));
-
+  const matches = useMediaQuery('(max-width: 66rem)');
   const tabs = [{ to: '/', label: 'Chat' }];
 
   if (hasReadme) {
@@ -105,6 +106,7 @@ function Nav({ hasReadme }: NavProps) {
         >
           <MenuIcon />
         </IconButton>
+        {isAuthenticated ? <OpenChatHistoryButton mode="mobile" /> : null}
         <Menu
           autoFocus
           anchorEl={anchorEl}
@@ -139,7 +141,7 @@ function Nav({ hasReadme }: NavProps) {
 
 export default function Header() {
   const pSettings = useRecoilValue(projectSettingsState);
-  const matches = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
+  const matches = useMediaQuery('(max-width: 66rem)');
 
   return (
     <AppBar elevation={0} color="transparent" position="static">
@@ -153,7 +155,7 @@ export default function Header() {
           borderBottomColor: (theme) => theme.palette.divider
         }}
       >
-        <Stack alignItems="center" direction={'row'} gap={3}>
+        <Stack alignItems="center" direction={'row'} gap={!matches ? 3 : 1}>
           {!matches ? <Logo style={{ maxHeight: '25px' }} /> : null}
           <Nav hasReadme={!!pSettings?.markdown} />
         </Stack>
diff --git a/frontend/src/pages/Page.tsx b/frontend/src/pages/Page.tsx
index 6ab43ebece..7138e10774 100644
--- a/frontend/src/pages/Page.tsx
+++ b/frontend/src/pages/Page.tsx
@@ -5,6 +5,7 @@ import { useRecoilValue } from 'recoil';
 import { Alert, Box, Stack } from '@mui/material';
 
 import { ConversationsHistorySidebar } from 'components/organisms/conversationsHistory/sidebar';
+import OpenChatHistoryButton from 'components/organisms/conversationsHistory/sidebar/OpenChatHistoryButton';
 import Header from 'components/organisms/header';
 
 import { useAuth } from 'hooks/auth';
@@ -47,6 +48,7 @@ const Page = ({ children }: Props) => {
       ) : (
         <Stack direction="row" height="100%" width="100%" overflow="auto">
           <ConversationsHistorySidebar />
+          <OpenChatHistoryButton mode={'desktop'} />
           {children}
         </Stack>
       )}
diff --git a/frontend/src/state/settings.ts b/frontend/src/state/settings.ts
index c56b6063ef..ece6936086 100644
--- a/frontend/src/state/settings.ts
+++ b/frontend/src/state/settings.ts
@@ -15,6 +15,7 @@ export const defaultSettingsState = {
   defaultCollapseContent: true,
   expandAll: false,
   hideCot: false,
+  isChatHistoryOpen: true,
   theme
 };
 
@@ -24,6 +25,7 @@ export const settingsState = atom<{
   expandAll: boolean;
   hideCot: boolean;
   theme: ThemeVariant;
+  isChatHistoryOpen: boolean;
 }>({
   key: 'AppSettings',
   default: defaultSettingsState

From 1aedef2188748ac89004336b9cca422da7084aa4 Mon Sep 17 00:00:00 2001
From: SuperTurk <alim.tunc@outlook.fr>
Date: Mon, 16 Oct 2023 14:23:18 +0200
Subject: [PATCH 2/5] style: Trigger error on unused vars

---
 .eslintrc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.eslintrc b/.eslintrc
index d315386999..c173037fa1 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -12,7 +12,7 @@
     "@typescript-eslint/no-explicit-any": "off",
     "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": [
-      "warn", // or "error"
+      "error",
       {
         "argsIgnorePattern": "^_",
         "varsIgnorePattern": "^_",

From 57ca09d6d90a5aacda476fa31f6c11befb56e2aa Mon Sep 17 00:00:00 2001
From: Willy Douhard <willy.douhard@gmail.com>
Date: Mon, 16 Oct 2023 19:16:05 +0200
Subject: [PATCH 3/5] add data persistence check

---
 .../src/components/organisms/chat/index.tsx    |  1 +
 frontend/src/components/organisms/header.tsx   | 18 ++++++++++++------
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/organisms/chat/index.tsx b/frontend/src/components/organisms/chat/index.tsx
index 034620c438..bd8d16e713 100644
--- a/frontend/src/components/organisms/chat/index.tsx
+++ b/frontend/src/components/organisms/chat/index.tsx
@@ -156,6 +156,7 @@ const Chat = () => {
         </>
       ) : null}
       <SideView>
+        <Box my={1} />
         <TaskList tasklist={tasklist} isMobile={true} />
         {error && (
           <Box
diff --git a/frontend/src/components/organisms/header.tsx b/frontend/src/components/organisms/header.tsx
index cc67007f3d..7b489cde82 100644
--- a/frontend/src/components/organisms/header.tsx
+++ b/frontend/src/components/organisms/header.tsx
@@ -60,10 +60,11 @@ function NavItem({ to, label }: INavItem) {
 }
 
 interface NavProps {
+  dataPersistence?: boolean;
   hasReadme?: boolean;
 }
 
-function Nav({ hasReadme }: NavProps) {
+function Nav({ dataPersistence, hasReadme }: NavProps) {
   const location = useLocation();
   const { isAuthenticated } = useAuth();
   const [open, setOpen] = useState(false);
@@ -75,7 +76,7 @@ function Nav({ hasReadme }: NavProps) {
     anchorEl = ref.current;
   }
 
-  const matches = useMediaQuery('(max-width: 66rem)');
+  const isMobile = useMediaQuery('(max-width: 66rem)');
   const tabs = [{ to: '/', label: 'Chat' }];
 
   if (hasReadme) {
@@ -83,7 +84,7 @@ function Nav({ hasReadme }: NavProps) {
   }
 
   const nav = (
-    <Stack direction={matches ? 'column' : 'row'} spacing={1}>
+    <Stack direction={isMobile ? 'column' : 'row'} spacing={1}>
       {tabs.map((t) => {
         const active = location.pathname === t.to;
         return (
@@ -95,7 +96,7 @@ function Nav({ hasReadme }: NavProps) {
     </Stack>
   );
 
-  if (matches) {
+  if (isMobile) {
     return (
       <>
         <IconButton
@@ -106,7 +107,9 @@ function Nav({ hasReadme }: NavProps) {
         >
           <MenuIcon />
         </IconButton>
-        {isAuthenticated ? <OpenChatHistoryButton mode="mobile" /> : null}
+        {isAuthenticated && dataPersistence ? (
+          <OpenChatHistoryButton mode="mobile" />
+        ) : null}
         <Menu
           autoFocus
           anchorEl={anchorEl}
@@ -157,7 +160,10 @@ export default function Header() {
       >
         <Stack alignItems="center" direction={'row'} gap={!matches ? 3 : 1}>
           {!matches ? <Logo style={{ maxHeight: '25px' }} /> : null}
-          <Nav hasReadme={!!pSettings?.markdown} />
+          <Nav
+            dataPersistence={pSettings?.dataPersistence}
+            hasReadme={!!pSettings?.markdown}
+          />
         </Stack>
         <Stack
           alignItems="center"

From 4c9e5450ac0012339e094854dbd40a23c5a65f8c Mon Sep 17 00:00:00 2001
From: Willy Douhard <willy.douhard@gmail.com>
Date: Mon, 16 Oct 2023 23:06:33 +0200
Subject: [PATCH 4/5] fix js errors

---
 frontend/src/components/organisms/chat/index.tsx              | 4 ++--
 .../src/components/organisms/chat/inputBox/UploadButton.tsx   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/organisms/chat/index.tsx b/frontend/src/components/organisms/chat/index.tsx
index bd8d16e713..68d5150baf 100644
--- a/frontend/src/components/organisms/chat/index.tsx
+++ b/frontend/src/components/organisms/chat/index.tsx
@@ -133,8 +133,8 @@ const Chat = () => {
     [askUser, user, replyMessage]
   );
 
-  const tasklist = tasklists.at(-1);
-  const enableMultiModalUpload = !disabled && pSettings?.features.multi_modal;
+  const tasklist = tasklists[tasklists.length - 1];
+  const enableMultiModalUpload = !disabled && pSettings?.features?.multi_modal;
 
   return (
     <Box
diff --git a/frontend/src/components/organisms/chat/inputBox/UploadButton.tsx b/frontend/src/components/organisms/chat/inputBox/UploadButton.tsx
index cd8fa72856..5e41f6f3ba 100644
--- a/frontend/src/components/organisms/chat/inputBox/UploadButton.tsx
+++ b/frontend/src/components/organisms/chat/inputBox/UploadButton.tsx
@@ -30,7 +30,7 @@ const UploadButton = ({
     options: { noDrag: true }
   });
 
-  if (!upload || !pSettings?.features.multi_modal) return null;
+  if (!upload || !pSettings?.features?.multi_modal) return null;
   const { getRootProps, getInputProps, uploading } = upload;
 
   return (

From 6af58c6d57792ef86cdef4528163077b791d2c65 Mon Sep 17 00:00:00 2001
From: Willy Douhard <willy.douhard@gmail.com>
Date: Mon, 16 Oct 2023 23:39:35 +0200
Subject: [PATCH 5/5] fix ci

---
 cypress.config.ts                                | 3 ++-
 cypress/e2e/conversations/spec.cy.ts             | 7 +++++--
 frontend/src/components/organisms/chat/index.tsx | 2 +-
 libs/components/hooks/useChat/state.ts           | 5 -----
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/cypress.config.ts b/cypress.config.ts
index 2212db215a..c352b8d4e4 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -8,13 +8,14 @@ export default defineConfig({
       bundler: 'vite'
     }
   },
+  viewportWidth: 1200,
 
   e2e: {
     supportFile: false,
     defaultCommandTimeout: 10000,
     video: false,
     baseUrl: 'http://127.0.0.1:8000',
-    setupNodeEvents(on, config) {
+    setupNodeEvents(on) {
       on('task', {
         log(message) {
           console.log(message);
diff --git a/cypress/e2e/conversations/spec.cy.ts b/cypress/e2e/conversations/spec.cy.ts
index a739171225..8b87a69eba 100644
--- a/cypress/e2e/conversations/spec.cy.ts
+++ b/cypress/e2e/conversations/spec.cy.ts
@@ -20,10 +20,13 @@ describe('Conversations', () => {
     cy.intercept('GET', '/project/settings', {
       statusCode: 200,
       body: {
-        ui: {},
+        ui: {
+          show_readme_as_default: true
+        },
         userEnv: [],
         dataPersistence: true,
-        markdown: 'foo'
+        markdown: 'foo',
+        chatProfiles: []
       }
     }).as('getSettings');
 
diff --git a/frontend/src/components/organisms/chat/index.tsx b/frontend/src/components/organisms/chat/index.tsx
index 68d5150baf..5cc98b52bf 100644
--- a/frontend/src/components/organisms/chat/index.tsx
+++ b/frontend/src/components/organisms/chat/index.tsx
@@ -157,7 +157,6 @@ const Chat = () => {
       ) : null}
       <SideView>
         <Box my={1} />
-        <TaskList tasklist={tasklist} isMobile={true} />
         {error && (
           <Box
             sx={{
@@ -172,6 +171,7 @@ const Chat = () => {
             </Alert>
           </Box>
         )}
+        <TaskList tasklist={tasklist} isMobile={true} />
         <ErrorBoundary>
           <ChatProfiles />
           {!messages.length && pSettings?.ui.show_readme_as_default ? (
diff --git a/libs/components/hooks/useChat/state.ts b/libs/components/hooks/useChat/state.ts
index 078fd54988..d6ca046687 100644
--- a/libs/components/hooks/useChat/state.ts
+++ b/libs/components/hooks/useChat/state.ts
@@ -102,8 +102,3 @@ export const firstUserMessageState = atom<IMessage | undefined>({
   key: 'FirstUserMessage',
   default: undefined
 });
-
-export const chatProfile = atom<string | undefined>({
-  key: 'ChatProfile',
-  default: undefined
-});