Share convos (#1942)

* don't share why generating

* login on input

* cleanup

* Revert "cleanup"

This reverts commit d0c52e5d0c9d7efddf23167c407498449412530f.

* use a store instead (for mobile)

* remove tester

* cleanup require login

---------

Co-authored-by: Victor Muštar <victor.mustar@gmail.com>

.env

@@ -36,7 +36,7 @@ OPENID_CLIENT_ID=
 OPENID_CLIENT_SECRET=
 OPENID_SCOPES="openid profile inference-api"
 USE_USER_TOKEN=
-AUTOMATIC_LOGIN=
+AUTOMATIC_LOGIN="false"
 
 ### Local Storage ###
 MONGO_STORAGE_PATH= # where is the db folder stored

chart/env/prod.yaml

@@ -50,7 +50,7 @@ envVars:
   COUPLE_SESSION_WITH_COOKIE_NAME: "token"
   OPENID_SCOPES: "openid profile inference-api"
   USE_USER_TOKEN: "true"
-  AUTOMATIC_LOGIN: "true"
+  AUTOMATIC_LOGIN: "false"
 
   ADDRESS_HEADER: "X-Forwarded-For"
   APP_BASE: "/chat"

src/hooks.server.ts

@@ -136,7 +136,6 @@ export const handle: Handle = async ({ event, resolve }) => {
 	if (
 		!auth.user &&
 		config.AUTOMATIC_LOGIN === "true" &&
-		!event.url.pathname.startsWith(`${base}/`) &&
 		!event.url.pathname.startsWith(`${base}/login`) &&
 		!event.url.pathname.startsWith(`${base}/healthcheck`)
 	) {

src/lib/components/MobileNav.svelte

@@ -16,6 +16,7 @@
 	import IconBurger from "$lib/components/icons/IconBurger.svelte";
 	import { Spring } from "svelte/motion";
 	import { shareModal } from "$lib/stores/shareModal";
+	import { loading } from "$lib/stores/loading";
 	interface Props {
 		title: string | undefined;
 		children?: import("svelte").Snippet;
@@ -28,7 +29,10 @@
 
 	const isHuggingChat = $derived(Boolean(page.data?.publicConfig?.isHuggingChat));
 	const canShare = $derived(
-		isHuggingChat && Boolean(page.params?.id) && page.route.id?.startsWith("/conversation/")
+		!$loading &&
+			isHuggingChat &&
+			Boolean(page.params?.id) &&
+			page.route.id?.startsWith("/conversation/")
 	);
 
 	// Define the width for the drawer (less than 100% to create the gap)

src/lib/components/NavMenu.svelte

@@ -125,7 +125,7 @@
 		{publicConfig.PUBLIC_APP_NAME}
 	</a>
 	<a
-		href={`${base}/`}
+		href={page.data.loginRequired && !page.data.user ? `${base}/login` : `${base}/`}
 		onclick={handleNewChatClick}
 		class="flex rounded-lg border bg-white px-2 py-0.5 text-center shadow-sm hover:shadow-none dark:border-gray-600 dark:bg-gray-700 sm:text-smd"
 		title="Ctrl/Cmd + Shift + O"

src/lib/components/chat/ChatInput.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount, tick } from "svelte";
 
-	import { afterNavigate } from "$app/navigation";
+	import { afterNavigate, goto } from "$app/navigation";
 
 	import HoverTooltip from "$lib/components/HoverTooltip.svelte";
 	import IconPaperclip from "$lib/components/icons/IconPaperclip.svelte";
@@ -9,6 +9,7 @@
 	import { loginModalOpen } from "$lib/stores/loginModal";
 
 	import { isVirtualKeyboard } from "$lib/utils/isVirtualKeyboard";
+	import { base } from "$app/paths";
 	interface Props {
 		files?: File[];
 		mimeTypes?: string[];
@@ -45,6 +46,8 @@
 		files = [...files, ...(target.files ?? [])];
 	};
 
+	const requireLogin = $derived(page.data.loginRequired && !page.data.user);
+
 	let textareaElement: HTMLTextAreaElement | undefined = $state();
 	let isCompositionOn = $state(false);
 	let blurTimeout: ReturnType<typeof setTimeout> | null = $state(null);
@@ -57,6 +60,7 @@
 			: Promise.resolve();
 
 	async function focusTextarea() {
+		if (requireLogin) return;
 		if (!textareaElement || textareaElement.disabled || isVirtualKeyboard()) return;
 		if (typeof document !== "undefined" && document.activeElement === textareaElement) return;
 
@@ -118,6 +122,10 @@
 	}
 
 	function handleFocus() {
+		if (requireLogin) {
+			goto(`${base}/login`, { invalidateAll: true });
+			return;
+		}
 		if (blurTimeout) {
 			clearTimeout(blurTimeout);
 			blurTimeout = null;

src/lib/components/chat/ChatMessage.svelte

@@ -17,6 +17,8 @@
 	import OpenReasoningResults from "./OpenReasoningResults.svelte";
 	import Alternatives from "./Alternatives.svelte";
 	import MessageAvatar from "./MessageAvatar.svelte";
+	import { goto } from "$app/navigation";
+	import { page } from "$app/state";
 
 	interface Props {
 		message: Message;
@@ -64,6 +66,14 @@
 		}
 	}
 
+	function handleRetry() {
+		if (page.data.loginRequired && !page.data.user) {
+			goto(`${base}/login`, { invalidateAll: true });
+			return;
+		}
+		onretry?.({ id: message.id });
+	}
+
 	let editContentEl: HTMLTextAreaElement | undefined = $state();
 	let editFormEl: HTMLFormElement | undefined = $state();
 
@@ -218,9 +228,7 @@
 						class="btn rounded-sm p-1 text-xs text-gray-400 hover:text-gray-500 focus:ring-0 dark:text-gray-400 dark:hover:text-gray-300"
 						title="Retry"
 						type="button"
-						onclick={() => {
-							onretry?.({ id: message.id });
-						}}
+						onclick={handleRetry}
 					>
 						<CarbonRotate360 />
 					</button>

src/lib/stores/loading.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const loading = writable(false);

src/routes/+layout.svelte

@@ -20,9 +20,10 @@
 	import { setContext } from "svelte";
 	import { handleResponse, useAPIClient } from "$lib/APIClient";
 	import { isAborted } from "$lib/stores/isAborted";
+	import BackgroundGenerationPoller from "$lib/components/BackgroundGenerationPoller.svelte";
 	import IconShare from "$lib/components/icons/IconShare.svelte";
 	import { shareModal } from "$lib/stores/shareModal";
-	import BackgroundGenerationPoller from "$lib/components/BackgroundGenerationPoller.svelte";
+	import { loading } from "$lib/stores/loading";
 
 	let { data = $bindable(), children } = $props();
 
@@ -98,7 +99,7 @@
 	function closeWelcomeModal() {
 		settings.set({ welcomeModalSeen: true });
 
-		if (!data.user && data.loginEnabled) {
+		if (page.data.loginRequired && !data.user) {
 			goto(`${base}/login`, { invalidateAll: true });
 		}
 	}
@@ -177,7 +178,7 @@
 	);
 
 	// Show the welcome modal once on first app load
-	let showWelcome = $derived(!$settings.welcomeModalSeen && !(page.data.shared === true));
+	let showWelcome = $derived(!page.data.shared && !$settings.welcomeModalSeen);
 </script>
 
 <svelte:head>
@@ -220,7 +221,7 @@
 	{/if}
 </svelte:head>
 
-{#if showWelcome || (!data.user && data.loginEnabled)}
+{#if showWelcome}
 	<WelcomeModal close={closeWelcomeModal} />
 {/if}
 
@@ -250,9 +251,11 @@
 	{#if canShare}
 		<button
 			type="button"
-			class="hidden size-8 items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white/90 text-sm font-medium text-gray-700 shadow-sm hover:bg-white/60 hover:text-gray-500 dark:border-gray-700 dark:bg-gray-800/80 dark:text-gray-200 dark:hover:bg-gray-700 md:absolute md:right-6 md:top-5 md:flex"
+			class="hidden size-8 items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white/90 text-sm font-medium text-gray-700 shadow-sm hover:bg-white/60 hover:text-gray-500 dark:border-gray-700 dark:bg-gray-800/80 dark:text-gray-200 dark:hover:bg-gray-700 md:absolute md:right-6 md:top-5 md:flex
+				{$loading ? 'cursor-not-allowed opacity-50' : ''}"
 			onclick={() => shareModal.open()}
 			aria-label="Share conversation"
+			disabled={$loading}
 		>
 			<IconShare />
 		</button>
@@ -285,7 +288,16 @@
 
 	{#if publicConfig.PUBLIC_PLAUSIBLE_SCRIPT_URL}
 		<script>
-			window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
+			(window.plausible =
+				window.plausible ||
+				function () {
+					(plausible.q = plausible.q || []).push(arguments);
+				}),
+				(plausible.init =
+					plausible.init ||
+					function (i) {
+						plausible.o = i || {};
+					});
 			plausible.init();
 		</script>
 	{/if}

src/routes/+page.svelte

@@ -7,17 +7,18 @@
 	const publicConfig = usePublicConfig();
 
 	import ChatWindow from "$lib/components/chat/ChatWindow.svelte";
-import { ERROR_MESSAGES, error } from "$lib/stores/errors";
-import { pendingMessage } from "$lib/stores/pendingMessage";
-import { useSettingsStore } from "$lib/stores/settings.js";
-import { findCurrentModel } from "$lib/utils/models";
-import { sanitizeUrlParam } from "$lib/utils/urlParams";
-import { onMount } from "svelte";
+
+	import { ERROR_MESSAGES, error } from "$lib/stores/errors";
+	import { pendingMessage } from "$lib/stores/pendingMessage";
+	import { useSettingsStore } from "$lib/stores/settings.js";
+	import { findCurrentModel } from "$lib/utils/models";
+	import { sanitizeUrlParam } from "$lib/utils/urlParams";
+	import { onMount } from "svelte";
+	import { loading } from "$lib/stores/loading.js";
 
 	let { data } = $props();
 
 	let hasModels = $derived(Boolean(data.models?.length));
-	let loading = $state(false);
 	let files: File[] = $state([]);
 	let draft = $state("");
 
@@ -25,7 +26,7 @@ import { onMount } from "svelte";
 
 	async function createConversation(message: string) {
 		try {
-			loading = true;
+			$loading = true;
 
 			// check if $settings.activeModel is a valid model
 			// else check if it's an assistant, and use that model
@@ -71,7 +72,7 @@ import { onMount } from "svelte";
 			error.set((err as Error).message || ERROR_MESSAGES.default);
 			console.error(err);
 		} finally {
-			loading = false;
+			$loading = false;
 		}
 	}
 
@@ -108,7 +109,7 @@ import { onMount } from "svelte";
 {#if hasModels}
 	<ChatWindow
 		onmessage={(message) => createConversation(message)}
-		{loading}
+		loading={$loading}
 		{currentModel}
 		models={data.models}
 		bind:files

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

@@ -26,10 +26,10 @@
 	import "katex/dist/katex.min.css";
 	import { updateDebouncer } from "$lib/utils/updates.js";
 	import SubscribeModal from "$lib/components/SubscribeModal.svelte";
+	import { loading } from "$lib/stores/loading.js";
 
 	let { data = $bindable() } = $props();
 
-	let loading = $state(false);
 	let pending = $state(false);
 	let initialRun = true;
 	let showSubscribeModal = $state(false);
@@ -96,7 +96,7 @@
 
 	async function convFromShared() {
 		try {
-			loading = true;
+			$loading = true;
 			const res = await fetch(`${base}/conversation`, {
 				method: "POST",
 				headers: {
@@ -135,7 +135,7 @@
 	}): Promise<void> {
 		try {
 			$isAborted = false;
-			loading = true;
+			$loading = true;
 			pending = true;
 			const base64Files = await Promise.all(
 				(files ?? []).map((file) =>
@@ -335,7 +335,7 @@
 			}
 			console.error(err);
 		} finally {
-			loading = false;
+			$loading = false;
 			pending = false;
 			await invalidateAll();
 		}
@@ -348,11 +348,11 @@
 			if (r.ok) {
 				setTimeout(() => {
 					$isAborted = true;
-					loading = false;
+					$loading = false;
 				}, 500);
 			} else {
 				$isAborted = true;
-				loading = false;
+				$loading = false;
 			}
 		});
 	}
@@ -375,7 +375,7 @@
 		const streaming = isConversationStreaming(messages);
 		if (streaming) {
 			addBackgroundGeneration({ id: page.params.id, startedAt: Date.now() });
-			loading = true;
+			$loading = true;
 		}
 	});
 
@@ -388,7 +388,7 @@
 					await goto(`${base}/conversation/${convId}`, { invalidateAll: true });
 				})
 				.then(async () => await writeMessage({ prompt: content }))
-				.finally(() => (loading = false));
+				.finally(() => ($loading = false));
 		}
 	}
 
@@ -415,7 +415,7 @@
 							isRetry: true,
 						})
 				)
-				.finally(() => (loading = false));
+				.finally(() => ($loading = false));
 		}
 	}
 
@@ -447,9 +447,9 @@
 	$effect(() => {
 		const streaming = isConversationStreaming(messages);
 		if (streaming) {
-			loading = true;
+			$loading = true;
 		} else if (!pending) {
-			loading = false;
+			$loading = false;
 		}
 
 		if (!streaming && browser) {
@@ -478,7 +478,7 @@
 		}
 
 		$isAborted = true;
-		loading = false;
+		$loading = false;
 	});
 
 	let title = $derived.by(() => {
@@ -494,7 +494,7 @@
 </svelte:head>
 
 <ChatWindow
-	{loading}
+	loading={$loading}
 	{pending}
 	messages={messagesPath as Message[]}
 	{messagesAlternatives}