95 lines
2.4 KiB
Svelte
95 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
|
import { tick, getContext, onMount, onDestroy } from 'svelte';
|
|
import { toast } from 'svelte-sonner';
|
|
|
|
import { getPrompts } from '$lib/apis/prompts';
|
|
|
|
const i18n = getContext('i18n');
|
|
|
|
export let query = '';
|
|
export let onSelect = (e) => {};
|
|
|
|
let selectedPromptIdx = 0;
|
|
export let filteredItems = [];
|
|
let searchDebounceTimer: ReturnType<typeof setTimeout>;
|
|
|
|
let items = [];
|
|
|
|
$: if (query !== undefined) {
|
|
clearTimeout(searchDebounceTimer);
|
|
searchDebounceTimer = setTimeout(() => {
|
|
getItems();
|
|
}, 200);
|
|
}
|
|
|
|
onDestroy(() => {
|
|
clearTimeout(searchDebounceTimer);
|
|
});
|
|
|
|
$: filteredItems = items
|
|
.filter((p) => p.command.toLowerCase().includes(query.toLowerCase()))
|
|
.sort((a, b) => a.name.localeCompare(b.name));
|
|
|
|
$: if (query) {
|
|
selectedPromptIdx = 0;
|
|
}
|
|
|
|
const getItems = async () => {
|
|
const res = await getPrompts(localStorage.token).catch(() => null);
|
|
if (res) {
|
|
items = res;
|
|
}
|
|
};
|
|
|
|
export const selectUp = () => {
|
|
selectedPromptIdx = Math.max(0, selectedPromptIdx - 1);
|
|
};
|
|
export const selectDown = () => {
|
|
selectedPromptIdx = Math.min(selectedPromptIdx + 1, filteredItems.length - 1);
|
|
};
|
|
|
|
export const select = async () => {
|
|
const command = filteredItems[selectedPromptIdx];
|
|
if (command) {
|
|
onSelect({ type: 'prompt', data: command });
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<div class="px-2 py-1 text-[11px] text-gray-500 dark:text-gray-400">
|
|
{$i18n.t('Prompts')}
|
|
</div>
|
|
|
|
{#if filteredItems.length > 0}
|
|
<div class="scrollbar-hidden">
|
|
{#each filteredItems as promptItem, promptIdx}
|
|
<Tooltip content={promptItem.name} placement="top-start">
|
|
<button
|
|
class="flex h-[1.6875rem] w-full items-center gap-1.5 rounded-xl px-2 text-left text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 {promptIdx ===
|
|
selectedPromptIdx
|
|
? 'bg-gray-50/40 dark:bg-gray-800/40 selected-command-option-button'
|
|
: ''}"
|
|
type="button"
|
|
on:click={() => {
|
|
onSelect({ type: 'prompt', data: promptItem });
|
|
}}
|
|
on:mousemove={() => {
|
|
selectedPromptIdx = promptIdx;
|
|
}}
|
|
on:focus={() => {}}
|
|
data-selected={promptIdx === selectedPromptIdx}
|
|
>
|
|
<span class="shrink-0 font-normal text-black dark:text-gray-100">
|
|
{promptItem.command}
|
|
</span>
|
|
|
|
<span class="min-w-0 truncate text-xs text-gray-500 dark:text-gray-400">
|
|
{promptItem.name}
|
|
</span>
|
|
</button>
|
|
</Tooltip>
|
|
{/each}
|
|
</div>
|
|
{/if}
|