@@ -714,7 +721,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
const handleExport = () => {
const settingsData = exportSettings();
-
// Create a blob and download the exported settings
const blob = new Blob([settingsData], { type: 'application/json' });
const url = URL.createObjectURL(blob);
@@ -732,6 +738,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
+ {/* Sidebar for desktop */}
setActiveSection('general')}>General
@@ -743,18 +750,32 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
setActiveSection('im/export')}>Import/Export
+
+ {/* Dropdown for selections in responsive mode */}
+
+
Select a Setting
+
setActiveSection(e.target.value)} value={activeSection}>
+ General
+ Privacy
+ Theme
+ FOSS
+ Account
+ API Keys
+ Import/Export
+
+
Settings for {accountName}
{renderSettingsContent()}
Close
{
getAllLocalStorageItems();
closeSettings();
- await changeSettings(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
- window.location.reload();
+ sendToDatabase();
}}>
Apply
+
@@ -762,4 +783,5 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
);
};
+
export default Settings;
\ No newline at end of file
diff --git a/app/components/settings/settingUtils.ts b/app/components/settings/settingUtils.ts
index 885ad98..a3b3e61 100644
--- a/app/components/settings/settingUtils.ts
+++ b/app/components/settings/settingUtils.ts
@@ -1,11 +1,12 @@
// settingsManager.ts
+import { changeSettings, getSettings } from "@/app/backend/database";
// Method to export localStorage to a JSON object
export function exportSettings(): string {
const settings: { [key: string]: string } = {};
// Loop through all keys in localStorage and add them to the settings object
- if (typeof localStorage !== 'undefined') {
+ if (typeof localStorage !== 'undefined') {
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
if (key) {
@@ -26,7 +27,7 @@ export function importSettings(jsonData: string): void {
const parsedSettings = JSON.parse(jsonData);
// Loop through parsed settings and save them in localStorage
- if (typeof localStorage !== 'undefined') {
+ if (typeof localStorage !== 'undefined') {
Object.keys(parsedSettings).forEach((key) => {
localStorage.setItem(key, parsedSettings[key]);
});
@@ -37,3 +38,27 @@ export function importSettings(jsonData: string): void {
console.error("Invalid JSON data:", error);
}
}
+
+export const sendToDatabase = async () => {
+ let useName = localStorage.getItem("accountName")
+ let usePassword = localStorage.getItem("accountPassword")
+ if (useName && usePassword) {
+ let result = await changeSettings(useName, usePassword, JSON.parse(exportSettings()))
+ if (result == true) {
+ alert('Data has been transferred')
+ window.location.reload();
+ }
+ }
+ window.location.reload();
+};
+
+export const importDatabase = async (useName: string, usePassword: string) => {
+ const databaseSettings = await getSettings(useName, usePassword);
+
+ // Ensure user settings exist before flattening and storing
+ if (typeof databaseSettings == 'object' && databaseSettings) {
+ importSettings(JSON.stringify(databaseSettings, null, 2)); // Pass only the current user's settings
+ } else {
+ console.error('Database settings are not in the expected format.');
+ }
+}
diff --git a/app/styles/Login.css b/app/styles/Login.css
index 610ce75..b8fe3f4 100644
--- a/app/styles/Login.css
+++ b/app/styles/Login.css
@@ -1,6 +1,4 @@
-
-/* Overlay for popup - full screen and centered */
-.popup-overlay {
+.popup-overlay{
position: fixed; /* Fixed to cover the entire viewport */
top: 0; /* Ensure it starts from the top */
left: 0;
@@ -12,9 +10,7 @@
align-items: center;
z-index: 10000; /* Higher than the header to cover the screen */
}
-
-/* Popup content box */
-.popup-content {
+.popup-content{
background-color: var(--popup-background-color); /* Use variable for background color */
color: var(--popup-text-color); /* Use variable for text color */
padding: 30px;
@@ -24,9 +20,7 @@
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
position: relative; /* For positioning the close button */
}
-
-/* Input styles */
-.popup-content input {
+.popup-content input{
width: 100%;
padding: 10px;
margin: 10px 0;
@@ -35,14 +29,11 @@
font-size: 16px;
transition: border-color 0.3s;
}
-
-.popup-content input:focus {
+.popup-content input:focus{
border-color: var(--input-button-color);
outline: none; /* Remove default outline */
}
-
-/* Close button styles */
-.close-popup {
+.close-popup{
background: var(--close-button-color); /* Use variable for close button color */
color: white; /* Use white for text color */
border: none;
@@ -54,13 +45,10 @@
right: 10px; /* Distance from the right */
transition: background 0.3s;
}
-
-.close-popup:hover {
+.close-popup:hover{
background: darkred; /* Optional hover effect */
}
-
-/* Log In button styles */
-.log-into-account {
+.log-into-account{
background: green; /* Use variable for login button color */
color: white;
border: none;
@@ -69,13 +57,10 @@
cursor: pointer;
margin-top: 20px;
}
-
-/* Footer section for popups */
-.popup-footer {
+.popup-footer{
margin-top: 15px;
}
-
-.popup-footer button {
+.popup-footer button{
margin-right: 10px;
padding: 8px 15px;
background-color: var(--input-button-color);
@@ -84,22 +69,17 @@
border-radius: 5px;
transition: background-color 0.3s;
}
-
-.popup-footer button:hover {
+.popup-footer button:hover{
background-color: var(--input-button-hover-color);
}
-
-.popup-footer a {
+.popup-footer a{
color: var(--user-message-color);
text-decoration: none;
}
-
-.popup-footer a:hover {
+.popup-footer a:hover{
text-decoration: underline;
}
-
-/* Paragraph styles within popup */
-.popup-content p {
+.popup-content p{
color: var(--popup-text-color); /* Use variable for paragraph text color */
margin: 10px;
}
diff --git a/app/styles/Settings.css b/app/styles/Settings.css
index 981a794..56201f5 100644
--- a/app/styles/Settings.css
+++ b/app/styles/Settings.css
@@ -10,15 +10,12 @@
justify-content: center;
align-items: center;
}
-
.settings-main h2 {
margin-bottom: 1em;
}
-
.settings-main p {
padding-bottom: 7px;
}
-
/* Main container for the settings */
.settings-container {
display: grid;
@@ -29,7 +26,6 @@
height: 100%;
/* Ensure it takes full height */
}
-
/* Settings content */
.settings-content {
background: var(--history-background-color);
@@ -49,7 +45,6 @@
flex-direction: column;
/* Flexbox for vertical stacking */
}
-
/* Sidebar styles */
.sidebar {
background: var(--settings-background-color);
@@ -66,7 +61,6 @@
height: 100%;
/* Ensures sidebar takes full height */
}
-
/* Sidebar item styles */
.sidebar ul {
list-style-type: none;
@@ -78,7 +72,6 @@
flex-grow: 1;
/* Allows the list to take available space */
}
-
.sidebar li {
margin: 10px 0;
cursor: pointer;
@@ -86,17 +79,14 @@
border-radius: 5px;
transition: background 0.3s;
}
-
.sidebar li:hover {
background: var(--input-button-hover-color);
/* Highlight on hover */
}
-
.sidebar li.active {
background: var(--button-hover-background-color);
/* Active section highlight */
}
-
/* Main settings area */
.settings-main {
grid-column: 2;
@@ -110,7 +100,6 @@
flex-direction: column;
/* Stack content vertically */
}
-
/* Close button positioning */
.close-popup {
background: var(--close-button-color);
@@ -129,7 +118,6 @@
/* Distance from the right */
transition: background 0.3s;
}
-
/* Close button positioning */
.apply {
background: var(--apply-button-color);
@@ -148,13 +136,10 @@
/* Distance from the right */
transition: background 0.3s;
}
-
.close-popup:hover {
background: darkred;
/* Optional hover effect */
}
-
-
/* Additional styles for inputs and options */
.settings-option {
margin-bottom: 20px;
@@ -164,14 +149,12 @@
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 */
}
-
.settings-option input[type="text"],
.settings-option input[type="email"],
.settings-option input[type="password"],
@@ -188,33 +171,28 @@
margin-bottom: 10px;
/* Adds spacing between inputs */
}
-
/* Optional additional spacing for labels */
.settings-option label {
margin-bottom: 5px;
display: block;
font-weight: bold;
}
-
.export-button {
background-color: var(--button-hover-background-color);
padding: 10px;
margin: 10px;
border-radius: 10px;
}
-
.import-file {
background-color: var(--button-hover-background-color);
padding: 10px;
margin: 10px;
}
-
.slider {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
-
.slider-option {
cursor: pointer;
padding: 10px;
@@ -222,22 +200,22 @@
border-radius: 5px;
transition: background-color 0.3s;
}
-
.slider-option.active {
background-color: #007bff;
/* Change to your active color */
color: white;
border-color: #007bff;
}
-
input[type="radio"] {
display: none;
/* Hide the default radio buttons */
}
-
.slider-option.disabled {
opacity: 0.5;
/* Make the option appear greyed out */
pointer-events: none;
/* Prevent clicks */
+}
+.dropdown{
+ display: none;
}
\ No newline at end of file
diff --git a/app/styles/container.css b/app/styles/container.css
index 40c97cc..6ae111b 100644
--- a/app/styles/container.css
+++ b/app/styles/container.css
@@ -5,8 +5,7 @@
height: 90dvh;
padding-top: 1dvh;
}
-
-.left-panel {
+.left-panel{
width: 25vw; /* Adjust as needed */
transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */
background-color: var(--left-panel-background-color); /* Use variable for background color */
@@ -14,23 +13,17 @@
margin-left: 0;
padding-right: 1em;
}
-
-.left-panel.hidden {
+.left-panel.hidden{
opacity: 0; /* Fade out when hidden */
width: 0; /* Collapse width to 0 */
visibility: hidden; /* Hide visibility while collapsing */
-
}
-
-.conversation-container {
+.conversation-container{
flex: 1;
transition: margin-left 0.3s ease; /* Smooth margin adjustment */
background-color: var(--conversation-background-color); /* Use variable for background color */
border-radius: 1em 0 0 0;
}
-
-
-
-.conversation-container.collapsed {
+.conversation-container.collapsed{
margin-left: 1vw; /* Space for the left panel */
}
diff --git a/app/styles/credit.css b/app/styles/credit.css
index 1d6b206..486e0cc 100644
--- a/app/styles/credit.css
+++ b/app/styles/credit.css
@@ -1,52 +1,45 @@
/* Styling for the credits container */
-.credits-container {
- padding: 2rem;
- }
-
- .credits-section {
- max-width: 900px;
- height: 80dvh;
- margin: auto;
- background: var(--doc-background-color); /* Use variable for background */
- padding: 2rem;
- border-radius: 8px;
- box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
- overflow-y: scroll;
- }
-
- .title {
- font-size: calc(var(--font-size)*2);
- color: var(--doc-title-color); /* Use variable for title color */
- margin-bottom: 1.5rem;
- }
-
- .subtitle {
- font-size: calc(var(--font-size)*1.5);
- color: var(--doc-subtitle-color); /* Use variable for subtitle color */
- margin-top: 2rem;
- margin-bottom: 1rem;
- }
-
- .paragraph {
- font-size: calc(var(--font-size));
- color: var(--doc-paragraph-color); /* Use variable for paragraph color */
- margin-bottom: 1.5rem;
- line-height: 1.6;
- }
-
- /* Styling for the credit buttons */
- .credit-btn {
- display: inline-block;
- padding: 10px 15px;
- margin: 10px 5px;
- background-color: var(--button-background-color); /* Button background */
- color: var(--button-text-color); /* Button text */
- text-decoration: none;
- border-radius: 5px;
- transition: background-color 0.3s ease;
- }
-
- .credit-btn:hover {
- background-color: var(--button-hover-background-color); /* Button hover */
- }
-
\ No newline at end of file
+.credits-container{
+ padding: 2rem;
+}
+.credits-section{
+ max-width: 900px;
+ height: 80dvh;
+ margin: auto;
+ background: var(--doc-background-color); /* Use variable for background */
+ padding: 2rem;
+ border-radius: 8px;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+ overflow-y: scroll;
+}
+.title{
+ font-size: calc(var(--font-size)*2);
+ color: var(--doc-title-color); /* Use variable for title color */
+ margin-bottom: 1.5rem;
+}
+.subtitle{
+ font-size: calc(var(--font-size)*1.5);
+ color: var(--doc-subtitle-color); /* Use variable for subtitle color */
+ margin-top: 2rem;
+ margin-bottom: 1rem;
+}
+.paragraph{
+ font-size: calc(var(--font-size));
+ color: var(--doc-paragraph-color); /* Use variable for paragraph color */
+ margin-bottom: 1.5rem;
+ line-height: 1.6;
+}
+/* Styling for the credit buttons */
+.credit-btn{
+ display: inline-block;
+ padding: 10px 15px;
+ margin: 10px 5px;
+ background-color: var(--button-background-color); /* Button background */
+ color: var(--button-text-color); /* Button text */
+ text-decoration: none;
+ border-radius: 5px;
+ transition: background-color 0.3s ease;
+}
+.credit-btn:hover{
+ background-color: var(--button-hover-background-color); /* Button hover */
+}
diff --git a/app/styles/doc.css b/app/styles/doc.css
index 5b2988d..43ce0ed 100644
--- a/app/styles/doc.css
+++ b/app/styles/doc.css
@@ -1,11 +1,9 @@
/* styles.css */
-
/* Styling for the documentation container */
-.documentation-container {
+.documentation-container{
padding: 2rem;
}
-
-.documentation-section {
+.documentation-section{
max-width: 900px;
height: 80dvh;
margin: auto;
@@ -15,28 +13,24 @@
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
overflow-y: scroll;
}
-
-.title {
+.title{
font-size: calc(var(--font-size)*2);
color: var(--doc-title-color); /* Use variable for title color */
margin-bottom: 1.5rem;
}
-
-.subtitle {
+.subtitle{
font-size: calc(var(--font-size)*1.5);
color: var(--doc-subtitle-color); /* Use variable for subtitle color */
margin-top: 2rem;
margin-bottom: 1rem;
}
-
-.subsection-title {
+.subsection-title{
font-size: calc(var(--font-size)*1.25);
color: var(--doc-subsection-title-color); /* Use variable for subsection title color */
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
-
-.paragraph {
+.paragraph{
font-size: calc(var(--font-size));
color: var(--doc-paragraph-color); /* Use variable for paragraph color */
margin-bottom: 1.5rem;
diff --git a/app/styles/faq.css b/app/styles/faq.css
index 1484722..416b2ab 100644
--- a/app/styles/faq.css
+++ b/app/styles/faq.css
@@ -1,13 +1,12 @@
/* Make sure the parent container of #faq takes up the full viewport height */
-.faq-container {
+.faq-container{
display: flex;
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
height: 100vh; /* Full viewport height */
padding: 0 10px; /* Optional padding to ensure spacing on small screens */
}
-
-#faq {
+#faq{
max-width: 800px;
width: 90%;
padding: 20px;
@@ -18,34 +17,29 @@
margin: 2rem auto;
height: 80vh;
}
-
-#faq h2 {
+#faq h2{
text-align: center;
color: var(--faq-heading-color); /* Use variable for heading color */
font-size: 2em;
margin-bottom: 20px;
}
-
-.faq-item {
+.faq-item{
margin-bottom: 20px;
padding: 10px;
border-radius: 5px;
background-color: var(--faq-item-background-color); /* Use variable for item background */
transition: background-color 0.3s ease-in-out;
}
-
-.faq-item h3 {
+.faq-item h3{
color: var(--faq-item-heading-color); /* Use variable for item heading color */
margin-bottom: 10px;
font-size: 1.5em;
}
-
-.faq-item p {
+.faq-item p{
color: var(--faq-item-text-color); /* Use variable for item text color */
font-size: 1.1em;
line-height: 1.5;
}
-
-.faq-item:hover {
+.faq-item:hover{
background-color: var(--faq-item-hover-background-color); /* Use variable for hover background */
}
diff --git a/app/styles/fonts.css b/app/styles/fonts.css
index 33ef933..555df7f 100644
--- a/app/styles/fonts.css
+++ b/app/styles/fonts.css
@@ -1,69 +1,56 @@
-@font-face {
+@font-face{
font-family: 'Inconsolata';
src: url('/fonts/serious/Inconsolata/Inconsolata-VariableFont_wdth,wght.ttf') format('truetype');
}
-
-@font-face {
+@font-face{
font-family: 'Merriweather';
src: url('/fonts/serious/Merriweather/Merriweather-Regular.tff') format('truetype');
}
-
-@font-face {
+@font-face{
font-family: 'Noto Sans';
src: url('/fonts/serious/Noto_Sans/NotoSans-VariableFont_wdth\,wght.ttf') format('truetype');
}
-
-@font-face {
+@font-face{
font-family: 'Noto Serif';
src: url('/fonts/serious/Noto_Serif/NotoSerif-VariableFont_wdth\,wght.ttf') format('truetype');
}
-
-@font-face {
+@font-face{
font-family: 'Playfair Display';
src: url('/fonts/serious/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
}
-
-@font-face {
+@font-face{
font-family: 'Poppins';
src: url('/fonts/serious/Poppins/Poppins-Regular.ttf') format('truetype');
}
-
-@font-face {
+@font-face{
font-family: 'Roboto';
src: url('/fonts/serious/Roboto/Roboto-Regular.ttf') format('truetype');
}
-
-@font-face {
+@font-face{
font-family: 'Ubuntu';
src: url('/fonts/serious/Ubuntu/Ubuntu-Regular.ttf') format('truetype');
}
-
-@font-face {
+@font-face{
font-family: 'Bangers';
src: url('/fonts/comic-sans-but-better/Bangers/Bangers-Regular.ttf') format('truetype');
}
-
-@font-face {
+@font-face{
font-family: 'Caveat';
src: url('/fonts/comic-sans-but-better/Caveat/Caveat-VariableFont_wght.ttf') format('truetype');
}
-
-@font-face {
+@font-face{
font-family: 'Frederika the Great';
src: url('/fonts/comic-sans-but-better/Fredericka_the_Great/FrederickatheGreat-Regular.ttf') format('truetype');
}
-
-@font-face {
+@font-face{
font-family: 'Rock Salt';
src: url('/fonts/RockSalt.ttf') format('truetype');
}
-
-@font-face {
+@font-face{
font-family: 'Sofadi One';
src: url('/fonts/comic-sans-but-better/Sofadi_One/SofadiOne-Regular.ttf') format('truetype');
}
-
-@font-face {
+@font-face{
font-family: 'Zilla Slab Highlight';
src: url('/fonts/comic-sans-but-better/Zilla_Slab_Highlight/ZillaSlabHighlight-Regular.ttf') format('truetype');
}
diff --git a/app/styles/global.css b/app/styles/global.css
index 94ed660..3e0047e 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -1,79 +1,59 @@
-body {
+body{
height: 100dvh;
overflow: hidden;
position: relative;
}
-
/* Chrome, Edge, and Safari */
-::-webkit-scrollbar {
- width: 12px;
- /* Adjust width for horizontal and vertical scrollbars */
+::-webkit-scrollbar{
+ width: 12px; /* Adjust width for horizontal and vertical scrollbars */
}
-
-::-webkit-scrollbar-track {
- background: #f0f0f0;
- /* Background of the scrollbar track */
+::-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{
+ 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 */
+::-webkit-scrollbar-thumb:hover{
+ background-color: #555; /* Thumb color on hover */
}
-
-body {
+body{
background-color: var(--background-color);
color: var(--text-color);
font-family: var(--font-family);
font-size: var(--font-size);
}
-
-
-header {
+header{
background-color: var(--header-background-color);
color: var(--header-text-color);
}
-
-button {
+button{
background-color: var(--button-background-color);
color: var(--text-color);
border: 1px solid var(--input-border-color);
transition: background-color 0.3s ease;
}
-
-button:hover {
+button:hover{
background-color: var(--button-hover-background-color);
}
-
-input {
+input{
background-color: var(--input-background-color);
border: 1px solid var(--input-border-color);
color: var(--text-color);
}
-
-input:hover {
+input:hover{
border-color: var(--button-hover-background-color);
}
-
select{
background-color: var(--input-background-color);
}
-
h1, h2, h3, h4, p{
color: var(--text-color);
font-family: var(--font-family);
font-weight: 500;
}
-
p{
font-weight: 400;
- font-size: var(--font-size)
+ font-size: var(--font-size);
}
diff --git a/app/styles/header.css b/app/styles/header.css
index 29431c5..ac5b79f 100644
--- a/app/styles/header.css
+++ b/app/styles/header.css
@@ -1,4 +1,4 @@
-header {
+header{
position: relative;
padding: 0 20px;
width: 100%;
@@ -9,36 +9,32 @@ header {
font-size: 1em;
z-index: 999;
}
-
/* Hamburger button styles */
-.hamburger {
+.hamburger{
position: absolute;
left: 5vw;
display: flex; /* Always show hamburger button */
flex-direction: column;
cursor: pointer;
}
-
-.hamburger span {
+.hamburger span{
width: 25px;
height: 3px;
background-color: white;
margin: 4px;
transition: 0.3s;
}
-
-.hamburger.open span:nth-child(1) {
+.hamburger.open span:nth-child(1){
transform: rotate(45deg) translate(5px, 10px);
}
-.hamburger.open span:nth-child(2) {
+.hamburger.open span:nth-child(2){
opacity: 0;
}
-.hamburger.open span:nth-child(3) {
+.hamburger.open span:nth-child(3){
transform: rotate(-45deg) translate(5px, -10px);
}
-
/* Navigation links (hidden in header, shown in dropdown) */
-.nav-links {
+.nav-links{
display: none; /* Default hidden */
position: absolute;
top: 10vh; /* Adjust as needed */
@@ -51,13 +47,11 @@ header {
padding: 10px auto;
margin: auto;
}
-
-.nav-links.active {
+.nav-links.active{
display: flex; /* Show when active */
height: fit-content;
}
-
-.nav-btn {
+.nav-btn{
background-color: var(--input-button-color);
border: none;
font-size: 0.9em;
@@ -69,13 +63,11 @@ header {
text-align: center; /* Center text */
margin: 4px auto;
}
-
-.nav-btn:hover {
+.nav-btn:hover{
background-color: var(--input-button-hover-color);
}
-
/* Logo styles */
-.header-logo {
+.header-logo{
width: 250px;
height: 5vh;
background-image: url(../../public/img/logo.png);
@@ -85,9 +77,8 @@ header {
background-color: transparent;
border: none;
}
-
/* Login button styles */
-.login-button-container {
+.login-button-container{
position: absolute;
top: 0.1vh;
right: 1vw;
@@ -95,8 +86,7 @@ header {
display: flex;
align-items: center;
}
-
-.header-login-button {
+.header-login-button{
height: 100%;
width: max-content;
font-size: var(--font-size);
@@ -112,11 +102,9 @@ header {
justify-content: center;
align-items: center;
}
-
-.header-login-button:hover {
+.header-login-button:hover{
background-color: var(--input-button-hover-color);
}
-
.show-hide-btn{
display: flex;
align-items: center;
@@ -126,4 +114,4 @@ header {
left: 10vw;
cursor: pointer;
padding: 10px;
-}
\ No newline at end of file
+}
diff --git a/app/styles/history.css b/app/styles/history.css
index 14c8428..3580acf 100644
--- a/app/styles/history.css
+++ b/app/styles/history.css
@@ -1,4 +1,4 @@
-.history-background {
+.history-background{
grid-column: 1/2;
grid-row: 1/2;
height: 35dvh;
@@ -9,37 +9,67 @@
margin-right: 0;
border-radius: 1em;
}
-
-.history {
+.history{
height: 100%;
overflow-y: scroll;
padding-right: 10px;
}
-
-.history ul {
+.history ul{
list-style: none;
}
-
-.history ul li {
+.history ul li{
padding: 10px 0;
border-bottom: 1px solid var(--text-color);
width: 100%;
}
-
-.history ul li a {
+.history ul li a{
display: block;
text-decoration: none;
color: var(--text-color); /* Use variable for link text color */
width: 100%;
padding: 5px;
}
-
-.history ul li a:hover {
+.history ul li a:hover{
background-color: var(--input-button-hover-color);
}
-
.history-models{
position: relative;
height: 86dvh;
/* padding-bottom: 3dvh; */
}
+.input-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+}
+.chat-input {
+ border-color: var(--input-border-color);
+ color: var(--text-color);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ padding: 10px;
+ border-radius: 5px;
+ width: 80%;
+ height: 50px;
+ box-sizing: border-box;
+ line-height: 30px;
+}
+.save-btn, .newChat-btn {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ width: 20%;
+ height: 50px;
+ background-color: var(--input-button-color);
+ color: var(--text-color);
+ border: none;
+ font-size: 0.9em;
+ border-radius: 5px;
+ margin-left: 10px;
+}
+
+.newChat-btn{
+ margin-left: 0px;
+}
+
diff --git a/app/styles/input.css b/app/styles/input.css
index 7e7456b..0e550ec 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -1,15 +1,11 @@
-/* Input Section */
-.input {
+.input{
border-radius: 8px;
background-color: var(--input-background-color);
- padding: 1em;
- padding-left: 0.5em;
- padding-right: 0;
+ padding: 1em 0 1em 0.5em;
margin: 0 10px;
display: flex;
justify-content: space-between;
align-items: center;
- height: auto;
height: 10dvh;
position: absolute;
left: 0.25vw;
@@ -18,8 +14,7 @@
box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.5);
z-index: 600;
}
-
-.input input {
+.input input{
flex-grow: 1;
padding: 5px;
font-size: 1em;
@@ -32,20 +27,16 @@
transition: border-color 0.3s ease-in-out;
height: 7vh;
}
-
-.textInputField::placeholder {
+.textInputField::placeholder{
color: var(--text-color); /* Change to desired placeholder color */
opacity: 1; /* Ensures full opacity (optional) */
}
-
-.input input:focus {
+.input input:focus{
border-color: var(--input-button-hover-color);
}
-
-.input button {
+.input button{
padding: 5px;
- margin: 5px;
- margin-left: 0;
+ margin: 5px 5px 5px 0;
background-color: var(--input-button-color);
color: var(--user-message-text-color); /* Use variable for button text color */
border: none;
@@ -61,28 +52,22 @@
position: relative;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
-
-.input button img {
+.input button img{
height: 20px;
}
-
-.input button:hover {
+.input button:hover{
background-color: var(--input-button-hover-color);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
-
.microphone-button.red{
background-color: var(--close-button-color);
}
-
.microphone-button.green{
background-color: var(--button-background-color);
}
-
.microphone-button.red:hover{
background-color: var(--close-button-hover-color);
}
-
.microphone-button.green:hover{
background-color: var(--input-button-hover-color);
-}
\ No newline at end of file
+}
diff --git a/app/styles/models.css b/app/styles/models.css
index fd7e22b..e657d6c 100644
--- a/app/styles/models.css
+++ b/app/styles/models.css
@@ -13,7 +13,6 @@
border-radius: 1em;
height: 45dvh;
}
-
.models {
display: flex;
flex-direction: column;
@@ -21,7 +20,6 @@
overflow: hidden;
overflow-y: scroll;
}
-
.models .title {
display: flex;
justify-content: center;
@@ -29,24 +27,20 @@
font-size: 1.5em;
margin-bottom: 0;
}
-
.model-dropdown {
display: flex;
justify-content: center;
margin-bottom: 1em; /* Space between dropdown and models */
}
-
.model-dropdown label {
margin-right: 0.5em; /* Space between label and dropdown */
}
-
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5vh;
width: 100%; /* Ensure grid takes full width */
}
-
.model-box {
display: flex;
align-items: center;
@@ -59,12 +53,10 @@
width: 18vh;
margin: auto; /* Center each model box in the grid cell */
}
-
.model-box.selected {
box-shadow: 0 0 25px 5px var(--apply-button-hover-color); /* Glowing border */
border-color: var(--apply-button-hover-color);
}
-
.overlay {
position: absolute;
left: 0;
@@ -81,7 +73,6 @@
opacity: 0;
border-radius: 5%;
}
-
.overlay img {
align-self: flex-end;
justify-self: end;
@@ -91,18 +82,15 @@
right: 15px;
bottom: 15px;
}
-
.model-box:hover .overlay {
opacity: 1;
}
-
/* Model background styles */
.code-model {
background-image: url(/img/code.jpg);
background-repeat: no-repeat;
background-size: cover;
}
-
.math-model {
background-image: url(/img/math.jpg);
background-color: var(--background-color);
@@ -110,7 +98,6 @@
background-repeat: no-repeat;
background-size: contain;
}
-
.language-model {
background-image: url(/img/language.jpg);
background-color: #72cce4;
@@ -118,8 +105,6 @@
background-size: contain;
background-position: center;
}
-
-
.weather-model {
background-image: url(/img/weather.jpg);
background-color: #72cce4;
@@ -127,7 +112,6 @@
background-size: contain;
background-position: center;
}
-
.custom1-model,
.custom2-model {
background-image: url(/img/default.jpg);
@@ -135,20 +119,17 @@
background-size: cover;
background-position: center;
}
-
.model-dropdown {
display: flex;
flex-direction: column; /* Stack label and dropdown */
align-items: center; /* Center the content */
margin-bottom: 1em; /* Space between dropdown and models */
}
-
.model-dropdown label {
margin-bottom: 0.5em; /* Space between label and dropdown */
font-size: large; /* Increase font size for visibility */
color: var(--text-color); /* Use variable for text color */
}
-
#model-select {
padding: 0.5em; /* Padding for better touch targets */
border-radius: 5px; /* Rounded corners */
diff --git a/app/styles/output.css b/app/styles/output.css
index 7cc0166..8261793 100644
--- a/app/styles/output.css
+++ b/app/styles/output.css
@@ -16,7 +16,6 @@
height: 85dvh;
position: relative;
}
-
#conversation {
display: flex;
flex-direction: column;
@@ -27,7 +26,6 @@
border-radius: 10px;
scroll-behavior: smooth;
}
-
/* Message Bubbles */
.user-message, .ai-message {
padding: 10px;
@@ -37,23 +35,19 @@
word-wrap: break-word;
overflow-wrap: break-word;
}
-
.user-message {
background-color: var(--user-message-background-color);
align-self: flex-end;
color: var(--user-message-text-color);
}
-
.ai-message {
background-color: var(--ai-message-background-color);
align-self: flex-start;
color: var(--ai-message-text-color);
}
-
.ai-message a {
color: var(--text-color);
}
-
.ai-message table {
display: block; /* Treat the table as a block element */
position: relative;
@@ -67,31 +61,24 @@
border-radius: 4px; /* Optional: Add border radius similar to pre/code */
margin-top: 5px;
}
-
-
.ai-message th {
background-color: var(--user-message-background-color);
align-items: center;
padding: 5px;
}
-
.ai-message td {
align-items: center;
padding: 5px;
}
-
.ai-message img {
max-width: 80%;
}
-
.ai-message a:hover {
filter: brightness(70%);
}
-
.ai-message li {
margin-left: 1em;
}
-
.ai-message code, .ai-message pre {
overflow-x: auto;
white-space: pre;
@@ -101,12 +88,10 @@
background-color: var(--code-background-color);
border-radius: 4px;
}
-
/* Button Container */
.button-container {
display: flex;
}
-
.button-container button {
background: none;
border: none;
@@ -117,18 +102,15 @@
height: 40px;
width: 40px;
}
-
.button-container button:hover {
background-color: var(--button-hover-background-color);
}
-
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
z-index: 900;
}
-
.tooltip .tooltiptext {
visibility: hidden;
background-color: var(--user-message-background-color);
@@ -137,17 +119,14 @@
padding: 5px;
border-radius: 4px;
font-size: calc(var(--font-size) * 0.8);
-
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
-
opacity: 0;
transition: all 0.3s;
}
-
.tooltip .tooltiptext::after {
content: "";
position: absolute;
@@ -158,19 +137,16 @@
border-style: solid;
border-color: transparent transparent var(--user-message-background-color) transparent;
}
-
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
-
#copiedText {
margin-top: 1em;
cursor: default;
pointer-events: none;
user-select: none;
}
-
#scrollToBottom {
scroll-behavior: smooth;
visibility: hidden;
diff --git a/app/styles/responsive.css b/app/styles/responsive.css
index 938106e..ea61e8c 100644
--- a/app/styles/responsive.css
+++ b/app/styles/responsive.css
@@ -5,7 +5,6 @@
padding: 0;
border-radius: none;
}
-
/* Header styles */
header {
top: 0;
@@ -14,7 +13,6 @@
padding-top: 0;
width: 100%;
}
-
/* Container styles */
.container {
display: flex;
@@ -24,26 +22,22 @@
margin: 0;
padding: 1dvh 0 0 0;
}
-
/* Left panel styles */
.left-panel {
display: hidden; /* Initially hidden */
min-width: 100%; /* Takes full width when visible */
margin: 0;
}
-
.left-panel.visible {
display: block;
height: min-content;
}
-
/* Conversation container styles */
.conversation-container {
min-width: 100%;
height: 100%;
border-radius: 0;
}
-
.conversation-container.collapsed {
width: 0;
padding: 0;
@@ -51,25 +45,21 @@
overflow: hidden;
display: hidden;
}
-
.conversation-container.expanded {
min-width: 100%;
margin-left: 0;
border-radius: none;
height: 10vh;
}
-
/* Grid styles */
.grid {
grid-template-columns: 1fr; /* One item per line */
}
-
/* Model box styles */
.model-box {
max-width: none; /* Remove max-width */
margin: 0 auto; /* Center each model-box */
}
-
/* Input styles */
.input {
grid-column: 1 / -1;
@@ -82,7 +72,6 @@
left: 2vw;
justify-content: flex-start;
}
-
.input input {
font-size: 1em; /* Adjust font size */
max-width: 70%;
@@ -90,7 +79,6 @@
border-color: var(--input-border-color); /* Use variable for input border */
color: var(--text-color); /* Use variable for text color */
}
-
.input button {
height: 100%; /* Adjust button height */
width: 15%; /* Adjust button width */
@@ -99,16 +87,13 @@
color: var(--user-message-text-color); /* Use variable for button text color */
margin: 0;
}
-
.header-logo {
position: relative;
}
-
.hamburger.open {
margin-top: 0.5vh;
padding-left: 1vw;
}
-
.nav-links {
display: none; /* Hidden by default */
position: absolute;
@@ -121,12 +106,10 @@
padding: 10px;
height: fit-content;
}
-
.nav-links.active {
display: flex; /* Show when active */
height: fit-content;
}
-
.nav-btn {
width: 100%;
text-align: center;
@@ -137,28 +120,43 @@
font-size: 0.9em;
border-radius: 5px;
}
-
.nav-btn:hover {
background-color: var(--input-button-hover-color);
}
-
.hamburger {
display: flex; /* Always show hamburger button */
}
-
.header-login-button {
right: 5vh; /* Keep login button visible */
}
-
.show-hide-btn{
width: fit-content;
left: 20vw;
}
-
.header-logo {
background-image: url(../../public/img/logo-small.png);
width: 4em;
}
+ .sidebar{
+ width: 0%;
+ display: none;
+ }
+ .settings-main {
+ width: 80vw; /* Full width for main content */
+ margin: auto;
+ padding: auto;
+ }
+ .dropdown{
+ display: flex;
+ position: relative;
+ top: 10px;
+ display: block;
+ }
+
+ .slider-option{
+ width: fit-content;
+ margin: 10px 10px 0 0;
+ }
}
/* Responsive adjustments for the settings */
@@ -166,12 +164,4 @@
.settings-content {
flex-direction: column; /* Stack sidebar and main content on smaller screens */
}
-
- .sidebar {
- width: 100%; /* Full width for sidebar */
- }
-
- .settings-main {
- width: 100%; /* Full width for main content */
- }
}
diff --git a/app/styles/scrollbar.css b/app/styles/scrollbar.css
index 7608126..0fdf38d 100644
--- a/app/styles/scrollbar.css
+++ b/app/styles/scrollbar.css
@@ -2,16 +2,13 @@
.scrollbar {
overflow-y: scroll;
}
-
.scrollbar::-webkit-scrollbar {
width: 8px;
}
-
.scrollbar::-webkit-scrollbar-thumb {
background-color: var(--input-border-color); /* Use variable for thumb color */
border-radius: 4px;
}
-
.scrollbar::-webkit-scrollbar-track {
background-color: var(--history-background-color); /* Use variable for track color */
}
diff --git a/app/styles/user-ai-messages.css b/app/styles/user-ai-messages.css
index 3dd4461..688bddc 100644
--- a/app/styles/user-ai-messages.css
+++ b/app/styles/user-ai-messages.css
@@ -9,7 +9,6 @@
display: block;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}
-
.user-message {
background-color: var(--user-message-background-color);
color: var(--text-color);
@@ -18,7 +17,6 @@
text-align: left;
margin-right: 1.5vw;
}
-
.ai-message {
background-color: var(--ai-message-background-color);
color: var(--text-color);
@@ -26,7 +24,6 @@
margin-right: auto;
text-align: left;
}
-
.ai-container{
position: relative;
height: min-content;
diff --git a/app/styles/variables.css b/app/styles/variables.css
index dab7cbe..d68f8b8 100644
--- a/app/styles/variables.css
+++ b/app/styles/variables.css
@@ -23,8 +23,7 @@
--apply-button-color:#8B9635;
--apply-button-hover-color:#6b7c2b;
--burger-menu-background-color: #79832e; /*NEW*/
- --overlay-text-color:white; /*NEW*/
-
+ --overlay-text-color:white; /*NEW*/
/* FAQ Colors */
--faq-background-color: #474D22; /* Background color for FAQ section */
--faq-heading-color: #8B9635; /* Heading color for FAQ section */
@@ -32,7 +31,6 @@
--faq-item-heading-color: #474D22; /* Heading color for FAQ items */
--faq-item-text-color: #333; /* Text color for FAQ items */
--faq-item-hover-background-color: #e0e0e0; /* Hover background color for FAQ items */
-
--popup-background-color: #8B9635;
--pop-up-text: #000; /* Text color for pop-ups */
--input-border-color: #8B9635; /* Input border color */
diff --git a/deployment_scripts/linux/prepare-free.sh b/deployment_scripts/linux/prepare-free.sh
new file mode 100755
index 0000000..3f0293c
--- /dev/null
+++ b/deployment_scripts/linux/prepare-free.sh
@@ -0,0 +1,22 @@
+#!/bin/bash
+
+chmod +x root.sh
+pkexec ./root.sh
+npm install
+npm run build
+
+cd py
+python3 -m venv venv
+source venv/bin/activate
+python3 -m pip install -r requirements.txt
+
+ollama pull qwen2-math:1.5b
+ollama pull starcoder2
+ollama pull llama3.2
+
+ollama pull wizard-math
+ollama pull starcoder2:7b
+ollama pull llama3.1
+
+cd ..
+chmod +x run.sh
\ No newline at end of file
diff --git a/deployment_scripts/linux/prepare-nonfree.sh b/deployment_scripts/linux/prepare-nonfree.sh
new file mode 100755
index 0000000..66d12ff
--- /dev/null
+++ b/deployment_scripts/linux/prepare-nonfree.sh
@@ -0,0 +1,22 @@
+#!/bin/bash
+
+chmod +x root.sh
+pkexec ./root.sh
+npm install
+npm run build
+
+cd py
+python3 -m venv venv
+source venv/bin/activate
+python3 -m pip install -r requirements.txt
+
+ollama pull qwen2-math:1.5b
+ollama pull qwen2.5-coder:1.5b
+ollama pull phi3.5
+
+ollama pull mathstral
+ollama pull qwen2.5-coder
+ollama pull qwen2.5
+
+cd ..
+chmod +x run.sh
\ No newline at end of file
diff --git a/deployment_scripts/linux/root.sh b/deployment_scripts/linux/root.sh
new file mode 100644
index 0000000..e0f3af0
--- /dev/null
+++ b/deployment_scripts/linux/root.sh
@@ -0,0 +1,7 @@
+#!/bin/bash
+
+apt install npm nodejs python3-full ffmpeg libgtk-3-0 libnotify4 libgconf-2-4 libnss3 libxss1 libasound2 build-essential cmake -y
+if ! ollama; then
+ curl -fsSL https://ollama.com/install.sh | sh
+fi
+systemctl enable ollama --now
\ No newline at end of file
diff --git a/deployment_scripts/linux/run.sh b/deployment_scripts/linux/run.sh
new file mode 100644
index 0000000..1220bae
--- /dev/null
+++ b/deployment_scripts/linux/run.sh
@@ -0,0 +1,15 @@
+#!/bin/bash
+
+cd py
+source venv/bin/activate
+python3 api.py &
+pid_py=$!
+cd ..
+
+npm start &
+pid_node=$!
+
+npx electron .
+
+kill $pid_py
+kill $pid_node
\ No newline at end of file