React-Group/interstellar_ai
1
1
Fork 2
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'main' of interstellardevelopment.org:React-Group/interstellar_ai

Browse source
This commit is contained in:
Patrick_Pluto 2024-09-25 14:36:32 +02:00
commit a6699924c8
8 changed files with 175 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
app/components/Models.tsx
View file

@ -1,8 +1,6 @@
import React, { useState } from 'react'; import React, { useState, useEffect } from 'react';
const Models: React.FC = () => { const Models: React.FC = () => {
const [selectedModel, setSelectedModel] = useState<string>('Offline Fast');
const modelOptions = [ const modelOptions = [
'Offline Fast', 'Offline Fast',
'Offline Fast (FOSS)', 'Offline Fast (FOSS)',
@ -18,14 +16,25 @@ const Models: React.FC = () => {
'Online Expensive (Google)', 'Online Expensive (Google)',
]; ];
const [selectedModel, setSelectedModel] = useState<string>(() => {
// Load the selected model from localStorage on initial render
return localStorage.getItem('selectedModel') || 'Offline Fast';
});
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => { const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
setSelectedModel(event.target.value); const newModel = event.target.value;
setSelectedModel(newModel);
}; };
const isOfflineModel = (model: string) => { const isOfflineModel = (model: string) => {
return model.includes('Offline'); return model.includes('Offline');
}; };
// Save selected model to localStorage whenever it changes
useEffect(() => {
localStorage.setItem('selectedModel', selectedModel);
}, [selectedModel]);
return ( return (
<div className="model-background"> <div className="model-background">
<div className="models"> <div className="models">
@ -69,31 +78,37 @@ const Models: React.FC = () => {
</button> </button>
<button className="financial-model model-box"> <button className="financial-model model-box">
<div className="overlay"> <div className="overlay">
<h3>Character</h3> <h3>Finance</h3>
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />} {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
</div> </div>
</button> </button>
<button className="weather-model model-box"> <button className="weather-model model-box">
<div className="overlay"> <div className="overlay">
<h3>Character</h3> <h3>Weather</h3>
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />} {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
</div> </div>
</button> </button>
<button className="time-planner-model model-box"> <button className="time-planner-model model-box">
<div className="overlay"> <div className="overlay">
<h3>Character</h3> <h3>Time</h3>
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />} {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
</div> </div>
</button> </button>
<button className="image-model model-box"> <button className="image-model model-box">
<div className="overlay"> <div className="overlay">
<h3>Character</h3> <h3>Image</h3>
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />} {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
</div> </div>
</button> </button>
<button className="default-model model-box"> <button className="default-model model-box">
<div className="overlay"> <div className="overlay">
<h3>Character</h3> <h3>Custom1</h3>
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
</div>
</button>
<button className="default-model model-box">
<div className="overlay">
<h3>Custom2</h3>
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />} {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
</div> </div>
</button> </button>

119
app/components/Settings.tsx
View file

@ -1,4 +1,5 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme } from './theme';
import { exportSettings, importSettings } from './settingUtils'; // Import utility functions import { exportSettings, importSettings } from './settingUtils'; // Import utility functions
const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => { const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
@ -57,6 +58,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
const [inputBorderColor, setInputBorderColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-border-color').trim()); const [inputBorderColor, setInputBorderColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-border-color').trim());
const [fontFamily, setFontFamily] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim()); const [fontFamily, setFontFamily] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim());
const [fontSize, setFontSize] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim()); const [fontSize, setFontSize] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim());
const [burgerMenu, setBurgerMenu] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--burger-menu-background-color:').trim());
// Theme selection // Theme selection
const [selectedTheme, setSelectedTheme] = useState(() => localStorage.getItem('selectedTheme') || 'default'); const [selectedTheme, setSelectedTheme] = useState(() => localStorage.getItem('selectedTheme') || 'default');
@ -200,6 +202,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
localStorage.setItem('fontSize', fontSize); localStorage.setItem('fontSize', fontSize);
}, [fontSize]); }, [fontSize]);
useEffect(() => {
localStorage.setItem('burgerMenu', burgerMenu);
}, [fontSize]);
useEffect(() => { useEffect(() => {
localStorage.setItem('selectedTheme', selectedTheme); localStorage.setItem('selectedTheme', selectedTheme);
}, [selectedTheme]); }, [selectedTheme]);
@ -316,6 +322,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
setFontSize(settings.fontSize); setFontSize(settings.fontSize);
document.documentElement.style.setProperty('--font-size', settings.fontSize); document.documentElement.style.setProperty('--font-size', settings.fontSize);
} }
if (settings.burgerMenu) {
setBurgerMenu(settings.fontSize);
document.documentElement.style.setProperty('--burger-menu-background-color:', settings.burgerMenu);
}
}; };
@ -472,105 +483,25 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<select <select
value={selectedTheme} value={selectedTheme}
onChange={(e) => { onChange={(e) => {
const theme = e.target.value; const theme = e.target.value; // Get the selected value from the event
setSelectedTheme(theme); // Update state for selected theme setSelectedTheme(theme); // Update state for selected theme
// Apply the appropriate theme based on selection // Apply the appropriate theme based on selection
switch (theme) { switch (theme) { // Use 'theme' instead of 'selectedTheme'
case 'IOMARKET': case 'IOMARKET':
document.documentElement.style.setProperty('--header-background-color', '#7e7e7e'); // Header background color applyIOMarketTheme(); // Call the function to apply the IOMARKET theme
document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color
document.documentElement.style.setProperty('--background-color', '#8B9635'); // Main background color
document.documentElement.style.setProperty('--text-color', '#474D22'); // Main text color
document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background
document.documentElement.style.setProperty('--input-button-color', '#8B9635'); // Button color
document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b'); // Button hover color
document.documentElement.style.setProperty('--user-message-background-color', '#8B9635'); // User messages background
document.documentElement.style.setProperty('--user-message-text-color', '#000'); // User messages text color
document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB'); // AI messages background
document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // AI messages text color
document.documentElement.style.setProperty('--button-background-color', '#8B9635'); // Button background color
document.documentElement.style.setProperty('--button-hover-background-color', '#6b7c2b'); // Button hover color
document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Models section background
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background
document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); // Left panel background
document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); // Conversation container background
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background
document.documentElement.style.setProperty('--faq-background-color', '#474D22'); // FAQ section background
document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); // FAQ heading color
document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); // FAQ items background
document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); // FAQ items heading color
document.documentElement.style.setProperty('--faq-item-text-color', '#333'); // FAQ items text color
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background
document.documentElement.style.setProperty('--pop-up-text', '#000'); // Pop-up text color
document.documentElement.style.setProperty('--input-border-color', '#8B9635'); // Input border color
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
break; break;
case 'WHITE': case 'WHITE':
document.documentElement.style.setProperty('--header-background-color', '#ffffff'); // White header background applyWhiteTheme(); // Call the function to apply the WHITE theme
document.documentElement.style.setProperty('--header-text-color', '#000000'); // Header text color
document.documentElement.style.setProperty('--background-color', '#f0f0f0'); // Main background color
document.documentElement.style.setProperty('--text-color', '#000000'); // Main text color
document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background
document.documentElement.style.setProperty('--input-button-color', '#007bff'); // Button color
document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3'); // Button hover color
document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); // User messages background
document.documentElement.style.setProperty('--user-message-text-color', '#000000'); // User messages text color
document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); // AI messages background
document.documentElement.style.setProperty('--ai-message-text-color', '#000000'); // AI messages text color
document.documentElement.style.setProperty('--button-background-color', '#007bff'); // Button background color
document.documentElement.style.setProperty('--button-hover-background-color', '#0056b3'); // Button hover color
document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Models section background
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background
document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); // Left panel background
document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); // Conversation container background
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background
document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); // FAQ section background
document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); // FAQ heading color
document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); // FAQ items background
document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); // FAQ items heading color
document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); // FAQ items text color
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background
document.documentElement.style.setProperty('--pop-up-text', '#000000'); // Pop-up text color
document.documentElement.style.setProperty('--input-border-color', '#ced4da'); // Input border color
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
break; break;
case 'BLACK': case 'BLACK':
document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background applyBlackTheme(); // Call the function to apply the BLACK theme
document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color
document.documentElement.style.setProperty('--background-color', '#121212'); // Main background color
document.documentElement.style.setProperty('--text-color', '#e0e0e0'); // Main text color
document.documentElement.style.setProperty('--input-background-color', '#1e1e1e'); // Input fields background
document.documentElement.style.setProperty('--input-button-color', '#3c3c3c'); // Button color
document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Button hover color
document.documentElement.style.setProperty('--user-message-background-color', '#000000'); // User messages background
document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // User messages text color
document.documentElement.style.setProperty('--ai-message-background-color', '#202020'); // AI messages background
document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // AI messages text color
document.documentElement.style.setProperty('--button-background-color', '#3c3c3c'); // Button background color
document.documentElement.style.setProperty('--button-hover-background-color', '#5a5a5a'); // Button hover color
document.documentElement.style.setProperty('--models-background-color', '#1e1e1e'); // Models section background
document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // History background
document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Left panel background
document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Conversation container background
document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Documents background
document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // FAQ section background
document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // FAQ heading color
document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // FAQ items background
document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // FAQ items heading color
document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // FAQ items text color
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // FAQ items hover background
document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Pop-up text color
document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
break; break;
case 'CUSTOM': case 'CUSTOM':
// Handle custom theme logic here // Handle custom theme logic here if necessary
break; break;
default: default:
applyIOMarketTheme(); // Fallback to the IOMARKET theme
break; break;
} }
}} // Handle theme selection }} // Handle theme selection
@ -582,6 +513,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<option value="CUSTOM">CUSTOM</option> <option value="CUSTOM">CUSTOM</option>
</select> </select>
</div> </div>
{/* Conditionally render theme settings only if "CUSTOM" is selected */} {/* Conditionally render theme settings only if "CUSTOM" is selected */}
{selectedTheme === 'CUSTOM' && ( {selectedTheme === 'CUSTOM' && (
<> <>
@ -809,6 +741,19 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
/> />
</div> </div>
<div className="settings-option">
<p>Burger Menu Color</p>
<input
type="color"
value={burgerMenu}
onChange={(e) => {
const newColor = e.target.value;
setBurgerMenu(newColor);
document.documentElement.style.setProperty('--burger-menu-background-color', newColor);
}}
/>
</div>
<div className="settings-option"> <div className="settings-option">
<p>Input Border Color</p> <p>Input Border Color</p>
<input <input

96
app/components/theme.ts Normal file
View file

@ -0,0 +1,96 @@
// theme.ts
export const applyIOMarketTheme = () => {
document.documentElement.style.setProperty('--header-background-color', '#7e7e7e'); // Header background color
document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color
document.documentElement.style.setProperty('--background-color', '#8B9635'); // Main background color
document.documentElement.style.setProperty('--text-color', '#474D22'); // Main text color
document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background
document.documentElement.style.setProperty('--input-button-color', '#8B9635'); // Button color
document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b'); // Button hover color
document.documentElement.style.setProperty('--user-message-background-color', '#8B9635'); // User messages background
document.documentElement.style.setProperty('--user-message-text-color', '#000'); // User messages text color
document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB'); // AI messages background
document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // AI messages text color
document.documentElement.style.setProperty('--button-background-color', '#8B9635'); // Button background color
document.documentElement.style.setProperty('--button-hover-background-color', '#6b7c2b'); // Button hover color
document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Models section background
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background
document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); // Left panel background
document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); // Conversation container background
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background
document.documentElement.style.setProperty('--faq-background-color', '#474D22'); // FAQ section background
document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); // FAQ heading color
document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); // FAQ items background
document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); // FAQ items heading color
document.documentElement.style.setProperty('--faq-item-text-color', '#333'); // FAQ items text color
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background
document.documentElement.style.setProperty('--pop-up-text', '#000'); // Pop-up text color
document.documentElement.style.setProperty('--input-border-color', '#8B9635'); // Input border color
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e'); // Font size
};
export const applyWhiteTheme = () => {
document.documentElement.style.setProperty('--header-background-color', '#ffffff'); // White header background
document.documentElement.style.setProperty('--header-text-color', '#000000'); // Header text color
document.documentElement.style.setProperty('--background-color', '#f0f0f0'); // Main background color
document.documentElement.style.setProperty('--text-color', '#000000'); // Main text color
document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background
document.documentElement.style.setProperty('--input-button-color', '#007bff'); // Button color
document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3'); // Button hover color
document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); // User messages background
document.documentElement.style.setProperty('--user-message-text-color', '#000000'); // User messages text color
document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); // AI messages background
document.documentElement.style.setProperty('--ai-message-text-color', '#000000'); // AI messages text color
document.documentElement.style.setProperty('--button-background-color', '#007bff'); // Button background color
document.documentElement.style.setProperty('--button-hover-background-color', '#0056b3'); // Button hover color
document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Models section background
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background
document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); // Left panel background
document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); // Conversation container background
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background
document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); // FAQ section background
document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); // FAQ heading color
document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); // FAQ items background
document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); // FAQ items heading color
document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); // FAQ items text color
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background
document.documentElement.style.setProperty('--pop-up-text', '#000000'); // Pop-up text color
document.documentElement.style.setProperty('--input-border-color', '#ced4da'); // Input border color
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e'); // Font size
};
export const applyBlackTheme = () => {
document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background
document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color
document.documentElement.style.setProperty('--background-color', '#121212'); // Main background color
document.documentElement.style.setProperty('--text-color', '#e0e0e0'); // Main text color
document.documentElement.style.setProperty('--input-background-color', '#1e1e1e'); // Input fields background
document.documentElement.style.setProperty('--input-button-color', '#3c3c3c'); // Button color
document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Button hover color
document.documentElement.style.setProperty('--user-message-background-color', '#000000'); // User messages background
document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // User messages text color
document.documentElement.style.setProperty('--ai-message-background-color', '#202020'); // AI messages background
document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // AI messages text color
document.documentElement.style.setProperty('--button-background-color', '#3c3c3c'); // Button background color
document.documentElement.style.setProperty('--button-hover-background-color', '#5a5a5a'); // Button hover color
document.documentElement.style.setProperty('--models-background-color', '#1e1e1e'); // Models section background
document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // History background
document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Left panel background
document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Conversation container background
document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Documents background
document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // FAQ section background
document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // FAQ heading color
document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // FAQ items background
document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // FAQ items heading color
document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // FAQ items text color
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // FAQ items hover background
document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Pop-up text color
document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e'); // Font size
};

