From 37bfa228917309e42b588e1af5fcf4189dc83188 Mon Sep 17 00:00:00 2001
From: YasinOnm08 <onmazyasin4@gmail.com>
Date: Mon, 30 Sep 2024 08:41:06 +0200
Subject: [PATCH 1/2] css tweaks start

---
 app/components/Header.tsx        |  2 +-
 app/components/InputFrontend.tsx |  2 +-
 app/components/Models.tsx        |  6 ++++--
 app/styles/header.css            | 25 +++++++++++++++++++------
 4 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index 0445db4..8a930e3 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -43,7 +43,7 @@ const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, sho
         <div className="header-button header-logo">
           {/* AI logo or text */}
         </div>
-        <div className="login-button">
+        <div className="login-button-container">
           <Login /> 
         </div>
       </header>
diff --git a/app/components/InputFrontend.tsx b/app/components/InputFrontend.tsx
index 74539e6..f02442b 100644
--- a/app/components/InputFrontend.tsx
+++ b/app/components/InputFrontend.tsx
@@ -40,7 +40,7 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
         <button type="button" onClick={() => onSendClick(inputValue, false)} disabled={inputDisabled ? true : false}>
           <img src="/img/send.svg" alt="send" />
         </button>
-        <button className={`microphone-button ${isRecording ? "red":"green"}`} type="button" onClick={onMicClick}>
+        <button className={`microphone-button ${isRecording ? "red": "var(--input-button-color)"}`} type="button" onClick={onMicClick}>
           <img src="/img/microphone.svg" alt="microphone" />
         </button>
       </div>
diff --git a/app/components/Models.tsx b/app/components/Models.tsx
index 17f7f46..894623a 100644
--- a/app/components/Models.tsx
+++ b/app/components/Models.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React, { useState, useEffect } from 'react';
 
 // Define the available model options
@@ -18,9 +19,10 @@ const modelDropdown = {
 const Models: React.FC = () => {
   // Initialize state with value from localStorage or default to ''
   const [selectedModel, setSelectedModel] = useState('');
-  const radioSelection = localStorage.getItem('radioSelection')
-
+  const [radioSelection, setRadioSelection] = useState<string | null>("")
+  
   useEffect(() => {
+    setRadioSelection(localStorage.getItem('radioSelection'))
     const handleStorageChange = () => {
       setSelectedModel(localStorage.getItem('selectedModel') || '');
     };
diff --git a/app/styles/header.css b/app/styles/header.css
index 5e84cc5..99343f2 100644
--- a/app/styles/header.css
+++ b/app/styles/header.css
@@ -40,16 +40,23 @@ header{
 .nav-links{
     position: absolute;
     display: flex;
-    top: 2vh;
     gap: 1em;
-    width: 25em;
-    height: 2em;
+    width: 35vw;
+    height: 100%;
+    align-items: center;
 }
 
 .nav-btn{
-    background-color: transparent;
+    background-color: var(--input-button-color);
     border: none;
     font-size: 0.9em;
+    height: 50%;
+    border-radius: 5px;
+    padding: 1px 15px;
+}
+
+.nav-btn:hover{
+    background-color: var(--input-button-hover-color);
 }
 
 .header-logo{
@@ -64,7 +71,13 @@ header{
     border: none;
 }
 
-.login-button .header-login-button{
+.login-button-container{
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.header-login-button{
     font-size: 2vh;
     position: absolute;
     top: 1.5vh;
@@ -78,6 +91,6 @@ header{
     transition: background-color 0.3s;
 }
 
-.login-button button:hover {
+.header-login-button:hover {
     background-color: var(--input-button-hover-color);
 }
\ No newline at end of file
-- 
2.39.5


From bd4e3af47f43a96eb95b4744dfc16f98cd7a040a Mon Sep 17 00:00:00 2001
From: YasinOnm08 <onmazyasin4@gmail.com>
Date: Mon, 30 Sep 2024 08:44:19 +0200
Subject: [PATCH 2/2] fixed localStorage access for system-prompt

---
 app/backend/InputOutputHandler.tsx | 32 ++++++++++++++----------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx
index 47a6e1f..4fa0042 100644
--- a/app/backend/InputOutputHandler.tsx
+++ b/app/backend/InputOutputHandler.tsx
@@ -17,12 +17,21 @@ const InputOutputBackend: React.FC = () => {
   }
 
   /* Variables for System-prompt */
-  const [preferredCurrency, setPreferredCurrency] = useState(localStorage.getItem("preferredCurrency") || "")
-  const [preferredLanguage, setPreferredLanguage] = useState(localStorage.getItem("preferredLanguage") || "")
-  const [timeFormat, setTimeFormat] = useState(localStorage.getItem("timeFormat") || "")
-  const [preferredMeasurement, setPreferredMeasurement] = useState(localStorage.getItem("preferredMeasurement") || "")
-  const [timeZone, setTimeZone] = useState(localStorage.getItem("timeZone") || "")
-  const [dateFormat, setDateFormat] = useState(localStorage.getItem("dateFormat") || "")
+  const [preferredCurrency, setPreferredCurrency] = useState<string | null>("")
+  const [preferredLanguage, setPreferredLanguage] = useState<string | null>("")
+  const [timeFormat, setTimeFormat] = useState<string | null>("")
+  const [preferredMeasurement, setPreferredMeasurement] = useState<string | null>("")
+  const [timeZone, setTimeZone] = useState<string | null>("")
+  const [dateFormat, setDateFormat] = useState<string | null>("")
+
+  useEffect(() => {
+    setPreferredCurrency(localStorage.getItem("preferredCurrency"))
+    setPreferredLanguage(localStorage.getItem("preferredLanguage"))
+    setTimeFormat(localStorage.getItem("timeFormat"))
+    setPreferredMeasurement(localStorage.getItem("preferredMeasurement"))
+    setTimeZone(localStorage.getItem("timeZone"))
+    setDateFormat(localStorage.getItem("dateFormat"))
+  })
   
   const [copyClicked, setCopyClicked] = useState(false)
   const [accessToken, setAccessToken] = useState("")
@@ -41,7 +50,6 @@ const InputOutputBackend: React.FC = () => {
   const [inputMessage, setInputMessage] = useState<string>("")
   const [inputDisabled, setInputDisabled] = useState(false)
   const [isRecording, setIsRecording] = useState(false)
-  const [audioURL, setAudioURL] = useState<string | null>(null)
   const mediaRecorderRef = useRef<MediaRecorder | null>(null) 
   const audioChunks = useRef<Blob[]>([])
 
@@ -189,16 +197,6 @@ const InputOutputBackend: React.FC = () => {
     mediaRecorder.start()
     setIsRecording(true)
   }
-
-  const ffmpegRef = useRef<FFmpeg | null>(null)
-  const audioRef = useRef("")
-
-  const loadFFmpeg = async () => {
-    if (!ffmpegRef.current) {
-      ffmpegRef.current = new FFmpeg()
-      await ffmpegRef.current.load()
-    }
-  }
     
   const stopRecording = () => {
     mediaRecorderRef.current?.stop()
-- 
2.39.5