Track if agent modified in chatSidebar to simplify code, fix looping

Previously the sidebar could recurse on opening chat page (from home?)
due to child modelSelector component updating parent chatSidebar prop
which was passed back down to it in a loop.

The chatSidebar decides if agent has been modified in a single
useEffect and enables the Save button accordingly.
- Track agent modification wrt agent info received from server in
  chatSidebar instead.
- Reduce modelSelector's mandate to just notify
  when the user changes the model.

- Fix to infer, show & update agent state from chat sidebar on web app
  This logic is fragile and convoluted because:
  - the default agent chat model is dynamically determined.
  - need to disambiguate tools not set vs none set vs all set by user
    The default agent's tool selection is stored as undefined to show
    not set scenario, which allows for all tools to be dynamically
    used by  agent.
    But the user can also set no tools or all tools for their agents.
    All 3 scenarios are handled differently.
  - Track tools to be displayed vs tools to be stored

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

@@ -28,8 +28,7 @@ import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/h
 import { Skeleton } from "@/components/ui/skeleton";
 
 interface ModelSelectorProps extends PopoverProps {
-    onSelect: (model: ModelOptions, userModification: boolean) => void;
-    selectedModel?: string;
+    onSelect: (model: ModelOptions) => void;
     disabled?: boolean;
     initialModel?: string;
 }
@@ -49,9 +48,8 @@ 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) {
+                if (!selectedChatModelOption && userConfig.chat_model_options.length > 0) {
                     setSelectedModel(userConfig.chat_model_options[0]);
-                    return;
                 } else {
                     setSelectedModel(selectedChatModelOption);
                 }
@@ -63,29 +61,10 @@ export function ModelSelector({ ...props }: ModelSelectorProps) {
     }, [userConfig, props.initialModel, isLoadingUserConfig]);
 
     useEffect(() => {
-        if (props.selectedModel && selectedModel && props.selectedModel !== selectedModel.name) {
-            const model = models.find(model => model.name === props.selectedModel);
-            setSelectedModel(model);
+        if (selectedModel && userConfig) {
+            props.onSelect(selectedModel);
         }
-        else if (props.selectedModel === null && userConfig) {
-            const selectedChatModelOption = userConfig.chat_model_options.find(model => model.id === userConfig.selected_chat_model_config);
-            if (!selectedChatModelOption) {
-                props.onSelect(userConfig.chat_model_options[0], false);
-                return;
-            } else {
-                props.onSelect(selectedChatModelOption, false);
-            }
-        }
-    }, [props.selectedModel, models]);
-
-    useEffect(() => {
-        if (selectedModel) {
-            const userModification = selectedModel.id !== userConfig?.selected_chat_model_config;
-            if (props.selectedModel !== selectedModel.name) {
-                props.onSelect(selectedModel, userModification);
-            }
-        }
-    }, [selectedModel]);
+    }, [selectedModel, userConfig, props.onSelect]);
 
     if (isLoadingUserConfig) {
         return (