added: useMemo to params in Sidebar

Author: MichaelTeida

src/components/Sidebar.jsx

@@ -1,5 +1,5 @@
 import {Divider, Select, Sheet, Slider, Typography, Option, Box, Chip, Tooltip, IconButton, selectClasses} from "@mui/joy";
-import {useEffect, useState} from "react";
+import {useEffect, useState, useMemo} from "react";
 import {setOpenAiParams} from "../lib/OpenAi.jsx";
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown'
@@ -11,18 +11,20 @@ const Sidebar = () => {
     const [frequencyPenalty, setFrequencyPenalty] = useState(0);
     const [topP, setTopP] = useState(1);
 
+    const params = useMemo(() => ({
+        model: model,
+        temperature: temperature,
+        max_tokens: maxTokens,
+        frequency_penalty: frequencyPenalty,
+        top_p: topP,
+    }), [model, temperature, maxTokens, frequencyPenalty, topP]);
+
     useEffect(() => {
         const timeout = setTimeout(() => {
-            setOpenAiParams({
-                model: model,
-                temperature: temperature,
-                max_tokens: maxTokens,
-                frequency_penalty: frequencyPenalty,
-                top_p: topP,
-            });
+            setOpenAiParams(params);
         }, 400);
         return () => clearTimeout(timeout);
-    }, [model, temperature, maxTokens, frequencyPenalty, topP])
+    }, [params])
 
     return <Sheet sx={{display: {xs: "none", md: "flow"}, borderRight: '1px solid', borderColor: 'divider', overflowY: 'scroll', width: "25rem", p: 3}}>
         <Divider sx={{mb: 2}}><Chip variant="outlined">Settings</Chip></Divider>

src/lib/OpenAi.jsx

@@ -15,6 +15,7 @@ let openAiParams = {
 
 export function setOpenAiParams(newParams) {
     openAiParams = {...openAiParams, ...newParams};
+    console.log(openAiParams)
 }
 
 export async function sendMessage(message) {
@@ -28,6 +29,15 @@ export async function sendMessage(message) {
         })
         return chatCompletion.choices[0].message.content;
     } catch (error) {
+        if (error.status === 429) {
+            console.error("Error: " + "Rate limit reached for requests")
+        } else if (error.status === 500) {
+            console.error("Error: " + "The server had an error while processing your request")
+        } else if (error.status === 503) {
+            console.error("Error: " + "The engine is currently overloaded, please try again later")
+        } else if (error.status === 401) {
+            console.error("Error: " + "Invalid Authentication")
+        }
         throw error
     }
 }