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

   1 <script lang="ts">
   2         import type { Component } from 'svelte';
   3         import { Button, type ButtonVariant } from '$lib/components/ui/button';
   4
   5         let {
   6                 title,
   7                 description,
   8                 IconComponent,
   9                 buttonText,
  10                 onclick,
  11                 titleClass,
  12                 buttonVariant,
  13                 buttonClass,
  14                 wrapperClass,
  15                 summary
  16         }: {
  17                 title: string;
  18                 description: string;
  19                 IconComponent: Component;
  20                 buttonText: string;
  21                 onclick: () => void;
  22                 titleClass?: string;
  23                 buttonVariant?: ButtonVariant;
  24                 buttonClass?: string;
  25                 wrapperClass?: string;
  26                 summary?: { show: boolean; verb: string; items: DatabaseConversation[] };
  27         } = $props();
  28
  29         let sectionButtonClass = $derived(buttonClass ?? 'justify-start justify-self-start md:w-auto');
  30         let sectionButtonVariant = $derived(buttonVariant ?? 'outline');
  31 </script>
  32
  33 <div class="grid gap-1 {wrapperClass ?? ''}">
  34         <h4 class="mt-0 mb-2 text-sm font-medium {titleClass ?? ''}">{title}</h4>
  35
  36         <p class="mb-4 text-sm text-muted-foreground">{description}</p>
  37
  38         <Button class={sectionButtonClass} {onclick} variant={sectionButtonVariant}>
  39                 <IconComponent class="mr-2 h-4 w-4" />
  40
  41                 {buttonText}
  42         </Button>
  43
  44         {#if summary && summary.show && summary.items.length > 0}
  45                 <div class="mt-4 grid overflow-x-auto rounded-lg border border-border/50 bg-muted/30 p-4">
  46                         <h5 class="mb-2 text-sm font-medium">
  47                                 {summary.verb}
  48                                 {summary.items.length} conversation{summary.items.length === 1 ? '' : 's'}
  49                         </h5>
  50
  51                         <ul class="space-y-1 text-sm text-muted-foreground">
  52                                 {#each summary.items.slice(0, 10) as conv (conv.id)}
  53                                         <li class="truncate">• {conv.name || 'Untitled conversation'}</li>
  54                                 {/each}
  55
  56                                 {#if summary.items.length > 10}
  57                                         <li class="italic">... and {summary.items.length - 10} more</li>
  58                                 {/if}
  59                         </ul>
  60                 </div>
  61         {/if}
  62 </div>