fix: styling

src/lib/components/chat/MessageInput.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
 	import { onMount, tick, getContext } from 'svelte';
-	import { settings } from '$lib/stores';
+	import { settings, showSidebar } from '$lib/stores';
 	import { blobToFile, calculateSHA256, findWordIndices } from '$lib/utils';
 
 	import Prompts from './MessageInput/PromptCommands.svelte';
@@ -291,6 +291,7 @@
 	};
 
 	onMount(() => {
+		console.log(document.getElementById('sidebar'));
 		window.setTimeout(() => chatTextAreaElement?.focus(), 0);
 
 		const dropZone = document.querySelector('body');
@@ -389,8 +390,9 @@
 	</div>
 {/if}
 
-<div class="w-full absolute bottom-0">
-	<div class="px-2.5 -mb-0.5 mx-auto inset-x-0 bg-transparent flex justify-center">
+<div class="fixed bottom-0 {$showSidebar ? 'left-0 lg:left-[260px]' : 'left-0'} right-0">
+	<div class="w-full">
+		<div class=" px-2.5 -mb-0.5 mx-auto inset-x-0 bg-transparent flex justify-center">
 			<div class="flex flex-col max-w-3xl w-full">
 				<div class="relative">
 					{#if autoScroll === false && messages.length > 0}
@@ -951,4 +953,5 @@
 				</div>
 			</div>
 		</div>
+	</div>
 </div>

src/lib/components/chat/Messages.svelte

@@ -297,7 +297,7 @@
 			}}
 		/>
 	{:else}
-		<div class="pt-2 pb-28">
+		<div class="{$settings?.fullScreenMode ?? null ? 'w-full' : 'mx-auto'} pt-2 pb-28">
 			{#key chatId}
 				{#each messages as message, messageIdx}
 					<div class=" w-full">

src/lib/components/layout/Sidebar.svelte

@@ -1,12 +1,6 @@
 <script lang="ts">
-	import { v4 as uuidv4 } from 'uuid';
-
-	import fileSaver from 'file-saver';
-	const { saveAs } = fileSaver;
-
-	import { goto, invalidateAll } from '$app/navigation';
-	import { page } from '$app/stores';
-	import { user, chats, settings, showSettings, chatId, tags } from '$lib/stores';
+	import { goto } from '$app/navigation';
+	import { user, chats, settings, showSettings, chatId, tags, showSidebar } from '$lib/stores';
 	import { onMount, getContext } from 'svelte';
 
 	const i18n = getContext('i18n');
@@ -30,6 +24,7 @@
 	import ArchivedChatsModal from './Sidebar/ArchivedChatsModal.svelte';
 
 	const BREAKPOINT = 1024;
+
 	let show = false;
 	let navElement;
 
@@ -50,7 +45,7 @@
 	let isEditing = false;
 
 	onMount(async () => {
-		show = window.innerWidth > BREAKPOINT;
+		showSidebar.set(window.innerWidth > BREAKPOINT);
 		await chats.set(await getChatList(localStorage.token));
 
 		let touchstart;
@@ -61,10 +56,10 @@
 			const swipeDistance = Math.abs(touchend.screenX - touchstart.screenX);
 			if (touchstart.clientX < 40 && swipeDistance >= screenWidth / 4) {
 				if (touchend.screenX < touchstart.screenX) {
-					show = false;
+					showSidebar.set(false);
 				}
 				if (touchend.screenX > touchstart.screenX) {
-					show = true;
+					showSidebar.set(true);
 				}
 			}
 		}
@@ -80,8 +75,8 @@
 		};
 
 		const onResize = () => {
-			if (show && window.innerWidth < BREAKPOINT) {
-				show = false;
+			if ($showSidebar && window.innerWidth < BREAKPOINT) {
+				showSidebar.set(false);
 			}
 		};
 
@@ -167,13 +162,15 @@
 
 <div
 	bind:this={navElement}
-	class="h-screen max-h-[100dvh] min-h-screen {show
+	id="sidebar"
+	class="h-screen max-h-[100dvh] min-h-screen {$showSidebar
 		? 'lg:relative w-[260px]'
 		: '-translate-x-[260px] w-[0px]'} bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-200 text-sm transition fixed z-50 top-0 left-0
         "
+	data-state={$showSidebar}
 >
 	<div
-		class="py-2.5 my-auto flex flex-col justify-between h-screen max-h-[100dvh] w-[260px] {show
+		class="py-2.5 my-auto flex flex-col justify-between h-screen max-h-[100dvh] w-[260px] {$showSidebar
 			? ''
 			: 'invisible'}"
 	>
@@ -466,7 +463,7 @@
 								on:click={() => {
 									selectedChatId = chat.id;
 									if (window.innerWidth < 1024) {
-										show = false;
+										showSidebar.set(false);
 									}
 								}}
 								draggable="false"
@@ -803,14 +800,14 @@
 	>
 		<Tooltip
 			placement="right"
-			content={`${show ? $i18n.t('Close') : $i18n.t('Open')} ${$i18n.t('sidebar')}`}
+			content={`${$showSidebar ? $i18n.t('Close') : $i18n.t('Open')} ${$i18n.t('sidebar')}`}
 			touch={false}
 		>
 			<button
 				id="sidebar-toggle-button"
 				class=" group"
 				on:click={() => {
-					show = !show;
+					showSidebar.set(!$showSidebar);
 				}}
 				><span class="" data-state="closed"
 					><div

src/lib/stores/index.ts

@@ -34,6 +34,8 @@ export const documents = writable([
 ]);
 
 export const settings: Writable<Settings> = writable({});
+
+export const showSidebar = writable(false);
 export const showSettings = writable(false);
 export const showChangelog = writable(false);
 

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

@@ -877,7 +877,6 @@
 				/>
 			</div>
 		</div>
-
-		<MessageInput bind:files bind:prompt bind:autoScroll {messages} {submitPrompt} {stopResponse} />
 	</div>
 </div>
+<MessageInput bind:files bind:prompt bind:autoScroll {messages} {submitPrompt} {stopResponse} />

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

@@ -900,17 +900,16 @@
 					/>
 				</div>
 			</div>
+		</div>
+	</div>
 
 	<MessageInput
 		bind:files
 		bind:prompt
 		bind:autoScroll
-				suggestionPrompts={selectedModelfile?.suggestionPrompts ??
-					$config.default_prompt_suggestions}
+		suggestionPrompts={selectedModelfile?.suggestionPrompts ?? $config.default_prompt_suggestions}
 		{messages}
 		{submitPrompt}
 		{stopResponse}
 	/>
-		</div>
-	</div>
 {/if}