enh: analytics model modal
This commit is contained in:
Timothy Jaeryang Baek
@@ -229,3 +229,79 @@ export const getTokenUsage = async (
|
||||
|
||||
return res;
|
||||
};
|
||||
|
||||
export const getModelChats = async (
|
||||
token: string = '',
|
||||
modelId: string,
|
||||
startDate: number | null = null,
|
||||
endDate: number | null = null,
|
||||
skip: number = 0,
|
||||
limit: number = 50
|
||||
) => {
|
||||
let error = null;
|
||||
|
||||
const searchParams = new URLSearchParams();
|
||||
if (startDate) searchParams.append('start_date', startDate.toString());
|
||||
if (endDate) searchParams.append('end_date', endDate.toString());
|
||||
if (skip) searchParams.append('skip', skip.toString());
|
||||
if (limit) searchParams.append('limit', limit.toString());
|
||||
|
||||
const res = await fetch(`${WEBUI_API_BASE_URL}/analytics/models/${encodeURIComponent(modelId)}/chats?${searchParams.toString()}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
authorization: `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
.then(async (res) => {
|
||||
if (!res.ok) throw await res.json();
|
||||
return res.json();
|
||||
})
|
||||
.catch((err) => {
|
||||
error = err.detail;
|
||||
console.error(err);
|
||||
return null;
|
||||
});
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
return res;
|
||||
};
|
||||
|
||||
export const getModelOverview = async (
|
||||
token: string = '',
|
||||
modelId: string,
|
||||
days: number = 30
|
||||
) => {
|
||||
let error = null;
|
||||
|
||||
const searchParams = new URLSearchParams();
|
||||
searchParams.append('days', days.toString());
|
||||
|
||||
const res = await fetch(`${WEBUI_API_BASE_URL}/analytics/models/${encodeURIComponent(modelId)}/overview?${searchParams.toString()}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
authorization: `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
.then(async (res) => {
|
||||
if (!res.ok) throw await res.json();
|
||||
return res.json();
|
||||
})
|
||||
.catch((err) => {
|
||||
error = err.detail;
|
||||
console.error(err);
|
||||
return null;
|
||||
});
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
return res;
|
||||
};
|
||||
|
||||
@@ -0,0 +1,248 @@
|
||||
<script lang="ts">
|
||||
import Modal from '$lib/components/common/Modal.svelte';
|
||||
import { getContext } from 'svelte';
|
||||
import { getModelChats, getModelOverview } from '$lib/apis/analytics';
|
||||
import ModelActivityChart from '$lib/components/admin/Evaluations/ModelActivityChart.svelte';
|
||||
import ChatList from '$lib/components/common/ChatList.svelte';
|
||||
import XMark from '$lib/components/icons/XMark.svelte';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import { config } from '$lib/stores';
|
||||
|
||||
export let show = false;
|
||||
export let model: { id: string; name: string } | null = null;
|
||||
export let startDate: number | null = null;
|
||||
export let endDate: number | null = null;
|
||||
export let onClose: () => void = () => {};
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
type Tab = 'overview' | 'chats';
|
||||
let selectedTab: Tab = 'overview';
|
||||
|
||||
// Overview tab state
|
||||
type TimeRange = '30d' | '1y' | 'all';
|
||||
const TIME_RANGES: { key: TimeRange; label: string; days: number }[] = [
|
||||
{ key: '30d', label: '30D', days: 30 },
|
||||
{ key: '1y', label: '1Y', days: 365 },
|
||||
{ key: 'all', label: 'All', days: 0 }
|
||||
];
|
||||
let selectedRange: TimeRange = '30d';
|
||||
let history: Array<{ date: string; won: number; lost: number }> = [];
|
||||
let tags: Array<{ tag: string; count: number }> = [];
|
||||
let loadingOverview = false;
|
||||
|
||||
// Chats tab state
|
||||
let chatList: Array<{ id: string; title: string; updated_at: number; user_id?: string; user_name?: string }> = [];
|
||||
let chatListLoading = false;
|
||||
let allChatsLoaded = false;
|
||||
const PAGE_SIZE = 50;
|
||||
|
||||
const close = () => {
|
||||
show = false;
|
||||
selectedTab = 'overview';
|
||||
chatList = [];
|
||||
allChatsLoaded = false;
|
||||
history = [];
|
||||
tags = [];
|
||||
onClose();
|
||||
};
|
||||
|
||||
const loadOverview = async (days: number) => {
|
||||
if (!model?.id) return;
|
||||
loadingOverview = true;
|
||||
try {
|
||||
const result = await getModelOverview(localStorage.token, model.id, days);
|
||||
history = result?.history ?? [];
|
||||
tags = result?.tags ?? [];
|
||||
} catch (err) {
|
||||
console.error('Failed to load overview:', err);
|
||||
history = [];
|
||||
tags = [];
|
||||
}
|
||||
loadingOverview = false;
|
||||
};
|
||||
|
||||
const selectRange = (range: TimeRange) => {
|
||||
selectedRange = range;
|
||||
const config = TIME_RANGES.find((r) => r.key === range);
|
||||
if (config) {
|
||||
loadOverview(config.days);
|
||||
}
|
||||
};
|
||||
|
||||
const loadChats = async () => {
|
||||
if (!model?.id) return;
|
||||
chatListLoading = true;
|
||||
chatList = [];
|
||||
allChatsLoaded = false;
|
||||
try {
|
||||
const res = await getModelChats(localStorage.token, model.id, startDate, endDate, 0, PAGE_SIZE);
|
||||
const chats = res?.chats ?? [];
|
||||
chatList = chats.map((c: any) => ({
|
||||
id: c.chat_id,
|
||||
title: c.first_message || 'No preview',
|
||||
updated_at: c.updated_at,
|
||||
user_id: c.user_id,
|
||||
user_name: c.user_name
|
||||
}));
|
||||
allChatsLoaded = chats.length < PAGE_SIZE;
|
||||
} catch (err) {
|
||||
console.error('Failed to load chats:', err);
|
||||
chatList = [];
|
||||
allChatsLoaded = true;
|
||||
}
|
||||
chatListLoading = false;
|
||||
};
|
||||
|
||||
const loadMoreChats = async () => {
|
||||
if (!model?.id || chatListLoading || allChatsLoaded) return;
|
||||
chatListLoading = true;
|
||||
try {
|
||||
const skip = chatList.length;
|
||||
const res = await getModelChats(localStorage.token, model.id, startDate, endDate, skip, PAGE_SIZE);
|
||||
const chats = res?.chats ?? [];
|
||||
const newChats = chats.map((c: any) => ({
|
||||
id: c.chat_id,
|
||||
title: c.first_message || 'No preview',
|
||||
updated_at: c.updated_at,
|
||||
user_id: c.user_id,
|
||||
user_name: c.user_name
|
||||
}));
|
||||
chatList = [...chatList, ...newChats];
|
||||
allChatsLoaded = chats.length < PAGE_SIZE;
|
||||
} catch (err) {
|
||||
console.error('Failed to load more chats:', err);
|
||||
}
|
||||
chatListLoading = false;
|
||||
};
|
||||
|
||||
const selectTab = (tab: Tab) => {
|
||||
selectedTab = tab;
|
||||
if (tab === 'chats' && chatList.length === 0) {
|
||||
loadChats();
|
||||
}
|
||||
};
|
||||
|
||||
// Load overview when modal opens
|
||||
$: if (show && model?.id) {
|
||||
selectedTab = 'overview';
|
||||
chatList = [];
|
||||
allChatsLoaded = false;
|
||||
selectRange(selectedRange);
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal size="md" bind:show>
|
||||
{#if model}
|
||||
<div class="flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
|
||||
<Tooltip content={`${model.name} (${model.id})`} placement="top-start">
|
||||
<div class="text-lg font-medium self-center line-clamp-1">
|
||||
{model.name}
|
||||
</div>
|
||||
</Tooltip>
|
||||
<button class="self-center" on:click={close} aria-label="Close">
|
||||
<XMark className={'size-5'} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="px-5 border-b border-gray-100 dark:border-gray-850">
|
||||
<div class="flex gap-4">
|
||||
<button
|
||||
class="py-2 text-sm font-medium border-b-2 transition-colors {selectedTab === 'overview'
|
||||
? 'border-black dark:border-white text-gray-900 dark:text-white'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'}"
|
||||
on:click={() => selectTab('overview')}
|
||||
>
|
||||
{$i18n.t('Overview')}
|
||||
</button>
|
||||
{#if $config?.features?.enable_admin_chat_access}
|
||||
<button
|
||||
class="py-2 text-sm font-medium border-b-2 transition-colors {selectedTab === 'chats'
|
||||
? 'border-black dark:border-white text-gray-900 dark:text-white'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'}"
|
||||
on:click={() => selectTab('chats')}
|
||||
>
|
||||
{$i18n.t('Chats')}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-5 pb-4 dark:text-gray-200">
|
||||
{#if selectedTab === 'overview'}
|
||||
<!-- Activity Chart -->
|
||||
<div class="mb-4 mt-3">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<Tooltip content={$i18n.t('Thumbs up/down ratings from users on model responses')}>
|
||||
<div class="text-xs text-gray-500 font-medium uppercase tracking-wide cursor-help">
|
||||
{$i18n.t('Feedback Activity')}
|
||||
</div>
|
||||
</Tooltip>
|
||||
<div
|
||||
class="inline-flex rounded-full bg-gray-100/80 p-0.5 dark:bg-gray-800/80 backdrop-blur-sm"
|
||||
>
|
||||
{#each TIME_RANGES as range}
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-full transition-all duration-200 px-2.5 py-0.5 text-xs font-medium {selectedRange ===
|
||||
range.key
|
||||
? 'bg-white text-gray-900 shadow-sm dark:bg-gray-700 dark:text-white'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}"
|
||||
on:click={() => selectRange(range.key)}
|
||||
>
|
||||
{range.label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<ModelActivityChart
|
||||
{history}
|
||||
loading={loadingOverview}
|
||||
aggregateWeekly={selectedRange === '1y' || selectedRange === 'all'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Tags -->
|
||||
<div class="mb-4">
|
||||
<div class="text-xs text-gray-500 mb-2 font-medium uppercase tracking-wide">
|
||||
{$i18n.t('Tags')}
|
||||
</div>
|
||||
{#if tags.length}
|
||||
<div class="flex flex-wrap gap-1 -mx-1">
|
||||
{#each tags as tagInfo}
|
||||
<span class="px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-850 text-xs">
|
||||
{tagInfo.tag} <span class="text-gray-500 font-medium">{tagInfo.count}</span>
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<span class="text-gray-500 text-sm">-</span>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if selectedTab === 'chats'}
|
||||
<div class="mt-3">
|
||||
<ChatList
|
||||
{chatList}
|
||||
loading={chatListLoading}
|
||||
allLoaded={allChatsLoaded}
|
||||
showUserInfo={true}
|
||||
shareUrl={true}
|
||||
onLoadMore={loadMoreChats}
|
||||
onChatClick={() => (show = false)}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex justify-end pt-4">
|
||||
<button
|
||||
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
|
||||
type="button"
|
||||
on:click={close}
|
||||
>
|
||||
{$i18n.t('Close')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</Modal>
|
||||
@@ -6,8 +6,10 @@
|
||||
import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
|
||||
import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
|
||||
import ChartLine from './ChartLine.svelte';
|
||||
import AnalyticsModelModal from './AnalyticsModelModal.svelte';
|
||||
import { WEBUI_API_BASE_URL } from '$lib/constants';
|
||||
import { formatNumber } from '$lib/utils';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
@@ -43,6 +45,10 @@
|
||||
|
||||
let loading = true;
|
||||
|
||||
// Selected model for drill-down
|
||||
let selectedModel: { id: string; name: string } | null = null;
|
||||
let showModelModal = false;
|
||||
|
||||
// Sorting
|
||||
let modelOrderBy = 'count';
|
||||
let modelDirection: 'asc' | 'desc' = 'desc';
|
||||
@@ -157,6 +163,14 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Model Details Modal -->
|
||||
<AnalyticsModelModal
|
||||
bind:show={showModelModal}
|
||||
model={selectedModel}
|
||||
startDate={getDateRange(selectedPeriod).start}
|
||||
endDate={getDateRange(selectedPeriod).end}
|
||||
/>
|
||||
|
||||
<!-- Summary stats -->
|
||||
{#if !loading}
|
||||
<div class="flex gap-3 text-xs text-gray-500 dark:text-gray-400 px-0.5 pb-2">
|
||||
@@ -241,7 +255,10 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each sortedModels as model, idx (model.model_id)}
|
||||
<tr class="bg-white dark:bg-gray-900 dark:border-gray-850 text-xs">
|
||||
<tr
|
||||
class="bg-white dark:bg-gray-900 dark:border-gray-850 text-xs cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
|
||||
on:click={() => { selectedModel = { id: model.model_id, name: model.name }; showModelModal = true; }}
|
||||
>
|
||||
<td class="px-3 py-1 text-gray-400">{idx + 1}</td>
|
||||
<td class="px-3 py-1 font-medium text-gray-900 dark:text-white">
|
||||
<div class="flex items-center gap-2">
|
||||
|
||||
@@ -0,0 +1,121 @@
|
||||
<script lang="ts">
|
||||
import { getContext } from 'svelte';
|
||||
import dayjs from 'dayjs';
|
||||
import calendar from 'dayjs/plugin/calendar';
|
||||
import { WEBUI_API_BASE_URL } from '$lib/constants';
|
||||
import Spinner from '$lib/components/common/Spinner.svelte';
|
||||
import Loader from '$lib/components/common/Loader.svelte';
|
||||
|
||||
dayjs.extend(calendar);
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
export let chatList: Array<{
|
||||
id: string;
|
||||
title: string;
|
||||
updated_at: number;
|
||||
user_id?: string;
|
||||
user_name?: string;
|
||||
time_range?: string;
|
||||
}> | null = null;
|
||||
export let loading = false;
|
||||
export let allLoaded = false;
|
||||
export let showUserInfo = false;
|
||||
export let shareUrl = false;
|
||||
export let emptyMessage = 'No chats found';
|
||||
export let onLoadMore: (() => void) | null = null;
|
||||
export let onChatClick: ((chatId: string) => void) | null = null;
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#if chatList && 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}
|
||||
<div class="px-1.5 py-1 {showUserInfo ? 'flex-1' : 'basis-3/5'}">
|
||||
{$i18n.t('Title')}
|
||||
</div>
|
||||
<div class="px-1.5 py-1 hidden sm:flex {showUserInfo ? 'w-28' : 'basis-2/5'} justify-end">
|
||||
{$i18n.t('Updated at')}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="max-h-[22rem] overflow-y-scroll">
|
||||
{#if loading && (!chatList || chatList.length === 0)}
|
||||
<div class="flex justify-center py-8">
|
||||
<Spinner />
|
||||
</div>
|
||||
{:else if !chatList || chatList.length === 0}
|
||||
<div class="text-center text-gray-500 text-sm py-8">
|
||||
{$i18n.t(emptyMessage)}
|
||||
</div>
|
||||
{:else}
|
||||
{#each chatList as chat, idx (chat.id)}
|
||||
{#if chat.time_range && (idx === 0 || chat.time_range !== chatList[idx - 1]?.time_range)}
|
||||
<div
|
||||
class="w-full text-xs text-gray-500 dark:text-gray-500 font-medium {idx === 0
|
||||
? ''
|
||||
: 'pt-5'} pb-2 px-2"
|
||||
>
|
||||
{$i18n.t(chat.time_range)}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
class="w-full flex items-center rounded-lg text-sm py-2 px-3 hover:bg-gray-50 dark:hover:bg-gray-850"
|
||||
>
|
||||
{#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={showUserInfo ? 'flex-1' : 'basis-3/5'}
|
||||
href={shareUrl ? `/s/${chat.id}` : `/c/${chat.id}`}
|
||||
on:click={() => onChatClick?.(chat.id)}
|
||||
>
|
||||
<div class="text-ellipsis line-clamp-1 w-full">
|
||||
{chat.title}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<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">
|
||||
{dayjs(chat.updated_at * 1000).calendar(null, {
|
||||
sameDay: '[Today] h:mm A',
|
||||
lastDay: '[Yesterday] h:mm A',
|
||||
lastWeek: 'MMM D',
|
||||
sameElse: 'MMM D, YYYY'
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
{#if !allLoaded && onLoadMore}
|
||||
<Loader
|
||||
on:visible={() => {
|
||||
if (!loading) {
|
||||
onLoadMore();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2">
|
||||
<Spinner className="size-4" />
|
||||
<div>{$i18n.t('Loading...')}</div>
|
||||
</div>
|
||||
</Loader>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@@ -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