refac: styling

src/lib/components/chat/MessageInput.svelte

@@ -20,7 +20,6 @@
 	export let submitPrompt: Function;
 	export let stopResponse: Function;
 
-	export let suggestionPrompts = [];
 	export let autoScroll = true;
 	let chatTextAreaElement: HTMLTextAreaElement;
 	let filesInputElement;
@@ -453,9 +452,9 @@
 					/>
 				{/if}
 
-				{#if messages.length == 0 && suggestionPrompts.length !== 0}
+				<!-- {#if messages.length == 0 && suggestionPrompts.length !== 0}
 					<Suggestions {suggestionPrompts} {submitPrompt} />
-				{/if}
+				{/if} -->
 			</div>
 		</div>
 	</div>

src/lib/components/chat/MessageInput/Suggestions.svelte

@@ -10,14 +10,12 @@
 			: suggestionPrompts.sort(() => Math.random() - 0.5).slice(0, 4);
 </script>
 
-<div class=" mb-3 md:p-1 text-left w-full">
-	<div class=" flex flex-wrap-reverse px-2 text-left">
+<div class="w-full">
+	<div class="relative w-full flex gap-2 snap-x overflow-x-auto tabs">
 		{#each prompts as prompt, promptIdx}
-			<div
-				class="{promptIdx > 1 ? 'hidden sm:inline-flex' : ''} basis-full sm:basis-1/2 p-[5px] px-1"
-			>
+			<div class="snap-center shrink-0">
 				<button
-					class=" flex-1 flex justify-between w-full h-full px-4 py-2.5 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 rounded-2xl transition group"
+					class="flex flex-1 shrink-0 w-60 justify-between h-full px-4 py-2.5 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 rounded-2xl transition group"
 					on:click={() => {
 						submitPrompt(prompt.content);
 					}}
@@ -25,7 +23,7 @@
 					<div class="flex flex-col text-left self-center">
 						{#if prompt.title && prompt.title[0] !== ''}
 							<div class="text-sm font-medium dark:text-gray-300">{prompt.title[0]}</div>
-							<div class="text-sm text-gray-500 line-clamp-1">{prompt.title[1]}</div>
+							<div class="text-sm text-gray-500 font-normal line-clamp-1">{prompt.title[1]}</div>
 						{:else}
 							<div class=" self-center text-sm font-medium dark:text-gray-300 line-clamp-2">
 								{prompt.content}
@@ -52,5 +50,22 @@
 				</button>
 			</div>
 		{/each}
+		<!-- <div class="snap-center shrink-0">
+		<img
+			class="shrink-0 w-80 h-40 rounded-lg shadow-xl bg-white"
+			src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=320&amp;h=160&amp;q=80"
+		/>
+	</div> -->
 	</div>
 </div>
+
+<style>
+	.tabs::-webkit-scrollbar {
+		display: none; /* for Chrome, Safari and Opera */
+	}
+
+	.tabs {
+		-ms-overflow-style: none; /* IE and Edge */
+		scrollbar-width: none; /* Firefox */
+	}
+</style>

src/lib/components/chat/Messages.svelte

@@ -22,6 +22,8 @@
 	export let continueGeneration: Function;
 	export let regenerateResponse: Function;
 
+	export let prompt;
+	export let suggestionPrompts;
 	export let processing = '';
 	export let bottomPadding = false;
 	export let autoScroll;
@@ -276,7 +278,22 @@
 </script>
 
 {#if messages.length == 0}
-	<Placeholder models={selectedModels} modelfiles={selectedModelfiles} />
+	<Placeholder
+		models={selectedModels}
+		modelfiles={selectedModelfiles}
+		{suggestionPrompts}
+		submitPrompt={async (p) => {
+			const chatTextAreaElement = document.getElementById('chat-textarea');
+			if (chatTextAreaElement) {
+				prompt = p;
+
+				await tick();
+
+				chatTextAreaElement.style.height = '';
+				chatTextAreaElement.style.height = Math.min(chatTextAreaElement.scrollHeight, 200) + 'px';
+			}
+		}}
+	/>
 {:else}
 	<div class=" pb-10">
 		{#key chatId}

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

@@ -2,12 +2,16 @@
 	import { WEBUI_BASE_URL } from '$lib/constants';
 	import { user } from '$lib/stores';
 	import { onMount, getContext } from 'svelte';
+	import Suggestions from '../MessageInput/Suggestions.svelte';
 
 	const i18n = getContext('i18n');
 
 	export let models = [];
 	export let modelfiles = [];
 
+	export let submitPrompt;
+	export let suggestionPrompts;
+
 	let modelfile = null;
 	let selectedModelIdx = 0;
 
@@ -20,56 +24,68 @@
 </script>
 
 {#if models.length > 0}
-	<div class="m-auto text-center max-w-md px-2">
-		<div class="flex justify-center mt-8">
-			<div class="flex -space-x-4 mb-1">
-				{#each models as model, modelIdx}
-					<button
-						on:click={() => {
-							selectedModelIdx = modelIdx;
-						}}
-					>
-						{#if model in modelfiles}
-							<img
-								src={modelfiles[model]?.imageUrl ?? `${WEBUI_BASE_URL}/static/favicon.png`}
-								alt="modelfile"
-								class=" size-12 rounded-full border-[1px] border-gray-200 dark:border-none"
-								draggable="false"
-							/>
-						{:else}
-							<img
-								src={$i18n.language === 'dg-DG'
-									? `/doge.png`
-									: `${WEBUI_BASE_URL}/static/favicon.png`}
-								class=" size-12 rounded-full border-[1px] border-gray-200 dark:border-none"
-								alt="logo"
-								draggable="false"
-							/>
-						{/if}
-					</button>
-				{/each}
-			</div>
-		</div>
-		<div class=" mt-2 mb-5 text-2xl text-gray-800 dark:text-gray-100 font-semibold">
-			{#if modelfile}
-				<span class=" capitalize">
-					{modelfile.title}
-				</span>
-				<div class="mt-0.5 text-base font-normal text-gray-600 dark:text-gray-400">
-					{modelfile.desc}
-				</div>
-				{#if modelfile.user}
-					<div class="mt-0.5 text-sm font-normal text-gray-500 dark:text-gray-500">
-						By <a href="https://openwebui.com/m/{modelfile.user.username}"
-							>{modelfile.user.name ? modelfile.user.name : `@${modelfile.user.username}`}</a
+	<div class=" my-auto text-center pb-10 md:pb-24">
+		<div class="m-auto max-w-3xl px-8">
+			<div class="flex justify-start mt-8">
+				<div class="flex -space-x-4 mb-1">
+					{#each models as model, modelIdx}
+						<button
+							on:click={() => {
+								selectedModelIdx = modelIdx;
+							}}
 						>
-					</div>
-				{/if}
-			{:else}
-				<div class=" line-clamp-1">{$i18n.t('Hello, {{name}}', { name: $user.name })}</div>
+							{#if model in modelfiles}
+								<img
+									src={modelfiles[model]?.imageUrl ?? `${WEBUI_BASE_URL}/static/favicon.png`}
+									alt="modelfile"
+									class=" size-12 rounded-full border-[1px] border-gray-200 dark:border-none"
+									draggable="false"
+								/>
+							{:else}
+								<img
+									src={$i18n.language === 'dg-DG'
+										? `/doge.png`
+										: `${WEBUI_BASE_URL}/static/favicon.png`}
+									class=" size-12 rounded-full border-[1px] border-gray-200 dark:border-none"
+									alt="logo"
+									draggable="false"
+								/>
+							{/if}
+						</button>
+					{/each}
+				</div>
+			</div>
+			<div
+				class=" mt-2 mb-3.5 text-2xl text-gray-800 dark:text-gray-100 font-semibold text-left flex items-center gap-4"
+			>
+				<div>
+					{#if modelfile}
+						<span class=" capitalize">
+							{modelfile.title}
+						</span>
+						<div class="mt-0.5 text-base font-normal text-gray-500 dark:text-gray-400">
+							{modelfile.desc}
+						</div>
+						{#if modelfile.user}
+							<div class="mt-0.5 text-sm font-normal text-gray-400 dark:text-gray-500">
+								By <a href="https://openwebui.com/m/{modelfile.user.username}"
+									>{modelfile.user.name ? modelfile.user.name : `@${modelfile.user.username}`}</a
+								>
+							</div>
+						{/if}
+					{:else}
+						<div class=" line-clamp-1">{$i18n.t('Hello, {{name}}', { name: $user.name })}</div>
 
-				<div>{$i18n.t('How can I help you today?')}</div>
-			{/if}
+						<div class=" font-medium text-gray-400 dark:">
+							{$i18n.t('How can I help you today?')}
+						</div>
+					{/if}
+				</div>
+			</div>
+
+			<div class=" max-w-full">
+				<Suggestions {suggestionPrompts} {submitPrompt} />
+			</div>
 		</div>
 	</div>
 {/if}

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

@@ -867,7 +867,10 @@
 					bind:history
 					bind:messages
 					bind:autoScroll
+					bind:prompt
 					bottomPadding={files.length > 0}
+					suggestionPrompts={selectedModelfile?.suggestionPrompts ??
+						$config.default_prompt_suggestions}
 					{sendPrompt}
 					{continueGeneration}
 					{regenerateResponse}
@@ -875,14 +878,6 @@
 			</div>
 		</div>
 
-		<MessageInput
-			bind:files
-			bind:prompt
-			bind:autoScroll
-			suggestionPrompts={selectedModelfile?.suggestionPrompts ?? $config.default_prompt_suggestions}
-			{messages}
-			{submitPrompt}
-			{stopResponse}
-		/>
+		<MessageInput bind:files bind:prompt bind:autoScroll {messages} {submitPrompt} {stopResponse} />
 	</div>
 </div>