default model via drop down menu

front/src/Pages/ChatPage.tsx

@@ -16,6 +16,7 @@ import Conversation from "../components/Conversation/Conversation";
 import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { setLastConversation } from "../Redux/reducers/lastConversationSlice";
+import { selectUserSettings } from "../Redux/reducers/userSettingsReducer";
 
 import { Navigate, useNavigate } from "react-router";
 import AnnouncementBar from "../components/Header/AnnouncementBar";
@@ -27,8 +28,9 @@ export default function ChatPage() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const { isMobile } = useWindowSize();
+  const userSettings = useSelector(selectUserSettings);
 
-  const [localState, setLocalState] = useState(() => getDefaultConversation());
+  const [localState, setLocalState] = useState(() => getDefaultConversation(userSettings));
 
   const modelsData = useUpdateModelsData();
   const userData = useUpdateUserData();

front/src/components/Header/ModelSelectorWrapper.tsx

@@ -1,27 +1,33 @@
 
 import { memo, useEffect, useState, useRef } from 'react'
+import { useDispatch } from "react-redux";
 import ModelSelectorSimple from "./ModelSelectorSimple";
 import ModelSelectorExtended from "./ModelSelectorExtended";
 import { useModal } from '../../modals/ModalContext';
 import type { ModelInfo } from '../../types/models';
+import { setDefaultModel } from "../../Redux/reducers/userSettingsReducer";
 
 function ModelSelectorWrapper({modelsData, localState, setLocalState, inHeader = false}: {modelsData: [ModelInfo], localState: any, setLocalState: any, inHeader: boolean}) {
   /*
   render either ModelSelectorSimple or ModelSelectorExtended depending if modelsList contains models with extended==true
   */
   const { openModal } = useModal();
+  const dispatch = useDispatch();
 
   const currentModelId = localState?.settings?.model?.id;
   const [selectedModel, setSelectedModel] = useState<ModelInfo | null>(null);
   //const selectedModel = modelsData ? modelsData.find(model => model.id === currentModelId) || modelsData[0] || null : null;
 
   const hasExtendedModels = modelsData?.[0]?.description !== undefined;
 
-  function setModel(newModel: ModelInfo) {
+  function setModel(newModel: ModelInfo, persistDefault = true) {
     if (newModel?.status === "offline") {
       openModal("serviceOffline");
     }
     setSelectedModel(newModel);
+    if (persistDefault) {
+      dispatch(setDefaultModel(newModel));
+    }
     setLocalState((prev) => ({
       ...prev,
       settings: {
@@ -40,10 +46,10 @@ function ModelSelectorWrapper({modelsData, localState, setLocalState, inHeader =
       (model) => model.id === currentModelId
     );
     if (foundModel){
-      setModel(foundModel);
+      setModel(foundModel, false);
     } else {
       // fallback to first model
-      setModel(modelsData[0]);
+      setModel(modelsData[0], false);
     }
   }, [currentModelId, modelsData]);
 
@@ -60,4 +66,4 @@ function ModelSelectorWrapper({modelsData, localState, setLocalState, inHeader =
 }
 
 
-export default memo(ModelSelectorWrapper);
+export default memo(ModelSelectorWrapper);

front/src/modals/UserSettings/UserSettingsModal.jsx

@@ -3,7 +3,6 @@ import { useSelector } from "react-redux";
 
 import { useModal } from "../ModalContext"; 
 import BaseModal from "../BaseModal";
-import DefaultModelSelector from "./DefaultModelSelector";
 import UserInfoContainer from "./UserInfoContainer";
 import TimeoutSetter from "./TimeoutSetter";
 import UserMemoryContainer from "./UserMemoryContainer";
@@ -28,7 +27,6 @@ export default function UserSettingsModal({
   isOpen,
   onClose,
   userData,
-  modelsData,
   localState,
 }) {
   const { openModal } = useModal();
@@ -65,9 +63,6 @@ export default function UserSettingsModal({
       {userData ? <UserInfoContainer userData={userData} /> : <></>}
 
       <div className="p-4 flex flex-col gap-4 overflow-y-auto flex-1 min-h-0">
-        {/* Default Model Selector */}
-        {modelsData ? <DefaultModelSelector modelsData={modelsData} /> : <></>}
-
         {/* Timeout Setter */}
         <TimeoutSetter />
 
@@ -114,4 +109,4 @@ export default function UserSettingsModal({
       </div>
     </BaseModal>
   );
-}
+}