This commit is contained in:
Timothy Jaeryang Baek 2026-07-14 04:26:18 -04:00
parent 7b2efdff08
commit c9103a29ff

View file

@ -1,7 +1,7 @@
<script lang="ts">
import Fuse from 'fuse.js';
import Bolt from '$lib/components/icons/Bolt.svelte';
import { onMount, getContext } from 'svelte';
import { getContext } from 'svelte';
import { settings, WEBUI_NAME } from '$lib/stores';
import { WEBUI_VERSION } from '$lib/constants';
@ -10,7 +10,7 @@
export let suggestionPrompts = [];
export let className = '';
export let inputValue = '';
export let onSelect = (e) => {};
export let onSelect = () => {};
let sortedPrompts = [];
@ -81,36 +81,40 @@
{/if}
</div>
<div class="h-40 w-full">
<div class="h-36 w-full">
{#if filteredPrompts.length > 0}
<div role="list" class="max-h-40 overflow-auto scrollbar-none items-start {className}">
<div role="list" class="max-h-36 overflow-auto scrollbar-none items-start {className}">
{#each filteredPrompts as prompt, idx (prompt.id || `${prompt.content}-${idx}`)}
<!-- svelte-ignore a11y-no-interactive-element-to-noninteractive-role -->
<button
role="listitem"
class="waterfall 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"
px-2.5 py-1.5 rounded-lg bg-transparent transition-colors
hover:text-gray-950 dark:hover:text-white group"
style="animation-delay: {idx * 45}ms"
on:click={() => onSelect({ type: 'prompt', data: prompt.content })}
>
<div class="flex flex-col text-left">
<div class="flex flex-col text-left leading-snug">
{#if prompt.title && prompt.title[0] !== ''}
<div
class="font-normal dark:text-gray-300 dark:group-hover:text-gray-200 transition line-clamp-1"
class="text-sm font-normal group-hover:text-gray-950 dark:text-gray-300 dark:group-hover:text-white transition line-clamp-1"
>
{prompt.title[0]}
</div>
<div class="text-xs text-gray-600 dark:text-gray-400 font-normal line-clamp-1">
<div
class="text-xs text-gray-600 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-gray-100 font-normal line-clamp-1"
>
{prompt.title[1]}
</div>
{:else}
<div
class="font-normal dark:text-gray-300 dark:group-hover:text-gray-200 transition line-clamp-1"
class="text-sm font-normal group-hover:text-gray-950 dark:text-gray-300 dark:group-hover:text-white transition line-clamp-1"
>
{prompt.content}
</div>
<div class="text-xs text-gray-600 dark:text-gray-400 font-normal line-clamp-1">
<div
class="text-xs text-gray-600 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-gray-100 font-normal line-clamp-1"
>
{$i18n.t('Prompt')}
</div>
{/if}
@ -126,7 +130,7 @@
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
transform: translateY(6px);
}
100% {
opacity: 1;