Share convos (#35)

package-lock.json

@@ -14,6 +14,7 @@
 				"highlight.js": "^11.7.0",
 				"marked": "^4.3.0",
 				"mongodb": "^5.3.0",
+				"nanoid": "^4.0.2",
 				"postcss": "^8.4.21",
 				"tailwind-scrollbar": "^3.0.0",
 				"tailwindcss": "^3.3.1"
@@ -2580,14 +2581,20 @@
 			}
 		},
 		"node_modules/nanoid": {
-			"version": "3.3.4",
-			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-			"integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.2.tgz",
+			"integrity": "sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
 			"bin": {
-				"nanoid": "bin/nanoid.cjs"
+				"nanoid": "bin/nanoid.js"
 			},
 			"engines": {
-				"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+				"node": "^14 || ^16 || >=18"
 			}
 		},
 		"node_modules/natural-compare": {
@@ -2898,6 +2905,23 @@
 			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
 			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
 		},
+		"node_modules/postcss/node_modules/nanoid": {
+			"version": "3.3.6",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+			"integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"bin": {
+				"nanoid": "bin/nanoid.cjs"
+			},
+			"engines": {
+				"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+			}
+		},
 		"node_modules/prelude-ls": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",

package.json

@@ -37,6 +37,7 @@
 		"highlight.js": "^11.7.0",
 		"marked": "^4.3.0",
 		"mongodb": "^5.3.0",
+		"nanoid": "^4.0.2",
 		"postcss": "^8.4.21",
 		"tailwind-scrollbar": "^3.0.0",
 		"tailwindcss": "^3.3.1"

src/lib/components/chat/ChatMessage.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { marked } from 'marked';
-	import type { Message } from '$lib/Types';
+	import type { Message } from '$lib/types/Message';
 	import { afterUpdate } from 'svelte';
 
 	import CopyToClipBoardBtn from '../CopyToClipBoardBtn.svelte';
@@ -80,7 +80,7 @@
 		/>
 		<div
 			class="group relative rounded-2xl px-5 py-3.5 border border-gray-100 bg-gradient-to-br from-gray-50 dark:from-gray-800/40 dark:border-gray-800 prose text-gray-600 dark:text-gray-300"
-      bind:this={el}
+			bind:this={el}
 		>
 			{@html html}
 		</div>

src/lib/server/database.ts

@@ -17,4 +17,5 @@ export const collections = { conversations };
 
 client.on('open', () => {
 	conversations.createIndex({ sessionId: 1, updatedAt: -1 });
+	conversations.createIndex({ 'shares.id': 1 }, { unique: true, sparse: true });
 });

src/lib/types/Conversation.ts

@@ -8,6 +8,8 @@ export interface Conversation {
 	title: string;
 	messages: Message[];
 
+	shares?: Array<{ id: string; msgCount: number }>;
+
 	createdAt: Date;
 	updatedAt: Date;
 }

src/routes/+layout.svelte

@@ -14,6 +14,37 @@
 			localStorage.theme = 'dark';
 		}
 	}
+
+	async function shareConversation(id: string, title: string) {
+		try {
+			const res = await fetch(`/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);
+		}
+	}
 </script>
 
 <div
@@ -34,9 +65,16 @@
 			{#each data.conversations as conv}
 				<a
 					href="/conversation/{conv.id}"
-					class="truncate py-3 px-3 rounded-lg flex-none text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
+					class="truncate py-3 px-3 rounded-lg flex-none text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 flex justify-between items-center"
 				>
 					{conv.title}
+
+					<button
+						class="bg-white rounded border-black px-2 py-1 border-[1px] border-solid"
+						on:click|preventDefault={() => shareConversation(conv.id, conv.title)}
+					>
+						Share
+					</button>
 				</a>
 			{/each}
 		</div>

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

@@ -44,8 +44,6 @@ export async function POST({ request, fetch, locals, params }) {
 
 		messages.push({ from: 'assistant', content: generated_text });
 
-		console.log('updating conversation', convId, messages);
-
 		await collections.conversations.updateOne(
 			{
 				_id: convId

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

@@ -0,0 +1,52 @@
+import { collections } from '$lib/server/database.js';
+import { error } from '@sveltejs/kit';
+import { ObjectId } from 'mongodb';
+import { nanoid } from 'nanoid';
+
+export async function POST({ params, url, locals }) {
+	const conversation = await collections.conversations.findOne({
+		_id: new ObjectId(params.id),
+		sessionId: locals.sessionId
+	});
+
+	if (!conversation) {
+		throw error(404, 'Conversation not found');
+	}
+
+	const shares = conversation.shares || [];
+
+	const existingShare = shares.find((share) => share.msgCount === conversation.messages.length);
+
+	if (existingShare) {
+		return new Response(
+			JSON.stringify({
+				url: url.origin + `/r/${existingShare.id}`
+			}),
+			{ headers: { 'Content-Type': 'application/json' } }
+		);
+	}
+
+	const share = {
+		id: nanoid(7),
+		msgCount: conversation.messages.length
+	};
+
+	await collections.conversations.updateOne(
+		{
+			_id: conversation._id
+		},
+		{
+			$set: {
+				shares: [...shares, share],
+				updatedAt: new Date()
+			}
+		}
+	);
+
+	return new Response(
+		JSON.stringify({
+			url: url.origin.replace('huggingface.co', 'hf.co') + `/r/${share.id}`
+		}),
+		{ headers: { 'Content-Type': 'application/json' } }
+	);
+}

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

@@ -0,0 +1,16 @@
+import { collections } from '$lib/server/database.js';
+import { error } from '@sveltejs/kit';
+
+export async function load({ params }) {
+	const conversation = await collections.conversations.findOne({
+		'shares.id': params.id
+	});
+
+	if (!conversation) {
+		throw error(404, 'Conversation not found');
+	}
+
+	return {
+		messages: conversation.messages
+	};
+}

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

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import ChatWindow from '$lib/components/chat/ChatWindow.svelte';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+</script>
+
+<ChatWindow disabled={true} messages={data.messages} />