[Open WebUI] 메모리 항목 삭제 시 확인 대화상자 추가

PR 링크: open-webui/open-webui#22888 상태: Merged | 변경: +31 / -13

들어가며

Open WebUI의 Memory(Experimental) 관리 모달에서 개별 메모리 항목을 삭제할 때 즉시 삭제가 실행되어, 실수로 클릭한 경우 복구할 수 없었다. 전체 삭제(Clear All)에는 이미 확인 대화상자가 있었으나, 개별 삭제에는 없었다. 이 PR은 개별 삭제에도 확인 대화상자를 추가하여 UX 일관성을 맞춘다.

핵심 코드 분석

Before: 즉시 삭제

on:click={async (e) => {
    e.stopPropagation();
    const res = await deleteMemoryById(
        localStorage.token,
        memory.id
    ).catch((error) => {
        toast.error(`${error}`);
        return null;
    });

    if (res) {
        toast.success($i18n.t('Memory deleted successfully'));
        memories = await getMemories(localStorage.token);
    }
}}

After: 확인 대화상자를 통한 삭제

on:click={(e) => {
    e.stopPropagation();
    selectedMemory = memory;
    showDeleteConfirm = true;
}}

<ConfirmDialog
    title={$i18n.t('Delete Memory?')}
    show={showDeleteConfirm}
    on:confirm={async () => {
        const res = await deleteMemoryById(localStorage.token, selectedMemory.id)
            .catch((error) => {
                toast.error(`${error}`);
                return null;
            });
        if (res) {
            toast.success($i18n.t('Memory deleted successfully'));
            memories = await getMemories(localStorage.token);
        }
        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?')}
        <div class="mt-2 bg-gray-50 dark:bg-gray-900 p-3 rounded-xl">
            {selectedMemory?.content}
        </div>
    </div>
</ConfirmDialog>

왜 이게 좋은가

1. 실수 방지: 비가역적 삭제 작업에 확인 단계를 추가하여 데이터 손실을 방지한다.
2. UX 일관성: 전체 삭제와 동일한 확인 패턴을 적용하여 UI 동작의 일관성을 유지한다.
3. 컨텍스트 제공: 대화상자에서 삭제 대상 메모리의 내용을 보여주어, 사용자가 올바른 항목을 삭제하는지 확인할 수 있다.
4. i18n 지원: 모든 텍스트가 $i18n.t()로 감싸져 다국어 지원이 가능하다.

참고 자료

• Open WebUI GitHub
• UI Pattern: Confirmation Dialog