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

Compare commits

base: React-Group:c56c3c802d96df42555223b1a903f2719c127935
Branches Tags
React-Group:main
..
compare: React-Group:091744d75ba577950b9efa65489cdf292513b45d
Branches Tags
React-Group:main

No commits in common. "c56c3c802d96df42555223b1a903f2719c127935" and "091744d75ba577950b9efa65489cdf292513b45d" have entirely different histories.
c56c3c802d ... 091744d75b

5 changed files with 298 additions and 233 deletions
Show stats Expand all files Collapse all files

405
app/components/Models.tsx
View file

@ -1,214 +1,292 @@
import React, { useEffect, useState } from 'react'; "use client";
import React, { useState, useEffect } from 'react';
// Sample modelList definition; replace this with your actual modelList // Define all models that should be available.
const modelList = { const modelList = {
'Offline Fast': { 'Offline Fast': {
model_type: 'local', 'model_type': 'local',
Math: 'qwen2-math:1.5b', 'Math': 'qwen2-math:1.5b',
Code: 'starcoder2', 'Code': 'starcoder2',
Language: 'llama3.2', 'Language': 'llama3.2',
Character: 'dolphin-phi', 'Character': 'dolphin-phi',
Finance: 'qwen2-math:1.5b', 'Finance': 'qwen2-math:1.5b',
Weather: 'llama3.2', 'Weather': 'llama3.2',
Time: 'llama3.2', 'Time': 'llama3.2',
Image: 'llava-phi3' 'Image': 'llava-phi3'
}, },
'Offline Slow': { 'Offline Slow': {
model_type: 'local', 'model_type': 'local',
Math: 'wizard-math', 'Math': 'wizard-math',
Code: 'starcoder2:7b', 'Code': 'starcoder2:7b',
Language: 'llama3.1', 'Language': 'llama3.1',
Character: 'dolphin-llama3', 'Character': 'dolphin-llama3',
Finance: 'wizard-math', 'Finance': 'wizard-math',
Weather: 'llama3.1', 'Weather': 'llama3.1',
Time: 'llama3.1', 'Time': 'llama3.1',
Image: 'llava' 'Image': 'llava'
}, },
'Offline Fast (FOSS)': { 'Offline Fast (FOSS)': {
model_type: 'local', 'model_type': 'local',
Math: 'qwen2-math:1.5b', 'Math': 'qwen2-math:1.5b',
Code: 'qwen2.5-coder:1.5b', 'Code': 'qwen2.5-coder:1.5b',
Language: 'phi3.5', 'Language': 'phi3.5',
Character: 'dolphin-mistral', 'Character': 'dolphin-mistral',
Finance: 'qwen2-math:1.5b', 'Finance': 'qwen2-math:1.5b',
Weather: 'phi3.5', 'Weather': 'phi3.5',
Time: 'phi3.5', 'Time': 'phi3.5',
Image: 'llava' 'Image': 'llava'
}, },
'Offline Slow (FOSS)': { 'Offline Slow (FOSS)': {
model_type: 'local', 'model_type': 'local',
Math: 'mathstral', 'Math': 'mathstral',
Code: 'qwen2.5-coder', 'Code': 'qwen2.5-coder',
Language: 'qwen2.5', 'Language': 'qwen2.5',
Character: 'dolphin-mistral', 'Character': 'dolphin-mistral',
Finance: 'mathstral', 'Finance': 'mathstral',
Weather: 'qwen2.5', 'Weather': 'qwen2.5',
Time: 'qwen2.5', 'Time': 'qwen2.5',
Image: 'llava' 'Image': 'llava'
}, },
'Online Cheap (OpenAI)': { 'Online Cheap (OpenAI)': {
model_type: 'openai', 'model_type': 'openai',
Math: 'gpt-4o-mini', 'Math': 'gpt-4o-mini',
Code: 'gpt-4o-mini', 'Code': 'gpt-4o-mini',
Language: 'gpt-4o-mini', 'Language': 'gpt-4o-mini',
Character: 'gpt-4o-mini', 'Character': 'gpt-4o-mini',
Finance: 'gpt-4o-mini', 'Finance': 'gpt-4o-mini',
Weather: 'gpt-4o-mini', 'Weather': 'gpt-4o-mini',
Time: 'gpt-4o-mini', 'Time': 'gpt-4o-mini',
Image: 'gpt-4o-mini' 'Image': 'gpt-4o-mini'
}, },
'Online Expensive (OpenAI)': { 'Online Expensive (OpenAI)': {
model_type: 'openai', 'model_type': 'openai',
Math: 'gpt-4o', 'Math': 'gpt-4o',
Code: 'gpt-4o', 'Code': 'gpt-4o',
Language: 'gpt-4o', 'Language': 'gpt-4o',
Character: 'gpt-4o', 'Character': 'gpt-4o',
Finance: 'gpt-4o', 'Finance': 'gpt-4o',
Weather: 'gpt-4o', 'Weather': 'gpt-4o',
Time: 'gpt-4o', 'Time': 'gpt-4o',
Image: 'gpt-4o' 'Image': 'gpt-4o'
}, },
'Online Cheap (Anthropic)': { 'Online Cheap (Anthropic)': {
model_type: 'anthropic', 'model_type': 'anthropic',
Math: 'claude-3-haiku', 'Math': 'claude-3-haiku',
Code: 'claude-3-haiku', 'Code': 'claude-3-haiku',
Language: 'claude-3-haiku', 'Language': 'claude-3-haiku',
Character: 'claude-3-haiku', 'Character': 'claude-3-haiku',
Finance: 'claude-3-haiku', 'Finance': 'claude-3-haiku',
Weather: 'claude-3-haiku', 'Weather': 'claude-3-haiku',
Time: 'claude-3-haiku', 'Time': 'claude-3-haiku',
Image: 'claude-3-haiku' 'Image': 'claude-3-haiku'
}, },
'Online Expensive (Anthropic)': { 'Online Expensive (Anthropic)': {
model_type: 'anthropic', 'model_type': 'anthropic',
Math: 'claude-3-5-sonnet', 'Math': 'claude-3-5-sonnet',
Code: 'claude-3-5-sonnet', 'Code': 'claude-3-5-sonnet',
Language: 'claude-3-5-sonnet', 'Language': 'claude-3-5-sonnet',
Character: 'claude-3-5-sonnet', 'Character': 'claude-3-5-sonnet',
Finance: 'claude-3-5-sonnet', 'Finance': 'claude-3-5-sonnet',
Weather: 'claude-3-5-sonnet', 'Weather': 'claude-3-5-sonnet',
Time: 'claude-3-5-sonnet', 'Time': 'claude-3-5-sonnet',
Image: 'claude-3-5-sonnet' 'Image': 'claude-3-5-sonnet'
}, },
'Online Cheap (Google)': { 'Online Cheap (Google)': {
model_type: 'google', 'model_type': 'google',
Math: 'gemini-1.5-flash-latest', 'Math': 'gemini-1.5-flash-latest',
Code: 'gemini-1.5-flash-latest', 'Code': 'gemini-1.5-flash-latest',
Language: 'gemini-1.5-flash-latest', 'Language': 'gemini-1.5-flash-latest',
Character: 'gemini-1.5-flash-latest', 'Character': 'gemini-1.5-flash-latest',
Finance: 'gemini-1.5-flash-latest', 'Finance': 'gemini-1.5-flash-latest',
Weather: 'gemini-1.5-flash-latest', 'Weather': 'gemini-1.5-flash-latest',
Time: 'gemini-1.5-flash-latest', 'Time': 'gemini-1.5-flash-latest',
Image: 'gemini-1.5-flash-latest' 'Image': 'gemini-1.5-flash-latest'
}, },
'Online Expensive (Google)': { 'Online Expensive (Google)': {
model_type: 'google', 'model_type': 'google',
Math: 'gemini-1.5-pro-latest', 'Math': 'gemini-1.5-pro-latest',
Code: 'gemini-1.5-pro-latest', 'Code': 'gemini-1.5-pro-latest',
Language: 'gemini-1.5-pro-latest', 'Language': 'gemini-1.5-pro-latest',
Character: 'gemini-1.5-pro-latest', 'Character': 'gemini-1.5-pro-latest',
Finance: 'gemini-1.5-pro-latest', 'Finance': 'gemini-1.5-pro-latest',
Weather: 'gemini-1.5-pro-latest', 'Weather': 'gemini-1.5-pro-latest',
Time: 'gemini-1.5-pro-latest', 'Time': 'gemini-1.5-pro-latest',
Image: 'gemini-1.5-pro-latest' 'Image': 'gemini-1.5-pro-latest'
}, },
'Online (La Plateforme)': { 'Online (La Plateforme)': {
model_type: 'mistral', 'model_type': 'mistral',
Math: 'open-mistral-nemo', 'Math': 'open-mistral-nemo',
Code: 'codestral-latest', 'Code': 'codestral-latest',
Language: 'mistral-small-latest', 'Language': 'mistral-small-latest',
Character: 'mistral-large-latest', 'Character': 'mistral-large-latest',
Finance: 'open-mistral-nemo', 'Finance': 'open-mistral-nemo',
Weather: 'mistral-small-latest', 'Weather': 'mistral-small-latest',
Time: 'mistral-small-latest', 'Time': 'mistral-small-latest',
Image: 'pixtral-12b-2409' 'Image': 'pixtral-12b-2409'
}, },
'Online (FOSS) (La Plateforme)': { 'Online (FOSS) (La Plateforme)': {
model_type: 'mistral', 'model_type': 'mistral',
Math: 'open-mistral-nemo', 'Math': 'open-mistral-nemo',
Code: 'open-codestral-mamba', 'Code': 'open-codestral-mamba',
Language: 'open-mistral-nemo', 'Language': 'open-mistral-nemo',
Character: 'open-mixtral-8x22b', 'Character': 'open-mixtral-8x22b',
Finance: 'open-mixtral-8x22b', 'Finance': 'open-mixtral-8x22b',
Weather: 'open-mistral-nemo', 'Weather': 'open-mistral-nemo',
Time: 'open-mistral-nemo', 'Time': 'open-mistral-nemo',
Image: 'pixtral-12b-2409' 'Image': 'pixtral-12b-2409'
} }
} }
// Define the keys of modelList
type ModelKeys = keyof typeof modelList; // Define the available selectedAIFunction options
const modelDropdown = {
offlineNonFoss: ['Offline Fast', 'Offline Slow'],
offlineFoss: ['Offline Fast (FOSS)', 'Offline Slow (FOSS)'],
onlineNonFoss: [
'Online Cheap (OpenAI)',
'Online Expensive (OpenAI)',
'Online Cheap (Anthropic)',
'Online Expensive (Anthropic)',
'Online Cheap (Google)',
'Online Expensive (Google)',
'Online (La Plateforme)'
],
onlineFoss: ['Online (FOSS) (La Plateforme)'],
};
const selectedAIFunction = [
'Code',
'Math',
'Language',
'Character',
'Finance',
'Weather',
'Time',
'Image',
'Custom1',
'Custom2'
]
const ModelSection: React.FC = () => { const ModelSection: React.FC = () => {
// Initialize state with value from localStorage or default to '' // Initialize state with value from localStorage or default to ''
const [selectedModelDropdown, setSelectedModelDropdown] = useState<ModelKeys>('Offline Fast'); const [selectedModelDropdown, setSelectedModelDropdown] = useState('');
const [radioSelection, setRadioSelection] = useState<string | null>(""); const [radioSelection, setRadioSelection] = useState<string | null>("")
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState(''); const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>(""); const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
useEffect(() => { useEffect(() => {
// Load initial values from localStorage var temp = localStorage.getItem("activeSelectedAIFunction") || ""
const temp = localStorage.getItem("activeSelectedAIFunction") || ""; setActiveSelectedAIFunction(temp)
setActiveSelectedAIFunction(temp);
// Check if localStorage keys exist, else set defaults
if (!localStorage.getItem('selectedModelDropdown')) { if (!localStorage.getItem('selectedModelDropdown')) {
localStorage.setItem("selectedModelDropdown", "Offline Fast"); localStorage.setItem("selectedModelDropdown", "Offline Fast")
} }
// Set the dropdown and selected AI function from localStorage if (!localStorage.getItem("activeSelectedAIFunction")) {
const storedSelectedModel = localStorage.getItem('selectedModelDropdown') as ModelKeys; setActiveSelectedAIFunction('Code')
const storedActiveFunction = localStorage.getItem("activeSelectedAIFunction") || 'Code'; localStorage.setItem('activeSelectedAIFunction', 'Code')
}
setSelectedModelDropdown(storedSelectedModel);
setCurrentSelectedAIFunction(storedActiveFunction);
if (!localStorage.getItem("model")) { if (!localStorage.getItem("model")) {
localStorage.setItem("model", 'starcoder2'); localStorage.setItem("model", 'starcoder2')
} }
if (!localStorage.getItem("radioSelection")) { if (!localStorage.getItem("radioSelection")) {
localStorage.setItem("radioSelection", 'None'); localStorage.setItem("radioSelection", 'None')
} }
// Load radio selection from localStorage if (!localStorage.getItem("type")) {
setRadioSelection(localStorage.getItem('radioSelection') || ''); localStorage.setItem("type", 'local')
}, []); }
const filteredModels = Object.keys(modelList).filter(model => modelList[model as ModelKeys]); const handleStorageChange = () => {
setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
};
// Update immediately when localStorage changes
window.addEventListener('storage', handleStorageChange);
setRadioSelection(localStorage.getItem('radioSelection') || '');
setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
// Cleanup listener on component unmount
return () => {
window.removeEventListener('storage', handleStorageChange);
};
}, []); // Dependency array can remain empty if you only want this to run on mount
useEffect(() => {
var storedActiveSelectedAIFunction = localStorage.getItem("activeSelectedAIFunction") || "";
if (storedActiveSelectedAIFunction !== currentSelectedAIFunction) {
setCurrentSelectedAIFunction(storedActiveSelectedAIFunction);
}
}, [activeSelectedAIFunction]);
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => { const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const selectedModel = event.target.value as ModelKeys; const newModel = event.target.value;
setSelectedModelDropdown(selectedModel); setSelectedModelDropdown(newModel);
localStorage.setItem('selectedModelDropdown', selectedModel); localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly
// Update model and type in local storage
const modelType = modelList[selectedModel].model_type;
const model = modelList[selectedModel][activeSelectedAIFunction as keyof typeof modelList[typeof selectedModel]];
localStorage.setItem('model', model);
localStorage.setItem('type', modelType);
}; };
const isOfflineModel = (model: string) => { // Determine the filtered models based on current radioSelection
return modelList[model as ModelKeys].model_type === 'local'; const filteredModels = (() => {
}; let models = [];
switch (radioSelection) {
case 'Offline':
models = [
...modelDropdown.onlineNonFoss,
...modelDropdown.onlineFoss,
]; // Show only offline models without FOSS
break;
case 'Offline (FOSS)':
models = [
...modelDropdown.onlineFoss,
]; // Show only offline models with FOSS
break;
case 'Online':
models = [
...modelDropdown.offlineNonFoss,
...modelDropdown.offlineFoss,
]; // Show only online models without FOSS
break;
case 'Online (FOSS)':
models = [
...modelDropdown.offlineFoss,
]; // Show only online models with FOSS
break;
case 'None':
models = [
...modelDropdown.offlineNonFoss,
...modelDropdown.offlineFoss,
...modelDropdown.onlineNonFoss,
...modelDropdown.onlineFoss,
]; // Show all models if nothing matches
break;
case 'None (FOSS)':
models = [
...modelDropdown.offlineFoss,
...modelDropdown.onlineFoss,
]; // Show all models if nothing matches
break;
default:
models = [
...modelDropdown.offlineNonFoss,
...modelDropdown.offlineFoss,
...modelDropdown.onlineNonFoss,
...modelDropdown.onlineFoss,
]; // Show all models if nothing matches
break;
}
return Array.from(new Set(models)); // Remove duplicates using Set
})();
const isOfflineModel = (model: string) =>
modelDropdown.offlineNonFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
const modelClicked = (model: string) => { const modelClicked = (model: string) => {
const selectedAIFunction = currentSelectedAIFunction as keyof typeof modelList; localStorage.setItem('activeSelectedAIFunction', model)
setActiveSelectedAIFunction(model)
if (modelList[selectedModelDropdown] && modelList[selectedModelDropdown][model as keyof typeof modelList[typeof selectedModelDropdown]]) { const selectedAIFunction = selectedModelDropdown as keyof typeof modelList;
const newModel = modelList[selectedModelDropdown][model as keyof typeof modelList[typeof selectedModelDropdown]]; localStorage.setItem("model", modelList[selectedAIFunction][model as keyof typeof modelList[typeof selectedAIFunction]])
const modelType = modelList[selectedModelDropdown]['model_type' as keyof typeof modelList[typeof selectedModelDropdown]]; localStorage.setItem("type", modelList[selectedAIFunction]['model_type' as keyof typeof modelList[typeof selectedAIFunction]])
localStorage.setItem('activeSelectedAIFunction', model);
setActiveSelectedAIFunction(model);
localStorage.setItem('model', newModel);
localStorage.setItem('type', modelType);
setCurrentSelectedAIFunction(model); // Ensure to set current function when model is clicked
} else {
console.error(`Model ${model} not found for function ${selectedModelDropdown}`);
} }
};
return ( return (
<div className="model-background"> <div className="model-background">
@ -231,9 +309,8 @@ const ModelSection: React.FC = () => {
{/* Model Grid with Cards */} {/* Model Grid with Cards */}
<div className="grid"> <div className="grid">
{Object.keys(modelList[selectedModelDropdown]) {selectedAIFunction.map(
.filter((key) => key !== 'model_type') // Exclude model_type from display (displayedCategory) => (
.map((displayedCategory) => (
<button <button
key={displayedCategory} key={displayedCategory}
className={`${displayedCategory.toLowerCase()}-model model-box ${currentSelectedAIFunction === displayedCategory ? 'selected' : ''}`} className={`${displayedCategory.toLowerCase()}-model model-box ${currentSelectedAIFunction === displayedCategory ? 'selected' : ''}`}
@ -244,8 +321,8 @@ const ModelSection: React.FC = () => {
{isOfflineModel(selectedModelDropdown) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />} {isOfflineModel(selectedModelDropdown) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
</div> </div>
</button> </button>
)) )
} )}
</div> </div>
</div> </div>
</div> </div>

64
app/components/settings/PrivacySettings.tsx
View file

@ -1,4 +1,5 @@
import React, { useEffect } from 'react'; // PrivacySettings.tsx
import React from 'react';
interface PrivacySettingsProps { interface PrivacySettingsProps {
selectedOption: string; // The currently selected option selectedOption: string; // The currently selected option
@ -7,42 +8,39 @@ interface PrivacySettingsProps {
} }
const PrivacySettings: React.FC<PrivacySettingsProps> = ({ selectedOption, handleRadioChange, openSourceMode }) => { const PrivacySettings: React.FC<PrivacySettingsProps> = ({ selectedOption, handleRadioChange, openSourceMode }) => {
// Set default option based on openSourceMode if no option is selected
useEffect(() => {
if (!selectedOption) {
handleRadioChange(openSourceMode ? 'Offline (FOSS)' : 'None');
}
}, [selectedOption, handleRadioChange, openSourceMode]);
// Define your options
const options = [
{ value: 'Online', label: 'Online' },
{ value: 'Offline', label: 'Offline' },
{ value: 'None', label: 'None' },
{ value: 'Offline (FOSS)', label: 'Offline (FOSS)' },
{ value: 'Online (FOSS)', label: 'Online (FOSS)' },
{ value: 'None (FOSS)', label: 'None (FOSS)' },
];
return ( return (
<>
{/* AI Mode Radio Options */}
<div className="settings-option"> <div className="settings-option">
<p>Select Privacy Mode:</p> <p>Disable Options:</p>
{options.map((option) => ( <div className="slider">
<div key={option.value}> {/* Offline */}
<label> <div
<input className={`slider-option ${selectedOption === 'Offline' ? 'active' : ''}`}
type="radio" onClick={() => handleRadioChange('Offline')} // Allow selection only if not in open-source mode
value={option.value} >
checked={selectedOption === option.value} Offline tools{openSourceMode ? ' (FOSS)' : ''}
onChange={() => handleRadioChange(option.value)}
disabled={openSourceMode && !option.label.includes('(FOSS)') && selectedOption !== option.value} // Disable non-FOSS options if FOSS is selected
/>
{option.label}
</label>
</div> </div>
))}
{/* Online */}
<div
className={`slider-option ${selectedOption === 'Online' ? 'active' : ''}`}
onClick={() => handleRadioChange('Online')}
>
Online tools{openSourceMode ? ' (FOSS)' : ''}
</div> </div>
{/* None */}
<div
className={`slider-option ${selectedOption === 'None' ? 'active' : ''}`}
onClick={() => handleRadioChange('None')}
>
None{openSourceMode ? ' (FOSS)' : ''}
</div>
</div>
<br />
</div>
</>
); );
}; };

48
app/components/settings/Settings.tsx
View file

@ -56,14 +56,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
const [timeZone, setTimeZone] = useState(() => localStorage.getItem('timeZone') || 'GMT'); const [timeZone, setTimeZone] = useState(() => localStorage.getItem('timeZone') || 'GMT');
// Online AI and chat history settings // Online AI and chat history settings
const [selectedOption, setSelectedOption] = useState(() => { const [selectedOption, setSelectedOption] = useState('Offline'); // Default to 'Offline'
// Check if openSourceMode exists in localStorage
const openSourceMode = localStorage.getItem("openSourceMode");
// If it exists and is "true", set selectedOption to None (Foss), otherwise set it to None
return openSourceMode === "true" ? "None (FOSS)" : "None";
});
const [disableChatHistory, setDisableChatHistory] = useState(() => getItemFromLocalStorage('disableChatHistory')); const [disableChatHistory, setDisableChatHistory] = useState(() => getItemFromLocalStorage('disableChatHistory'));
const [disableAIMemory, setDisableAIMemory] = useState(() => getItemFromLocalStorage('disableAIMemory')); const [disableAIMemory, setDisableAIMemory] = useState(() => getItemFromLocalStorage('disableAIMemory'));
const [openSourceMode, setOpenSourceMode] = useState(() => getItemFromLocalStorage('openSourceMode')); const [openSourceMode, setOpenSourceMode] = useState(() => getItemFromLocalStorage('openSourceMode'));
@ -113,21 +106,20 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
const [applyButtonColor, setApplyButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-color').trim()); const [applyButtonColor, setApplyButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-color').trim());
const [applyButtonHoverColor, setApplyButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-hover-color').trim()); const [applyButtonHoverColor, setApplyButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-hover-color').trim());
// Per default a purple color gradient const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe");
const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#dc8add"); const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe");
const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#c061cb"); const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe");
const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#9141ac"); const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe");
const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#813d9c");
const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe"); const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe");
// Theme selection // Theme selection
const [selectedTheme, setSelectedTheme] = useState<string>(''); const [selectedTheme, setSelectedTheme] = useState<string>('');
// API Keys // API Keys
const [mistral, setMistral] = useState(localStorage.getItem('mistral') || ""); const [mistral, setMistral] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
const [openai, setOpenai] = useState(localStorage.getItem('openai') || ""); const [openai, setOpenai] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-openai').trim());
const [anthropic, setAnthropic] = useState(localStorage.getItem('anthropic') || ""); const [anthropic, setAnthropic] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-anthropic').trim());
const [google, setGoogle] = useState(localStorage.getItem('google') || ""); const [google, setGoogle] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-google').trim());
const [myBoolean, setMyBoolean] =useState<boolean | any>(() => getItemFromLocalStorage('myBoolean')); const [myBoolean, setMyBoolean] =useState<boolean | any>(() => getItemFromLocalStorage('myBoolean'));
const settings = { const settings = {
@ -338,7 +330,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
useEffect(() => { useEffect(() => {
const savedOption = localStorage.getItem('radioSelection'); const savedOption = localStorage.getItem('radioSelection');
if (savedOption) { if (savedOption) {
handleRadioChange(savedOption); // Set saved selection setSelectedOption(savedOption); // Set saved selection
} }
}, []); }, []);
@ -458,6 +450,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
return ( return (
<div className="settings-section"> <div className="settings-section">
<h2>Privacy Settings</h2> <h2>Privacy Settings</h2>
<PrivacySettings <PrivacySettings
selectedOption={selectedOption} selectedOption={selectedOption}
handleRadioChange={handleRadioChange} handleRadioChange={handleRadioChange}
@ -579,23 +572,26 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<TextSettings <TextSettings
label="New Name" label="New Name"
value={newName} value={newName}
type='text'
setValue={setNewName} setValue={setNewName}
type="text"
placeholder={localStorage.getItem("accountName") || "Current Name"} // Show current name or a default
/> />
<TextSettings <TextSettings
label="New Email" label="New Email"
value={newEmail} value={newEmail}
setValue={setNewEmail} setValue={setNewEmail}
type="email" type="email" // Input type is email
placeholder={localStorage.getItem("accountEmail") || "Current Email"} // Show current email or a default
/> />
<TextSettings <TextSettings
label="New Password" label="New Password"
value={newPassword} value={newPassword}
setValue={setNewPassword} setValue={setNewPassword}
type="password" type="password" // Input type is password
placeholder={newPassword ? "********" : "Enter new Password"} // Show asterisks or a default />
<TextSettings
label="Current Password"
value={currentPassword}
setValue={setCurrentPassword}
type="password" // Input type is password
/> />
<ButtonSetting <ButtonSetting
label="Log Out" // Button label label="Log Out" // Button label
@ -623,28 +619,24 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
value={mistral} // State variable for the input value={mistral} // State variable for the input
setValue={setMistral} // State updater function setValue={setMistral} // State updater function
type="text" // Input type type="text" // Input type
placeholder={localStorage.getItem('mistral') || "Enter the API key"}
/> />
<TextSettings <TextSettings
label="OpenAI" // Label for the input label="OpenAI" // Label for the input
value={openai} // State variable for the input value={openai} // State variable for the input
setValue={setOpenai} // State updater function setValue={setOpenai} // State updater function
type="text" // Input type type="text" // Input type
placeholder={localStorage.getItem('openai') || "Enter the API key"}
/> />
<TextSettings <TextSettings
label="Anthropic" // Label for the input label="Anthropic" // Label for the input
value={anthropic} // State variable for the input value={anthropic} // State variable for the input
setValue={setAnthropic} // State updater function setValue={setAnthropic} // State updater function
type="text" // Input type type="text" // Input type
placeholder={localStorage.getItem('anthropic') || "Enter the API key"}
/> />
<TextSettings <TextSettings
label="Google" // Label for the input label="Google" // Label for the input
value={google} // State variable for the input value={google} // State variable for the input
setValue={setGoogle} // State updater function setValue={setGoogle} // State updater function
type="text" // Input type type="text" // Input type
placeholder={localStorage.getItem('google') || "Enter the API key"}
/> />
</div> </div>
); );

4
app/components/settings/TextSettings.tsx
View file

@ -5,10 +5,9 @@ interface TextSettingProps {
value: string; // The current text value value: string; // The current text value
setValue: (newText: string) => void; // The method to update the state setValue: (newText: string) => void; // The method to update the state
type: 'text' | 'email' | 'password'; // The type of input field type: 'text' | 'email' | 'password'; // The type of input field
placeholder?: string; // Optional placeholder text
} }
const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type, placeholder }) => { const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type }) => {
const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newText = e.target.value; // Get the new value from the input const newText = e.target.value; // Get the new value from the input
setValue(newText); // Update the state in the parent component setValue(newText); // Update the state in the parent component
@ -21,7 +20,6 @@ const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type,
type={type} // Use the type prop for the input type={type} // Use the type prop for the input
value={value} // Set the current value value={value} // Set the current value
onChange={handleTextChange} // Handle input changes onChange={handleTextChange} // Handle input changes
placeholder={placeholder} // Set the placeholder text
/> />
</div> </div>
); );

4
app/styles/models.css
View file

@ -61,8 +61,8 @@
} }
.model-box.selected { .model-box.selected {
box-shadow: 0 0 25px 5px var(--apply-button-hover-color); /* Glowing border */ box-shadow: 0 0 15px 5px rgba(255, 255, 0, 0.7); /* Glowing border */
border-color: var(--apply-button-hover-color); border-color: yellow;
} }
.overlay { .overlay {