Emil_Shanaty/open-webui-ai4me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enh: pinned chats support

Browse Source
This commit is contained in:
Timothy J. Baek
2024-07-01 23:08:01 -07:00
parent 439ab7a335
commit 05ec71beb9
9 changed files with 285 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/layout/Sidebar.svelte
+39 -3
View File
@@ -10,7 +10,8 @@
tags,
showSidebar,
mobile,
showArchivedChats
showArchivedChats,
pinnedChats
} from '$lib/stores';
import { onMount, getContext, tick } from 'svelte';
@@ -46,6 +47,7 @@
let showDeleteConfirm = false;
let showDropdown = false;
let filteredChatList = [];
$: filteredChatList = $chats.filter((chat) => {
@@ -80,6 +82,8 @@
});
showSidebar.set(window.innerWidth > BREAKPOINT);
await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
await chats.set(await getChatList(localStorage.token));
let touchstart;
@@ -412,7 +416,7 @@
</div>
</div>
{#if $tags.length > 0}
{#if $tags.filter((t) => t.name !== 'pinned').length > 0}
<div class="px-2.5 mb-2 flex gap-1 flex-wrap">
<button
class="px-2.5 text-xs font-medium bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-800 transition rounded-full"
@@ -422,7 +426,7 @@
>
{$i18n.t('all')}
</button>
{#each $tags as tag}
{#each $tags.filter((t) => t.name !== 'pinned') as tag}
<button
class="px-2.5 text-xs font-medium bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-800 transition rounded-full"
on:click={async () => {
@@ -440,6 +444,38 @@
</div>
{/if}
{#if $pinnedChats.length > 0}
<div class="pl-2 py-2 flex flex-col space-y-1">
<div class="">
<div class="w-full pl-2.5 text-xs text-gray-500 dark:text-gray-500 font-medium pb-1.5">
{$i18n.t('Pinned')}
</div>
{#each $pinnedChats as chat, idx}
<ChatItem
{chat}
{shiftKey}
selected={selectedChatId === chat.id}
on:select={() => {
selectedChatId = chat.id;
}}
on:unselect={() => {
selectedChatId = null;
}}
on:delete={(e) => {
if ((e?.detail ?? '') === 'shift') {
deleteChatHandler(chat.id);
} else {
deleteChat = chat;
showDeleteConfirm = true;
}
}}
/>
{/each}
</div>
</div>
{/if}
<div class="pl-2 my-2 flex-1 flex flex-col space-y-1 overflow-y-auto scrollbar-hidden">
{#each filteredChatList as chat, idx}
{#if idx === 0 || (idx > 0 && chat.time_range !== filteredChatList[idx - 1].time_range)}
src/lib/components/layout/Sidebar/ChatItem.svelte
+8 -1
View File
@@ -11,9 +11,10 @@
cloneChatById,
deleteChatById,
getChatList,
getChatListByTagName,
updateChatById
} from '$lib/apis/chats';
import { chatId, chats, mobile, showSidebar } from '$lib/stores';
import { chatId, chats, mobile, pinnedChats, showSidebar } from '$lib/stores';
import ChatMenu from './ChatMenu.svelte';
import ShareChatModal from '$lib/components/chat/ShareChatModal.svelte';
@@ -40,6 +41,7 @@
title: _title
});
await chats.set(await getChatList(localStorage.token));
await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
}
};
@@ -52,12 +54,14 @@
if (res) {
goto(`/c/${res.id}`);
await chats.set(await getChatList(localStorage.token));
await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
}
};
const archiveChatHandler = async (id) => {
await archiveChatById(localStorage.token, id);
await chats.set(await getChatList(localStorage.token));
await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
};
const focusEdit = async (node: HTMLInputElement) => {
@@ -233,6 +237,9 @@
onClose={() => {
dispatch('unselect');
}}
on:change={async () => {
await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
}}
>
<button
aria-label="Chat Menu"
src/lib/components/layout/Sidebar/ChatMenu.svelte
+43 -1
View File
@@ -1,7 +1,9 @@
<script lang="ts">
import { DropdownMenu } from 'bits-ui';
import { flyAndScale } from '$lib/utils/transitions';
import { getContext } from 'svelte';
import { getContext, createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
import Dropdown from '$lib/components/common/Dropdown.svelte';
import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
@@ -11,6 +13,9 @@
import Share from '$lib/components/icons/Share.svelte';
import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
import Bookmark from '$lib/components/icons/Bookmark.svelte';
import BookmarkSlash from '$lib/components/icons/BookmarkSlash.svelte';
import { addTagById, deleteTagById, getTagsById } from '$lib/apis/chats';
const i18n = getContext('i18n');
@@ -24,6 +29,28 @@
export let chatId = '';
let show = false;
let pinned = false;
const pinHandler = async () => {
if (pinned) {
await deleteTagById(localStorage.token, chatId, 'pinned');
} else {
await addTagById(localStorage.token, chatId, 'pinned');
}
dispatch('change');
};
const checkPinned = async () => {
pinned = (
await getTagsById(localStorage.token, chatId).catch(async (error) => {
return [];
})
).find((tag) => tag.name === 'pinned');
};
$: if (show) {
checkPinned();
}
</script>
<Dropdown
@@ -46,6 +73,21 @@
align="start"
transition={flyAndScale}
>
<DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
on:click={() => {
pinHandler();
}}
>
{#if pinned}
<BookmarkSlash strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Unpin')}</div>
{:else}
<Bookmark strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Pin')}</div>
{/if}
</DropdownMenu.Item>
<DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
on:click={() => {