From 1c506623946edc80017dfa62cedb48da8fd14037 Mon Sep 17 00:00:00 2001
From: notmd <33456881+notmd@users.noreply.github.com>
Date: Mon, 12 Jun 2023 03:15:17 +0700
Subject: [PATCH] Fix chat list double scrollbar (#3385)

Close #3252
- Dont render scrollbar in /chat page anymore.
- Fix an overflow bug in the chat list

I have manually verified all the UI
---
 .../src/components/Chat/ChatConversation.tsx  |  2 +-
 website/src/components/Chat/ChatListBase.tsx  | 43 +++++++++++++------
 website/src/components/Chat/ChatListItem.tsx  |  3 +-
 website/src/pages/chat/index.tsx              |  4 +-
 4 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/website/src/components/Chat/ChatConversation.tsx b/website/src/components/Chat/ChatConversation.tsx
index f80b744363..68dea07815 100644
--- a/website/src/components/Chat/ChatConversation.tsx
+++ b/website/src/components/Chat/ChatConversation.tsx
@@ -8,7 +8,7 @@ import SimpleBar from "simplebar-react";
 import { useMessageVote } from "src/hooks/chat/useMessageVote";
 import { useBrowserConfig } from "src/hooks/env/BrowserEnv";
 import { get, post } from "src/lib/api";
-import { handleChatEventStream, QueueInfo, PluginIntermediateResponse } from "src/lib/chat_stream";
+import { handleChatEventStream, PluginIntermediateResponse, QueueInfo } from "src/lib/chat_stream";
 import { OasstError } from "src/lib/oasst_api_client";
 import { API_ROUTES } from "src/lib/routes";
 import {
diff --git a/website/src/components/Chat/ChatListBase.tsx b/website/src/components/Chat/ChatListBase.tsx
index 98013789b4..f23c2d4fbb 100644
--- a/website/src/components/Chat/ChatListBase.tsx
+++ b/website/src/components/Chat/ChatListBase.tsx
@@ -14,9 +14,9 @@ import { ChatListViewSelection, useListChatPagination } from "./useListChatPagin
 
 export const ChatListBase = memo(function ChatListBase({
   allowViews,
-  minHeight,
+  noScrollbar,
   ...props
-}: CardProps & { allowViews?: boolean; minHeight?: string }) {
+}: CardProps & { allowViews?: boolean; noScrollbar?: boolean }) {
   const [view, setView] = useState<ChatListViewSelection>("visible");
   const { loadMoreRef, responses, mutateChatResponses } = useListChatPagination(view);
   const chats = responses?.flatMap((response) => response.chats) || [];
@@ -67,6 +67,21 @@ export const ChatListBase = memo(function ChatListBase({
     mutateChatResponses();
   }, [mutateChatResponses]);
 
+  const content = (
+    <>
+      {chats.map((chat) => (
+        <ChatListItem
+          key={chat.id}
+          chat={chat}
+          onUpdateTitle={handleUpdateTitle}
+          onHide={removeItemFromList}
+          onDelete={removeItemFromList}
+        />
+      ))}
+      <div ref={loadMoreRef} />
+    </>
+  );
+
   return (
     <Box
       gap="1"
@@ -96,18 +111,18 @@ export const ChatListBase = memo(function ChatListBase({
           <ChatViewSelection w={["full", "auto"]} onChange={(e) => setView(e.target.value as ChatListViewSelection)} />
         )}
       </Flex>
-      <SimpleBar style={{ padding: "8px", height: "100%", minHeight: chats.length && minHeight ? minHeight : "0" }}>
-        {chats.map((chat) => (
-          <ChatListItem
-            key={chat.id}
-            chat={chat}
-            onUpdateTitle={handleUpdateTitle}
-            onHide={removeItemFromList}
-            onDelete={removeItemFromList}
-          />
-        ))}
-        <div ref={loadMoreRef} />
-      </SimpleBar>
+      {noScrollbar ? (
+        content
+      ) : (
+        <SimpleBar
+          style={{ padding: "8px", height: "100%", minHeight: "150px" }}
+          classNames={{
+            contentEl: "flex flex-col items-center overflow-y-hidden min-h-full",
+          }}
+        >
+          {content}
+        </SimpleBar>
+      )}
       <InferencePoweredBy />
     </Box>
   );
diff --git a/website/src/components/Chat/ChatListItem.tsx b/website/src/components/Chat/ChatListItem.tsx
index 4e5e4fb104..9932d3ef4a 100644
--- a/website/src/components/Chat/ChatListItem.tsx
+++ b/website/src/components/Chat/ChatListItem.tsx
@@ -306,7 +306,8 @@ const ChatListItemIconButton = ({ label, onClick, icon }: ChatListItemIconButton
   return (
     <Tooltip label={label}>
       <Box
-        as="button"
+        as="div"
+        role="button"
         aria-label={label}
         onClick={(e: MouseEvent) => {
           stopEvent(e);
diff --git a/website/src/pages/chat/index.tsx b/website/src/pages/chat/index.tsx
index d9e552d4cc..3e2856b459 100644
--- a/website/src/pages/chat/index.tsx
+++ b/website/src/pages/chat/index.tsx
@@ -6,7 +6,7 @@ import { DashboardLayout } from "src/components/Layout";
 export { getStaticProps } from "src/lib/defaultServerSideProps";
 
 const ChatList = () => {
-  const { t } = useTranslation(["chat"]);
+  const { t } = useTranslation();
 
   return (
     <>
@@ -27,7 +27,7 @@ const ChatList = () => {
           bg: "gray.700",
         }}
         shadow="md"
-        minHeight="300px"
+        noScrollbar
       />
     </>
   );