From 8fb5e22e433294cbcd69f78a7ed538cd6692268c Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Wed, 1 May 2024 23:41:12 -0700
Subject: [PATCH] refac: placeholder fade in effect

---
 .../chat/MessageInput/Suggestions.svelte      | 16 ++++-
 .../chat/Messages/Placeholder.svelte          | 58 +++++++++++--------
 src/routes/(app)/+layout.svelte               |  1 -
 src/routes/(app)/c/[id]/+page.svelte          |  5 +-
 4 files changed, 50 insertions(+), 30 deletions(-)

diff --git a/src/lib/components/chat/MessageInput/Suggestions.svelte b/src/lib/components/chat/MessageInput/Suggestions.svelte
index e0672ada..9f09a395 100644
--- a/src/lib/components/chat/MessageInput/Suggestions.svelte
+++ b/src/lib/components/chat/MessageInput/Suggestions.svelte
@@ -33,17 +33,27 @@
 				>
 					<div class="flex flex-col text-left">
 						{#if prompt.title && prompt.title[0] !== ''}
-							<div class="  font-medium dark:text-gray-300">{prompt.title[0]}</div>
+							<div
+								class="  font-medium dark:text-gray-300 dark:group-hover:text-gray-200 transition"
+							>
+								{prompt.title[0]}
+							</div>
 							<div class="text-sm text-gray-600 font-normal line-clamp-2">{prompt.title[1]}</div>
 						{:else}
-							<div class=" self-center text-sm font-medium dark:text-gray-300 line-clamp-2">
+							<div
+								class=" self-center text-sm font-medium dark:text-gray-300 dark:group-hover:text-gray-100 transition line-clamp-2"
+							>
 								{prompt.content}
 							</div>
 						{/if}
 					</div>
 
 					<div class="w-full flex justify-between">
-						<div class="text-xs text-gray-400 dark:text-gray-600 self-center">Prompt</div>
+						<div
+							class="text-xs text-gray-400 group-hover:text-gray-500 dark:text-gray-600 dark:group-hover:text-gray-500 transition self-center"
+						>
+							Prompt
+						</div>
 
 						<div
 							class="self-end p-1 rounded-lg text-gray-300 group-hover:text-gray-800 dark:text-gray-700 dark:group-hover:text-gray-100 transition"
diff --git a/src/lib/components/chat/Messages/Placeholder.svelte b/src/lib/components/chat/Messages/Placeholder.svelte
index acec89dc..800368c5 100644
--- a/src/lib/components/chat/Messages/Placeholder.svelte
+++ b/src/lib/components/chat/Messages/Placeholder.svelte
@@ -2,8 +2,10 @@
 	import { WEBUI_BASE_URL } from '$lib/constants';
 	import { user } from '$lib/stores';
 	import { onMount, getContext } from 'svelte';
+
+	import { blur, fade } from 'svelte/transition';
+
 	import Suggestions from '../MessageInput/Suggestions.svelte';
-	import Bolt from '$lib/components/icons/Bolt.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -13,6 +15,7 @@
 	export let submitPrompt;
 	export let suggestionPrompts;
 
+	let mounted = false;
 	let modelfile = null;
 	let selectedModelIdx = 0;
 
@@ -22,12 +25,16 @@
 	$: if (models.length > 0) {
 		selectedModelIdx = models.length - 1;
 	}
+
+	onMount(() => {
+		mounted = true;
+	});
 </script>
 
-{#if models.length > 0}
+{#key mounted}
 	<div class="m-auto w-full max-w-3xl px-8 pb-32">
 		<div class="flex justify-start">
-			<div class="flex -space-x-4 mb-1">
+			<div class="flex -space-x-4 mb-1" in:fade={{ duration: 200 }}>
 				{#each models as model, modelIdx}
 					<button
 						on:click={() => {
@@ -60,32 +67,37 @@
 			class=" mt-2 mb-4 text-3xl text-gray-800 dark:text-gray-100 font-semibold text-left flex items-center gap-4"
 		>
 			<div>
-				{#if modelfile}
-					<span class=" capitalize">
+				<div class=" capitalize line-clamp-1" in:fade={{ duration: 200 }}>
+					{#if modelfile}
 						{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
-							>
+					{:else}
+						{$i18n.t('Hello, {{name}}', { name: $user.name })}
+					{/if}
+				</div>
+
+				<div in:fade={{ duration: 200, delay: 200 }}>
+					{#if modelfile}
+						<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=" font-medium text-gray-400 dark:text-gray-500">
+							{$i18n.t('How can I help you today?')}
 						</div>
 					{/if}
-				{:else}
-					<div class=" line-clamp-1">{$i18n.t('Hello, {{name}}', { name: $user.name })}</div>
-
-					<div class=" font-medium text-gray-400 dark:text-gray-500">
-						{$i18n.t('How can I help you today?')}
-					</div>
-				{/if}
+				</div>
 			</div>
 		</div>
 
-		<div class=" w-full">
+		<div class=" w-full" in:fade={{ duration: 200, delay: 300 }}>
 			<Suggestions {suggestionPrompts} {submitPrompt} />
 		</div>
 	</div>
-{/if}
+{/key}
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index c0ed8ed7..8b380f25 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -294,7 +294,6 @@
 			{/if}
 
 			<Sidebar />
-
 			<slot />
 		{/if}
 	</div>
diff --git a/src/routes/(app)/c/[id]/+page.svelte b/src/routes/(app)/c/[id]/+page.svelte
index 225fa2ae..5d7429e5 100644
--- a/src/routes/(app)/c/[id]/+page.svelte
+++ b/src/routes/(app)/c/[id]/+page.svelte
@@ -5,7 +5,6 @@
 	import { onMount, tick, getContext } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
-
 	import {
 		models,
 		modelfiles,
@@ -860,8 +859,8 @@
 {#if loaded}
 	<div
 		class="min-h-screen max-h-screen {$showSidebar
-			? 'max-w-[calc(100%-260px)]'
-			: 'max-w-full'} flex flex-col"
+			? ' lg:max-w-[calc(100%-260px)]'
+			: ''} max-w-full flex flex-col"
 	>
 		<Navbar
 			{title}