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

Merge pull request 'Merge pull request 'Fixed the Models utilising useEffect' (#49) from sageTheDm/interstellar_ai:main into main' (#19) from React-Group/interstellar_ai:main into main #50

Merged
Patrick_Pluto merged 3 commits from sageTheDm/interstellar_ai:main into main 2024-09-25 13:58:37 +02:00
Conversation 0 Commits 3 Files changed 4 +138 -91
4 changed files with 138 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/components/Models.tsx
View file

@ -102,7 +102,13 @@ const Models: React.FC = () => {
</button> </button>
<button className="default-model model-box"> <button className="default-model model-box">
<div className="overlay"> <div className="overlay">
<h3>Custom</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>

123
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');
@ -199,6 +201,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
useEffect(() => { useEffect(() => {
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);
@ -315,7 +321,12 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
if (settings.fontSize) { if (settings.fontSize) {
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
@ -581,7 +512,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<option value="BLACK">BLACK</option> <option value="BLACK">BLACK</option>
<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
};

2
app/styles/variables.css
View file

@ -30,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 */