fix: Improve UX for mobile user (#479)

* fix: Improve UX for mobile user --------- Co-authored-by: Willy Douhard <[email protected]>
Chainlit · Oct 17, 2023 · 8747400 · 8747400
1 parent ba93c76
commit 8747400
Show file tree

Hide file tree

Showing 11 changed files with 110 additions and 57 deletions.
diff --git 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": "^_",

diff --git 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
@@ -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
@@ -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
@@ -156,17 +156,24 @@ 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>
         )}
+        <TaskList tasklist={tasklist} isMobile={true} />
         <ErrorBoundary>
           <ChatProfiles />
-
           {!messages.length && pSettings?.ui.show_readme_as_default ? (
             <WelcomeScreen />
           ) : (

diff --git 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 (

diff --git a/frontend/src/components/organisms/conversationsHistory/sidebar/OpenChatHistoryButton.tsx 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
@@ -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,15 +141,15 @@ const _ConversationsHistorySidebar = () => {
       <Drawer
         className="chat-history-drawer"
         anchor="left"
-        open={open}
+        open={settings.isChatHistoryOpen}
         variant={isMobile ? 'temporary' : 'persistent'}
         hideBackdrop
         PaperProps={{
           ref: ref,
           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
@@ -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;
@@ -58,12 +60,13 @@ function NavItem({ to, label }: INavItem) {
 }
 
 interface NavProps {
+  dataPersistence?: boolean;
   hasReadme?: boolean;
 }
 
-function Nav({ hasReadme }: NavProps) {
+function Nav({ dataPersistence, hasReadme }: NavProps) {
   const location = useLocation();
-  const theme = useTheme();
+  const { isAuthenticated } = useAuth();
   const [open, setOpen] = useState(false);
   const ref = useRef<any>();
 
@@ -73,16 +76,15 @@ function Nav({ hasReadme }: NavProps) {
     anchorEl = ref.current;
   }
 
-  const matches = useMediaQuery(theme.breakpoints.down('md'));
-
+  const isMobile = useMediaQuery('(max-width: 66rem)');
   const tabs = [{ to: '/', label: 'Chat' }];
 
   if (hasReadme) {
     tabs.push({ to: '/readme', label: 'Readme' });
   }
 
   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 (
@@ -94,7 +96,7 @@ function Nav({ hasReadme }: NavProps) {
     </Stack>
   );
 
-  if (matches) {
+  if (isMobile) {
     return (
       <>
         <IconButton
@@ -105,6 +107,9 @@ function Nav({ hasReadme }: NavProps) {
         >
           <MenuIcon />
         </IconButton>
+        {isAuthenticated && dataPersistence ? (
+          <OpenChatHistoryButton mode="mobile" />
+        ) : null}
         <Menu
           autoFocus
           anchorEl={anchorEl}
@@ -139,7 +144,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,9 +158,12 @@ 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} />
+          <Nav
+            dataPersistence={pSettings?.dataPersistence}
+            hasReadme={!!pSettings?.markdown}
+          />
         </Stack>
         <Stack
           alignItems="center"

diff --git 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
@@ -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

diff --git 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
-});