mirror of
https://github.com/open-webui/open-webui
synced 2025-06-26 18:26:48 +00:00
105 lines
2.7 KiB
Svelte
105 lines
2.7 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 = [];
|
|
|
|
// 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>
|
|
|
|
<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}
|
|
<!-- 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>
|