From 71def5c4cb6632e8c32065353b64906f74bc0c55 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sat, 16 Mar 2024 01:57:26 -0700
Subject: [PATCH] feat: sidebar ui update

---
 package-lock.json                             | 265 +++++++++++++++---
 package.json                                  |   3 +-
 src/lib/components/common/Dropdown.svelte     |  30 ++
 src/lib/components/icons/GarbageBin.svelte    |  19 ++
 src/lib/components/icons/Pencil.svelte        |  19 ++
 src/lib/components/layout/Sidebar.svelte      |  94 +++----
 .../components/layout/Sidebar/ChatMenu.svelte |  43 +++
 7 files changed, 390 insertions(+), 83 deletions(-)
 create mode 100644 src/lib/components/common/Dropdown.svelte
 create mode 100644 src/lib/components/icons/GarbageBin.svelte
 create mode 100644 src/lib/components/icons/Pencil.svelte
 create mode 100644 src/lib/components/layout/Sidebar/ChatMenu.svelte

diff --git a/package-lock.json b/package-lock.json
index 43deeace..d95224de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,16 @@
 {
 	"name": "open-webui",
-	"version": "0.1.106",
+	"version": "0.1.112",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "open-webui",
-			"version": "0.1.106",
+			"version": "0.1.112",
 			"dependencies": {
 				"@sveltejs/adapter-node": "^1.3.1",
 				"async": "^3.2.5",
+				"bits-ui": "^0.19.7",
 				"dayjs": "^1.11.10",
 				"file-saver": "^2.0.5",
 				"highlight.js": "^11.9.0",
@@ -150,13 +151,35 @@
 			}
 		},
 		"node_modules/@fastify/busboy": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.0.0.tgz",
-			"integrity": "sha512-JUFJad5lv7jxj926GPgymrWQxxjPYuJNiNjNMzqT+HiuP6Vl3dk5xzG+8sTX96np0ZAluvaMzPsjhHZ5rNuNQQ==",
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.1.tgz",
+			"integrity": "sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==",
 			"engines": {
 				"node": ">=14"
 			}
 		},
+		"node_modules/@floating-ui/core": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
+			"integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
+			"dependencies": {
+				"@floating-ui/utils": "^0.2.1"
+			}
+		},
+		"node_modules/@floating-ui/dom": {
+			"version": "1.6.3",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
+			"integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
+			"dependencies": {
+				"@floating-ui/core": "^1.0.0",
+				"@floating-ui/utils": "^0.2.0"
+			}
+		},
+		"node_modules/@floating-ui/utils": {
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
+			"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
+		},
 		"node_modules/@humanwhocodes/config-array": {
 			"version": "0.11.13",
 			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@@ -190,6 +213,14 @@
 			"integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
 			"dev": true
 		},
+		"node_modules/@internationalized/date": {
+			"version": "3.5.2",
+			"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.2.tgz",
+			"integrity": "sha512-vo1yOMUt2hzp63IutEaTUxROdvQg1qlMRsbCvbay2AK2Gai7wIgCyK5weEX3nHkiLgo4qCXHijFNC/ILhlRpOQ==",
+			"dependencies": {
+				"@swc/helpers": "^0.5.0"
+			}
+		},
 		"node_modules/@jridgewell/gen-mapping": {
 			"version": "0.3.3",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -233,6 +264,39 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@melt-ui/svelte": {
+			"version": "0.76.0",
+			"resolved": "https://registry.npmjs.org/@melt-ui/svelte/-/svelte-0.76.0.tgz",
+			"integrity": "sha512-X1ktxKujjLjOBt8LBvfckHGDMrkHWceRt1jdsUTf0EH76ikNPP1ofSoiV0IhlduDoCBV+2YchJ8kXCDfDXfC9Q==",
+			"dependencies": {
+				"@floating-ui/core": "^1.3.1",
+				"@floating-ui/dom": "^1.4.5",
+				"@internationalized/date": "^3.5.0",
+				"dequal": "^2.0.3",
+				"focus-trap": "^7.5.2",
+				"nanoid": "^5.0.4"
+			},
+			"peerDependencies": {
+				"svelte": ">=3 <5"
+			}
+		},
+		"node_modules/@melt-ui/svelte/node_modules/nanoid": {
+			"version": "5.0.6",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.6.tgz",
+			"integrity": "sha512-rRq0eMHoGZxlvaFOUdK1Ev83Bd1IgzzR+WJ3IbDJ7QOSdAxYjlurSPqFs9s4lJg29RT6nPwizFtJhQS6V5xgiA==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"bin": {
+				"nanoid": "bin/nanoid.js"
+			},
+			"engines": {
+				"node": "^18 || >=20"
+			}
+		},
 		"node_modules/@nodelib/fs.scandir": {
 			"version": "2.1.5",
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -472,9 +536,9 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "1.30.3",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.30.3.tgz",
-			"integrity": "sha512-0DzVXfU4h+tChFvoc8C61IqErCyskD4ydSIDjpKS2lYlEzIYrtYrY7juSqACFxqcvZAnOEXvSY+zZ8br0+ZMMg==",
+			"version": "1.30.4",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.30.4.tgz",
+			"integrity": "sha512-JSQIQT6XvdchCRQEm7BABxPC56WP5RYVONAi+09S8tmzeP43fBsRlr95bFmsTQM2RHBldfgQk+jgdnsKI75daA==",
 			"hasInstallScript": true,
 			"dependencies": {
 				"@sveltejs/vite-plugin-svelte": "^2.5.0",
@@ -489,7 +553,7 @@
 				"set-cookie-parser": "^2.6.0",
 				"sirv": "^2.0.2",
 				"tiny-glob": "^0.2.9",
-				"undici": "~5.26.2"
+				"undici": "^5.28.3"
 			},
 			"bin": {
 				"svelte-kit": "svelte-kit.js"
@@ -539,6 +603,14 @@
 				"vite": "^4.0.0"
 			}
 		},
