mirror of
https://github.com/open-webui/open-webui.git
synced 2026-08-28 05:27:35 +00:00
refac
This commit is contained in:
Timothy Jaeryang Baek
parent
8c57cfa645
commit
1da3b7f7e8
4 changed files with 141 additions and 153 deletions
|
|
@ -1,8 +1,7 @@
|
|||
<script lang="ts">
|
||||
import Switch from '$lib/components/common/Switch.svelte';
|
||||
import { config, models, settings, user } from '$lib/stores';
|
||||
import { createEventDispatcher, onMount, getContext, tick } from 'svelte';
|
||||
import { toast } from 'svelte-sonner';
|
||||
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';
|
||||
const dispatch = createEventDispatcher();
|
||||
|
|
@ -64,21 +63,12 @@
|
|||
"You can personalize your interactions with LLMs by adding memories through the 'Manage' button below, making them more helpful and tailored to you."
|
||||
)}
|
||||
</div>
|
||||
|
||||
<!-- <div class="mt-3">
|
||||
To understand what LLM remembers or teach it something new, just chat with it:
|
||||
|
||||
<div>- “Remember that I like concise responses.”</div>
|
||||
<div>- “I just got a puppy!”</div>
|
||||
<div>- “What do you remember about me?”</div>
|
||||
<div>- “Where did we leave off on my last project?”</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="mt-3 mb-1 ml-1">
|
||||
<button
|
||||
type="button"
|
||||
class=" px-3.5 py-1.5 font-medium hover:bg-black/5 dark:hover:bg-white/5 outline outline-1 outline-gray-300 dark:outline-gray-800 rounded-3xl"
|
||||
class="px-3.5 py-1.5 font-medium 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;
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import { createEventDispatcher, getContext } from 'svelte';
|
||||
|
||||
import Modal from '$lib/components/common/Modal.svelte';
|
||||
import { addNewMemory, updateMemoryById } from '$lib/apis/memories';
|
||||
import { addNewMemory } from '$lib/apis/memories';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import Spinner from '$lib/components/common/Spinner.svelte';
|
||||
import XMark from '$lib/components/icons/XMark.svelte';
|
||||
|
|
@ -14,11 +14,12 @@
|
|||
|
||||
let loading = false;
|
||||
let content = '';
|
||||
let type = 'user';
|
||||
|
||||
const submitHandler = async () => {
|
||||
loading = true;
|
||||
|
||||
const res = await addNewMemory(localStorage.token, content).catch((error) => {
|
||||
const res = await addNewMemory(localStorage.token, content, type).catch((error) => {
|
||||
toast.error(`${error}`);
|
||||
|
||||
return null;
|
||||
|
|
@ -28,6 +29,7 @@
|
|||
console.log(res);
|
||||
toast.success($i18n.t('Memory added successfully'));
|
||||
content = '';
|
||||
type = 'user';
|
||||
show = false;
|
||||
dispatch('save');
|
||||
}
|
||||
|
|
@ -60,18 +62,34 @@
|
|||
submitHandler();
|
||||
}}
|
||||
>
|
||||
<div class="">
|
||||
<div class="px-1">
|
||||
<div class="flex w-full justify-between items-center mb-1.5">
|
||||
<div class="text-xs text-gray-500">{$i18n.t('Type')}</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="text-xs text-gray-700 dark:text-gray-300"
|
||||
on:click={() => {
|
||||
type = type === 'user' ? 'context' : 'user';
|
||||
}}
|
||||
>
|
||||
{#if type === 'user'}
|
||||
{$i18n.t('User')}
|
||||
{:else}
|
||||
{$i18n.t('Context')}
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
bind:value={content}
|
||||
class=" bg-transparent w-full text-sm rounded-xl p-3 outline outline-1 outline-gray-100 dark:outline-gray-800"
|
||||
class="bg-transparent w-full text-sm outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700"
|
||||
rows="6"
|
||||
style="resize: vertical;"
|
||||
placeholder={$i18n.t('Enter a detail about yourself for your LLMs to recall')}
|
||||
placeholder={type === 'user'
|
||||
? $i18n.t('Add a preference, fact, or instruction about you')
|
||||
: $i18n.t('Add durable context for future chats')}
|
||||
/>
|
||||
|
||||
<div class="text-xs text-gray-500">
|
||||
ⓘ {$i18n.t('Refer to yourself as "User" (e.g., "User is learning Spanish")')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end pt-1 text-sm font-medium">
|
||||
|
|
|
|||
|
|
@ -17,23 +17,27 @@
|
|||
|
||||
let loading = false;
|
||||
let content = '';
|
||||
let type = 'user';
|
||||
|
||||
$: if (show) {
|
||||
setContent();
|
||||
}
|
||||
|
||||
const setContent = () => {
|
||||
content = memory.content;
|
||||
content = memory?.content ?? '';
|
||||
type = memory?.type ?? 'user';
|
||||
};
|
||||
|
||||
const submitHandler = async () => {
|
||||
loading = true;
|
||||
|
||||
const res = await updateMemoryById(localStorage.token, memory.id, content).catch((error) => {
|
||||
toast.error(`${error}`);
|
||||
const res = await updateMemoryById(localStorage.token, memory.id, content, type).catch(
|
||||
(error) => {
|
||||
toast.error(`${error}`);
|
||||
|
||||
return null;
|
||||
});
|
||||
return null;
|
||||
}
|
||||
);
|
||||
|
||||
if (res) {
|
||||
console.log(res);
|
||||
|
|
@ -70,18 +74,34 @@
|
|||
submitHandler();
|
||||
}}
|
||||
>
|
||||
<div class="">
|
||||
<div class="px-1">
|
||||
<div class="flex w-full justify-between items-center mb-1.5">
|
||||
<div class="text-xs text-gray-500">{$i18n.t('Type')}</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="text-xs text-gray-700 dark:text-gray-300"
|
||||
on:click={() => {
|
||||
type = type === 'user' ? 'context' : 'user';
|
||||
}}
|
||||
>
|
||||
{#if type === 'user'}
|
||||
{$i18n.t('User')}
|
||||
{:else}
|
||||
{$i18n.t('Context')}
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
bind:value={content}
|
||||
class=" bg-transparent w-full text-sm rounded-xl p-3 outline outline-1 outline-gray-100 dark:outline-gray-800"
|
||||
class="bg-transparent w-full text-sm outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700"
|
||||
rows="6"
|
||||
style="resize: vertical;"
|
||||
placeholder={$i18n.t('Enter a detail about yourself for your LLMs to recall')}
|
||||
placeholder={type === 'user'
|
||||
? $i18n.t('Add a preference, fact, or instruction about you')
|
||||
: $i18n.t('Add durable context for future chats')}
|
||||
/>
|
||||
|
||||
<div class="text-xs text-gray-500">
|
||||
ⓘ {$i18n.t('Refer to yourself as "User" (e.g., "User is learning Spanish")')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end pt-1 text-sm font-medium">
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { toast } from 'svelte-sonner';
|
||||
import dayjs from 'dayjs';
|
||||
import { getContext, createEventDispatcher } from 'svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
import { getContext } from 'svelte';
|
||||
|
||||
import Modal from '$lib/components/common/Modal.svelte';
|
||||
import AddMemoryModal from './AddMemoryModal.svelte';
|
||||
|
|
@ -17,59 +15,62 @@
|
|||
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 Plus from '$lib/components/icons/Plus.svelte';
|
||||
import Search from '$lib/components/icons/Search.svelte';
|
||||
import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
|
||||
import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
dayjs.extend(localizedFormat);
|
||||
|
||||
export let show = false;
|
||||
|
||||
let memories = [];
|
||||
type Memory = {
|
||||
id: string;
|
||||
content: string;
|
||||
type?: string;
|
||||
updated_at?: number;
|
||||
};
|
||||
|
||||
let memories: Memory[] = [];
|
||||
let loading = true;
|
||||
let loaded = false;
|
||||
|
||||
let query = '';
|
||||
let orderBy = 'updated_at';
|
||||
let direction = 'desc';
|
||||
|
||||
const setSortKey = (key: string) => {
|
||||
if (orderBy === key) {
|
||||
direction = direction === 'asc' ? 'desc' : 'asc';
|
||||
} else {
|
||||
orderBy = key;
|
||||
direction = 'asc';
|
||||
}
|
||||
};
|
||||
|
||||
let showAddMemoryModal = false;
|
||||
let showEditMemoryModal = false;
|
||||
|
||||
let selectedMemory = null;
|
||||
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;
|
||||
showEditMemoryModal = 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((m) => m.content?.toLowerCase().includes(query.toLowerCase()))
|
||||
? memories.filter((memory) => memory.content?.toLowerCase().includes(query.toLowerCase()))
|
||||
: memories;
|
||||
|
||||
$: sortedMemories = [...filteredMemories].sort((a, b) => {
|
||||
let aVal, bVal;
|
||||
if (orderBy === 'content') {
|
||||
aVal = (a.content ?? '').toLowerCase();
|
||||
bVal = (b.content ?? '').toLowerCase();
|
||||
} else {
|
||||
aVal = a.updated_at ?? 0;
|
||||
bVal = b.updated_at ?? 0;
|
||||
}
|
||||
if (direction === 'asc') {
|
||||
return aVal > bVal ? 1 : -1;
|
||||
} else {
|
||||
return aVal < bVal ? 1 : -1;
|
||||
}
|
||||
});
|
||||
$: sortedMemories = [...filteredMemories].sort(
|
||||
(a, b) => (b.updated_at ?? 0) - (a.updated_at ?? 0)
|
||||
);
|
||||
|
||||
let onClearConfirmed = async () => {
|
||||
const res = await deleteMemoriesByUserId(localStorage.token).catch((error) => {
|
||||
|
|
@ -84,17 +85,19 @@
|
|||
showClearConfirmDialog = false;
|
||||
};
|
||||
|
||||
$: if (show && memories.length === 0 && loading) {
|
||||
(async () => {
|
||||
memories = await getMemories(localStorage.token);
|
||||
loading = false;
|
||||
})();
|
||||
$: if (show && !loaded) {
|
||||
loaded = true;
|
||||
loadMemories();
|
||||
}
|
||||
|
||||
$: if (!show) {
|
||||
query = '';
|
||||
loaded = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal size="lg" bind:show>
|
||||
<div>
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between dark:text-gray-300 px-5 pt-4 pb-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="text-lg font-medium">{$i18n.t('Memory')}</div>
|
||||
|
|
@ -112,7 +115,6 @@
|
|||
</div>
|
||||
|
||||
<div class="flex flex-col w-full px-5 pb-4 dark:text-gray-200">
|
||||
<!-- Search -->
|
||||
<div class="flex flex-1 items-center w-full mb-1">
|
||||
<div class="self-center ml-1 mr-3">
|
||||
<Search className="size-3.5" />
|
||||
|
|
@ -138,7 +140,6 @@
|
|||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Memories List -->
|
||||
<div class="flex flex-col w-full">
|
||||
{#if !loading}
|
||||
{#if sortedMemories.length === 0}
|
||||
|
|
@ -152,84 +153,43 @@
|
|||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
{#if sortedMemories.length > 0}
|
||||
<div class="flex text-xs font-medium mb-1">
|
||||
<button
|
||||
class="px-1.5 py-1 cursor-pointer select-none basis-3/5"
|
||||
on:click={() => setSortKey('content')}
|
||||
>
|
||||
<div class="flex gap-1.5 items-center">
|
||||
{$i18n.t('Content')}
|
||||
{#if orderBy === 'content'}
|
||||
<span class="font-normal">
|
||||
{#if direction === 'asc'}
|
||||
<ChevronUp className="size-2" />
|
||||
{:else}
|
||||
<ChevronDown className="size-2" />
|
||||
{/if}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="invisible">
|
||||
<ChevronUp className="size-2" />
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="px-1.5 py-1 cursor-pointer select-none hidden sm:flex sm:basis-2/5 justify-end"
|
||||
on:click={() => setSortKey('updated_at')}
|
||||
>
|
||||
<div class="flex gap-1.5 items-center">
|
||||
{$i18n.t('Updated at')}
|
||||
{#if orderBy === 'updated_at'}
|
||||
<span class="font-normal">
|
||||
{#if direction === 'asc'}
|
||||
<ChevronUp className="size-2" />
|
||||
{:else}
|
||||
<ChevronDown className="size-2" />
|
||||
{/if}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="invisible">
|
||||
<ChevronUp className="size-2" />
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="text-left text-sm w-full max-h-[28rem] overflow-y-auto">
|
||||
<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="w-full flex justify-between items-center rounded-xl text-sm py-2 px-3 hover:bg-gray-50 dark:hover:bg-gray-850 transition cursor-pointer"
|
||||
on:click={() => {
|
||||
selectedMemory = memory;
|
||||
showEditMemoryModal = true;
|
||||
}}
|
||||
class="group w-full flex justify-between items-center text-sm py-1 px-1"
|
||||
>
|
||||
<div class="flex-1 min-w-0 pr-2">
|
||||
<div class="text-ellipsis line-clamp-1">{memory.content}</div>
|
||||
<div class="text-xs text-gray-500 dark:text-gray-400">
|
||||
{dayjs(memory.updated_at * 1000).format('MMM D, YYYY')}
|
||||
<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>
|
||||
</div>
|
||||
<span
|
||||
class="shrink-0 text-[11px] leading-5 text-gray-400 dark:text-gray-500"
|
||||
>
|
||||
{memoryTypeLabel(memory)}
|
||||
</span>
|
||||
{#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="hidden sm:flex text-gray-500 dark:text-gray-400 text-xs whitespace-nowrap mr-2"
|
||||
class="flex items-center text-gray-500 dark:text-gray-400 opacity-70 group-hover:opacity-100 focus-within:opacity-100 transition"
|
||||
>
|
||||
{dayjs(memory.updated_at * 1000).format('h:mm A')}
|
||||
</div>
|
||||
|
||||
<div class="flex text-gray-600 dark:text-gray-300">
|
||||
<Tooltip content={$i18n.t('Edit')}>
|
||||
<button
|
||||
class="self-center w-fit text-sm p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
|
||||
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();
|
||||
selectedMemory = memory;
|
||||
showEditMemoryModal = true;
|
||||
editMemory(memory);
|
||||
}}
|
||||
>
|
||||
<Pencil className="size-4" />
|
||||
|
|
@ -238,11 +198,10 @@
|
|||
|
||||
<Tooltip content={$i18n.t('Delete')}>
|
||||
<button
|
||||
class="self-center w-fit text-sm p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
|
||||
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();
|
||||
selectedMemory = memory;
|
||||
showDeleteConfirm = true;
|
||||
confirmDeleteMemory(memory);
|
||||
}}
|
||||
>
|
||||
<GarbageBin className="size-4" strokeWidth="1.5" />
|
||||
|
|
@ -261,7 +220,6 @@
|
|||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<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"
|
||||
|
|
@ -299,6 +257,8 @@
|
|||
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;
|
||||
|
|
@ -306,7 +266,7 @@
|
|||
|
||||
if (res) {
|
||||
toast.success($i18n.t('Memory deleted successfully'));
|
||||
memories = await getMemories(localStorage.token);
|
||||
await loadMemories();
|
||||
}
|
||||
showDeleteConfirm = false;
|
||||
}}
|
||||
|
|
@ -314,10 +274,10 @@
|
|||
showDeleteConfirm = false;
|
||||
}}
|
||||
>
|
||||
<div class=" text-sm text-gray-500 flex-1">
|
||||
<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"
|
||||
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>
|
||||
|
|
@ -327,7 +287,7 @@
|
|||
<AddMemoryModal
|
||||
bind:show={showAddMemoryModal}
|
||||
on:save={async () => {
|
||||
memories = await getMemories(localStorage.token);
|
||||
await loadMemories();
|
||||
}}
|
||||
/>
|
||||
|
||||
|
|
@ -335,6 +295,6 @@
|
|||
bind:show={showEditMemoryModal}
|
||||
memory={selectedMemory}
|
||||
on:save={async () => {
|
||||
memories = await getMemories(localStorage.token);
|
||||
await loadMemories();
|
||||
}}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue