From 160e63e509ef5f6558a985a5b366e36d69ee4f4a Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Thu, 24 Oct 2024 00:00:49 -0700
Subject: [PATCH] refac: feedback history share support

---
 src/lib/components/admin/Evaluations.svelte  | 75 +++++++++++++++++++-
 src/lib/components/icons/CloudArrowUp.svelte | 19 +++++
 2 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/icons/CloudArrowUp.svelte

diff --git a/src/lib/components/admin/Evaluations.svelte b/src/lib/components/admin/Evaluations.svelte
index bbefcb639..3dd4d3ae4 100644
--- a/src/lib/components/admin/Evaluations.svelte
+++ b/src/lib/components/admin/Evaluations.svelte
@@ -20,6 +20,9 @@
 	import Badge from '../common/Badge.svelte';
 	import Pagination from '../common/Pagination.svelte';
 	import MagnifyingGlass from '../icons/MagnifyingGlass.svelte';
+	import Share from '../icons/Share.svelte';
+	import CloudArrowUp from '../icons/CloudArrowUp.svelte';
+	import { toast } from 'svelte-sonner';
 
 	const i18n = getContext('i18n');
 
@@ -264,6 +267,33 @@
 		}
 	};
 
+	const shareHandler = async () => {
+		toast.success($i18n.t('Redirecting you to OpenWebUI Community'));
+
+		// remove snapshot from feedbacks
+		const feedbacksToShare = feedbacks.map((f) => {
+			const { snapshot, user, ...rest } = f;
+			return rest;
+		});
+		console.log(feedbacksToShare);
+
+		const url = 'https://openwebui.com';
+		const tab = await window.open(`${url}/leaderboard`, '_blank');
+
+		// Define the event handler function
+		const messageHandler = (event) => {
+			if (event.origin !== url) return;
+			if (event.data === 'loaded') {
+				tab.postMessage(JSON.stringify(feedbacksToShare), '*');
+
+				// Remove the event listener after handling the message
+				window.removeEventListener('message', messageHandler);
+			}
+		};
+
+		window.addEventListener('message', messageHandler, false);
+	};
+
 	onMount(async () => {
 		feedbacks = await getAllFeedbacks(localStorage.token);
 		loaded = true;
@@ -542,9 +572,52 @@
 			</table>
 		{/if}
 	</div>
+
+	{#if feedbacks.length > 0}
+		<div class=" flex flex-col justify-end w-full text-right gap-1">
+			<div class="line-clamp-1 text-gray-500 text-xs">
+				{$i18n.t('Help us create the best community leaderboard by sharing your feedback history!')}
+			</div>
+
+			<div class="flex space-x-1 ml-auto">
+				<Tooltip
+					content={$i18n.t(
+						'To protect your privacy, only ratings, model IDs, tags, and metadata are shared from your feedback—your chat logs remain private and are not included.'
+					)}
+				>
+					<button
+						class="flex text-xs items-center 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={async () => {
+							shareHandler();
+						}}
+					>
+						<div class=" self-center mr-2 font-medium line-clamp-1">
+							{$i18n.t('Share to OpenWebUI Community')}
+						</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>
+						</div>
+					</button>
+				</Tooltip>
+			</div>
+		</div>
+	{/if}
+
 	{#if feedbacks.length > 10}
 		<Pagination bind:page count={feedbacks.length} perPage={10} />
 	{/if}
 
-	<div class="pb-8"></div>
+	<div class="pb-12"></div>
 {/if}
diff --git a/src/lib/components/icons/CloudArrowUp.svelte b/src/lib/components/icons/CloudArrowUp.svelte
new file mode 100644
index 000000000..bb54d861f
--- /dev/null
+++ b/src/lib/components/icons/CloudArrowUp.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'w-4 h-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M12 16.5V9.75m0 0 3 3m-3-3-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z"
+	/>
+</svg>