Merge pull request #70 from auth0-lab/read-only-fixes

Implement read-only mode fixes

app/chat/[id]/layout.tsx

@@ -1,11 +1,11 @@
-import { AI } from "@/app/actions";
+import { AI, fetchUserById } from "@/app/actions";
 import { ChatProvider } from "@/components/chat/context";
 import { Header } from "@/components/chat/header";
 import { ShareConversation } from "@/components/chat/share";
 import { ChatUsersPermissionsList } from "@/components/chat/share/users-permissions-list";
 import { UnauthorizedError } from "@/components/fga/unauthorized";
 import { getHistoryFromStore } from "@/llm/actions/history";
-import { withFGA } from "@/sdk/fga";
+import { getUser, withFGA } from "@/sdk/fga";
 import { assignChatReader, isChatOwner, isUserInvitedToChat } from "@/sdk/fga/chats";
 import { withCheckPermission } from "@/sdk/fga/next/with-check-permission";
 
@@ -18,11 +18,14 @@ type RootChatParams = Readonly<{
 
 async function RootLayout({ children, params }: RootChatParams) {
   const conversation = await getHistoryFromStore(params.id);
-  const { messages } = conversation;
+  const { messages, ownerID } = conversation;
   const isOwner = await isChatOwner(params.id);
+  const user = await getUser();
+  const chatOwnerID = ownerID ?? (isOwner ? user.sub : undefined);
+  const ownerProfile = chatOwnerID ? await fetchUserById(chatOwnerID) : undefined;
 
   return (
-    <ChatProvider chatId={params.id} readOnly={!isOwner} hasMessages={messages.length > 0}>
+    <ChatProvider chatId={params.id} readOnly={!isOwner} hasMessages={messages.length > 0} ownerProfile={ownerProfile}>
       <div className="flex flex-col h-full w-full">
         <Header>
           <ShareConversation>

app/chat/[id]/page.tsx

@@ -17,7 +17,6 @@ import { useScrollAnchor } from "@/hooks/chat/use-scroll-anchor";
 import { examples } from "@/lib/examples";
 import { cn } from "@/lib/utils";
 import { ClientMessage } from "@/llm/types";
-import { useUser } from "@auth0/nextjs-auth0/client";
 import { zodResolver } from "@hookform/resolvers/zod";
 
 const formSchema = z.object({
@@ -31,8 +30,7 @@ export default function Chat({ params }: { params: { id: string } }) {
   const { scrollRef, messagesRef, visibilityRef } = useScrollAnchor();
   const [conversation, setConversation] = useUIState();
   const { continueConversation } = useActions();
-  const { readOnly, setHasMessages } = useChat();
-  const { user } = useUser();
+  const { readOnly, ownerProfile, setHasMessages } = useChat();
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -88,7 +86,7 @@ export default function Chat({ params }: { params: { id: string } }) {
                   </div>
                   <div className="border rounded-full h-8 w-8 min-w-8 flex items-center justify-center">
                     <Avatar className="h-full w-full rounded-full">
-                      <AvatarImage src={user?.picture!} alt={user?.nickname!} />
+                      <AvatarImage src={ownerProfile?.picture!} alt={ownerProfile?.nickname!} />
                       <AvatarFallback>U</AvatarFallback>
                     </Avatar>
                   </div>

components/chat/context.tsx

@@ -1,11 +1,13 @@
 "use client";
 
+import { GetUsers200ResponseOneOfInner } from "auth0";
 import React, { createContext, ReactNode, useContext, useState } from "react";
 
 interface ChatContextProps {
   chatId?: string;
   readOnly: boolean;
   hasMessages: boolean;
+  ownerProfile?: GetUsers200ResponseOneOfInner;
   setChatId: (id?: string) => void;
   setHasMessages: (has: boolean) => void;
 }
@@ -16,18 +18,20 @@ export const ChatProvider = ({
   chatId: initialChatId,
   hasMessages: initialHasMessages = false,
   readOnly = true,
+  ownerProfile,
   children,
 }: {
   chatId?: string;
   hasMessages?: boolean;
   readOnly?: boolean;
+  ownerProfile?: GetUsers200ResponseOneOfInner;
   children: ReactNode;
 }) => {
   const [chatId, setChatId] = useState(initialChatId);
   const [hasMessages, setHasMessages] = useState(initialHasMessages);
 
   return (
-    <ChatContext.Provider value={{ chatId, readOnly, hasMessages, setChatId, setHasMessages }}>
+    <ChatContext.Provider value={{ chatId, readOnly, ownerProfile, hasMessages, setChatId, setHasMessages }}>
       {children}
     </ChatContext.Provider>
   );

llm/components/calendar-events.tsx

@@ -7,6 +7,7 @@ import Loader from "@/components/loader";
 import { EnsureAPIAccess } from "@/sdk/components/ensure-api-access";
 
 import { Event } from "../actions/calendar-events";
+import { NotAvailableReadOnly } from "./not-available-read-only";
 
 export function CalendarEvents({
   events,
@@ -20,6 +21,10 @@ export function CalendarEvents({
   const [working, setWorking] = useState(false);
   const [finished, setFinished] = useState(false);
 
+  if (readOnly) {
+    return <NotAvailableReadOnly />;
+  }
+
   return (
     <div className="flex gap-3 flex-row items-center mt-2">
       <EnsureAPIAccess

llm/components/conditional-purchase.tsx

@@ -16,11 +16,11 @@ import WarningWrapper from "./warning-wrapper";
 export function ConditionalPurchase({
   id,
   isMFAEnrolled,
-  readOnly,
+  readOnly = false,
 }: {
   id: string;
   isMFAEnrolled: boolean;
-  readOnly: boolean;
+  readOnly?: boolean;
 }) {
   const [isWorking, setIsWorking] = useState(true);
   const [simulating, setSimulating] = useState(false);
@@ -43,6 +43,11 @@ export function ConditionalPurchase({
   }, [id]);
 
   useEffect(() => {
+    if (readOnly) {
+      setIsWorking(false);
+      return;
+    }
+
     (async () => {
       await readConditionalPurchase();
       await checkGuardianEnrollment();

llm/components/documents.tsx

@@ -8,6 +8,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
 import { ClientMessage, Document } from "@/llm/types";
 
 import { FormattedText } from "./FormattedText";
+import { NotAvailableReadOnly } from "./not-available-read-only";
 import { PromptUserContainer } from "./prompt-user-container";
 import WarningWrapper from "./warning-wrapper";
 
@@ -52,7 +53,7 @@ export const Documents = ({
       <div className="p-4 rounded-2xl bg-white">
         <FormattedText content={text} />
         {documents.length > 0 && finished && (
-          <div className="flex flex-row gap-0 mt-1 mb-4">
+          <div className="flex flex-row gap-0 mt-1">
             {documents.map((document: Document, index: number) => (
               <div key={document.metadata.id} className="text-xs">
                 <TooltipProvider>
@@ -76,17 +77,22 @@ export const Documents = ({
             ))}
           </div>
         )}
-        {showEnrollment && finished && (
-          <PromptUserContainer
-            title="Join Market0 Newsletter"
-            description="To get access to analyst forecasts join the newsletter"
-            action={{
-              label: "Join",
-              onClick: enroll,
-            }}
-            readOnly={readOnly}
-          />
-        )}
+        {showEnrollment &&
+          finished &&
+          (readOnly ? (
+            <NotAvailableReadOnly containerClassName="mt-4" />
+          ) : (
+            <PromptUserContainer
+              title="Join Market0 Newsletter"
+              description="To get access to analyst forecasts join the newsletter"
+              action={{
+                label: "Join",
+                onClick: enroll,
+              }}
+              readOnly={readOnly}
+              containerClassName="mt-4"
+            />
+          ))}
       </div>
     </WarningWrapper>
   );

llm/components/not-available-read-only.tsx

@@ -1,8 +1,15 @@
 import { WarningPageIcon } from "@/components/icons";
+import { cn } from "@/lib/utils";
 
 import { PromptUserContainer } from "./prompt-user-container";
 
-export function NotAvailableReadOnly({ message }: { message?: React.ReactNode }) {
+export function NotAvailableReadOnly({
+  message,
+  containerClassName,
+}: {
+  message?: React.ReactNode;
+  containerClassName?: string;
+}) {
   return (
     <PromptUserContainer
       title="Action not available"
@@ -12,7 +19,7 @@ export function NotAvailableReadOnly({ message }: { message?: React.ReactNode })
           <WarningPageIcon />
         </div>
       }
-      containerClassName="border-gray-200 border-dashed bg-gray-100"
+      containerClassName={cn("border-gray-200 border-dashed bg-gray-100", containerClassName)}
     />
   );
 }