Merge branch 'main' into main

app/components/ConversationFrontend.tsx

@@ -75,32 +75,33 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
           <div className="button-container">
             <div className="tooltip">
               <button type="button" onClick={onStopClick}>
-                <img src="/img/resend.svg" alt="stop" />
+                <svg style={{fill:"var(--text-color)"}} viewBox="0 0 512 512"><path d="M256 0c-25.3 0-47.2 14.7-57.6 36c-7-2.6-14.5-4-22.4-4c-35.3 0-64 28.7-64 64l0 165.5-2.7-2.7c-25-25-65.5-25-90.5 0s-25 65.5 0 90.5L106.5 437c48 48 113.1 75 181 75l8.5 0 8 0c1.5 0 3-.1 4.5-.4c91.7-6.2 165-79.4 171.1-171.1c.3-1.5 .4-3 .4-4.5l0-176c0-35.3-28.7-64-64-64c-5.5 0-10.9 .7-16 2l0-2c0-35.3-28.7-64-64-64c-7.9 0-15.4 1.4-22.4 4C303.2 14.7 281.3 0 256 0zM240 96.1l0-.1 0-32c0-8.8 7.2-16 16-16s16 7.2 16 16l0 31.9 0 .1 0 136c0 13.3 10.7 24 24 24s24-10.7 24-24l0-136c0 0 0 0 0-.1c0-8.8 7.2-16 16-16s16 7.2 16 16l0 55.9c0 0 0 .1 0 .1l0 80c0 13.3 10.7 24 24 24s24-10.7 24-24l0-71.9c0 0 0-.1 0-.1c0-8.8 7.2-16 16-16s16 7.2 16 16l0 172.9c-.1 .6-.1 1.3-.2 1.9c-3.4 69.7-59.3 125.6-129 129c-.6 0-1.3 .1-1.9 .2l-4.9 0-8.5 0c-55.2 0-108.1-21.9-147.1-60.9L52.7 315.3c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L119 336.4c6.9 6.9 17.2 8.9 26.2 5.2s14.8-12.5 14.8-22.2L160 96c0-8.8 7.2-16 16-16c8.8 0 16 7.1 16 15.9L192 232c0 13.3 10.7 24 24 24s24-10.7 24-24l0-135.9z"/></svg>              </button>
-              </button>
               <span className="tooltiptext">Stop</span>
             </div>
             <div className="tooltip">
               <button type="button" onClick={onResendClick}>
-                <img src="/img/resend.svg" alt="resend" />
+                <svg style={{fill:"var(--text-color)"}} viewBox="0 0 512 512"><path d="M463.5 224l8.5 0c13.3 0 24-10.7 24-24l0-128c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8l119.5 0z"/></svg>
               </button>
               <span className="tooltiptext">Resend</span>
             </div>
             <div className="tooltip">
               <button type="button" onClick={onEditClick}>
-                <img src="/img/edit.svg" alt="edit" />
+                <svg style={{fill:"var(--text-color)"}} viewBox="0 0 512 512"><path d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z"/></svg>
               </button>
               <span className="tooltiptext">Edit</span>
             </div>
             <div className="tooltip">
               <button type="button" onClick={onCopyClick}>
-                <img src="/img/copy.svg" alt="copy" />
+                <svg style={{fill:"var(--text-color)"}} viewBox="0 0 512 512" preserveAspectRatio="none"><path d="M208 0L332.1 0c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9L448 336c0 26.5-21.5 48-48 48l-192 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48zM48 128l80 0 0 64-64 0 0 256 192 0 0-32 64 0 0 48c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 176c0-26.5 21.5-48 48-48z"/></svg>
               </button>
               <span className="tooltiptext">{isClicked?"Copied!": "Copy" }</span>
             </div>
           </div>
           <div className={"endOfMessages"} ref={messagesEndRef} style={{ height: "3px"}}/>
         </div>
-        <button id="scrollToBottom" disabled={isScrolling?true:false} style={{visibility: isScrolling?"hidden":"visible"}} onClick={()=> setIsScrolling(true)}>Down</button>
+        <button id="scrollToBottom" disabled={isScrolling ? true : false} style={{ visibility: isScrolling ? "hidden" : "visible" }} onClick={() => setIsScrolling(true)}>
+          <svg style={{fill:"var(--text-color)"}} viewBox="0 0 384 512" height={30}><path d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>
+        </button>
       </div>
     );
   } 

app/components/Documentation.tsx

