feat: fullscreen mode

src/lib/components/chat/Messages.svelte

@@ -220,7 +220,11 @@
 	{#key chatId}
 		{#each messages as message, messageIdx}
 			<div class=" w-full">
-				<div class="flex flex-col justify-between px-5 mb-3 max-w-3xl mx-auto rounded-lg group">
+				<div
+					class="flex flex-col justify-between px-5 mb-3 {$settings?.fullScreenMode ?? null
+						? 'max-w-full'
+						: 'max-w-3xl'} mx-auto rounded-lg group"
+				>
 					{#if message.role === 'user'}
 						<UserMessage
 							user={$user}

src/lib/components/chat/Settings/Interface.svelte

@@ -12,11 +12,17 @@
 	let titleAutoGenerate = true;
 	let responseAutoCopy = false;
 	let titleAutoGenerateModel = '';
+	let fullScreenMode = false;
 
 	// Interface
 	let promptSuggestions = [];
 	let showUsername = false;
 
+	const toggleFullScreenMode = async () => {
+		fullScreenMode = !fullScreenMode;
+		saveSettings({ fullScreenMode: fullScreenMode });
+	};
+
 	const toggleShowUsername = async () => {
 		showUsername = !showUsername;
 		saveSettings({ showUsername: showUsername });
@@ -64,6 +70,7 @@
 		titleAutoGenerate = settings.titleAutoGenerate ?? true;
 		responseAutoCopy = settings.responseAutoCopy ?? false;
 		showUsername = settings.showUsername ?? false;
+		fullScreenMode = settings.fullScreenMode ?? false;
 		titleAutoGenerateModel = settings.titleAutoGenerateModel ?? '';
 	});
 </script>
@@ -119,6 +126,26 @@
 				</div>
 			</div>
 
+			<div>
+				<div class=" py-0.5 flex w-full justify-between">
+					<div class=" self-center text-xs font-medium">Full Screen Mode</div>
+
+					<button
+						class="p-1 px-3 text-xs flex rounded transition"
+						on:click={() => {
+							toggleFullScreenMode();
+						}}
+						type="button"
+					>
+						{#if fullScreenMode === true}
+							<span class="ml-2 self-center">On</span>
+						{:else}
+							<span class="ml-2 self-center">Off</span>
+						{/if}
+					</button>
+				</div>
+			</div>
+
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
 					<div class=" self-center text-xs font-medium">