feat: Add Clear All Conversations for llama-server web-ui #12924
Conversation
Adds a "Clear All Conversations" button to the Sidebar component. Key changes: - Sidebar: Adds UI button, confirmation dialog, and uses context to check for active generation before allowing deletion. Navigates to '/' on success. Updates useEffect dependency. - Storage: Implements `clearAllConversations` method using Dexie transaction. Modifies event system (CallbackConversationChanged, etc.) to handle `string | null` for signalling "clear all" events. Fixes `offConversationChanged` listener removal. - AppContext: Updates event listener (`handleConversationChange`) to accept `string | null` and refresh state correctly on `null`. Fixes `exhaustive-deps` warning.
| Conversations are saved to browser's IndexedDB | ||
| </div> | ||
| {/* Clear All Button - Added */} | ||
| {conversations.length > 0 && ( // Only show if there are conversations to clear | ||
| <button |
There was a problem hiding this comment.
From UX perspective, this button should be hidden in one of the sections under "Settings". It's strange to expose such a dangerous button on the main UI (even when it requires confirmation)
There was a problem hiding this comment.
What are your thoughts on replacing the button with a less intrusive text link in the sidebar footer, next to the IndexedDB notice? Something like this:
<div className="text-center text-xs opacity-40 mt-auto mx-4 pb-2">
Conversations are saved to browser's IndexedDB
<span
onClick={handleClearAll}
className="text-error underline cursor-pointer hover:opacity-70"
>
clear
</span>
</div>
| if (currConv?.id) { | ||
| // Check if there *was* a selected conversation | ||
| const stillExists = await StorageUtils.getOneConversation(currConv.id); | ||
| if (!stillExists) { | ||
| // If the current conv was deleted/cleared, update the local state for highlighting | ||
| setCurrConv(null); | ||
| // Navigation happens via handleClearAll or if user manually deletes and stays on the page | ||
| } | ||
| } |
There was a problem hiding this comment.
I think many changes in this PR are redundant. You can simply window.location.reload() upon clear the database, and everything will be in sync
There was a problem hiding this comment.
You're right, the page is light and window.location.reload() would be quick. However, I generally try to avoid full page reloads as a principle, considering that the update system is already built into the app – using the StorageUtils.onConversationChanged events and React state (useState/useEffect). I made small tweaks (from my point of view :) ) to that system so it could also handle clearing everything.
Motivation:
I often use the llama-server web UI directly for basic chats, as I prefer to avoid launching heavier services like OpenWebUI in Docker just for simple interactions. A key missing piece for me was the ability to easily clear the chat history without having to clear browser data, which felt cumbersome.