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

   1 <script lang="ts">
   2         import { ICON_CLASS_DEFAULT, ICON_CLASS_SPIN } from '$lib/constants/css-classes';
   3         import { Globe, Loader2 } from '@lucide/svelte';
   4         import { CollapsibleContentBlock } from '$lib/components/app';
   5         import * as HoverCard from '$lib/components/ui/hover-card';
   6         import { AgenticSectionType } from '$lib/enums';
   7         import { mcpStore } from '$lib/stores/mcp.svelte';
   8         import {
   9                 extractSearchResults,
  10                 extractSearchQuery,
  11                 faviconForUrl,
  12                 sanitizeExternalUrl,
  13                 type SearchResult,
  14                 type AgenticSection
  15         } from '$lib/utils';
  16
  17         interface Props {
  18                 section: AgenticSection;
  19                 open?: boolean;
  20                 isStreaming?: boolean;
  21                 onToggle?: () => void;
  22         }
  23
  24         let { section, open = $bindable(false), isStreaming = false, onToggle }: Props = $props();
  25
  26         const isPending = $derived(section.type === AgenticSectionType.TOOL_CALL_PENDING);
  27         const isStreamingCall = $derived(section.type === AgenticSectionType.TOOL_CALL_STREAMING);
  28         const showSpinner = $derived(isPending || (isStreamingCall && isStreaming));
  29
  30         const results = $derived(extractSearchResults(section.toolResult));
  31         const query = $derived(extractSearchQuery(section.toolArgs));
  32
  33         // Same icon-resolution chain as ChatMessageToolCallBlockDefault so
  34         // MCP-server branding is consistent across both views. Spinner wins
  35         // while the call is in flight so the user sees execution status.
  36         const iconUrl = $derived(showSpinner ? null : mcpStore.getServerFaviconForTool(section.toolName));
  37         const icon = $derived(showSpinner ? Loader2 : undefined);
  38         const iconClass = $derived(showSpinner ? ICON_CLASS_SPIN : ICON_CLASS_DEFAULT);
  39
  40         // Verb reflects state: "Searching" while the call is in flight, "Searched"
  41         // once results (or a definitive empty response) have arrived. Lets the
  42         // heading read as a live progress indicator rather than a completed
  43         // retrospective.
  44         const title = $derived.by(() => {
  45                 const verb = showSpinner ? 'Searching' : 'Searched';
  46                 return query ? `${verb} web for "${query}"` : `${verb} web`;
  47         });
  48
  49         function hideBrokenIcon(event: Event) {
  50                 (event.currentTarget as HTMLImageElement).style.display = 'none';
  51         }
  52
  53         function formatPublishDate(iso: string | undefined): string | null {
  54                 if (!iso) return null;
  55                 try {
  56                         const date = new Date(iso);
  57                         if (Number.isNaN(date.getTime())) return iso;
  58                         return date.toLocaleDateString(undefined, {
  59                                 year: 'numeric',
  60                                 month: 'short',
  61                                 day: 'numeric'
  62                         });
  63                 } catch {
  64                         return iso;
  65                 }
  66         }
  67
  68         function hostFor(url: string): string | null {
  69                 try {
  70                         return new URL(url).host;
  71                 } catch {
  72                         return null;
  73                 }
  74         }
  75
  76         function hasDetails(result: SearchResult): boolean {
  77                 return Boolean(result.highlights || result.published || result.author);
  78         }
  79 </script>
  80
  81 {#snippet pill(result: SearchResult)}
  82         {@const faviconUrl = faviconForUrl(result.url)}
  83         {@const safeUrl = sanitizeExternalUrl(result.url)}
  84         {@const showHoverCard = safeUrl !== null && hasDetails(result)}
  85         {#if safeUrl}
  86                 <HoverCard.Root openDelay={150} closeDelay={100}>
  87                         <HoverCard.Trigger
  88                                 href={safeUrl}
  89                                 target="_blank"
  90                                 rel="noopener noreferrer"
  91                                 class="hover:bg-muted/80 focus-visible:ring-ring inline-flex max-w-full items-center gap-1.5 rounded-full border bg-muted px-2.5 py-1 text-xs transition-colors outline-none focus-visible:ring-2"
  92                         >
  93                                 {#if faviconUrl}
  94                                         <img
  95                                                 src={faviconUrl}
  96                                                 alt=""
  97                                                 class="h-3 w-3 shrink-0 rounded-sm"
  98                                                 onerror={hideBrokenIcon}
  99                                         />
 100                                 {:else}
 101                                         <Globe class="text-muted-foreground/70 h-3 w-3 shrink-0" />
 102                                 {/if}
 103                                 <span class="truncate font-medium text-foreground/80">{result.title}</span>
 104                         </HoverCard.Trigger>
 105                         {#if showHoverCard}
 106                                 {@const publishDate = formatPublishDate(result.published)}
 107                                 {@const host = hostFor(safeUrl)}
 108                                 <HoverCard.Content
 109                                         side="top"
 110                                         align="start"
 111                                         sideOffset={6}
 112                                         class="bg-popover text-popover-foreground z-50 w-80 max-w-[90vw] rounded-lg border p-0 shadow-lg"
 113                                 >
 114                                         <div class="flex flex-col gap-2 p-3">
 115                                                 <a
 116                                                         href={safeUrl}
 117                                                         target="_blank"
 118                                                         rel="noopener noreferrer"
 119                                                         class="line-clamp-3 text-sm font-medium leading-snug hover:underline"
 120                                                         >{result.title}</a
 121                                                 >
 122                                                 {#if publishDate || result.author}
 123                                                         <div class="text-muted-foreground flex items-center gap-1.5 text-[11px]">
 124                                                                 {#if publishDate}
 125                                                                         <span>{publishDate}</span>
 126                                                                 {/if}
 127                                                                 {#if publishDate && result.author}
 128                                                                         <span class="opacity-50">&middot;</span>
 129                                                                 {/if}
 130                                                                 {#if result.author}
 131                                                                         <span class="truncate">{result.author}</span>
 132                                                                 {/if}
 133                                                         </div>
 134                                                 {/if}
 135                                                 {#if result.highlights}
 136                                                         <p
 137                                                                 class="text-popover-foreground/85 line-clamp-5 text-xs leading-relaxed whitespace-pre-line"
 138                                                         >
 139                                                                 {result.highlights}
 140                                                         </p>
 141                                                 {/if}
 142                                                 {#if host}
 143                                                         <div class="text-muted-foreground/80 truncate text-[11px]">{host}</div>
 144                                                 {/if}
 145                                         </div>
 146                                 </HoverCard.Content>
 147                         {/if}
 148                 </HoverCard.Root>
 149         {/if}
 150 {/snippet}
 151
 152 <CollapsibleContentBlock {open} class="my-2" {icon} {iconClass} {iconUrl} {title} {onToggle}>
 153         {#if results.length > 0}
 154                 <div class="flex flex-wrap items-center gap-2 pb-1">
 155                         {#each results as result (result.url)}
 156                                 {@render pill(result)}
 157                         {/each}
 158                 </div>
 159         {:else if showSpinner}
 160                 <div class="text-muted-foreground/70 flex items-center gap-2 py-1 text-xs italic">
 161                         <Loader2 class="h-3 w-3 animate-spin" />
 162                         <span>Searching...</span>
 163                 </div>
 164         {:else}
 165                 <div class="text-muted-foreground/70 py-1 text-xs italic">No results</div>
 166         {/if}
 167 </CollapsibleContentBlock>