UniqAI/bolt.diy
1
0
Fork 0
mirror of https://github.com/stackblitz-labs/bolt.diy synced 2025-06-23 02:16:08 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UI bug fixes

Browse Source
This commit is contained in:
Stijnus 2025-02-18 14:13:13 +01:00
parent 6e89710ec7
commit 0e60d9cca8
9 changed files with 133 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/components/@settings/core/ControlPanel.tsx
View File

@ -263,6 +263,27 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
},
};
// Reset to default view when modal opens/closes
useEffect(() => {
if (!open) {
// Reset when closing
setActiveTab(null);
setLoadingTab(null);
setShowTabManagement(false);
} else {
// When opening, set to null to show the main view
setActiveTab(null);
}
}, [open]);
// Handle closing
const handleClose = () => {
setActiveTab(null);
setLoadingTab(null);
setShowTabManagement(false);
onClose();
};
// Handlers
const handleBack = () => {
if (showTabManagement) {
@ -405,8 +426,8 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
<RadixDialog.Content
aria-describedby={undefined}
onEscapeKeyDown={onClose}
onPointerDownOutside={onClose}
onEscapeKeyDown={handleClose}
onPointerDownOutside={handleClose}
className="relative z-[101]"
>
<motion.div
@ -461,7 +482,7 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
{/* Close Button */}
<button
onClick={onClose}
onClick={handleClose}
className="flex items-center justify-center w-8 h-8 rounded-full bg-transparent hover:bg-purple-500/10 dark:hover:bg-purple-500/20 group transition-all duration-200"
>
<div className="i-ph:x w-4 h-4 text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />

11
app/components/@settings/shared/components/TabManagement.tsx
View File

@ -1,4 +1,4 @@
import { useState } from 'react';
import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { useStore } from '@nanostores/react';
import { Switch } from '~/components/ui/Switch';
@ -8,6 +8,7 @@ import { TAB_LABELS } from '~/components/@settings/core/constants';
import type { TabType } from '~/components/@settings/core/types';
import { toast } from 'react-toastify';
import { TbLayoutGrid } from 'react-icons/tb';
import { useSettingsStore } from '~/lib/stores/settings';
// Define tab icons mapping
const TAB_ICONS: Record<TabType, string> = {
@ -55,6 +56,7 @@ const BetaLabel = () => (
export const TabManagement = () => {
const [searchQuery, setSearchQuery] = useState('');
const tabConfiguration = useStore(tabConfigurationStore);
const { setSelectedTab } = useSettingsStore();
const handleTabVisibilityChange = (tabId: TabType, checked: boolean) => {
// Get current tab configuration
@ -126,6 +128,13 @@ export const TabManagement = () => {
// Filter tabs based on search query
const filteredTabs = allTabs.filter((tab) => TAB_LABELS[tab.id].toLowerCase().includes(searchQuery.toLowerCase()));
useEffect(() => {
// Reset to first tab when component unmounts
return () => {
setSelectedTab('user'); // Reset to user tab when unmounting
};
}, [setSelectedTab]);
return (
<div className="space-y-6">
<motion.div

9
app/components/@settings/tabs/debug/DebugTab.tsx
View File

@ -1103,15 +1103,18 @@ export default function DebugTab() {
// Add Ollama health check function
const checkOllamaStatus = useCallback(async () => {
try {
const ollamaProvider = providers?.Ollama;
const baseUrl = ollamaProvider?.settings?.baseUrl || 'http://127.0.0.1:11434';
// First check if service is running
const versionResponse = await fetch('http://127.0.0.1:11434/api/version');
const versionResponse = await fetch(`${baseUrl}/api/version`);
if (!versionResponse.ok) {
throw new Error('Service not running');
}
// Then fetch installed models
const modelsResponse = await fetch('http://127.0.0.1:11434/api/tags');
const modelsResponse = await fetch(`${baseUrl}/api/tags`);
const modelsData = (await modelsResponse.json()) as {
models: Array<{ name: string; size: string; quantization: string }>;
@ -1130,7 +1133,7 @@ export default function DebugTab() {
models: undefined,
});
}
}, []);
}, [providers]);
// Monitor isLocalModel changes and check status periodically
useEffect(() => {

21
app/components/@settings/tabs/profile/ProfileTab.tsx
View File

@ -1,13 +1,23 @@
import { useState } from 'react';
import { useState, useCallback } from 'react';
import { useStore } from '@nanostores/react';
import { classNames } from '~/utils/classNames';
import { profileStore, updateProfile } from '~/lib/stores/profile';
import { toast } from 'react-toastify';
import { debounce } from '~/utils/debounce';
export default function ProfileTab() {
const profile = useStore(profileStore);
const [isUploading, setIsUploading] = useState(false);
// Create debounced update functions
const debouncedUpdate = useCallback(
debounce((field: 'username' | 'bio', value: string) => {
updateProfile({ [field]: value });
toast.success(`${field.charAt(0).toUpperCase() + field.slice(1)} updated`);
}, 1000),
[],
);
const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
@ -42,14 +52,11 @@ export default function ProfileTab() {
};
const handleProfileUpdate = (field: 'username' | 'bio', value: string) => {
// Update the store immediately for UI responsiveness
updateProfile({ [field]: value });
// Only show toast for completed typing (after 1 second of no typing)
const debounceToast = setTimeout(() => {
toast.success(`${field.charAt(0).toUpperCase() + field.slice(1)} updated`);
}, 1000);
return () => clearTimeout(debounceToast);
// Debounce the toast notification
debouncedUpdate(field, value);
};
return (

13
app/components/@settings/tabs/providers/local/OllamaModelInstaller.tsx
View File

@ -3,6 +3,7 @@ import { motion } from 'framer-motion';
import { classNames } from '~/utils/classNames';
import { Progress } from '~/components/ui/Progress';
import { useToast } from '~/components/ui/use-toast';
import { useSettings } from '~/lib/hooks/useSettings';
interface OllamaModelInstallerProps {
onModelInstalled: () => void;
@ -141,11 +142,15 @@ export default function OllamaModelInstaller({ onModelInstalled }: OllamaModelIn
const [selectedTags, setSelectedTags] = useState<string[]>([]);
const [models, setModels] = useState<ModelInfo[]>(POPULAR_MODELS);
const { toast } = useToast();
const { providers } = useSettings();
// Get base URL from provider settings
const baseUrl = providers?.Ollama?.settings?.baseUrl || 'http://127.0.0.1:11434';
// Function to check installed models and their versions
const checkInstalledModels = async () => {
try {
const response = await fetch('http://127.0.0.1:11434/api/tags', {
const response = await fetch(`${baseUrl}/api/tags`, {
method: 'GET',
});
@ -181,7 +186,7 @@ export default function OllamaModelInstaller({ onModelInstalled }: OllamaModelIn
// Check installed models on mount and after installation
useEffect(() => {
checkInstalledModels();
}, []);
}, [baseUrl]);
const handleCheckUpdates = async () => {
setIsChecking(true);
@ -224,7 +229,7 @@ export default function OllamaModelInstaller({ onModelInstalled }: OllamaModelIn
setModelString('');
setSearchQuery('');
const response = await fetch('http://127.0.0.1:11434/api/pull', {
const response = await fetch(`${baseUrl}/api/pull`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
@ -302,7 +307,7 @@ export default function OllamaModelInstaller({ onModelInstalled }: OllamaModelIn
try {
setModels((prev) => prev.map((m) => (m.name === modelToUpdate ? { ...m, status: 'updating' } : m)));
const response = await fetch('http://127.0.0.1:11434/api/pull', {
const response = await fetch(`${baseUrl}/api/pull`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',

78
app/components/@settings/tabs/settings/SettingsTab.tsx
View File

@ -4,19 +4,8 @@ import { toast } from 'react-toastify';
import { classNames } from '~/utils/classNames';
import { Switch } from '~/components/ui/Switch';
import type { UserProfile } from '~/components/@settings/core/types';
import { useStore } from '@nanostores/react';
import { shortcutsStore } from '~/lib/stores/settings';
import { isMac } from '~/utils/os';
// Helper to format shortcut key display
const formatShortcutKey = (key: string) => {
if (key === '`') {
return '`';
}
return key.toUpperCase();
};
// Helper to get modifier key symbols/text
const getModifierSymbol = (modifier: string): string => {
switch (modifier) {
@ -24,8 +13,6 @@ const getModifierSymbol = (modifier: string): string => {
return isMac ? '⌘' : 'Win';
case 'alt':
return isMac ? '⌥' : 'Alt';
case 'ctrl':
return isMac ? '⌃' : 'Ctrl';
case 'shift':
return '⇧';
default:
@ -188,7 +175,7 @@ export default function SettingsTab() {
</div>
</motion.div>
{/* Keyboard Shortcuts */}
{/* Simplified Keyboard Shortcuts */}
<motion.div
className="bg-white dark:bg-[#0A0A0A] rounded-lg shadow-sm dark:shadow-none p-4"
initial={{ opacity: 0, y: 20 }}
@ -201,51 +188,26 @@ export default function SettingsTab() {
</div>
<div className="space-y-2">
{Object.entries(useStore(shortcutsStore)).map(([name, shortcut]) => (
<div
key={name}
className="flex items-center justify-between p-2 rounded-lg bg-[#FAFAFA] dark:bg-[#1A1A1A] hover:bg-purple-50 dark:hover:bg-purple-500/10 transition-colors"
>
<div className="flex flex-col">
<span className="text-sm text-bolt-elements-textPrimary capitalize">
{name.replace(/([A-Z])/g, ' $1').toLowerCase()}
</span>
{shortcut.description && (
<span className="text-xs text-bolt-elements-textSecondary">{shortcut.description}</span>
)}
</div>
<div className="flex items-center gap-1">
{shortcut.ctrlOrMetaKey && (
<kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
{getModifierSymbol(isMac ? 'meta' : 'ctrl')}
</kbd>
)}
{shortcut.ctrlKey && (
<kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
{getModifierSymbol('ctrl')}
</kbd>
)}
{shortcut.metaKey && (
<kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
{getModifierSymbol('meta')}
</kbd>
)}
{shortcut.altKey && (
<kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
{getModifierSymbol('alt')}
</kbd>
)}
{shortcut.shiftKey && (
<kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
{getModifierSymbol('shift')}
</kbd>
)}
<kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
{formatShortcutKey(shortcut.key)}
</kbd>
</div>
<div className="flex items-center justify-between p-2 rounded-lg bg-[#FAFAFA] dark:bg-[#1A1A1A]">
<div className="flex flex-col">
<span className="text-sm text-bolt-elements-textPrimary">Toggle Theme</span>
<span className="text-xs text-bolt-elements-textSecondary">Switch between light and dark mode</span>
</div>
))}
<div className="flex items-center gap-1">
<kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
{getModifierSymbol('meta')}
</kbd>
<kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
{getModifierSymbol('alt')}
</kbd>
<kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
{getModifierSymbol('shift')}
</kbd>
<kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
D
</kbd>
</div>
</div>
</div>
</motion.div>
</div>

3
app/components/chat/BaseChat.tsx
View File

@ -34,6 +34,7 @@ import ChatAlert from './ChatAlert';
import type { ModelInfo } from '~/lib/modules/llm/types';
import ProgressCompilation from './ProgressCompilation';
import type { ProgressAnnotation } from '~/types/context';
import { LOCAL_PROVIDERS } from '~/lib/stores/settings';
const TEXTAREA_MIN_HEIGHT = 76;
@ -404,7 +405,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
apiKeys={apiKeys}
modelLoading={isModelLoading}
/>
{(providerList || []).length > 0 && provider && (
{(providerList || []).length > 0 && provider && !LOCAL_PROVIDERS.includes(provider.name) && (
<APIKeyManager
provider={provider}
apiKey={apiKeys[provider.name] || ''}

65
app/lib/stores/settings.ts
View File

@ -1,5 +1,4 @@
import { atom, map } from 'nanostores';
import { workbenchStore } from './workbench';
import { PROVIDER_LIST } from '~/utils/constants';
import type { IProviderConfig } from '~/types/model';
import type {
@ -11,7 +10,7 @@ import type {
import { DEFAULT_TAB_CONFIG } from '~/components/@settings/core/constants';
import Cookies from 'js-cookie';
import { toggleTheme } from './theme';
import { chatStore } from './chat';
import { create } from 'zustand';
export interface Shortcut {
key: string;
@ -26,10 +25,8 @@ export interface Shortcut {
}
export interface Shortcuts {
toggleTerminal: Shortcut;
toggleTheme: Shortcut;
toggleChat: Shortcut;
toggleSettings: Shortcut;
toggleTerminal: Shortcut;
}
export const URL_CONFIGURABLE_PROVIDERS = ['Ollama', 'LMStudio', 'OpenAILike'];
@ -37,15 +34,8 @@ export const LOCAL_PROVIDERS = ['OpenAILike', 'LMStudio', 'Ollama'];
export type ProviderSetting = Record<string, IProviderConfig>;
// Define safer shortcuts that don't conflict with browser defaults
// Simplified shortcuts store with only theme toggle
export const shortcutsStore = map<Shortcuts>({
toggleTerminal: {
key: '`',
ctrlOrMetaKey: true,
action: () => workbenchStore.toggleTerminal(),
description: 'Toggle terminal',
isPreventDefault: true,
},
toggleTheme: {
key: 'd',
metaKey: true,
@ -55,22 +45,13 @@ export const shortcutsStore = map<Shortcuts>({
description: 'Toggle theme',
isPreventDefault: true,
},
toggleChat: {
key: 'j', // Changed from 'k' to 'j' to avoid conflicts
toggleTerminal: {
key: '`',
ctrlOrMetaKey: true,
altKey: true, // Added alt key to make it more unique
action: () => chatStore.setKey('showChat', !chatStore.get().showChat),
description: 'Toggle chat',
isPreventDefault: true,
},
toggleSettings: {
key: 's',
ctrlOrMetaKey: true,
altKey: true,
action: () => {
document.dispatchEvent(new CustomEvent('toggle-settings'));
// This will be handled by the terminal component
},
description: 'Toggle settings',
description: 'Toggle terminal',
isPreventDefault: true,
},
});
@ -319,3 +300,35 @@ export const setDeveloperMode = (value: boolean) => {
localStorage.setItem(SETTINGS_KEYS.DEVELOPER_MODE, JSON.stringify(value));
}
};
// First, let's define the SettingsStore interface
interface SettingsStore {
isOpen: boolean;
selectedTab: string;
openSettings: () => void;
closeSettings: () => void;
setSelectedTab: (tab: string) => void;
}
export const useSettingsStore = create<SettingsStore>((set) => ({
isOpen: false,
selectedTab: 'user', // Default tab
openSettings: () => {
set({
isOpen: true,
selectedTab: 'user', // Always open to user tab
});
},
closeSettings: () => {
set({
isOpen: false,
selectedTab: 'user', // Reset to user tab when closing
});
},
setSelectedTab: (tab: string) => {
set({ selectedTab: tab });
},
}));

22
app/utils/debounce.ts
View File

@ -1,17 +1,13 @@
export function debounce<Args extends any[]>(fn: (...args: Args) => void, delay = 100) {
if (delay === 0) {
return fn;
}
export function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void {
let timeout: NodeJS.Timeout;
let timer: number | undefined;
return function executedFunction(...args: Parameters<T>) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
return function <U>(this: U, ...args: Args) {
const context = this;
clearTimeout(timer);
timer = window.setTimeout(() => {
fn.apply(context, args);
}, delay);
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}