diff --git a/src/interface/web/app/common/auth.ts b/src/interface/web/app/common/auth.ts index a5bc7f13..15dbd9dd 100644 --- a/src/interface/web/app/common/auth.ts +++ b/src/interface/web/app/common/auth.ts @@ -71,9 +71,9 @@ export interface UserConfig { export function useUserConfig(detailed: boolean = false) { const url = `/api/settings?detailed=${detailed}`; - const { data, error } = useSWR(url, fetcher, { revalidateOnFocus: false }); + const { data: userConfig, error, isLoading: isLoadingUserConfig } = useSWR(url, fetcher, { revalidateOnFocus: false }); - if (error || !data || data.detail === 'Forbidden') return null; + if (error || !userConfig || userConfig?.detail === 'Forbidden') return {userConfig: null, isLoadingUserConfig}; - return data; + return {userConfig, isLoadingUserConfig}; } diff --git a/src/interface/web/app/page.tsx b/src/interface/web/app/page.tsx index 32cbeed9..aef9f58c 100644 --- a/src/interface/web/app/page.tsx +++ b/src/interface/web/app/page.tsx @@ -3,7 +3,7 @@ import './globals.css'; import styles from './page.module.css'; import 'katex/dist/katex.min.css'; -import React, { useEffect, useState } from 'react'; +import React, { use, useEffect, useState } from 'react'; import useSWR from 'swr'; import Image from 'next/image'; import { ClockCounterClockwise } from '@phosphor-icons/react'; @@ -16,7 +16,7 @@ import Loading from '@/app/components/loading/loading'; import ChatInputArea, { ChatOptions } from '@/app/components/chatInputArea/chatInputArea'; import { Suggestion, suggestionsData } from '@/app/components/suggestions/suggestionsData'; -import { useAuthenticatedData, useUserConfig } from '@/app/common/auth'; +import { useAuthenticatedData, UserConfig, useUserConfig } from '@/app/common/auth'; import { convertColorToBorderClass } from '@/app/common/colorUtils'; import { getIconFromIconName } from '@/app/common/iconUtils'; import { AgentData } from '@/app/agents/page'; @@ -29,6 +29,8 @@ interface ChatBodyDataProps { setUploadedFiles: (files: string[]) => void; isMobileWidth?: boolean; isLoggedIn: boolean; + userConfig: UserConfig | null; + isLoadingUserConfig: boolean; } async function createNewConvo(slug: string) { @@ -54,7 +56,6 @@ function ChatBodyData(props: ChatBodyDataProps) { const [agentIcons, setAgentIcons] = useState([]); const [agents, setAgents] = useState([]); - const userConfig = useUserConfig(true); const agentsFetcher = () => window.fetch('/api/agents').then(res => res.json()).catch(err => console.log(err)); const { data: agentsData, error } = useSWR('agents', agentsFetcher, { revalidateOnFocus: false }); @@ -64,12 +65,17 @@ function ChatBodyData(props: ChatBodyDataProps) { } useEffect(() => { + console.log(`Loading user config: ${props.isLoadingUserConfig}`); + if (props.isLoadingUserConfig) return; + + // Set user config + console.log(`Logged In: ${props.isLoggedIn}\nUserConfig: ${props.userConfig}`); + // Get today's day const today = new Date(); const day = today.getDay(); const timeOfDay = today.getHours() > 4 && today.getHours() < 12 ? 'morning' : today.getHours() < 17 ? 'afternoon' : 'evening'; - const nameSuffix = userConfig?.given_name ? `, ${userConfig?.given_name}` : ""; - console.log(userConfig); + const nameSuffix = props.userConfig?.given_name ? `, ${props.userConfig?.given_name}` : ""; const greetings = [ `What would you like to get done${nameSuffix}?`, `Hey${nameSuffix}! How can I help?`, @@ -79,7 +85,7 @@ function ChatBodyData(props: ChatBodyDataProps) { ]; const greeting = greetings[Math.floor(Math.random() * greetings.length)]; setGreeting(greeting); - }, []); + }, [props.isLoadingUserConfig, props.userConfig]); useEffect(() => { if (props.chatOptionsData) { @@ -161,7 +167,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
-

{greeting}

+

{greeting}

{ !props.isMobileWidth && @@ -266,12 +272,19 @@ export default function Home() { const [uploadedFiles, setUploadedFiles] = useState([]); const [isMobileWidth, setIsMobileWidth] = useState(false); + const {userConfig: initialUserConfig, isLoadingUserConfig} = useUserConfig(true); + const [userConfig, setUserConfig] = useState(null); + const authenticatedData = useAuthenticatedData(); const handleConversationIdChange = (newConversationId: string) => { setConversationID(newConversationId); }; + useEffect(() => { + setUserConfig(initialUserConfig); + }, [initialUserConfig]); + useEffect(() => { fetch('/api/chat/options') .then(response => response.json()) @@ -319,6 +332,8 @@ export default function Home() { setUploadedFiles={setUploadedFiles} isMobileWidth={isMobileWidth} onConversationIdChange={handleConversationIdChange} + userConfig={userConfig} + isLoadingUserConfig={isLoadingUserConfig} />
diff --git a/src/interface/web/app/settings/page.tsx b/src/interface/web/app/settings/page.tsx index 66bf9634..59d28b6b 100644 --- a/src/interface/web/app/settings/page.tsx +++ b/src/interface/web/app/settings/page.tsx @@ -348,7 +348,7 @@ export default function SettingsView() { const [title, setTitle] = useState("Settings"); const [isMobileWidth, setIsMobileWidth] = useState(false); const { apiKeys, generateAPIKey, copyAPIKey, deleteAPIKey } = useApiKeys(); - const initialUserConfig = useUserConfig(true); + const {userConfig: initialUserConfig} = useUserConfig(true); const [userConfig, setUserConfig] = useState(null); const [name, setName] = useState(undefined); const [notionToken, setNotionToken] = useState(null);