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