From 31eb388f80780ba7e0deb65167325b79302bff3f Mon Sep 17 00:00:00 2001
From: "Thomas G. Lopes" <26071571+TGlide@users.noreply.github.com>
Date: Thu, 19 Jun 2025 01:28:56 +0100
Subject: [PATCH] fix share page

---
 src/routes/chat/+layout.svelte        |   5 +-
 src/routes/chat/[id]/message.svelte   |  35 ++++++--
 src/routes/chat/model-picker.svelte   |   7 +-
 src/routes/share/[id]/+page.server.ts |  32 --------
 src/routes/share/[id]/+page.svelte    | 114 +++++++++++++++-----------
 5 files changed, 96 insertions(+), 97 deletions(-)
 delete mode 100644 src/routes/share/[id]/+page.server.ts

diff --git a/src/routes/chat/+layout.svelte b/src/routes/chat/+layout.svelte
index 8552ca7..5ab3205 100644
--- a/src/routes/chat/+layout.svelte
+++ b/src/routes/chat/+layout.svelte
@@ -426,10 +426,7 @@
 			)}
 		>
 			{#if page.params.id && currentConversationQuery.data}
-				<ShareButton
-					conversationId={page.params.id as Id<'conversations'>}
-					isPublic={currentConversationQuery.data.public}
-				/>
+				<ShareButton conversationId={page.params.id as Id<'conversations'>} />
 			{/if}
 			<Tooltip>
 				{#snippet trigger(tooltip)}
diff --git a/src/routes/chat/[id]/message.svelte b/src/routes/chat/[id]/message.svelte
index 04d555d..a863fa9 100644
--- a/src/routes/chat/[id]/message.svelte
+++ b/src/routes/chat/[id]/message.svelte
@@ -7,9 +7,11 @@
 	import MarkdownRenderer from './markdown-renderer.svelte';
 	import { ImageModal } from '$lib/components/ui/image-modal';
 	import { sanitizeHtml } from '$lib/utils/markdown-it';
+	import { on } from 'svelte/events';
+	import { isHtmlElement } from '$lib/utils/is';
 
 	const style = tv({
-		base: 'prose rounded-xl p-2',
+		base: 'prose rounded-xl p-2 max-w-full',
 		variants: {
 			role: {
 				user: 'bg-secondary/50 border border-secondary/70 px-3 py-2 !text-black/80 dark:!text-primary-foreground self-end',
@@ -40,7 +42,23 @@
 </script>
 
 {#if message.role !== 'system' && !(message.role === 'assistant' && message.content.length === 0 && !message.error)}
-	<div class={cn('group flex max-w-[80%] flex-col gap-1', { 'self-end': message.role === 'user' })}>
+	<div
+		class={cn('group flex flex-col gap-1', { 'max-w-[80%] self-end ': message.role === 'user' })}
+		{@attach (node) => {
+			return on(node, 'click', (e) => {
+				const el = e.target as HTMLElement;
+				const closestCopyButton = el.closest('.copy[data-code]');
+				if (!isHtmlElement(closestCopyButton)) return;
+
+				const code = closestCopyButton.dataset.code;
+				if (!code) return;
+
+				navigator.clipboard.writeText(code);
+				closestCopyButton.classList.add('copied');
+				setTimeout(() => closestCopyButton.classList.remove('copied'), 3000);
+			});
+		}}
+	>
 		{#if message.images && message.images.length > 0}
 			<div class="mb-2 flex flex-wrap gap-2">
 				{#each message.images as image (image.storage_id)}
@@ -64,6 +82,7 @@
 					<pre class="!bg-sidebar"><code>{message.error}</code></pre>
 				</div>
 			{:else if message.content_html}
+				<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 				{@html sanitizeHtml(message.content_html)}
 			{:else}
 				<svelte:boundary>
@@ -106,9 +125,11 @@
 		</div>
 	</div>
 
-	<ImageModal
-		bind:open={imageModal.open}
-		imageUrl={imageModal.imageUrl}
-		fileName={imageModal.fileName}
-	/>
+	{#if message.images && message.images.length > 0}
+		<ImageModal
+			bind:open={imageModal.open}
+			imageUrl={imageModal.imageUrl}
+			fileName={imageModal.fileName}
+		/>
+	{/if}
 {/if}
diff --git a/src/routes/chat/model-picker.svelte b/src/routes/chat/model-picker.svelte
index 58c1a5c..37702ca 100644
--- a/src/routes/chat/model-picker.svelte
+++ b/src/routes/chat/model-picker.svelte
@@ -210,12 +210,7 @@
 	const isMobile = new IsMobile();
 </script>
 
-{#if enabledArr.length === 0}
-	<!-- Fallback to original select if no models are loaded -->
-	<select bind:value={settings.modelId} class={cn('border-border border', className)}>
-		<option value="">Loading models...</option>
-	</select>
-{:else}
+{#if enabledArr.length}
 	<button
 		{...popover.trigger}
 		class={cn(
diff --git a/src/routes/share/[id]/+page.server.ts b/src/routes/share/[id]/+page.server.ts
deleted file mode 100644
index a180cb4..0000000
--- a/src/routes/share/[id]/+page.server.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { api } from '$lib/backend/convex/_generated/api.js';
-import { type Id } from '$lib/backend/convex/_generated/dataModel.js';
-import { ConvexHttpClient } from 'convex/browser';
-import { error } from '@sveltejs/kit';
-
-const client = new ConvexHttpClient(import.meta.env.VITE_CONVEX_URL);
-
-export const load = async ({ params }: { params: { id: string } }) => {
-	try {
-		// Get the conversation without requiring authentication
-		const conversation = await client.query(api.conversations.getPublicById, {
-			conversation_id: params.id as Id<'conversations'>,
-		});
-
-		if (!conversation) {
-			error(404, 'Conversation not found or not shared publicly');
-		}
-
-		// Get messages for this conversation
-		const messages = await client.query(api.messages.getByConversationPublic, {
-			conversation_id: params.id as Id<'conversations'>,
-		});
-
-		return {
-			conversation,
-			messages,
-		};
-	} catch (e) {
-		console.error('Error loading shared conversation:', e);
-		error(404, 'Conversation not found or not shared publicly');
-	}
-};
\ No newline at end of file
diff --git a/src/routes/share/[id]/+page.svelte b/src/routes/share/[id]/+page.svelte
index cd0dcfd..783c29e 100644
--- a/src/routes/share/[id]/+page.svelte
+++ b/src/routes/share/[id]/+page.svelte
@@ -1,17 +1,23 @@
 <script lang="ts">
+	import { page } from '$app/state';
+	import { api } from '$lib/backend/convex/_generated/api.js';
+	import { type Id } from '$lib/backend/convex/_generated/dataModel.js';
+	import { useCachedQuery } from '$lib/cache/cached-query.svelte.js';
 	import * as Icons from '$lib/components/icons';
 	import { Button } from '$lib/components/ui/button';
 	import { LightSwitch } from '$lib/components/ui/light-switch/index.js';
 	import Tooltip from '$lib/components/ui/tooltip.svelte';
-	import { type Doc } from '$lib/backend/convex/_generated/dataModel.js';
 	import Message from '../../chat/[id]/message.svelte';
 
-	let { data }: { 
-		data: {
-			conversation: Doc<'conversations'>;
-			messages: Doc<'messages'>[];
-		}
-	} = $props();
+	const conversationId = page.params.id as Id<'conversations'>;
+
+	const conversationQuery = useCachedQuery(api.conversations.getPublicById, {
+		conversation_id: conversationId,
+	});
+
+	const messagesQuery = useCachedQuery(api.messages.getByConversationPublic, {
+		conversation_id: conversationId,
+	});
 
 	const formatDate = (timestamp: number | undefined) => {
 		if (!timestamp) return '';
@@ -24,32 +30,29 @@
 </script>
 
 <svelte:head>
-	<title>{data.conversation.title} | Shared Chat</title>
+	<title>{conversationQuery.data?.title || 'Shared Chat'} | Shared Chat</title>
 	<meta name="description" content="A shared conversation from Thom.chat" />
 </svelte:head>
 
 <div class="min-h-screen">
 	<!-- Header -->
-	<header class="border-border bg-background/95 sticky top-0 z-50 border-b backdrop-blur supports-[backdrop-filter]:bg-background/60">
+	<header
+		class="border-border bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 border-b backdrop-blur"
+	>
 		<div class="mx-auto flex h-14 max-w-4xl items-center justify-between px-4">
 			<div class="flex items-center gap-4">
-				<a href="/" class="text-foreground hover:text-foreground/80 flex items-center gap-2 transition-colors">
-					<Icons.Svelte class="size-6" />
-					<span class="font-semibold">Thom.chat</span>
+				<a
+					href="/"
+					class="text-foreground hover:text-foreground/80 flex items-center gap-2 transition-colors"
+				>
+					<span class="font-serif font-semibold">Thom.chat</span>
 				</a>
-				<div class="text-muted-foreground text-sm">
-					Shared conversation
-				</div>
+				<div class="text-muted-foreground text-sm">Shared conversation</div>
 			</div>
 			<div class="flex items-center gap-2">
 				<Tooltip>
 					{#snippet trigger(tooltip)}
-						<Button 
-							variant="ghost" 
-							size="sm" 
-							href="/chat" 
-							{...tooltip.trigger}
-						>
+						<Button variant="ghost" size="sm" href="/chat" {...tooltip.trigger}>
 							Start your own chat
 						</Button>
 					{/snippet}
@@ -62,40 +65,55 @@
 
 	<!-- Main content -->
 	<main class="mx-auto max-w-4xl px-4 py-8">
-		<div class="space-y-6">
-			<!-- Conversation header -->
-			<div class="border-border rounded-lg border p-6">
-				<h1 class="text-foreground mb-2 text-2xl font-bold">{data.conversation.title}</h1>
-				<div class="text-muted-foreground flex items-center gap-4 text-sm">
-					{#if data.conversation.updated_at}
-						<span>Updated {formatDate(data.conversation.updated_at)}</span>
+		{#if conversationQuery.isLoading || messagesQuery.isLoading}
+			<div class="text-muted-foreground flex items-center justify-center py-12 text-center">
+				<p>Loading conversation...</p>
+			</div>
+		{:else if !conversationQuery.data}
+			<div
+				class="text-muted-foreground flex flex-col items-center justify-center py-12 text-center"
+			>
+				<p class="mb-2 text-lg">Conversation not found</p>
+				<p class="text-sm">This conversation doesn't exist or isn't shared publicly.</p>
+			</div>
+		{:else}
+			<div class="space-y-6">
+				<!-- Conversation header -->
+				<div class="border-border rounded-lg border p-6">
+					<h1 class="text-foreground mb-2 text-2xl font-bold">{conversationQuery.data.title}</h1>
+					<div class="text-muted-foreground flex items-center gap-4 text-sm">
+						{#if conversationQuery.data.updated_at}
+							<span>Updated {formatDate(conversationQuery.data.updated_at)}</span>
+						{/if}
+						<span>Public conversation</span>
+					</div>
+				</div>
+
+				<!-- Messages -->
+				<div class="flex flex-col space-y-0">
+					{#if messagesQuery.data && messagesQuery.data.length > 0}
+						{#each messagesQuery.data as message (message._id)}
+							<Message {message} />
+						{/each}
+					{:else}
+						<div
+							class="text-muted-foreground flex flex-col items-center justify-center py-12 text-center"
+						>
+							<p class="mb-2 text-lg">No messages in this conversation yet.</p>
+							<p class="text-sm">The conversation appears to be empty.</p>
+						</div>
 					{/if}
-					<span>Public conversation</span>
 				</div>
 			</div>
-
-			<!-- Messages -->
-			{#if data.messages && data.messages.length > 0}
-				<div class="space-y-4">
-					{#each data.messages as message (message._id)}
-						<div class="border-border rounded-lg border p-4">
-							<Message {message} />
-						</div>
-					{/each}
-				</div>
-			{:else}
-				<div class="text-muted-foreground flex flex-col items-center justify-center py-12 text-center">
-					<p class="mb-2 text-lg">No messages in this conversation yet.</p>
-					<p class="text-sm">The conversation appears to be empty.</p>
-				</div>
-			{/if}
-		</div>
+		{/if}
 	</main>
 
 	<!-- Footer -->
 	<footer class="border-border mt-16 border-t py-8">
 		<div class="mx-auto max-w-4xl px-4">
-			<div class="text-muted-foreground flex flex-col items-center gap-4 text-center text-sm sm:flex-row sm:justify-between">
+			<div
+				class="text-muted-foreground flex flex-col items-center gap-4 text-center text-sm sm:flex-row sm:justify-between"
+			>
 				<div class="flex items-center gap-4">
 					<a
 						href="https://github.com/TGlide/thom-chat"
@@ -115,4 +133,4 @@
 			</div>
 		</div>
 	</footer>
-</div>
\ No newline at end of file
+</div>