From acc88e362d314cc28836c382b1ce8eba3483faa4 Mon Sep 17 00:00:00 2001
From: notmd <33456881+notmd@users.noreply.github.com>
Date: Sat, 22 Apr 2023 01:03:19 +0700
Subject: [PATCH] Rework chat layout UI (#2741)

The `QueueInfo` is removed for now. I will add it back in follow up PR.
Most of the change are UI code, there is no logic here, it safe to merge
Desktop
<details>
  <summary>Light mode</summary>


![image](https://user-images.githubusercontent.com/33456881/233029668-d04702cd-9f3b-4315-a4e2-8d99d78c68aa.png)
</details>
<details>
  <summary>Dark mode</summary>


![image](https://user-images.githubusercontent.com/33456881/233029734-eaf0b350-43c8-487f-a1a4-13972280bb57.png)
</details>

Mobile
<details>
  <summary>Light mode</summary>


![image](https://user-images.githubusercontent.com/33456881/233031042-45d5fd2c-ca70-48c4-b41a-abb6c70ac502.png)</details>
<details>
  <summary>Dark mode</summary>


![image](https://user-images.githubusercontent.com/33456881/233031086-508eabc4-1910-4d81-b079-0a5720d7e67d.png)</details>

---------

Co-authored-by: AbdBarho <ka70911@gmail.com>
---
 website/public/locales/en/chat.json           |   3 +-
 .../src/components/Chat/ChatConfigDesktop.tsx |  38 ++++++
 ...hatConfigDrawer.tsx => ChatConfigForm.tsx} |  39 +------
 .../src/components/Chat/ChatConfigMobile.tsx  |  42 +++++++
 .../src/components/Chat/ChatConfigSaver.tsx   |   9 +-
 .../src/components/Chat/ChatConversation.tsx  |  48 +++++---
 website/src/components/Chat/ChatForm.tsx      |  73 +++++++-----
 .../components/Chat/ChatInputIconButton.tsx   |  19 +++
 website/src/components/Chat/ChatListBase.tsx  |  47 +++-----
 .../src/components/Chat/ChatListDesktop.tsx   |  15 +--
 website/src/components/Chat/ChatListItem.tsx  |   9 +-
 .../src/components/Chat/ChatListMobile.tsx    |  49 ++++++--
 .../src/components/Chat/ChatMessageEntry.tsx  |  10 +-
 website/src/components/Chat/ChatSection.tsx   |  42 +++----
 .../components/Chat/InferencePoweredBy.tsx    |  37 +++---
 website/src/components/Header/Header.tsx      |   9 +-
 website/src/components/Layout/ChatLayout.tsx  |  49 ++++----
 .../components/Messages/BaseMessageEntry.tsx  |   4 +-
 website/src/components/SideMenu.tsx           | 109 ++++++++++--------
 website/src/components/SideMenuLayout.tsx     |  31 ++---
 website/src/components/TeamMember.tsx         |   8 +-
 website/src/pages/chat/index.tsx              |  15 ++-
 website/src/styles/Theme/index.ts             |   8 +-
 website/src/utils/chat.ts                     |   3 +-
 24 files changed, 432 insertions(+), 284 deletions(-)
 create mode 100644 website/src/components/Chat/ChatConfigDesktop.tsx
 rename website/src/components/Chat/{ChatConfigDrawer.tsx => ChatConfigForm.tsx} (86%)
 create mode 100644 website/src/components/Chat/ChatConfigMobile.tsx
 create mode 100644 website/src/components/Chat/ChatInputIconButton.tsx

diff --git a/website/public/locales/en/chat.json b/website/public/locales/en/chat.json
index bd473b74ff..99ca3bd84a 100644
--- a/website/public/locales/en/chat.json
+++ b/website/public/locales/en/chat.json
@@ -23,5 +23,6 @@
   "top_p": "Top P",
   "typical_p": "Typical P",
   "you_are_logged_in": "You are logged in to the chat service",
-  "your_chats": "Your Chats"
+  "your_chats": "Your Chats",
+  "input_placeholder": "Ask the assistant anything"
 }
diff --git a/website/src/components/Chat/ChatConfigDesktop.tsx b/website/src/components/Chat/ChatConfigDesktop.tsx
new file mode 100644
index 0000000000..e58b7253ca
--- /dev/null
+++ b/website/src/components/Chat/ChatConfigDesktop.tsx
@@ -0,0 +1,38 @@
+import { Box } from "@chakra-ui/react";
+import { useTranslation } from "next-i18next";
+import { memo } from "react";
+import SimpleBar from "simplebar-react";
+
+import { ChatConfigForm } from "./ChatConfigForm";
+
+export const ChatConfigDesktop = memo(function ChatConfigDesktop() {
+  const { t } = useTranslation("chat");
+  return (
+    <Box
+      py="4"
+      pl="4"
+      gap="1"
+      height="full"
+      minH="0"
+      flexDirection="column"
+      w="270px"
+      display={{ base: "none", xl: "flex" }}
+      _dark={{
+        bg: "blackAlpha.400",
+      }}
+    >
+      <Box fontSize="xl" borderBottomWidth="1px" mb="4" pb="4">
+        {t("config_title")}
+      </Box>
+
+      <SimpleBar
+        style={{ maxHeight: "100%", height: "100%", minHeight: "0" }}
+        classNames={{
+          contentEl: "mr-4 flex flex-col overflow-y-auto items-center",
+        }}
+      >
+        <ChatConfigForm></ChatConfigForm>
+      </SimpleBar>
+    </Box>
+  );
+});
diff --git a/website/src/components/Chat/ChatConfigDrawer.tsx b/website/src/components/Chat/ChatConfigForm.tsx
similarity index 86%
rename from website/src/components/Chat/ChatConfigDrawer.tsx
rename to website/src/components/Chat/ChatConfigForm.tsx
index bfb33b31e7..69a5d7bd7c 100644
--- a/website/src/components/Chat/ChatConfigDrawer.tsx
+++ b/website/src/components/Chat/ChatConfigForm.tsx
@@ -1,14 +1,7 @@
 import {
-  Drawer,
-  DrawerBody,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerHeader,
-  DrawerOverlay,
   Flex,
   FormControl,
   FormLabel,
-  IconButton,
   NumberDecrementStepper,
   NumberIncrementStepper,
   NumberInput,
@@ -22,9 +15,7 @@ import {
   Stack,
   Switch,
   Tooltip,
-  useDisclosure,
 } from "@chakra-ui/react";
-import { Settings } from "lucide-react";
 import { useTranslation } from "next-i18next";
 import { ChangeEvent, memo, useCallback, useState } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
@@ -32,28 +23,6 @@ import { ChatConfigFormData, SamplingParameters } from "src/types/Chat";
 
 import { useChatContext } from "./ChatContext";
 import { areParametersEqual } from "./WorkParameters";
-
-export const ChatConfigDrawer = memo(function ChatConfigDrawer() {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-
-  const { t } = useTranslation("chat");
-  return (
-    <>
-      <IconButton aria-label={t("config_title")} icon={<Settings />} onClick={onOpen} size="lg" borderRadius="xl" />
-      <Drawer placement="right" onClose={onClose} isOpen={isOpen}>
-        <DrawerOverlay />
-        <DrawerContent>
-          <DrawerCloseButton />
-          <DrawerHeader borderBottomWidth="1px">{t("config_title")}</DrawerHeader>
-          <DrawerBody>
-            <ChatConfigForm />
-          </DrawerBody>
-        </DrawerContent>
-      </Drawer>
-    </>
-  );
-});
-
 const sliderItems: Readonly<
   Array<{
     key: keyof SamplingParameters;
@@ -112,7 +81,7 @@ const parameterLabel: Record<keyof SamplingParameters, string> = {
   typical_p: "Typical P",
 };
 
-const ChatConfigForm = () => {
+export const ChatConfigForm = memo(function ChatConfigForm() {
   const { t } = useTranslation("chat");
   const { modelInfos } = useChatContext();
 
@@ -178,7 +147,7 @@ const ChatConfigForm = () => {
       ))}
     </Stack>
   );
-};
+});
 
 type NumberInputSliderProps = {
   max?: number;
@@ -216,7 +185,9 @@ const ChatParameterField = memo(function ChatParameterField(props: NumberInputSl
     <FormControl isDisabled={isDisabled}>
       <Flex justifyContent="space-between" mb="2">
         <FormLabel mb="0">
-          <Tooltip label={description}>{label}</Tooltip>
+          <Tooltip label={description} placement="left">
+            {label}
+          </Tooltip>
         </FormLabel>
         <Switch isChecked={showSlider} onChange={handleShowSliderChange}></Switch>
       </Flex>
diff --git a/website/src/components/Chat/ChatConfigMobile.tsx b/website/src/components/Chat/ChatConfigMobile.tsx
new file mode 100644
index 0000000000..caa7579b02
--- /dev/null
+++ b/website/src/components/Chat/ChatConfigMobile.tsx
@@ -0,0 +1,42 @@
+import {
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerHeader,
+  DrawerOverlay,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { Settings } from "lucide-react";
+import { useTranslation } from "next-i18next";
+import { memo } from "react";
+
+import { ChatConfigForm } from "./ChatConfigForm";
+import { ChatInputIconButton } from "./ChatInputIconButton";
+
+export const ChatConfigDrawer = memo(function ChatConfigDrawer() {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const { t } = useTranslation("chat");
+  return (
+    <>
+      <ChatInputIconButton
+        aria-label={t("config_title")}
+        icon={Settings}
+        onClick={onOpen}
+        borderRadius="xl"
+        display={{ base: "flex", xl: "none" }}
+      />
+      <Drawer placement="right" onClose={onClose} isOpen={isOpen}>
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerCloseButton />
+          <DrawerHeader borderBottomWidth="1px">{t("config_title")}</DrawerHeader>
+          <DrawerBody>
+            <ChatConfigForm />
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+});
diff --git a/website/src/components/Chat/ChatConfigSaver.tsx b/website/src/components/Chat/ChatConfigSaver.tsx
index 698317d09f..2d258d0a09 100644
--- a/website/src/components/Chat/ChatConfigSaver.tsx
+++ b/website/src/components/Chat/ChatConfigSaver.tsx
@@ -4,11 +4,14 @@ import { ChatConfigFormData } from "src/types/Chat";
 import { setConfigCache } from "src/utils/chat";
 
 export const ChatConfigSaver = () => {
-  const { watch } = useFormContext<ChatConfigFormData>();
+  const { watch, formState } = useFormContext<ChatConfigFormData>();
   const config = watch();
   useEffect(() => {
-    setConfigCache(config);
-  }, [config]);
+    // only update when form is changed
+    if (formState.isDirty) {
+      setConfigCache(config);
+    }
+  }, [config, formState.isDirty]);
 
   return null;
 };
diff --git a/website/src/components/Chat/ChatConversation.tsx b/website/src/components/Chat/ChatConversation.tsx
index ce5138d686..4bdc262a6c 100644
--- a/website/src/components/Chat/ChatConversation.tsx
+++ b/website/src/components/Chat/ChatConversation.tsx
@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Flex, useBoolean, useToast } from "@chakra-ui/react";
+import { Box, useBoolean, useToast } from "@chakra-ui/react";
 import { memo, useCallback, useRef, useState } from "react";
 import { UseFormGetValues } from "react-hook-form";
+import SimpleBar from "simplebar-react";
 import { useMessageVote } from "src/hooks/chat/useMessageVote";
 import { get, post } from "src/lib/api";
 import { handleChatEventStream, QueueInfo } from "src/lib/chat_stream";
@@ -200,18 +201,39 @@ export const ChatConversation = memo(function ChatConversation({ chatId, getConf
   );
 
   return (
-    <Flex flexDir="column" gap={4}>
-      <ChatConversationTree
-        messages={messages}
-        onVote={handleOnVote}
-        onRetry={handleOnRetry}
-        isSending={isSending}
-        retryingParentId={retryingParentId}
-        onEditPromtp={handleEditPrompt}
-      ></ChatConversationTree>
-      {isSending && streamedResponse && <PendingMessageEntry isAssistant content={streamedResponse} />}
-
+    <Box
+      pt="4"
+      px="2"
+      gap="1"
+      height="full"
+      minH="0"
+      display="flex"
+      flexDirection="column"
+      flexGrow="1"
+      _light={{
+        bg: "gray.50",
+      }}
+      _dark={{
+        bg: "blackAlpha.300",
+      }}
+    >
+      <SimpleBar
+        style={{ padding: "4px 0", maxHeight: "100%", height: "100%", minHeight: "0" }}
+        classNames={{
+          contentEl: "space-y-4 mx-4 flex flex-col overflow-y-auto items-center",
+        }}
+      >
+        <ChatConversationTree
+          messages={messages}
+          onVote={handleOnVote}
+          onRetry={handleOnRetry}
+          isSending={isSending}
+          retryingParentId={retryingParentId}
+          onEditPromtp={handleEditPrompt}
+        ></ChatConversationTree>
+        {isSending && streamedResponse && <PendingMessageEntry isAssistant content={streamedResponse} />}
+      </SimpleBar>
       <ChatForm ref={inputRef} isSending={isSending} onSubmit={sendPrompterMessage} queueInfo={queueInfo}></ChatForm>
-    </Flex>
+    </Box>
   );
 });
diff --git a/website/src/components/Chat/ChatForm.tsx b/website/src/components/Chat/ChatForm.tsx
index da27a5808a..059f5cef24 100644
--- a/website/src/components/Chat/ChatForm.tsx
+++ b/website/src/components/Chat/ChatForm.tsx
@@ -1,11 +1,12 @@
-import { Button, Grid, Textarea } from "@chakra-ui/react";
+import { Box, CircularProgress, Flex, Textarea } from "@chakra-ui/react";
+import { Send } from "lucide-react";
 import { useTranslation } from "next-i18next";
 import { forwardRef, KeyboardEvent, SyntheticEvent, useCallback } from "react";
 import TextareaAutosize from "react-textarea-autosize";
 import { QueueInfo } from "src/lib/chat_stream";
 
-import { ChatConfigDrawer } from "./ChatConfigDrawer";
-import { QueueInfoMessage } from "./QueueInfoMessage";
+import { ChatConfigDrawer } from "./ChatConfigMobile";
+import { ChatInputIconButton } from "./ChatInputIconButton";
 
 type ChatFormProps = {
   isSending: boolean;
@@ -16,7 +17,7 @@ type ChatFormProps = {
 // eslint-disable-next-line react/display-name
 export const ChatForm = forwardRef<HTMLTextAreaElement, ChatFormProps>((props, ref) => {
   const { isSending, onSubmit: onSubmit, queueInfo } = props;
-  const { t } = useTranslation("common");
+  const { t } = useTranslation("chat");
   const handleSubmit = useCallback(
     (e: SyntheticEvent) => {
       e.preventDefault();
@@ -34,31 +35,43 @@ export const ChatForm = forwardRef<HTMLTextAreaElement, ChatFormProps>((props, r
     [onSubmit]
   );
   return (
-    <form onSubmit={handleSubmit}>
-      <Textarea
-        as={TextareaAutosize}
-        ref={ref}
-        bg="gray.100"
-        borderRadius="xl"
-        onKeyDown={handleKeydown}
-        _dark={{
-          bg: "gray.800",
-        }}
-      />
-      <Grid gridTemplateColumns="1fr 50px" gap={2} mt="4">
-        <Button
-          type="submit"
-          onClick={handleSubmit}
-          isLoading={isSending}
-          overflow="hidden"
-          spinner={queueInfo ? <QueueInfoMessage info={queueInfo} /> : undefined}
-          size="lg"
-          borderRadius="xl"
-        >
-          {t("submit")}
-        </Button>
-        <ChatConfigDrawer />
-      </Grid>
-    </form>
+    <Box
+      as="form"
+      maxWidth={{ base: "3xl", "2xl": "4xl" }}
+      onSubmit={handleSubmit}
+      className="pt-2 pb-4 w-full mx-auto"
+    >
+      <div className="relative">
+        <Textarea
+          as={TextareaAutosize}
+          ref={ref}
+          bg="gray.200"
+          borderRadius="md"
+          rows={1}
+          maxRows={10}
+          py={{ base: 2, md: 3 }}
+          onKeyDown={handleKeydown}
+          placeholder={t("input_placeholder")}
+          _dark={{
+            bg: "whiteAlpha.100",
+          }}
+          border="0"
+          outline="none"
+          _focus={{
+            outline: "none !important",
+            boxShadow: "none",
+          }}
+          style={{ resize: "none" }}
+        />
+        <Flex position="absolute" zIndex="10" className="ltr:right-0 rtl:left-0 top-0 h-full items-center px-4" gap="2">
+          <ChatConfigDrawer />
+          {isSending ? (
+            <CircularProgress isIndeterminate size="20px" />
+          ) : (
+            <ChatInputIconButton icon={Send} onClick={handleSubmit}></ChatInputIconButton>
+          )}
+        </Flex>
+      </div>
+    </Box>
   );
 });
diff --git a/website/src/components/Chat/ChatInputIconButton.tsx b/website/src/components/Chat/ChatInputIconButton.tsx
new file mode 100644
index 0000000000..0d050c1b8b
--- /dev/null
+++ b/website/src/components/Chat/ChatInputIconButton.tsx
@@ -0,0 +1,19 @@
+import { Box, BoxProps } from "@chakra-ui/react";
+import { LucideIcon } from "lucide-react";
+
+export const ChatInputIconButton = ({ icon: Icon, ...props }: { icon: LucideIcon } & BoxProps) => (
+  <Box
+    as="button"
+    color="gray.500"
+    _light={{
+      _hover: { color: "gray.700" },
+    }}
+    _dark={{
+      _hover: { color: "white" },
+    }}
+    {...props}
+    type="button"
+  >
+    <Icon size="20px"></Icon>
+  </Box>
+);
diff --git a/website/src/components/Chat/ChatListBase.tsx b/website/src/components/Chat/ChatListBase.tsx
index 149f894e1e..751d1fdaa0 100644
--- a/website/src/components/Chat/ChatListBase.tsx
+++ b/website/src/components/Chat/ChatListBase.tsx
@@ -1,40 +1,28 @@
 import "simplebar-react/dist/simplebar.min.css";
 
-import { Card, CardProps } from "@chakra-ui/react";
+import { Box, CardProps } from "@chakra-ui/react";
 import { Plus } from "lucide-react";
 import { useTranslation } from "next-i18next";
-import { memo, useCallback, useMemo } from "react";
+import { memo, useCallback } from "react";
 import SimpleBar from "simplebar-react";
 import { get } from "src/lib/api";
 import { API_ROUTES } from "src/lib/routes";
 import { GetChatsResponse } from "src/types/Chat";
 import useSWR from "swr";
 
-import { HEADER_HEIGHT } from "../Header/Header";
 import { ChatListItem } from "./ChatListItem";
 import { CreateChatButton } from "./CreateChatButton";
+import { InferencePoweredBy } from "./InferencePoweredBy";
 
 export const ChatListBase = memo(function ChatListBase({
-  isSideBar,
   chats, // TODO: can we remove this?
   ...props
-}: CardProps & { isSideBar: boolean; chats?: GetChatsResponse }) {
+}: CardProps & { chats?: GetChatsResponse }) {
   const { data: response, mutate: mutateChatResponse } = useSWR<GetChatsResponse>(API_ROUTES.LIST_CHAT, get, {
     fallbackData: chats,
   });
   const { t } = useTranslation(["common", "chat"]);
 
-  const sideProps: CardProps = useMemo(
-    () =>
-      isSideBar
-        ? {
-            w: "260px",
-            position: "fixed",
-          }
-        : {},
-    [isSideBar]
-  );
-
   const handleUpdateTitle = useCallback(
     ({ chatId, title }: { chatId: string; title: string }) => {
       mutateChatResponse(
@@ -62,22 +50,16 @@ export const ChatListBase = memo(function ChatListBase({
   );
 
   return (
-    <Card
-      py="3"
+    <Box
       gap="1"
-      height={`calc(100vh - ${HEADER_HEIGHT} - ${1.5 * 2}rem)`}
-      overflowY="hidden"
-      _light={{
-        ".simplebar-scrollbar::before": {
-          bg: "gray.300",
-        },
-      }}
+      height="full"
+      minH="0"
+      display="flex"
+      flexDirection="column"
+      bg="whiteAlpha.400"
       _dark={{
-        ".simplebar-scrollbar::before": {
-          bg: "gray.500",
-        },
+        bg: "blackAlpha.400",
       }}
-      {...sideProps}
       {...props}
     >
       <CreateChatButton
@@ -93,15 +75,16 @@ export const ChatListBase = memo(function ChatListBase({
         {t("create_chat")}
       </CreateChatButton>
       <SimpleBar
-        style={{ maxHeight: "100%", padding: "2px 0" }}
+        style={{ padding: "4px 0", maxHeight: "100%", height: "100%", minHeight: "0" }}
         classNames={{
-          contentEl: "space-y-2 mx-3",
+          contentEl: "space-y-2 mx-3 flex flex-col overflow-y-auto",
         }}
       >
         {response?.chats.map((chat) => (
           <ChatListItem key={chat.id} chat={chat} onUpdateTitle={handleUpdateTitle} onHide={handleHide}></ChatListItem>
         ))}
       </SimpleBar>
-    </Card>
+      <InferencePoweredBy />
+    </Box>
   );
 });
diff --git a/website/src/components/Chat/ChatListDesktop.tsx b/website/src/components/Chat/ChatListDesktop.tsx
index 39293683ae..5311a31206 100644
--- a/website/src/components/Chat/ChatListDesktop.tsx
+++ b/website/src/components/Chat/ChatListDesktop.tsx
@@ -1,12 +1,7 @@
-import { Box } from "@chakra-ui/react";
-import { memo } from "react";
-
 import { ChatListBase } from "./ChatListBase";
 
-export const ChatListDesktop = memo(function ChatListDesktop() {
-  return (
-    <Box pe="260px" display={{ base: "none", lg: "block" }}>
-      <ChatListBase isSideBar />
-    </Box>
-  );
-});
+const display = { base: "none", lg: "flex" };
+
+export const ChatListDesktop = () => {
+  return <ChatListBase pt="4" display={display} w="full" maxW="270px"></ChatListBase>;
+};
diff --git a/website/src/components/Chat/ChatListItem.tsx b/website/src/components/Chat/ChatListItem.tsx
index ed653054ba..513055e156 100644
--- a/website/src/components/Chat/ChatListItem.tsx
+++ b/website/src/components/Chat/ChatListItem.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
 import { KeyboardEvent, MouseEvent, useCallback, useRef } from "react";
-import { del, put } from "src/lib/api";
+import { put } from "src/lib/api";
 import { API_ROUTES, ROUTES } from "src/lib/routes";
 import { ChatItem } from "src/types/Chat";
 import useSWRMutation from "swr/mutation";
@@ -73,7 +73,12 @@ export const ChatListItem = ({
       borderRadius="lg"
       bg={isEditing ? "transparent" : undefined}
       _hover={{
-        bg: isEditing ? "transparent" : undefined,
+        bg: isEditing ? "transparent" : isActive ? "gray.200" : "gray.100",
+      }}
+      _dark={{
+        _hover: {
+          bg: isEditing ? "transparent" : isActive ? "whiteAlpha.300" : "whiteAlpha.200",
+        },
       }}
     >
       {!isEditing ? (
diff --git a/website/src/components/Chat/ChatListMobile.tsx b/website/src/components/Chat/ChatListMobile.tsx
index 97bb9234d1..7a46a40e52 100644
--- a/website/src/components/Chat/ChatListMobile.tsx
+++ b/website/src/components/Chat/ChatListMobile.tsx
@@ -1,12 +1,22 @@
-import { Drawer, DrawerCloseButton, DrawerContent, DrawerOverlay, IconButton, useDisclosure } from "@chakra-ui/react";
+import {
+  Drawer,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerOverlay,
+  Flex,
+  IconButton,
+  useDisclosure,
+} from "@chakra-ui/react";
 import { AlignJustify } from "lucide-react";
 import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
-import { useEffect } from "react";
+import { memo, useEffect } from "react";
 
+import { getDashBoardLayoutSidebarItem } from "../Layout";
+import { SideMenuItem } from "../SideMenu";
 import { ChatListBase } from "./ChatListBase";
 
-export function ChatListMobile() {
+export const ChatListMobile = memo(function ChatListMobile() {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { t } = useTranslation("chat");
   const { events } = useRouter();
@@ -27,7 +37,7 @@ export function ChatListMobile() {
   return (
     <>
       <IconButton
-        display={{ base: "flex", md: "none" }}
+        display={{ base: "flex", lg: "none" }}
         onClick={onOpen}
         icon={<AlignJustify />}
         aria-label={t("your_chats")}
@@ -38,7 +48,7 @@ export function ChatListMobile() {
       ></IconButton>
       <Drawer isOpen={isOpen} placement="left" onClose={onClose}>
         <DrawerOverlay />
-        <DrawerContent maxW="260px">
+        <DrawerContent>
           <DrawerCloseButton
             style={{
               insetInlineEnd: `-2.5rem`,
@@ -47,9 +57,34 @@ export function ChatListMobile() {
             _dark={{ bg: "gray.600" }}
             bg="white"
           />
-          <ChatListBase isSideBar position="relative" h="100vh" />
+          <div className="flex min-h-0 h-full">
+            <Flex
+              direction="column"
+              gap="2"
+              px="2"
+              display={{ base: "flex", sm: "none" }}
+              _light={{
+                bg: "gray.50",
+              }}
+              _dark={{
+                bg: "blackAlpha.200",
+              }}
+              height="full"
+              pt="4"
+            >
+              {getDashBoardLayoutSidebarItem().map((item) => (
+                <SideMenuItem
+                  key={item.labelID}
+                  item={item}
+                  variant="chat"
+                  active={item.labelID === "chat"}
+                ></SideMenuItem>
+              ))}
+            </Flex>
+            <ChatListBase w="full" py="4"></ChatListBase>
+          </div>
         </DrawerContent>
       </Drawer>
     </>
   );
-}
+});
diff --git a/website/src/components/Chat/ChatMessageEntry.tsx b/website/src/components/Chat/ChatMessageEntry.tsx
index 94fffef9fe..0a290dc9a4 100644
--- a/website/src/components/Chat/ChatMessageEntry.tsx
+++ b/website/src/components/Chat/ChatMessageEntry.tsx
@@ -167,11 +167,16 @@ type PendingMessageEntryProps = {
   "data-id"?: string;
 };
 
+const messageEntryContainerProps = {
+  maxWidth: { base: "3xl", "2xl": "4xl" },
+  w: "full",
+};
+
 export const PendingMessageEntry = forwardRef<HTMLDivElement, PendingMessageEntryProps>(function PendingMessageEntry(
   { content, isAssistant, children, ...props },
   ref
 ) {
-  const bgUser = useColorModeValue("white", "gray.700");
+  const bgUser = "transparent";
   const bgAssistant = useColorModeValue("#DFE8F1", "#42536B");
   const { data: session } = useSession();
   const image = session?.user?.image;
@@ -188,7 +193,8 @@ export const PendingMessageEntry = forwardRef<HTMLDivElement, PendingMessageEntr
       bg={isAssistant ? bgAssistant : bgUser}
       content={content || ""}
       width="full"
-      maxWidth="full"
+      maxWidth={messageEntryContainerProps.maxWidth}
+      containerProps={messageEntryContainerProps}
       {...props}
     >
       {children}
diff --git a/website/src/components/Chat/ChatSection.tsx b/website/src/components/Chat/ChatSection.tsx
index 97f75cda23..c52ba54618 100644
--- a/website/src/components/Chat/ChatSection.tsx
+++ b/website/src/components/Chat/ChatSection.tsx
@@ -1,46 +1,38 @@
-import { Card, CardBody, Divider } from "@chakra-ui/react";
-import dynamic from "next/dynamic";
 import { FormProvider, useForm } from "react-hook-form";
 import { ChatConfigFormData } from "src/types/Chat";
 import { getConfigCache } from "src/utils/chat";
+import { useIsomorphicLayoutEffect } from "usehooks-ts";
 
+import { ChatConfigDesktop } from "./ChatConfigDesktop";
 import { ChatConfigSaver } from "./ChatConfigSaver";
 import { useChatContext } from "./ChatContext";
 import { ChatConversation } from "./ChatConversation";
-import { InferencePoweredBy } from "./InferencePoweredBy";
-
-const ChatConfigSummary = dynamic(() => import("./ChatConfigSummary"), { ssr: false });
 
 export const ChatSection = ({ chatId }: { chatId: string | null }) => {
   const { modelInfos } = useChatContext();
 
   console.assert(modelInfos.length > 0, "No model config was found");
 
-  let defaultValues = getConfigCache();
-  if (defaultValues) {
-    const model = modelInfos.find((model) => model.name === defaultValues.model_config_name);
-    if (!model) {
-      defaultValues = null;
-    }
-  }
-  if (!defaultValues) {
-    defaultValues = {
+  const form = useForm<ChatConfigFormData>({
+    defaultValues: {
       ...modelInfos[0].parameter_configs[0].sampling_parameters,
       model_config_name: modelInfos[0].name,
-    };
-  }
+    },
+  });
+
+  useIsomorphicLayoutEffect(() => {
+    const cache = getConfigCache();
+    const model = modelInfos.find((model) => model.name === cache?.model_config_name);
+    if (model && cache) {
+      form.reset(cache);
+    }
+  }, [form.reset, modelInfos]);
 
-  const form = useForm<ChatConfigFormData>({ defaultValues });
   return (
     <FormProvider {...form}>
-      <Card className="mx-auto" maxW={{ base: "min(64rem, 90vw)", lg: "36rem", xl: "3xl", "2xl": "5xl" }}>
-        <CardBody display="flex" flexDirection="column" gap="2">
-          <ChatConversation chatId={chatId} key={chatId} getConfigValues={form.getValues} />
-          <ChatConfigSummary />
-          <Divider />
-          <InferencePoweredBy />
-        </CardBody>
-      </Card>
+      <ChatConversation chatId={chatId} key={chatId} getConfigValues={form.getValues} />
+
+      <ChatConfigDesktop></ChatConfigDesktop>
       <ChatConfigSaver />
     </FormProvider>
   );
diff --git a/website/src/components/Chat/InferencePoweredBy.tsx b/website/src/components/Chat/InferencePoweredBy.tsx
index ce5bb58ac0..b86b06e496 100644
--- a/website/src/components/Chat/InferencePoweredBy.tsx
+++ b/website/src/components/Chat/InferencePoweredBy.tsx
@@ -1,30 +1,27 @@
-import { Grid, Heading } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
+import { Fragment } from "react";
 import { TeamMember } from "src/components/TeamMember";
 
 import data from "../../data/team.json";
 
-const SponsorGroup = ({ heading, members }) => {
-  const { people } = data;
-  return (
-    <>
-      <Heading size="sm" mt={3} mb={1}>
-        {heading}
-      </Heading>
-      <Grid gap="6" gridTemplateColumns="repeat(auto-fit, minmax(300px, 1fr))">
-        {members.map((id) => {
-          const info = people[id] ?? {};
-          return <TeamMember {...info} key={id} />;
-        })}
-      </Grid>
-    </>
-  );
+const sponsors = ["hf", "stability", "redmond", "wandb"] as const;
+
+const rootProps = {
+  bg: "transparent",
+  borderRadius: 0,
 };
 
 export const InferencePoweredBy = () => {
   return (
-    <>
-      <SponsorGroup heading="Inference powered by" members={["hf", "stability"]} />
-      <SponsorGroup heading="Model training supported by" members={["redmond", "wandb"]} />
-    </>
+    <Flex direction="column" justifyContent="center" borderTopWidth="1px" p="2">
+      {sponsors.map((id) => (
+        <Fragment key={id}>
+          <TeamMember {...data.people[id]} rootProps={rootProps}></TeamMember>
+        </Fragment>
+      ))}
+      <Flex justifyContent="center" pb="2" fontSize="sm" color="gray.500">
+        Sponsored By
+      </Flex>
+    </Flex>
   );
 };
diff --git a/website/src/components/Header/Header.tsx b/website/src/components/Header/Header.tsx
index cb5c09d668..ac86465a50 100644
--- a/website/src/components/Header/Header.tsx
+++ b/website/src/components/Header/Header.tsx
@@ -33,11 +33,11 @@ function AccountButton() {
 
 export const HEADER_HEIGHT = "82px";
 
-export type HeaderProps = { preLogoSlot?: ReactNode };
+export type HeaderProps = { preLogoSlot?: ReactNode; fixed?: boolean };
 
 const ANNOUNCEMENT_CACHE_KEY = "announcement";
 
-export function Header({ preLogoSlot }: HeaderProps) {
+export function Header({ preLogoSlot, fixed = true }: HeaderProps) {
   const { t } = useTranslation();
   const { data: session } = useSession();
   const homeURL = session ? "/dashboard" : "/";
@@ -66,7 +66,7 @@ export function Header({ preLogoSlot }: HeaderProps) {
       {initialShowAnnouncement && showAnnouncement && (
         <Box
           zIndex={30}
-          position="fixed"
+          position={fixed ? "fixed" : "relative"}
           backgroundColor="yellow.400"
           display="flex"
           justifyContent="center"
@@ -87,7 +87,7 @@ export function Header({ preLogoSlot }: HeaderProps) {
         display="flex"
         justifyContent="space-between"
         p="4"
-        position="fixed"
+        position={fixed ? "fixed" : "relative"}
         zIndex={20}
         w="full"
         height={HEADER_HEIGHT}
@@ -103,7 +103,6 @@ export function Header({ preLogoSlot }: HeaderProps) {
             </Text>
           </Flex>
         </Flex>
-
         <Flex alignItems="center" gap={["2", "4"]}>
           <LanguageSelector />
           <AccountButton />
diff --git a/website/src/components/Layout/ChatLayout.tsx b/website/src/components/Layout/ChatLayout.tsx
index cba158ccac..e59341ea71 100644
--- a/website/src/components/Layout/ChatLayout.tsx
+++ b/website/src/components/Layout/ChatLayout.tsx
@@ -1,33 +1,38 @@
-import { Box, Flex } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 
 import { ChatListDesktop } from "../Chat/ChatListDesktop";
 import { ChatListMobile } from "../Chat/ChatListMobile";
-import { SlimFooter } from "../Dashboard/SlimFooter";
-import { HeaderLayout } from "../Header/Header";
+import { Header } from "../Header/Header";
 import { getDashBoardLayoutSidebarItem } from "../Layout";
-import { SideMenuLayout } from "../SideMenuLayout";
+import { SideMenuItem } from "../SideMenu";
 import { ToSWrapper } from "../ToSWrapper";
 
 export const getChatLayout = (page: React.ReactElement) => (
-  <HeaderLayout preLogoSlot={<ChatListMobile />}>
+  <div className="min-h-screen h-screen max-h-screen flex flex-col overflow-hidden">
+    <Header fixed={false} preLogoSlot={<ChatListMobile />}></Header>
     <ToSWrapper>
-      <SideMenuLayout
-        collapsed
-        items={getDashBoardLayoutSidebarItem()}
-        innerBoxProps={{
-          ms: { base: 0, lg: 6 },
-        }}
-      >
-        <Flex gap={{ md: 4, lg: 6 }}>
-          <ChatListDesktop></ChatListDesktop>
-          <Box flexGrow="1">
-            <Box>{page}</Box>
-            <Box mt="10">
-              <SlimFooter />
-            </Box>
-          </Box>
+      <div className="flex min-h-0 h-full">
+        <Flex
+          direction="column"
+          gap="2"
+          px="2"
+          display={{ base: "none", sm: "flex" }}
+          _light={{
+            bg: "gray.50",
+          }}
+          _dark={{
+            bg: "blackAlpha.200",
+          }}
+          height="full"
+          pt="4"
+        >
+          {getDashBoardLayoutSidebarItem().map((item) => (
+            <SideMenuItem key={item.labelID} item={item} variant="chat" active={item.labelID === "chat"}></SideMenuItem>
+          ))}
         </Flex>
-      </SideMenuLayout>
+        <ChatListDesktop></ChatListDesktop>
+        {page}
+      </div>
     </ToSWrapper>
-  </HeaderLayout>
+  </div>
 );
diff --git a/website/src/components/Messages/BaseMessageEntry.tsx b/website/src/components/Messages/BaseMessageEntry.tsx
index c694c21e7e..c620194e0b 100644
--- a/website/src/components/Messages/BaseMessageEntry.tsx
+++ b/website/src/components/Messages/BaseMessageEntry.tsx
@@ -10,10 +10,11 @@ export type BaseMessageEntryProps = StrictOmit<BoxProps, "bg" | "backgroundColor
   avatarProps: Pick<AvatarProps, "name" | "src">;
   bg?: string;
   highlight?: boolean;
+  containerProps?: BoxProps;
 };
 
 export const BaseMessageEntry = forwardRef<HTMLDivElement, BaseMessageEntryProps>(function BaseMessageEntry(
-  { content, avatarProps, children, highlight, ...props },
+  { content, avatarProps, children, highlight, containerProps, ...props },
   ref
 ) {
   const bg = useColorModeValue("#DFE8F1", "#42536B");
@@ -33,6 +34,7 @@ export const BaseMessageEntry = forwardRef<HTMLDivElement, BaseMessageEntryProps
       outline={highlight ? { base: `2px solid black`, md: "0px" } : undefined}
       outlineColor={colors.light.active}
       _dark={{ outlineColor: colors.dark.active }}
+      {...containerProps}
     >
       <Avatar
         borderColor="blackAlpha.200"
diff --git a/website/src/components/SideMenu.tsx b/website/src/components/SideMenu.tsx
index 4eac78c7cd..76eeaa07d5 100644
--- a/website/src/components/SideMenu.tsx
+++ b/website/src/components/SideMenu.tsx
@@ -8,7 +8,7 @@ import { getTypeSafei18nKey } from "src/lib/i18n";
 
 import { HEADER_HEIGHT } from "./Header/Header";
 
-export interface SideMenuItem {
+export interface SideMenuItemType {
   labelID: string;
   pathname: string;
   icon: LucideIcon;
@@ -16,8 +16,7 @@ export interface SideMenuItem {
 }
 
 export interface SideMenuProps {
-  items: SideMenuItem[];
-  collapsed?: boolean;
+  items: SideMenuItemType[];
 }
 
 export const SIDE_MENU_WIDTH = {
@@ -25,64 +24,78 @@ export const SIDE_MENU_WIDTH = {
   LG: `280px`,
 };
 
-export function SideMenu({ items, collapsed }: SideMenuProps) {
-  const router = useRouter();
-  const { t } = useTranslation();
-  const desktopBreakpoint = collapsed ? "lg" : "md";
+export function SideMenu({ items }: SideMenuProps) {
   return (
     <Card
-      position={{ base: "relative", [desktopBreakpoint]: "fixed" }}
-      p={{ base: 4, md: 3, lg: collapsed ? 3 : 4 }}
+      position={{ base: "relative", md: "fixed" }}
+      p={{ base: 4, md: 3, lg: 4 }}
       width={{
         base: "100%",
-        ...(collapsed ? { [desktopBreakpoint]: `100px` } : { md: SIDE_MENU_WIDTH.MD, lg: SIDE_MENU_WIDTH.LG }),
+        md: SIDE_MENU_WIDTH.MD,
+        lg: SIDE_MENU_WIDTH.LG,
       }}
-      height={{ base: "auto", [desktopBreakpoint]: `calc(100vh - ${HEADER_HEIGHT} - ${1.5 * 2}rem)` }}
+      height={{ base: "auto", md: `calc(100vh - ${HEADER_HEIGHT} - ${1.5 * 2}rem)` }}
     >
       <Box
         as="nav"
         gap="2"
-        display={{ base: "grid", [desktopBreakpoint]: "flex" }}
+        display={{ base: "grid", md: "flex" }}
         flexDirection="column"
         className="grid-cols-3 col-span-3"
       >
-        {items.map((item) => {
-          const label = t(getTypeSafei18nKey(item.labelID));
-          return (
-            <Tooltip
-              key={item.labelID}
-              label={label}
-              placement="right"
-              className={clsx("hidden sm:block", { "lg:hidden": !collapsed })}
-            >
-              <Button
-                as={Link}
-                key={item.labelID}
-                href={item.pathname}
-                target={item.target}
-                className="no-underline"
-                gap={3}
-                borderRadius="lg"
-                size="lg"
-                justifyContent={{ base: "center", lg: collapsed ? "center" : "start" }}
-                width="full"
-                p={collapsed ? 0 : undefined}
-                bg={router.pathname === item.pathname ? "blue.500" : undefined}
-                _hover={router.pathname === item.pathname ? { bg: "blue.600" } : undefined}
-              >
-                <item.icon size={"1em"} className={router.pathname === item.pathname ? "text-blue-200" : undefined} />
-                <Text
-                  fontWeight="normal"
-                  color={router.pathname === item.pathname ? "white" : undefined}
-                  className={clsx("hidden", { "lg:block": !collapsed })}
-                >
-                  {label}
-                </Text>
-              </Button>
-            </Tooltip>
-          );
-        })}
+        {items.map((item) => (
+          <SideMenuItem item={item} key={item.labelID} variant="default"></SideMenuItem>
+        ))}
       </Box>
     </Card>
   );
 }
+
+export const SideMenuItem = ({
+  item,
+  variant = "default",
+  active,
+}: {
+  item: SideMenuItemType;
+  variant: "default" | "chat";
+  active?: boolean;
+}) => {
+  const isChat = variant === "chat";
+  const router = useRouter();
+  const { t } = useTranslation();
+  const label = t(getTypeSafei18nKey(item.labelID));
+  const isActive = active ?? router.pathname === item.pathname;
+  return (
+    <Tooltip
+      key={item.labelID}
+      label={label}
+      placement="right"
+      className={clsx("hidden sm:block", { "lg:hidden": !isChat })}
+    >
+      <Button
+        as={Link}
+        key={item.labelID}
+        href={item.pathname}
+        target={item.target}
+        className="no-underline"
+        gap={3}
+        borderRadius={isChat ? "2xl" : "lg"}
+        size="lg"
+        justifyContent={{ base: "center", lg: isChat ? "center" : "start" }}
+        width="full"
+        p={isChat ? 2 : undefined}
+        bg={isActive ? "blue.500" : undefined}
+        _hover={isActive ? { bg: "blue.600" } : undefined}
+      >
+        <item.icon size={"1em"} className={isActive ? "text-blue-200" : undefined} />
+        <Text
+          fontWeight="normal"
+          color={isActive ? "white" : undefined}
+          className={clsx("hidden", { "lg:block": !isChat })}
+        >
+          {label}
+        </Text>
+      </Button>
+    </Tooltip>
+  );
+};
diff --git a/website/src/components/SideMenuLayout.tsx b/website/src/components/SideMenuLayout.tsx
index de567896ae..7f1c6397ec 100644
--- a/website/src/components/SideMenuLayout.tsx
+++ b/website/src/components/SideMenuLayout.tsx
@@ -1,38 +1,31 @@
-import { Box, BoxProps } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
 import { PropsWithChildren } from "react";
 import { SIDE_MENU_WIDTH, SideMenu, SideMenuProps } from "src/components/SideMenu";
+import { colors } from "src/styles/Theme/colors";
 
-export const SideMenuLayout = ({
-  items,
-  children,
-  collapsed,
-  innerBoxProps,
-}: PropsWithChildren<SideMenuProps> & {
-  innerBoxProps?: BoxProps;
-}) => {
-  const desktopBreakpoint = collapsed ? "lg" : "md";
-
+export const SideMenuLayout = ({ items, children }: PropsWithChildren<SideMenuProps>) => {
   return (
     <Box
       display="flex"
-      flexDirection={{ base: "column", [desktopBreakpoint]: "row" }}
-      h="full"
+      flexDirection={{ base: "column", md: "row" }}
       px={{ base: 3, lg: 6 }}
       py="6"
       position="relative"
+      bg="gray.100"
+      _dark={{
+        bg: colors.dark.bg,
+      }}
     >
-      <SideMenu items={items} collapsed={collapsed} />
+      <SideMenu items={items} />
       <Box
-        className="innerBox"
         display="block"
         w="full"
         ms={{ md: 4, lg: 6 }}
         ps={{
-          [desktopBreakpoint]: SIDE_MENU_WIDTH.MD,
-          lg: collapsed ? SIDE_MENU_WIDTH.MD : SIDE_MENU_WIDTH.LG,
+          md: SIDE_MENU_WIDTH.MD,
+          lg: SIDE_MENU_WIDTH.LG,
         }}
-        mt={{ base: 6, [desktopBreakpoint]: 0 }}
-        {...innerBoxProps}
+        mt={{ base: 6, md: 0 }}
       >
         {children}
       </Box>
diff --git a/website/src/components/TeamMember.tsx b/website/src/components/TeamMember.tsx
index e456ccb995..f60a19ee9a 100644
--- a/website/src/components/TeamMember.tsx
+++ b/website/src/components/TeamMember.tsx
@@ -1,4 +1,4 @@
-import { Avatar, Badge, Box, Flex, Text, useColorModeValue } from "@chakra-ui/react";
+import { Avatar, Badge, Box, Flex, FlexProps, Text, useColorModeValue } from "@chakra-ui/react";
 import { Github } from "@icons-pack/react-simple-icons";
 import Link from "next/link";
 
@@ -8,11 +8,13 @@ export interface TeamMemberProps {
   url?: string;
   githubURL?: string;
   title: string;
+  rootProps?: FlexProps;
 }
-export function TeamMember({ name, url, imageURL, githubURL, title }: TeamMemberProps) {
+
+export function TeamMember({ name, url, imageURL, githubURL, title, rootProps }: TeamMemberProps) {
   const contributorBackgroundColor = useColorModeValue("gray.200", "gray.700");
   return (
-    <Flex gap="3" bg={contributorBackgroundColor} borderRadius="md" p="2">
+    <Flex gap="3" bg={contributorBackgroundColor} borderRadius="md" p="2" {...rootProps}>
       <Avatar src={imageURL} loading="lazy" name={name} />
       <Box>
         <Flex gap={3} fontWeight="bold">
diff --git a/website/src/pages/chat/index.tsx b/website/src/pages/chat/index.tsx
index baa76f298d..313fdabdbb 100644
--- a/website/src/pages/chat/index.tsx
+++ b/website/src/pages/chat/index.tsx
@@ -22,7 +22,20 @@ const ChatList = ({ chatResponse }: InferGetServerSidePropsType<typeof getServer
       <Head>
         <title>{t("chat")}</title>
       </Head>
-      <ChatListBase chats={chatResponse} isSideBar={false} className="max-w-5xl mx-auto" />
+      <ChatListBase
+        chats={chatResponse}
+        className="max-w-5xl mx-auto"
+        pt="4"
+        px="4"
+        borderRadius="xl"
+        _light={{
+          bg: "white",
+        }}
+        _dark={{
+          bg: "gray.700",
+        }}
+        shadow="md"
+      />
     </>
   );
 };
diff --git a/website/src/styles/Theme/index.ts b/website/src/styles/Theme/index.ts
index 02f8ebf923..e29225cbf1 100644
--- a/website/src/styles/Theme/index.ts
+++ b/website/src/styles/Theme/index.ts
@@ -1,5 +1,6 @@
 import { type ThemeConfig, extendTheme } from "@chakra-ui/react";
 import { Styles } from "@chakra-ui/theme-tools";
+import { Inter } from "@next/font/google";
 import { withProse } from "@nikolovlazar/chakra-ui-prose";
 
 import { colors } from "./colors";
@@ -7,7 +8,6 @@ import { badgeTheme } from "./components/Badge";
 import { cardTheme } from "./components/Card";
 import { containerTheme } from "./components/Container";
 import { tableTheme } from "./components/Table";
-import { Inter } from "@next/font/google";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -41,8 +41,6 @@ const styles: Styles = {
   global: (props) => ({
     "*": {
       transition: "background-color 200ms cubic-bezier(0.4, 0, 1, 1)",
-      // bg: props.colorMode === "light" ? colors.light.bg : colors.dark.bg,
-      // color: props.colorMode === "light" ? colors.light.text : colors.dark.text,
     },
     ".oa-basic-theme": {
       bg: props.colorMode === "light" ? colors.light.bg : colors.dark.bg,
@@ -50,7 +48,9 @@ const styles: Styles = {
     },
     body: {
       position: "relative",
-      bg: props.colorMode === "light" ? "gray.100" : colors.dark.bg,
+    },
+    ".simplebar-scrollbar::before": {
+      bg: props.colorMode === "light" ? "gray.300" : "gray.500",
     },
   }),
 };
diff --git a/website/src/utils/chat.ts b/website/src/utils/chat.ts
index b17d3a769b..ed0fdc364c 100644
--- a/website/src/utils/chat.ts
+++ b/website/src/utils/chat.ts
@@ -8,13 +8,12 @@ export const setConfigCache = (config: ChatConfigFormData) => {
   }
 };
 
-export const getConfigCache = () => {
+export const getConfigCache = (): ChatConfigFormData | null => {
   if (typeof localStorage !== "undefined") {
     const oldConfig = localStorage.getItem(CHAT_CONFIG_KEY);
     if (oldConfig) {
       return JSON.parse(oldConfig);
     }
-    return null;
   }
   return null;
 };