From 12f4a93b211a8f4acdcfd3b653c9f1fb81623225 Mon Sep 17 00:00:00 2001
From: SuperTurk <alim.tunc@outlook.fr>
Date: Fri, 5 Jan 2024 11:02:05 +0100
Subject: [PATCH 1/9] refactor: Design of messages

---
 libs/react-components/src/elements/Avatar.tsx | 27 +++---
 .../react-components/src/messages/Message.tsx | 55 ++++++------
 .../src/messages/components/Author.tsx        | 85 ++++++++++---------
 .../src/messages/components/DetailsButton.tsx |  2 +
 .../src/messages/components/MessageTime.tsx   |  2 +-
 5 files changed, 84 insertions(+), 87 deletions(-)

diff --git a/libs/react-components/src/elements/Avatar.tsx b/libs/react-components/src/elements/Avatar.tsx
index 91cf33206c..6fd392363a 100644
--- a/libs/react-components/src/elements/Avatar.tsx
+++ b/libs/react-components/src/elements/Avatar.tsx
@@ -1,25 +1,22 @@
 import Avatar from '@mui/material/Avatar';
-import Tooltip from '@mui/material/Tooltip';
 
 import { type IAvatarElement } from 'client-types/';
 
 interface Props {
-  element: IAvatarElement;
   author: string;
+  bgColor?: string;
+  element?: IAvatarElement;
 }
 
-const AvatarElement = ({ element, author }: Props) => {
-  if (!element.url) {
-    return null;
-  }
-
-  return (
-    <Tooltip title={author}>
-      <span className={`message-avatar`}>
-        <Avatar sx={{ width: 38, height: 38, mt: '-4px' }} src={element.url} />
-      </span>
-    </Tooltip>
-  );
-};
+const AvatarElement = ({ element, author, bgColor }: Props) => (
+  <span className={`message-avatar`}>
+    <Avatar
+      sx={{ width: 24, height: 24, bgcolor: bgColor, fontSize: '0.75rem' }}
+      src={element?.url}
+    >
+      {author[0]}
+    </Avatar>
+  </span>
+);
 
 export { AvatarElement };