+		"node_modules/@swc/helpers": {
+			"version": "0.5.6",
+			"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.6.tgz",
+			"integrity": "sha512-aYX01Ke9hunpoCexYAgQucEpARGQ5w/cqHFrIR+e9gdKb1QWTsVJuTJ2ozQzIAxLyRQe/m+2RqzkyOOGiMKRQA==",
+			"dependencies": {
+				"tslib": "^2.4.0"
+			}
+		},
 		"node_modules/@tailwindcss/typography": {
 			"version": "0.5.10",
 			"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz",
@@ -1001,6 +1073,36 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/bits-ui": {
+			"version": "0.19.7",
+			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.19.7.tgz",
+			"integrity": "sha512-GHUpKvN7QyazhnZNkUy0lxg6W1M6KJHWSZ4a/UGCjPE6nQgk6vKbGysY67PkDtQMknZTZAzVoMj1Eic4IKeCRQ==",
+			"dependencies": {
+				"@internationalized/date": "^3.5.1",
+				"@melt-ui/svelte": "0.76.0",
+				"nanoid": "^5.0.5"
+			},
+			"peerDependencies": {
+				"svelte": "^4.0.0"
+			}
+		},
+		"node_modules/bits-ui/node_modules/nanoid": {
+			"version": "5.0.6",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.6.tgz",
+			"integrity": "sha512-rRq0eMHoGZxlvaFOUdK1Ev83Bd1IgzzR+WJ3IbDJ7QOSdAxYjlurSPqFs9s4lJg29RT6nPwizFtJhQS6V5xgiA==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"bin": {
+				"nanoid": "bin/nanoid.js"
+			},
+			"engines": {
+				"node": "^18 || >=20"
+			}
+		},
 		"node_modules/brace-expansion": {
 			"version": "1.1.11",
 			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1753,6 +1855,14 @@
 			"integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
 			"dev": true
 		},
+		"node_modules/focus-trap": {
+			"version": "7.5.4",
+			"resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.4.tgz",
+			"integrity": "sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==",
+			"dependencies": {
+				"tabbable": "^6.2.0"
+			}
+		},
 		"node_modules/fraction.js": {
 			"version": "4.3.6",
 			"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.6.tgz",
@@ -3304,6 +3414,11 @@
 				"svelte": ">=3 <5"
 			}
 		},
