diff --git a/app/components/Models.tsx b/app/components/Models.tsx index 79f9124..24ba852 100644 --- a/app/components/Models.tsx +++ b/app/components/Models.tsx @@ -1,255 +1,328 @@ -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 = { '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 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('Offline Fast'); - const [radioSelection, setRadioSelection] = useState(""); - const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState(''); - const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState(""); +// 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)'], +}; - useEffect(() => { - // Load initial values from localStorage - const temp = localStorage.getItem("activeSelectedAIFunction") || ""; - setActiveSelectedAIFunction(temp); +const selectedAIFunction = [ + 'Code', + 'Math', + 'Language', + 'Character', + 'Finance', + 'Weather', + 'Time', + 'Image', + 'Custom1', + 'Custom2' +] - // Check if localStorage keys exist, else set defaults - if (!localStorage.getItem('selectedModelDropdown')) { - localStorage.setItem("selectedModelDropdown", "Offline Fast"); - } +const ModelSection: React.FC = () => { + // Initialize state with value from localStorage or default to '' + const [selectedModelDropdown, setSelectedModelDropdown] = useState(''); + const [radioSelection, setRadioSelection] = useState("") + const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState(''); + const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState(""); + + useEffect(() => { + var temp = localStorage.getItem("activeSelectedAIFunction") || "" + setActiveSelectedAIFunction(temp) + if (!localStorage.getItem('selectedModelDropdown')) { + localStorage.setItem("selectedModelDropdown", "Offline Fast" ) + } - // Set the dropdown and selected AI function from localStorage - const storedSelectedModel = localStorage.getItem('selectedModelDropdown') as ModelKeys; - const storedActiveFunction = localStorage.getItem("activeSelectedAIFunction") || 'Code'; + if (!localStorage.getItem("activeSelectedAIFunction")) { + setActiveSelectedAIFunction('Code') + localStorage.setItem('activeSelectedAIFunction' ,'Code') + } - setSelectedModelDropdown(storedSelectedModel); - setCurrentSelectedAIFunction(storedActiveFunction); + if (!localStorage.getItem("model")) { + localStorage.setItem("model" ,'starcoder2') + } - if (!localStorage.getItem("model")) { - localStorage.setItem("model", 'starcoder2'); - } + if (!localStorage.getItem("radioSelection")) { + localStorage.setItem("radioSelection" ,'None') + } - if (!localStorage.getItem("radioSelection")) { - localStorage.setItem("radioSelection", 'None'); - } - - // Load radio selection from localStorage - setRadioSelection(localStorage.getItem('radioSelection') || ''); - }, []); - - const filteredModels = Object.keys(modelList).filter(model => modelList[model as ModelKeys]); - - const handleModelChange = (event: React.ChangeEvent) => { - 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); + const handleStorageChange = () => { + setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || ''); }; - const isOfflineModel = (model: string) => { - return modelList[model as ModelKeys].model_type === 'local'; + // 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 - const modelClicked = (model: string) => { - const selectedAIFunction = currentSelectedAIFunction as keyof typeof modelList; + useEffect(() => { + var storedActiveSelectedAIFunction = localStorage.getItem("activeSelectedAIFunction") || ""; + if (storedActiveSelectedAIFunction !== currentSelectedAIFunction) { + setCurrentSelectedAIFunction(storedActiveSelectedAIFunction); + } + }, [activeSelectedAIFunction]); - 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 ( -
-
-
-

Different AI Models

-
- - {/* Model Selection Dropdown */} -
- - -
- - {/* Model Grid with Cards */} -
- {Object.keys(modelList[selectedModelDropdown]) - .filter((key) => key !== 'model_type') // Exclude model_type from display - .map((displayedCategory) => ( - - )) - } -
-
-
- ); + const handleModelChange = (event: React.ChangeEvent) => { + const newModel = event.target.value; + setSelectedModelDropdown(newModel); + localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly }; + // 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 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]]) + } + + return ( +
+
+
+

Different AI Models

+
+ + {/* Model Selection Dropdown */} +
+ + +
+ + {/* Model Grid with Cards */} +
+ {selectedAIFunction.map( + (displayedCategory) => ( + + ) + )} +
+
+
+ ); +}; + export default ModelSection; diff --git a/app/components/settings/PrivacySettings.tsx b/app/components/settings/PrivacySettings.tsx index 02d551f..e9cab20 100644 --- a/app/components/settings/PrivacySettings.tsx +++ b/app/components/settings/PrivacySettings.tsx @@ -1,4 +1,5 @@ -import React, { useEffect } from 'react'; +// PrivacySettings.tsx +import React from 'react'; interface PrivacySettingsProps { selectedOption: string; // The currently selected option @@ -7,42 +8,39 @@ interface PrivacySettingsProps { } const PrivacySettings: React.FC = ({ 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 ( -
-

Select Privacy Mode:

- {options.map((option) => ( -
- + <> + {/* AI Mode Radio Options */} +
+

Disable Options:

+
+ {/* Offline */} +
handleRadioChange('Offline')} // Allow selection only if not in open-source mode + > + Offline tools{openSourceMode ? ' (FOSS)' : ''} +
+ + {/* Online */} +
handleRadioChange('Online')} + > + Online tools{openSourceMode ? ' (FOSS)' : ''} +
+ + {/* None */} +
handleRadioChange('None')} + > + None{openSourceMode ? ' (FOSS)' : ''} +
- ))} -
+
+
+ ); }; diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx index ac94db3..583442e 100644 --- a/app/components/settings/Settings.tsx +++ b/app/components/settings/Settings.tsx @@ -56,14 +56,7 @@ 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(() => { - // 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 [selectedOption, setSelectedOption] = useState('Offline'); // Default to 'Offline' const [disableChatHistory, setDisableChatHistory] = useState(() => getItemFromLocalStorage('disableChatHistory')); const [disableAIMemory, setDisableAIMemory] = useState(() => getItemFromLocalStorage('disableAIMemory')); 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 [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") || "#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 [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"); const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe"); // Theme selection const [selectedTheme, setSelectedTheme] = useState(''); // API Keys - 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 [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 [myBoolean, setMyBoolean] =useState(() => getItemFromLocalStorage('myBoolean')); const settings = { @@ -338,7 +330,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( useEffect(() => { const savedOption = localStorage.getItem('radioSelection'); 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 (

Privacy Settings

+ void; accountName: string }> = ( + 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"} />
); diff --git a/app/components/settings/TextSettings.tsx b/app/components/settings/TextSettings.tsx index eca3071..ef8aafc 100644 --- a/app/components/settings/TextSettings.tsx +++ b/app/components/settings/TextSettings.tsx @@ -5,10 +5,9 @@ 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 = ({ label, value, setValue, type, placeholder }) => { +const TextSetting: React.FC = ({ label, value, setValue, type }) => { const handleTextChange = (e: React.ChangeEvent) => { const newText = e.target.value; // Get the new value from the input setValue(newText); // Update the state in the parent component @@ -21,7 +20,6 @@ const TextSetting: React.FC = ({ 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 />
); diff --git a/app/styles/models.css b/app/styles/models.css index 7b833ae..258f71a 100644 --- a/app/styles/models.css +++ b/app/styles/models.css @@ -61,8 +61,8 @@ } .model-box.selected { - box-shadow: 0 0 25px 5px var(--apply-button-hover-color); /* Glowing border */ - border-color: var(--apply-button-hover-color); + box-shadow: 0 0 15px 5px rgba(255, 255, 0, 0.7); /* Glowing border */ + border-color: yellow; } .overlay {