bhetherman/open-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-06-29 05:56:08 -05:00
parent b0487dd6dd
commit 260f3c3a22
7 changed files with 302 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/apis/memories/index.ts
+6 -4
View File
@@ -28,7 +28,7 @@ export const getMemories = async (token: string) => {
return res;
};
export const addNewMemory = async (token: string, content: string, type = 'user') => {
export const addNewMemory = async (token: string, content: string, type = 'user', path = '') => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/memories/add`, {
@@ -40,7 +40,8 @@ export const addNewMemory = async (token: string, content: string, type = 'user'
},
body: JSON.stringify({
content: content,
type
type,
path
})
})
.then(async (res) => {
@@ -64,10 +65,11 @@ export const updateMemoryById = async (
token: string,
id: string,
content: string,
type?: string
type?: string,
path?: string
) => {
let error = null;
const body = type ? { content, type } : { content };
const body = { content, ...(type ? { type } : {}), ...(path !== undefined ? { path } : {}) };
const res = await fetch(`${WEBUI_API_BASE_URL}/memories/${id}/update`, {
method: 'POST',
src/lib/components/chat/Settings/Personalization/AddMemoryModal.svelte
-116
View File
@@ -1,116 +0,0 @@
<script>
import { createEventDispatcher, getContext } from 'svelte';
import Modal from '$lib/components/common/Modal.svelte';
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';
const dispatch = createEventDispatcher();
export let show;
const i18n = getContext('i18n');
let loading = false;
let content = '';
let type = 'user';
const submitHandler = async () => {
loading = true;
const res = await addNewMemory(localStorage.token, content, type).catch((error) => {
toast.error(`${error}`);
return null;
});
if (res) {
console.log(res);
toast.success($i18n.t('Memory added successfully'));
content = '';
type = 'user';
show = false;
dispatch('save');
}
loading = false;
};
</script>
<Modal bind:show size="sm">
<div>
<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
<div class=" text-lg font-medium self-center">
{$i18n.t('Add Memory')}
</div>
<button
class="self-center"
on:click={() => {
show = false;
}}
>
<XMark className={'size-5'} />
</button>
</div>
<div class="flex flex-col md:flex-row w-full px-5 pb-4 md:space-x-4 dark:text-gray-200">
<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
<form
class="flex flex-col w-full"
on:submit|preventDefault={() => {
submitHandler();
}}
>
<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 outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700"
rows="6"
style="resize: vertical;"
placeholder={type === 'user'
? $i18n.t('Add a preference, fact, or instruction about you')
: $i18n.t('Add durable context for future chats')}
/>
</div>
<div class="flex justify-end pt-1 text-sm font-medium">
<button
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {loading
? ' cursor-not-allowed'
: ''}"
type="submit"
disabled={loading}
>
{$i18n.t('Add')}
{#if loading}
<span class="shrink-0">
<Spinner />
</span>
{/if}
</button>
</div>
</form>
</div>
</div>
</div>
</Modal>
src/lib/components/chat/Settings/Personalization/ManageModal.svelte
+23 -16
View File
@@ -4,10 +4,9 @@
import { getContext } from 'svelte';
import Modal from '$lib/components/common/Modal.svelte';
import AddMemoryModal from './AddMemoryModal.svelte';
import MemoryModal from './MemoryModal.svelte';
import { deleteMemoriesByUserId, deleteMemoryById, getMemories } from '$lib/apis/memories';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import EditMemoryModal from './EditMemoryModal.svelte';
import localizedFormat from 'dayjs/plugin/localizedFormat';
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import Spinner from '$lib/components/common/Spinner.svelte';
@@ -26,6 +25,7 @@
id: string;
content: string;
type?: string;
path?: string;
updated_at?: number;
};
@@ -35,8 +35,7 @@
let query = '';
let showAddMemoryModal = false;
let showEditMemoryModal = false;
let showMemoryModal = false;
let selectedMemory: Memory | null = null;
let showClearConfirmDialog = false;
@@ -50,7 +49,7 @@
const editMemory = (memory: Memory) => {
selectedMemory = memory;
showEditMemoryModal = true;
showMemoryModal = true;
};
const confirmDeleteMemory = (memory: Memory) => {
@@ -65,7 +64,14 @@
memory.updated_at ? dayjs(memory.updated_at * 1000).format('MMM D, h:mm A') : '';
$: filteredMemories = query
? memories.filter((memory) => memory.content?.toLowerCase().includes(query.toLowerCase()))
? 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(
@@ -171,6 +177,13 @@
>
{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"
@@ -235,7 +248,8 @@
<button
class="px-3.5 py-1.5 font-medium hover:bg-black/5 dark:hover:bg-white/5 outline outline-1 outline-gray-100 dark:outline-gray-800 rounded-3xl"
on:click={() => {
showAddMemoryModal = true;
selectedMemory = null;
showMemoryModal = true;
}}>{$i18n.t('Add Memory')}</button
>
</div>
@@ -284,15 +298,8 @@
</div>
</ConfirmDialog>
<AddMemoryModal
bind:show={showAddMemoryModal}
on:save={async () => {
await loadMemories();
}}
/>
<EditMemoryModal
bind:show={showEditMemoryModal}
<MemoryModal
bind:show={showMemoryModal}
memory={selectedMemory}
on:save={async () => {
await loadMemories();
src/lib/components/chat/Settings/Personalization/EditMemoryModal.svelte → src/lib/components/chat/Settings/Personalization/MemoryModal.svelte
+43 -32
View File
@@ -2,48 +2,46 @@
import { createEventDispatcher, getContext } from 'svelte';
import { toast } from 'svelte-sonner';
import { updateMemoryById } from '$lib/apis/memories';
import { addNewMemory, updateMemoryById } from '$lib/apis/memories';
import Spinner from '$lib/components/common/Spinner.svelte';
import Modal from '$lib/components/common/Modal.svelte';
import Spinner from '$lib/components/common/Spinner.svelte';
import XMark from '$lib/components/icons/XMark.svelte';
const dispatch = createEventDispatcher();
export let show;
export let memory = {};
export let memory = null;
const i18n = getContext('i18n');
let loading = false;
let content = '';
let type = 'user';
let path = '';
$: edit = !!memory?.id;
$: if (show) {
setContent();
}
const setContent = () => {
content = memory?.content ?? '';
type = memory?.type ?? 'user';
};
path = memory?.path ?? '';
}
const submitHandler = async () => {
loading = true;
const res = await updateMemoryById(localStorage.token, memory.id, content, type).catch(
(error) => {
toast.error(`${error}`);
return null;
}
);
const res = await (edit
? updateMemoryById(localStorage.token, memory.id, content, type, path)
: addNewMemory(localStorage.token, content, type, path)
).catch((error) => {
toast.error(`${error}`);
return null;
});
if (res) {
console.log(res);
toast.success($i18n.t('Memory updated successfully'));
dispatch('save');
toast.success(edit ? $i18n.t('Memory updated successfully') : $i18n.t('Memory added successfully'));
show = false;
dispatch('save');
}
loading = false;
@@ -54,26 +52,20 @@
<div>
<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
<div class=" text-lg font-medium self-center">
{$i18n.t('Edit Memory')}
{#if edit}
{$i18n.t('Edit Memory')}
{:else}
{$i18n.t('Add Memory')}
{/if}
</div>
<button
class="self-center"
on:click={() => {
show = false;
}}
>
<button class="self-center" on:click={() => (show = false)}>
<XMark className={'size-5'} />
</button>
</div>
<div class="flex flex-col md:flex-row w-full px-5 pb-4 md:space-x-4 dark:text-gray-200">
<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
<form
class="flex flex-col w-full"
on:submit|preventDefault={() => {
submitHandler();
}}
>
<form class="flex flex-col w-full" on:submit|preventDefault={submitHandler}>
<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>
@@ -102,6 +94,21 @@
? $i18n.t('Add a preference, fact, or instruction about you')
: $i18n.t('Add durable context for future chats')}
/>
<div class="flex flex-col w-full mt-1.5">
<label for="memory-path" class="mb-0.5 text-xs text-gray-500">
{$i18n.t('Path')}
<span class="opacity-50">({$i18n.t('optional')})</span>
</label>
<input
id="memory-path"
bind:value={path}
class="w-full text-sm bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700"
placeholder={$i18n.t('Path')}
autocomplete="off"
/>
</div>
</div>
<div class="flex justify-end pt-1 text-sm font-medium">
@@ -112,7 +119,11 @@
type="submit"
disabled={loading}
>
{$i18n.t('Update')}
{#if edit}
{$i18n.t('Update')}
{:else}
{$i18n.t('Add')}
{/if}
{#if loading}
<span class="shrink-0">