Merge branch 'sageTheDm-main'
This commit is contained in:
Patrick_Pluto
commit
c56c3c802d
5 changed files with 232 additions and 297 deletions
|
|
@ -1,292 +1,214 @@
|
|||
"use client";
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
// Define all models that should be available.
|
||||
// Sample modelList definition; replace this with your actual modelList
|
||||
const modelList = {
|
||||
'Offline Fast': {
|
||||
'model_type': 'local',
|
||||
'Math': 'qwen2-math:1.5b',
|
||||
'Code': 'starcoder2',
|
||||
'Language': 'llama3.2',
|
||||
'Character': 'dolphin-phi',
|
||||
'Finance': 'qwen2-math:1.5b',
|
||||
'Weather': 'llama3.2',
|
||||
'Time': 'llama3.2',
|
||||
'Image': 'llava-phi3'
|
||||
model_type: 'local',
|
||||
Math: 'qwen2-math:1.5b',
|
||||
Code: 'starcoder2',
|
||||
Language: 'llama3.2',
|
||||
Character: 'dolphin-phi',
|
||||
Finance: 'qwen2-math:1.5b',
|
||||
Weather: 'llama3.2',
|
||||
Time: 'llama3.2',
|
||||
Image: 'llava-phi3'
|
||||
},
|
||||
'Offline Slow': {
|
||||
'model_type': 'local',
|
||||
'Math': 'wizard-math',
|
||||
'Code': 'starcoder2:7b',
|
||||
'Language': 'llama3.1',
|
||||
'Character': 'dolphin-llama3',
|
||||
'Finance': 'wizard-math',
|
||||
'Weather': 'llama3.1',
|
||||
'Time': 'llama3.1',
|
||||
'Image': 'llava'
|
||||
model_type: 'local',
|
||||
Math: 'wizard-math',
|
||||
Code: 'starcoder2:7b',
|
||||
Language: 'llama3.1',
|
||||
Character: 'dolphin-llama3',
|
||||
Finance: 'wizard-math',
|
||||
Weather: 'llama3.1',
|
||||
Time: 'llama3.1',
|
||||
Image: 'llava'
|
||||
},
|
||||
'Offline Fast (FOSS)': {
|
||||
'model_type': 'local',
|
||||
'Math': 'qwen2-math:1.5b',
|
||||
'Code': 'qwen2.5-coder:1.5b',
|
||||
'Language': 'phi3.5',
|
||||
'Character': 'dolphin-mistral',
|
||||
'Finance': 'qwen2-math:1.5b',
|
||||
'Weather': 'phi3.5',
|
||||
'Time': 'phi3.5',
|
||||
'Image': 'llava'
|
||||
model_type: 'local',
|
||||
Math: 'qwen2-math:1.5b',
|
||||
Code: 'qwen2.5-coder:1.5b',
|
||||
Language: 'phi3.5',
|
||||
Character: 'dolphin-mistral',
|
||||
Finance: 'qwen2-math:1.5b',
|
||||
Weather: 'phi3.5',
|
||||
Time: 'phi3.5',
|
||||
Image: 'llava'
|
||||
},
|
||||
'Offline Slow (FOSS)': {
|
||||
'model_type': 'local',
|
||||
'Math': 'mathstral',
|
||||
'Code': 'qwen2.5-coder',
|
||||
'Language': 'qwen2.5',
|
||||
'Character': 'dolphin-mistral',
|
||||
'Finance': 'mathstral',
|
||||
'Weather': 'qwen2.5',
|
||||
'Time': 'qwen2.5',
|
||||
'Image': 'llava'
|
||||
model_type: 'local',
|
||||
Math: 'mathstral',
|
||||
Code: 'qwen2.5-coder',
|
||||
Language: 'qwen2.5',
|
||||
Character: 'dolphin-mistral',
|
||||
Finance: 'mathstral',
|
||||
Weather: 'qwen2.5',
|
||||
Time: 'qwen2.5',
|
||||
Image: 'llava'
|
||||
},
|
||||
'Online Cheap (OpenAI)': {
|
||||
'model_type': 'openai',
|
||||
'Math': 'gpt-4o-mini',
|
||||
'Code': 'gpt-4o-mini',
|
||||
'Language': 'gpt-4o-mini',
|
||||
'Character': 'gpt-4o-mini',
|
||||
'Finance': 'gpt-4o-mini',
|
||||
'Weather': 'gpt-4o-mini',
|
||||
'Time': 'gpt-4o-mini',
|
||||
'Image': 'gpt-4o-mini'
|
||||
model_type: 'openai',
|
||||
Math: 'gpt-4o-mini',
|
||||
Code: 'gpt-4o-mini',
|
||||
Language: 'gpt-4o-mini',
|
||||
Character: 'gpt-4o-mini',
|
||||
Finance: 'gpt-4o-mini',
|
||||
Weather: 'gpt-4o-mini',
|
||||
Time: 'gpt-4o-mini',
|
||||
Image: 'gpt-4o-mini'
|
||||
},
|
||||
'Online Expensive (OpenAI)': {
|
||||
'model_type': 'openai',
|
||||
'Math': 'gpt-4o',
|
||||
'Code': 'gpt-4o',
|
||||
'Language': 'gpt-4o',
|
||||
'Character': 'gpt-4o',
|
||||
'Finance': 'gpt-4o',
|
||||
'Weather': 'gpt-4o',
|
||||
'Time': 'gpt-4o',
|
||||
'Image': 'gpt-4o'
|
||||
model_type: 'openai',
|
||||
Math: 'gpt-4o',
|
||||
Code: 'gpt-4o',
|
||||
Language: 'gpt-4o',
|
||||
Character: 'gpt-4o',
|
||||
Finance: 'gpt-4o',
|
||||
Weather: 'gpt-4o',
|
||||
Time: 'gpt-4o',
|
||||
Image: 'gpt-4o'
|
||||
},
|
||||
'Online Cheap (Anthropic)': {
|
||||
'model_type': 'anthropic',
|
||||
'Math': 'claude-3-haiku',
|
||||
'Code': 'claude-3-haiku',
|
||||
'Language': 'claude-3-haiku',
|
||||
'Character': 'claude-3-haiku',
|
||||
'Finance': 'claude-3-haiku',
|
||||
'Weather': 'claude-3-haiku',
|
||||
'Time': 'claude-3-haiku',
|
||||
'Image': 'claude-3-haiku'
|
||||
model_type: 'anthropic',
|
||||
Math: 'claude-3-haiku',
|
||||
Code: 'claude-3-haiku',
|
||||
Language: 'claude-3-haiku',
|
||||
Character: 'claude-3-haiku',
|
||||
Finance: 'claude-3-haiku',
|
||||
Weather: 'claude-3-haiku',
|
||||
Time: 'claude-3-haiku',
|
||||
Image: 'claude-3-haiku'
|
||||
},
|
||||
'Online Expensive (Anthropic)': {
|
||||
'model_type': 'anthropic',
|
||||
'Math': 'claude-3-5-sonnet',
|
||||
'Code': 'claude-3-5-sonnet',
|
||||
'Language': 'claude-3-5-sonnet',
|
||||
'Character': 'claude-3-5-sonnet',
|
||||
'Finance': 'claude-3-5-sonnet',
|
||||
'Weather': 'claude-3-5-sonnet',
|
||||
'Time': 'claude-3-5-sonnet',
|
||||
'Image': 'claude-3-5-sonnet'
|
||||
model_type: 'anthropic',
|
||||
Math: 'claude-3-5-sonnet',
|
||||
Code: 'claude-3-5-sonnet',
|
||||
Language: 'claude-3-5-sonnet',
|
||||
Character: 'claude-3-5-sonnet',
|
||||
Finance: 'claude-3-5-sonnet',
|
||||
Weather: 'claude-3-5-sonnet',
|
||||
Time: 'claude-3-5-sonnet',
|
||||
Image: 'claude-3-5-sonnet'
|
||||
},
|
||||
'Online Cheap (Google)': {
|
||||
'model_type': 'google',
|
||||
'Math': 'gemini-1.5-flash-latest',
|
||||
'Code': 'gemini-1.5-flash-latest',
|
||||
'Language': 'gemini-1.5-flash-latest',
|
||||
'Character': 'gemini-1.5-flash-latest',
|
||||
'Finance': 'gemini-1.5-flash-latest',
|
||||
'Weather': 'gemini-1.5-flash-latest',
|
||||
'Time': 'gemini-1.5-flash-latest',
|
||||
'Image': 'gemini-1.5-flash-latest'
|
||||
model_type: 'google',
|
||||
Math: 'gemini-1.5-flash-latest',
|
||||
Code: 'gemini-1.5-flash-latest',
|
||||
Language: 'gemini-1.5-flash-latest',
|
||||
Character: 'gemini-1.5-flash-latest',
|
||||
Finance: 'gemini-1.5-flash-latest',
|
||||
Weather: 'gemini-1.5-flash-latest',
|
||||
Time: 'gemini-1.5-flash-latest',
|
||||
Image: 'gemini-1.5-flash-latest'
|
||||
},
|
||||
'Online Expensive (Google)': {
|
||||
'model_type': 'google',
|
||||
'Math': 'gemini-1.5-pro-latest',
|
||||
'Code': 'gemini-1.5-pro-latest',
|
||||
'Language': 'gemini-1.5-pro-latest',
|
||||
'Character': 'gemini-1.5-pro-latest',
|
||||
'Finance': 'gemini-1.5-pro-latest',
|
||||
'Weather': 'gemini-1.5-pro-latest',
|
||||
'Time': 'gemini-1.5-pro-latest',
|
||||
'Image': 'gemini-1.5-pro-latest'
|
||||
model_type: 'google',
|
||||
Math: 'gemini-1.5-pro-latest',
|
||||
Code: 'gemini-1.5-pro-latest',
|
||||
Language: 'gemini-1.5-pro-latest',
|
||||
Character: 'gemini-1.5-pro-latest',
|
||||
Finance: 'gemini-1.5-pro-latest',
|
||||
Weather: 'gemini-1.5-pro-latest',
|
||||
Time: 'gemini-1.5-pro-latest',
|
||||
Image: 'gemini-1.5-pro-latest'
|
||||
},
|
||||
'Online (La Plateforme)': {
|
||||
'model_type': 'mistral',
|
||||
'Math': 'open-mistral-nemo',
|
||||
'Code': 'codestral-latest',
|
||||
'Language': 'mistral-small-latest',
|
||||
'Character': 'mistral-large-latest',
|
||||
'Finance': 'open-mistral-nemo',
|
||||
'Weather': 'mistral-small-latest',
|
||||
'Time': 'mistral-small-latest',
|
||||
'Image': 'pixtral-12b-2409'
|
||||
model_type: 'mistral',
|
||||
Math: 'open-mistral-nemo',
|
||||
Code: 'codestral-latest',
|
||||
Language: 'mistral-small-latest',
|
||||
Character: 'mistral-large-latest',
|
||||
Finance: 'open-mistral-nemo',
|
||||
Weather: 'mistral-small-latest',
|
||||
Time: 'mistral-small-latest',
|
||||
Image: 'pixtral-12b-2409'
|
||||
},
|
||||
'Online (FOSS) (La Plateforme)': {
|
||||
'model_type': 'mistral',
|
||||
'Math': 'open-mistral-nemo',
|
||||
'Code': 'open-codestral-mamba',
|
||||
'Language': 'open-mistral-nemo',
|
||||
'Character': 'open-mixtral-8x22b',
|
||||
'Finance': 'open-mixtral-8x22b',
|
||||
'Weather': 'open-mistral-nemo',
|
||||
'Time': 'open-mistral-nemo',
|
||||
'Image': 'pixtral-12b-2409'
|
||||
model_type: 'mistral',
|
||||
Math: 'open-mistral-nemo',
|
||||
Code: 'open-codestral-mamba',
|
||||
Language: 'open-mistral-nemo',
|
||||
Character: 'open-mixtral-8x22b',
|
||||
Finance: 'open-mixtral-8x22b',
|
||||
Weather: 'open-mistral-nemo',
|
||||
Time: 'open-mistral-nemo',
|
||||
Image: 'pixtral-12b-2409'
|
||||
}
|
||||
}
|
||||
|
||||
// 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'
|
||||
]
|
||||
// Define the keys of modelList
|
||||
type ModelKeys = keyof typeof modelList;
|
||||
|
||||
const ModelSection: React.FC = () => {
|
||||
// Initialize state with value from localStorage or default to ''
|
||||
const [selectedModelDropdown, setSelectedModelDropdown] = useState('');
|
||||
const [radioSelection, setRadioSelection] = useState<string | null>("")
|
||||
const [selectedModelDropdown, setSelectedModelDropdown] = useState<ModelKeys>('Offline Fast');
|
||||
const [radioSelection, setRadioSelection] = useState<string | null>("");
|
||||
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
|
||||
const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
|
||||
|
||||
useEffect(() => {
|
||||
var temp = localStorage.getItem("activeSelectedAIFunction") || ""
|
||||
setActiveSelectedAIFunction(temp)
|
||||
// Load initial values from localStorage
|
||||
const temp = localStorage.getItem("activeSelectedAIFunction") || "";
|
||||
setActiveSelectedAIFunction(temp);
|
||||
|
||||
// Check if localStorage keys exist, else set defaults
|
||||
if (!localStorage.getItem('selectedModelDropdown')) {
|
||||
localStorage.setItem("selectedModelDropdown", "Offline Fast")
|
||||
localStorage.setItem("selectedModelDropdown", "Offline Fast");
|
||||
}
|
||||
|
||||
if (!localStorage.getItem("activeSelectedAIFunction")) {
|
||||
setActiveSelectedAIFunction('Code')
|
||||
localStorage.setItem('activeSelectedAIFunction', 'Code')
|
||||
}
|
||||
// Set the dropdown and selected AI function from localStorage
|
||||
const storedSelectedModel = localStorage.getItem('selectedModelDropdown') as ModelKeys;
|
||||
const storedActiveFunction = localStorage.getItem("activeSelectedAIFunction") || 'Code';
|
||||
|
||||
setSelectedModelDropdown(storedSelectedModel);
|
||||
setCurrentSelectedAIFunction(storedActiveFunction);
|
||||
|
||||
if (!localStorage.getItem("model")) {
|
||||
localStorage.setItem("model", 'starcoder2')
|
||||
localStorage.setItem("model", 'starcoder2');
|
||||
}
|
||||
|
||||
if (!localStorage.getItem("radioSelection")) {
|
||||
localStorage.setItem("radioSelection", 'None')
|
||||
localStorage.setItem("radioSelection", 'None');
|
||||
}
|
||||
|
||||
if (!localStorage.getItem("type")) {
|
||||
localStorage.setItem("type", 'local')
|
||||
}
|
||||
|
||||
const handleStorageChange = () => {
|
||||
setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
|
||||
};
|
||||
|
||||
// Update immediately when localStorage changes
|
||||
window.addEventListener('storage', handleStorageChange);
|
||||
|
||||
// Load radio selection from localStorage
|
||||
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 filteredModels = Object.keys(modelList).filter(model => modelList[model as ModelKeys]);
|
||||
|
||||
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const newModel = event.target.value;
|
||||
setSelectedModelDropdown(newModel);
|
||||
localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly
|
||||
const selectedModel = event.target.value as ModelKeys;
|
||||
setSelectedModelDropdown(selectedModel);
|
||||
localStorage.setItem('selectedModelDropdown', selectedModel);
|
||||
|
||||
// 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);
|
||||
};
|
||||
|
||||
// Determine the filtered models based on current radioSelection
|
||||
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 isOfflineModel = (model: string) => {
|
||||
return modelList[model as ModelKeys].model_type === 'local';
|
||||
};
|
||||
|
||||
const modelClicked = (model: string) => {
|
||||
localStorage.setItem('activeSelectedAIFunction', model)
|
||||
setActiveSelectedAIFunction(model)
|
||||
const selectedAIFunction = selectedModelDropdown as keyof typeof modelList;
|
||||
localStorage.setItem("model", modelList[selectedAIFunction][model as keyof typeof modelList[typeof selectedAIFunction]])
|
||||
localStorage.setItem("type", modelList[selectedAIFunction]['model_type' as keyof typeof modelList[typeof selectedAIFunction]])
|
||||
const selectedAIFunction = currentSelectedAIFunction as keyof typeof modelList;
|
||||
|
||||
if (modelList[selectedModelDropdown] && modelList[selectedModelDropdown][model as keyof typeof modelList[typeof selectedModelDropdown]]) {
|
||||
const newModel = modelList[selectedModelDropdown][model as keyof typeof modelList[typeof selectedModelDropdown]];
|
||||
const modelType = modelList[selectedModelDropdown]['model_type' as keyof typeof modelList[typeof selectedModelDropdown]];
|
||||
|
||||
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 (
|
||||
<div className="model-background">
|
||||
|
|
@ -309,8 +231,9 @@ const ModelSection: React.FC = () => {
|
|||
|
||||
{/* Model Grid with Cards */}
|
||||
<div className="grid">
|
||||
{selectedAIFunction.map(
|
||||
(displayedCategory) => (
|
||||
{Object.keys(modelList[selectedModelDropdown])
|
||||
.filter((key) => key !== 'model_type') // Exclude model_type from display
|
||||
.map((displayedCategory) => (
|
||||
<button
|
||||
key={displayedCategory}
|
||||
className={`${displayedCategory.toLowerCase()}-model model-box ${currentSelectedAIFunction === displayedCategory ? 'selected' : ''}`}
|
||||
|
|
@ -321,8 +244,8 @@ const ModelSection: React.FC = () => {
|
|||
{isOfflineModel(selectedModelDropdown) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
)}
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
// PrivacySettings.tsx
|
||||
import React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
interface PrivacySettingsProps {
|
||||
selectedOption: string; // The currently selected option
|
||||
|
|
@ -8,39 +7,42 @@ interface PrivacySettingsProps {
|
|||
}
|
||||
|
||||
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 (
|
||||
<>
|
||||
{/* AI Mode Radio Options */}
|
||||
<div className="settings-option">
|
||||
<p>Disable Options:</p>
|
||||
<div className="slider">
|
||||
{/* Offline */}
|
||||
<div
|
||||
className={`slider-option ${selectedOption === 'Offline' ? 'active' : ''}`}
|
||||
onClick={() => handleRadioChange('Offline')} // Allow selection only if not in open-source mode
|
||||
>
|
||||
Offline tools{openSourceMode ? ' (FOSS)' : ''}
|
||||
<p>Select Privacy Mode:</p>
|
||||
{options.map((option) => (
|
||||
<div key={option.value}>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
value={option.value}
|
||||
checked={selectedOption === option.value}
|
||||
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>
|
||||
|
||||
{/* Online */}
|
||||
<div
|
||||
className={`slider-option ${selectedOption === 'Online' ? 'active' : ''}`}
|
||||
onClick={() => handleRadioChange('Online')}
|
||||
>
|
||||
Online tools{openSourceMode ? ' (FOSS)' : ''}
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* None */}
|
||||
<div
|
||||
className={`slider-option ${selectedOption === 'None' ? 'active' : ''}`}
|
||||
onClick={() => handleRadioChange('None')}
|
||||
>
|
||||
None{openSourceMode ? ' (FOSS)' : ''}
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,14 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
const [timeZone, setTimeZone] = useState(() => localStorage.getItem('timeZone') || 'GMT');
|
||||
|
||||
// Online AI and chat history settings
|
||||
const [selectedOption, setSelectedOption] = useState('Offline'); // Default to 'Offline'
|
||||
const [selectedOption, setSelectedOption] = useState(() => {
|
||||
// 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 [disableAIMemory, setDisableAIMemory] = useState(() => getItemFromLocalStorage('disableAIMemory'));
|
||||
const [openSourceMode, setOpenSourceMode] = useState(() => getItemFromLocalStorage('openSourceMode'));
|
||||
|
|
@ -106,20 +113,21 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
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 [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe");
|
||||
const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe");
|
||||
const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe");
|
||||
const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe");
|
||||
// Per default a purple color gradient
|
||||
const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#dc8add");
|
||||
const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#c061cb");
|
||||
const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#9141ac");
|
||||
const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#813d9c");
|
||||
const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe");
|
||||
|
||||
// Theme selection
|
||||
const [selectedTheme, setSelectedTheme] = useState<string>('');
|
||||
|
||||
// API Keys
|
||||
const [mistral, setMistral] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
|
||||
const [openai, setOpenai] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-openai').trim());
|
||||
const [anthropic, setAnthropic] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-anthropic').trim());
|
||||
const [google, setGoogle] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-google').trim());
|
||||
const [mistral, setMistral] = useState(localStorage.getItem('mistral') || "");
|
||||
const [openai, setOpenai] = useState(localStorage.getItem('openai') || "");
|
||||
const [anthropic, setAnthropic] = useState(localStorage.getItem('anthropic') || "");
|
||||
const [google, setGoogle] = useState(localStorage.getItem('google') || "");
|
||||
const [myBoolean, setMyBoolean] =useState<boolean | any>(() => getItemFromLocalStorage('myBoolean'));
|
||||
|
||||
const settings = {
|
||||
|
|
@ -330,7 +338,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
useEffect(() => {
|
||||
const savedOption = localStorage.getItem('radioSelection');
|
||||
if (savedOption) {
|
||||
setSelectedOption(savedOption); // Set saved selection
|
||||
handleRadioChange(savedOption); // Set saved selection
|
||||
}
|
||||
}, []);
|
||||
|
||||
|
|
@ -450,7 +458,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
return (
|
||||
<div className="settings-section">
|
||||
<h2>Privacy Settings</h2>
|
||||
|
||||
<PrivacySettings
|
||||
selectedOption={selectedOption}
|
||||
handleRadioChange={handleRadioChange}
|
||||
|
|
@ -572,26 +579,23 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
<TextSettings
|
||||
label="New Name"
|
||||
value={newName}
|
||||
type='text'
|
||||
setValue={setNewName}
|
||||
type="text"
|
||||
placeholder={localStorage.getItem("accountName") || "Current Name"} // Show current name or a default
|
||||
/>
|
||||
<TextSettings
|
||||
label="New Email"
|
||||
value={newEmail}
|
||||
setValue={setNewEmail}
|
||||
type="email" // Input type is email
|
||||
type="email"
|
||||
placeholder={localStorage.getItem("accountEmail") || "Current Email"} // Show current email or a default
|
||||
/>
|
||||
<TextSettings
|
||||
label="New Password"
|
||||
value={newPassword}
|
||||
setValue={setNewPassword}
|
||||
type="password" // Input type is password
|
||||
/>
|
||||
<TextSettings
|
||||
label="Current Password"
|
||||
value={currentPassword}
|
||||
setValue={setCurrentPassword}
|
||||
type="password" // Input type is password
|
||||
type="password"
|
||||
placeholder={newPassword ? "********" : "Enter new Password"} // Show asterisks or a default
|
||||
/>
|
||||
<ButtonSetting
|
||||
label="Log Out" // Button label
|
||||
|
|
@ -619,24 +623,28 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
value={mistral} // State variable for the input
|
||||
setValue={setMistral} // State updater function
|
||||
type="text" // Input type
|
||||
placeholder={localStorage.getItem('mistral') || "Enter the API key"}
|
||||
/>
|
||||
<TextSettings
|
||||
label="OpenAI" // Label for the input
|
||||
value={openai} // State variable for the input
|
||||
setValue={setOpenai} // State updater function
|
||||
type="text" // Input type
|
||||
placeholder={localStorage.getItem('openai') || "Enter the API key"}
|
||||
/>
|
||||
<TextSettings
|
||||
label="Anthropic" // Label for the input
|
||||
value={anthropic} // State variable for the input
|
||||
setValue={setAnthropic} // State updater function
|
||||
type="text" // Input type
|
||||
placeholder={localStorage.getItem('anthropic') || "Enter the API key"}
|
||||
/>
|
||||
<TextSettings
|
||||
label="Google" // Label for the input
|
||||
value={google} // State variable for the input
|
||||
setValue={setGoogle} // State updater function
|
||||
type="text" // Input type
|
||||
placeholder={localStorage.getItem('google') || "Enter the API key"}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -5,9 +5,10 @@ interface TextSettingProps {
|
|||
value: string; // The current text value
|
||||
setValue: (newText: string) => void; // The method to update the state
|
||||
type: 'text' | 'email' | 'password'; // The type of input field
|
||||
placeholder?: string; // Optional placeholder text
|
||||
}
|
||||
|
||||
const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type }) => {
|
||||
const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type, placeholder }) => {
|
||||
const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newText = e.target.value; // Get the new value from the input
|
||||
setValue(newText); // Update the state in the parent component
|
||||
|
|
@ -20,6 +21,7 @@ const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type
|
|||
type={type} // Use the type prop for the input
|
||||
value={value} // Set the current value
|
||||
onChange={handleTextChange} // Handle input changes
|
||||
placeholder={placeholder} // Set the placeholder text
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -61,8 +61,8 @@
|
|||
}
|
||||
|
||||
.model-box.selected {
|
||||
box-shadow: 0 0 15px 5px rgba(255, 255, 0, 0.7); /* Glowing border */
|
||||
border-color: yellow;
|
||||
box-shadow: 0 0 25px 5px var(--apply-button-hover-color); /* Glowing border */
|
||||
border-color: var(--apply-button-hover-color);
|
||||
}
|
||||
|
||||
.overlay {
|
||||
|
|
|
|||
Loading…
Reference in a new issue