feat: sidebar styling

src/lib/components/chat/MessageInput.svelte

@@ -371,7 +371,7 @@
 	</div>
 {/if}
 
-<div class="fixed bottom-0 w-full">
+<div class="w-full pt-2 md:pt-0">
 	<div class="px-2.5 pt-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>

src/lib/components/chat/Messages/ResponseMessage.svelte

@@ -270,9 +270,7 @@
 				{#if message.model in modelfiles}
 					{modelfiles[message.model]?.title}
 				{:else}
-					Ollama <span class=" text-gray-500 text-sm font-medium"
+					{message.model ? ` ${message.model}` : ''}
-						>{message.model ? ` ${message.model}` : ''}</span
-					>
 				{/if}
 
 				{#if message.timestamp}

src/lib/components/layout/Navbar.svelte

@@ -69,7 +69,7 @@
 <ShareChatModal bind:show={showShareChatModal} {downloadChat} {shareChat} />
 <nav
 	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"
+	class=" sticky 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 z-30"
 >
 	<div
 		class=" flex {$settings?.fullScreenMode ?? null

src/lib/components/layout/Sidebar.svelte

@@ -89,7 +89,7 @@
 	bind:this={navElement}
 	class="h-screen {show
 		? ''
-		: '-translate-x-[260px]'}  w-[260px] fixed top-0 left-0 z-40 transition bg-black text-gray-200 shadow-2xl text-sm
+		: '-translate-x-[260px] w-[0px]'}  w-[260px] bg-black text-gray-200 shadow-2xl text-sm transition z-40 fixed top-0 left-0 lg:relative
         "
 >
 	<div class="py-2.5 my-auto flex flex-col justify-between h-screen">

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

@@ -440,7 +440,7 @@
 														selectedModelfile.title.charAt(0).toUpperCase() +
 														selectedModelfile.title.slice(1)
 												  }`
-												: `Ollama - ${model}`,
+												: `${model}`,
 											{
 												body: responseMessage.content,
 												icon: selectedModelfile?.imageUrl ?? '/favicon.png'
@@ -789,41 +789,43 @@
 	}}
 />
 
-<Navbar {title} shareEnabled={messages.length > 0} {initNewChat} {tags} {addTag} {deleteTag} />
+<div class="min-h-screen w-full flex flex-col">
-<div class="min-h-screen w-full flex justify-center">
+	<Navbar {title} shareEnabled={messages.length > 0} {initNewChat} {tags} {addTag} {deleteTag} />
-	<div class=" py-2.5 flex flex-col justify-between w-full">
+	<div class="flex flex-col justify-center h-full">
-		<div
+		<div class=" pb-2.5 flex flex-1 flex-col justify-between w-full overflow-hidden">
-			class="{$settings?.fullScreenMode ?? null
+			<div
-				? 'max-w-full'
+				class="{$settings?.fullScreenMode ?? null
-				: 'max-w-2xl md:px-0'} mx-auto w-full px-4 mt-10"
+					? 'max-w-full'
-		>
+					: 'max-w-2xl md:px-0'} mx-auto w-full px-4"
-			<ModelSelector bind:selectedModels disabled={messages.length > 0} />
+			>
+				<ModelSelector bind:selectedModels disabled={messages.length > 0} />
+			</div>
+
+			<div class=" h-full mt-10 w-full flex flex-col">
+				<Messages
+					chatId={$chatId}
+					{selectedModels}
+					{selectedModelfiles}
+					{processing}
+					bind:history
+					bind:messages
+					bind:autoScroll
+					bottomPadding={files.length > 0}
+					{sendPrompt}
+					{continueGeneration}
+					{regenerateResponse}
+				/>
+			</div>
 		</div>
 
-		<div class=" h-full mt-10 mb-32 w-full flex flex-col">
+		<MessageInput
-			<Messages
+			bind:files
-				chatId={$chatId}
+			bind:prompt
-				{selectedModels}
+			bind:autoScroll
-				{selectedModelfiles}
+			suggestionPrompts={selectedModelfile?.suggestionPrompts ?? $config.default_prompt_suggestions}
-				{processing}
+			{messages}
-				bind:history
+			{submitPrompt}
-				bind:messages
+			{stopResponse}
-				bind:autoScroll
+		/>
-				bottomPadding={files.length > 0}
-				{sendPrompt}
-				{continueGeneration}
-				{regenerateResponse}
-			/>
-		</div>
 	</div>
-
-	<MessageInput
-		bind:files
-		bind:prompt
-		bind:autoScroll
-		suggestionPrompts={selectedModelfile?.suggestionPrompts ?? $config.default_prompt_suggestions}
-		{messages}
-		{submitPrompt}
-		{stopResponse}
-	/>
 </div>

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

@@ -454,7 +454,7 @@
 														selectedModelfile.title.charAt(0).toUpperCase() +
 														selectedModelfile.title.slice(1)
 												  }`
