Spaces:
Running
Running
File size: 1,598 Bytes
dd8990d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<script lang="ts">
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 = '';
let prompts = [];
$: prompts = (suggestionPrompts ?? [])
.reduce((acc, current) => [...acc, ...[current]], [])
.sort(() => Math.random() - 0.5);
</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>
|