Merge pull request #51 from auth0-lab/fix-header-for-apps

Refactor header moved down 1 level to pages
auth0-lab · Oct 8, 2024 · 571ee13 · 571ee13
2 parents 5ca9481 + 207abb1
commit 571ee13
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 25 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} chatId={params.id} />
+      </Header>
+
+      <AI initialAIState={messages} conversationID={params.id}>
+        {children}
+      </AI>
+    </ChatProvider>
   );
 }
 
@@ -49,8 +57,12 @@ export default withCheckPermission(
       // if any of the checks pass, allow access
       return checks.some((allowed) => allowed);
     },
-    onUnauthorized: () => (
-      <UnauthorizedError>The conversation does not exist or you are not authorized to access it.</UnauthorizedError>
+    onUnauthorized: ({ params }) => (
+      <ChatProvider chatId={params.id}>
+        <Header />
+
+        <UnauthorizedError>The conversation does not exist or you are not authorized to access it.</UnauthorizedError>
+      </ChatProvider>
     ),
   },
   RootLayout

diff --git a/app/chat/[id]/page.tsx b/app/chat/[id]/page.tsx
@@ -39,7 +39,6 @@ export default function Chat({ params }: { params: { id: string } }) {
   const { continueConversation } = useActions();
   const { user } = useUser();
   const { scrollRef, messagesRef, visibilityRef } = useScrollAnchor();
-  const { setChatId } = useChat();
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -72,11 +71,6 @@ export default function Chat({ params }: { params: { id: string } }) {
     setConversation((currentConversation: ClientMessage[]) => [...currentConversation, message]);
   };
 
-  useEffect(() => {
-    setChatId(params.id);
-    return () => setChatId();
-  }, [params.id, setChatId]);
-
   return (
     <main className="flex overflow-hidden h-full  mx-auto pt-4" style={{ maxHeight: "calc(100vh - 56px)" }}>
       <div className="h-full w-full overflow-hidden rounded-md">

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"

diff --git a/components/chat/share.tsx b/components/chat/share.tsx
@@ -39,11 +39,11 @@ import { Input } from "../ui/input";
 import { ScrollArea } from "../ui/scroll-area";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { useToast } from "../ui/use-toast";
-import { useChat } from "./context";
 
 import type { Claims } from "@auth0/nextjs-auth0";
 export interface ShareConversationProps {
   user: Claims;
+  chatId: string | undefined;
 }
 
 interface PermissionBlockProps {
@@ -130,9 +130,7 @@ const formSchema = z.object({
   role: z.enum(["Viewer", "Editor"]),
 });
 
-export function ShareConversation({ user }: ShareConversationProps) {
-  const { chatId } = useChat();
-
+export function ShareConversation({ user, chatId }: ShareConversationProps) {
   const [viewers, setViewers] = useState<{ email?: string }[]>([]);
   const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 });
   const [isLoading, setIsLoading] = useState(true);