enh: feedback exports

src/lib/components/admin/Evaluations.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+	import fileSaver from 'file-saver';
+	const { saveAs } = fileSaver;
+
 	import { onMount, getContext } from 'svelte';
 	import dayjs from 'dayjs';
 	import relativeTime from 'dayjs/plugin/relativeTime';
@@ -12,7 +15,7 @@
 	let model = null;
 
 	import { models } from '$lib/stores';
-	import { deleteFeedbackById, getAllFeedbacks } from '$lib/apis/evaluations';
+	import { deleteFeedbackById, exportAllFeedbacks, getAllFeedbacks } from '$lib/apis/evaluations';
 
 	import FeedbackMenu from './Evaluations/FeedbackMenu.svelte';
 	import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte';
@@ -24,6 +27,9 @@
 	import CloudArrowUp from '../icons/CloudArrowUp.svelte';
 	import { toast } from 'svelte-sonner';
 	import Spinner from '../common/Spinner.svelte';
+	import DocumentArrowUpSolid from '../icons/DocumentArrowUpSolid.svelte';
+	import DocumentArrowDown from '../icons/DocumentArrowDown.svelte';
+	import ArrowDownTray from '../icons/ArrowDownTray.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -300,6 +306,20 @@
 		window.addEventListener('message', messageHandler, false);
 	};
 
+	const exportHandler = async () => {
+		const _feedbacks = await exportAllFeedbacks(localStorage.token).catch((err) => {
+			toast.error(err);
+			return null;
+		});
+
+		if (_feedbacks) {
+			let blob = new Blob([JSON.stringify(_feedbacks)], {
+				type: 'application/json'
+			});
+			saveAs(blob, `feedback-history-export-${Date.now()}.json`);
+		}
+	};
+
 	const loadEmbeddingModel = async () => {
 		// Check if the tokenizer and model are already loaded and stored in the window object
 		if (!window.tokenizer) {
@@ -483,6 +503,21 @@
 
 			<span class="text-lg font-medium text-gray-500 dark:text-gray-300">{feedbacks.length}</span>
 		</div>
+
+		<div>
+			<div>
+				<Tooltip content={$i18n.t('Export')}>
+					<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"
+						on:click={() => {
+							exportHandler();
+						}}
+					>
+						<ArrowDownTray className="size-3" />
+					</button>
+				</Tooltip>
+			</div>
+		</div>
 	</div>
 
 	<div
@@ -626,18 +661,7 @@
 						</div>
 
 						<div class=" self-center">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 16 16"
-								fill="currentColor"
-								class="w-3.5 h-3.5"
-							>
-								<path
-									fill-rule="evenodd"
-									d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm4 9.5a.75.75 0 0 1-.75-.75V8.06l-.72.72a.75.75 0 0 1-1.06-1.06l2-2a.75.75 0 0 1 1.06 0l2 2a.75.75 0 1 1-1.06 1.06l-.72-.72v2.69a.75.75 0 0 1-.75.75Z"
-									clip-rule="evenodd"
-								/>
-							</svg>
+							<CloudArrowUp className="size-3" strokeWidth="3" />
 						</div>
 					</button>
 				</Tooltip>