+		"node_modules/tabbable": {
+			"version": "6.2.0",
+			"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+			"integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+		},
 		"node_modules/tailwindcss": {
 			"version": "3.3.3",
 			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
@@ -3464,8 +3579,7 @@
 		"node_modules/tslib": {
 			"version": "2.6.2",
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-			"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-			"dev": true
+			"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
 		},
 		"node_modules/type-check": {
 			"version": "0.4.0",
@@ -3505,9 +3619,9 @@
 			}
 		},
 		"node_modules/undici": {
-			"version": "5.26.4",
-			"resolved": "https://registry.npmjs.org/undici/-/undici-5.26.4.tgz",
-			"integrity": "sha512-OG+QOf0fTLtazL9P9X7yqWxQ+Z0395Wk6DSkyTxtaq3wQEjIroVe7Y4asCX/vcCxYpNGMnwz8F0qbRYUoaQVMw==",
+			"version": "5.28.3",
+			"resolved": "https://registry.npmjs.org/undici/-/undici-5.28.3.tgz",
+			"integrity": "sha512-3ItfzbrhDlINjaP0duwnNsKpDQk3acHI3gVJ1z4fmwMK31k5G9OVIAMLSIaP6w4FaGkaAkN6zaQO9LUvZ1t7VA==",
 			"dependencies": {
 				"@fastify/busboy": "^2.0.0"
 			},
@@ -3573,9 +3687,9 @@
 			}
 		},
 		"node_modules/vite": {
-			"version": "4.5.1",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz",
-			"integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==",
+			"version": "4.5.2",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
+			"integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
 			"dependencies": {
 				"esbuild": "^0.18.10",
 				"postcss": "^8.4.27",
@@ -3754,9 +3868,31 @@
 			"dev": true
 		},
 		"@fastify/busboy": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.0.0.tgz",
-			"integrity": "sha512-JUFJad5lv7jxj926GPgymrWQxxjPYuJNiNjNMzqT+HiuP6Vl3dk5xzG+8sTX96np0ZAluvaMzPsjhHZ5rNuNQQ=="
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.1.tgz",
+			"integrity": "sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA=="
+		},
+		"@floating-ui/core": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
+			"integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
+			"requires": {
+				"@floating-ui/utils": "^0.2.1"
+			}
+		},
+		"@floating-ui/dom": {
+			"version": "1.6.3",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
+			"integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
+			"requires": {
+				"@floating-ui/core": "^1.0.0",
+				"@floating-ui/utils": "^0.2.0"
+			}
+		},
+		"@floating-ui/utils": {
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
+			"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
 		},
 		"@humanwhocodes/config-array": {
 			"version": "0.11.13",
@@ -3781,6 +3917,14 @@
 			"integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
 			"dev": true
 		},
+		"@internationalized/date": {
+			"version": "3.5.2",
+			"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.2.tgz",
+			"integrity": "sha512-vo1yOMUt2hzp63IutEaTUxROdvQg1qlMRsbCvbay2AK2Gai7wIgCyK5weEX3nHkiLgo4qCXHijFNC/ILhlRpOQ==",
+			"requires": {
+				"@swc/helpers": "^0.5.0"
+			}
+		},
 		"@jridgewell/gen-mapping": {
 			"version": "0.3.3",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -3815,6 +3959,26 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"@melt-ui/svelte": {
+			"version": "0.76.0",
+			"resolved": "https://registry.npmjs.org/@melt-ui/svelte/-/svelte-0.76.0.tgz",
+			"integrity": "sha512-X1ktxKujjLjOBt8LBvfckHGDMrkHWceRt1jdsUTf0EH76ikNPP1ofSoiV0IhlduDoCBV+2YchJ8kXCDfDXfC9Q==",
+			"requires": {
+				"@floating-ui/core": "^1.3.1",
+				"@floating-ui/dom": "^1.4.5",
+				"@internationalized/date": "^3.5.0",
+				"dequal": "^2.0.3",
+				"focus-trap": "^7.5.2",
+				"nanoid": "^5.0.4"
+			},
+			"dependencies": {
+				"nanoid": {
+					"version": "5.0.6",
+					"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.6.tgz",
+					"integrity": "sha512-rRq0eMHoGZxlvaFOUdK1Ev83Bd1IgzzR+WJ3IbDJ7QOSdAxYjlurSPqFs9s4lJg29RT6nPwizFtJhQS6V5xgiA=="
+				}
+			}
+		},
 		"@nodelib/fs.scandir": {
 			"version": "2.1.5",
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3981,9 +4145,9 @@
 			"requires": {}
 		},
 		"@sveltejs/kit": {
-			"version": "1.30.3",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.30.3.tgz",
-			"integrity": "sha512-0DzVXfU4h+tChFvoc8C61IqErCyskD4ydSIDjpKS2lYlEzIYrtYrY7juSqACFxqcvZAnOEXvSY+zZ8br0+ZMMg==",
+			"version": "1.30.4",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.30.4.tgz",
+			"integrity": "sha512-JSQIQT6XvdchCRQEm7BABxPC56WP5RYVONAi+09S8tmzeP43fBsRlr95bFmsTQM2RHBldfgQk+jgdnsKI75daA==",
 			"requires": {
 				"@sveltejs/vite-plugin-svelte": "^2.5.0",
 				"@types/cookie": "^0.5.1",
@@ -3997,7 +4161,7 @@
 				"set-cookie-parser": "^2.6.0",
 				"sirv": "^2.0.2",
 				"tiny-glob": "^0.2.9",
-				"undici": "~5.26.2"
+				"undici": "^5.28.3"
 			}
 		},
 		"@sveltejs/vite-plugin-svelte": {
@@ -4022,6 +4186,14 @@
 				"debug": "^4.3.4"
 			}
 		},
