feat: v1 — persistent shell, model gateway, artifact improvements (#1462)

app/(chat)/layout.tsx

@@ -1,35 +1,53 @@
 import { cookies } from "next/headers";
 import Script from "next/script";
 import { Suspense } from "react";
-import { AppSidebar } from "@/components/app-sidebar";
-import { DataStreamProvider } from "@/components/data-stream-provider";
+import { Toaster } from "sonner";
+import { AppSidebar } from "@/components/chat/app-sidebar";
+import { DataStreamProvider } from "@/components/chat/data-stream-provider";
+import { ChatShell } from "@/components/chat/shell";
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
-import { getSession } from "@/lib/auth";
+import { ActiveChatProvider } from "@/hooks/use-active-chat";
+import { auth } from "../(auth)/auth";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <>
       <Script
         src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"
-        strategy="beforeInteractive"
+        strategy="lazyOnload"
       />
       <DataStreamProvider>
-        <Suspense fallback={<div className="flex h-dvh" />}>
-          <SidebarWrapper>{children}</SidebarWrapper>
+        <Suspense fallback={<div className="flex h-dvh bg-sidebar" />}>
+          <SidebarShell>{children}</SidebarShell>
         </Suspense>
       </DataStreamProvider>
     </>
   );
 }
 
-async function SidebarWrapper({ children }: { children: React.ReactNode }) {
-  const [session, cookieStore] = await Promise.all([getSession(), cookies()]);
+async function SidebarShell({ children }: { children: React.ReactNode }) {
+  const [session, cookieStore] = await Promise.all([auth(), cookies()]);
   const isCollapsed = cookieStore.get("sidebar_state")?.value !== "true";
 
   return (
     <SidebarProvider defaultOpen={!isCollapsed}>
       <AppSidebar user={session?.user} />
-      <SidebarInset>{children}</SidebarInset>
+      <SidebarInset>
+        <Toaster
+          position="top-center"
+          theme="system"
+          toastOptions={{
+            className:
+              "!bg-card !text-foreground !border-border/50 !shadow-[var(--shadow-float)]",
+          }}
+        />
+        <Suspense fallback={<div className="flex h-dvh" />}>
+          <ActiveChatProvider>
+            <ChatShell />
+          </ActiveChatProvider>
+        </Suspense>
+        {children}
+      </SidebarInset>
     </SidebarProvider>
   );
 }