From 3e32ed6e0c0b314a06de02973587cf541af0e87a Mon Sep 17 00:00:00 2001
From: YasinOnm08 <onmazyasin4@gmail.com>
Date: Mon, 30 Sep 2024 10:46:03 +0200
Subject: [PATCH] css progress 1

---
 app/backend/InputOutputHandler.tsx      | 12 ++++--------
 app/components/AI.tsx                   |  2 --
 app/components/ConversationFrontend.tsx |  7 -------
 app/layout.tsx                          |  3 +++
 app/page.tsx                            | 25 -------------------------
 app/styles/Settings.css                 |  9 ++++-----
 app/styles/container.css                | 11 +++++------
 app/styles/global.css                   |  2 +-
 app/styles/header.css                   | 19 +++++++++++++------
 app/styles/history.css                  |  8 ++++++--
 app/styles/input.css                    |  3 ++-
 app/styles/models.css                   | 13 ++++++-------
 app/styles/output.css                   | 15 +++++++--------
 app/styles/responsive.css               | 10 ++--------
 app/styles/user-ai-messages.css         |  6 ++++++
 app/styles/variables.css                |  2 ++
 16 files changed, 61 insertions(+), 86 deletions(-)

diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx
index 4fa0042..d4614fd 100644
--- a/app/backend/InputOutputHandler.tsx
+++ b/app/backend/InputOutputHandler.tsx
@@ -11,6 +11,7 @@ import { fetchFile, toBlobURL } from "@ffmpeg/util"
 
 
 const InputOutputBackend: React.FC = () => {
+  // # variables
   type Message = {
     role: string
     content: string
@@ -31,7 +32,7 @@ const InputOutputBackend: React.FC = () => {
     setPreferredMeasurement(localStorage.getItem("preferredMeasurement"))
     setTimeZone(localStorage.getItem("timeZone"))
     setDateFormat(localStorage.getItem("dateFormat"))
-  })
+  }, [preferredCurrency, preferredLanguage, timeFormat, preferredMeasurement, timeZone, dateFormat])
   
   const [copyClicked, setCopyClicked] = useState(false)
   const [accessToken, setAccessToken] = useState("")
@@ -151,11 +152,6 @@ const InputOutputBackend: React.FC = () => {
     });
   };
 
-
-  useEffect(() => {
-    
-  },[preferredCurrency, preferredLanguage, timeFormat, preferredMeasurement, timeZone, dateFormat])
-
   const addMessage = (role: string, content: string) => {
     setMessages(previous => [...previous, { role, content }])
   }
