diff --git a/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatImportExportTab.svelte b/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatImportExportTab.svelte index 0fb5cd11a3..14ba166e29 100644 --- a/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatImportExportTab.svelte +++ b/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatImportExportTab.svelte @@ -4,12 +4,16 @@ import { DialogConfirmation, DialogConversationSelection, - DialogExportSettings + DialogExportSettings, + DialogSettingsImportPreview } from '$lib/components/app'; + import type { SettingsDiffEntry } from '$lib/components/app/dialogs/DialogSettingsImportPreview.svelte'; import SettingsGroup from '$lib/components/app/settings/SettingsGroup.svelte'; import { ConversationSelectionMode, FileExtensionText, HtmlInputType } from '$lib/enums'; + import { computeSettingsDiff } from '$lib/hooks/use-drop-import.svelte'; import { ConversationTransferService } from '$lib/services'; import { conversationsStore, settingsStore } from '$lib/stores'; + import type { SettingsConfigType, SettingsExportType } from '$lib/types'; import { createMessageCountMap } from '$lib/utils'; import { fade } from 'svelte/transition'; import { toast } from 'svelte-sonner'; @@ -35,6 +39,9 @@ let showSettingsImportSummary = $state(false); let showSettingsExportDialog = $state(false); let includeSensitiveData = $state(false); + let showSettingsImportPreview = $state(false); + let pendingSettingsImport = $state(null); + let settingsImportDiff = $state([]); function handleSettingsExport() { showSettingsExportDialog = true; @@ -92,11 +99,12 @@ return; } - settingsStore.importSettings(data); - - showSettingsImportSummary = true; - showSettingsExportSummary = false; - toast.success('Settings imported successfully'); + pendingSettingsImport = data as SettingsExportType; + settingsImportDiff = computeSettingsDiff( + $state.snapshot(settingsStore.config) as SettingsConfigType, + data.config + ); + showSettingsImportPreview = true; } catch (err) { console.error('Failed to import settings:', err); toast.error('Failed to import settings'); @@ -110,6 +118,31 @@ } } + function handleSettingsImportConfirm() { + showSettingsImportPreview = false; + + if (!pendingSettingsImport) return; + + try { + settingsStore.importSettings(pendingSettingsImport); + + pendingSettingsImport = null; + settingsImportDiff = []; + showSettingsImportSummary = true; + showSettingsExportSummary = false; + toast.success('Settings imported successfully'); + } catch (err) { + console.error('Failed to import settings:', err); + toast.error('Failed to import settings'); + } + } + + function handleSettingsImportCancel() { + showSettingsImportPreview = false; + pendingSettingsImport = null; + settingsImportDiff = []; + } + async function handleExportClick() { try { const allConversations = conversationsStore.conversations; @@ -321,6 +354,13 @@ onCancel={handleSettingsExportCancel} /> + +