Buckets:
gijl/lv-storage / llama.cpp /tools /ui /src /lib /components /app /misc /ConversationSelection.svelte
| <script lang="ts"> | |
| import SearchInput from '$lib/components/app/forms/SearchInput.svelte'; | |
| import { Button } from '$lib/components/ui/button'; | |
| import { Checkbox } from '$lib/components/ui/checkbox'; | |
| import { ScrollArea } from '$lib/components/ui/scroll-area'; | |
| import { UI_DATA_ATTRS } from '$lib/constants'; | |
| import { useMarqueeSelection } from '$lib/hooks/use-marquee-selection.svelte'; | |
| import { SvelteSet } from 'svelte/reactivity'; | |
| interface Props { | |
| conversations: DatabaseConversation[]; | |
| messageCountMap?: Map<string, number>; | |
| mode: 'export' | 'import'; | |
| onCancel: () => void; | |
| onConfirm: (selectedConversations: DatabaseConversation[]) => void; | |
| isOpen?: boolean; | |
| } | |
| let { | |
| conversations, | |
| isOpen = true, | |
| messageCountMap = new Map(), | |
| mode, | |
| onCancel, | |
| onConfirm | |
| }: Props = $props(); | |
| let searchQuery = $state(''); | |
| let selectedIds = $state.raw<SvelteSet<string>>(getInitialSelectedIds()); | |
| function getInitialSelectedIds(): SvelteSet<string> { | |
| return new SvelteSet(conversations.map((c) => c.id)); | |
| } | |
| let filteredConversations = $derived( | |
| conversations.filter((conv) => { | |
| const name = conv.name || 'Untitled conversation'; | |
| return name.toLowerCase().includes(searchQuery.toLowerCase()); | |
| }) | |
| ); | |
| let orderedIds = $derived(filteredConversations.map((c) => c.id)); | |
| let allSelected = $derived( | |
| filteredConversations.length > 0 && | |
| filteredConversations.every((conv) => selectedIds.has(conv.id)) | |
| ); | |
| let someSelected = $derived( | |
| filteredConversations.some((conv) => selectedIds.has(conv.id)) && !allSelected | |
| ); | |
| const marquee = useMarqueeSelection({ | |
| enabled: () => isOpen, | |
| orderedIds: () => orderedIds, | |
| selectedIds: () => selectedIds | |
| }); | |
| function toggleAll() { | |
| const newSet = new SvelteSet(selectedIds); | |
| if (allSelected) { | |
| filteredConversations.forEach((conv) => newSet.delete(conv.id)); | |
| } else { | |
| filteredConversations.forEach((conv) => newSet.add(conv.id)); | |
| } | |
| selectedIds = newSet; | |
| } | |
| function handleConfirm() { | |
| const selected = conversations.filter((conv) => selectedIds.has(conv.id)); | |
| onConfirm(selected); | |
| } | |
| function handleCancel() { | |
| selectedIds = getInitialSelectedIds(); | |
| searchQuery = ''; | |
| marquee.reset(); | |
| onCancel(); | |
| } | |
| export function reset() { | |
| selectedIds = getInitialSelectedIds(); | |
| searchQuery = ''; | |
| marquee.reset(); | |
| } | |
| </script> | |
| <div class="space-y-4"> | |
| <SearchInput bind:value={searchQuery} placeholder="Search conversations..." /> | |
| <div class="flex items-center justify-between text-sm text-muted-foreground"> | |
| <span> | |
| {selectedIds.size} of {conversations.length} selected | |
| {#if searchQuery} | |
| ({filteredConversations.length} shown) | |
| {/if} | |
| </span> | |
| </div> | |
| <div class="overflow-hidden rounded-md border"> | |
| <ScrollArea class="h-100"> | |
| <table class="w-full"> | |
| <thead class="sticky top-0 z-10 bg-muted"> | |
| <tr class="border-b"> | |
| <th class="w-12 p-3 text-left"> | |
| <Checkbox | |
| checked={allSelected} | |
| indeterminate={someSelected} | |
| onCheckedChange={toggleAll} | |
| /> | |
| </th> | |
| <th class="p-3 text-left text-sm font-medium">Conversation Name</th> | |
| <th class="w-32 p-3 text-left text-sm font-medium">Messages</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {#if filteredConversations.length === 0} | |
| <tr> | |
| <td class="p-8 text-center text-sm text-muted-foreground" colspan="3"> | |
| {#if searchQuery} | |
| No conversations found matching "{searchQuery}" | |
| {:else} | |
| No conversations available | |
| {/if} | |
| </td> | |
| </tr> | |
| {:else} | |
| {#each filteredConversations as conv (conv.id)} | |
| {@const checked = selectedIds.has(conv.id)} | |
| <tr | |
| class="cursor-pointer border-b transition-colors hover:bg-muted/50 {checked | |
| ? 'bg-muted/75' | |
| : ''}" | |
| {...{ [UI_DATA_ATTRS.CONVERSATION_ROW]: conv.id }} | |
| onclick={(event) => marquee.rowClick(conv.id, event.shiftKey)} | |
| onmousedown={(event) => marquee.rowMouseDown(conv.id, event)} | |
| > | |
| <td class="p-3"> | |
| <Checkbox | |
| {checked} | |
| onclick={(event) => { | |
| event.preventDefault(); | |
| event.stopPropagation(); | |
| marquee.rowClick(conv.id, event.shiftKey); | |
| }} | |
| /> | |
| </td> | |
| <td class="p-3 text-sm"> | |
| <div class="max-w-68 truncate" title={conv.name || 'Untitled conversation'}> | |
| {conv.name || 'Untitled conversation'} | |
| </div> | |
| </td> | |
| <td class="p-3 text-sm text-muted-foreground"> | |
| {messageCountMap.get(conv.id) ?? 0} | |
| </td> | |
| </tr> | |
| {/each} | |
| {/if} | |
| </tbody> | |
| </table> | |
| </ScrollArea> | |
| </div> | |
| <div class="flex justify-end gap-2"> | |
| <Button onclick={handleCancel} variant="outline">Cancel</Button> | |
| <Button disabled={selectedIds.size === 0} onclick={handleConfirm}> | |
| {mode === 'export' ? 'Export' : 'Import'} ({selectedIds.size}) | |
| </Button> | |
| </div> | |
| </div> | |
Xet Storage Details
- Size:
- 4.94 kB
- Xet hash:
- adc028c32066fa352dd641067ac5d02f6f9405ad19f5a227c40bd515fb673247
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.