git.djapps.eu Git - pkg/ggml/sources/llama.cpp/blob

   1 <script lang="ts">
   2         import { KeyboardShortcutInfo } from '$lib/components/app';
   3         import { Button } from '$lib/components/ui/button';
   4         import type { Component } from 'svelte';
   5         import { SearchInput } from '$lib/components/app';
   6         import { page } from '$app/state';
   7         import { SIDEBAR_ACTIONS_ITEMS } from '$lib/constants/ui';
   8
   9         interface Props {
  10                 handleMobileSidebarItemClick: () => void;
  11                 isSearchModeActive: boolean;
  12                 searchQuery: string;
  13                 isCancelAlwaysVisible?: boolean;
  14                 onSearchDeactivated?: () => void;
  15         }
  16
  17         let {
  18                 handleMobileSidebarItemClick,
  19                 isSearchModeActive = $bindable(),
  20                 searchQuery = $bindable(),
  21                 isCancelAlwaysVisible = false,
  22                 onSearchDeactivated
  23         }: Props = $props();
  24
  25         let searchInputRef = $state<HTMLInputElement | null>(null);
  26
  27         function handleSearchModeDeactivate() {
  28                 isSearchModeActive = false;
  29                 searchQuery = '';
  30                 onSearchDeactivated?.();
  31         }
  32
  33         export function activateSearch() {
  34                 isSearchModeActive = true;
  35                 // Focus after Svelte renders the input
  36                 queueMicrotask(() => searchInputRef?.focus());
  37         }
  38 </script>
  39
  40 {#snippet itemIcon(IconComponent: Component)}
  41         <IconComponent class="h-4 w-4" />
  42 {/snippet}
  43
  44 <div class="my-1 space-y-1">
  45         {#if isSearchModeActive}
  46                 <SearchInput
  47                         bind:value={searchQuery}
  48                         bind:ref={searchInputRef}
  49                         onClose={handleSearchModeDeactivate}
  50                         onKeyDown={(e) => e.key === 'Escape' && handleSearchModeDeactivate()}
  51                         placeholder="Search conversations..."
  52                         {isCancelAlwaysVisible}
  53                 />
  54         {:else}
  55                 {#each SIDEBAR_ACTIONS_ITEMS as item (item.route)}
  56                         {#if !item.route}
  57                                 <Button
  58                                         class="w-full justify-between px-2 backdrop-blur-none! hover:[&>kbd]:opacity-100"
  59                                         onclick={activateSearch}
  60                                         variant="ghost"
  61                                 >
  62                                         <div class="flex items-center gap-2">
  63                                                 {@render itemIcon(item.icon)}
  64
  65                                                 {item.tooltip}
  66                                         </div>
  67
  68                                         {#if item.keys}
  69                                                 <KeyboardShortcutInfo keys={item.keys} />
  70                                         {/if}
  71                                 </Button>
  72                         {:else}
  73                                 <Button
  74                                         class="w-full justify-between px-2 backdrop-blur-none! hover:[&>kbd]:opacity-100 {(item.activeRouteId &&
  75                                                 page.route.id === item.activeRouteId) ||
  76                                         (item.activeRoutePrefix && page.route.id?.startsWith(item.activeRoutePrefix))
  77                                                 ? 'bg-accent text-accent-foreground'
  78                                                 : ''}"
  79                                         href={item.route}
  80                                         onclick={handleMobileSidebarItemClick}
  81                                         variant="ghost"
  82                                 >
  83                                         <div class="flex items-center gap-2">
  84                                                 {@render itemIcon(item.icon)}
  85
  86                                                 {item.tooltip}
  87                                         </div>
  88
  89                                         {#if item.keys}
  90                                                 <KeyboardShortcutInfo keys={item.keys} />
  91                                         {/if}
  92                                 </Button>
  93                         {/if}
  94                 {/each}
  95         {/if}
  96 </div>