+		"@swc/helpers": {
+			"version": "0.5.6",
+			"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.6.tgz",
+			"integrity": "sha512-aYX01Ke9hunpoCexYAgQucEpARGQ5w/cqHFrIR+e9gdKb1QWTsVJuTJ2ozQzIAxLyRQe/m+2RqzkyOOGiMKRQA==",
+			"requires": {
+				"tslib": "^2.4.0"
+			}
+		},
 		"@tailwindcss/typography": {
 			"version": "0.5.10",
 			"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz",
@@ -4334,6 +4506,23 @@
 			"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
 			"dev": true
 		},
+		"bits-ui": {
+			"version": "0.19.7",
+			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.19.7.tgz",
+			"integrity": "sha512-GHUpKvN7QyazhnZNkUy0lxg6W1M6KJHWSZ4a/UGCjPE6nQgk6vKbGysY67PkDtQMknZTZAzVoMj1Eic4IKeCRQ==",
+			"requires": {
+				"@internationalized/date": "^3.5.1",
+				"@melt-ui/svelte": "0.76.0",
+				"nanoid": "^5.0.5"
+			},
+			"dependencies": {
+				"nanoid": {
+					"version": "5.0.6",
+					"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.6.tgz",
+					"integrity": "sha512-rRq0eMHoGZxlvaFOUdK1Ev83Bd1IgzzR+WJ3IbDJ7QOSdAxYjlurSPqFs9s4lJg29RT6nPwizFtJhQS6V5xgiA=="
+				}
+			}
+		},
 		"brace-expansion": {
 			"version": "1.1.11",
 			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -4878,6 +5067,14 @@
 			"integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
 			"dev": true
 		},
+		"focus-trap": {
+			"version": "7.5.4",
+			"resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.4.tgz",
+			"integrity": "sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==",
+			"requires": {
+				"tabbable": "^6.2.0"
+			}
+		},
 		"fraction.js": {
 			"version": "4.3.6",
 			"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.6.tgz",
@@ -5904,6 +6101,11 @@
 			"integrity": "sha512-jpPOgLtHwRaB6Vqo2dUQMv15/yUV/BQWTjKpEqQ11uqRSHKjAYUKZyGrHB2cQsGmyjR0JUzBD58btpgNqINQ/Q==",
 			"requires": {}
 		},
