Cossale/kepler-chat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix share page

Browse source
This commit is contained in:
Thomas G. Lopes 2025-06-19 01:28:56 +01:00
parent 16f689a598
commit 31eb388f80
5 changed files with 96 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/routes/chat/+layout.svelte
View file

@ -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)}

25
src/routes/chat/[id]/message.svelte
View file

@ -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>
{#if message.images && message.images.length > 0}
<ImageModal
bind:open={imageModal.open}
imageUrl={imageModal.imageUrl}
fileName={imageModal.fileName}
/>
{/if}
{/if}

7
src/routes/chat/model-picker.svelte
View file

@ -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(

32
src/routes/share/[id]/+page.server.ts
View file

@ -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');
}
};

82
src/routes/share/[id]/+page.svelte
View file

@ -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">
{#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">{data.conversation.title}</h1>
<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 data.conversation.updated_at}
<span>Updated {formatDate(data.conversation.updated_at)}</span>
{#if conversationQuery.data.updated_at}
<span>Updated {formatDate(conversationQuery.data.updated_at)}</span>
{/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">
<div class="flex flex-col space-y-0">
{#if messagesQuery.data && messagesQuery.data.length > 0}
{#each messagesQuery.data as message (message._id)}
<Message {message} />
</div>
{/each}
</div>
{:else}
<div class="text-muted-foreground flex flex-col items-center justify-center py-12 text-center">
<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>
</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"