forked from open-webui/open-webui
feat: tag add/remove frontend
This commit is contained in:
Timothy J. Baek
parent
4c69e2371e
commit
287668f84e
1 changed files with 112 additions and 15 deletions
|
|
@ -6,6 +6,7 @@
|
||||||
import { getChatById } from '$lib/apis/chats';
|
import { getChatById } from '$lib/apis/chats';
|
||||||
import { chatId, modelfiles } from '$lib/stores';
|
import { chatId, modelfiles } from '$lib/stores';
|
||||||
import ShareChatModal from '../chat/ShareChatModal.svelte';
|
import ShareChatModal from '../chat/ShareChatModal.svelte';
|
||||||
|
import { stringify } from 'postcss';
|
||||||
|
|
||||||
export let initNewChat: Function;
|
export let initNewChat: Function;
|
||||||
export let title: string = 'Ollama Web UI';
|
export let title: string = 'Ollama Web UI';
|
||||||
|
|
@ -13,6 +14,24 @@
|
||||||
|
|
||||||
let showShareChatModal = false;
|
let showShareChatModal = false;
|
||||||
|
|
||||||
|
let tags = [
|
||||||
|
// {
|
||||||
|
// name: 'general'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: 'medicine'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: 'cooking'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: 'education'
|
||||||
|
// }
|
||||||
|
];
|
||||||
|
|
||||||
|
let tagName = '';
|
||||||
|
let showTagInput = false;
|
||||||
|
|
||||||
const shareChat = async () => {
|
const shareChat = async () => {
|
||||||
const chat = (await getChatById(localStorage.token, $chatId)).chat;
|
const chat = (await getChatById(localStorage.token, $chatId)).chat;
|
||||||
console.log('share', chat);
|
console.log('share', chat);
|
||||||
|
|
@ -54,6 +73,20 @@
|
||||||
|
|
||||||
saveAs(blob, `chat-${chat.title}.txt`);
|
saveAs(blob, `chat-${chat.title}.txt`);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const addTag = () => {
|
||||||
|
if (!tags.find((e) => e.name === tagName)) {
|
||||||
|
tags = [
|
||||||
|
...tags,
|
||||||
|
{
|
||||||
|
name: JSON.parse(JSON.stringify(tagName))
|
||||||
|
}
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
tagName = '';
|
||||||
|
showTagInput = false;
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ShareChatModal bind:show={showShareChatModal} {downloadChat} {shareChat} />
|
<ShareChatModal bind:show={showShareChatModal} {downloadChat} {shareChat} />
|
||||||
|
|
@ -93,23 +126,87 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pl-2 self-center flex items-center space-x-2">
|
<div class="pl-2 self-center flex items-center space-x-2">
|
||||||
<div class="flex flex-row">
|
<div class="flex flex-row space-x-0.5 line-clamp-1">
|
||||||
<div
|
{#each tags as tag}
|
||||||
class=" cursor-pointer px-2 py-0.5 space-x-1 flex h-fit items-center dark:hover:bg-gray-700 rounded-full transition border dark:border-gray-600"
|
<div
|
||||||
>
|
class="px-2 py-0.5 space-x-1 flex h-fit items-center rounded-full transition border dark:border-gray-600 dark:text-white"
|
||||||
<div class=" text-[0.65rem] font-medium">Add Tags</div>
|
>
|
||||||
<div class=" m-auto self-center">
|
<div class=" text-[0.65rem] font-medium self-center line-clamp-1">
|
||||||
<svg
|
{tag.name}
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
</div>
|
||||||
viewBox="0 0 16 16"
|
<button
|
||||||
fill="currentColor"
|
class=" m-auto self-center cursor-pointer"
|
||||||
class="w-3 h-3"
|
on:click={() => {
|
||||||
|
console.log(tag.name);
|
||||||
|
|
||||||
|
tags = tags.filter((t) => t.name !== tag.name);
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<path
|
<svg
|
||||||
d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
/>
|
viewBox="0 0 16 16"
|
||||||
</svg>
|
fill="currentColor"
|
||||||
|
class="w-3 h-3"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
<div class="flex space-x-1 pl-1.5">
|
||||||
|
{#if showTagInput}
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input
|
||||||
|
bind:value={tagName}
|
||||||
|
class=" cursor-pointer self-center text-xs h-fit bg-transparent outline-none line-clamp-1 w-[4rem]"
|
||||||
|
placeholder="Add a tag"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<button
|
||||||
|
on:click={() => {
|
||||||
|
addTag();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
fill="currentColor"
|
||||||
|
class="w-3 h-3"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- TODO: Tag Suggestions -->
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<button
|
||||||
|
class=" cursor-pointer self-center p-0.5 space-x-1 flex h-fit items-center dark:hover:bg-gray-700 rounded-full transition border dark:border-gray-600 border-dashed"
|
||||||
|
on:click={() => {
|
||||||
|
showTagInput = !showTagInput;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div class=" m-auto self-center">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
fill="currentColor"
|
||||||
|
class="w-3 h-3 {showTagInput ? 'rotate-45' : ''} transition-all transform"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue