Merge pull request 'Fixed the Models utilising useEffect' (#49) from sageTheDm/interstellar_ai:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/49

app/components/Models.tsx

@@ -1,8 +1,6 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 const Models: React.FC = () => {
-  const [selectedModel, setSelectedModel] = useState<string>('Offline Fast');
-
   const modelOptions = [
     'Offline Fast',
     'Offline Fast (FOSS)',
@@ -18,14 +16,25 @@ const Models: React.FC = () => {
     'Online Expensive (Google)',
   ];
 
+  const [selectedModel, setSelectedModel] = useState<string>(() => {
+    // Load the selected model from localStorage on initial render
+    return localStorage.getItem('selectedModel') || 'Offline Fast';
+  });
+
   const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setSelectedModel(event.target.value);
+    const newModel = event.target.value;
+    setSelectedModel(newModel);
   };
 
   const isOfflineModel = (model: string) => {
     return model.includes('Offline');
   };
 
+  // Save selected model to localStorage whenever it changes
+  useEffect(() => {
+    localStorage.setItem('selectedModel', selectedModel);
+  }, [selectedModel]);
+
   return (
     <div className="model-background">
       <div className="models">