refac: Improve banner handling and command visibility in chat UI

src/lib/components/chat/Chat.svelte

@@ -125,6 +125,8 @@
 	let webSearchEnabled = false;
 	let codeInterpreterEnabled = false;
 
+	let showCommands = false;
+
 	let chat = null;
 	let tags = [];
 
@@ -2083,6 +2085,7 @@
 						bind:selectedModels
 						shareEnabled={!!history.currentId}
 						{initNewChat}
+						showBanners={!showCommands}
 					/>
 
 					<div class="flex flex-col flex-auto z-10 w-full @container">
@@ -2133,6 +2136,7 @@
 									bind:codeInterpreterEnabled
 									bind:webSearchEnabled
 									bind:atSelectedModel
+									bind:showCommands
 									toolServers={$toolServers}
 									transparentBackground={$settings?.backgroundImageUrl ?? false}
 									{stopResponse}
@@ -2193,6 +2197,7 @@
 									bind:codeInterpreterEnabled
 									bind:webSearchEnabled
 									bind:atSelectedModel
+									bind:showCommands
 									transparentBackground={$settings?.backgroundImageUrl ?? false}
 									toolServers={$toolServers}
 									{stopResponse}

src/lib/components/chat/MessageInput.svelte

@@ -327,7 +327,7 @@
 
 	let command = '';
 
-	let showCommands = false;
+	export let showCommands = false;
 	$: showCommands = ['/', '#', '@'].includes(command?.charAt(0)) || '\\#' === command?.slice(0, 2);
 
 	let showTools = false;

src/lib/components/chat/MessageInput/Commands/Prompts.svelte

@@ -50,7 +50,7 @@
 
 				// Ensure the container is visible before adjusting height
 				const rect = container.getBoundingClientRect();
-				container.style.maxHeight = Math.max(Math.min(240, rect.bottom - 100), 100) + 'px';
+				container.style.maxHeight = Math.max(Math.min(240, rect.bottom - 80), 100) + 'px';
 			}, 100);
 		}
 	};

src/lib/components/chat/Navbar.svelte

@@ -40,6 +40,9 @@
 	export let history;
 	export let selectedModels;
 	export let showModelSelector = true;
+	export let showBanners = true;
+
+	let closedBannerIds = [];
 
 	let showShareChatModal = false;
 	let showDownloadChatModal = false;
@@ -199,6 +202,7 @@
 		</div>
 	{/if}
 
+	<div class="absolute top-[100%] left-0 right-0 h-fit">
 		{#if !history.currentId && !$chatId && ($banners.length > 0 || ($config?.license_metadata?.type ?? null) === 'trial' || (($config?.license_metadata?.seats ?? null) !== null && $config?.user_count > $config?.license_metadata?.seats))}
 			<div class=" w-full z-30 mt-5">
 				<div class=" flex flex-col gap-1 w-full">
@@ -226,12 +230,14 @@
 						/>
 					{/if}
 
-				{#each $banners.filter( (b) => (b.dismissible ? !JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]').includes(b.id) : true) ) as banner}
+					{#if showBanners}
+						{#each $banners.filter((b) => ![...JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]'), ...closedBannerIds].includes(b.id)) as banner}
 							<Banner
 								{banner}
 								on:dismiss={(e) => {
 									const bannerId = e.detail;
 
+									if (banner.dismissible) {
 										localStorage.setItem(
 											'dismissedBannerIds',
 											JSON.stringify(
@@ -241,10 +247,15 @@
 												].filter((id) => $banners.find((b) => b.id === id))
 											)
 										);
+									} else {
+										closedBannerIds = [...closedBannerIds, bannerId];
+									}
 								}}
 							/>
 						{/each}
+					{/if}
 				</div>
 			</div>
 		{/if}
+	</div>
 </nav>

src/lib/components/chat/Placeholder.svelte

@@ -37,6 +37,8 @@
 	export let selectedToolIds = [];
 	export let selectedFilterIds = [];
 
+	export let showCommands = false;
+
 	export let imageGenerationEnabled = false;
 	export let codeInterpreterEnabled = false;
 	export let webSearchEnabled = false;
@@ -220,6 +222,7 @@
 					bind:codeInterpreterEnabled
 					bind:webSearchEnabled
 					bind:atSelectedModel
+					bind:showCommands
 					{toolServers}
 					{transparentBackground}
 					{stopResponse}

src/lib/components/common/Banner.svelte

@@ -115,7 +115,6 @@
 				</div>
 			{/if}
 			<div class="flex self-start">
-				{#if banner.dismissible}
 				<button
 					on:click={() => {
 						dismiss(banner.id);
@@ -123,7 +122,6 @@
 					class="  -mt-1 -mb-2 -translate-y-[1px] ml-1.5 mr-1 text-gray-400 dark:hover:text-white"
 					>&times;</button
 				>
-				{/if}
 			</div>
 		</div>
 	{/if}