feat: virtual scroll for sidebar list (#46)

https://github.com/landing-ai/vision-agent-ui/assets/132986242/34e787a6-c708-4f87-958a-594696c2fb42

app/all/layout.tsx

@@ -10,10 +10,12 @@ interface ChatLayoutProps {
 }
 
 export default async function Layout({ children }: ChatLayoutProps) {
-  const { isAdmin } = await authEmail();
+  const { isAdmin, user } = await authEmail();
 
   if (!isAdmin) {
     redirect('/');
+  } else if (!user) {
+    return null;
   }
 
   const chats = await adminGetAllKVChats();

app/chat/layout.tsx

@@ -9,8 +9,12 @@ interface ChatLayoutProps {
 }
 
 export default async function Layout({ children }: ChatLayoutProps) {
-  const { email, isAdmin } = await authEmail();
+  const { email, isAdmin, user } = await authEmail();
   const chats = await getKVChats();
+  if (!user) {
+    return null;
+  }
+
   return (
     <div className="relative flex h-[calc(100vh_-_theme(spacing.16))] overflow-hidden">
       <div

auth.ts

@@ -62,5 +62,9 @@ export const {
 export async function authEmail() {
   const session = await auth();
   const email = session?.user?.email;
-  return { email, isAdmin: !!email?.endsWith('landing.ai') };
+  return {
+    email,
+    isAdmin: !!email?.endsWith('landing.ai'),
+    user: session?.user,
+  };
 }

components/chat-sidebar/ChatCard.tsx

@@ -23,7 +23,7 @@ export const ChatCardLayout: React.FC<
   return (
     <Link
       className={cn(
-        'p-2 m-2 bg-background max-h-[100px] rounded-xl shadow-md flex items-center border border-transparent hover:border-gray-500 transition-all cursor-pointer',
+        'p-2 bg-background max-h-[100px] rounded-xl shadow-md flex items-center border border-transparent hover:border-gray-500 transition-all cursor-pointer w-full',
         classNames,
       )}
       href={link}

components/chat-sidebar/ChatListSidebar.tsx

@@ -1,34 +1,69 @@
+'use client';
+
 import ChatCard, { ChatCardLayout } from './ChatCard';
 import { IconPlus } from '../ui/Icons';
 import { auth } from '@/auth';
 import { ChatEntity } from '@/lib/types';
+import { VariableSizeList as List } from 'react-window';
+import { cleanInputMessage } from '@/lib/messageUtils';
+import AutoSizer from 'react-virtualized-auto-sizer';
 
 export interface ChatSidebarListProps {
   chats: ChatEntity[];
   isAdminView?: boolean;
 }
 
+const getItemSize = (message: string, isAdminView?: boolean) => {
+  if (message.length >= 45) return 116;
+  else if (message.length >= 20) return 104;
+  else return 88;
+};
+
 export default async function ChatSidebarList({
   chats,
   isAdminView,
 }: ChatSidebarListProps) {
-  const session = await auth();
-  if (!session || !session.user) {
-    return null;
-  }
   return (
     <>
       {!isAdminView && (
-        <ChatCardLayout link="/chat">
-          <div className="overflow-hidden flex items-center size-full">
-            <IconPlus className="w-1/4 font-bold" />
-            <p className="text-sm w-3/4 ml-3 font-bold">New chat</p>
-          </div>
-        </ChatCardLayout>
+        <div className="p-2">
+          <ChatCardLayout link="/chat">
+            <div className="overflow-hidden flex items-center size-full">
+              <IconPlus className="w-1/4 font-bold" />
+              <p className="text-sm w-3/4 ml-3 font-bold">New chat</p>
+            </div>
+          </ChatCardLayout>
+        </div>
       )}
-      {chats.map(chat => (
-        <ChatCard key={chat.id} chat={chat} isAdminView={isAdminView} />
-      ))}
+      <AutoSizer>
+        {({ height, width }) => (
+          <List
+            itemData={chats}
+            height={height}
+            itemCount={chats.length}
+            itemSize={index =>
+              getItemSize(
+                cleanInputMessage(chats[index].messages?.[0]?.content ?? ''),
+                isAdminView,
+              )
+            }
+            width={width}
+          >
+            {({ style, index, data }) => (
+              <div
+                style={style}
+                className="px-2 flex items-center overflow-hidden"
+              >
+                <ChatCard
+                  key={data[index].id}
+                  chat={data[index]}
+                  isAdminView={isAdminView}
+                />
+              </div>
+            )}
+          </List>
+        )}
+      </AutoSizer>
     </>
   );
 }

package.json

@@ -49,6 +49,8 @@
     "react-markdown": "^8.0.7",
     "react-syntax-highlighter": "^15.5.0",
     "react-textarea-autosize": "^8.5.3",
+    "react-virtualized-auto-sizer": "^1.0.24",
+    "react-window": "^1.8.10",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
     "sharp": "^0.33.3",
@@ -60,6 +62,7 @@
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@types/react-syntax-highlighter": "^15.5.11",
+    "@types/react-window": "^1.8.8",
     "@types/uuid": "^9.0.8",
     "@typescript-eslint/parser": "^6.19.0",
     "autoprefixer": "^10.4.17",

pnpm-lock.yaml

@@ -116,6 +116,12 @@ importers:
       react-textarea-autosize:
         specifier: ^8.5.3
         version: 8.5.3(@types/[email protected])([email protected])
+      react-virtualized-auto-sizer:
+        specifier: ^1.0.24
+        version: 1.0.24([email protected]([email protected]))([email protected])
+      react-window:
+        specifier: ^1.8.10
+        version: 1.8.10([email protected]([email protected]))([email protected])
       remark-gfm:
         specifier: ^3.0.1
         version: 3.0.1
@@ -144,6 +150,9 @@ importers:
       '@types/react-syntax-highlighter':
         specifier: ^15.5.11
         version: 15.5.11
+      '@types/react-window':
+        specifier: ^1.8.8
+        version: 1.8.8
       '@types/uuid':
         specifier: ^9.0.8
         version: 9.0.8
@@ -1298,6 +1307,9 @@ packages:
   '@types/[email protected]':
     resolution: {integrity: sha512-ZqIJl+Pg8kD+47kxUjvrlElrraSUrYa4h0dauY/U/FTUuprSCqvUj+9PNQNQzVc6AJgIWUUxn87/gqsMHNbRjw==}
 
+  '@types/[email protected]':
+    resolution: {integrity: sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==}
+
   '@types/[email protected]':
     resolution: {integrity: sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w==}
 
@@ -2571,6 +2583,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
 
+  [email protected]:
+    resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
+
   [email protected]:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -3122,6 +3137,19 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
 
+  [email protected]:
+    resolution: {integrity: sha512-3kCn7N9NEb3FlvJrSHWGQ4iVl+ydQObq2fHMn12i5wbtm74zHOPhz/i64OL3c1S1vi9i2GXtZqNqUJTQ+BnNfg==}
+    peerDependencies:
+      react: ^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0
+      react-dom: ^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0
+
+  [email protected]:
+    resolution: {integrity: sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==}
+    engines: {node: '>8.0.0'}
+    peerDependencies:
+      react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+
   [email protected]:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
@@ -5294,6 +5322,10 @@ snapshots:
     dependencies:
       '@types/react': 18.2.79
 
+  '@types/[email protected]':
+    dependencies:
+      '@types/react': 18.2.79
+
   '@types/[email protected]':
     dependencies:
       '@types/prop-types': 15.7.12
@@ -6804,6 +6836,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]:
@@ -7460,6 +7494,18 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
+  [email protected]([email protected]([email protected]))([email protected]):
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0([email protected])
+
+  [email protected]([email protected]([email protected]))([email protected]):
+    dependencies:
+      '@babel/runtime': 7.24.4
+      memoize-one: 5.2.1
+      react: 18.2.0
+      react-dom: 18.2.0([email protected])
+
   [email protected]:
     dependencies:
       loose-envify: 1.4.0