4
app/styles/container.css
View file

@ -9,7 +9,7 @@
} }
.left-panel { .left-panel {
margin-top: 10vh; margin-top: 5em;
width: 25vw; /* Adjust as needed */ width: 25vw; /* Adjust as needed */
transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */ 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 */ background-color: var(--left-panel-background-color); /* Use variable for background color */
@ -25,7 +25,7 @@
} }
.conversation-container { .conversation-container {
margin-top: 10vh; margin-top: 5em;
flex: 1; flex: 1;
transition: margin-left 0.3s ease; /* Smooth margin adjustment */ transition: margin-left 0.3s ease; /* Smooth margin adjustment */
background-color: var(--conversation-background-color); /* Use variable for background color */ background-color: var(--conversation-background-color); /* Use variable for background color */

1
app/styles/global.css
View file

@ -3,7 +3,6 @@ body {
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
top: 1vh;
} }
body { body {

17
app/styles/header.css
View file

@ -1,13 +1,13 @@
header{ header{
position: absolute; position: absolute;
padding: 0 20px; padding: 0 20px;
top: 0; top: 2em;
left: 0; left: 0;
width: 100%; width: 100%;
height: 10vh; height: 5em;
display: flex; display: flex;
align-items: center; align-items: center;
margin: 1.5vh 0; font-size: 1em;
} }
.hamburger{ .hamburger{
@ -40,14 +40,16 @@ header{
.nav-links{ .nav-links{
position: absolute; position: absolute;
display: flex; display: flex;
gap: 15px; top: 1em;
width: 25vw; gap: 1em;
height: 5vh; width: 25em;
height: 3em;
} }
.nav-btn{ .nav-btn{
background-color: transparent; background-color: transparent;
border: none; border: none;
font-size: 0.9em;
} }
.header-logo{ .header-logo{
@ -63,8 +65,9 @@ header{
} }
.login-button .header-login-button{ .login-button .header-login-button{
font-size: 1em;
position: absolute; position: absolute;
top: 2.5vh; top: 1.5em;
right: 1vw; right: 1vw;
padding: 10px 20px; padding: 10px 20px;
background-color: var(--input-button-color); background-color: var(--input-button-color);

13
app/styles/models.css
View file

@ -61,11 +61,11 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
color: var(--text-color); /* Use variable for overlay text color */ color: var(--overlay-text-color); /* Use variable for overlay text color */
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: x-large; font-size: large;
transition: opacity 0.5s ease; transition: opacity 0.5s ease;
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
@ -176,11 +176,10 @@
color: var(--text-color); /* Text color */ color: var(--text-color); /* Text color */
font-size: medium; /* Font size for dropdown */ font-size: medium; /* Font size for dropdown */
cursor: pointer; /* Cursor change on hover */ cursor: pointer; /* Cursor change on hover */
transition: background-color 0.3s ease, border 0.3s ease; /* Smooth transition */ transition: all 0.3s ease-in-out, border 0.3s ease; /* Smooth transition */
}
#model-select option:hover{
background-color: gray;
} }
#model-select:hover {
background-color: var(--button-hover-background-color); /* Change background on hover */
border-color: var(--button-background-color); /* Change border color on hover */
}

5
app/styles/variables.css
View file

@ -19,7 +19,8 @@
--conversation-background-color: #79832e; /* Background color for conversation container */ --conversation-background-color: #79832e; /* Background color for conversation container */
--doc-background-color: #ffffff; /* Background color for documents */ --doc-background-color: #ffffff; /* Background color for documents */
--close-button-color: red; --close-button-color: red;
--burger-menu-background-color: #79832e; --burger-menu-background-color: #79832e; /*NEW*/
--overlay-text-color:white; /*NEW*/
/* FAQ Colors */ /* FAQ Colors */
--faq-background-color: #474D22; /* Background color for FAQ section */ --faq-background-color: #474D22; /* Background color for FAQ section */
@ -29,7 +30,7 @@
--faq-item-text-color: #333; /* Text 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 */ --faq-item-hover-background-color: #e0e0e0; /* Hover background color for FAQ items */
--popup-background-color: #8B9635 --popup-background-color: #8B9635;
--pop-up-text: #000; /* Text color for pop-ups */ --pop-up-text: #000; /* Text color for pop-ups */
--input-border-color: #8B9635; /* Input border color */ --input-border-color: #8B9635; /* Input border color */
--font-family: 'Poppins', 'sans-serif';/* Default font family */ --font-family: 'Poppins', 'sans-serif';/* Default font family */