refac

backend/open_webui/models/feedbacks.py

@@ -215,6 +215,13 @@ class FeedbackTable:
             query = db.query(Feedback, User).join(User, Feedback.user_id == User.id)
 
             if filter:
+                # Apply model_id filter (exact match)
+                model_id = filter.get('model_id')
+                if model_id:
+                    query = query.filter(
+                        Feedback.data['model_id'].as_string() == model_id
+                    )
+
                 order_by = filter.get('order_by')
                 direction = filter.get('direction')
 
@@ -288,6 +295,17 @@ class FeedbackTable:
                 .all()
             ]
 
+    def get_distinct_model_ids(self, db: Optional[Session] = None) -> list[str]:
+        """Get distinct model_ids from feedback data for filter dropdowns."""
+        with get_db_context(db) as db:
+            rows = (
+                db.query(Feedback.data['model_id'].as_string())
+                .filter(Feedback.data['model_id'].as_string().isnot(None))
+                .distinct()
+                .all()
+            )
+            return sorted([row[0] for row in rows if row[0]])
+
     def get_feedbacks_for_leaderboard(self, db: Optional[Session] = None) -> list[LeaderboardFeedbackData]:
         """Fetch only id and data for leaderboard computation (excludes snapshot/meta)."""
         with get_db_context(db) as db:

backend/open_webui/routers/evaluations.py

@@ -291,6 +291,11 @@ async def update_config(
     }
 
 
+@router.get('/feedbacks/models', response_model=list[str])
+async def get_feedback_model_ids(user=Depends(get_admin_user), db: Session = Depends(get_session)):
+    return Feedbacks.get_distinct_model_ids(db=db)
+
+
 @router.get('/feedbacks/all', response_model=list[FeedbackResponse])
 async def get_all_feedbacks(user=Depends(get_admin_user), db: Session = Depends(get_session)):
     feedbacks = Feedbacks.get_all_feedbacks(db=db)