-												: `Ollama - ${model}`,
+												: `${model}`,
 											{
 												body: responseMessage.content,
 												icon: selectedModelfile?.imageUrl ?? '/favicon.png'
@@ -804,59 +804,62 @@
 />
 
 {#if loaded}
-	<Navbar
+	<div class="min-h-screen w-full flex flex-col">
-		{title}
+		<Navbar
-		shareEnabled={messages.length > 0}
+			{title}
-		initNewChat={async () => {
+			shareEnabled={messages.length > 0}
-			if (currentRequestId !== null) {
+			initNewChat={async () => {
-				await cancelChatCompletion(localStorage.token, currentRequestId);
+				if (currentRequestId !== null) {
-				currentRequestId = null;
+					await cancelChatCompletion(localStorage.token, currentRequestId);
-			}
+					currentRequestId = null;
+				}
 
-			goto('/');
+				goto('/');
-		}}
+			}}
-		{tags}
+			{tags}
-		{addTag}
+			{addTag}
-		{deleteTag}
+			{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="{$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('')}
-				/>
-			</div>
-
-			<div class=" h-full mt-10 mb-32 w-full flex flex-col">
-				<Messages
-					chatId={$chatId}
-					{selectedModels}
-					{selectedModelfiles}
-					{processing}
-					bind:history
-					bind:messages
-					bind:autoScroll
-					bottomPadding={files.length > 0}
-					{sendPrompt}
-					{continueGeneration}
-					{regenerateResponse}
-				/>
-			</div>
-		</div>
-
-		<MessageInput
-			bind:files
-			bind:prompt
-			bind:autoScroll
-			suggestionPrompts={selectedModelfile?.suggestionPrompts ?? $config.default_prompt_suggestions}
-			{messages}
-			{submitPrompt}
-			{stopResponse}
 		/>
+		<div class="justify-center">
+			<div class=" pb-2.5 flex flex-col justify-between w-full">
+				<div
+					class="{$settings?.fullScreenMode ?? null
+						? 'max-w-full'
+						: 'max-w-2xl md:px-0'} mx-auto w-full px-4"
+				>
+					<ModelSelector
+						bind:selectedModels
+						disabled={messages.length > 0 && !selectedModels.includes('')}
+					/>
+				</div>
+
+				<div class=" h-full mt-10 mb-32 w-full flex flex-col">
+					<Messages
+						chatId={$chatId}
+						{selectedModels}
+						{selectedModelfiles}
+						{processing}
+						bind:history
+						bind:messages
+						bind:autoScroll
+						bottomPadding={files.length > 0}
+						{sendPrompt}
+						{continueGeneration}
+						{regenerateResponse}
+					/>
+				</div>
+			</div>
+
+			<MessageInput
+				bind:files
+				bind:prompt
+				bind:autoScroll
+				suggestionPrompts={selectedModelfile?.suggestionPrompts ??
+					$config.default_prompt_suggestions}
+				{messages}
+				{submitPrompt}
+				{stopResponse}
+			/>
+		</div>
 	</div>
 {/if}