Improve default selection of models to avoid infinite loops

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

@@ -49,13 +49,16 @@ export function ModelSelector({ ...props }: ModelSelectorProps) {
             setModels(userConfig.chat_model_options);
             if (!props.initialModel) {
                 const selectedChatModelOption = userConfig.chat_model_options.find(model => model.id === userConfig.selected_chat_model_config);
+                if (!selectedChatModelOption) {
+                    setSelectedModel(userConfig.chat_model_options[0]);
+                    return;
+                } else {
                     setSelectedModel(selectedChatModelOption);
+                }
             } else {
                 const model = userConfig.chat_model_options.find(model => model.name === props.initialModel);
                 setSelectedModel(model);
             }
-        } else {
-            setSelectedModel(models[0]);
         }
     }, [userConfig, props.initialModel, isLoadingUserConfig]);
 

src/interface/web/app/components/chatSidebar/chatSidebar.tsx

@@ -57,7 +57,6 @@ export function ChatSidebar({ ...props }: ChatSideBarProps) {
 
 function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
     const [isEditable, setIsEditable] = useState<boolean>(false);
-    const [isDefaultAgent, setIsDefaultAgent] = useState<boolean>(true);
     const { data: agentConfigurationOptions, error: agentConfigurationOptionsError } =
     useSWR<AgentConfigurationOptions>("/api/agents/options", fetcher);
 
@@ -73,6 +72,7 @@ function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
     const [inputTools, setInputTools] = useState<string[] | undefined>();
     const [outputModes, setOutputModes] = useState<string[] | undefined>();
     const [hasModified, setHasModified] = useState<boolean>(false);
+    const [isDefaultAgent, setIsDefaultAgent] = useState<boolean>(agentData?.slug.toLowerCase() === "khoj" ? true : false);
 
     const [isSaving, setIsSaving] = useState<boolean>(false);
 
@@ -94,6 +94,7 @@ function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
             if (agentData.slug.toLowerCase() === "khoj") {
                 setSelectedModel(undefined);
                 setCustomPrompt(undefined);
+                setIsDefaultAgent(true);
             } else {
                 setIsDefaultAgent(false);
                 setCustomPrompt(agentData.persona);
@@ -248,6 +249,8 @@ function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
                         </SidebarMenu>
                     </SidebarGroupContent>
                 </SidebarGroup>
+                {
+                    !agentDataLoading && agentData && (
                         <SidebarGroup key={"model"}>
                             <SidebarGroupContent>
                                 <SidebarGroupLabel>
@@ -265,13 +268,15 @@ function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
                                         <ModelSelector
                                             disabled={!isEditable || !authenticatedData?.is_active}
                                             onSelect={(model, userModification) => handleModelSelect(model.name, userModification)}
-                                    initialModel={isDefaultAgent ? '' : agentData?.chat_model}
+                                            initialModel={isDefaultAgent ? undefined : agentData?.chat_model}
                                             selectedModel={selectedModel}
                                         />
                                     </SidebarMenuItem>
                                 </SidebarMenu>
                             </SidebarGroupContent>
                         </SidebarGroup>
+                    )
+                }
                 <Popover defaultOpen={false}>
                     <SidebarGroup>
                         <SidebarGroupLabel asChild>