@@ -253,7 +249,7 @@ const InputOutputBackend: React.FC = () => {
   
 
   return (
-    <div>
+    <>
       <ConversationFrontend
         messages={messages}
         onResendClick={handleResendClick}
@@ -268,7 +264,7 @@ const InputOutputBackend: React.FC = () => {
         inputDisabled={inputDisabled}
         isRecording={isRecording}
       /> 
-    </div>
+    </>
   )
 }
 
diff --git a/app/components/AI.tsx b/app/components/AI.tsx
index e1d244b..824f6d6 100644
--- a/app/components/AI.tsx
+++ b/app/components/AI.tsx
@@ -4,11 +4,9 @@ import InputOutputBackend from '../backend/InputOutputHandler';
 
 const AI: React.FC = () => {
   return (
-    <div>
       <div className="ai-container">
         <InputOutputBackend />
       </div>
-    </div>
   );
 };
 
diff --git a/app/components/ConversationFrontend.tsx b/app/components/ConversationFrontend.tsx
index 3294d09..fd17324 100644
--- a/app/components/ConversationFrontend.tsx
+++ b/app/components/ConversationFrontend.tsx
@@ -17,13 +17,6 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
   ({ messages, onResendClick, onEditClick, onCopyClick, isClicked}, ref: ForwardedRef<HTMLDivElement>) => {
     const endOfMessagesRef = useRef<HTMLDivElement>(null);
 
-    // Auto-scroll to the bottom of the conversation whenever a new message is added
-    useEffect(() => {
-      if (endOfMessagesRef.current) {
-        endOfMessagesRef.current.scrollIntoView({ behavior: 'smooth' });
-      }
-    }, [messages]); // Triggers the effect whenever the 'messages' array changes
-
     useEffect(() => {
       console.log(isClicked);
       
diff --git a/app/layout.tsx b/app/layout.tsx
index 0425420..1d7d206 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -5,6 +5,9 @@ export const metadata = {
   description: 'A little AI chat that is able to assist you in little tasks',
 };
 
+
+
+
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
diff --git a/app/page.tsx b/app/page.tsx
index aad4bee..9afccc2 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -15,31 +15,6 @@ const LandingPage: React.FC = () => {
   const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI'); // Added 'Credits' here
   const conversationRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    const scrollToBottom = () => {
-      const conversation = conversationRef.current;
-      if (conversation) {
-        conversation.scrollTop = conversation.scrollHeight;
-      }
-    };
-
-    scrollToBottom();
-
-    const observer = new MutationObserver(scrollToBottom);
-    if (conversationRef.current) {
-      observer.observe(conversationRef.current, {
-        childList: true,
-        subtree: true,
-      });
-    }
-
-    return () => {
-      if (conversationRef.current) {
-        observer.disconnect();
-      }
-    };
-  }, []);
-
   const toggleDivs = () => {
     setShowDivs(prevState => !prevState);
   };
diff --git a/app/styles/Settings.css b/app/styles/Settings.css
index ece5047..b0aae8c 100644
--- a/app/styles/Settings.css
+++ b/app/styles/Settings.css
@@ -9,7 +9,6 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    z-index: 10000;
 }
 
 .settings-main h2 {
@@ -104,14 +103,14 @@
     padding: 5px 10px;
     cursor: pointer;
     position: absolute; /* Position the button absolutely */
-    top: 10px; /* Distance from the top */
-    right: 10px; /* Distance from the right */
+    top: 15px; /* Distance from the top */
+    right: 40px; /* Distance from the right */
     transition: background 0.3s;
 }
 
 /* Close button positioning */
 .apply {
-    background: var(--close-button-color); /* Use variable for close button color */
+    background: var(--apply-button-color); /* Use variable for close button color */
     color: white; /* Use white for text color */
     border: none;
     border-radius: 5px;
@@ -119,7 +118,7 @@
     cursor: pointer;
     position: absolute; /* Position the button absolutely */
     top: 50px; /* Distance from the top */
-    right: 10px; /* Distance from the right */
+    right: 40px; /* Distance from the right */
     transition: background 0.3s;
 }
 
diff --git a/app/styles/container.css b/app/styles/container.css
index 89e03fa..3f094b2 100644
--- a/app/styles/container.css
+++ b/app/styles/container.css
@@ -1,19 +1,19 @@
 /* container.css */
-.container,
-.content {
+.container{
     display: flex;
     width: 100vw;
-    padding-top: 0.025vh;
+    height: 100vh;
+    padding-top: 12vh;
 }
 
 .left-panel {
-    margin-top: 5em;
     width: 25vw; /* Adjust as needed */
     transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */
     background-color: var(--left-panel-background-color); /* Use variable for background color */
     border-radius: 0 1em 0 0;
     margin-left: 0;
     padding-right: 1em;
+    height: 100%;
 }
 
 .left-panel.hidden {
@@ -23,12 +23,11 @@
 }
 
 .conversation-container {
-    margin-top: 5em;
     flex: 1;
     transition: margin-left 0.3s ease; /* Smooth margin adjustment */
     background-color: var(--conversation-background-color); /* Use variable for background color */
     border-radius: 1em 0 0 0;
-    height: min-content;
+    height: 100%;
 }
 
 /* Adjust margin-left when panel is shown or hidden */
diff --git a/app/styles/global.css b/app/styles/global.css
index 8a4eae2..c9754e3 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -1,7 +1,7 @@
 html,
 body {
     height: 100vh;
-    /* overflow: hidden; */
+    overflow: hidden;
     position: relative;
 }
 
diff --git a/app/styles/header.css b/app/styles/header.css
index 99343f2..9e30bd8 100644
--- a/app/styles/header.css
+++ b/app/styles/header.css
@@ -8,6 +8,7 @@ header{
     display: flex;
     align-items: center;
     font-size: 1em;
+    z-index: 999;
 }
 
 .hamburger{
@@ -39,9 +40,10 @@ header{
 
 .nav-links{
     position: absolute;
+    left: 1vw;
     display: flex;
-    gap: 1em;
-    width: 35vw;
+    gap: 0.5vw;
+    width:max-content;
     height: 100%;
     align-items: center;
 }
@@ -52,7 +54,8 @@ header{
     font-size: 0.9em;
     height: 50%;
     border-radius: 5px;
-    padding: 1px 15px;
+    padding: 0.2em 15px;
+    font-family: var(--font-family);
 }
 
 .nav-btn:hover{
@@ -72,16 +75,19 @@ header{
 }
 
 .login-button-container{
+    position: absolute;
+    top: 0.2vh;
+    right: 1vw;
     height: 100%;
     display: flex;
     align-items: center;
 }
 
 .header-login-button{
-    font-size: 2vh;
-    position: absolute;
+    font-size: var(--font-size);
+    /* position: absolute;
     top: 1.5vh;
-    right: 1vw;
+    right: 1vw; */
     padding: 10px 20px;
     background-color: var(--input-button-color);
     color: var(--text-color);
@@ -89,6 +95,7 @@ header{
     border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.3s;
+    font-family: var(--font-family);
 }
 
 .header-login-button:hover {
diff --git a/app/styles/history.css b/app/styles/history.css
index 7bc9bcd..7537d3a 100644
--- a/app/styles/history.css
+++ b/app/styles/history.css
@@ -1,13 +1,13 @@
 .history-background {
     grid-column: 1/2;
     grid-row: 1/2;
-    height: 40vh;
+    height: 45%;
     overflow: hidden;
     background-color: var(--history-background-color);
     padding: 1em;
     margin: 1em;
     margin-right: 0;
-    border-radius: 2em;
+    border-radius: 1em;
 }
 
 .history {
@@ -37,3 +37,7 @@
 .history ul li a:hover {
     background-color: var(--input-button-hover-color);
 }
+
+.history-models{
+    height: 100%;
+}
diff --git a/app/styles/input.css b/app/styles/input.css
index ffbffeb..d04a2f1 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -5,7 +5,8 @@
     border-radius: 20px;
     background-color: var(--input-background-color);
     padding: 1em;
-    margin: 1em;
+    margin: 0 1em;
+    margin-bottom: 1em;
     display: flex;
     justify-content: space-between;
     align-items: center;
diff --git a/app/styles/models.css b/app/styles/models.css
index 0706c93..7369e40 100644
--- a/app/styles/models.css
+++ b/app/styles/models.css
@@ -1,13 +1,13 @@
 .model-background {
     grid-column: 1/2;
     grid-row: 1/2;
-    height: 45vh;
+    height: 45%;
     overflow: hidden;
     background-color: var(--history-background-color);
     padding: 1em;
-    margin: 1em;
+    margin: 0 1em;
     margin-right: 0;
-    border-radius: 2em;
+    border-radius: 1em;
 }
 
 .models {
@@ -17,12 +17,12 @@
     overflow-y: scroll;
 }
 
-.models .titel {
-    padding-bottom: 1em;
+.models .title {
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 0.7em;
+    font-size: 1.5em;
+    margin-bottom: 0;
 }
 
 .model-dropdown {
@@ -56,7 +56,6 @@
 }
 
 .overlay {
-    z-index: 900;
     position: absolute;
     left: 0;
     width: 100%;
diff --git a/app/styles/output.css b/app/styles/output.css
index 255715f..19507cd 100644
--- a/app/styles/output.css
+++ b/app/styles/output.css
@@ -2,24 +2,21 @@
 .output {
     grid-column: 2;
     grid-row: 1 / 4;
-    border-radius: 2em;
     background-color: var(--output-background-color);
-    padding: 1em;
     margin: 1em;
-    margin-top: 0;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     font-size: 1em;
     overflow-y: auto;
     width: calc(100% - 2em); /* Corrected calculation for width */
-    height: 75vh;
+    height: 70vh;
 }
 
 #conversation {
     display: flex;
     flex-direction: column;
-    padding: 10px;
+    padding-left: 10px;
     overflow-y: auto;
     max-height: 80vh;
     background-color: var(--output-background-color);
@@ -51,16 +48,17 @@
 /* Button Container */
 .button-container {
     display: flex;
-    padding: 10px 0;
 }
 
 .button-container button {
     background: none;
     border: none;
     cursor: pointer;
-    border-radius: 50%;
+    border-radius: 100%;
     padding: 10px;
     transition: background-color 0.3s ease;
+    height: 40px;
+    width: 40px;
 }
 
 .button-container button:hover {
@@ -68,7 +66,8 @@
 }
 
 .button-container img {
-    height: 1.5em;
+    height: 20px;
+    width: 20px;
 }
 
 #copiedText{
diff --git a/app/styles/responsive.css b/app/styles/responsive.css
index bcf54af..24f2950 100644
--- a/app/styles/responsive.css
+++ b/app/styles/responsive.css
@@ -27,13 +27,6 @@
     padding: 7em 0 0 0 ;
   }
 
-  header li {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    margin: 0;
-  }
-
   /* Left panel styles */
   .left-panel {
     display: hidden; /* Initially hidden */
@@ -43,6 +36,7 @@
 
   .left-panel.visible {
     display: block;
+    height: min-content;
   }
 
   /* Conversation container styles */
@@ -134,7 +128,7 @@
 
   .nav-btn{
     width: 100%;
-    text-align: left;
+    text-align: center;
     padding: 10px;
   }
   
diff --git a/app/styles/user-ai-messages.css b/app/styles/user-ai-messages.css
index 524e730..c79b71c 100644
--- a/app/styles/user-ai-messages.css
+++ b/app/styles/user-ai-messages.css
@@ -25,3 +25,9 @@
     margin-right: auto;
     text-align: left;
 }
+
+.ai-container{
+    height: min-content;
+    bottom: 0;
+    width: 100%;
+}
diff --git a/app/styles/variables.css b/app/styles/variables.css
index 795b4fc..dab7cbe 100644
--- a/app/styles/variables.css
+++ b/app/styles/variables.css
@@ -20,6 +20,8 @@
     --doc-background-color: #ffffff; /* Background color for documents */
     --close-button-color: red;
     --close-button-hover-color: #9e0101; /*NEW*/
+    --apply-button-color:#8B9635;
+    --apply-button-hover-color:#6b7c2b;
     --burger-menu-background-color: #79832e;  /*NEW*/
     --overlay-text-color:white; /*NEW*/