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,52 +202,60 @@
 		</div>
 	{/if}
 
-	{#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">
-				{#if ($config?.license_metadata?.type ?? null) === 'trial'}
-					<Banner
-						banner={{
-							type: 'info',
-							title: 'Trial License',
-							content: $i18n.t(
-								'You are currently using a trial license. Please contact support to upgrade your license.'
-							)
-						}}
-					/>
-				{/if}
-
-				{#if ($config?.license_metadata?.seats ?? null) !== null && $config?.user_count > $config?.license_metadata?.seats}
-					<Banner
-						banner={{
-							type: 'error',
-							title: 'License Error',
-							content: $i18n.t(
-								'Exceeded the number of seats in your license. Please contact support to increase the number of seats.'
-							)
-						}}
-					/>
-				{/if}
-
-				{#each $banners.filter( (b) => (b.dismissible ? !JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]').includes(b.id) : true) ) as banner}
-					<Banner
-						{banner}
-						on:dismiss={(e) => {
-							const bannerId = e.detail;
-
-							localStorage.setItem(
-								'dismissedBannerIds',
-								JSON.stringify(
-									[
-										bannerId,
-										...JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]')
-									].filter((id) => $banners.find((b) => b.id === id))
+	<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">
+					{#if ($config?.license_metadata?.type ?? null) === 'trial'}
+						<Banner
+							banner={{
+								type: 'info',
+								title: 'Trial License',
+								content: $i18n.t(
+									'You are currently using a trial license. Please contact support to upgrade your license.'
 								)
-							);
-						}}
-					/>
-				{/each}
+							}}
+						/>
+					{/if}
+
+					{#if ($config?.license_metadata?.seats ?? null) !== null && $config?.user_count > $config?.license_metadata?.seats}
+						<Banner
+							banner={{
+								type: 'error',
+								title: 'License Error',
+								content: $i18n.t(
+									'Exceeded the number of seats in your license. Please contact support to increase the number of seats.'
+								)
+							}}
+						/>
+					{/if}
+
+					{#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(
+												[
+													bannerId,
+													...JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]')
+												].filter((id) => $banners.find((b) => b.id === id))
+											)
+										);
+									} else {
+										closedBannerIds = [...closedBannerIds, bannerId];
+									}
+								}}
+							/>
+						{/each}
+					{/if}
+				</div>
 			</div>
-		</div>
-	{/if}
+		{/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,15 +115,13 @@
 				</div>
 			{/if}
 			<div class="flex self-start">
-				{#if banner.dismissible}
-					<button
-						on:click={() => {
-							dismiss(banner.id);
-						}}
-						class="  -mt-1 -mb-2 -translate-y-[1px] ml-1.5 mr-1 text-gray-400 dark:hover:text-white"
-						>&times;</button
-					>
-				{/if}
+				<button
+					on:click={() => {
+						dismiss(banner.id);
+					}}
+					class="  -mt-1 -mb-2 -translate-y-[1px] ml-1.5 mr-1 text-gray-400 dark:hover:text-white"
+					>&times;</button
+				>
 			</div>
 		</div>
 	{/if}