diff --git a/app/components/ConversationFrontend.tsx b/app/components/ConversationFrontend.tsx index b294b01..9aa2c52 100644 --- a/app/components/ConversationFrontend.tsx +++ b/app/components/ConversationFrontend.tsx @@ -75,33 +75,32 @@ const ConversationFrontend = React.forwardRef
+ stop + Stop
Resend
Edit
{isClicked?"Copied!": "Copy" }
- + ); } diff --git a/app/components/Documentation.tsx b/app/components/Documentation.tsx index 81df5e9..01b4b34 100644 --- a/app/components/Documentation.tsx +++ b/app/components/Documentation.tsx @@ -31,10 +31,10 @@ const Documentation = () => {

Draw.io:

- Live Message Skizze +

Insert your Draw.io diagrams here.

Inspiration:

-

We got our inspiration from Huggingchat.

+

Describe your inspirations here.

First prototype:

diff --git a/app/components/InputFrontend.tsx b/app/components/InputFrontend.tsx index 1fbd1b8..7ae6fd7 100644 --- a/app/components/InputFrontend.tsx +++ b/app/components/InputFrontend.tsx @@ -49,10 +49,10 @@ const InputFrontend = React.forwardRef( onKeyDown={handleKeyDown} /> ); diff --git a/app/components/Login.tsx b/app/components/Login.tsx index 69b57d8..a7a0030 100644 --- a/app/components/Login.tsx +++ b/app/components/Login.tsx @@ -86,7 +86,7 @@ const Login: React.FC = () => {

{/* Login or Settings Button */} {/* Conditional rendering of the Login Popup */} diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx index 7bce4cc..b36af89 100644 --- a/app/components/settings/Settings.tsx +++ b/app/components/settings/Settings.tsx @@ -299,7 +299,9 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( const handleLogout = () => { setIsLoggedIn(false); - localStorage.clear(); + localStorage.removeItem('accountName'); + localStorage.removeItem('accountEmail'); + localStorage.removeItem('accountPassword'); alert('Successfully logged out!'); window.location.reload(); }; @@ -386,7 +388,6 @@ 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 diff --git a/app/styles/Settings.css b/app/styles/Settings.css index 981a794..b0aae8c 100644 --- a/app/styles/Settings.css +++ b/app/styles/Settings.css @@ -13,7 +13,7 @@ .settings-main h2 { margin-bottom: 1em; -} +} .settings-main p { padding-bottom: 7px; @@ -22,12 +22,10 @@ /* 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 */ @@ -41,30 +39,23 @@ height: 90%; max-height: 600px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); - overflow: hidden; - /* Prevents overflow of the content */ - position: relative; - /* Needed for absolute positioning of close button */ + overflow: hidden; /* 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 */ - height: 100%; - /* Ensures sidebar takes full height */ + grid-column: 1; /* Places sidebar in the first grid column */ + height: 100%; /* Ensures sidebar takes full height */ } /* Sidebar item styles */ @@ -73,10 +64,8 @@ padding: 0; margin: 0; display: flex; - flex-direction: column; - /* Make the ul a column */ - flex-grow: 1; - /* Allows the list to take available space */ + flex-direction: column; /* Make the ul a column */ + flex-grow: 1; /* Allows the list to take available space */ } .sidebar li { @@ -88,88 +77,66 @@ } .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 */ - overflow-y: auto; - /* Scroll if content exceeds height */ + border-radius: 0 10px 10px 0; /* 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 */ - color: white; - /* Use white for text color */ + background: var(--close-button-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 */ - top: 15px; - /* Distance from the top */ - right: 40px; - /* Distance from the right */ + position: absolute; /* Position the button absolutely */ + 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 */ - color: white; - /* Use white for text color */ + background: var(--apply-button-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 */ - top: 50px; - /* Distance from the top */ - right: 40px; - /* Distance from the right */ + position: absolute; /* Position the button absolutely */ + 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 */ - padding-bottom: 10px; - /* Adds internal spacing */ - border-bottom: 1px solid var(--input-border-color); - /* Optional, creates a separator between options */ + margin-bottom: 20px; /* Adds space between each setting option */ + 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 */ - border-bottom: none; - /* Removes separator from last option */ + margin-bottom: 0; /* Removes bottom margin from last option */ + border-bottom: none; /* Removes separator from last option */ } .settings-option input[type="text"], @@ -184,9 +151,7 @@ padding: 10px; border-radius: 5px; width: 100%; - height: 40px; - margin-bottom: 10px; - /* Adds spacing between inputs */ + margin-bottom: 10px; /* Adds spacing between inputs */ } /* Optional additional spacing for labels */ @@ -196,14 +161,14 @@ font-weight: bold; } -.export-button { +.export-button{ background-color: var(--button-hover-background-color); padding: 10px; margin: 10px; border-radius: 10px; } -.import-file { +.import-file{ background-color: var(--button-hover-background-color); padding: 10px; margin: 10px; @@ -214,7 +179,7 @@ justify-content: space-between; margin-top: 10px; } - + .slider-option { cursor: pointer; padding: 10px; @@ -222,22 +187,19 @@ border-radius: 5px; transition: background-color 0.3s; } - + .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 */ - pointer-events: none; - /* Prevent clicks */ -} \ No newline at end of file + opacity: 0.5; /* Make the option appear greyed out */ + pointer-events: none; /* Prevent clicks */ +} + \ No newline at end of file diff --git a/app/styles/global.css b/app/styles/global.css index e3d771c..0acb073 100644 --- a/app/styles/global.css +++ b/app/styles/global.css @@ -4,31 +4,6 @@ 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); diff --git a/app/styles/header.css b/app/styles/header.css index af4c1c0..a540ad3 100644 --- a/app/styles/header.css +++ b/app/styles/header.css @@ -75,7 +75,7 @@ header{ .login-button-container{ position: absolute; - top: 0.1vh; + top: 0.2vh; right: 1vw; height: 100%; display: flex; @@ -83,10 +83,11 @@ header{ } .header-login-button{ - height: 100%; - width:4vw; font-size: var(--font-size); - padding: 3px; + /* position: absolute; + top: 1.5vh; + right: 1vw; */ + padding: 10px 20px; background-color: var(--input-button-color); color: var(--text-color); border: none; @@ -94,9 +95,6 @@ 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 { diff --git a/app/styles/input.css b/app/styles/input.css index dad1d56..3233b14 100644 --- a/app/styles/input.css +++ b/app/styles/input.css @@ -6,6 +6,7 @@ padding-left: 0.5em; padding-right: 0; margin: 0 10px; + margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; @@ -16,7 +17,6 @@ bottom: 3dvh; right: 0.25vw; box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.5); - z-index: 600; } .input input { diff --git a/app/styles/models.css b/app/styles/models.css index 258f71a..ccd49c6 100644 --- a/app/styles/models.css +++ b/app/styles/models.css @@ -6,6 +6,7 @@ grid-column: 1/2; grid-row: 1/2; padding-bottom: 1px; + overflow: scroll; overflow: hidden; background-color: var(--history-background-color); padding: 1em; @@ -18,7 +19,6 @@ 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: hidden; + overflow: scroll; position: relative; height: 18vh; width: 18vh; diff --git a/app/styles/output.css b/app/styles/output.css index 2a4fe50..93fcbf2 100644 --- a/app/styles/output.css +++ b/app/styles/output.css @@ -6,14 +6,14 @@ background-color: var(--output-background-color); margin: 1em; margin-bottom: 0; - padding-bottom: 13dvh; + padding-bottom: 14dvh; display: flex; flex-direction: column; justify-content: flex-start; font-size: 1em; overflow-y: auto; width: calc(100% - 2em); /* Corrected calculation for width */ - height: 85dvh; + height: 86dvh; position: relative; } @@ -22,7 +22,7 @@ flex-direction: column; padding-left: 10px; overflow-y: auto; - height: 75dvh; + height: 80vh; background-color: var(--output-background-color); border-radius: 10px; scroll-behavior: smooth; @@ -69,11 +69,16 @@ 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 { @@ -87,7 +92,7 @@ /* Position the tooltip */ position: absolute; - top: 100%; + top: 125%; /* Adjusts tooltip to be below the button */ left: 50%; transform: translateX(-50%); diff --git a/main.js b/main.js index 91e416f..f221306 100644 --- a/main.js +++ b/main.js @@ -2,12 +2,12 @@ const { app, BrowserWindow } = require('electron'); function createWindow() { const win = new BrowserWindow({ - width: 1280, - height: 720, + width: 800, + height: 600, webPreferences: { nodeIntegration: true, }, - autoHideMenuBar: true, + autoHideMenuBar: true, }); win.loadURL('http://localhost:3000'); diff --git a/public/img/Live-Message-Idee.jpg b/public/img/Live-Message-Idee.jpg deleted file mode 100644 index 061518e..0000000 Binary files a/public/img/Live-Message-Idee.jpg and /dev/null differ