diff --git a/src/lib/components/chat/Suggestions.svelte b/src/lib/components/chat/Suggestions.svelte index 6dddd6583..d1f53a811 100644 --- a/src/lib/components/chat/Suggestions.svelte +++ b/src/lib/components/chat/Suggestions.svelte @@ -2,6 +2,8 @@ import Fuse from 'fuse.js'; import Bolt from '$lib/components/icons/Bolt.svelte'; import { onMount, getContext, createEventDispatcher } from 'svelte'; + import { WEBUI_NAME } from '$lib/stores'; + import { WEBUI_VERSION } from '$lib/constants'; const i18n = getContext('i18n'); const dispatch = createEventDispatcher(); @@ -11,9 +13,6 @@ export let inputValue = ''; let sortedPrompts = []; - onMount(() => { - sortedPrompts = [...(suggestionPrompts ?? [])].sort(() => Math.random() - 0.5); - }); const fuseOptions = { keys: ['content', 'title'], @@ -22,29 +21,13 @@ let fuse; let filteredPrompts = []; - let oldFilteredPrompts = []; - - // This variable controls the re-rendering of the suggestions - let version = 0; // Initialize Fuse $: fuse = new Fuse(sortedPrompts, fuseOptions); // Update the filteredPrompts if inputValue changes // Only increase version if something wirklich geändert hat - $: { - const newFilteredPrompts = inputValue.trim() - ? fuse.search(inputValue.trim()).map((result) => result.item) - : sortedPrompts; - - // Compare with the oldFilteredPrompts - // If there's a difference, update array + version - if (!arraysEqual(oldFilteredPrompts, newFilteredPrompts)) { - filteredPrompts = newFilteredPrompts; - version += 1; - } - oldFilteredPrompts = newFilteredPrompts; - } + $: getFilteredPrompts(inputValue); // Helper function to check if arrays are the same // (based on unique IDs oder content) @@ -57,21 +40,45 @@ } return true; } + + const getFilteredPrompts = (inputValue) => { + const newFilteredPrompts = inputValue.trim() + ? fuse.search(inputValue.trim()).map((result) => result.item) + : sortedPrompts; + + // Compare with the oldFilteredPrompts + // If there's a difference, update array + version + if (!arraysEqual(filteredPrompts, newFilteredPrompts)) { + filteredPrompts = newFilteredPrompts; + } + }; + + onMount(() => { + sortedPrompts = [...(suggestionPrompts ?? [])].sort(() => Math.random() - 0.5); + getFilteredPrompts(inputValue); + }); -
- - {$i18n.t('Suggested')} +
+ {#if filteredPrompts.length > 0} + + {$i18n.t('Suggested')} + {:else} + + +
+ {$WEBUI_NAME} ‧ v{WEBUI_VERSION} +
+ {/if}
-
+
{#if filteredPrompts.length > 0} - {#each filteredPrompts as prompt, idx ((prompt.id || prompt.content) + version)} + {#each filteredPrompts as prompt, idx (prompt.id || prompt.content)} {/each} - {:else} - {/if}
@@ -116,7 +121,7 @@ } } - .waterfall-anim { + .waterfall { opacity: 0; animation-name: fadeInUp; animation-duration: 200ms;