Reorganize header component

auth0-lab · Oct 8, 2024 · faa4254 · faa4254
1 parent 78ad15d
commit faa4254
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 13 deletions.
diff --git a/app/chat/[id]/layout.tsx b/app/chat/[id]/layout.tsx
@@ -1,9 +1,11 @@
 import { AI } from "@/app/actions";
+import { ChatProvider } from "@/components/chat/context";
+import { Header } from "@/components/chat/header";
+import { ShareConversation } from "@/components/chat/share";
 import { UnauthorizedError } from "@/components/fga/unauthorized";
 import { getHistoryFromStore } from "@/llm/actions/history";
 import { getUser, withFGA } from "@/sdk/fga";
 import { withCheckPermission } from "@/sdk/fga/next/with-check-permission";
-import { UserProvider } from "@auth0/nextjs-auth0/client";
 
 type RootChatParams = Readonly<{
   children: React.ReactNode;
@@ -18,9 +20,15 @@ async function RootLayout({ children, params }: RootChatParams) {
   const user = await getUser();
 
   return (
-    <AI initialAIState={messages} conversationID={params.id}>
-      <UserProvider>{children}</UserProvider>
-    </AI>
+    <ChatProvider chatId={params.id}>
+      <Header>
+        <ShareConversation user={user} />
+      </Header>
+
+      <AI initialAIState={messages} conversationID={params.id}>
+        {children}
+      </AI>
+    </ChatProvider>
   );
 }
 

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,11 +3,10 @@ import "./globals.css";
 
 import { Inter } from "next/font/google";
 
-import { ChatProvider } from "@/components/chat/context";
-import { Header } from "@/components/chat/header";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/toaster";
 import { cn } from "@/lib/utils";
+import { UserProvider } from "@auth0/nextjs-auth0/client";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -26,10 +25,7 @@ export default async function RootLayout({
       <body className={cn(inter.className, "h-screen")}>
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
           <Toaster />
-          <ChatProvider>
-            <Header />
-            {children}
-          </ChatProvider>
+          <UserProvider>{children}</UserProvider>
         </ThemeProvider>
       </body>
     </html>

diff --git a/app/profile/layout.tsx b/app/profile/layout.tsx
@@ -0,0 +1,14 @@
+import { Header } from "@/components/chat/header";
+
+type ProfileLayoutParams = Readonly<{
+  children: React.ReactNode;
+}>;
+
+export default async function ProfileLayout({ children }: ProfileLayoutParams) {
+  return (
+    <>
+      <Header />
+      {children}
+    </>
+  );
+}
diff --git a/app/report/[id]/layout.tsx b/app/report/[id]/layout.tsx
@@ -0,0 +1,14 @@
+import { Header } from "@/components/chat/header";
+
+type ReportLayoutParams = Readonly<{
+  children: React.ReactNode;
+}>;
+
+export default async function ReportLayout({ children }: ReportLayoutParams) {
+  return (
+    <>
+      <Header />
+      {children}
+    </>
+  );
+}
diff --git a/components/chat/header.tsx b/components/chat/header.tsx
@@ -5,9 +5,8 @@ import { getSession } from "@auth0/nextjs-auth0";
 
 import UserButton from "../auth0/user-button";
 import { DropdownMenu, DropdownMenuGroup, DropdownMenuItem, DropdownMenuShortcut } from "../ui/dropdown-menu";
-import { ShareConversation } from "./share";
 
-export async function Header() {
+export async function Header({ children }: { children?: React.ReactNode }) {
   const session = await getSession();
   const user = session?.user!;
 
@@ -30,7 +29,7 @@ export async function Header() {
       </div>
       <div className="flex items-center justify-end gap-6">
         <div className="flex items-center justify-end gap-4">
-          <ShareConversation user={user} />
+          {children}
 
           <Link
             href="https://discord.gg/QGHxwDsbQQ"