UI bug fixes

2025-06-26 18:26:38 +00:00 · 2025-02-18 14:13:13 +01:00
parent 6e89710ec7
commit 0e60d9cca8
9 changed files with 133 additions and 116 deletions
--- a/app/components/@settings/core/ControlPanel.tsx
+++ b/app/components/@settings/core/ControlPanel.tsx
@@ -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" />
--- a/app/components/@settings/shared/components/TabManagement.tsx
+++ b/app/components/@settings/shared/components/TabManagement.tsx
@@ -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
--- a/app/components/@settings/tabs/debug/DebugTab.tsx
+++ b/app/components/@settings/tabs/debug/DebugTab.tsx
@@ -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(() => {
--- a/app/components/@settings/tabs/profile/ProfileTab.tsx
+++ b/app/components/@settings/tabs/profile/ProfileTab.tsx
@@ -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 (
--- a/app/components/@settings/tabs/providers/local/OllamaModelInstaller.tsx
+++ b/app/components/@settings/tabs/providers/local/OllamaModelInstaller.tsx
@@ -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',
--- a/app/components/@settings/tabs/settings/SettingsTab.tsx
+++ b/app/components/@settings/tabs/settings/SettingsTab.tsx
@@ -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>
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -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] || ''}