+		"tabbable": {
+			"version": "6.2.0",
+			"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+			"integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+		},
 		"tailwindcss": {
 			"version": "3.3.3",
 			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
@@ -6023,8 +6225,7 @@
 		"tslib": {
 			"version": "2.6.2",
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-			"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-			"dev": true
+			"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
 		},
 		"type-check": {
 			"version": "0.4.0",
@@ -6048,9 +6249,9 @@
 			"dev": true
 		},
 		"undici": {
-			"version": "5.26.4",
-			"resolved": "https://registry.npmjs.org/undici/-/undici-5.26.4.tgz",
-			"integrity": "sha512-OG+QOf0fTLtazL9P9X7yqWxQ+Z0395Wk6DSkyTxtaq3wQEjIroVe7Y4asCX/vcCxYpNGMnwz8F0qbRYUoaQVMw==",
+			"version": "5.28.3",
+			"resolved": "https://registry.npmjs.org/undici/-/undici-5.28.3.tgz",
+			"integrity": "sha512-3ItfzbrhDlINjaP0duwnNsKpDQk3acHI3gVJ1z4fmwMK31k5G9OVIAMLSIaP6w4FaGkaAkN6zaQO9LUvZ1t7VA==",
 			"requires": {
 				"@fastify/busboy": "^2.0.0"
 			}
@@ -6086,9 +6287,9 @@
 			"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA=="
 		},
 		"vite": {
-			"version": "4.5.1",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz",
-			"integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==",
+			"version": "4.5.2",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
+			"integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
 			"requires": {
 				"esbuild": "^0.18.10",
 				"fsevents": "~2.3.2",
diff --git a/package.json b/package.json
index d7be9999..1234aa4b 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
 	"dependencies": {
 		"@sveltejs/adapter-node": "^1.3.1",
 		"async": "^3.2.5",
+		"bits-ui": "^0.19.7",
 		"dayjs": "^1.11.10",
 		"file-saver": "^2.0.5",
 		"highlight.js": "^11.9.0",
@@ -53,4 +54,4 @@
 		"tippy.js": "^6.3.7",
 		"uuid": "^9.0.1"
 	}
-}
\ No newline at end of file
+}
diff --git a/src/lib/components/common/Dropdown.svelte b/src/lib/components/common/Dropdown.svelte
new file mode 100644
index 00000000..580a95fd
--- /dev/null
+++ b/src/lib/components/common/Dropdown.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui';
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger>
+		<slot />
+	</DropdownMenu.Trigger>
+
+	<slot name="content">
+		<DropdownMenu.Content
+			class="w-full max-w-[130px] rounded-lg px-1 py-1.5 border border-gray-700 z-50 bg-gray-850 text-white"
+			sideOffset={8}
+			side="bottom"
+			align="start"
+		>
+			<DropdownMenu.Item class="flex items-center px-3 py-2 text-sm  font-medium">
+				<div class="flex items-center">Profile</div>
+			</DropdownMenu.Item>
+
+			<DropdownMenu.Item class="flex items-center px-3 py-2 text-sm  font-medium">
+				<div class="flex items-center">Profile</div>
+			</DropdownMenu.Item>
+
+			<DropdownMenu.Item class="flex items-center px-3 py-2 text-sm  font-medium">
+				<div class="flex items-center">Profile</div>
+			</DropdownMenu.Item>
+		</DropdownMenu.Content>
+	</slot>
+</DropdownMenu.Root>
diff --git a/src/lib/components/icons/GarbageBin.svelte b/src/lib/components/icons/GarbageBin.svelte
new file mode 100644
index 00000000..31530fc7
--- /dev/null
+++ b/src/lib/components/icons/GarbageBin.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'w-4 h-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+	/>
+</svg>
diff --git a/src/lib/components/icons/Pencil.svelte b/src/lib/components/icons/Pencil.svelte
new file mode 100644
index 00000000..42b60916
--- /dev/null
+++ b/src/lib/components/icons/Pencil.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'w-4 h-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
+	/>
+</svg>
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 014dfcf6..c8eaa4c0 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -20,6 +20,8 @@
 	import { slide } from 'svelte/transition';
 	import { WEBUI_BASE_URL } from '$lib/constants';
 	import Tooltip from '../common/Tooltip.svelte';
+	import Dropdown from '../common/Dropdown.svelte';
+	import ChatMenu from './Sidebar/ChatMenu.svelte';
 
 	let show = false;
 	let navElement;
@@ -27,6 +29,8 @@
 	let title: string = 'UI';
 	let search = '';
 
+	let selectedChatId = null;
+
 	let chatDeleteId = null;
 	let chatTitleEditId = null;
 	let chatTitle = '';
@@ -376,21 +380,24 @@
 					<div class=" w-full pr-2 relative group">
 						{#if chatTitleEditId === chat.id}
 							<div
-								class=" w-full flex justify-between rounded-xl px-3 py-2 group-hover:bg-gray-900 {chat.id ===
-								$chatId
+								class=" w-full flex justify-between rounded-xl px-3 py-2 {chat.id === $chatId
 									? 'bg-gray-900'
-									: ''}  whitespace-nowrap text-ellipsis"
+									: chat.id === selectedChatId
+									? 'bg-gray-950'
+									: 'group-hover:bg-gray-950'}  whitespace-nowrap text-ellipsis"
 							>
 								<input bind:value={chatTitle} class=" bg-transparent w-full outline-none mr-10" />
 							</div>
 						{:else}
 							<a
