refac
This commit is contained in:
Timothy Jaeryang Baek
@@ -14,6 +14,9 @@
|
||||
|
||||
let url = '';
|
||||
|
||||
const highContrastInputClass =
|
||||
'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
|
||||
|
||||
const submitHandler = () => {
|
||||
let urls = url
|
||||
.split('\n')
|
||||
@@ -68,7 +71,7 @@
|
||||
|
||||
<textarea
|
||||
id="webpage-url"
|
||||
class={`w-full flex-1 text-sm bg-transparent ${($settings?.highContrastMode ?? false) ? 'placeholder:text-gray-700 dark:placeholder:text-gray-100' : 'outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
|
||||
class={`w-full flex-1 text-sm ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
|
||||
type="text"
|
||||
bind:value={url}
|
||||
rows="3"
|
||||
|
||||
@@ -19,6 +19,9 @@
|
||||
export let config = {};
|
||||
|
||||
let showConfigModal = false;
|
||||
|
||||
const highContrastInputClass =
|
||||
'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
|
||||
</script>
|
||||
|
||||
<AddConnectionModal
|
||||
@@ -58,7 +61,7 @@
|
||||
<div class="flex w-full gap-2">
|
||||
<div class="flex-1 relative">
|
||||
<input
|
||||
class={`w-full bg-transparent ${($settings?.highContrastMode ?? false) ? '' : 'outline-hidden'} ${pipeline ? 'pr-8' : ''}`}
|
||||
class={`w-full ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden'} ${pipeline ? 'pr-8' : ''}`}
|
||||
placeholder={$i18n.t('API Base URL')}
|
||||
bind:value={url}
|
||||
autocomplete="off"
|
||||
|
||||
@@ -28,6 +28,8 @@
|
||||
'w-full resize-vertical rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-xs text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
|
||||
const compactSystemPromptTextareaClass =
|
||||
'w-full resize-vertical appearance-none bg-transparent text-sm outline-hidden focus:bg-transparent disabled:bg-transparent dark:text-gray-300';
|
||||
const highContrastSelectClass =
|
||||
'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500';
|
||||
|
||||
const toggleNotification = async () => {
|
||||
const permission = await Notification.requestPermission();
|
||||
@@ -223,9 +225,7 @@
|
||||
<div class=" self-center text-xs font-normal">{$i18n.t('Theme')}</div>
|
||||
<div class="flex items-center relative">
|
||||
<select
|
||||
class="w-fit pr-8 rounded-sm py-2 px-2 text-xs bg-transparent text-right {$settings.highContrastMode
|
||||
? ''
|
||||
: 'outline-hidden'}"
|
||||
class={`w-fit pr-8 text-xs text-right ${$settings.highContrastMode ? highContrastSelectClass : 'rounded-sm bg-transparent px-2 py-2 outline-hidden'}`}
|
||||
bind:value={selectedTheme}
|
||||
placeholder={$i18n.t('Select a theme')}
|
||||
on:change={() => themeChangeHandler(selectedTheme)}
|
||||
@@ -245,9 +245,7 @@
|
||||
<div class=" self-center text-xs font-normal">{$i18n.t('Language')}</div>
|
||||
<div class="flex items-center relative">
|
||||
<select
|
||||
class="w-fit pr-8 rounded-sm py-2 px-2 text-xs bg-transparent text-right {$settings.highContrastMode
|
||||
? ''
|
||||
: 'outline-hidden'}"
|
||||
class={`w-fit pr-8 text-xs text-right ${$settings.highContrastMode ? highContrastSelectClass : 'rounded-sm bg-transparent px-2 py-2 outline-hidden'}`}
|
||||
bind:value={lang}
|
||||
placeholder={$i18n.t('Select a language')}
|
||||
on:change={(e) => {
|
||||
|
||||
@@ -2,26 +2,92 @@
|
||||
import Switch from '$lib/components/common/Switch.svelte';
|
||||
import { config, settings } from '$lib/stores';
|
||||
import { createEventDispatcher, onMount, getContext } from 'svelte';
|
||||
import ManageModal from './Personalization/ManageModal.svelte';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import Spinner from '$lib/components/common/Spinner.svelte';
|
||||
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
|
||||
import MemoryModal from './Personalization/MemoryModal.svelte';
|
||||
import { deleteMemoriesByUserId, deleteMemoryById, getMemories } from '$lib/apis/memories';
|
||||
import { toast } from 'svelte-sonner';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
export let saveSettings: Function;
|
||||
|
||||
let showManageModal = false;
|
||||
|
||||
// Addons
|
||||
let enableMemory = false;
|
||||
let memories: Memory[] = [];
|
||||
let loadingMemories = true;
|
||||
|
||||
let showMemoryModal = false;
|
||||
let selectedMemory: Memory | null = null;
|
||||
let showClearConfirmDialog = false;
|
||||
let showDeleteConfirm = false;
|
||||
let query = '';
|
||||
|
||||
type Memory = {
|
||||
id: string;
|
||||
content: string;
|
||||
type?: string;
|
||||
path?: string;
|
||||
updated_at?: number;
|
||||
};
|
||||
|
||||
const loadMemories = async () => {
|
||||
loadingMemories = true;
|
||||
memories =
|
||||
(await getMemories(localStorage.token).catch((error) => {
|
||||
toast.error(`${error}`);
|
||||
return [];
|
||||
})) ?? [];
|
||||
loadingMemories = false;
|
||||
};
|
||||
|
||||
const confirmDeleteMemory = (memory: Memory) => {
|
||||
selectedMemory = memory;
|
||||
showDeleteConfirm = true;
|
||||
};
|
||||
|
||||
const editMemory = (memory: Memory) => {
|
||||
selectedMemory = memory;
|
||||
showMemoryModal = true;
|
||||
};
|
||||
|
||||
let onClearConfirmed = async () => {
|
||||
const res = await deleteMemoriesByUserId(localStorage.token).catch((error) => {
|
||||
toast.error(`${error}`);
|
||||
return null;
|
||||
});
|
||||
|
||||
if (res && memories.length > 0) {
|
||||
toast.success($i18n.t('Memory cleared successfully'));
|
||||
memories = [];
|
||||
}
|
||||
showClearConfirmDialog = false;
|
||||
};
|
||||
|
||||
$: filteredMemories = query
|
||||
? memories.filter((memory) => {
|
||||
const value = query.toLowerCase();
|
||||
return (
|
||||
memory.content?.toLowerCase().includes(value) ||
|
||||
memory.path?.toLowerCase().includes(value) ||
|
||||
memory.type?.toLowerCase().includes(value)
|
||||
);
|
||||
})
|
||||
: memories;
|
||||
|
||||
$: sortedMemories = [...filteredMemories].sort(
|
||||
(a, b) => (b.updated_at ?? 0) - (a.updated_at ?? 0)
|
||||
);
|
||||
|
||||
onMount(async () => {
|
||||
enableMemory = $settings?.memory ?? $config?.features?.enable_memories ?? false;
|
||||
await loadMemories();
|
||||
});
|
||||
</script>
|
||||
|
||||
<ManageModal bind:show={showManageModal} />
|
||||
|
||||
<form
|
||||
id="tab-personalization"
|
||||
class="flex flex-col h-full justify-between space-y-3 text-sm"
|
||||
@@ -44,7 +110,7 @@
|
||||
<div class="flex items-center gap-2 text-xs text-gray-400 dark:text-gray-600">
|
||||
{$i18n.t('Memory')}
|
||||
<span
|
||||
class="text-[0.65rem] font-normal uppercase px-1.5 py-0.5 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400"
|
||||
class="inline-flex items-center text-[0.625rem] font-normal uppercase leading-none text-gray-400 dark:text-gray-600"
|
||||
>{$i18n.t('Experimental')}</span
|
||||
>
|
||||
</div>
|
||||
@@ -59,27 +125,122 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p class="-mt-1 text-[0.6875rem] text-gray-400 dark:text-gray-600">
|
||||
{$i18n
|
||||
.t(
|
||||
"You can personalize your interactions with LLMs by adding memories through the 'Manage' button below, making them more helpful and tailored to you."
|
||||
)
|
||||
.replace($i18n.t('Manage'), $i18n.t('Add Memory'))}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-gray-600 dark:text-gray-400">
|
||||
<div>
|
||||
{$i18n.t(
|
||||
"You can personalize your interactions with LLMs by adding memories through the 'Manage' button below, making them more helpful and tailored to you."
|
||||
)}
|
||||
{#if enableMemory}
|
||||
<div class="mt-5">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<h3 class="text-xs text-gray-400 dark:text-gray-600">
|
||||
{$i18n.t('Memory')}
|
||||
</h3>
|
||||
|
||||
{#if !loadingMemories}
|
||||
<div class="text-xs text-gray-400 dark:text-gray-600">{memories.length}</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
|
||||
on:click={() => {
|
||||
selectedMemory = null;
|
||||
showMemoryModal = true;
|
||||
}}
|
||||
>
|
||||
{$i18n.t('Add Memory')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if loadingMemories}
|
||||
<div class="w-full flex justify-center items-center min-h-16">
|
||||
<Spinner className="size-4" />
|
||||
</div>
|
||||
{:else}
|
||||
{#if memories.length > 0}
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<input
|
||||
class="w-full text-xs py-1 bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700"
|
||||
bind:value={query}
|
||||
placeholder={$i18n.t('Search Memories')}
|
||||
maxlength="500"
|
||||
/>
|
||||
|
||||
{#if query}
|
||||
<button
|
||||
type="button"
|
||||
class="shrink-0 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
|
||||
on:click={() => {
|
||||
query = '';
|
||||
}}
|
||||
>
|
||||
{$i18n.t('Clear')}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if sortedMemories.length === 0}
|
||||
<div class="text-xs text-gray-500 dark:text-gray-400 min-h-16 flex items-center">
|
||||
{#if memories.length === 0}
|
||||
{$i18n.t('Memories accessible by LLMs will be shown here.')}
|
||||
{:else}
|
||||
{$i18n.t('No results found')}
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-col gap-2.5">
|
||||
{#each sortedMemories as memory (memory.id)}
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div
|
||||
class="min-w-0 whitespace-pre-wrap break-words text-xs text-gray-600 dark:text-gray-400"
|
||||
>
|
||||
{memory.content}
|
||||
</div>
|
||||
<div class="flex shrink-0 items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
|
||||
on:click={() => editMemory(memory)}
|
||||
>
|
||||
{$i18n.t('Edit')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
|
||||
on:click={() => confirmDeleteMemory(memory)}
|
||||
>
|
||||
{$i18n.t('Remove')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="mt-3 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:underline transition"
|
||||
on:click={() => {
|
||||
if (memories.length > 0) {
|
||||
showClearConfirmDialog = true;
|
||||
} else {
|
||||
toast.error($i18n.t('No memories to clear'));
|
||||
}
|
||||
}}
|
||||
>
|
||||
{$i18n.t('Clear memory')}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 mb-1 ml-1">
|
||||
<button
|
||||
type="button"
|
||||
class="px-3.5 py-1.5 font-normal hover:bg-black/5 dark:hover:bg-white/5 outline outline-1 outline-gray-300 dark:outline-gray-800 rounded-3xl"
|
||||
on:click={() => {
|
||||
showManageModal = true;
|
||||
}}
|
||||
>
|
||||
{$i18n.t('Manage')}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="shrink-0 flex justify-end text-sm font-normal">
|
||||
@@ -91,3 +252,52 @@
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<ConfirmDialog
|
||||
title={$i18n.t('Clear Memory')}
|
||||
message={$i18n.t('Are you sure you want to clear all memories? This action cannot be undone.')}
|
||||
show={showClearConfirmDialog}
|
||||
on:confirm={onClearConfirmed}
|
||||
on:cancel={() => {
|
||||
showClearConfirmDialog = false;
|
||||
}}
|
||||
/>
|
||||
|
||||
<ConfirmDialog
|
||||
title={$i18n.t('Delete Memory?')}
|
||||
show={showDeleteConfirm}
|
||||
on:confirm={async () => {
|
||||
if (!selectedMemory) return;
|
||||
|
||||
const res = await deleteMemoryById(localStorage.token, selectedMemory.id).catch((error) => {
|
||||
toast.error(`${error}`);
|
||||
return null;
|
||||
});
|
||||
|
||||
if (res) {
|
||||
toast.success($i18n.t('Memory deleted successfully'));
|
||||
await loadMemories();
|
||||
}
|
||||
showDeleteConfirm = false;
|
||||
}}
|
||||
on:cancel={() => {
|
||||
showDeleteConfirm = false;
|
||||
}}
|
||||
>
|
||||
<div class="text-sm text-gray-500 flex-1">
|
||||
{$i18n.t('Are you sure you want to delete this memory? This action cannot be undone.')}
|
||||
<div
|
||||
class="mt-2 bg-gray-50 dark:bg-gray-900 p-3 rounded-xl border border-gray-100 dark:border-gray-800 text-black dark:text-white whitespace-pre-wrap break-words max-h-32 overflow-y-auto"
|
||||
>
|
||||
{selectedMemory?.content}
|
||||
</div>
|
||||
</div>
|
||||
</ConfirmDialog>
|
||||
|
||||
<MemoryModal
|
||||
bind:show={showMemoryModal}
|
||||
memory={selectedMemory}
|
||||
on:save={async () => {
|
||||
await loadMemories();
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -1,306 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { toast } from 'svelte-sonner';
|
||||
import dayjs from 'dayjs';
|
||||
import { getContext } from 'svelte';
|
||||
|
||||
import Modal from '$lib/components/common/Modal.svelte';
|
||||
import MemoryModal from './MemoryModal.svelte';
|
||||
import { deleteMemoriesByUserId, deleteMemoryById, getMemories } from '$lib/apis/memories';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import localizedFormat from 'dayjs/plugin/localizedFormat';
|
||||
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
|
||||
import Spinner from '$lib/components/common/Spinner.svelte';
|
||||
|
||||
import XMark from '$lib/components/icons/XMark.svelte';
|
||||
import Pencil from '$lib/components/icons/Pencil.svelte';
|
||||
import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
|
||||
import Search from '$lib/components/icons/Search.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
dayjs.extend(localizedFormat);
|
||||
|
||||
export let show = false;
|
||||
|
||||
type Memory = {
|
||||
id: string;
|
||||
content: string;
|
||||
type?: string;
|
||||
path?: string;
|
||||
updated_at?: number;
|
||||
};
|
||||
|
||||
let memories: Memory[] = [];
|
||||
let loading = true;
|
||||
let loaded = false;
|
||||
|
||||
let query = '';
|
||||
|
||||
let showMemoryModal = false;
|
||||
let selectedMemory: Memory | null = null;
|
||||
|
||||
let showClearConfirmDialog = false;
|
||||
let showDeleteConfirm = false;
|
||||
|
||||
const loadMemories = async () => {
|
||||
loading = true;
|
||||
memories = (await getMemories(localStorage.token)) ?? [];
|
||||
loading = false;
|
||||
};
|
||||
|
||||
const editMemory = (memory: Memory) => {
|
||||
selectedMemory = memory;
|
||||
showMemoryModal = true;
|
||||
};
|
||||
|
||||
const confirmDeleteMemory = (memory: Memory) => {
|
||||
selectedMemory = memory;
|
||||
showDeleteConfirm = true;
|
||||
};
|
||||
|
||||
const memoryTypeLabel = (memory: Memory) =>
|
||||
(memory.type ?? 'user') === 'user' ? $i18n.t('User') : $i18n.t('Context');
|
||||
|
||||
const memoryUpdatedAt = (memory: Memory) =>
|
||||
memory.updated_at ? dayjs(memory.updated_at * 1000).format('MMM D, h:mm A') : '';
|
||||
|
||||
$: filteredMemories = query
|
||||
? memories.filter((memory) => {
|
||||
const value = query.toLowerCase();
|
||||
return (
|
||||
memory.content?.toLowerCase().includes(value) ||
|
||||
memory.path?.toLowerCase().includes(value) ||
|
||||
memory.type?.toLowerCase().includes(value)
|
||||
);
|
||||
})
|
||||
: memories;
|
||||
|
||||
$: sortedMemories = [...filteredMemories].sort(
|
||||
(a, b) => (b.updated_at ?? 0) - (a.updated_at ?? 0)
|
||||
);
|
||||
|
||||
let onClearConfirmed = async () => {
|
||||
const res = await deleteMemoriesByUserId(localStorage.token).catch((error) => {
|
||||
toast.error(`${error}`);
|
||||
return null;
|
||||
});
|
||||
|
||||
if (res && memories.length > 0) {
|
||||
toast.success($i18n.t('Memory cleared successfully'));
|
||||
memories = [];
|
||||
}
|
||||
showClearConfirmDialog = false;
|
||||
};
|
||||
|
||||
$: if (show && !loaded) {
|
||||
loaded = true;
|
||||
loadMemories();
|
||||
}
|
||||
|
||||
$: if (!show) {
|
||||
query = '';
|
||||
loaded = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal size="lg" bind:show>
|
||||
<div>
|
||||
<div class="flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="text-sm font-medium">{$i18n.t('Memory')}</div>
|
||||
|
||||
{#if !loading}
|
||||
<div class="text-sm font-medium text-gray-500 dark:text-gray-500">
|
||||
{memories.length}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
|
||||
on:click={() => (show = false)}
|
||||
>
|
||||
<XMark className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col w-full px-5 pb-4 dark:text-gray-200">
|
||||
<div class="flex flex-1 items-center w-full mb-1">
|
||||
<div class="self-center ml-1 mr-3">
|
||||
<Search className="size-3.5" />
|
||||
</div>
|
||||
<input
|
||||
class="w-full text-sm py-1 rounded-r-xl outline-hidden bg-transparent"
|
||||
bind:value={query}
|
||||
placeholder={$i18n.t('Search Memories')}
|
||||
maxlength="500"
|
||||
/>
|
||||
|
||||
{#if query}
|
||||
<div class="self-center pl-1.5 translate-y-[0.5px] bg-transparent">
|
||||
<button
|
||||
class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
|
||||
on:click={() => {
|
||||
query = '';
|
||||
}}
|
||||
>
|
||||
<XMark className="size-3" strokeWidth="2" />
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col w-full">
|
||||
{#if !loading}
|
||||
{#if sortedMemories.length === 0}
|
||||
<div
|
||||
class="text-xs text-gray-500 dark:text-gray-400 text-center px-5 min-h-20 w-full flex justify-center items-center"
|
||||
>
|
||||
{#if memories.length === 0}
|
||||
{$i18n.t('Memories accessible by LLMs will be shown here.')}
|
||||
{:else}
|
||||
{$i18n.t('No results found')}
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="text-left text-sm w-full max-h-[28rem] overflow-y-auto space-y-0.5">
|
||||
{#each sortedMemories as memory (memory.id)}
|
||||
<div class="group w-full flex justify-between items-center text-sm py-1 px-1">
|
||||
<button
|
||||
type="button"
|
||||
class="flex-1 min-w-0 text-left flex items-center gap-1.5 pr-2 text-gray-900 dark:text-gray-100 hover:text-black dark:hover:text-white transition leading-5"
|
||||
on:click={() => editMemory(memory)}
|
||||
>
|
||||
<div class="truncate leading-5">
|
||||
{memory.content}
|
||||
</div>
|
||||
<span class="shrink-0 text-[11px] leading-5 text-gray-400 dark:text-gray-500">
|
||||
{memoryTypeLabel(memory)}
|
||||
</span>
|
||||
{#if memory.path}
|
||||
<span
|
||||
class="hidden sm:block shrink min-w-0 truncate text-[11px] leading-5 text-gray-400 dark:text-gray-500"
|
||||
>
|
||||
{memory.path}
|
||||
</span>
|
||||
{/if}
|
||||
{#if memoryUpdatedAt(memory)}
|
||||
<div
|
||||
class="hidden sm:block shrink-0 text-[11px] leading-5 text-gray-400 dark:text-gray-500"
|
||||
>
|
||||
{memoryUpdatedAt(memory)}
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<div class="flex items-center shrink-0">
|
||||
<div
|
||||
class="flex items-center text-gray-500 dark:text-gray-400 opacity-70 group-hover:opacity-100 focus-within:opacity-100 transition"
|
||||
>
|
||||
<Tooltip content={$i18n.t('Edit')}>
|
||||
<button
|
||||
class="self-center w-fit text-sm p-1 leading-none hover:text-gray-900 dark:hover:text-gray-100 transition"
|
||||
on:click={(e) => {
|
||||
e.stopPropagation();
|
||||
editMemory(memory);
|
||||
}}
|
||||
>
|
||||
<Pencil className="size-4" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip content={$i18n.t('Delete')}>
|
||||
<button
|
||||
class="self-center w-fit text-sm p-1 leading-none hover:text-gray-900 dark:hover:text-gray-100 transition"
|
||||
on:click={(e) => {
|
||||
e.stopPropagation();
|
||||
confirmDeleteMemory(memory);
|
||||
}}
|
||||
>
|
||||
<GarbageBin className="size-4" strokeWidth="1.5" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="w-full flex justify-center items-center min-h-20">
|
||||
<Spinner className="size-4" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center text-sm mt-2">
|
||||
<button
|
||||
class="px-2 py-1 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:underline transition"
|
||||
on:click={() => {
|
||||
if (memories.length > 0) {
|
||||
showClearConfirmDialog = true;
|
||||
} else {
|
||||
toast.error($i18n.t('No memories to clear'));
|
||||
}
|
||||
}}>{$i18n.t('Clear memory')}</button
|
||||
>
|
||||
|
||||
<button
|
||||
class="px-3.5 py-1.5 font-normal hover:bg-black/5 dark:hover:bg-white/5 outline outline-1 outline-gray-100 dark:outline-gray-800 rounded-3xl"
|
||||
on:click={() => {
|
||||
selectedMemory = null;
|
||||
showMemoryModal = true;
|
||||
}}>{$i18n.t('Add Memory')}</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<ConfirmDialog
|
||||
title={$i18n.t('Clear Memory')}
|
||||
message={$i18n.t('Are you sure you want to clear all memories? This action cannot be undone.')}
|
||||
show={showClearConfirmDialog}
|
||||
on:confirm={onClearConfirmed}
|
||||
on:cancel={() => {
|
||||
showClearConfirmDialog = false;
|
||||
}}
|
||||
/>
|
||||
|
||||
<ConfirmDialog
|
||||
title={$i18n.t('Delete Memory?')}
|
||||
show={showDeleteConfirm}
|
||||
on:confirm={async () => {
|
||||
if (!selectedMemory) return;
|
||||
|
||||
const res = await deleteMemoryById(localStorage.token, selectedMemory.id).catch((error) => {
|
||||
toast.error(`${error}`);
|
||||
return null;
|
||||
});
|
||||
|
||||
if (res) {
|
||||
toast.success($i18n.t('Memory deleted successfully'));
|
||||
await loadMemories();
|
||||
}
|
||||
showDeleteConfirm = false;
|
||||
}}
|
||||
on:cancel={() => {
|
||||
showDeleteConfirm = false;
|
||||
}}
|
||||
>
|
||||
<div class="text-sm text-gray-500 flex-1">
|
||||
{$i18n.t('Are you sure you want to delete this memory? This action cannot be undone.')}
|
||||
<div
|
||||
class="mt-2 bg-gray-50 dark:bg-gray-900 p-3 rounded-xl border border-gray-100 dark:border-gray-800 text-black dark:text-white whitespace-pre-wrap break-words max-h-32 overflow-y-auto"
|
||||
>
|
||||
{selectedMemory?.content}
|
||||
</div>
|
||||
</div>
|
||||
</ConfirmDialog>
|
||||
|
||||
<MemoryModal
|
||||
bind:show={showMemoryModal}
|
||||
memory={selectedMemory}
|
||||
on:save={async () => {
|
||||
await loadMemories();
|
||||
}}
|
||||
/>
|
||||
@@ -52,6 +52,9 @@
|
||||
|
||||
const i18n: Writable<any> = getContext('i18n');
|
||||
|
||||
const highContrastInputClass =
|
||||
'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
|
||||
|
||||
export let show: boolean | string | SettingsModalRequest = false;
|
||||
let modalShow = false;
|
||||
let lastShow: boolean | string | SettingsModalRequest = false;
|
||||
@@ -851,8 +854,7 @@
|
||||
</div>
|
||||
<label class="sr-only" for="search-input-settings-modal">{$i18n.t('Search')}</label>
|
||||
<input
|
||||
class={`w-full py-1 text-xs bg-transparent dark:text-gray-300 outline-hidden
|
||||
${($settings?.highContrastMode ?? false) ? 'placeholder-gray-800' : ''}`}
|
||||
class={`w-full text-xs ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent py-1 outline-hidden dark:text-gray-300'}`}
|
||||
bind:value={search}
|
||||
id="search-input-settings-modal"
|
||||
on:input={searchDebounceHandler}
|
||||
|
||||
Reference in New Issue
Block a user