Centralize use of useUserConfig and use that to retrieve default model and chat model options

src/interface/web/app/agents/page.tsx

@@ -171,7 +171,7 @@ export default function Agents() {
         error: authenticationError,
         isLoading: authenticationLoading,
     } = useAuthenticatedData();
-    const { userConfig } = useUserConfig(true);
+    const { data: userConfig } = useUserConfig(true);
     const [showLoginPrompt, setShowLoginPrompt] = useState(false);
     const isMobileWidth = useIsMobileWidth();
 

src/interface/web/app/common/auth.ts

@@ -90,15 +90,16 @@ export interface UserConfig {
 export function useUserConfig(detailed: boolean = false) {
     const url = `/api/settings?detailed=${detailed}`;
     const {
-        data: userConfig,
+        data,
         error,
-        isLoading: isLoadingUserConfig,
+        isLoading,
     } = useSWR<UserConfig>(url, fetcher, { revalidateOnFocus: false });
 
-    if (error || !userConfig || userConfig?.detail === "Forbidden")
+    if (error || !data || data?.detail === "Forbidden") {
-        return { userConfig: null, isLoadingUserConfig };
+        return { data: null, error, isLoading };
+    }
 
-    return { userConfig, isLoadingUserConfig };
+    return { data, error, isLoading };
 }
 
 export function useChatModelOptions() {

src/interface/web/app/common/modelSelector.tsx

@@ -17,14 +17,13 @@ import {
     CommandItem,
     CommandList,
 } from "@/components/ui/command";
-import { Label } from "@/components/ui/label";
 import {
     Popover,
     PopoverContent,
     PopoverTrigger,
 } from "@/components/ui/popover";
 
-import { ModelOptions, useChatModelOptions, useUserConfig } from "./auth";
+import { ModelOptions, useUserConfig } from "./auth";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
 import { Skeleton } from "@/components/ui/skeleton";
 
@@ -36,34 +35,39 @@ interface ModelSelectorProps extends PopoverProps {
 
 export function ModelSelector({ ...props }: ModelSelectorProps) {
     const [open, setOpen] = React.useState(false)
-    const { models, isLoading, error } = useChatModelOptions();
     const [peekedModel, setPeekedModel] = useState<ModelOptions | undefined>(undefined);
     const [selectedModel, setSelectedModel] = useState<ModelOptions | undefined>(undefined);
-    const { userConfig } = useUserConfig();
+    const { data: userConfig, error, isLoading: isLoadingUserConfig } = useUserConfig(true);
+    const [models, setModels] = useState<ModelOptions[]>([]);
 
     useEffect(() => {
-        if (!models?.length) return;
+        if (isLoadingUserConfig) return;
 
-        if (props.selectedModel) {
+        if (userConfig) {
-            const model = models.find(model => model.name === props.selectedModel);
+            setModels(userConfig.chat_model_options);
-            setSelectedModel(model || models[0]);
+            const selectedChatModelOption = userConfig.chat_model_options.find(model => model.id === userConfig.selected_chat_model_config);
-            return;
+            setSelectedModel(selectedChatModelOption);
-        } else if (userConfig) {
-            const model = models.find(model => model.id === userConfig.selected_chat_model_config);
-            setSelectedModel(model || models[0]);
             return;
+        } else {
+            setSelectedModel(models[0]);
         }
 
-        setSelectedModel(models[0]);
     }, [models, props.selectedModel, userConfig]);
 
+    useEffect(() => {
+        if (props.selectedModel) {
+            const model = models.find(model => model.name === props.selectedModel);
+            setSelectedModel(model);
+        }
+    }, [props.selectedModel]);
+
     useEffect(() => {
         if (selectedModel) {
             props.onSelect(selectedModel);
         }
     }, [selectedModel]);
 
-    if (isLoading) {
+    if (isLoadingUserConfig) {
         return (
             <Skeleton className="w-full h-10" />
         );

src/interface/web/app/page.tsx

@@ -486,7 +486,7 @@ export default function Home() {
     const [uploadedFiles, setUploadedFiles] = useState<AttachedFileText[] | null>(null);
     const isMobileWidth = useIsMobileWidth();
 
-    const { userConfig: initialUserConfig, isLoadingUserConfig } = useUserConfig(true);
+    const { data: initialUserConfig, isLoading: isLoadingUserConfig } = useUserConfig(true);
     const [userConfig, setUserConfig] = useState<UserConfig | null>(null);
 
     const {

src/interface/web/app/settings/page.tsx

@@ -595,7 +595,7 @@ enum PhoneNumberValidationState {
 }
 
 export default function SettingsView() {
-    const { userConfig: initialUserConfig } = useUserConfig(true);
+    const { data: initialUserConfig } = useUserConfig(true);
     const [userConfig, setUserConfig] = useState<UserConfig | null>(null);
     const [name, setName] = useState<string | undefined>(undefined);
     const [notionToken, setNotionToken] = useState<string | null>(null);