mirror of
https://github.com/open-webui/open-webui
synced 2025-04-30 03:02:06 +00:00
127 lines
3.3 KiB
Svelte
127 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import Fuse from 'fuse.js';
|
|
import Bolt from '$lib/components/icons/Bolt.svelte';
|
|
import { onMount, getContext, createEventDispatcher } from 'svelte';
|
|
|
|
const i18n = getContext('i18n');
|
|
const dispatch = createEventDispatcher();
|
|
|
|
export let suggestionPrompts = [];
|
|
export let className = '';
|
|
export let inputValue = '';
|
|
|
|
let sortedPrompts = [];
|
|
onMount(() => {
|
|
sortedPrompts = [...(suggestionPrompts ?? [])].sort(() => Math.random() - 0.5);
|
|
});
|
|
|
|
const fuseOptions = {
|
|
keys: ['content', 'title'],
|
|
threshold: 0.5
|
|
};
|
|
|
|
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;
|
|
}
|
|
|
|
// 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>
|
|
|
|
<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">{i18n.t('Prompt')}</div>
|
|
{/if}
|
|
</div>
|
|
</button>
|
|
{/each}
|
|
{:else}
|
|
<!-- Keine Vorschläge -->
|
|
{/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>
|