Add disclaimer and share (#76)

* disclaimer and share

* ✨ Share from multiple routes

* Update src/lib/components/chat/ChatWindow.svelte

---------

Co-authored-by: coyotte508 <[email protected]>

src/lib/components/chat/ChatWindow.svelte

@@ -8,6 +8,7 @@
 
 	import ChatMessages from "./ChatMessages.svelte";
 	import ChatInput from "./ChatInput.svelte";
+	import CarbonExport from "~icons/carbon/export";
 
 	export let messages: Message[] = [];
 	export let disabled: boolean = false;
@@ -16,7 +17,7 @@
 
 	let message: string;
 
-	const dispatch = createEventDispatcher<{ message: string }>();
+	const dispatch = createEventDispatcher<{ message: string; share: void }>();
 </script>
 
 <div class="relative h-screen">
@@ -27,7 +28,7 @@
 	</nav>
 	<ChatMessages {loading} {pending} {messages} on:message />
 	<div
-		class="flex max-md:border-t dark:border-gray-800 items-center max-md:dark:bg-gray-900 max-md:bg-white bg-gradient-to-t from-white dark:from-gray-900 to-transparent justify-center absolute inset-x-0 max-w-3xl xl:max-w-4xl mx-auto px-5 bottom-0 py-4 md:py-8 w-full"
+		class="flex flex-col max-md:border-t dark:border-gray-800 items-center max-md:dark:bg-gray-900 max-md:bg-white bg-gradient-to-t from-white to-white/0 dark:from-gray-900 dark:to-gray-900/0 justify-center absolute inset-x-0 max-w-3xl xl:max-w-4xl mx-auto px-5 bottom-0 py-4 md:py-8 w-full"
 	>
 		<form
 			on:submit|preventDefault={() => {
@@ -50,5 +51,19 @@
 				</button>
 			</div>
 		</form>
+		<div class="flex text-xs text-gray-400/80 mt-2 justify-between self-stretch px-1">
+			<p>
+				Model: OpenAssistant/oasst-sft-1-pythia-12b · Generated content may be inaccurate or false.
+			</p>
+			{#if messages.length}
+				<button
+					class="flex items-center hover:underline hover:text-gray-400"
+					type="button"
+					on:click={() => dispatch("share")}
+				>
+					<CarbonExport class="text-[.6rem] mr-1.5 text-yellow-500" />Share this conversation
+				</button>
+			{/if}
+		</div>
 	</div>
 </div>

src/lib/shareConversation.ts

@@ -0,0 +1,32 @@
+import { base } from "$app/paths";
+
+export async function shareConversation(id: string, title: string) {
+	try {
+		const res = await fetch(`${base}/conversation/${id}/share`, {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			},
+		});
+
+		if (!res.ok) {
+			alert("Error while sharing conversation: " + (await res.text()));
+			return;
+		}
+
+		const { url } = await res.json();
+
+		if (navigator.share) {
+			navigator.share({
+				title,
+				text: "Share this chat with others",
+				url,
+			});
+		} else {
+			prompt("Share this link with your friends:", url);
+		}
+	} catch (err) {
+		console.error(err);
+		alert("Error while sharing conversation: " + err);
+	}
+}

src/routes/+layout.svelte

@@ -7,6 +7,7 @@
 	import CarbonTrashCan from "~icons/carbon/trash-can";
 	import CarbonExport from "~icons/carbon/export";
 	import { base } from "$app/paths";
+	import { shareConversation } from "$lib/shareConversation";
 	import { UrlDependency } from "$lib/types/UrlDependency";
 
 	export let data: LayoutData;
@@ -22,37 +23,6 @@
 		}
 	}
 
-	async function shareConversation(id: string, title: string) {
-		try {
-			const res = await fetch(`${base}/conversation/${id}/share`, {
-				method: "POST",
-				headers: {
-					"Content-Type": "application/json",
-				},
-			});
-
-			if (!res.ok) {
-				alert("Error while sharing conversation: " + (await res.text()));
-				return;
-			}
-
-			const { url } = await res.json();
-
-			if (navigator.share) {
-				navigator.share({
-					title,
-					text: "Share this chat with others",
-					url,
-				});
-			} else {
-				prompt("Share this link with your friends:", url);
-			}
-		} catch (err) {
-			console.error(err);
-			alert("Error while sharing conversation: " + err);
-		}
-	}
-
 	async function deleteConversation(id: string) {
 		try {
 			const res = await fetch(`${base}/conversation/${id}`, {

src/routes/conversation/[id]/+page.server.ts

@@ -16,5 +16,6 @@ export const load: PageServerLoad = async (event) => {
 
 	return {
 		messages: conversation.messages,
+		title: conversation.title,
 	};
 };

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

@@ -10,6 +10,7 @@
 	import { trimSuffix } from "$lib/utils/trimSuffix";
 	import { PUBLIC_SEP_TOKEN } from "$env/static/public";
 	import { trimPrefix } from "$lib/utils/trimPrefix";
+	import { shareConversation } from "$lib/shareConversation";
 	import { UrlDependency } from "$lib/types/UrlDependency";
 
 	export let data: PageData;
@@ -124,4 +125,10 @@
 	});
 </script>
 
-<ChatWindow {loading} {pending} {messages} on:message={(message) => writeMessage(message.detail)} />
+<ChatWindow
+	{loading}
+	{pending}
+	{messages}
+	on:message={(message) => writeMessage(message.detail)}
+	on:share={() => shareConversation($page.params.id, data.title)}
+/>

src/routes/r/[id]/+page.server.ts

@@ -13,5 +13,6 @@ export const load: PageServerLoad = async ({ params }) => {
 
 	return {
 		messages: conversation.messages,
+		title: conversation.title,
 	};
 };

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

@@ -39,6 +39,25 @@
 			loading = false;
 		}
 	}
+
+	async function shareConversation() {
+		const url = `${window.location.origin}${window.location.pathname}`;
+
+		if (navigator.share) {
+			navigator.share({
+				title: data.title,
+				text: "Share this chat with others",
+				url,
+			});
+		} else {
+			prompt("Share this link with your friends:", url);
+		}
+	}
 </script>
 
-<ChatWindow on:message={(ev) => createConversation(ev.detail)} messages={data.messages} {loading} />
+<ChatWindow
+	on:message={(ev) => createConversation(ev.detail)}
+	on:share={shareConversation}
+	messages={data.messages}
+	{loading}
+/>