From 2b3069a6136fbce29f415c235da2c8d364d6dfaa Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sat, 28 Oct 2023 00:55:34 -0700
Subject: [PATCH] feat: chat title edit

---
 src/lib/components/layout/Navbar.svelte | 195 ++++++++++++++++++++----
 src/routes/+page.svelte                 |  24 +++
 2 files changed, 186 insertions(+), 33 deletions(-)

diff --git a/src/lib/components/layout/Navbar.svelte b/src/lib/components/layout/Navbar.svelte
index 28503a70f..4784a5ee8 100644
--- a/src/lib/components/layout/Navbar.svelte
+++ b/src/lib/components/layout/Navbar.svelte
@@ -6,18 +6,30 @@
 	let importFileInputElement;
 	let importFiles;
 
+	export let selectedChatId = '';
 	export let title: string = 'Ollama Web UI';
 	export let chats = [];
 
 	export let createNewChat: Function;
 	export let loadChat: Function;
+	export let deleteChat: Function;
+	export let editChatTitle: Function;
 	export let importChatHistory: Function;
 	export let exportChatHistory: Function;
 	export let deleteChatHistory: Function;
 	export let openSettings: Function;
 
+	let chatTitleEditIdx = null;
+	let chatTitle = '';
+
+	let _chats = chats.map((item, idx) => chats[chats.length - 1 - idx]);
+
 	onMount(() => {});
 
+	$: if (chats) {
+		_chats = chats.map((item, idx) => chats[chats.length - 1 - idx]);
+	}
+
 	$: if (importFiles) {
 		console.log(importFiles);
 
@@ -99,8 +111,8 @@
 		: '-translate-x-72'} w-72 fixed top-0 left-0 z-40 transition bg-gray-900 text-gray-200 shadow-2xl text-sm
         "
 >
