update

src/lib/components/ConfirmModal.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import Modal from "$lib/components/Modal.svelte";
+	import { createEventDispatcher } from "svelte";
+	import CarbonClose from "~icons/carbon/close";
+
+	const dispatch = createEventDispatcher<{ close: void }>();
+</script>
+
+<Modal>
+	<div class="flex w-full flex-col gap-0 p-2">
+		<div class="flex items-start text-xl font-bold text-gray-800 m-2">
+			<h1>You are about to download an AI model on your device</h1>
+			<br />
+			<button type="button" class="group" on:click={() => dispatch("close")}>
+				<CarbonClose class="text-gray-900 group-hover:text-gray-500" />
+			</button>
+		</div>
+		<div class="flex items-start text-m text-gray-800 m-2">
+			<br>To ensure your conversations with our AI remain private, our web application sends a model to your device to perform inference locally. No data leaves your device.<br />
+			<br>This might be demanding in terms of bandwidth, storage and computing power on your side.<br />
+			<br />
+		</div>
+		<div class="flex items-start text-m text-gray-800 m-2">
+			<br><b>Mobile usage is not advised.</b><br />
+		</div>
+		<br />
+	</div>
+</Modal>

src/lib/components/chat/ChatIntroduction.svelte

@@ -27,6 +27,8 @@
 
 	const dispatch = createEventDispatcher<{ message: string }>();
 
+	console.log(PUBLIC_ANNOUNCEMENT_BANNERS)
+
 	$: title = env.PUBLIC_APP_NAME
 </script>
 
@@ -48,6 +50,16 @@
 		</div>
 	</div>
 	<div class="lg:col-span-2 lg:pl-24">
+		{#each announcementBanners as banner}
+		<AnnouncementBanner classNames="mb-4" title={banner.title}>
+			<a
+				target="_blank"
+				href={banner.linkHref}
+				class="mr-2 flex items-center underline hover:no-underline"
+				><CarbonArrowUpRight class="mr-1.5 text-xs" /> {banner.linkTitle}</a
+			>
+		</AnnouncementBanner>
+		{/each}
 		{#if isModelsModalOpen}
 			<ModelsModal {settings} {models} on:close={() => (isModelsModalOpen = false)} />
 		{/if}

src/lib/components/icons/Logo.svelte

@@ -7,22 +7,15 @@
 </script>
 
 {#if PUBLIC_APP_ASSETS === "chatui"}
-	<svg
-		height="30"
-		width="30"
-		viewBox="0 0 30 30"
-		xmlns="http://www.w3.org/2000/svg"
+	<object
 		class={classNames}
-	>
-		<path
-			d="M4.06151 14.1464C4.06151 11.8818 4.9611 9.71004 6.56237 8.10877C8.16364 6.5075 10.3354 5.60791 12.6 5.60791H16.5231C18.6254 5.60791 20.6416 6.44307 22.1282 7.92965C23.6148 9.41624 24.45 11.4325 24.45 13.5348C24.45 15.6372 23.6148 17.6534 22.1282 19.14C20.6416 20.6266 18.6254 21.4618 16.5231 21.4618H7.08459L4.63844 23.8387C4.59547 23.8942 4.53557 23.9343 4.4678 23.9527C4.40004 23.9712 4.32811 23.9671 4.2629 23.941C4.1977 23.9149 4.14276 23.8683 4.10643 23.8082C4.07009 23.7481 4.05432 23.6778 4.06151 23.6079V14.1464Z"
-			class="fill-primary-500"
-		/>
-	</svg>
+		data="{PUBLIC_ORIGIN || $page.url.origin}{base}/{PUBLIC_APP_ASSETS}/chat.png"
+		title="{PUBLIC_APP_NAME} logo"
+	/>
 {:else}
 	<object
 		class={classNames}
-		data="{PUBLIC_ORIGIN || $page.url.origin}{base}/{PUBLIC_APP_ASSETS}/favicon.svg"
+		data="{PUBLIC_ORIGIN || $page.url.origin}{base}/{PUBLIC_APP_ASSETS}/favicon.png"
 		title="{PUBLIC_APP_NAME} logo"
 	/>
 {/if}

src/routes/+layout.svelte

@@ -14,6 +14,7 @@
 	import MobileNav from "$lib/components/MobileNav.svelte";
 	import NavMenu from "$lib/components/NavMenu.svelte";
 	import Toast from "$lib/components/Toast.svelte";
+	import ConfirmModal from "$lib/components/ConfirmModal.svelte";
 	import SettingsModal from "$lib/components/SettingsModal.svelte";
 	import LoadingModal from "$lib/components/LoadingModal.svelte";
 	import LoginModal from "$lib/components/LoginModal.svelte";
@@ -24,6 +25,7 @@
 
 	export let data;
 	let isloading = false;
+	let showWarning = true;
 
 	let go_to_main = false;
 
@@ -128,12 +130,7 @@
 	<meta property="og:url" content="{PUBLIC_ORIGIN || $page.url.origin}{base}" />
 	<meta
 		property="og:image"
-		content="{PUBLIC_ORIGIN || $page.url.origin}{base}/{PUBLIC_APP_ASSETS}/thumbnail.png"
-	/>
-	<link
-		rel="icon"
-		href="{PUBLIC_ORIGIN || $page.url.origin}{base}/{PUBLIC_APP_ASSETS}/favicon.svg"
-		type="image/svg+xml"
+		content="{PUBLIC_ORIGIN || $page.url.origin}{base}/{PUBLIC_APP_ASSETS}/thumbnail.jpg"
 	/>
 	<link
 		rel="icon"
@@ -196,6 +193,11 @@
 	{#if currentError}
 		<Toast message={currentError} />
 	{/if}
+	{#if showWarning}
+		<ConfirmModal
+			on:close={() => (showWarning = false)}
+		 />
+	{/if}
 	{#if isloading}
 		<LoadingModal />
 	{/if}

src/routes/conversation/[id]/+page.svelte

@@ -29,7 +29,7 @@
 
 	let id = ""
 
-	let title_ret = env.PUBLIC_APP_NAME
+	let title_ret = "BlindChat"
 
 	let messages = [];
 	let lastLoadedMessages = [];
@@ -212,7 +212,6 @@
 			}
 
 			await getTextGenerationStream(message, messageId, isRetry, searchResponseId ?? undefined);
-			title_ret = await getTitle($page.params.id)
 		} catch (err) {
 			if (err instanceof Error && err.message.includes("overloaded")) {
 				$error = "Too much traffic, please try again.";
@@ -259,7 +258,7 @@
 	params_writable.subscribe(async (value) => {
 			if (value != id) {
 				id = value
-				title_ret = await getTitle(value)
+				//title_ret = await getTitle(value)
 				let res = await getMessages(value)
 
 				if (res != undefined) {
@@ -273,7 +272,7 @@
 		const Worker = await import("./worker.js?worker");
 		pipelineWorker = new Worker.default();
 		
-		title_ret = await getTitle($page.params.id)
+		//title_ret = await getTitle($page.params.id)
 		let res = await getMessages($page.params.id)
 
 		id = $page.params.id