@@ -31,10 +31,10 @@ const Documentation = () => {
             </p>
 
             <h2 className="subtitle">Draw.io:</h2>
-            <p className="paragraph">Insert your Draw.io diagrams here.</p>
+            <img src="/img/Live-Message-Idee.jpg" alt='Live Message Skizze' />
 
             <h2 className="subtitle">Inspiration:</h2>
-            <p className="paragraph">Describe your inspirations here.</p>
+            <p className="paragraph">We got our inspiration from Huggingchat.</p>
 
             <h2 className="subtitle">First prototype:</h2>
             <p className="paragraph">

app/components/InputFrontend.tsx

@@ -49,10 +49,10 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
           onKeyDown={handleKeyDown}
         />
         <button type="button" onClick={handleSendClick} disabled={inputDisabled ? true : false}>
-          <img src="/img/send.svg" alt="send" />
+          <svg style={{fill:"var(--text-color)"}} viewBox="0 0 512 512" width={20}><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480l0-83.6c0-4 1.5-7.8 4.2-10.8L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"/></svg>
         </button>
         <button className={`microphone-button ${isRecording ? "red" : "var(--input-button-color)"}`} type="button" onClick={onMicClick}>
-          <img src="/img/microphone.svg" alt="microphone" />
+          <svg style={{fill:"var(--text-color)"}} viewBox="0 0 384 512" width={15}><path d="M192 0C139 0 96 43 96 96l0 160c0 53 43 96 96 96s96-43 96-96l0-160c0-53-43-96-96-96zM64 216c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 89.1 66.2 162.7 152 174.4l0 33.6-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l72 0 72 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-48 0 0-33.6c85.8-11.7 152-85.3 152-174.4l0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 70.7-57.3 128-128 128s-128-57.3-128-128l0-40z"/></svg>
         </button>
       </div>
     );

app/components/Login.tsx

