Merge pull request #744 from ollama-webui/fullscreen-mode

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">

src/lib/components/layout/Navbar.svelte

@@ -4,7 +4,7 @@
 	const { saveAs } = fileSaver;
 
 	import { getChatById } from '$lib/apis/chats';
-	import { chatId, modelfiles } from '$lib/stores';
+	import { chatId, modelfiles, settings } from '$lib/stores';
 	import ShareChatModal from '../chat/ShareChatModal.svelte';
 	import TagInput from '../common/Tags/TagInput.svelte';
 	import Tags from '../common/Tags.svelte';
@@ -71,7 +71,11 @@
 	id="nav"
 	class=" fixed py-2.5 top-0 flex flex-row justify-center bg-white/95 dark:bg-gray-900/90 dark:text-gray-200 backdrop-blur-xl w-screen z-30"
 >
-	<div class=" flex max-w-3xl w-full mx-auto px-3">
+	<div
+		class=" flex {$settings?.fullScreenMode ?? null
+			? 'max-w-full'
+			: 'max-w-3xl'}  w-full mx-auto px-3"
+	>
 		<div class="flex items-center w-full max-w-full">
 			<div class="pr-2 self-start">
 				<button

src/routes/(app)/+page.svelte

@@ -781,7 +781,11 @@
 <Navbar {title} shareEnabled={messages.length > 0} {initNewChat} {tags} {addTag} {deleteTag} />
 <div class="min-h-screen w-full flex justify-center">
 	<div class=" py-2.5 flex flex-col justify-between w-full">
-		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 mt-10">
+		<div
+			class="{$settings?.fullScreenMode ?? null
+				? 'max-w-full'
+				: 'max-w-2xl md:px-0'} mx-auto w-full px-4 mt-10"
+		>
 			<ModelSelector bind:selectedModels disabled={messages.length > 0} />
 		</div>
 

src/routes/(app)/c/[id]/+page.svelte

@@ -810,7 +810,11 @@
 	/>
 	<div class="min-h-screen w-full flex justify-center">
 		<div class=" py-2.5 flex flex-col justify-between w-full">
-			<div class="max-w-2xl mx-auto w-full px-3 md:px-0 mt-10">
+			<div
+				class="{$settings?.fullScreenMode ?? null
+					? 'max-w-full'
+					: 'max-w-2xl md:px-0'} mx-auto w-full px-4 mt-10"
+			>
 				<ModelSelector
 					bind:selectedModels
 					disabled={messages.length > 0 && !selectedModels.includes('')}