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

Draw.io:

-

Insert your Draw.io diagrams here.

+ Live Message Skizze

Inspiration:

-

Describe your inspirations here.

+

We got our inspiration from Huggingchat.

First prototype:

diff --git a/app/components/InputFrontend.tsx b/app/components/InputFrontend.tsx index 7ae6fd7..1fbd1b8 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 a7a0030..69b57d8 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 b36af89..7bce4cc 100644 --- a/app/components/settings/Settings.tsx +++ b/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.removeItem('accountEmail'); - localStorage.removeItem('accountPassword'); + localStorage.clear(); 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 diff --git a/app/styles/Settings.css b/app/styles/Settings.css index b0aae8c..981a794 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,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 */ - 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 */ @@ -64,8 +73,10 @@ 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 { @@ -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 */ - 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"], @@ -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 */ @@ -161,14 +196,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; @@ -179,7 +214,7 @@ justify-content: space-between; margin-top: 10px; } - + .slider-option { cursor: pointer; padding: 10px; @@ -187,19 +222,22 @@ 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 0acb073..e3d771c 100644 --- a/app/styles/global.css +++ b/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); diff --git a/app/styles/header.css b/app/styles/header.css index a540ad3..af4c1c0 100644 --- a/app/styles/header.css +++ b/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; - top: 1.5vh; - right: 1vw; */ - padding: 10px 20px; + padding: 3px; 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 { diff --git a/app/styles/input.css b/app/styles/input.css index 3233b14..dad1d56 100644 --- a/app/styles/input.css +++ b/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 { diff --git a/app/styles/models.css b/app/styles/models.css index ccd49c6..258f71a 100644 --- a/app/styles/models.css +++ b/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; diff --git a/app/styles/output.css b/app/styles/output.css index 93fcbf2..2a4fe50 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: 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%); diff --git a/main.js b/main.js index f221306..91e416f 100644 --- a/main.js +++ b/main.js @@ -2,12 +2,12 @@ const { app, BrowserWindow } = require('electron'); function createWindow() { const win = new BrowserWindow({ - width: 800, - height: 600, + width: 1280, + height: 720, 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 new file mode 100644 index 0000000..061518e Binary files /dev/null and b/public/img/Live-Message-Idee.jpg differ