-	<div class="p-2.5 my-auto flex flex-col justify-between h-screen">
-		<div class=" flex justify-center space-x-2">
+	<div class="py-2.5 my-auto flex flex-col justify-between h-screen">
+		<div class="px-2.5 flex justify-center space-x-2">
 			<button
 				class=" cursor-pointer flex-grow rounded-md border border-gray-600 p-3 flex"
 				on:click={() => {
@@ -151,43 +163,160 @@
 			</button>
 		</div>
 
-		<div class="my-3 flex-1 flex flex-col space-y-1 overflow-y-auto">
-			{#each chats.reverse() as chat, i}
-				<button
-					class=" flex rounded-md p-4 hover:bg-gray-800 transition whitespace-nowrap text-ellipsis"
-					on:click={() => {
-						loadChat(chat.id);
-					}}
-				>
-					<div class=" self-center mr-3">
-						<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="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 011.037-.443 48.282 48.282 0 005.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
-							/>
-						</svg>
-					</div>
-					<div class=" self-center overflow-hidden">{chat.title}</div>
-				</button>
+		<div class="pl-2.5 my-3 flex-1 flex flex-col space-y-1 overflow-y-auto">
+			{#each _chats as chat, i}
+				<div class=" w-full pr-2 relative">
+					<button
+						class=" w-full flex justify-between rounded-md px-4 py-3 hover:bg-gray-800 {chat.id ===
+						selectedChatId
+							? 'bg-gray-800'
+							: ''} transition whitespace-nowrap text-ellipsis"
+						on:click={() => {
+							if (chat.id !== chatTitleEditIdx) {
+								chatTitleEditIdx = null;
+								chatTitle = '';
+							}
+
+							loadChat(chat.id);
+						}}
+					>
+						<div class=" flex self-center flex-1">
+							<div class=" self-center mr-3">
+								<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="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 011.037-.443 48.282 48.282 0 005.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
+									/>
+								</svg>
+							</div>
+							<div
+								class=" text-left self-center overflow-hidden {chat.id === selectedChatId
+									? 'w-[150px]'
+									: 'w-[200px]'} "
+							>
+								{#if chatTitleEditIdx === chat.id}
+									<input bind:value={chatTitle} class=" bg-transparent w-full" />
+								{:else}
+									{chat.title}
+								{/if}
+							</div>
+						</div>
+					</button>
+
+					{#if chat.id === selectedChatId}
+						<div class=" absolute right-[22px] top-[14px]">
+							{#if chatTitleEditIdx === chat.id}
+								<div class="flex self-center space-x-1.5">
+									<button
+										class=" self-center hover:text-white transition"
+										on:click={() => {
+											editChatTitle(chat.id, chatTitle);
+											chatTitleEditIdx = null;
+											chatTitle = '';
+										}}
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 20 20"
+											fill="currentColor"
+											class="w-4 h-4"
+										>
+											<path
+												fill-rule="evenodd"
+												d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
+												clip-rule="evenodd"
+											/>
+										</svg>
+									</button>
+									<button
+										class=" self-center hover:text-white transition"
+										on:click={() => {
+											chatTitleEditIdx = null;
+											chatTitle = '';
+										}}
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 20 20"
+											fill="currentColor"
+											class="w-4 h-4"
+										>
+											<path
+												d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+											/>
+										</svg>
+									</button>
+								</div>
+							{:else}
+								<div class="flex self-center space-x-1.5">
+									<button
+										class=" self-center hover:text-white transition"
+										on:click={() => {
+											chatTitle = chat.title;
+											chatTitleEditIdx = chat.id;
+											// editChatTitle(chat.id, 'a');
+										}}
+									>
+										<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={() => {
+											deleteChat(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="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>
+								</div>
+							{/if}
+						</div>
+					{/if}
+				</div>
 			{/each}
 		</div>
 
-		<div class="">
+		<div class="px-2.5">
 			<hr class=" border-gray-800 mb-2 w-full" />
 
 			<div class="flex flex-col">
 				<div class="flex">
 					<input bind:this={importFileInputElement} bind:files={importFiles} type="file" hidden />
 					<button
-						class=" flex rounded-md p-4 w-full hover:bg-gray-800 transition"
+						class=" flex rounded-md p-3.5 w-full hover:bg-gray-800 transition"
 						on:click={() => {
 							importFileInputElement.click();
 							// importChatHistory();
@@ -212,7 +341,7 @@
 						<div class=" self-center">Import</div>
 					</button>
 					<button
-						class=" flex rounded-md p-4 w-full hover:bg-gray-800 transition"
+						class=" flex rounded-md p-3.5 w-full hover:bg-gray-800 transition"
 						on:click={() => {
 							exportChatHistory();
 						}}
@@ -237,7 +366,7 @@
 					</button>
 				</div>
 				<button
-					class=" flex rounded-md p-4 w-full hover:bg-gray-800 transition"
+					class=" flex rounded-md p-3.5 w-full hover:bg-gray-800 transition"
 					on:click={() => {
 						deleteChatHistory();
 					}}
@@ -261,7 +390,7 @@
 					<div class=" self-center">Clear conversations</div>
 				</button>
 				<button
-					class=" flex rounded-md p-4 w-full hover:bg-gray-800 transition"
+					class=" flex rounded-md p-3.5 w-full hover:bg-gray-800 transition"
 					on:click={() => {
 						openSettings();
 					}}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c0fbd557d..16f9b6f6c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -225,6 +225,27 @@
 		}
 	};
 
+	const editChatTitle = async (id, _title) => {
+		const chat = await db.get('chats', id);
+		console.log(chat);
+
+		await db.put('chats', {
+			...chat,
+			title: _title
+		});
+
+		title = _title;
+		chats = await db.getAllFromIndex('chats', 'timestamp');
+	};
+
+	const deleteChat = async (id) => {
+		createNewChat();
+
+		const chat = await db.delete('chats', id);
+		console.log(chat);
+		chats = await db.getAllFromIndex('chats', 'timestamp');
+	};
+
 	const deleteChatHistory = async () => {
 		const tx = db.transaction('chats', 'readwrite');
 		await Promise.all([tx.store.clear(), tx.done]);
@@ -598,9 +619,12 @@
 <div class="app text-gray-100">
 	<div class=" bg-gray-800 min-h-screen overflow-auto flex flex-row">
 		<Navbar
+			selectedChatId={chatId}
 			{chats}
 			{title}
 			{loadChat}
+			{editChatTitle}
+			{deleteChat}
 			{createNewChat}
 			{importChatHistory}
 			{exportChatHistory}