From b839b04df2c7b4436fa20f23d9f08baba386be9b Mon Sep 17 00:00:00 2001 From: YasinOnm08 Date: Wed, 2 Oct 2024 09:01:50 +0200 Subject: [PATCH 1/8] buttons to svg and dynamic fill color for each --- app/components/ConversationFrontend.tsx | 9 ++++----- app/components/Documentation.tsx | 4 ++-- app/styles/output.css | 6 ------ public/img/Live-Message-Idee.jpg | Bin 0 -> 33366 bytes 4 files changed, 6 insertions(+), 13 deletions(-) create mode 100644 public/img/Live-Message-Idee.jpg diff --git a/app/components/ConversationFrontend.tsx b/app/components/ConversationFrontend.tsx index 9aa2c52..3c65bd4 100644 --- a/app/components/ConversationFrontend.tsx +++ b/app/components/ConversationFrontend.tsx @@ -75,25 +75,24 @@ 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/styles/output.css b/app/styles/output.css index 93fcbf2..ebaa2e3 100644 --- a/app/styles/output.css +++ b/app/styles/output.css @@ -69,15 +69,9 @@ background-color: var(--button-hover-background-color); } -.button-container img { - height: 20px; - width: 20px; -} - .tooltip { position: relative; display: inline-block; - margin: 5px; cursor: pointer; } diff --git a/public/img/Live-Message-Idee.jpg b/public/img/Live-Message-Idee.jpg new file mode 100644 index 0000000000000000000000000000000000000000..061518e25dffcebbc4fd8d7f692901658d1316aa GIT binary patch literal 33366 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

jZ>xcND|HpF2$?<%B=8vHKy7t=xM6()h95YB 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 G)&BrOWtlzz literal 0 HcmV?d00001 From e8aef99512ec5a81f08c6db322061662adeddc23 Mon Sep 17 00:00:00 2001 From: Patrick_Pluto Date: Wed, 2 Oct 2024 09:18:49 +0200 Subject: [PATCH 2/8] refactored --- app/components/settings/Settings.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx index af71c6f..38e7862 100644 --- a/app/components/settings/Settings.tsx +++ b/app/components/settings/Settings.tsx @@ -278,9 +278,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(); }; @@ -367,6 +365,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 From 70779db5bf9c410a2a47e579d022ae4e17c4ad76 Mon Sep 17 00:00:00 2001 From: YasinOnm08 Date: Wed, 2 Oct 2024 09:23:29 +0200 Subject: [PATCH 3/8] svg icons for everything --- app/components/InputFrontend.tsx | 4 ++-- app/components/Login.tsx | 2 +- app/styles/header.css | 12 +++++++----- 3 files changed, 10 insertions(+), 8 deletions(-) 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 e2e8c32..b56d064 100644 --- a/app/components/Login.tsx +++ b/app/components/Login.tsx @@ -81,7 +81,7 @@ const Login: React.FC = () => {
{/* Login or Settings Button */} {/* Conditional rendering of the Login Popup */} 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 { From 8d5cf620ff3fcb6b1f4af2bc01e8ccbee18a8696 Mon Sep 17 00:00:00 2001 From: YasinOnm08 Date: Wed, 2 Oct 2024 09:37:58 +0200 Subject: [PATCH 4/8] svg icons for even more everything --- app/components/ConversationFrontend.tsx | 6 ++++-- app/styles/output.css | 7 ++++--- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/app/components/ConversationFrontend.tsx b/app/components/ConversationFrontend.tsx index 3c65bd4..832104b 100644 --- a/app/components/ConversationFrontend.tsx +++ b/app/components/ConversationFrontend.tsx @@ -53,7 +53,7 @@ const ConversationFrontend = React.forwardRef if (isScrolling) { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); } - }, [messages, isScrolling]); + }, [messages]); return (
@@ -99,7 +99,9 @@ const ConversationFrontend = React.forwardRef
- +
); } diff --git a/app/styles/output.css b/app/styles/output.css index ebaa2e3..2bd949d 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: 15dvh; 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; @@ -73,6 +73,7 @@ position: relative; display: inline-block; cursor: pointer; + z-index: 999; } .tooltip .tooltiptext { From 7dc154b6bf1b19cf357dd5a0c9fb78a74026a535 Mon Sep 17 00:00:00 2001 From: Patrick_Pluto Date: Wed, 2 Oct 2024 09:43:22 +0200 Subject: [PATCH 5/8] electron changes --- main.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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'); From caa02ee81e5b6496e05abcfce89f6f0e7aff82d0 Mon Sep 17 00:00:00 2001 From: YasinOnm08 Date: Wed, 2 Oct 2024 09:55:09 +0200 Subject: [PATCH 6/8] icons clipping fix --- app/styles/output.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/styles/output.css b/app/styles/output.css index 2bd949d..20318fa 100644 --- a/app/styles/output.css +++ b/app/styles/output.css @@ -73,7 +73,7 @@ position: relative; display: inline-block; cursor: pointer; - z-index: 999; + z-index: 600; } .tooltip .tooltiptext { From b9e62cebfc4cf2753423128a53b039b6b49a0621 Mon Sep 17 00:00:00 2001 From: Patrick_Pluto Date: Wed, 2 Oct 2024 09:59:49 +0200 Subject: [PATCH 7/8] fixed color picker thing --- app/styles/Settings.css | 130 ++++++++++++++++++++++++++-------------- 1 file changed, 84 insertions(+), 46 deletions(-) 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 From 6d71e17e61c4e944da73a531a252e135eb69364a Mon Sep 17 00:00:00 2001 From: YasinOnm08 Date: Wed, 2 Oct 2024 10:24:30 +0200 Subject: [PATCH 8/8] css multi browser fix trial 1 --- app/components/ConversationFrontend.tsx | 2 +- app/styles/global.css | 25 +++++++++++++++++++++++++ app/styles/input.css | 2 +- app/styles/models.css | 4 ++-- app/styles/output.css | 6 +++--- 5 files changed, 32 insertions(+), 7 deletions(-) diff --git a/app/components/ConversationFrontend.tsx b/app/components/ConversationFrontend.tsx index 832104b..b294b01 100644 --- a/app/components/ConversationFrontend.tsx +++ b/app/components/ConversationFrontend.tsx @@ -53,7 +53,7 @@ const ConversationFrontend = React.forwardRef if (isScrolling) { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); } - }, [messages]); + }, [messages, isScrolling]); return (
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/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 20318fa..2a4fe50 100644 --- a/app/styles/output.css +++ b/app/styles/output.css @@ -6,7 +6,7 @@ background-color: var(--output-background-color); margin: 1em; margin-bottom: 0; - padding-bottom: 15dvh; + padding-bottom: 13dvh; display: flex; flex-direction: column; justify-content: flex-start; @@ -73,7 +73,7 @@ position: relative; display: inline-block; cursor: pointer; - z-index: 600; + z-index: 900; } .tooltip .tooltiptext { @@ -87,7 +87,7 @@ /* Position the tooltip */ position: absolute; - top: 125%; + top: 100%; /* Adjusts tooltip to be below the button */ left: 50%; transform: translateX(-50%);