@@ -309,8 +314,17 @@ async def delete_all_feedbacks(user=Depends(get_admin_user), db: Session = Depen
 
 
 @router.get('/feedbacks/all/export', response_model=list[FeedbackModel])
-async def export_all_feedbacks(user=Depends(get_admin_user), db: Session = Depends(get_session)):
+async def export_all_feedbacks(
+    model_id: Optional[str] = None,
+    user=Depends(get_admin_user),
+    db: Session = Depends(get_session),
+):
     feedbacks = Feedbacks.get_all_feedbacks(db=db)
+    if model_id:
+        feedbacks = [
+            f for f in feedbacks
+            if f.data and f.data.get('model_id') == model_id
+        ]
     return feedbacks
 
 
@@ -334,6 +348,7 @@ async def get_feedbacks(
     order_by: Optional[str] = None,
     direction: Optional[str] = None,
     page: Optional[int] = 1,
+    model_id: Optional[str] = None,
     user=Depends(get_admin_user),
     db: Session = Depends(get_session),
 ):
@@ -347,6 +362,8 @@ async def get_feedbacks(
         filter['order_by'] = order_by
     if direction:
         filter['direction'] = direction
+    if model_id:
+        filter['model_id'] = model_id
 
     result = Feedbacks.get_feedback_items(filter=filter, skip=skip, limit=limit, db=db)
     return result

src/lib/apis/evaluations/index.ts

@@ -161,13 +161,42 @@ export const getModelHistory = async (token: string = '', modelId: string, days:
 	return res;
 };
 
-export const getFeedbackItems = async (token: string = '', orderBy, direction, page) => {
+export const getFeedbackModelIds = async (token: string = '') => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/evaluations/feedbacks/models`, {
+		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 getFeedbackItems = async (token: string = '', orderBy, direction, page, modelId: string = '') => {
 	let error = null;
 
 	const searchParams = new URLSearchParams();
 	if (orderBy) searchParams.append('order_by', orderBy);
 	if (direction) searchParams.append('direction', direction);
 	if (page) searchParams.append('page', page.toString());
+	if (modelId) searchParams.append('model_id', modelId);
 
 	const res = await fetch(
 		`${WEBUI_API_BASE_URL}/evaluations/feedbacks/list?${searchParams.toString()}`,
@@ -200,10 +229,13 @@ export const getFeedbackItems = async (token: string = '', orderBy, direction, p
 	return res;
 };
 
-export const exportAllFeedbacks = async (token: string = '') => {
+export const exportAllFeedbacks = async (token: string = '', modelId: string = '') => {
 	let error = null;
 
-	const res = await fetch(`${WEBUI_API_BASE_URL}/evaluations/feedbacks/all/export`, {
+	const searchParams = new URLSearchParams();
+	if (modelId) searchParams.append('model_id', modelId);
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/evaluations/feedbacks/all/export?${searchParams.toString()}`, {
 		method: 'GET',
 		headers: {
 			Accept: 'application/json',

src/lib/components/admin/Evaluations/Feedbacks.svelte

@@ -10,7 +10,12 @@
 	import { onMount, getContext } from 'svelte';
 	const i18n = getContext('i18n');
 
-	import { deleteFeedbackById, exportAllFeedbacks, getFeedbackItems } from '$lib/apis/evaluations';
+	import {
+		deleteFeedbackById,
+		exportAllFeedbacks,
+		getFeedbackItems,
+		getFeedbackModelIds
+	} from '$lib/apis/evaluations';
 
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Download from '$lib/components/icons/Download.svelte';
@@ -26,6 +31,8 @@
 	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 	import { config } from '$lib/stores';
 	import Spinner from '$lib/components/common/Spinner.svelte';
+	import Select from '$lib/components/common/Select.svelte';
+	import Check from '$lib/components/icons/Check.svelte';
 
 	let page = 1;
 	let items = null;
@@ -34,6 +41,9 @@
 	let orderBy: string = 'updated_at';
 	let direction: 'asc' | 'desc' = 'desc';
 
+	let selectedModelId: string = '';
+	let modelIds: string[] = [];
+
 	const setSortKey = (key) => {
 		if (orderBy === key) {
 			direction = direction === 'asc' ? 'desc' : 'asc';
@@ -64,12 +74,16 @@
 
 	const getFeedbacks = async () => {
 		try {
-			const res = await getFeedbackItems(localStorage.token, orderBy, direction, page).catch(
-				(error) => {
-					toast.error(`${error}`);
-					return null;
-				}
-			);
+			const res = await getFeedbackItems(
+				localStorage.token,
+				orderBy,
+				direction,
+				page,
+				selectedModelId
+			).catch((error) => {
+				toast.error(`${error}`);
+				return null;
+			});
 
 			if (res) {
 				items = res.items;
@@ -80,10 +94,21 @@
 		}
 	};
 
-	$: if (orderBy && direction && page) {
+	$: if (orderBy && direction && page !== undefined) {
 		getFeedbacks();
 	}
 
+	const loadModelIds = async () => {
+		try {
+			const res = await getFeedbackModelIds(localStorage.token);
+			if (res) {
+				modelIds = res;
+			}
+		} catch (err) {
+			console.error(err);
+		}
+	};
+
 	const deleteFeedbackHandler = async (feedbackId: string) => {
 		const response = await deleteFeedbackById(localStorage.token, feedbackId).catch((err) => {
 			toast.error(err);
@@ -124,10 +149,12 @@
 	};
 
 	const exportHandler = async () => {
-		const _feedbacks = await exportAllFeedbacks(localStorage.token).catch((err) => {
-			toast.error(err);
-			return null;
-		});
+		const _feedbacks = await exportAllFeedbacks(localStorage.token, selectedModelId).catch(
+			(err) => {
+				toast.error(err);
+				return null;
+			}
+		);
 
 		if (_feedbacks) {
 			let blob = new Blob([JSON.stringify(_feedbacks)], {
@@ -136,6 +163,10 @@
 			saveAs(blob, `feedback-history-export-${Date.now()}.json`);
 		}
 	};
+
+	onMount(() => {
+		loadModelIds();
+	});
 </script>
 
 <FeedbackModal bind:show={showFeedbackModal} {selectedFeedback} onClose={closeFeedbackModal} />
@@ -145,236 +176,296 @@
 		<Spinner className="size-5" />
 	</div>
 {:else}
-	<div class="mt-0.5 mb-1 gap-1 flex flex-row justify-between">
-		<div class="flex items-center md:self-center text-xl font-medium px-0.5 gap-2 shrink-0">
-			<div>
-				{$i18n.t('Feedback History')}
+	<div class="flex flex-col gap-1 mt-0.5 mb-3">
+		<div class="flex justify-between items-center">
+			<div class="flex items-center md:self-center text-xl font-medium px-0.5 gap-2 shrink-0">
+				<div>
+					{$i18n.t('Feedback History')}
+				</div>
+
+				<div class="text-lg font-medium text-gray-500 dark:text-gray-500">
+					{total}
+				</div>
 			</div>
 
-			<div class="text-lg font-medium text-gray-500 dark:text-gray-500">
-				{total}
-			</div>
-		</div>
-
-		{#if total > 0}
-			<div>
-				<Tooltip content={$i18n.t('Export')}>
+			<div class="flex w-full justify-end gap-1.5">
+				{#if total > 0}
 					<button
-						class=" p-2 rounded-xl hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition font-medium text-sm flex items-center space-x-1"
+						class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition"
 						on:click={() => {
 							exportHandler();
 						}}
 					>
-						<Download className="size-3" />
+						<div class="self-center font-medium line-clamp-1">
+							{$i18n.t('Export')}
+						</div>
 					</button>
-				</Tooltip>
+				{/if}
 			</div>
-		{/if}
+		</div>
 	</div>
 
-	<div class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full">
-		{#if (items ?? []).length === 0}
-			<div class="text-center text-xs text-gray-500 dark:text-gray-400 py-1">
-				{$i18n.t('No feedback found')}
-			</div>
-		{:else}
-			<table
-				class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full"
+	<div
+		class="py-2 bg-white dark:bg-gray-900 rounded-3xl border border-gray-100/30 dark:border-gray-850/30"
+	>
+		{#if modelIds.length > 0}
+			<div
+				class="px-2.5 flex w-full bg-transparent overflow-x-auto scrollbar-none mb-1"
+				on:wheel={(e) => {
+					if (e.deltaY !== 0) {
+						e.preventDefault();
+						e.currentTarget.scrollLeft += e.deltaY;
+					}
+				}}
 			>
-				<thead class="text-xs text-gray-800 uppercase bg-transparent dark:text-gray-200">
-					<tr class=" border-b-[1.5px] border-gray-50 dark:border-gray-850/30">
-						<th
-							scope="col"
-							class="px-2.5 py-2 cursor-pointer select-none w-3"
-							on:click={() => setSortKey('user')}
-						>
-							<div class="flex gap-1.5 items-center justify-end">
-								{$i18n.t('User')}
-								{#if orderBy === 'user'}
-									<span class="font-normal">
-										{#if direction === 'asc'}
-											<ChevronUp className="size-2" />
-										{:else}
-											<ChevronDown className="size-2" />
-										{/if}
-									</span>
-								{:else}
-									<span class="invisible">
-										<ChevronUp className="size-2" />
-									</span>
-								{/if}
-							</div>
-						</th>
+				<div
+					class="flex gap-0.5 w-fit text-center text-sm rounded-full bg-transparent whitespace-nowrap"
+				>
+					<Select
+						bind:value={selectedModelId}
+						items={[
+							{ value: '', label: $i18n.t('All') },
+							...modelIds.map((mid) => ({ value: mid, label: mid }))
+						]}
+						placeholder={$i18n.t('All')}
+						triggerClass="relative w-full flex items-center gap-0.5 px-2.5 py-1.5 bg-gray-50 dark:bg-gray-850 rounded-xl"
+						onChange={() => {
+							page = 1;
+							getFeedbacks();
+						}}
+					>
+						<svelte:fragment slot="trigger" let:selectedLabel>
+							<span
+								class="inline-flex h-input px-0.5 w-full outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden"
+							>
+								{selectedLabel}
+							</span>
+							<ChevronDown className="size-3.5" strokeWidth="2.5" />
+						</svelte:fragment>
 
-						<th
-							scope="col"
-							class="px-2.5 py-2 cursor-pointer select-none"
-							on:click={() => setSortKey('model_id')}
-						>
-							<div class="flex gap-1.5 items-center">
-								{$i18n.t('Models')}
-								{#if orderBy === 'model_id'}
-									<span class="font-normal">
-										{#if direction === 'asc'}
-											<ChevronUp className="size-2" />
-										{:else}
-											<ChevronDown className="size-2" />
-										{/if}
-									</span>
-								{:else}
-									<span class="invisible">
-										<ChevronUp className="size-2" />
-									</span>
-								{/if}
+						<svelte:fragment slot="item" let:item let:selected>
+							{item.label}
+							<div class="ml-auto {selected ? '' : 'invisible'}">
+								<Check />
 							</div>
-						</th>
+						</svelte:fragment>
+					</Select>
+				</div>
+			</div>
+		{/if}
 
-						<th
-							scope="col"
-							class="px-2.5 py-2 text-right cursor-pointer select-none w-fit"
-							on:click={() => setSortKey('rating')}
-						>
-							<div class="flex gap-1.5 items-center justify-end">
-								{$i18n.t('Result')}
-								{#if orderBy === 'rating'}
-									<span class="font-normal">
-										{#if direction === 'asc'}
+		<div class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full px-2">
+			{#if (items ?? []).length === 0}
+				<div class="w-full h-full flex flex-col justify-center items-center my-16 mb-24">
+					<div class="max-w-md text-center">
+						<div class="text-3xl mb-3">😕</div>
+						<div class="text-lg font-medium mb-1">{$i18n.t('No feedback found')}</div>
+						<div class="text-gray-500 text-center text-xs">
+							{$i18n.t('Try adjusting your search or filter to find what you are looking for.')}
+						</div>
+					</div>
+				</div>
+			{:else}
+				<table
+					class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full px-2"
+				>
+					<thead class="text-xs text-gray-800 uppercase bg-transparent dark:text-gray-200">
+						<tr class=" border-b-[1.5px] border-gray-50 dark:border-gray-850/30">
+							<th
+								scope="col"
+								class="px-2.5 py-2 cursor-pointer select-none w-3"
+								on:click={() => setSortKey('user')}
+							>
+								<div class="flex gap-1.5 items-center justify-end">
+									{$i18n.t('User')}
+									{#if orderBy === 'user'}
+										<span class="font-normal">
+											{#if direction === 'asc'}
+												<ChevronUp className="size-2" />
+											{:else}
+												<ChevronDown className="size-2" />
+											{/if}
+										</span>
+									{:else}
+										<span class="invisible">
 											<ChevronUp className="size-2" />
-										{:else}
-											<ChevronDown className="size-2" />
-										{/if}
-									</span>
-								{:else}
-									<span class="invisible">
-										<ChevronUp className="size-2" />
-									</span>
-								{/if}
-							</div>
-						</th>
-
-						<th
-							scope="col"
-							class="px-2.5 py-2 text-right cursor-pointer select-none w-0"
-							on:click={() => setSortKey('updated_at')}
-						>
-							<div class="flex gap-1.5 items-center justify-end">
-								{$i18n.t('Updated At')}
-								{#if orderBy === 'updated_at'}
-									<span class="font-normal">
-										{#if direction === 'asc'}
-											<ChevronUp className="size-2" />
-										{:else}
-											<ChevronDown className="size-2" />
-										{/if}
-									</span>
-								{:else}
-									<span class="invisible">
-										<ChevronUp className="size-2" />
-									</span>
-								{/if}
-							</div>
-						</th>
-
-						<th scope="col" class="px-2.5 py-2 text-right cursor-pointer select-none w-0"> </th>
-					</tr>
-				</thead>
-				<tbody class="">
-					{#each items as feedback (feedback.id)}
-						<tr
-							class="bg-white dark:bg-gray-900 dark:border-gray-850 text-xs cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-850/50 transition"
-							on:click={() => openFeedbackModal(feedback)}
-						>
-							<td class=" py-0.5 text-right font-medium">
-								<div class="flex justify-center">
-									<Tooltip content={feedback?.user?.name}>
-										<div class="shrink-0">
-											<img
-												src={`${WEBUI_API_BASE_URL}/users/${feedback.user.id}/profile/image`}
-												alt={feedback?.user?.name}
-												class="size-5 rounded-full object-cover shrink-0"
-											/>
-										</div>
-									</Tooltip>
+										</span>
+									{/if}
 								</div>
-							</td>
+							</th>
 
-							<td class=" py-1 pl-3 flex flex-col">
-								<div class="flex flex-col items-start gap-0.5 h-full">
-									<div class="flex flex-col h-full">
-										{#if feedback.data?.sibling_model_ids}
-											<Tooltip content={feedback.data?.model_id} placement="top-start">
-												<div
-													class="font-medium text-gray-600 dark:text-gray-400 flex-1 line-clamp-1"
-												>
-													{feedback.data?.model_id}
-												</div>
-											</Tooltip>
-
-											<Tooltip content={feedback.data.sibling_model_ids.join(', ')}>
-												<div class=" text-[0.65rem] text-gray-600 dark:text-gray-400 line-clamp-1">
-													{#if feedback.data.sibling_model_ids.length > 2}
-														<!-- {$i18n.t('and {{COUNT}} more')} -->
-														{feedback.data.sibling_model_ids.slice(0, 2).join(', ')}, {$i18n.t(
-															'and {{COUNT}} more',
-															{ COUNT: feedback.data.sibling_model_ids.length - 2 }
-														)}
-													{:else}
-														{feedback.data.sibling_model_ids.join(', ')}
-													{/if}
-												</div>
-											</Tooltip>
-										{:else}
-											<Tooltip content={feedback.data?.model_id} placement="top-start">
-												<div
-													class="text-sm font-medium text-gray-600 dark:text-gray-400 flex-1 py-1.5 line-clamp-1"
-												>
-													{feedback.data?.model_id}
-												</div>
-											</Tooltip>
-										{/if}
-									</div>
+							<th
+								scope="col"
+								class="px-2.5 py-2 cursor-pointer select-none"
+								on:click={() => setSortKey('model_id')}
+							>
+								<div class="flex gap-1.5 items-center">
+									{$i18n.t('Models')}
+									{#if orderBy === 'model_id'}
+										<span class="font-normal">
+											{#if direction === 'asc'}
+												<ChevronUp className="size-2" />
+											{:else}
+												<ChevronDown className="size-2" />
+											{/if}
+										</span>
+									{:else}
+										<span class="invisible">
+											<ChevronUp className="size-2" />
+										</span>
+									{/if}
 								</div>
-							</td>
+							</th>
 
-							{#if feedback?.data?.rating}
-								<td class="px-3 py-1 text-right font-medium text-gray-900 dark:text-white w-max">
-									<div class=" flex justify-end">
-										{#if feedback?.data?.rating.toString() === '1'}
-											<Badge type="info" content={$i18n.t('Won')} />
-										{:else if feedback?.data?.rating.toString() === '0'}
-											<Badge type="muted" content={$i18n.t('Draw')} />
-										{:else if feedback?.data?.rating.toString() === '-1'}
-											<Badge type="error" content={$i18n.t('Lost')} />
-										{/if}
+							<th
+								scope="col"
+								class="px-2.5 py-2 text-right cursor-pointer select-none w-fit"
+								on:click={() => setSortKey('rating')}
+							>
+								<div class="flex gap-1.5 items-center justify-end">
+									{$i18n.t('Result')}
+									{#if orderBy === 'rating'}
+										<span class="font-normal">
+											{#if direction === 'asc'}
+												<ChevronUp className="size-2" />
+											{:else}
+												<ChevronDown className="size-2" />
+											{/if}
+										</span>
+									{:else}
+										<span class="invisible">
+											<ChevronUp className="size-2" />
+										</span>
+									{/if}
+								</div>
+							</th>
+
+							<th
+								scope="col"
+								class="px-2.5 py-2 text-right cursor-pointer select-none w-0"
+								on:click={() => setSortKey('updated_at')}
+							>
+								<div class="flex gap-1.5 items-center justify-end">
+									{$i18n.t('Updated At')}
+									{#if orderBy === 'updated_at'}
+										<span class="font-normal">
+											{#if direction === 'asc'}
+												<ChevronUp className="size-2" />
+											{:else}
+												<ChevronDown className="size-2" />
+											{/if}
+										</span>
+									{:else}
+										<span class="invisible">
+											<ChevronUp className="size-2" />
+										</span>
+									{/if}
+								</div>
+							</th>
+
+							<th scope="col" class="px-2.5 py-2 text-right cursor-pointer select-none w-0"> </th>
+						</tr>
+					</thead>
+					<tbody class="">
+						{#each items as feedback (feedback.id)}
+							<tr
+								class="bg-white dark:bg-gray-900 dark:border-gray-850 text-xs cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-850/50 transition rounded-xl"
+								on:click={() => openFeedbackModal(feedback)}
+							>
+								<td class=" py-0.5 text-right font-medium">
+									<div class="flex justify-center">
+										<Tooltip content={feedback?.user?.name}>
+											<div class="shrink-0">
+												<img
+													src={`${WEBUI_API_BASE_URL}/users/${feedback.user.id}/profile/image`}
+													alt={feedback?.user?.name}
+													class="size-5 rounded-full object-cover shrink-0"
+												/>
+											</div>
+										</Tooltip>
 									</div>
 								</td>
-							{/if}
 
-							<td class=" px-3 py-1 text-right font-medium">
-								{dayjs(feedback.updated_at * 1000).fromNow()}
-							</td>
+								<td class=" py-1 pl-3 flex flex-col">
+									<div class="flex flex-col items-start gap-0.5 h-full">
+										<div class="flex flex-col h-full">
+											{#if feedback.data?.sibling_model_ids}
+												<Tooltip content={feedback.data?.model_id} placement="top-start">
+													<div
+														class="font-medium text-gray-600 dark:text-gray-400 flex-1 line-clamp-1"
+													>
+														{feedback.data?.model_id}
+													</div>
+												</Tooltip>
 
-							<td class=" px-3 py-1 text-right font-medium" on:click={(e) => e.stopPropagation()}>
-								<FeedbackMenu
-									on:delete={(e) => {
-										deleteFeedbackHandler(feedback.id);
-									}}
-								>
-									<button
-										class="self-center w-fit text-sm p-1.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+												<Tooltip content={feedback.data.sibling_model_ids.join(', ')}>
+													<div
+														class=" text-[0.65rem] text-gray-600 dark:text-gray-400 line-clamp-1"
+													>
+														{#if feedback.data.sibling_model_ids.length > 2}
+															<!-- {$i18n.t('and {{COUNT}} more')} -->
+															{feedback.data.sibling_model_ids.slice(0, 2).join(', ')}, {$i18n.t(
+																'and {{COUNT}} more',
+																{ COUNT: feedback.data.sibling_model_ids.length - 2 }
+															)}
+														{:else}
+															{feedback.data.sibling_model_ids.join(', ')}
+														{/if}
+													</div>
+												</Tooltip>
+											{:else}
+												<Tooltip content={feedback.data?.model_id} placement="top-start">
+													<div
+														class="text-sm font-medium text-gray-600 dark:text-gray-400 flex-1 py-1.5 line-clamp-1"
+													>
+														{feedback.data?.model_id}
+													</div>
+												</Tooltip>
+											{/if}
+										</div>
+									</div>
+								</td>
+
+								{#if feedback?.data?.rating}
+									<td class="px-3 py-1 text-right font-medium text-gray-900 dark:text-white w-max">
+										<div class=" flex justify-end">
+											{#if feedback?.data?.rating.toString() === '1'}
+												<Badge type="info" content={$i18n.t('Won')} />
+											{:else if feedback?.data?.rating.toString() === '0'}
+												<Badge type="muted" content={$i18n.t('Draw')} />
+											{:else if feedback?.data?.rating.toString() === '-1'}
+												<Badge type="error" content={$i18n.t('Lost')} />
+											{/if}
+										</div>
+									</td>
+								{/if}
+
+								<td class=" px-3 py-1 text-right font-medium">
+									{dayjs(feedback.updated_at * 1000).fromNow()}
+								</td>
+
+								<td class=" px-3 py-1 text-right font-medium" on:click={(e) => e.stopPropagation()}>
+									<FeedbackMenu
+										on:delete={(e) => {
+											deleteFeedbackHandler(feedback.id);
+										}}
 									>
-										<EllipsisHorizontal />
-									</button>
-								</FeedbackMenu>
-							</td>
-						</tr>
-					{/each}
-				</tbody>
-			</table>
+										<button
+											class="self-center w-fit text-sm p-1.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+										>
+											<EllipsisHorizontal />
+										</button>
+									</FeedbackMenu>
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			{/if}
+		</div>
+
+		{#if total > 30}
+			<Pagination bind:page count={total} perPage={30} />
 		{/if}
 	</div>
-
-	{#if total > 30}
-		<Pagination bind:page count={total} perPage={30} />
-	{/if}
 {/if}