UniqAI/bolt.new
1
0
Fork 0
mirror of https://github.com/stackblitz/bolt.new synced 2025-02-05 20:46:43 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #610 from oTToDev-CE/ui/features-toggle-fix

Browse Source 
ui: Fix Features Toggle
This commit is contained in:
Dustin Loring 2024-12-09 17:13:42 -05:00 committed by GitHub
commit 5aeb52ae01
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 46 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
app/components/settings/SettingsWindow.tsx
View File

@ -26,10 +26,19 @@ const URL_CONFIGURABLE_PROVIDERS = ['Ollama', 'LMStudio', 'OpenAILike'];
export const SettingsWindow = ({ open, onClose }: SettingsProps) => { export const SettingsWindow = ({ open, onClose }: SettingsProps) => {
const navigate = useNavigate(); const navigate = useNavigate();
const [activeTab, setActiveTab] = useState<TabType>('chat-history'); const [activeTab, setActiveTab] = useState<TabType>('chat-history');
const [isDebugEnabled, setIsDebugEnabled] = useState(false); const [isDebugEnabled, setIsDebugEnabled] = useState(() => {
const savedDebugState = Cookies.get('isDebugEnabled');
return savedDebugState === 'true';
});
const [searchTerm, setSearchTerm] = useState(''); const [searchTerm, setSearchTerm] = useState('');
const [isDeleting, setIsDeleting] = useState(false); const [isDeleting, setIsDeleting] = useState(false);
const [isJustSayEnabled, setIsJustSayEnabled] = useState(false); const [isJustSayEnabled, setIsJustSayEnabled] = useState(false);
const [isLocalModelsEnabled, setIsLocalModelsEnabled] = useState(() => {
const savedLocalModelsState = Cookies.get('isLocalModelsEnabled');
return savedLocalModelsState === 'true';
});
const [isExperimentalFeature1Enabled, setIsExperimentalFeature1Enabled] = useState(false);
const [isExperimentalFeature2Enabled, setIsExperimentalFeature2Enabled] = useState(false);
// Load base URLs from cookies // Load base URLs from cookies
const [baseUrls, setBaseUrls] = useState(() => { const [baseUrls, setBaseUrls] = useState(() => {
@ -113,6 +122,10 @@ export const SettingsWindow = ({ open, onClose }: SettingsProps) => {
}; };
const filteredProviders = providers const filteredProviders = providers
.filter((provider) => {
const isLocalModelProvider = ['OpenAILike', 'LMStudio', 'Ollama'].includes(provider.name);
return isLocalModelsEnabled || !isLocalModelProvider;
})
.filter((provider) => provider.name.toLowerCase().includes(searchTerm.toLowerCase())) .filter((provider) => provider.name.toLowerCase().includes(searchTerm.toLowerCase()))
.sort((a, b) => a.name.localeCompare(b.name)); .sort((a, b) => a.name.localeCompare(b.name));
@ -192,6 +205,17 @@ export const SettingsWindow = ({ open, onClose }: SettingsProps) => {
const versionHash = commit.commit; // Get the version hash from commit.json const versionHash = commit.commit; // Get the version hash from commit.json
// Update the toggle handlers to save to cookies
const handleToggleDebug = (enabled: boolean) => {
setIsDebugEnabled(enabled);
Cookies.set('isDebugEnabled', String(enabled));
};
const handleToggleLocalModels = (enabled: boolean) => {
setIsLocalModelsEnabled(enabled);
Cookies.set('isLocalModelsEnabled', String(enabled));
};
return ( return (
<RadixDialog.Root open={open}> <RadixDialog.Root open={open}>
<RadixDialog.Portal> <RadixDialog.Portal>
@ -339,57 +363,31 @@ export const SettingsWindow = ({ open, onClose }: SettingsProps) => {
)} )}
{activeTab === 'features' && ( {activeTab === 'features' && (
<div className="p-4 bg-bolt-elements-bg-depth-2 border border-bolt-elements-borderColor rounded-lg mb-4"> <div className="p-4 bg-bolt-elements-bg-depth-2 border border-bolt-elements-borderColor rounded-lg mb-4">
<h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Feature Settings</h3> <div className="mb-6">
<div className="flex items-center justify-between mb-2"> <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Optional Features</h3>
<span className="text-bolt-elements-textPrimary">Debug Info</span> <div className="flex items-center justify-between mb-2">
<label className="relative inline-flex items-center cursor-pointer"> <span className="text-bolt-elements-textPrimary">Debug Info</span>
<input <Switch
type="checkbox" className="ml-auto"
className="sr-only"
checked={isDebugEnabled} checked={isDebugEnabled}
onChange={() => setIsDebugEnabled(!isDebugEnabled)} onCheckedChange={handleToggleDebug}
/> />
<div </div>
className={classNames(
'settings-toggle__track',
isDebugEnabled ? 'settings-toggle__track--enabled' : 'settings-toggle__track--disabled',
)}
></div>
<div
className={classNames(
'settings-toggle__thumb',
isDebugEnabled ? 'settings-toggle__thumb--enabled' : '',
)}
></div>
</label>
</div> </div>
</div>
)} <div className="mb-6 border-t border-bolt-elements-borderColor pt-4">
{activeTab === 'features' && ( <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Experimental Features</h3>
<div className="p-4 bg-bolt-elements-bg-depth-2 border border-bolt-elements-borderColor rounded-lg"> <p className="text-sm text-bolt-elements-textSecondary mb-4">
<h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Experimental Area</h3> Disclaimer: Experimental features may be unstable and are subject to change.
<div className="flex items-center justify-between mb-2"> </p>
<span className="text-bolt-elements-textPrimary">Replace with local models</span> <div className="flex items-center justify-between mb-2">
<label className="relative inline-flex items-center cursor-pointer"> <span className="text-bolt-elements-textPrimary">Enable Local Models</span>
<input <Switch
type="checkbox" className="ml-auto"
className="sr-only" checked={isLocalModelsEnabled}
checked={isJustSayEnabled} onCheckedChange={handleToggleLocalModels}
onChange={() => setIsJustSayEnabled(!isJustSayEnabled)}
/> />
<div </div>
className={classNames(
'settings-toggle__track',
isJustSayEnabled ? 'settings-toggle__track--enabled' : 'settings-toggle__track--disabled',
)}
></div>
<div
className={classNames(
'settings-toggle__thumb',
isJustSayEnabled ? 'settings-toggle__thumb--enabled' : '',
)}
></div>
</label>
</div> </div>
</div> </div>
)} )}