enh: analytics model modal
This commit is contained in:
Timothy Jaeryang Baek
@@ -10,6 +10,7 @@
|
||||
dayjs.extend(calendar);
|
||||
|
||||
import { deleteChatById } from '$lib/apis/chats';
|
||||
import { WEBUI_API_BASE_URL } from '$lib/constants';
|
||||
|
||||
import Modal from '$lib/components/common/Modal.svelte';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
@@ -31,6 +32,9 @@
|
||||
export let title = 'Chats';
|
||||
export let emptyPlaceholder = '';
|
||||
export let shareUrl = false;
|
||||
export let showUserInfo = false;
|
||||
export let showSearch = true;
|
||||
export let readOnly = false;
|
||||
|
||||
export let query = '';
|
||||
|
||||
@@ -105,52 +109,61 @@
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col w-full px-5 pb-4 dark:text-gray-200">
|
||||
<div class=" flex w-full space-x-2 mb-0.5">
|
||||
<div class="flex flex-1">
|
||||
<div class=" self-center ml-1 mr-3">
|
||||
<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="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<input
|
||||
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
|
||||
bind:value={query}
|
||||
placeholder={$i18n.t('Search Chats')}
|
||||
maxlength="500"
|
||||
/>
|
||||
|
||||
{#if query}
|
||||
<div class="self-center pl-1.5 pr-1 translate-y-[0.5px] rounded-l-xl bg-transparent">
|
||||
<button
|
||||
class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
|
||||
on:click={() => {
|
||||
query = '';
|
||||
selectedIdx = 0;
|
||||
}}
|
||||
{#if showSearch}
|
||||
<div class=" flex w-full space-x-2 mt-0.5 mb-1.5">
|
||||
<div class="flex flex-1">
|
||||
<div class=" self-center ml-1 mr-3">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
class="w-4 h-4"
|
||||
>
|
||||
<XMark className="size-3" strokeWidth="2" />
|
||||
</button>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
<input
|
||||
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
|
||||
bind:value={query}
|
||||
placeholder={$i18n.t('Search Chats')}
|
||||
maxlength="500"
|
||||
/>
|
||||
|
||||
{#if query}
|
||||
<div class="self-center pl-1.5 pr-1 translate-y-[0.5px] rounded-l-xl bg-transparent">
|
||||
<button
|
||||
class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
|
||||
on:click={() => {
|
||||
query = '';
|
||||
selectedIdx = 0;
|
||||
}}
|
||||
>
|
||||
<XMark className="size-3" strokeWidth="2" />
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
|
||||
{#if chatList}
|
||||
<div class="w-full">
|
||||
{#if chatList.length > 0}
|
||||
<div class="flex text-xs font-medium mb-1.5">
|
||||
{#if showUserInfo}
|
||||
<div class="px-1.5 py-1 w-32">
|
||||
{$i18n.t('User')}
|
||||
</div>
|
||||
{/if}
|
||||
<button
|
||||
class="px-1.5 py-1 cursor-pointer select-none basis-3/5"
|
||||
class="px-1.5 py-1 cursor-pointer select-none {showUserInfo
|
||||
? 'flex-1'
|
||||
: 'basis-3/5'}"
|
||||
on:click={() => setSortKey('title')}
|
||||
>
|
||||
<div class="flex gap-1.5 items-center">
|
||||
@@ -172,7 +185,9 @@
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="px-1.5 py-1 cursor-pointer select-none hidden sm:flex sm:basis-2/5 justify-end"
|
||||
class="px-1.5 py-1 cursor-pointer select-none hidden sm:flex {showUserInfo
|
||||
? 'w-28'
|
||||
: 'sm:basis-2/5'} justify-end"
|
||||
on:click={() => setSortKey('updated_at')}
|
||||
>
|
||||
<div class="flex gap-1.5 items-center">
|
||||
@@ -234,11 +249,23 @@
|
||||
{/if}
|
||||
|
||||
<div
|
||||
class=" w-full flex justify-between items-center rounded-lg text-sm py-2 px-3 hover:bg-gray-50 dark:hover:bg-gray-850"
|
||||
class=" w-full flex items-center rounded-lg text-sm py-2 px-3 hover:bg-gray-50 dark:hover:bg-gray-850"
|
||||
draggable="false"
|
||||
>
|
||||
{#if showUserInfo && chat.user_id}
|
||||
<div class="w-32 shrink-0 flex items-center gap-2">
|
||||
<img
|
||||
src="{WEBUI_API_BASE_URL}/users/{chat.user_id}/profile/image"
|
||||
alt={chat.user_name || 'User'}
|
||||
class="size-5 rounded-full object-cover shrink-0"
|
||||
/>
|
||||
<span class="text-xs text-gray-600 dark:text-gray-400 truncate"
|
||||
>{chat.user_name || 'Unknown'}</span
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
<a
|
||||
class=" basis-3/5"
|
||||
class={showUserInfo ? 'flex-1' : 'basis-3/5'}
|
||||
href={shareUrl ? `/s/${chat.id}` : `/c/${chat.id}`}
|
||||
on:click={() => (show = false)}
|
||||
>
|
||||
@@ -247,7 +274,7 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="basis-2/5 flex items-center justify-end">
|
||||
<div class="{showUserInfo ? 'w-28' : 'basis-2/5'} flex items-center justify-end">
|
||||
<div class="hidden sm:flex text-gray-500 dark:text-gray-400 text-xs">
|
||||
{$i18n.t(
|
||||
dayjs(chat?.updated_at * 1000).calendar(null, {
|
||||
@@ -261,89 +288,93 @@
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end pl-2.5 text-gray-600 dark:text-gray-300">
|
||||
{#if unarchiveHandler}
|
||||
<Tooltip content={$i18n.t('Unarchive Chat')}>
|
||||
<button
|
||||
class="self-center w-fit px-1 text-sm rounded-xl"
|
||||
on:click={async (e) => {
|
||||
e.stopImmediatePropagation();
|
||||
e.stopPropagation();
|
||||
unarchiveHandler(chat.id);
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-4"
|
||||
{#if !readOnly}
|
||||
<div class="flex justify-end pl-2.5 text-gray-600 dark:text-gray-300">
|
||||
{#if unarchiveHandler}
|
||||
<Tooltip content={$i18n.t('Unarchive Chat')}>
|
||||
<button
|
||||
class="self-center w-fit px-1 text-sm rounded-xl"
|
||||
on:click={async (e) => {
|
||||
e.stopImmediatePropagation();
|
||||
e.stopPropagation();
|
||||
unarchiveHandler(chat.id);
|
||||
}}
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15m0-3-3-3m0 0-3 3m3-3V15"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-4"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15m0-3-3-3m0 0-3 3m3-3V15"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
|
||||
{#if unshareHandler && chat.share_id}
|
||||
<Tooltip content={$i18n.t('Copy Share Link')}>
|
||||
<button
|
||||
class="self-center w-fit px-1 text-sm rounded-xl"
|
||||
on:click={async (e) => {
|
||||
e.stopImmediatePropagation();
|
||||
e.stopPropagation();
|
||||
const shareUrl = `${window.location.origin}/s/${chat.share_id}`;
|
||||
await navigator.clipboard.writeText(shareUrl);
|
||||
toast.success($i18n.t('Share link copied to clipboard.'));
|
||||
}}
|
||||
>
|
||||
<Clipboard class="size-4" strokeWidth="1.5" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
{#if unshareHandler && chat.share_id}
|
||||
<Tooltip content={$i18n.t('Copy Share Link')}>
|
||||
<button
|
||||
class="self-center w-fit px-1 text-sm rounded-xl"
|
||||
on:click={async (e) => {
|
||||
e.stopImmediatePropagation();
|
||||
e.stopPropagation();
|
||||
const shareUrl = `${window.location.origin}/s/${chat.share_id}`;
|
||||
await navigator.clipboard.writeText(shareUrl);
|
||||
toast.success($i18n.t('Share link copied to clipboard.'));
|
||||
}}
|
||||
>
|
||||
<Clipboard class="size-4" strokeWidth="1.5" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
|
||||
<Tooltip
|
||||
content={unshareHandler ? $i18n.t('Unshare Chat') : $i18n.t('Delete Chat')}
|
||||
>
|
||||
<button
|
||||
class="self-center w-fit px-1 text-sm rounded-xl"
|
||||
on:click={async (e) => {
|
||||
e.stopImmediatePropagation();
|
||||
e.stopPropagation();
|
||||
if (unshareHandler) {
|
||||
unshareHandler(chat.id);
|
||||
} else {
|
||||
selectedChatId = chat.id;
|
||||
showDeleteConfirmDialog = true;
|
||||
}
|
||||
}}
|
||||
<Tooltip
|
||||
content={unshareHandler
|
||||
? $i18n.t('Unshare Chat')
|
||||
: $i18n.t('Delete Chat')}
|
||||
>
|
||||
{#if unshareHandler}
|
||||
<LinkSlash />
|
||||
{:else}
|
||||
<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 9-.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 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
|
||||
/>
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<button
|
||||
class="self-center w-fit px-1 text-sm rounded-xl"
|
||||
on:click={async (e) => {
|
||||
e.stopImmediatePropagation();
|
||||
e.stopPropagation();
|
||||
if (unshareHandler) {
|
||||
unshareHandler(chat.id);
|
||||
} else {
|
||||
selectedChatId = chat.id;
|
||||
showDeleteConfirmDialog = true;
|
||||
}
|
||||
}}
|
||||
>
|
||||
{#if unshareHandler}
|
||||
<LinkSlash />
|
||||
{:else}
|
||||
<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 9-.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 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
|
||||
/>
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
Reference in New Issue
Block a user