feat: Data Tab

Removed Chat History Tab
Added Data Tab
Data tab can export and delete chat history, import API keys, import and export settings

app/components/settings/SettingsWindow.tsx

@@ -5,27 +5,27 @@ import { classNames } from '~/utils/classNames';
 import { DialogTitle, dialogVariants, dialogBackdropVariants } from '~/components/ui/Dialog';
 import { IconButton } from '~/components/ui/IconButton';
 import styles from './Settings.module.scss';
-import ChatHistoryTab from './chat-history/ChatHistoryTab';
 import ProvidersTab from './providers/ProvidersTab';
 import { useSettings } from '~/lib/hooks/useSettings';
 import FeaturesTab from './features/FeaturesTab';
 import DebugTab from './debug/DebugTab';
 import EventLogsTab from './event-logs/EventLogsTab';
 import ConnectionsTab from './connections/ConnectionsTab';
+import DataTab from './data/DataTab';
 
 interface SettingsProps {
   open: boolean;
   onClose: () => void;
 }
 
-type TabType = 'chat-history' | 'providers' | 'features' | 'debug' | 'event-logs' | 'connection';
+type TabType = 'data' | 'providers' | 'features' | 'debug' | 'event-logs' | 'connection';
 
 export const SettingsWindow = ({ open, onClose }: SettingsProps) => {
   const { debug, eventLogs } = useSettings();
-  const [activeTab, setActiveTab] = useState<TabType>('chat-history');
+  const [activeTab, setActiveTab] = useState<TabType>('data');
 
   const tabs: { id: TabType; label: string; icon: string; component?: ReactElement }[] = [
-    { id: 'chat-history', label: 'Chat History', icon: 'i-ph:book', component: <ChatHistoryTab /> },
+    { id: 'data', label: 'Data', icon: 'i-ph:database', component: <DataTab /> },
     { id: 'providers', label: 'Providers', icon: 'i-ph:key', component: <ProvidersTab /> },
     { id: 'connection', label: 'Connection', icon: 'i-ph:link', component: <ConnectionsTab /> },
     { id: 'features', label: 'Features', icon: 'i-ph:star', component: <FeaturesTab /> },

app/components/settings/chat-history/ChatHistoryTab.tsx

@@ -1,119 +0,0 @@
-import { useNavigate } from '@remix-run/react';
-import React, { useState } from 'react';
-import { toast } from 'react-toastify';
-import { db, deleteById, getAll } from '~/lib/persistence';
-import { classNames } from '~/utils/classNames';
-import styles from '~/components/settings/Settings.module.scss';
-import { logStore } from '~/lib/stores/logs'; // Import logStore for event logging
-
-export default function ChatHistoryTab() {
-  const navigate = useNavigate();
-  const [isDeleting, setIsDeleting] = useState(false);
-  const downloadAsJson = (data: any, filename: string) => {
-    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = filename;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  };
-
-  const handleDeleteAllChats = async () => {
-    const confirmDelete = window.confirm('Are you sure you want to delete all chats? This action cannot be undone.');
-
-    if (!confirmDelete) {
-      return; // Exit if the user cancels
-    }
-
-    if (!db) {
-      const error = new Error('Database is not available');
-      logStore.logError('Failed to delete chats - DB unavailable', error);
-      toast.error('Database is not available');
-
-      return;
-    }
-
-    try {
-      setIsDeleting(true);
-
-      const allChats = await getAll(db);
-      await Promise.all(allChats.map((chat) => deleteById(db!, chat.id)));
-      logStore.logSystem('All chats deleted successfully', { count: allChats.length });
-      toast.success('All chats deleted successfully');
-      navigate('/', { replace: true });
-    } catch (error) {
-      logStore.logError('Failed to delete chats', error);
-      toast.error('Failed to delete chats');
-      console.error(error);
-    } finally {
-      setIsDeleting(false);
-    }
-  };
-
-  const handleExportAllChats = async () => {
-    if (!db) {
-      const error = new Error('Database is not available');
-      logStore.logError('Failed to export chats - DB unavailable', error);
-      toast.error('Database is not available');
-
-      return;
-    }
-
-    try {
-      const allChats = await getAll(db);
-      const exportData = {
-        chats: allChats,
-        exportDate: new Date().toISOString(),
-      };
-
-      downloadAsJson(exportData, `all-chats-${new Date().toISOString()}.json`);
-      logStore.logSystem('Chats exported successfully', { count: allChats.length });
-      toast.success('Chats exported successfully');
-    } catch (error) {
-      logStore.logError('Failed to export chats', error);
-      toast.error('Failed to export chats');
-      console.error(error);
-    }
-  };
-
-  return (
-    <>
-      <div className="p-4">
-        <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Chat History</h3>
-        <button
-          onClick={handleExportAllChats}
-          className={classNames(
-            'bg-bolt-elements-button-primary-background',
-            'rounded-lg px-4 py-2 mb-4 transition-colors duration-200',
-            'hover:bg-bolt-elements-button-primary-backgroundHover',
-            'text-bolt-elements-button-primary-text',
-          )}
-        >
-          Export All Chats
-        </button>
-
-        <div
-          className={classNames('text-bolt-elements-textPrimary rounded-lg py-4 mb-4', styles['settings-danger-area'])}
-        >
-          <h4 className="font-semibold">Danger Area</h4>
-          <p className="mb-2">This action cannot be undone!</p>
-          <button
-            onClick={handleDeleteAllChats}
-            disabled={isDeleting}
-            className={classNames(
-              'bg-bolt-elements-button-danger-background',
-              'rounded-lg px-4 py-2 transition-colors duration-200',
-              isDeleting ? 'opacity-50 cursor-not-allowed' : 'hover:bg-bolt-elements-button-danger-backgroundHover',
-              'text-bolt-elements-button-danger-text',
-            )}
-          >
-            {isDeleting ? 'Deleting...' : 'Delete All Chats'}
-          </button>
-        </div>
-      </div>
-    </>
-  );
-}

app/components/settings/data/DataTab.tsx

@@ -0,0 +1,290 @@
+import React, { useState } from 'react';
+import { useNavigate } from '@remix-run/react';
+import Cookies from 'js-cookie';
+import { toast } from 'react-toastify';
+import { db, deleteById, getAll } from '~/lib/persistence';
+import { logStore } from '~/lib/stores/logs';
+import { classNames } from '~/utils/classNames';
+import styles from '~/components/settings/Settings.module.scss';
+
+// List of supported providers that can have API keys
+const API_KEY_PROVIDERS = [
+  'Anthropic',
+  'OpenAI',
+  'Google',
+  'Groq',
+  'HuggingFace',
+  'OpenRouter',
+  'Deepseek',
+  'Mistral',
+  'OpenAILike',
+  'Together',
+  'xAI',
+  'Perplexity',
+  'Cohere',
+  'AzureOpenAI',
+] as const;
+
+type Provider = typeof API_KEY_PROVIDERS[number];
+
+interface ApiKeys {
+  [key: string]: string;
+}
+
+export default function DataTab() {
+  const navigate = useNavigate();
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const downloadAsJson = (data: any, filename: string) => {
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  const handleExportAllChats = async () => {
+    if (!db) {
+      const error = new Error('Database is not available');
+      logStore.logError('Failed to export chats - DB unavailable', error);
+      toast.error('Database is not available');
+      return;
+    }
+
+    try {
+      const allChats = await getAll(db);
+      const exportData = {
+        chats: allChats,
+        exportDate: new Date().toISOString(),
+      };
+
+      downloadAsJson(exportData, `all-chats-${new Date().toISOString()}.json`);
+      logStore.logSystem('Chats exported successfully', { count: allChats.length });
+      toast.success('Chats exported successfully');
+    } catch (error) {
+      logStore.logError('Failed to export chats', error);
+      toast.error('Failed to export chats');
+      console.error(error);
+    }
+  };
+
+  const handleDeleteAllChats = async () => {
+    const confirmDelete = window.confirm('Are you sure you want to delete all chats? This action cannot be undone.');
+
+    if (!confirmDelete) {
+      return;
+    }
+
+    if (!db) {
+      const error = new Error('Database is not available');
+      logStore.logError('Failed to delete chats - DB unavailable', error);
+      toast.error('Database is not available');
+      return;
+    }
+
+    try {
+      setIsDeleting(true);
+      const allChats = await getAll(db);
+      await Promise.all(allChats.map((chat) => deleteById(db!, chat.id)));
+      logStore.logSystem('All chats deleted successfully', { count: allChats.length });
+      toast.success('All chats deleted successfully');
+      navigate('/', { replace: true });
+    } catch (error) {
+      logStore.logError('Failed to delete chats', error);
+      toast.error('Failed to delete chats');
+      console.error(error);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const handleExportSettings = () => {
+    const settings = {
+      providers: Cookies.get('providers'),
+      isDebugEnabled: Cookies.get('isDebugEnabled'),
+      isEventLogsEnabled: Cookies.get('isEventLogsEnabled'),
+      isLocalModelsEnabled: Cookies.get('isLocalModelsEnabled'),
+      promptId: Cookies.get('promptId'),
+      isLatestBranch: Cookies.get('isLatestBranch'),
+      commitHash: Cookies.get('commitHash'),
+      eventLogs: Cookies.get('eventLogs'),
+      selectedModel: Cookies.get('selectedModel'),
+      selectedProvider: Cookies.get('selectedProvider'),
+      githubUsername: Cookies.get('githubUsername'),
+      githubToken: Cookies.get('githubToken'),
+      bolt_theme: localStorage.getItem('bolt_theme'),
+    };
+
+    downloadAsJson(settings, 'bolt-settings.json');
+    toast.success('Settings exported successfully');
+  };
+
+  const handleImportSettings = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      try {
+        const settings = JSON.parse(e.target?.result as string);
+        
+        Object.entries(settings).forEach(([key, value]) => {
+          if (key === 'bolt_theme') {
+            if (value) localStorage.setItem(key, value as string);
+          } else if (value) {
+            Cookies.set(key, value as string);
+          }
+        });
+
+        toast.success('Settings imported successfully. Please refresh the page for changes to take effect.');
+      } catch (error) {
+        toast.error('Failed to import settings. Make sure the file is a valid JSON file.');
+        console.error('Failed to import settings:', error);
+      }
+    };
+    reader.readAsText(file);
+    event.target.value = '';
+  };
+
+  const handleExportApiKeyTemplate = () => {
+    const template: ApiKeys = {};
+    API_KEY_PROVIDERS.forEach(provider => {
+      template[`${provider}_API_KEY`] = '';
+    });
+
+    template['OPENAI_LIKE_API_BASE_URL'] = '';
+    template['LMSTUDIO_API_BASE_URL'] = '';
+    template['OLLAMA_API_BASE_URL'] = '';
+    template['TOGETHER_API_BASE_URL'] = '';
+
+    downloadAsJson(template, 'api-keys-template.json');
+    toast.success('API keys template exported successfully');
+  };
+
+  const handleImportApiKeys = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      try {
+        const apiKeys = JSON.parse(e.target?.result as string);
+        let importedCount = 0;
+
+        API_KEY_PROVIDERS.forEach(provider => {
+          const keyName = `${provider}_API_KEY`;
+          if (apiKeys[keyName]) {
+            Cookies.set(keyName, apiKeys[keyName]);
+            importedCount++;
+          }
+        });
+
+        ['OPENAI_LIKE_API_BASE_URL', 'LMSTUDIO_API_BASE_URL', 'OLLAMA_API_BASE_URL', 'TOGETHER_API_BASE_URL'].forEach(baseUrl => {
+          if (apiKeys[baseUrl]) {
+            Cookies.set(baseUrl, apiKeys[baseUrl]);
+            importedCount++;
+          }
+        });
+
+        if (importedCount > 0) {
+          toast.success(`Successfully imported ${importedCount} API keys/URLs`);
+        } else {
+          toast.warn('No valid API keys found in the file');
+        }
+      } catch (error) {
+        toast.error('Failed to import API keys. Make sure the file is a valid JSON file.');
+        console.error('Failed to import API keys:', error);
+      }
+    };
+    reader.readAsText(file);
+    event.target.value = '';
+  };
+
+  return (
+    <div className="p-4 bg-bolt-elements-bg-depth-2 border border-bolt-elements-borderColor rounded-lg mb-4">
+      <div className="mb-6">
+        <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Data Management</h3>
+        <div className="space-y-8">
+          <div className="flex flex-col gap-4">
+            <div>
+              <h4 className="text-bolt-elements-textPrimary mb-2">Chat History</h4>
+              <p className="text-sm text-bolt-elements-textSecondary mb-4">
+                Export or delete all your chat history.
+              </p>
+              <div className="flex gap-4">
+                <button
+                  onClick={handleExportAllChats}
+                  className="px-4 py-2 bg-bolt-elements-button-primary-background hover:bg-bolt-elements-button-primary-backgroundHover text-bolt-elements-textPrimary rounded-lg transition-colors"
+                >
+                  Export All Chats
+                </button>
+                <button
+                  onClick={handleDeleteAllChats}
+                  disabled={isDeleting}
+                  className={classNames(
+                    'px-4 py-2 bg-bolt-elements-button-danger-background hover:bg-bolt-elements-button-danger-backgroundHover text-bolt-elements-button-danger-text rounded-lg transition-colors',
+                    isDeleting && 'opacity-50 cursor-not-allowed'
+                  )}
+                >
+                  {isDeleting ? 'Deleting...' : 'Delete All Chats'}
+                </button>
+              </div>
+            </div>
+
+            <div>
+              <h4 className="text-bolt-elements-textPrimary mb-2">Settings Backup</h4>
+              <p className="text-sm text-bolt-elements-textSecondary mb-4">
+                Export your settings to a JSON file or import settings from a previously exported file.
+              </p>
+              <div className="flex gap-4">
+                <button
+                  onClick={handleExportSettings}
+                  className="px-4 py-2 bg-bolt-elements-button-primary-background hover:bg-bolt-elements-button-primary-backgroundHover text-bolt-elements-textPrimary rounded-lg transition-colors"
+                >
+                  Export Settings
+                </button>
+                <label className="px-4 py-2 bg-bolt-elements-button-primary-background hover:bg-bolt-elements-button-primary-backgroundHover text-bolt-elements-textPrimary rounded-lg transition-colors cursor-pointer">
+                  Import Settings
+                  <input
+                    type="file"
+                    accept=".json"
+                    onChange={handleImportSettings}
+                    className="hidden"
+                  />
+                </label>
+              </div>
+            </div>
+
+            <div>
+              <h4 className="text-bolt-elements-textPrimary mb-2">API Keys Management</h4>
+              <p className="text-sm text-bolt-elements-textSecondary mb-4">
+                Import API keys from a JSON file or download a template to fill in your keys.
+              </p>
+              <div className="flex gap-4">
+                <button
+                  onClick={handleExportApiKeyTemplate}
+                  className="px-4 py-2 bg-bolt-elements-button-primary-background hover:bg-bolt-elements-button-primary-backgroundHover text-bolt-elements-textPrimary rounded-lg transition-colors"
+                >
+                  Download Template
+                </button>
+                <label className="px-4 py-2 bg-bolt-elements-button-primary-background hover:bg-bolt-elements-button-primary-backgroundHover text-bolt-elements-textPrimary rounded-lg transition-colors cursor-pointer">
+                  Import API Keys
+                  <input
+                    type="file"
+                    accept=".json"
+                    onChange={handleImportApiKeys}
+                    className="hidden"
+                  />
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}