@@ -86,7 +86,7 @@ const Login: React.FC = () => {
     <div>
       {/* Login or Settings Button */}
       <button className='header-login-button' onClick={isLoggedIn ? toggleSettingsPopup : toggleLoginPopup}>
-        {isLoggedIn ? <img src="" alt="Settings" /> : 'Log In'}
+        {isLoggedIn ? <svg style={{ fill: "var(--text-color)" }} viewBox="0 0 512 512" width={25} height={35} preserveAspectRatio="xMidYMid meet"><path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg> : 'Log In'}
       </button>
 
       {/* Conditional rendering of the Login Popup */}

app/components/settings/Settings.tsx

@@ -299,9 +299,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
 
   const handleLogout = () => {
     setIsLoggedIn(false);
-    localStorage.removeItem('accountName');
+    localStorage.clear();
-    localStorage.removeItem('accountEmail');
-    localStorage.removeItem('accountPassword');
     alert('Successfully logged out!');
     window.location.reload();
   };
@@ -388,6 +386,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     if (useName && usePassword) {
       const success = await deleteAccount(useName, usePassword);
       if (success) {
+        localStorage.clear();
         alert('Account deleted successfully!');
         window.location.reload()
         // Optionally, redirect or reset state here

app/styles/Settings.css

@@ -22,10 +22,12 @@
 /* Main container for the settings */
 .settings-container {
     display: grid;
-    grid-template-columns: 1fr 3fr; /* 1fr for sidebar, 3fr for main content */
+    grid-template-columns: 1fr 3fr;
+    /* 1fr for sidebar, 3fr for main content */
     grid-auto-flow: column;
     overflow-x: hidden;
-    height: 100%; /* Ensure it takes full height */
+    height: 100%;
+    /* Ensure it takes full height */
 }
 
 /* Settings content */
@@ -39,23 +41,30 @@
     height: 90%;
     max-height: 600px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-    overflow: hidden; /* Prevents overflow of the content */
+    overflow: hidden;
-    position: relative; /* Needed for absolute positioning of close button */
+    /* Prevents overflow of the content */
+    position: relative;
+    /* Needed for absolute positioning of close button */
     display: flex;
-    flex-direction: column; /* Flexbox for vertical stacking */
+    flex-direction: column;
+    /* Flexbox for vertical stacking */
 }
 
 /* Sidebar styles */
 .sidebar {
     background: var(--settings-background-color);
     padding: 20px;
-    border-radius: 10px 0 0 10px; /* Rounded corners on the left side */
+    border-radius: 10px 0 0 10px;
+    /* Rounded corners on the left side */
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-    overflow-y: auto; /* Scroll if content exceeds height */
+    overflow-y: auto;
+    /* Scroll if content exceeds height */
     display: flex;
     flex-direction: column;
-    grid-column: 1; /* Places sidebar in the first grid column */
+    grid-column: 1;
-    height: 100%; /* Ensures sidebar takes full height */
+    /* Places sidebar in the first grid column */
+    height: 100%;
+    /* Ensures sidebar takes full height */
 }
 
 /* Sidebar item styles */
@@ -64,8 +73,10 @@
     padding: 0;
     margin: 0;
     display: flex;
-    flex-direction: column; /* Make the ul a column */
+    flex-direction: column;
-    flex-grow: 1; /* Allows the list to take available space */
+    /* Make the ul a column */
+    flex-grow: 1;
+    /* Allows the list to take available space */
 }
 
 .sidebar li {
@@ -77,66 +88,88 @@
 }
 
 .sidebar li:hover {
-    background: var(--input-button-hover-color); /* Highlight on hover */
+    background: var(--input-button-hover-color);
+    /* Highlight on hover */
 }
 
 .sidebar li.active {
-    background: var(--button-hover-background-color); /* Active section highlight */
+    background: var(--button-hover-background-color);
+    /* Active section highlight */
 }
 
 /* Main settings area */
 .settings-main {
-    grid-column: 2; /* Places main settings in the second grid column */
+    grid-column: 2;
+    /* Places main settings in the second grid column */
     padding: 20px;
-    border-radius: 0 10px 10px 0; /* Rounded corners on the right side */
+    border-radius: 0 10px 10px 0;
-    overflow-y: auto; /* Scroll if content exceeds height */
+    /* Rounded corners on the right side */
+    overflow-y: auto;
+    /* Scroll if content exceeds height */
     display: flex;
-    flex-direction: column; /* Stack content vertically */
+    flex-direction: column;
+    /* Stack content vertically */
 }
 
 /* Close button positioning */
 .close-popup {
-    background: var(--close-button-color); /* Use variable for close button color */
+    background: var(--close-button-color);
-    color: white; /* Use white for text color */
+    /* Use variable for close button color */
+    color: white;
+    /* Use white for text color */
     border: none;
     border-radius: 5px;
     padding: 5px 10px;
     cursor: pointer;
-    position: absolute; /* Position the button absolutely */
+    position: absolute;
-    top: 15px; /* Distance from the top */
+    /* Position the button absolutely */
-    right: 40px; /* 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(--apply-button-color); /* Use variable for close button color */
+    background: var(--apply-button-color);
-    color: white; /* Use white for text color */
+    /* Use variable for close button color */
+    color: white;
+    /* Use white for text color */
     border: none;
     border-radius: 5px;
     padding: 5px 10px;
     cursor: pointer;
-    position: absolute; /* Position the button absolutely */
+    position: absolute;
-    top: 50px; /* Distance from the top */
+    /* Position the button absolutely */
-    right: 40px; /* Distance from the right */
+    top: 50px;
+    /* Distance from the top */
+    right: 40px;
+    /* Distance from the right */
     transition: background 0.3s;
 }
 
 .close-popup:hover {
-    background: darkred; /* Optional hover effect */
+    background: darkred;
+    /* Optional hover effect */
 }
 
 
 /* Additional styles for inputs and options */
 .settings-option {
-    margin-bottom: 20px; /* Adds space between each setting option */
+    margin-bottom: 20px;
-    padding-bottom: 10px; /* Adds internal spacing */
+    /* Adds space between each setting option */
-    border-bottom: 1px solid var(--input-border-color); /* Optional, creates a separator between options */
+    padding-bottom: 10px;
+    /* Adds internal spacing */
+    border-bottom: 1px solid var(--input-border-color);
+    /* Optional, creates a separator between options */
 }
 
 .settings-option:last-child {
-    margin-bottom: 0; /* Removes bottom margin from last option */
+    margin-bottom: 0;
-    border-bottom: none; /* Removes separator from last option */
+    /* Removes bottom margin from last option */
+    border-bottom: none;
+    /* Removes separator from last option */
 }
 
 .settings-option input[type="text"],
@@ -151,7 +184,9 @@
     padding: 10px;
     border-radius: 5px;
     width: 100%;
-    margin-bottom: 10px; /* Adds spacing between inputs */
+    height: 40px;
+    margin-bottom: 10px;
+    /* Adds spacing between inputs */
 }
 
 /* Optional additional spacing for labels */
