diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 3b32e6016..e844d4f39 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { toast } from 'svelte-sonner';
 	import { goto } from '$app/navigation';
 	import {
 		user,
@@ -11,10 +12,11 @@
 		mobile,
 		showArchivedChats
 	} from '$lib/stores';
-	import { onMount, getContext } from 'svelte';
+	import { onMount, getContext, tick } from 'svelte';
 
 	const i18n = getContext('i18n');
 
+	import { updateUserSettings } from '$lib/apis/users';
 	import {
 		deleteChatById,
 		getChatList,
@@ -25,13 +27,12 @@
 		archiveChatById,
 		cloneChatById
 	} from '$lib/apis/chats';
-	import { toast } from 'svelte-sonner';
-	import { fade, slide } from 'svelte/transition';
 	import { WEBUI_BASE_URL } from '$lib/constants';
+
 	import ArchivedChatsModal from './Sidebar/ArchivedChatsModal.svelte';
 	import UserMenu from './Sidebar/UserMenu.svelte';
-	import { updateUserSettings } from '$lib/apis/users';
 	import ChatItem from './Sidebar/ChatItem.svelte';
+	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 
 	const BREAKPOINT = 768;
 
@@ -41,7 +42,9 @@
 	let shiftKey = false;
 
 	let selectedChatId = null;
+	let deleteChat = null;
 
+	let showDeleteConfirm = false;
 	let showDropdown = false;
 	let filteredChatList = [];
 
@@ -152,6 +155,22 @@
 		await updateUserSettings(localStorage.token, { ui: $settings });
 		location.href = '/';
 	};
+
+	const deleteChatHandler = async (id) => {
+		const res = await deleteChatById(localStorage.token, id).catch((error) => {
+			toast.error(error);
+			return null;
+		});
+
+		if (res) {
+			if ($chatId === id) {
+				await chatId.set('');
+				await tick();
+				goto('/');
+			}
+			await chats.set(await getChatList(localStorage.token));
+		}
+	};
 </script>
 
 <ArchivedChatsModal
@@ -161,6 +180,18 @@
 	}}
 />
 
+<DeleteConfirmDialog
+	bind:show={showDeleteConfirm}
+	title="Delete chat?"
+	on:confirm={() => {
+		deleteChatHandler(deleteChat.id);
+	}}
+>
+	<div class=" text-sm text-gray-500">
+		This will delete <span class="  font-semibold">{deleteChat.title}</span>.
+	</div>
+</DeleteConfirmDialog>
+
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 
 {#if $showSidebar}
@@ -433,6 +464,10 @@
 						on:select={() => {
 							selectedChatId = chat.id;
 						}}
+						on:delete={() => {
+							deleteChat = chat;
+							showDeleteConfirm = true;
+						}}
 					/>
 				{/each}
 			</div>
diff --git a/src/lib/components/layout/Sidebar/ChatItem.svelte b/src/lib/components/layout/Sidebar/ChatItem.svelte
index 1273def18..150490690 100644
--- a/src/lib/components/layout/Sidebar/ChatItem.svelte
+++ b/src/lib/components/layout/Sidebar/ChatItem.svelte
@@ -17,7 +17,6 @@
 
 	import ChatMenu from './ChatMenu.svelte';
 	import ShareChatModal from '$lib/components/chat/ShareChatModal.svelte';
-	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
@@ -28,9 +27,7 @@
 
 	let mouseOver = false;
 
-	let showDeleteConfirmDialog = false;
 	let showShareChatModal = false;
-
 	let confirmEdit = false;
 
 	let chatTitle = chat.title;
@@ -46,22 +43,6 @@
 		}
 	};
 
-	const deleteChat = async (id) => {
-		const res = await deleteChatById(localStorage.token, id).catch((error) => {
-			toast.error(error);
-			return null;
-		});
-
-		if (res) {
-			if ($chatId === id) {
-				await chatId.set('');
-				await tick();
-				goto('/');
-			}
-			await chats.set(await getChatList(localStorage.token));
-		}
-	};
-
 	const cloneChatHandler = async (id) => {
 		const res = await cloneChatById(localStorage.token, id).catch((error) => {
 			toast.error(error);
@@ -86,18 +67,6 @@
 
 <ShareChatModal bind:show={showShareChatModal} chatId={chat.id} />
 
-<DeleteConfirmDialog
-	bind:show={showDeleteConfirmDialog}
-	title="Delete chat?"
-	on:confirm={() => {
-		deleteChat(chat.id);
-	}}
->
-	<div class=" text-sm text-gray-500">
-		This will delete <span class="  font-semibold">{chat.title}</span>.
-	</div>
-</DeleteConfirmDialog>
-
 <div class=" w-full pr-2 relative group">
 	{#if confirmEdit}
 		<div
@@ -259,7 +228,7 @@
 						confirmEdit = true;
 					}}
 					deleteHandler={() => {
-						showDeleteConfirmDialog = true;
+						dispatch('delete');
 					}}
 					onClose={() => {
 						selected = false;
@@ -291,7 +260,7 @@
 						id="delete-chat-button"
 						class="hidden"
 						on:click={() => {
-							showDeleteConfirmDialog = true;
+							dispatch('delete');
 						}}
 					>
 						<svg