add android id in the hf manifest (#1328)

* add android id in the hf manifest

* Add simple button

* Add extra icon sizes

* fix typo

* updated android modal

* revert unneeded changes to declarations

* debug timer

* show modal everytime

---------

Co-authored-by: Kevin CATHALY <[email protected]>
Co-authored-by: Nathan Sarrazin <[email protected]>

src/routes/+layout.svelte

@@ -21,6 +21,9 @@
 	import titleUpdate from "$lib/stores/titleUpdate";
 	import DisclaimerModal from "$lib/components/DisclaimerModal.svelte";
 	import ExpandNavigation from "$lib/components/ExpandNavigation.svelte";
+	import Logo from "$lib/components/icons/Logo.svelte";
+	import { isHuggingChat } from "$lib/utils/isHuggingChat";
+	import CarbonClose from "~icons/carbon/close";
 	import { PUBLIC_APP_DISCLAIMER } from "$env/static/public";
 
 	export let data;
@@ -126,6 +129,12 @@
 	$: mobileNavTitle = ["/models", "/assistants", "/privacy"].includes($page.route.id ?? "")
 		? ""
 		: data.conversations.find((conv) => conv.id === $page.params.id)?.title;
+
+	let showAndroidModal =
+		browser && // only show on browser
+		isHuggingChat && // only show on huggingchat
+		navigator.userAgent.toLowerCase().includes("android") && // if it's android
+		!navigator.userAgent.includes("co.huggingface.chat_ui_android"); // but not the android app
 </script>
 
 <svelte:head>
@@ -227,3 +236,35 @@
 	{/if}
 	<slot />
 </div>
+
+{#if showAndroidModal}
+	<a
+		href="https://play.google.com/store/apps/details?id=co.huggingface.chat_ui_android"
+		class="fixed left-0 right-0 top-0 mx-auto flex h-fit min-h-12 w-screen flex-nowrap items-center justify-evenly gap-4 bg-gray-200 px-4 py-4 text-gray-900 shadow-lg backdrop-blur-md
+		hover:bg-gray-100
+		sm:top-5 sm:max-w-fit sm:gap-4 sm:rounded-lg
+		dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
+	>
+		<button
+			class="border-r-2 border-black/20 pr-4 text-2xl"
+			on:click|stopPropagation|preventDefault={() => {
+				showAndroidModal = false;
+			}}
+		>
+			<CarbonClose />
+		</button>
+
+		<Logo classNames="mx-2.5 scale-150" />
+
+		<div class="flex flex-col sm:mr-4">
+			<span class="text-lg font-semibold">HuggingChat</span>
+			<span class="text-sm">View on Google Play</span>
+		</div>
+
+		<span
+			class="ml-auto mr-2 text-center text-lg font-medium text-gray-700 underline underline-offset-4 dark:text-gray-300"
+		>
+			Open
+		</span>
+	</a>
+{/if}

static/huggingchat/manifest.json

@@ -5,11 +5,41 @@
 	"display": "standalone",
 	"start_url": "/chat",
 	"icons": [
+		{
+			"src": "/chat/huggingchat/icon-36x36.png",
+			"sizes": "36x36",
+			"type": "image/png"
+		},
+		{
+			"src": "/chat/huggingchat/icon-48x48.png",
+			"sizes": "48x48",
+			"type": "image/png"
+		},
+		{
+			"src": "/chat/huggingchat/icon-72x72.png",
+			"sizes": "72x72",
+			"type": "image/png"
+		},
+		{
+			"src": "/chat/huggingchat/icon-96x96.png",
+			"sizes": "96x96",
+			"type": "image/png"
+		},
 		{
 			"src": "/chat/huggingchat/icon-128x128.png",
 			"sizes": "128x128",
 			"type": "image/png"
 		},
+		{
+			"src": "/chat/huggingchat/icon-144x144.png",
+			"sizes": "144x144",
+			"type": "image/png"
+		},
+		{
+			"src": "/chat/huggingchat/icon-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
 		{
 			"src": "/chat/huggingchat/icon-256x256.png",
 			"sizes": "256x256",
@@ -20,5 +50,12 @@
 			"sizes": "512x512",
 			"type": "image/png"
 		}
+	],
+	"prefer_related_applications": true,
+	"related_applications": [
+		{
+			"platform": "play",
+			"id": "co.huggingface.chat_ui_android"
+		}
 	]
 }