@@ -189,17 +224,20 @@
 }
 
 .slider-option.active {
-    background-color: #007bff; /* Change to your active color */
+    background-color: #007bff;
+    /* Change to your active color */
     color: white;
     border-color: #007bff;
 }
 
 input[type="radio"] {
-    display: none; /* Hide the default radio buttons */
+    display: none;
+    /* Hide the default radio buttons */
 }
 
 .slider-option.disabled {
-    opacity: 0.5; /* Make the option appear greyed out */
+    opacity: 0.5;
-    pointer-events: none; /* Prevent clicks */
+    /* Make the option appear greyed out */
+    pointer-events: none;
+    /* Prevent clicks */
 }
-  

app/styles/global.css

@@ -4,6 +4,31 @@ body {
     position: relative;
 }
 
+/* Chrome, Edge, and Safari */
+::-webkit-scrollbar {
+    width: 12px;
+    /* Adjust width for horizontal and vertical scrollbars */
+}
+
+::-webkit-scrollbar-track {
+    background: #f0f0f0;
+    /* Background of the scrollbar track */
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #888;
+    /* Color of the draggable part (thumb) */
+    border-radius: 10px;
+    /* Rounded corners */
+    border: 2px solid #f0f0f0;
+    /* Space around the thumb */
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: #555;
+    /* Thumb color on hover */
+}
+
 body {
     background-color: var(--background-color);
     color: var(--text-color);

app/styles/header.css

@@ -75,7 +75,7 @@ header{
 
 .login-button-container{
     position: absolute;
-    top: 0.2vh;
+    top: 0.1vh;
     right: 1vw;
     height: 100%;
     display: flex;
@@ -83,11 +83,10 @@ header{
 }
 
 .header-login-button{
+    height: 100%;
+    width:4vw;
     font-size: var(--font-size);
-    /* position: absolute;
+    padding: 3px;
-    top: 1.5vh;
-    right: 1vw; */
-    padding: 10px 20px;
     background-color: var(--input-button-color);
     color: var(--text-color);
     border: none;
@@ -95,6 +94,9 @@ header{
     cursor: pointer;
     transition: background-color 0.3s;
     font-family: var(--font-family);
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .header-login-button:hover {

app/styles/input.css

@@ -6,7 +6,6 @@
     padding-left: 0.5em;
     padding-right: 0;
     margin: 0 10px;
-    margin-bottom: 10px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -17,6 +16,7 @@
     bottom: 3dvh;
     right: 0.25vw;
     box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.5);
+    z-index: 600;
 }
 
 .input input {

app/styles/models.css

@@ -6,7 +6,6 @@
     grid-column: 1/2;
     grid-row: 1/2;
     padding-bottom: 1px;
-    overflow: scroll;
     overflow: hidden;
     background-color: var(--history-background-color);
     padding: 1em;
@@ -19,6 +18,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    overflow: hidden;
     overflow-y: scroll;
 }
 
@@ -53,7 +53,7 @@
     justify-content: center;
     color: var(--text-color); /* Use variable for text color */
     border-radius: 5%;
-    overflow: scroll;
+    overflow: hidden;
     position: relative;
     height: 18vh;
     width: 18vh;

app/styles/output.css

@@ -6,14 +6,14 @@
     background-color: var(--output-background-color);
     margin: 1em;
     margin-bottom: 0;
-    padding-bottom: 14dvh;
+    padding-bottom: 13dvh;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     font-size: 1em;
     overflow-y: auto;
     width: calc(100% - 2em); /* Corrected calculation for width */
-    height: 86dvh;
+    height: 85dvh;
     position: relative;
 }
 
@@ -22,7 +22,7 @@
     flex-direction: column;
     padding-left: 10px;
     overflow-y: auto;
-    height: 80vh;
+    height: 75dvh;
     background-color: var(--output-background-color);
     border-radius: 10px;
     scroll-behavior: smooth;
@@ -69,16 +69,11 @@
     background-color: var(--button-hover-background-color);
 }
 
-.button-container img {
-    height: 20px;
-    width: 20px;
-}
-
 .tooltip {
     position: relative;
     display: inline-block;
-    margin: 5px;
     cursor: pointer;
+    z-index: 900;
 }
 
 .tooltip .tooltiptext {
@@ -92,7 +87,7 @@
 
     /* Position the tooltip */
     position: absolute;
-    top: 125%;
+    top: 100%;
     /* Adjusts tooltip to be below the button */
     left: 50%;
     transform: translateX(-50%);

main.js

@@ -2,8 +2,8 @@ const { app, BrowserWindow } = require('electron');
 
 function createWindow() {
     const win = new BrowserWindow({
-        width: 800,
+        width: 1280,
-        height: 600,
+        height: 720,
         webPreferences: {
             nodeIntegration: true,
         },