Aleksander Grygier
23634783c5
* base : @-mention picker foundation - glob search, picker nav, highlight * feat : @-mention file/folder picker and mention badges in message bubbles * fix: Imports * feat : wire the @-mention picker into the chat form * fix: Bound the glob-search result cache key and prune stale entries
44 lines
902 B
Svelte
44 lines
902 B
Svelte
<script lang="ts">
|
|
import { ChatFormPickerList, ChatFormPickerListItem } from '$lib/components/app/chat';
|
|
|
|
interface Item {
|
|
id: string;
|
|
label: string;
|
|
}
|
|
|
|
const items: Item[] = Array.from({ length: 20 }, (_, i) => ({
|
|
id: String(i),
|
|
label: `item ${i}`
|
|
}));
|
|
|
|
let open = $state(false);
|
|
let scrollTrigger = $state(0);
|
|
let selectedIndex = $state(0);
|
|
|
|
export function openPicker() {
|
|
open = true;
|
|
}
|
|
</script>
|
|
|
|
<div style="height: 5000px;">conversation</div>
|
|
|
|
{#if open}
|
|
<div data-testid="picker-host">
|
|
<ChatFormPickerList
|
|
{items}
|
|
isLoading={false}
|
|
{selectedIndex}
|
|
searchQuery=""
|
|
showSearchInput={false}
|
|
{scrollTrigger}
|
|
itemKey={(it) => it.id}
|
|
>
|
|
{#snippet item(it, index, isSelected)}
|
|
<ChatFormPickerListItem dataIndex={index} {isSelected} onclick={() => {}}>
|
|
{it.label}
|
|
</ChatFormPickerListItem>
|
|
{/snippet}
|
|
</ChatFormPickerList>
|
|
</div>
|
|
{/if}
|