diff --git a/libs/react-components/src/messages/Message.tsx b/libs/react-components/src/messages/Message.tsx
index c59921c8d0..8e387dceda 100644
--- a/libs/react-components/src/messages/Message.tsx
+++ b/libs/react-components/src/messages/Message.tsx
@@ -88,7 +88,7 @@ const Message = memo(
           <Stack
             id={`step-${message.id}`}
             direction="row"
-            ml={indent ? `${indent * (AUTHOR_BOX_WIDTH + 16)}px` : 0}
+            ml={indent ? `${indent * (AUTHOR_BOX_WIDTH + 8)}px` : 0}
             sx={{
               py: 2,
               borderBottom: (theme) =>
@@ -100,35 +100,30 @@ const Message = memo(
               overflowX: 'auto'
             }}
           >
-            <Author message={message} show={showAvatar} />
-            <Stack
-              alignItems="flex-start"
-              width={0}
-              flexGrow={1}
-              spacing={1}
-              minWidth={150}
-            >
-              <MessageContent
-                elements={elements}
-                message={message}
-                preserveSize={!!message.streaming || !defaultCollapseContent}
-                allowHtml={allowHtml}
-                latex={latex}
-              />
-              <DetailsButton
-                message={message}
-                opened={showDetails}
-                onClick={() => setShowDetails(!showDetails)}
-                loading={isRunning && isLast}
-              />
-              {!isRunning && isLast && isAsk && (
-                <AskUploadButton onError={onError} />
-              )}
-              {actions?.length ? (
-                <MessageActions message={message} actions={actions} />
-              ) : null}
-              <MessageButtons message={message} />
-            </Stack>
+            <Author message={message} show={showAvatar}>
+              <Stack alignItems="flex-start" minWidth={150}>
+                <MessageContent
+                  elements={elements}
+                  message={message}
+                  preserveSize={!!message.streaming || !defaultCollapseContent}
+                  allowHtml={allowHtml}
+                  latex={latex}
+                />
+                <DetailsButton
+                  message={message}
+                  opened={showDetails}
+                  onClick={() => setShowDetails(!showDetails)}
+                  loading={isRunning && isLast}
+                />
+                {!isRunning && isLast && isAsk && (
+                  <AskUploadButton onError={onError} />
+                )}
+                {actions?.length ? (
+                  <MessageActions message={message} actions={actions} />
+                ) : null}
+                <MessageButtons message={message} />
+              </Stack>
+            </Author>
           </Stack>
         </Box>
         {message.steps && showDetails && (
diff --git a/libs/react-components/src/messages/components/Author.tsx b/libs/react-components/src/messages/components/Author.tsx
index 7653738416..e14fac94d4 100644
--- a/libs/react-components/src/messages/components/Author.tsx
+++ b/libs/react-components/src/messages/components/Author.tsx
@@ -3,7 +3,7 @@ import { useContext } from 'react';
 import { AvatarElement } from 'src/elements/Avatar';
 
 import Box from '@mui/material/Box';
-import Tooltip from '@mui/material/Tooltip';
+import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 
 import { useColorForName } from 'hooks/useColors';
@@ -15,58 +15,61 @@ import { MessageTime } from './MessageTime';
 interface Props {
   message: IStep;
   show?: boolean;
+  children?: React.ReactNode;
 }
 
-export const AUTHOR_BOX_WIDTH = 70;
+export const AUTHOR_BOX_WIDTH = 24;
 
-const Author = ({ message, show }: Props) => {
+const Author = ({ message, show, children }: Props) => {
   const context = useContext(MessageContext);
   const getColorForName = useColorForName(context.uiName);
 
-  const author = message.name;
   const isUser = message.type === 'user_message';
+  const author = isUser ? 'You' : message.name;
 
   const avatarEl = context.avatars.find((e) => e.name === author);
 
-  const avatar = show && avatarEl && (
-    <AvatarElement element={avatarEl} author={author} />
-  );
-
-  const name = show && (
-    <Tooltip title={author}>
-      <Typography
-        noWrap
-        lineHeight="24px"
-        sx={{
-          mb: '-5px',
-          width: AUTHOR_BOX_WIDTH,
-          fontSize: '12px',
-          fontWeight: 500,
-          color: getColorForName(author, isUser, message.isError)
-        }}
-      >
-        {author}
-      </Typography>
-    </Tooltip>
-  );
-
-  const display = avatar || name;
-
   return (
-    <>
-      <Box width={AUTHOR_BOX_WIDTH} pr={2}>
-        {display}
-        <MessageTime timestamp={message.createdAt} />
-      </Box>
-      {(!!message.indent || message.parentId) && (
-        <Box
-          width="2px"
-          borderRadius="13px"
-          bgcolor={getColorForName(author, isUser)}
-          mr={2}
-        />
+    <Stack direction="row" gap={1} width="100%">
+      {show ? (
+        <Stack alignItems="center" gap={1}>
+          <AvatarElement
+            element={avatarEl}
+            author={author}
+            bgColor={getColorForName(author, isUser, message.isError)}
+          />
+          {(!!message.indent || message.parentId) && (
+            <Box
+              width="2px"
+              height="100%"
+              borderRadius="13px"
+              bgcolor={getColorForName(author, isUser)}
+            />
+          )}
+        </Stack>
+      ) : (
+        <Box width={20} />
       )}
-    </>
+
+      <Stack gap={1} width="100%">
+        <Stack direction="row" gap={1} alignItems="center">
+          {show ? (
+            <Typography
+              noWrap
+              sx={{
+                fontSize: '1rem',
+                fontWeight: 600,
+                lineHeight: 'unset'
+              }}
+            >
+              {author}
+            </Typography>
+          ) : null}
+          <MessageTime timestamp={message.createdAt} />
+        </Stack>
+        {children}
+      </Stack>
+    </Stack>
   );
 };
 
diff --git a/libs/react-components/src/messages/components/DetailsButton.tsx b/libs/react-components/src/messages/components/DetailsButton.tsx
index d036b0b335..5a7fbb8f06 100644
--- a/libs/react-components/src/messages/components/DetailsButton.tsx
+++ b/libs/react-components/src/messages/components/DetailsButton.tsx
@@ -59,7 +59,9 @@ const DetailsButton = ({ message, opened, onClick, loading }: Props) => {
 
   return (
     <GreyButton
+      size="small"
       id={id}
+      sx={{ marginTop: 1 }}
       color="primary"
       startIcon={
         loading ? <CircularProgress color="inherit" size={16} /> : undefined
diff --git a/libs/react-components/src/messages/components/MessageTime.tsx b/libs/react-components/src/messages/components/MessageTime.tsx
index e47a35f2c6..5b11c59d7b 100644
--- a/libs/react-components/src/messages/components/MessageTime.tsx
+++ b/libs/react-components/src/messages/components/MessageTime.tsx
@@ -17,7 +17,7 @@ const MessageTime = ({ timestamp }: Props) => {
   }
   const date = new Date(timestamp).toLocaleTimeString(undefined, dateOptions);
   return (
-    <Typography lineHeight="24px" color={grey[500]} fontSize="11px">
+    <Typography color={grey[500]} fontSize="12px" lineHeight="unset">
       {date}
     </Typography>
   );

From da8ca4233c5d668a1aa22db0a622988fffb7b409 Mon Sep 17 00:00:00 2001
From: Willy Douhard <willy.douhard@gmail.com>
Date: Fri, 5 Jan 2024 13:38:40 +0100
Subject: [PATCH 2/9] ui fixes

---
 frontend/src/assets/chevronLeft.tsx           | 22 ++++++++++++
 frontend/src/assets/chevronRight.tsx          | 22 ++++++++++++
 frontend/src/assets/chevronUp.tsx             | 22 ++++++++++++
 frontend/src/assets/user.tsx                  | 22 ++++++++++++
 .../atoms/buttons/userButton/avatar.tsx       |  8 +++--
 .../organisms/chat/history/index.tsx          |  5 +--
 frontend/src/components/organisms/header.tsx  |  2 +-
 .../organisms/threadHistory/sidebar/index.tsx | 12 +++++--
 libs/react-components/hooks/useColors.tsx     | 36 +++++++++----------
 libs/react-components/src/Code.tsx            |  3 +-
 libs/react-components/src/elements/Avatar.tsx |  8 ++++-
 .../react-components/src/messages/Message.tsx |  2 +-
 .../messages/components/AskUploadButton.tsx   |  3 +-
 .../src/messages/components/Author.tsx        |  4 +--
 .../src/messages/components/MessageTime.tsx   |  7 +++-
 15 files changed, 144 insertions(+), 34 deletions(-)
 create mode 100644 frontend/src/assets/chevronLeft.tsx
 create mode 100644 frontend/src/assets/chevronRight.tsx
 create mode 100644 frontend/src/assets/chevronUp.tsx
 create mode 100644 frontend/src/assets/user.tsx

diff --git a/frontend/src/assets/chevronLeft.tsx b/frontend/src/assets/chevronLeft.tsx
new file mode 100644
index 0000000000..03f77bfb75
--- /dev/null
+++ 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"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="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
new file mode 100644
index 0000000000..82224a7ae7
--- /dev/null
+++ 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"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="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
new file mode 100644
index 0000000000..77cd159385
--- /dev/null
+++ 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"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="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
new file mode 100644
index 0000000000..d55150eb10
--- /dev/null
+++ 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"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="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
index 50dacffe0b..2de275f29a 100644
--- 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
index 27a2ebd252..e347d81fc5 100644
--- 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
index a974093910..5d0b9bd929 100644
--- a/frontend/src/components/organisms/header.tsx
+++ b/frontend/src/components/organisms/header.tsx
@@ -156,7 +156,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/index.tsx b/frontend/src/components/organisms/threadHistory/sidebar/index.tsx
index 92369674d3..cd641a0dc7 100644
--- a/frontend/src/components/organisms/threadHistory/sidebar/index.tsx
+++ b/frontend/src/components/organisms/threadHistory/sidebar/index.tsx
@@ -5,7 +5,6 @@ import uniqBy from 'lodash/uniqBy';
 import { useEffect, useRef, useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
-import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
 import Drawer from '@mui/material/Drawer';
 import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
@@ -18,6 +17,8 @@ import {
   threadHistoryState
 } from '@chainlit/react-client';
 
+import ChevronLeftIcon from 'assets/chevronLeft';
+
 import { projectSettingsState } from 'state/project';
 import { settingsState } from 'state/settings';
 import { threadsFiltersState } from 'state/threads';
@@ -147,7 +148,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)'
           }
         }}
       >
@@ -170,7 +176,7 @@ const _ThreadHistorySideBar = () => {
             Past Chats
           </Typography>
           <IconButton edge="end" onClick={() => setChatHistoryOpen(false)}>
-            <KeyboardDoubleArrowLeftIcon sx={{ color: 'text.primary' }} />
+            <ChevronLeftIcon sx={{ color: 'text.primary' }} />
           </IconButton>
         </Stack>
         <Filters />
diff --git a/libs/react-components/hooks/useColors.tsx b/libs/react-components/hooks/useColors.tsx
index 0a5a43946b..001ae516a4 100644
--- a/libs/react-components/hooks/useColors.tsx
+++ b/libs/react-components/hooks/useColors.tsx
@@ -2,26 +2,26 @@ import { useCallback } from 'react';
 
 import { useIsDarkMode } from './useIsDarkMode';
 
-const lightColors = [
-  '#066DEB',
-  '#04857C',
-  '#FF9900',
-  '#F34F3C',
-  '#E86004',
-  '#2D8C26',
-  '#5E5BFE',
-  '#A132FE'
+const darkColors = [
+  '#fb923c',
+  '#facc15',
+  '#34d399',
+  '#38bdf8',
+  '#818cf8',
+  '#c084fc',
+  '#f472b6',
+  '#0ea5e9'
 ];
 
-const darkColors = [
-  '#67A0F8',
-  '#25B1A7',
-  '#FFC266',
-  '#F09691',
-  '#FA7F54',
-  '#59C654',
-  '#9695F8',
-  '#B889F8'
+const lightColors = [
+  '#ea580c',
+  '#ca8a04',
+  '#059669',
+  '#0284c7',
+  '#4f46e5',
+  '#9333ea',
+  '#db2777',
+  '#2563eb'
 ];
 
 const hashCode = (str: string) => {
diff --git a/libs/react-components/src/Code.tsx b/libs/react-components/src/Code.tsx
index d146af4f84..00b30342bc 100644
--- a/libs/react-components/src/Code.tsx
+++ b/libs/react-components/src/Code.tsx
@@ -93,8 +93,7 @@ const Code = ({ children, ...props }: any) => {
           alignItems: 'center',
           borderTopLeftRadius: '4px',
           borderTopRightRadius: '4px',
-          background: isDarkMode ? grey[900] : grey[200],
-          borderBottom: `1px solid ${grey[950]}`
+          background: isDarkMode ? grey[900] : grey[200]
         }}
       >
         <Typography variant="caption">{match?.[1] || 'Raw code'}</Typography>
diff --git a/libs/react-components/src/elements/Avatar.tsx b/libs/react-components/src/elements/Avatar.tsx
index 6fd392363a..b75aa3df2c 100644
--- a/libs/react-components/src/elements/Avatar.tsx
+++ b/libs/react-components/src/elements/Avatar.tsx
@@ -11,7 +11,13 @@ interface Props {
 const AvatarElement = ({ element, author, bgColor }: Props) => (
   <span className={`message-avatar`}>
     <Avatar
-      sx={{ width: 24, height: 24, bgcolor: bgColor, fontSize: '0.75rem' }}
+      sx={{
+        width: 26,
+        height: 26,
+        bgcolor: bgColor,
+        fontSize: '0.75rem',
+        mt: '-2px'
+      }}
       src={element?.url}
     >
       {author[0]}
diff --git a/libs/react-components/src/messages/Message.tsx b/libs/react-components/src/messages/Message.tsx
index 8e387dceda..b8bc3ce153 100644
--- a/libs/react-components/src/messages/Message.tsx
+++ b/libs/react-components/src/messages/Message.tsx
@@ -88,7 +88,7 @@ const Message = memo(
           <Stack
             id={`step-${message.id}`}
             direction="row"
-            ml={indent ? `${indent * (AUTHOR_BOX_WIDTH + 8)}px` : 0}
+            ml={indent ? `${indent * (AUTHOR_BOX_WIDTH + 12)}px` : 0}
             sx={{
               py: 2,
               borderBottom: (theme) =>
diff --git a/libs/react-components/src/messages/components/AskUploadButton.tsx b/libs/react-components/src/messages/components/AskUploadButton.tsx
index d99905416d..28d067da8f 100644
--- a/libs/react-components/src/messages/components/AskUploadButton.tsx
+++ b/libs/react-components/src/messages/components/AskUploadButton.tsx
@@ -86,7 +86,8 @@ const AskUploadChildButton = ({
         width: '100%',
         borderRadius: 1,
         backgroundColor: (theme) => theme.palette.background.paper,
-        boxSizing: 'border-box'
+        boxSizing: 'border-box',
+        mt: 1
       }}
       direction="row"
       alignItems="center"
diff --git a/libs/react-components/src/messages/components/Author.tsx b/libs/react-components/src/messages/components/Author.tsx
index e14fac94d4..a9c033e583 100644
--- a/libs/react-components/src/messages/components/Author.tsx
+++ b/libs/react-components/src/messages/components/Author.tsx
@@ -18,7 +18,7 @@ interface Props {
   children?: React.ReactNode;
 }
 
-export const AUTHOR_BOX_WIDTH = 24;
+export const AUTHOR_BOX_WIDTH = 26;
 
 const Author = ({ message, show, children }: Props) => {
   const context = useContext(MessageContext);
@@ -30,7 +30,7 @@ const Author = ({ message, show, children }: Props) => {
   const avatarEl = context.avatars.find((e) => e.name === author);
 
   return (
-    <Stack direction="row" gap={1} width="100%">
+    <Stack direction="row" gap={1.5} width="100%">
       {show ? (
         <Stack alignItems="center" gap={1}>
           <AvatarElement
diff --git a/libs/react-components/src/messages/components/MessageTime.tsx b/libs/react-components/src/messages/components/MessageTime.tsx
index 5b11c59d7b..f419dfa22d 100644
--- a/libs/react-components/src/messages/components/MessageTime.tsx
+++ b/libs/react-components/src/messages/components/MessageTime.tsx
@@ -17,7 +17,12 @@ const MessageTime = ({ timestamp }: Props) => {
   }
   const date = new Date(timestamp).toLocaleTimeString(undefined, dateOptions);
   return (
-    <Typography color={grey[500]} fontSize="12px" lineHeight="unset">
+    <Typography
+      sx={{ mt: '1px' }}
+      color={grey[500]}
+      fontSize="12px"
+      lineHeight="unset"
+    >
       {date}
     </Typography>
   );

From f3771fb809f2757ebc9ed367d809592415f1e2b4 Mon Sep 17 00:00:00 2001
From: Willy Douhard <willy.douhard@gmail.com>
Date: Fri, 5 Jan 2024 16:02:41 +0100
Subject: [PATCH 3/9] fix tests

---
 cypress/e2e/action/spec.cy.ts | 14 +++++++-------
 cypress/e2e/avatar/spec.cy.ts | 10 +++++-----
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/cypress/e2e/action/spec.cy.ts b/cypress/e2e/action/spec.cy.ts
index f7db198384..e10d4a7afb 100644
--- a/cypress/e2e/action/spec.cy.ts
+++ b/cypress/e2e/action/spec.cy.ts
@@ -7,7 +7,7 @@ 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')
@@ -15,7 +15,7 @@ describe('Action', () => {
       .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
index 5585f3c8ac..41041559cd 100644
--- 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);
   });

From b03b82c274ccb71960654a4c37706392150dd94b Mon Sep 17 00:00:00 2001
From: Willy Douhard <willy.douhard@gmail.com>
Date: Fri, 5 Jan 2024 21:24:10 +0100
Subject: [PATCH 4/9] clear warnings

---
 frontend/src/assets/chevronLeft.tsx  | 6 +++---
 frontend/src/assets/chevronRight.tsx | 6 +++---
 frontend/src/assets/chevronUp.tsx    | 6 +++---
 frontend/src/assets/user.tsx         | 6 +++---
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/assets/chevronLeft.tsx b/frontend/src/assets/chevronLeft.tsx
index 03f77bfb75..1e90b49bb4 100644
--- a/frontend/src/assets/chevronLeft.tsx
+++ b/frontend/src/assets/chevronLeft.tsx
@@ -8,9 +8,9 @@ const ChevronLeftIcon = (props: SvgIconProps) => {
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       >
         <path d="m11 17-5-5 5-5" />
         <path d="m18 17-5-5 5-5" />
diff --git a/frontend/src/assets/chevronRight.tsx b/frontend/src/assets/chevronRight.tsx
index 82224a7ae7..2d8fdde81e 100644
--- a/frontend/src/assets/chevronRight.tsx
+++ b/frontend/src/assets/chevronRight.tsx
@@ -8,9 +8,9 @@ const ChevronRightIcon = (props: SvgIconProps) => {
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       >
         <path d="m6 17 5-5-5-5" />
         <path d="m13 17 5-5-5-5" />
diff --git a/frontend/src/assets/chevronUp.tsx b/frontend/src/assets/chevronUp.tsx
index 77cd159385..31eea42b75 100644
--- a/frontend/src/assets/chevronUp.tsx
+++ b/frontend/src/assets/chevronUp.tsx
@@ -8,9 +8,9 @@ const ChevronUpIcon = (props: SvgIconProps) => {
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       >
         <path d="m17 11-5-5-5 5" />
         <path d="m17 18-5-5-5 5" />
diff --git a/frontend/src/assets/user.tsx b/frontend/src/assets/user.tsx
index d55150eb10..e7b031bfcd 100644
--- a/frontend/src/assets/user.tsx
+++ b/frontend/src/assets/user.tsx
@@ -8,9 +8,9 @@ const UserIcon = (props: SvgIconProps) => {
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        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" />

From ce9eef0866e5aa39176b138c19bde4e54b3a52f8 Mon Sep 17 00:00:00 2001
From: Willy Douhard <willy.douhard@gmail.com>
Date: Fri, 5 Jan 2024 21:24:25 +0100
Subject: [PATCH 5/9] fix width issue

---
 .../src/messages/components/Author.tsx        | 75 ++++++++++---------
 1 file changed, 39 insertions(+), 36 deletions(-)

diff --git a/libs/react-components/src/messages/components/Author.tsx b/libs/react-components/src/messages/components/Author.tsx
index 8cf07b1a08..b50debda64 100644
--- a/libs/react-components/src/messages/components/Author.tsx
+++ b/libs/react-components/src/messages/components/Author.tsx
@@ -28,45 +28,48 @@ const Author = ({ message, show, children }: Props) => {
   const author = isUser ? 'You' : message.name;
 
   const avatarEl = context.avatars.find((e) => e.name === author);
+  const avatar = show ? (
+    <Stack alignItems="center" gap={1}>
+      <AvatarElement
+        element={avatarEl}
+        author={author}
+        bgColor={getColorForName(author, isUser, message.isError)}
+      />
+      {(!!message.indent || message.parentId) && (
+        <Box
+          width="2px"
+          height="100%"
+          borderRadius="13px"
+          bgcolor={getColorForName(author, isUser)}
+        />
+      )}
+    </Stack>
+  ) : (
+    <Box width={AUTHOR_BOX_WIDTH} />
+  );
+  const name = (
+    <Stack direction="row" gap={1} alignItems="center">
+      {show ? (
+        <Typography
+          noWrap
+          sx={{
+            fontSize: '1rem',
+            fontWeight: 600,
+            lineHeight: 'unset'
+          }}
+        >
+          {author}
+        </Typography>
+      ) : null}
+      <MessageTime timestamp={message.createdAt} />
+    </Stack>
+  );
 
   return (
     <Stack direction="row" gap={1.5} width="100%">
-      {show ? (
-        <Stack alignItems="center" gap={1}>
-          <AvatarElement
-            element={avatarEl}
-            author={author}
-            bgColor={getColorForName(author, isUser, message.isError)}
-          />
-          {(!!message.indent || message.parentId) && (
-            <Box
-              width="2px"
-              height="100%"
-              borderRadius="13px"
-              bgcolor={getColorForName(author, isUser)}
-            />
-          )}
-        </Stack>
-      ) : (
-        <Box width={AUTHOR_BOX_WIDTH} />
-      )}
-
-      <Stack gap={1} width="100%">
-        <Stack direction="row" gap={1} alignItems="center">
-          {show ? (
-            <Typography
-              noWrap
-              sx={{
-                fontSize: '1rem',
-                fontWeight: 600,
-                lineHeight: 'unset'
-              }}
-            >
-              {author}
-            </Typography>
-          ) : null}
-          <MessageTime timestamp={message.createdAt} />
-        </Stack>
+      {avatar}
+      <Stack gap={1} width={`calc(100% - ${AUTHOR_BOX_WIDTH + 12}px)`}>
+        {name}
         {children}
       </Stack>
     </Stack>

From 1fb8f120aae9d9adcf17f9492fb4ab72ed282996 Mon Sep 17 00:00:00 2001
From: Willy Douhard <willy.douhard@gmail.com>
Date: Fri, 5 Jan 2024 22:03:00 +0100
Subject: [PATCH 6/9] fix sidebar trigger button

---
 .../organisms/threadHistory/sidebar/index.tsx | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/organisms/threadHistory/sidebar/index.tsx b/frontend/src/components/organisms/threadHistory/sidebar/index.tsx
index d098f66110..af9099d3c9 100644
--- 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"
@@ -186,12 +187,22 @@ const _ThreadHistorySideBar = () => {
         ) : null}
       </Drawer>
       {!isMobile ? (
-        <TriggerButton
-          onClick={() => setChatHistoryOpen(!settings.isChatHistoryOpen)}
-          open={settings.isChatHistoryOpen}
-        />
+        <Box
+          position="absolute"
+          sx={{
+            top: '50%',
+            transform: 'translateY(-50%)',
+            right: -30,
+            zIndex: 10
+          }}
+        >
+          <TriggerButton
+            onClick={() => setChatHistoryOpen(!settings.isChatHistoryOpen)}
+            open={settings.isChatHistoryOpen}
+          />
+        </Box>
       ) : null}
-    </>
+    </Box>
   );
 };
 

From 7e4fba8cebd9b704e722af4100dbf83fd9ca593c Mon Sep 17 00:00:00 2001
From: Willy Douhard <willy.douhard@gmail.com>
Date: Fri, 5 Jan 2024 22:30:20 +0100
Subject: [PATCH 7/9] fix vertical centering

---
 .../src/components/organisms/threadHistory/sidebar/index.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/organisms/threadHistory/sidebar/index.tsx b/frontend/src/components/organisms/threadHistory/sidebar/index.tsx
index af9099d3c9..76476a624f 100644
--- a/frontend/src/components/organisms/threadHistory/sidebar/index.tsx
+++ b/frontend/src/components/organisms/threadHistory/sidebar/index.tsx
@@ -191,7 +191,7 @@ const _ThreadHistorySideBar = () => {
           position="absolute"
           sx={{
             top: '50%',
-            transform: 'translateY(-50%)',
+            transform: 'translateY(-100%)',
             right: -30,
             zIndex: 10
           }}

From 0ecc897937aaa40283f83d720fab1d337b3f6d6c Mon Sep 17 00:00:00 2001
From: Willy Douhard <willy.douhard@gmail.com>
Date: Sat, 6 Jan 2024 10:58:13 +0100
Subject: [PATCH 8/9] enhance user session count

---
 backend/chainlit/socket.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/chainlit/socket.py b/backend/chainlit/socket.py
index b3075cccf7..702124305a 100644
--- 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,
             )
         )

From 924189f0966ca4de11d37a37ac435a4007817527 Mon Sep 17 00:00:00 2001
From: Willy Douhard <willy.douhard@gmail.com>
Date: Sat, 6 Jan 2024 11:08:52 +0100
Subject: [PATCH 9/9] add tooltip to sidebar trigger

---
 .../threadHistory/sidebar/TriggerButton.tsx   | 45 ++++++++++---------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/organisms/threadHistory/sidebar/TriggerButton.tsx b/frontend/src/components/organisms/threadHistory/sidebar/TriggerButton.tsx
index 5860b22124..1b09fc7d45 100644
--- 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>
   );
 };