sageTheDm/interstellar_ai
1
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

main #37

Merged
sageTheDm merged 2 commits from React-Group/interstellar_ai:main into main 2024-10-03 17:01:13 +02:00
Conversation 0 Commits 2 Files changed 2 +215 -139
2 changed files with 215 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
app/components/Models.tsx
View file

@ -135,8 +135,36 @@ const modelList = {
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 ''
@ -144,6 +172,7 @@ const ModelSection: React.FC = () => {
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>("");
const [isOpenSourceMode, setIsOpenSourceMode] = useState(localStorage.getItem('openSourceMode') || "false")
useEffect(() => { useEffect(() => {
// Load initial values from localStorage // Load initial values from localStorage
@ -189,9 +218,60 @@ const ModelSection: React.FC = () => {
localStorage.setItem('type', modelType); 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,
];
if (isOpenSourceMode == "true") {
models = [
...modelDropdown.onlineFoss,
];
} // Show only offline models without FOSS
break;
case 'Online':
models = [
...modelDropdown.offlineNonFoss,
...modelDropdown.offlineFoss,
];
if (isOpenSourceMode == "true") {
models = [
...modelDropdown.offlineFoss,
];
} // Show only online models without FOSS
break;
case 'None':
models = [
...modelDropdown.offlineNonFoss,
...modelDropdown.offlineFoss,
...modelDropdown.onlineNonFoss,
...modelDropdown.onlineFoss,
];
if (isOpenSourceMode == "true") {
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; const selectedAIFunction = currentSelectedAIFunction as keyof typeof modelList;

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

@ -59,7 +59,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
const [selectedOption, setSelectedOption] = useState(() => { const [selectedOption, setSelectedOption] = useState(() => {
// Check if openSourceMode exists in localStorage // Check if openSourceMode exists in localStorage
const openSourceMode = localStorage.getItem("openSourceMode"); const openSourceMode = localStorage.getItem("openSourceMode");
// If it exists and is "true", set selectedOption to None (Foss), otherwise set it to None // If it exists and is "true", set selectedOption to None (Foss), otherwise set it to None
return openSourceMode === "true" ? "None (FOSS)" : "None"; return openSourceMode === "true" ? "None (FOSS)" : "None";
}); });
@ -112,13 +112,12 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
const [closeButtonHoverColor, setCloseButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--close-button-hover-color').trim()); const [closeButtonHoverColor, setCloseButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--close-button-hover-color').trim());
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 // Per default a purple color gradient
const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#dc8add"); const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#dc8add");
const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#c061cb"); const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#c061cb");
const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#9141ac"); const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#9141ac");
const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#813d9c"); 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>('');
@ -128,7 +127,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
const [openai, setOpenai] = useState(localStorage.getItem('openai') || ""); const [openai, setOpenai] = useState(localStorage.getItem('openai') || "");
const [anthropic, setAnthropic] = useState(localStorage.getItem('anthropic') || ""); const [anthropic, setAnthropic] = useState(localStorage.getItem('anthropic') || "");
const [google, setGoogle] = useState(localStorage.getItem('google') || ""); const [google, setGoogle] = useState(localStorage.getItem('google') || "");
const [myBoolean, setMyBoolean] =useState<boolean | any>(() => getItemFromLocalStorage('myBoolean')); const [myBoolean, setMyBoolean] = useState<boolean | any>(() => getItemFromLocalStorage('myBoolean'));
const settings = { const settings = {
userPreferences: { userPreferences: {
@ -137,7 +136,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
preferredCurrency, preferredCurrency,
preferredMeasurement, preferredMeasurement,
dateFormat, dateFormat,
timeFormat, timeFormat,
timeZone, timeZone,
selectedOption, selectedOption,
disableChatHistory, disableChatHistory,
@ -224,7 +223,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
{ name: "Apply Button Color", value: applyButtonColor, setValue: setApplyButtonColor, cssVariable: "--apply-button-color" }, { name: "Apply Button Color", value: applyButtonColor, setValue: setApplyButtonColor, cssVariable: "--apply-button-color" },
{ name: "Apply Button Hover Color", value: applyButtonHoverColor, setValue: setApplyButtonHoverColor, cssVariable: "--apply-button-hover-color" }, { name: "Apply Button Hover Color", value: applyButtonHoverColor, setValue: setApplyButtonHoverColor, cssVariable: "--apply-button-hover-color" },
{ name: "Burger Menu Background Color", value: burgerMenuBackgroundColor, setValue: setBurgerMenuBackgroundColor, cssVariable: "--burger-menu-background-color" }, { name: "Burger Menu Background Color", value: burgerMenuBackgroundColor, setValue: setBurgerMenuBackgroundColor, cssVariable: "--burger-menu-background-color" },
]; ];
const timeZoneOptions = [ const timeZoneOptions = [
@ -338,15 +337,13 @@ 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 savedOption.replace(" (FOSS)", "");
setSelectedOption(savedOption); // Set saved selection
} }
}, []); }, []);
const handleRadioChange = (newValue: string) => { const handleRadioChange = (newValue: string) => {
setSelectedOption(newValue); // Update the state with the selected option setSelectedOption(newValue); // Update the state with the selected option
if (openSourceMode) {
newValue += " (FOSS)"
}
localStorage.setItem('radioSelection', newValue); // Save the selection for persistence localStorage.setItem('radioSelection', newValue); // Save the selection for persistence
}; };
@ -479,85 +476,85 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
); );
case 'theme': case 'theme':
return ( return (
<div className="settings-section"> <div className="settings-section">
<h2>Theme Settings</h2> <h2>Theme Settings</h2>
<ThemeDropdown <ThemeDropdown
selectedTheme={selectedTheme} selectedTheme={selectedTheme}
setSelectedTheme={setSelectedTheme} setSelectedTheme={setSelectedTheme}
/>
{selectedTheme === 'BASIC-CUSTOM' && (
<>
<h3>Basic Colors</h3>
{/* Basic Color Inputs using ColorSetting Component */}
<ColorSetting
name="Primary Color"
value={primaryColor}
setValue={setPrimaryColor}
cssVariable=""
/> />
<ColorSetting
{selectedTheme === 'BASIC-CUSTOM' && ( name="Secondary Color"
<> value={secondaryColor}
<h3>Basic Colors</h3> setValue={setSecondaryColor}
{/* Basic Color Inputs using ColorSetting Component */} cssVariable=""
<ColorSetting />
name="Primary Color" <ColorSetting
value={primaryColor} name="Accent Color"
setValue={setPrimaryColor} value={accentColor}
cssVariable="" setValue={setAccentColor}
/> cssVariable=""
<ColorSetting />
name="Secondary Color" <ColorSetting
value={secondaryColor} name="Background Color"
setValue={setSecondaryColor} value={basicBackgroundColor}
cssVariable="" setValue={setBasicBackgroundColor}
/> cssVariable=""
<ColorSetting />
name="Accent Color" <ColorSetting
value={accentColor} name="Text Color"
setValue={setAccentColor} value={basicTextColor}
cssVariable="" setValue={setBasicTextColor}
/> cssVariable=""
<ColorSetting />
name="Background Color" </>
value={basicBackgroundColor} )}
setValue={setBasicBackgroundColor}
cssVariable="" {selectedTheme === 'CUSTOM' && (
/> <>
<ColorSetting <h3>Additional Settings</h3>
name="Text Color" {/* Additional Font Size Setting */}
value={basicTextColor} <FontSizeSetting
setValue={setBasicTextColor} fontSize={fontSize}
cssVariable="" setFontSize={setFontSize}
/> />
</>
)} {colorSettings.map((setting) => (
<ColorSetting
{selectedTheme === 'CUSTOM' && ( key={setting.cssVariable}
<> name={setting.name}
<h3>Additional Settings</h3> value={setting.value}
{/* Additional Font Size Setting */} setValue={setting.setValue}
<FontSizeSetting cssVariable={setting.cssVariable}
fontSize={fontSize} />
setFontSize={setFontSize} ))}
/>
<DropdownSetting
{colorSettings.map((setting) => ( label="Font Family"
<ColorSetting value={fontFamily}
key={setting.cssVariable} setValue={(newFont) => {
name={setting.name} setFontFamily(newFont);
value={setting.value} document.documentElement.style.setProperty('--font-family', newFont);
setValue={setting.setValue} }}
cssVariable={setting.cssVariable} options={fontOptions}
/> />
))} </>
)}
<DropdownSetting </div>
label="Font Family" );
value={fontFamily}
setValue={(newFont) => {
setFontFamily(newFont);
document.documentElement.style.setProperty('--font-family', newFont);
}}
options={fontOptions}
/>
</>
)}
</div>
);
case 'foss': case 'foss':
return ( return (
@ -580,14 +577,13 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
label="New Name" label="New Name"
value={newName} value={newName}
setValue={setNewName} setValue={setNewName}
type="text"
placeholder={localStorage.getItem("accountName") || "Current Name"} // Show current name or a default 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 placeholder={localStorage.getItem("accountEmail") || "Current Email"} // Show current email or a default
/> />
<TextSettings <TextSettings
@ -652,24 +648,24 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
case 'im/export': case 'im/export':
return ( return (
<div className="settings-section"> <div className="settings-section">
<h2>Import & Export</h2> <h2>Import & Export</h2>
<div className="settings-option"> <div className="settings-option">
<h3>Export the settings</h3> <h3>Export the settings</h3>
<button onClick={handleExport} className="export-button"> <button onClick={handleExport} className="export-button">
Export Settings Export Settings
</button> </button>
</div>
<div className="settings-option">
<h3>Import the settings</h3>
<input
type="file"
onChange={handleImport}
accept=".json"
className="import-file"
/>
</div>
</div> </div>
<div className="settings-option"> );
<h3>Import the settings</h3>
<input
type="file"
onChange={handleImport}
accept=".json"
className="import-file"
/>
</div>
</div>
);
default: default:
return null; return null;
} }
@ -703,36 +699,36 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
}; };
return ( return (
<div className="popup-overlay"> <div className="popup-overlay">
<div className="settings-content"> <div className="settings-content">
<div className="settings-container"> <div className="settings-container">
<div className="sidebar"> <div className="sidebar">
<ul> <ul>
<li onClick={() => setActiveSection('general')}>General</li> <li onClick={() => setActiveSection('general')}>General</li>
<li onClick={() => setActiveSection('privacy')}>Privacy</li> <li onClick={() => setActiveSection('privacy')}>Privacy</li>
<li onClick={() => setActiveSection('theme')}>Theme</li> <li onClick={() => setActiveSection('theme')}>Theme</li>
<li onClick={() => setActiveSection('foss')}>FOSS</li> <li onClick={() => setActiveSection('foss')}>FOSS</li>
<li onClick={() => setActiveSection('account')}>Account</li> <li onClick={() => setActiveSection('account')}>Account</li>
<li onClick={() => setActiveSection('api')}>API Keys</li> <li onClick={() => setActiveSection('api')}>API Keys</li>
<li onClick={() => setActiveSection('im/export')}>Import/Export</li> <li onClick={() => setActiveSection('im/export')}>Import/Export</li>
</ul> </ul>
</div> </div>
<div className="settings-main"> <div className="settings-main">
<h2>Settings for {accountName}</h2> <h2>Settings for {accountName}</h2>
{renderSettingsContent()} {renderSettingsContent()}
<button className="close-popup" onClick={closeSettings}>Close</button> <button className="close-popup" onClick={closeSettings}>Close</button>
<button className="apply" onClick={async () => { <button className="apply" onClick={async () => {
getAllLocalStorageItems(); getAllLocalStorageItems();
closeSettings(); closeSettings();
await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ???? await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
window.location.reload(); window.location.reload();
}}> }}>
Apply Apply
</button> </button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
); );
}; };