-								class=" w-full flex justify-between rounded-xl px-3 py-2 group-hover:bg-gray-900 {chat.id ===
-								$chatId
+								class=" w-full flex justify-between rounded-xl px-3 py-2 {chat.id === $chatId
 									? 'bg-gray-900'
-									: ''}  whitespace-nowrap text-ellipsis"
+									: chat.id === selectedChatId
+									? 'bg-gray-950'
+									: 'group-hover:bg-gray-950'}  whitespace-nowrap text-ellipsis"
 								href="/c/{chat.id}"
 								on:click={() => {
+									selectedChatId = chat.id;
 									if (window.innerWidth < 1024) {
 										show = false;
 									}
@@ -406,7 +413,16 @@
 						{/if}
 
 						<div
-							class=" invisible group-hover:visible absolute right-[14px] top-[10px] px-2 bg-gradient-to-l from-80% from-gray-900 to-transparent"
+							class="
+							
+							{chat.id === $chatId
+								? ' from-gray-900'
+								: chat.id === selectedChatId
+								? 'from-gray-950'
+								: 'invisible group-hover:visible from-gray-950'}
+								absolute right-[10px] top-[10px] pr-2 pl-5 bg-gradient-to-l from-80%
+								
+								  to-transparent"
 						>
 							{#if chatTitleEditId === chat.id}
 								<div class="flex self-center space-x-1.5 z-10">
@@ -491,56 +507,34 @@
 								</div>
 							{:else}
 								<div class="flex self-center space-x-1.5 z-10">
-									<button
-										id="delete-chat-button"
-										class=" hidden"
-										on:click={() => {
-											deleteChat(chat.id);
-										}}
-									/>
-									<button
-										class=" self-center hover:text-white transition"
-										on:click={() => {
+									<ChatMenu
+										renameHandler={() => {
 											chatTitle = chat.title;
 											chatTitleEditId = chat.id;
 										}}
-									>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											fill="none"
-											viewBox="0 0 24 24"
-											stroke-width="1.5"
-											stroke="currentColor"
-											class="w-4 h-4"
-										>
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
-											/>
-										</svg>
-									</button>
-									<button
-										class=" self-center hover:text-white transition"
-										on:click={() => {
+										deleteHandler={() => {
 											chatDeleteId = chat.id;
 										}}
 									>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											fill="none"
-											viewBox="0 0 24 24"
-											stroke-width="1.5"
-											stroke="currentColor"
-											class="w-4 h-4"
+										<button
+											aria-label="Chat Menu"
+											class=" self-center hover:text-white transition"
+											on:click={() => {
+												selectedChatId = chat.id;
+											}}
 										>
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-											/>
-										</svg>
-									</button>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												viewBox="0 0 16 16"
+												fill="currentColor"
+												class="w-4 h-4"
+											>
+												<path
+													d="M2 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM6.5 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM12.5 6.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"
+												/>
+											</svg>
+										</button>
+									</ChatMenu>
 								</div>
 							{/if}
 						</div>
diff --git a/src/lib/components/layout/Sidebar/ChatMenu.svelte b/src/lib/components/layout/Sidebar/ChatMenu.svelte
new file mode 100644
index 00000000..3a49afd7
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/ChatMenu.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui';
+
+	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
+	import Pencil from '$lib/components/icons/Pencil.svelte';
+
+	export let renameHandler: Function;
+	export let deleteHandler: Function;
+</script>
+
+<Dropdown>
+	<slot />
+
+	<div slot="content">
+		<DropdownMenu.Content
+			class="w-full max-w-[130px] rounded-lg px-1 py-1.5 border border-gray-700 z-50 bg-gray-850 text-white"
+			sideOffset={8}
+			side="bottom"
+			align="start"
+		>
+			<DropdownMenu.Item
+				class="flex gap-2 items-center px-3 py-2 text-sm  font-medium cursor-pointer"
+				on:click={() => {
+					renameHandler();
+				}}
+			>
+				<Pencil strokeWidth="2" />
+				<div class="flex items-center">Rename</div>
+			</DropdownMenu.Item>
+
+			<DropdownMenu.Item
+				class="flex  gap-2  items-center px-3 py-2 text-sm  font-medium cursor-pointer"
+				on:click={() => {
+					deleteHandler();
+				}}
+			>
+				<GarbageBin strokeWidth="2" />
+				<div class="flex items-center">Delete</div>
+			</DropdownMenu.Item>
+		</DropdownMenu.Content>
+	</div>
+</Dropdown>