forked from open-webui/open-webui
feat: chat title edit
This commit is contained in:
Timothy J. Baek
parent
1887269207
commit
2b3069a613
2 changed files with 186 additions and 33 deletions
|
|
@ -6,18 +6,30 @@
|
||||||
let importFileInputElement;
|
let importFileInputElement;
|
||||||
let importFiles;
|
let importFiles;
|
||||||
|
|
||||||
|
export let selectedChatId = '';
|
||||||
export let title: string = 'Ollama Web UI';
|
export let title: string = 'Ollama Web UI';
|
||||||
export let chats = [];
|
export let chats = [];
|
||||||
|
|
||||||
export let createNewChat: Function;
|
export let createNewChat: Function;
|
||||||
export let loadChat: Function;
|
export let loadChat: Function;
|
||||||
|
export let deleteChat: Function;
|
||||||
|
export let editChatTitle: Function;
|
||||||
export let importChatHistory: Function;
|
export let importChatHistory: Function;
|
||||||
export let exportChatHistory: Function;
|
export let exportChatHistory: Function;
|
||||||
export let deleteChatHistory: Function;
|
export let deleteChatHistory: Function;
|
||||||
export let openSettings: Function;
|
export let openSettings: Function;
|
||||||
|
|
||||||
|
let chatTitleEditIdx = null;
|
||||||
|
let chatTitle = '';
|
||||||
|
|
||||||
|
let _chats = chats.map((item, idx) => chats[chats.length - 1 - idx]);
|
||||||
|
|
||||||
onMount(() => {});
|
onMount(() => {});
|
||||||
|
|
||||||
|
$: if (chats) {
|
||||||
|
_chats = chats.map((item, idx) => chats[chats.length - 1 - idx]);
|
||||||
|
}
|
||||||
|
|
||||||
$: if (importFiles) {
|
$: if (importFiles) {
|
||||||
console.log(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
|
: '-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="py-2.5 my-auto flex flex-col justify-between h-screen">
|
||||||
<div class=" flex justify-center space-x-2">
|
<div class="px-2.5 flex justify-center space-x-2">
|
||||||
<button
|
<button
|
||||||
class=" cursor-pointer flex-grow rounded-md border border-gray-600 p-3 flex"
|
class=" cursor-pointer flex-grow rounded-md border border-gray-600 p-3 flex"
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
|
|
@ -151,43 +163,160 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="my-3 flex-1 flex flex-col space-y-1 overflow-y-auto">
|
<div class="pl-2.5 my-3 flex-1 flex flex-col space-y-1 overflow-y-auto">
|
||||||
{#each chats.reverse() as chat, i}
|
{#each _chats as chat, i}
|
||||||
<button
|
<div class=" w-full pr-2 relative">
|
||||||
class=" flex rounded-md p-4 hover:bg-gray-800 transition whitespace-nowrap text-ellipsis"
|
<button
|
||||||
on:click={() => {
|
class=" w-full flex justify-between rounded-md px-4 py-3 hover:bg-gray-800 {chat.id ===
|
||||||
loadChat(chat.id);
|
selectedChatId
|
||||||
}}
|
? 'bg-gray-800'
|
||||||
>
|
: ''} transition whitespace-nowrap text-ellipsis"
|
||||||
<div class=" self-center mr-3">
|
on:click={() => {
|
||||||
<svg
|
if (chat.id !== chatTitleEditIdx) {
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
chatTitleEditIdx = null;
|
||||||
fill="none"
|
chatTitle = '';
|
||||||
viewBox="0 0 24 24"
|
}
|
||||||
stroke-width="1.5"
|
|
||||||
stroke="currentColor"
|
loadChat(chat.id);
|
||||||
class="w-4 h-4"
|
}}
|
||||||
>
|
>
|
||||||
<path
|
<div class=" flex self-center flex-1">
|
||||||
stroke-linecap="round"
|
<div class=" self-center mr-3">
|
||||||
stroke-linejoin="round"
|
<svg
|
||||||
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"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
/>
|
fill="none"
|
||||||
</svg>
|
viewBox="0 0 24 24"
|
||||||
</div>
|
stroke-width="1.5"
|
||||||
<div class=" self-center overflow-hidden">{chat.title}</div>
|
stroke="currentColor"
|
||||||
</button>
|
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}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="">
|
<div class="px-2.5">
|
||||||
<hr class=" border-gray-800 mb-2 w-full" />
|
<hr class=" border-gray-800 mb-2 w-full" />
|
||||||
|
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<input bind:this={importFileInputElement} bind:files={importFiles} type="file" hidden />
|
<input bind:this={importFileInputElement} bind:files={importFiles} type="file" hidden />
|
||||||
<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={() => {
|
on:click={() => {
|
||||||
importFileInputElement.click();
|
importFileInputElement.click();
|
||||||
// importChatHistory();
|
// importChatHistory();
|
||||||
|
|
@ -212,7 +341,7 @@
|
||||||
<div class=" self-center">Import</div>
|
<div class=" self-center">Import</div>
|
||||||
</button>
|
</button>
|
||||||
<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={() => {
|
on:click={() => {
|
||||||
exportChatHistory();
|
exportChatHistory();
|
||||||
}}
|
}}
|
||||||
|
|
@ -237,7 +366,7 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</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={() => {
|
on:click={() => {
|
||||||
deleteChatHistory();
|
deleteChatHistory();
|
||||||
}}
|
}}
|
||||||
|
|
@ -261,7 +390,7 @@
|
||||||
<div class=" self-center">Clear conversations</div>
|
<div class=" self-center">Clear conversations</div>
|
||||||
</button>
|
</button>
|
||||||
<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={() => {
|
on:click={() => {
|
||||||
openSettings();
|
openSettings();
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
|
|
@ -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 deleteChatHistory = async () => {
|
||||||
const tx = db.transaction('chats', 'readwrite');
|
const tx = db.transaction('chats', 'readwrite');
|
||||||
await Promise.all([tx.store.clear(), tx.done]);
|
await Promise.all([tx.store.clear(), tx.done]);
|
||||||
|
|
@ -598,9 +619,12 @@
|
||||||
<div class="app text-gray-100">
|
<div class="app text-gray-100">
|
||||||
<div class=" bg-gray-800 min-h-screen overflow-auto flex flex-row">
|
<div class=" bg-gray-800 min-h-screen overflow-auto flex flex-row">
|
||||||
<Navbar
|
<Navbar
|
||||||
|
selectedChatId={chatId}
|
||||||
{chats}
|
{chats}
|
||||||
{title}
|
{title}
|
||||||
{loadChat}
|
{loadChat}
|
||||||
|
{editChatTitle}
|
||||||
|
{deleteChat}
|
||||||
{createNewChat}
|
{createNewChat}
|
||||||
{importChatHistory}
|
{importChatHistory}
|
||||||
{exportChatHistory}
|
{exportChatHistory}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue