From 43a490457ddbf6d285e61e9cd9224864aef638c1 Mon Sep 17 00:00:00 2001
From: Jannik Streidl <jannik.stdl@gmail.com>
Date: Tue, 4 Feb 2025 09:14:02 +0100
Subject: [PATCH 1/3] feat: smart suggestions

---
 src/lib/components/chat/Placeholder.svelte |   1 +
 src/lib/components/chat/Suggestions.svelte | 131 ++++++++++++++-------
 2 files changed, 92 insertions(+), 40 deletions(-)

diff --git a/src/lib/components/chat/Placeholder.svelte b/src/lib/components/chat/Placeholder.svelte
index 56916a8e5..756f7099f 100644
--- a/src/lib/components/chat/Placeholder.svelte
+++ b/src/lib/components/chat/Placeholder.svelte
@@ -220,6 +220,7 @@
 				suggestionPrompts={models[selectedModelIdx]?.info?.meta?.suggestion_prompts ??
 					$config?.default_prompt_suggestions ??
 					[]}
+				inputValue={prompt}
 				on:select={(e) => {
 					selectSuggestionPrompt(e.detail);
 				}}
diff --git a/src/lib/components/chat/Suggestions.svelte b/src/lib/components/chat/Suggestions.svelte
index a73d79617..c77c89479 100644
--- a/src/lib/components/chat/Suggestions.svelte
+++ b/src/lib/components/chat/Suggestions.svelte
@@ -1,53 +1,104 @@
 <script lang="ts">
+	import Fuse from 'fuse.js';
 	import Bolt from '$lib/components/icons/Bolt.svelte';
-	import { onMount, getContext, createEventDispatcher } from 'svelte';
+	import { getContext, createEventDispatcher, onMount } from 'svelte';
 
 	const i18n = getContext('i18n');
 	const dispatch = createEventDispatcher();
 
 	export let suggestionPrompts = [];
 	export let className = '';
+	export let inputValue = '';
 
-	let prompts = [];
+	let sortedPrompts = [];
+	onMount(() => {
+		sortedPrompts = [...(suggestionPrompts ?? [])].sort(() => Math.random() - 0.5);
+	});
 
-	$: prompts = (suggestionPrompts ?? [])
-		.reduce((acc, current) => [...acc, ...[current]], [])
-		.sort(() => Math.random() - 0.5);
+	const fuseOptions = {
+		keys: ['content', 'title'],
+		threshold: 0.5
+	};
+
+	let fuse;
+	let filteredPrompts = [];
+
+	// Track the number of updates to filteredPrompts
+	let version = 0;
+
+	// Fuzzy search
+	$: fuse = new Fuse(sortedPrompts, fuseOptions);
+	// Update filteredPrompts + version whenever inputValue changes
+	$: {
+		filteredPrompts = inputValue.trim()
+			? fuse.search(inputValue.trim()).map((result) => result.item)
+			: sortedPrompts;
+		version = version + 1;
+	}
 </script>
 
-{#if prompts.length > 0}
-	<div class="mb-1 flex gap-1 text-sm font-medium items-center text-gray-400 dark:text-gray-600">
-		<Bolt />
-		{$i18n.t('Suggested')}
-	</div>
-{/if}
-
-<div class=" h-40 max-h-full overflow-auto scrollbar-none {className}">
-	{#each prompts as prompt, promptIdx}
-		<button
-			class="flex flex-col flex-1 shrink-0 w-full justify-between px-3 py-2 rounded-xl bg-transparent hover:bg-black/5 dark:hover:bg-white/5 transition group"
-			on:click={() => {
-				dispatch('select', prompt.content);
-			}}
-		>
-			<div class="flex flex-col text-left">
-				{#if prompt.title && prompt.title[0] !== ''}
-					<div
-						class="  font-medium dark:text-gray-300 dark:group-hover:text-gray-200 transition line-clamp-1"
-					>
-						{prompt.title[0]}
-					</div>
-					<div class="text-xs text-gray-500 font-normal line-clamp-1">{prompt.title[1]}</div>
-				{:else}
-					<div
-						class="  font-medium dark:text-gray-300 dark:group-hover:text-gray-200 transition line-clamp-1"
-					>
-						{prompt.content}
-					</div>
-
-					<div class="text-xs text-gray-500 font-normal line-clamp-1">Prompt</div>
-				{/if}
-			</div>
-		</button>
-	{/each}
+<div
+	class="mb-1 flex gap-1 text-sm font-medium items-center text-gray-400 dark:text-gray-600"
+	style="visibility: {filteredPrompts.length > 0 ? 'visible' : 'hidden'}"
+>
+	<Bolt />
+	{$i18n.t('Suggested')}
 </div>
+
+<div class="h-40 overflow-auto scrollbar-none {className}">
+	{#if filteredPrompts.length > 0}
+		{#each filteredPrompts as prompt, idx ((prompt.id || prompt.content) + version)}
+			<button
+				class="waterfall-anim flex flex-col flex-1 shrink-0 w-full justify-between
+				       px-3 py-2 rounded-xl bg-transparent hover:bg-black/5
+				       dark:hover:bg-white/5 transition group"
+				style="animation-delay: {idx * 60}ms"
+				on:click={() => dispatch('select', prompt.content)}
+			>
+				<div class="flex flex-col text-left">
+					{#if prompt.title && prompt.title[0] !== ''}
+						<div
+							class="font-medium dark:text-gray-300 dark:group-hover:text-gray-200 transition line-clamp-1"
+						>
+							{prompt.title[0]}
+						</div>
+						<div class="text-xs text-gray-500 font-normal line-clamp-1">
+							{prompt.title[1]}
+						</div>
+					{:else}
+						<div
+							class="font-medium dark:text-gray-300 dark:group-hover:text-gray-200 transition line-clamp-1"
+						>
+							{prompt.content}
+						</div>
+						<div class="text-xs text-gray-500 font-normal line-clamp-1">Prompt</div>
+					{/if}
+				</div>
+			</button>
+		{/each}
+	{:else}
+		<!-- No suggestions -->
+	{/if}
+</div>
+
+<style>
+	/* Waterfall animation for the suggestions */
+	@keyframes fadeInUp {
+		0% {
+			opacity: 0;
+			transform: translateY(20px);
+		}
+		100% {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.waterfall-anim {
+		opacity: 0;
+		animation-name: fadeInUp;
+		animation-duration: 200ms;
+		animation-fill-mode: forwards;
+		animation-timing-function: ease;
+	}
+</style>

From b8b82b91565a5066b1d061f8d6d847768716a3b6 Mon Sep 17 00:00:00 2001
From: Jannik Streidl <jannik.stdl@gmail.com>
Date: Tue, 4 Feb 2025 09:17:55 +0100
Subject: [PATCH 2/3] i18n

---
 src/lib/components/chat/Suggestions.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/chat/Suggestions.svelte b/src/lib/components/chat/Suggestions.svelte
index c77c89479..6c2defb04 100644
--- a/src/lib/components/chat/Suggestions.svelte
+++ b/src/lib/components/chat/Suggestions.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Fuse from 'fuse.js';
 	import Bolt from '$lib/components/icons/Bolt.svelte';
-	import { getContext, createEventDispatcher, onMount } from 'svelte';
+	import { onMount, getContext, createEventDispatcher } from 'svelte';
 
 	const i18n = getContext('i18n');
 	const dispatch = createEventDispatcher();
@@ -71,7 +71,7 @@
 						>
 							{prompt.content}
 						</div>
-						<div class="text-xs text-gray-500 font-normal line-clamp-1">Prompt</div>
+						<div class="text-xs text-gray-500 font-normal line-clamp-1">{i18n.t('Prompt')}</div>
 					{/if}
 				</div>
 			</button>

From 17c1c2f0f330475c29df7c8bbb6fc195f5b62319 Mon Sep 17 00:00:00 2001
From: Jannik Streidl <jannik.stdl@gmail.com>
Date: Tue, 4 Feb 2025 09:36:11 +0100
Subject: [PATCH 3/3] fix: only animate on change

---
 src/lib/components/chat/Suggestions.svelte | 34 ++++++++++++++++++----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/chat/Suggestions.svelte b/src/lib/components/chat/Suggestions.svelte
index 6c2defb04..6dddd6583 100644
--- a/src/lib/components/chat/Suggestions.svelte
+++ b/src/lib/components/chat/Suggestions.svelte
@@ -22,18 +22,40 @@
 
 	let fuse;
 	let filteredPrompts = [];
+	let oldFilteredPrompts = [];
 
-	// Track the number of updates to filteredPrompts
+	// This variable controls the re-rendering of the suggestions
 	let version = 0;
 
-	// Fuzzy search
+	// Initialize Fuse
 	$: fuse = new Fuse(sortedPrompts, fuseOptions);
-	// Update filteredPrompts + version whenever inputValue changes
+
+	// Update the filteredPrompts if inputValue changes
+	// Only increase version if something wirklich geändert hat
 	$: {
-		filteredPrompts = inputValue.trim()
+		const newFilteredPrompts = inputValue.trim()
 			? fuse.search(inputValue.trim()).map((result) => result.item)
 			: sortedPrompts;
-		version = version + 1;
+
+		// Compare with the oldFilteredPrompts
+		// If there's a difference, update array + version
+		if (!arraysEqual(oldFilteredPrompts, newFilteredPrompts)) {
+			filteredPrompts = newFilteredPrompts;
+			version += 1;
+		}
+		oldFilteredPrompts = newFilteredPrompts;
+	}
+
+	// Helper function to check if arrays are the same
+	// (based on unique IDs oder content)
+	function arraysEqual(a, b) {
+		if (a.length !== b.length) return false;
+		for (let i = 0; i < a.length; i++) {
+			if ((a[i].id ?? a[i].content) !== (b[i].id ?? b[i].content)) {
+				return false;
+			}
+		}
+		return true;
 	}
 </script>
 
@@ -77,7 +99,7 @@
 			</button>
 		{/each}
 	{:else}
-		<!-- No suggestions -->
+		<!-- Keine Vorschläge -->
 	{/if}
 </div>