🔧 Configure a base path (#47)

.env

@@ -4,6 +4,7 @@
 MONGODB_URL=#your mongodb URL here
 MONGODB_DB_NAME=chat-ui
 HF_TOKEN=#your huggingface token here
+SHARE_BASE_URL=#https://hf.co/chat
 
 PUBLIC_MODEL_ENDPOINT=https://api-inference.huggingface.co/models/OpenAssistant/oasst-sft-1-pythia-12b
 PUBLIC_MODEL_NAME=OpenAssistant/oasst-sft-1-pythia-12b

package-lock.json

@@ -11,6 +11,7 @@
 				"@huggingface/inference": "^2.0.0-rc2",
 				"autoprefixer": "^10.4.14",
 				"date-fns": "^2.29.3",
+				"dotenv": "^16.0.3",
 				"highlight.js": "^11.7.0",
 				"marked": "^4.3.0",
 				"mongodb": "^5.3.0",
@@ -1614,6 +1615,14 @@
 				"node": ">=6.0.0"
 			}
 		},
+		"node_modules/dotenv": {
+			"version": "16.0.3",
+			"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
+			"integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/electron-to-chromium": {
 			"version": "1.4.359",
 			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.359.tgz",

package.json

@@ -36,6 +36,7 @@
 		"@huggingface/inference": "^2.0.0-rc2",
 		"autoprefixer": "^10.4.14",
 		"date-fns": "^2.29.3",
+		"dotenv": "^16.0.3",
 		"highlight.js": "^11.7.0",
 		"marked": "^4.3.0",
 		"mongodb": "^5.3.0",

src/routes/+layout.svelte

@@ -6,6 +6,7 @@
 
 	import CarbonTrashCan from '~icons/carbon/trash-can';
 	import CarbonExport from '~icons/carbon/export';
+	import { base } from '$app/paths';
 
 	export let data: LayoutData;
 
@@ -22,7 +23,7 @@
 
 	async function shareConversation(id: string, title: string) {
 		try {
-			const res = await fetch(`/conversation/${id}/share`, {
+			const res = await fetch(`${base}/conversation/${id}/share`, {
 				method: 'POST',
 				headers: {
 					'Content-Type': 'application/json'
@@ -53,7 +54,7 @@
 
 	async function deleteConversation(id: string) {
 		try {
-			const res = await fetch(`/conversation/${id}`, {
+			const res = await fetch(`${base}/conversation/${id}`, {
 				method: 'DELETE',
 				headers: {
 					'Content-Type': 'application/json'
@@ -85,7 +86,7 @@
 	>
 		<div class="flex-none sticky top-0 p-3 flex flex-col">
 			<a
-				href="/"
+				href={base}
 				class="border px-12 py-2.5 rounded-lg shadow bg-white dark:bg-gray-700 dark:border-gray-600 text-center"
 			>
 				New Chat
@@ -94,7 +95,7 @@
 		<div class="flex flex-col overflow-y-auto p-3 -mt-3 gap-2">
 			{#each data.conversations as conv}
 				<a
-					href="/conversation/{conv.id}"
+					href="{base}/conversation/{conv.id}"
 					class="pl-3 pr-2 h-12 group rounded-lg flex-none text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-1 {conv.id ===
 					$page.params.id
 						? 'bg-gray-100 dark:bg-gray-700'
@@ -125,12 +126,13 @@
 		<div class="flex flex-col p-3 gap-2">
 			<button
 				on:click={switchTheme}
+				type="button"
 				class="text-left flex items-center first-letter:capitalize 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"
 			>
 				Theme
 			</button>
 			<a
-				href="/"
+				href={base}
 				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"
 			>
 				Settings

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { base } from '$app/paths';
 	import ChatWindow from '$lib/components/chat/ChatWindow.svelte';
 	import { pendingMessage } from '$lib/stores/pendingMessage';
 
@@ -8,7 +9,7 @@
 	async function createConversation(message: string) {
 		try {
 			loading = true;
-			const res = await fetch('/conversation', {
+			const res = await fetch(`${base}/conversation`, {
 				method: 'POST',
 				headers: {
 					'Content-Type': 'application/json'
@@ -26,7 +27,7 @@
 			pendingMessage.set(message);
 
 			// invalidateAll to update list of conversations
-			await goto(`/conversation/${conversationId}`, { invalidateAll: true });
+			await goto(`${base}/conversation/${conversationId}`, { invalidateAll: true });
 		} finally {
 			loading = false;
 		}

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

@@ -1,3 +1,5 @@
+import { base } from '$app/paths';
+import { SHARE_BASE_URL } from '$env/static/private';
 import { collections } from '$lib/server/database.js';
 import type { SharedConversation } from '$lib/types/SharedConversation.js';
 import { sha256 } from '$lib/utils/sha256.js';
@@ -22,7 +24,7 @@ export async function POST({ params, url, locals }) {
 	if (existingShare) {
 		return new Response(
 			JSON.stringify({
-				url: url.origin + `/r/${existingShare._id}`
+				url: url.origin + `${base}/r/${existingShare._id}`
 			}),
 			{ headers: { 'Content-Type': 'application/json' } }
 		);
@@ -41,7 +43,7 @@ export async function POST({ params, url, locals }) {
 
 	return new Response(
 		JSON.stringify({
-			url: url.origin.replace('huggingface.co', 'hf.co') + `/r/${shared._id}`
+			url: (SHARE_BASE_URL || `${url.origin}${base}`) + `/r/${shared._id}`
 		}),
 		{ headers: { 'Content-Type': 'application/json' } }
 	);

svelte.config.js

@@ -1,5 +1,9 @@
 import adapter from '@sveltejs/adapter-node';
 import { vitePreprocess } from '@sveltejs/kit/vite';
+import dotenv from 'dotenv';
+
+dotenv.config({ path: './.env.local' });
+dotenv.config({ path: './.env' });
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -8,7 +12,11 @@ const config = {
 	preprocess: vitePreprocess(),
 
 	kit: {
-		adapter: adapter()
+		adapter: adapter(),
+
+		paths: {
+			base: process.env.APP_BASE || ''
+		}
 	}
 };