css progress 1

2024-09-30 10:46:03 +02:00 · 2024-09-30 10:46:03 +02:00 · 3e32ed6e0c
commit 3e32ed6e0c
parent bd4e3af47f
16 changed files with 61 additions and 86 deletions
--- 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>
+    </>
  )
 }

--- 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>
  );
 };

--- 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);
      
--- 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">
--- 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);
  };
--- 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;
 }

--- 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 */
--- a/app/styles/global.css
+++ b/app/styles/global.css
@ -1,7 +1,7 @@
 html,
 body {
    height: 100vh;
-    /* overflow: hidden; */
+    overflow: hidden;
    position: relative;
 }

--- 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 {
--- 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%;
+}
--- 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;
--- 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%;
--- 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{
--- 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;
  }
  
--- 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%;
+}
--- 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*/