Improve sidebar, new chat, and share dialog (#190)

components/sidebar-list.tsx

@@ -1,36 +1,38 @@
-import { getChats, removeChat, shareChat } from '@/app/actions'
-import { SidebarActions } from '@/components/sidebar-actions'
-import { SidebarItem } from '@/components/sidebar-item'
+import { clearChats, getChats } from '@/app/actions'
+import { ClearHistory } from '@/components/clear-history'
+import { SidebarItems } from '@/components/sidebar-items'
+import { ThemeToggle } from '@/components/theme-toggle'
+import { cache } from 'react'
 
-export interface SidebarListProps {
+interface SidebarListProps {
   userId?: string
+  children?: React.ReactNode
 }
 
+const loadChats = cache(async (userId?: string) => {
+  return await getChats(userId)
+})
+
 export async function SidebarList({ userId }: SidebarListProps) {
-  const chats = await getChats(userId)
+  const chats = await loadChats(userId)
 
   return (
-    <div className="flex-1 overflow-auto">
-      {chats?.length ? (
-        <div className="space-y-2 px-2">
-          {chats.map(
-            chat =>
-              chat && (
-                <SidebarItem key={chat?.id} chat={chat}>
-                  <SidebarActions
-                    chat={chat}
-                    removeChat={removeChat}
-                    shareChat={shareChat}
-                  />
-                </SidebarItem>
-              )
-          )}
-        </div>
-      ) : (
-        <div className="p-8 text-center">
-          <p className="text-sm text-muted-foreground">No chat history</p>
-        </div>
-      )}
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <div className="flex-1 overflow-auto">
+        {chats?.length ? (
+          <div className="space-y-2 px-2">
+            <SidebarItems chats={chats} />
+          </div>
+        ) : (
+          <div className="p-8 text-center">
+            <p className="text-sm text-muted-foreground">No chat history</p>
+          </div>
+        )}
+      </div>
+      <div className="flex items-center justify-between p-4">
+        <ThemeToggle />
+        <ClearHistory clearChats={clearChats} isEnabled={chats?.length > 0} />
+      </div>
     </div>
   )
 }