Merge pull request #1015 from khoj-ai/features/clean-up-authenticated…

…-data - De facto, was being assumed everywhere if authenticatedData is null, that it's not logged in. This isn't true because the data can still be loading. Update the hook to send additional states. - Bonus: Delete model picker code and a slew of unused imports.
khoj-ai · Dec 24, 2024 · d27d291 · d27d291
2 parents cd4cf4f + 7988373
commit d27d291
Show file tree

Hide file tree

Showing 18 changed files with 204 additions and 349 deletions.
diff --git a/src/interface/web/app/agents/page.tsx b/src/interface/web/app/agents/page.tsx
@@ -140,11 +140,14 @@ function CreateAgentCard(props: CreateAgentCardProps) {
                     Create Agent
                 </div>
             </DialogTrigger>
-            <DialogContent className={"lg:max-w-screen-lg overflow-y-scroll max-h-screen"}>
+            <DialogContent
+                className={
+                    "lg:max-w-screen-lg py-4 overflow-y-scroll h-full md:h-4/6 rounded-lg flex flex-col"
+                }
+            >
                 <DialogHeader>Create Agent</DialogHeader>
                 {!props.userProfile && showLoginPrompt && (
                     <LoginPrompt
-                        loginRedirectMessage="Sign in to start chatting with a specialized agent"
                         onOpenChange={setShowLoginPrompt}
                         isMobileWidth={props.isMobileWidth}
                     />
@@ -174,7 +177,11 @@ export default function Agents() {
     const { data, error, mutate } = useSWR<AgentData[]>("agents", agentsFetcher, {
         revalidateOnFocus: false,
     });
-    const authenticatedData = useAuthenticatedData();
+    const {
+        data: authenticatedData,
+        error: authenticationError,
+        isLoading: authenticationLoading,
+    } = useAuthenticatedData();
     const { userConfig } = useUserConfig(true);
     const [showLoginPrompt, setShowLoginPrompt] = useState(false);
     const isMobileWidth = useIsMobileWidth();
@@ -310,7 +317,11 @@ export default function Agents() {
                                             input_tools: [],
                                             output_modes: [],
                                         }}
-                                        userProfile={authenticatedData}
+                                        userProfile={
+                                            authenticationLoading
+                                                ? null
+                                                : (authenticatedData ?? null)
+                                        }
                                         isMobileWidth={isMobileWidth}
                                         filesOptions={filesData || []}
                                         modelOptions={userConfig?.chat_model_options || []}
@@ -328,7 +339,6 @@ export default function Agents() {
                             </div>
                             {showLoginPrompt && (
                                 <LoginPrompt
-                                    loginRedirectMessage="Sign in to start chatting with a specialized agent"
                                     onOpenChange={setShowLoginPrompt}
                                     isMobileWidth={isMobileWidth}
                                 />
@@ -345,53 +355,59 @@ export default function Agents() {
                             </Alert>
                             <div className="pt-6 md:pt-8">
                                 <div className={`${styles.agentList}`}>
-                                    {personalAgents.map((agent) => (
-                                        <AgentCard
-                                            key={agent.slug}
-                                            data={agent}
-                                            userProfile={authenticatedData}
-                                            isMobileWidth={isMobileWidth}
-                                            filesOptions={filesData ?? []}
-                                            selectedChatModelOption={defaultModelOption?.name || ""}
-                                            isSubscribed={isSubscribed}
-                                            setAgentChangeTriggered={setAgentChangeTriggered}
-                                            modelOptions={userConfig?.chat_model_options || []}
-                                            editCard={true}
-                                            agentSlug={agentSlug || ""}
-                                            inputToolOptions={
-                                                agentConfigurationOptions?.input_tools || {}
-                                            }
-                                            outputModeOptions={
-                                                agentConfigurationOptions?.output_modes || {}
-                                            }
-                                        />
-                                    ))}
+                                    {authenticatedData &&
+                                        personalAgents.map((agent) => (
+                                            <AgentCard
+                                                key={agent.slug}
+                                                data={agent}
+                                                userProfile={authenticatedData}
+                                                isMobileWidth={isMobileWidth}
+                                                filesOptions={filesData ?? []}
+                                                selectedChatModelOption={
+                                                    defaultModelOption?.name || ""
+                                                }
+                                                isSubscribed={isSubscribed}
+                                                setAgentChangeTriggered={setAgentChangeTriggered}
+                                                modelOptions={userConfig?.chat_model_options || []}
+                                                editCard={true}
+                                                agentSlug={agentSlug || ""}
+                                                inputToolOptions={
+                                                    agentConfigurationOptions?.input_tools || {}
+                                                }
+                                                outputModeOptions={
+                                                    agentConfigurationOptions?.output_modes || {}
+                                                }
+                                            />
+                                        ))}
                                 </div>
                             </div>
                             <div className="pt-6 md:pt-8">
                                 <h2 className="text-2xl">Explore</h2>
                                 <div className={`${styles.agentList}`}>
-                                    {publicAgents.map((agent) => (
-                                        <AgentCard
-                                            key={agent.slug}
-                                            data={agent}
-                                            userProfile={authenticatedData}
-                                            isMobileWidth={isMobileWidth}
-                                            editCard={false}
-                                            filesOptions={filesData ?? []}
-                                            selectedChatModelOption={defaultModelOption?.name || ""}
-                                            isSubscribed={isSubscribed}
-                                            setAgentChangeTriggered={setAgentChangeTriggered}
-                                            modelOptions={userConfig?.chat_model_options || []}
-                                            agentSlug={agentSlug || ""}
-                                            inputToolOptions={
-                                                agentConfigurationOptions?.input_tools || {}
-                                            }
-                                            outputModeOptions={
-                                                agentConfigurationOptions?.output_modes || {}
-                                            }
-                                        />
-                                    ))}
+                                    {!authenticationLoading &&
+                                        publicAgents.map((agent) => (
+                                            <AgentCard
+                                                key={agent.slug}
+                                                data={agent}
+                                                userProfile={authenticatedData || null}
+                                                isMobileWidth={isMobileWidth}
+                                                editCard={false}
+                                                filesOptions={filesData ?? []}
+                                                selectedChatModelOption={
+                                                    defaultModelOption?.name || ""
+                                                }
+                                                isSubscribed={isSubscribed}
+                                                setAgentChangeTriggered={setAgentChangeTriggered}
+                                                modelOptions={userConfig?.chat_model_options || []}
+                                                agentSlug={agentSlug || ""}
+                                                inputToolOptions={
+                                                    agentConfigurationOptions?.input_tools || {}
+                                                }
+                                                outputModeOptions={
+                                                    agentConfigurationOptions?.output_modes || {}
+                                                }
+                                            />
+                                        ))}
                                 </div>
                             </div>
                         </div>

diff --git a/src/interface/web/app/automations/page.tsx b/src/interface/web/app/automations/page.tsx
@@ -980,7 +980,11 @@ function AutomationComponentWrapper(props: AutomationComponentWrapperProps) {
 }
 
 export default function Automations() {
-    const authenticatedData = useAuthenticatedData();
+    const {
+        data: authenticatedData,
+        error: authenticationError,
+        isLoading: authenticationLoading,
+    } = useAuthenticatedData();
     const {
         data: personalAutomations,
         error,
@@ -1068,9 +1072,6 @@ export default function Automations() {
                             </div>
                             {showLoginPrompt && (
                                 <LoginPrompt
-                                    loginRedirectMessage={
-                                        "Create an account to make your own automation"
-                                    }
                                     onOpenChange={setShowLoginPrompt}
                                     isMobileWidth={isMobileWidth}
                                 />
@@ -1114,7 +1115,7 @@ export default function Automations() {
                             <Suspense>
                                 <SharedAutomationCard
                                     isMobileWidth={isMobileWidth}
-                                    authenticatedData={authenticatedData}
+                                    authenticatedData={authenticatedData || null}
                                     locationData={locationData}
                                     isLoggedIn={authenticatedData ? true : false}
                                     setShowLoginPrompt={setShowLoginPrompt}
@@ -1123,7 +1124,8 @@ export default function Automations() {
                             </Suspense>
                             {isLoading && <InlineLoading message="booting up your automations" />}
                             <div className={`${styles.automationsLayout}`}>
-                                {personalAutomations &&
+                                {authenticatedData &&
+                                    personalAutomations &&
                                     personalAutomations.map((automation) => (
                                         <AutomationsCard
                                             isMobileWidth={isMobileWidth}
@@ -1135,17 +1137,18 @@ export default function Automations() {
                                             setShowLoginPrompt={setShowLoginPrompt}
                                         />
                                     ))}
-                                {allNewAutomations.map((automation) => (
-                                    <AutomationsCard
-                                        isMobileWidth={isMobileWidth}
-                                        key={automation.id}
-                                        authenticatedData={authenticatedData}
-                                        automation={automation}
-                                        locationData={locationData}
-                                        isLoggedIn={authenticatedData ? true : false}
-                                        setShowLoginPrompt={setShowLoginPrompt}
-                                    />
-                                ))}
+                                {authenticatedData &&
+                                    allNewAutomations.map((automation) => (
+                                        <AutomationsCard
+                                            isMobileWidth={isMobileWidth}
+                                            key={automation.id}
+                                            authenticatedData={authenticatedData}
+                                            automation={automation}
+                                            locationData={locationData}
+                                            isLoggedIn={authenticatedData ? true : false}
+                                            setShowLoginPrompt={setShowLoginPrompt}
+                                        />
+                                    ))}
                             </div>
                             <h3 className="text-xl py-4">Explore</h3>
                             <div className={`${styles.automationsLayout}`}>
@@ -1154,7 +1157,7 @@ export default function Automations() {
                                         isMobileWidth={isMobileWidth}
                                         setNewAutomationData={setNewAutomationData}
                                         key={automation.id}
-                                        authenticatedData={authenticatedData}
+                                        authenticatedData={authenticatedData || null}
                                         automation={automation}
                                         locationData={locationData}
                                         isLoggedIn={authenticatedData ? true : false}

diff --git a/src/interface/web/app/chat/chat.module.css b/src/interface/web/app/chat/chat.module.css
@@ -64,9 +64,10 @@ div.chatBody {
 
 div.chatLayout {
     display: grid;
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 1fr;
     gap: 1rem;
     padding-top: 1rem;
+    width: 100%;
 }
 
 div.chatBox {

diff --git a/src/interface/web/app/chat/page.tsx b/src/interface/web/app/chat/page.tsx
@@ -193,7 +193,11 @@ export default function Chat() {
             timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
         },
     };
-    const authenticatedData = useAuthenticatedData();
+    const {
+        data: authenticatedData,
+        error: authenticationError,
+        isLoading: authenticationLoading,
+    } = useAuthenticatedData();
     const isMobileWidth = useIsMobileWidth();
 
     useEffect(() => {
@@ -425,7 +429,7 @@ export default function Chat() {
                         <div className={styles.chatBoxBody}>
                             <Suspense fallback={<Loading />}>
                                 <ChatBodyData
-                                    isLoggedIn={authenticatedData !== null}
+                                    isLoggedIn={authenticatedData ? true : false}
                                     streamedMessages={messages}
                                     setStreamedMessages={setMessages}
                                     chatOptionsData={chatOptionsData}

diff --git a/src/interface/web/app/common/auth.ts b/src/interface/web/app/common/auth.ts
@@ -19,13 +19,15 @@ const fetcher = (url: string) =>
         .catch((err) => console.warn(err));
 
 export function useAuthenticatedData() {
-    const { data, error } = useSWR<UserProfile>("/api/v1/user", fetcher, {
+    const { data, error, isLoading } = useSWR<UserProfile>("/api/v1/user", fetcher, {
         revalidateOnFocus: false,
     });
 
-    if (error || !data || data.detail === "Forbidden") return null;
+    if (data?.detail === "Forbidden") {
+        return { data: null, error: "Forbidden", isLoading: false };
+    }
 
-    return data;
+    return { data, error, isLoading };
 }
 
 export interface ModelOptions {