Hermes Agent
511793772a
Svelte 5 + shadcn-svelte + Tailwind CSS v4 chat interface for Hermes Agent with Monaco editor, file drag/drop, artifacts, image preview, and real session management. - SSE streaming via hermes CLI proxy - File upload + drag/drop with image preview - Code artifacts with Monaco editor - Markdown + highlight.js syntax highlighting - Full settings (model, provider, temp, system prompt) - 12 shadcn UI components - Dark/light theme
41 lines
1.2 KiB
Svelte
41 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { cn } from "$lib/utils";
|
|
import { cva, type VariantProps } from "class-variance-authority";
|
|
|
|
const badgeVariants = cva(
|
|
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
|
|
secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
|
|
outline: "text-foreground",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: "default",
|
|
},
|
|
}
|
|
);
|
|
|
|
type BadgeVariant = NonNullable<VariantProps<typeof badgeVariants>["variant"]>;
|
|
|
|
let {
|
|
class: className = "",
|
|
variant = "default" as BadgeVariant,
|
|
children,
|
|
...restProps
|
|
}: {
|
|
class?: string;
|
|
variant?: BadgeVariant;
|
|
children?: import("svelte").Snippet;
|
|
[key: string]: unknown;
|
|
} = $props();
|
|
</script>
|
|
|
|
<div class={cn(badgeVariants({ variant }), className)} {...restProps}>
|
|
{#if children}
|
|
{@render children()}
|
|
{/if}
|
|
</div> |