refactor: Design of messages (#635)

* refactor: Design of messages * ui fixes * fix tests * clear warnings * fix width issue * fix sidebar trigger button * fix vertical centering * enhance user session count * add tooltip to sidebar trigger --------- Co-authored-by: Willy Douhard <[email protected]>
Chainlit · Jan 6, 2024 · 40f7779 · 40f7779
1 parent af22dfb
commit 40f7779
Show file tree

Hide file tree

Showing 20 changed files with 272 additions and 151 deletions.
diff --git a/backend/chainlit/socket.py b/backend/chainlit/socket.py
@@ -151,7 +151,7 @@ def ask_user_fn(data, timeout):
             data_layer.create_user_session(
                 id=session_id,
                 started_at=datetime.utcnow().isoformat(),
-                anon_user_id=anon_user_identifier,
+                anon_user_id=anon_user_identifier if not user else None,
                 user_id=user.identifier if user else None,
             )
         )

diff --git a/cypress/e2e/action/spec.cy.ts b/cypress/e2e/action/spec.cy.ts
@@ -7,15 +7,15 @@ describe('Action', () => {
 
   it('should correctly execute and display actions', () => {
     // Click on "first action"
-    cy.get('#first-action').should('be.visible');
+    cy.get('#first-action').should('exist');
     cy.get('#first-action').click();
     cy.get('.step').should('have.length', 3);
     cy.get('.step')
       .eq(2)
       .should('contain', 'Thanks for pressing: first-action');
 
     // Click on "test action"
-    cy.get("[id='test-action']").should('be.visible');
+    cy.get("[id='test-action']").should('exist');
     cy.get("[id='test-action']").click();
     cy.get('.step').should('have.length', 4);
     cy.get('.step').eq(3).should('contain', 'Executed test action!');
@@ -24,7 +24,7 @@ describe('Action', () => {
     cy.wait(100);
 
     // Click on "removable action"
-    cy.get("[id='removable-action']").should('be.visible');
+    cy.get("[id='removable-action']").should('exist');
     cy.get("[id='removable-action']").click();
     cy.get('.step').should('have.length', 5);
     cy.get('.step').eq(4).should('contain', 'Executed removable action!');
@@ -33,13 +33,13 @@ describe('Action', () => {
     cy.wait(100);
 
     // Click on "multiple action one" in the action drawer, should remove the correct action button
-    cy.get("[id='actions-drawer-button']").should('be.visible');
+    cy.get("[id='actions-drawer-button']").should('exist');
     cy.get("[id='actions-drawer-button']").click();
     cy.get('.step').should('have.length', 5);
 
     cy.wait(100);
 
-    cy.get("[id='multiple-action-one']").should('be.visible');
+    cy.get("[id='multiple-action-one']").should('exist');
     cy.get("[id='multiple-action-one']").click();
     cy.get('.step')
       .eq(5)
@@ -51,7 +51,7 @@ describe('Action', () => {
     // Click on "multiple action two", should remove the correct action button
     cy.get('.step').should('have.length', 6);
     cy.get("[id='actions-drawer-button']").click();
-    cy.get("[id='multiple-action-two']").should('be.visible');
+    cy.get("[id='multiple-action-two']").should('exist');
     cy.get("[id='multiple-action-two']").click();
     cy.get('.step')
       .eq(6)
@@ -61,7 +61,7 @@ describe('Action', () => {
     cy.wait(100);
 
     // Click on "all actions removed", should remove all buttons
-    cy.get("[id='all-actions-removed']").should('be.visible');
+    cy.get("[id='all-actions-removed']").should('exist');
     cy.get("[id='all-actions-removed']").click();
     cy.get('.step').eq(7).should('contain', 'All actions have been removed!');
     cy.get("[id='all-actions-removed']").should('not.exist');

diff --git a/cypress/e2e/avatar/spec.cy.ts b/cypress/e2e/avatar/spec.cy.ts
@@ -8,11 +8,11 @@ describe('Avatar', () => {
   it('should be able to display avatars', () => {
     cy.get('.step').should('have.length', 5);
 
-    cy.get('.step').eq(0).find('.message-avatar').should('have.length', 0);
-    cy.get('.step').eq(1).find('.message-avatar').should('have.length', 1);
-    cy.get('.step').eq(2).find('.message-avatar').should('have.length', 0);
-    cy.get('.step').eq(3).find('.message-avatar').should('have.length', 1);
-    cy.get('.step').eq(4).find('.message-avatar').should('have.length', 1);
+    cy.get('.step').eq(0).find('img').should('have.length', 0);
+    cy.get('.step').eq(1).find('img').should('have.length', 1);
+    cy.get('.step').eq(2).find('img').should('have.length', 0);
+    cy.get('.step').eq(3).find('img').should('have.length', 1);
+    cy.get('.step').eq(4).find('img').should('have.length', 1);
 
     cy.get('.element-link').should('have.length', 0);
   });

diff --git a/frontend/src/assets/chevronLeft.tsx b/frontend/src/assets/chevronLeft.tsx
@@ -0,0 +1,22 @@
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+const ChevronLeftIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon>
+      <svg
+        {...props}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="m11 17-5-5 5-5" />
+        <path d="m18 17-5-5 5-5" />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default ChevronLeftIcon;
diff --git a/frontend/src/assets/chevronRight.tsx b/frontend/src/assets/chevronRight.tsx
@@ -0,0 +1,22 @@
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+const ChevronRightIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon>
+      <svg
+        {...props}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="m6 17 5-5-5-5" />
+        <path d="m13 17 5-5-5-5" />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default ChevronRightIcon;
diff --git a/frontend/src/assets/chevronUp.tsx b/frontend/src/assets/chevronUp.tsx
@@ -0,0 +1,22 @@
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+const ChevronUpIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon>
+      <svg
+        {...props}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="m17 11-5-5-5 5" />
+        <path d="m17 18-5-5-5 5" />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default ChevronUpIcon;
diff --git a/frontend/src/assets/user.tsx b/frontend/src/assets/user.tsx
@@ -0,0 +1,22 @@
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+const UserIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon>
+      <svg
+        {...props}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+        <circle cx="12" cy="7" r="4" />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default UserIcon;
diff --git a/frontend/src/components/atoms/buttons/userButton/avatar.tsx b/frontend/src/components/atoms/buttons/userButton/avatar.tsx
@@ -2,6 +2,8 @@ import { useAuth } from 'api/auth';
 
 import { Avatar, Box } from '@mui/material';
 
+import UserIcon from 'assets/user';
+
 export default function UserAvatar() {
   const { user } = useAuth();
 
@@ -16,7 +18,7 @@ export default function UserAvatar() {
         }}
         src={user.metadata?.image || undefined}
       >
-        {user.identifier?.[0]}
+        {user.identifier?.[0]?.toUpperCase()}
       </Avatar>
     );
   } else {
@@ -29,7 +31,9 @@ export default function UserAvatar() {
             bgcolor: 'primary.main',
             color: 'primary.contrastText'
           }}
-        />
+        >
+          <UserIcon sx={{ width: 20 }} />
+        </Avatar>
       </Box>
     );
   }

diff --git a/frontend/src/components/organisms/chat/history/index.tsx b/frontend/src/components/organisms/chat/history/index.tsx
@@ -4,7 +4,6 @@ import { useRef, useState } from 'react';
 import { useRecoilState } from 'recoil';
 
 import AutoDelete from '@mui/icons-material/AutoDelete';
-import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
 import {
   IconButton,
   Menu,
@@ -17,6 +16,8 @@ import {
 import { UserInput } from '@chainlit/react-client';
 import { grey } from '@chainlit/react-components/theme';
 
+import ChevronUpIcon from 'assets/chevronUp';
+
 import { inputHistoryState } from 'state/userInputHistory';
 
 interface Props {
@@ -247,7 +248,7 @@ export default function InputHistoryButton({ disabled, onClick }: Props) {
             onClick={() => toggleChatHistoryMenu(!inputHistory.open)}
             ref={ref}
           >
-            <KeyboardDoubleArrowUpIcon />
+            <ChevronUpIcon />
           </IconButton>
         </span>
       </Tooltip>

diff --git a/frontend/src/components/organisms/header.tsx b/frontend/src/components/organisms/header.tsx
@@ -154,7 +154,7 @@ const Header = memo(
             borderBottomColor: (theme) => theme.palette.divider
           }}
         >
-          <Stack alignItems="center" direction={'row'} gap={!matches ? 3 : 1}>
+          <Stack alignItems="center" direction={'row'} gap={!matches ? 3 : 0}>
             {!matches ? <Logo style={{ maxHeight: '25px' }} /> : null}
             <Nav
               matches={matches}

diff --git a/frontend/src/components/organisms/threadHistory/sidebar/TriggerButton.tsx b/frontend/src/components/organisms/threadHistory/sidebar/TriggerButton.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-
 import Box from '@mui/material/Box';
+import Tooltip from '@mui/material/Tooltip';
 
 interface TriggerButtonProps {
   onClick: () => void;
@@ -16,26 +15,28 @@ const commonBoxStyles = {
 
 const TriggerButton = ({ onClick, open }: TriggerButtonProps): JSX.Element => {
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        cursor: 'pointer',
-        padding: 2,
-        '&:hover div:nth-child(1)': {
-          transform: open ? 'rotate(15deg)' : 'rotate(-15deg)'
-        },
-        '&:hover div:nth-child(2)': {
-          transform: open ? 'rotate(-15deg)' : 'rotate(15deg)'
-        }
-      }}
-      onClick={onClick}
-    >
-      <Box sx={{ ...commonBoxStyles, marginTop: '0.25rem' }} />
-      <Box sx={{ ...commonBoxStyles, marginTop: '-0.25rem' }} />
-    </Box>
+    <Tooltip title={open ? 'Close sidebar' : 'Open sidebar'} placement="right">
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          cursor: 'pointer',
+          padding: 2,
+          '&:hover div:nth-child(1)': {
+            transform: open ? 'rotate(15deg)' : 'rotate(-15deg)'
+          },
+          '&:hover div:nth-child(2)': {
+            transform: open ? 'rotate(-15deg)' : 'rotate(15deg)'
+          }
+        }}
+        onClick={onClick}
+      >
+        <Box sx={{ ...commonBoxStyles, marginTop: '0.25rem' }} />
+        <Box sx={{ ...commonBoxStyles, marginTop: '-0.25rem' }} />
+      </Box>
+    </Tooltip>
   );
 };
 

diff --git a/frontend/src/components/organisms/threadHistory/sidebar/index.tsx b/frontend/src/components/organisms/threadHistory/sidebar/index.tsx
@@ -5,6 +5,7 @@ import uniqBy from 'lodash/uniqBy';
 import { useEffect, useRef, useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
+import Box from '@mui/material/Box';
 import Drawer from '@mui/material/Drawer';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
@@ -126,7 +127,7 @@ const _ThreadHistorySideBar = () => {
   }, []);
 
   return (
-    <>
+    <Box display="flex" position="relative">
       <Drawer
         className="chat-history-drawer"
         anchor="left"
@@ -146,7 +147,12 @@ const _ThreadHistorySideBar = () => {
             gap: 1,
             display: 'flex',
             padding: '0px 4px',
-            backgroundImage: 'none'
+            backgroundImage: 'none',
+            borderRight: 'none',
+            boxShadow: (theme) =>
+              theme.palette.mode === 'dark'
+                ? '0px 4px 20px 0px rgba(0, 0, 0, 0.20)'
+                : '0px 4px 20px 0px rgba(0, 0, 0, 0.05)'
           }
         }}
       >
@@ -181,12 +187,22 @@ const _ThreadHistorySideBar = () => {
         ) : null}
       </Drawer>
       {!isMobile ? (
-        <TriggerButton
-          onClick={() => setChatHistoryOpen(!settings.isChatHistoryOpen)}
-          open={settings.isChatHistoryOpen}
-        />
+        <Box
+          position="absolute"
+          sx={{
+            top: '50%',
+            transform: 'translateY(-100%)',
+            right: -30,
+            zIndex: 10
+          }}
+        >
+          <TriggerButton
+            onClick={() => setChatHistoryOpen(!settings.isChatHistoryOpen)}
+            open={settings.isChatHistoryOpen}
+          />
+        </Box>
       ) : null}
-    </>
+    </Box>
   );
 };