Add personas stuffs

src/lib/chat/triggerAiCall.ts

@@ -1,5 +1,6 @@
 import type { ChatMessage, TokenUsage } from '$lib/helpers/types';
 import { modelsState } from '$lib/state/models.svelte';
+import { DEFAULT_PERSONA, personasState } from '$lib/state/personas.svelte';
 import { token } from '$lib/state/token.svelte';
 import type { Edge, Node } from '@xyflow/svelte';
 
@@ -90,6 +91,11 @@ export async function triggerAiCall(ctx: TriggerAiCallContext): Promise<void> {
 					model,
 					nodeData?.imageData as string | null
 				);
+				const selectedPersona =
+					personasState.selectedPersona === DEFAULT_PERSONA.id
+						? null
+						: personasState.personas.find((p) => p.id === personasState.selectedPersona);
+
 				const response = await fetch('/api', {
 					method: 'POST',
 					body: JSON.stringify({
@@ -97,6 +103,7 @@ export async function triggerAiCall(ctx: TriggerAiCallContext): Promise<void> {
 						provider: modelSettings?.provider ?? 'preferred',
 						messages: formattedMessages,
 						billingTo: billingOption,
+						...(selectedPersona ? { persona: selectedPersona } : {}),
 						...(modelSettings
 							? {
 									options: {

src/lib/components/flow/actions/PanelRightActions.svelte

@@ -19,6 +19,7 @@
 	import InstructionsModal from './InstructionsModal.svelte';
 	import { breakpointsState } from '$lib/state/breakpoints.svelte';
 	import * as Tooltip from '$lib/components/ui/tooltip';
+	import PersonasModal from './PersonasModal.svelte';
 </script>
 
 <Panel
@@ -38,6 +39,7 @@
 		</Tooltip.Trigger>
 		<Tooltip.Content>Get support or report an issue</Tooltip.Content>
 	</Tooltip.Root>
+	<PersonasModal />
 	<InstructionsModal />
 	<DropdownMenu.Root>
 		<DropdownMenu.Trigger>

src/lib/components/flow/actions/PersonasModal.svelte

@@ -0,0 +1,255 @@
+<script lang="ts">
+	import { ArrowLeft, Drama, Info, Pencil, Plus, Trash2 } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import * as Sheet from '$lib/components/ui/sheet/index.js';
+	import { breakpointsState } from '$lib/state/breakpoints.svelte';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import {
+		personasState,
+		addPersona,
+		deletePersona,
+		savePersona,
+		setSelectedPersona,
+		DEFAULT_PERSONA
+	} from '$lib/state/personas.svelte';
+	import { Input } from '$lib/components/ui/input';
+	import type { Persona } from '$lib/state/personas.svelte';
+
+	// bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-300
+	// bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300
+	// bg-teal-100 text-teal-700 dark:bg-teal-900/30 dark:text-teal-300
+	// bg-sky-100 text-sky-700 dark:bg-sky-900/30 dark:text-sky-300
+	// bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300
+	// bg-slate-100 text-slate-600 dark:bg-slate-700/50 dark:text-slate-300
+	const AVATAR_CLASSES = [
+		'bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-300',
+		'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
+		'bg-teal-100 text-teal-700 dark:bg-teal-900/30 dark:text-teal-300',
+		'bg-sky-100 text-sky-700 dark:bg-sky-900/30 dark:text-sky-300',
+		'bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300',
+		'bg-slate-100 text-slate-600 dark:bg-slate-700/50 dark:text-slate-300'
+	];
+
+	let open = $state(false);
+	let openFormPersona = $state.raw<string | null>(null);
+
+	let formName = $state('');
+	let formDescription = $state('');
+	let formInstructions = $state('');
+
+	function openNew() {
+		formName = '';
+		formDescription = '';
+		formInstructions = '';
+		openFormPersona = 'new';
+	}
+
+	function openEdit(persona: Persona) {
+		if (persona.id === DEFAULT_PERSONA.id) return;
+		formName = persona.name;
+		formDescription = persona.description ?? '';
+		formInstructions = persona.instructions;
+		openFormPersona = persona.id;
+	}
+
+	function handleSave() {
+		if (!formName.trim()) return;
+		if (openFormPersona === 'new') {
+			addPersona({
+				name: formName.trim(),
+				description: formDescription.trim(),
+				instructions: formInstructions.trim()
+			});
+		} else if (openFormPersona) {
+			savePersona(openFormPersona, {
+				id: openFormPersona,
+				name: formName.trim(),
+				description: formDescription.trim(),
+				instructions: formInstructions.trim()
+			});
+		}
+		openFormPersona = null;
+	}
+
+	function getInitials(name: string): string {
+		return name
+			.split(' ')
+			.slice(0, 2)
+			.map((w) => w[0]?.toUpperCase() ?? '')
+			.join('');
+	}
+
+	function getAvatarClass(name: string): string {
+		let hash = 0;
+		for (let i = 0; i < name.length; i++) {
+			hash = name.charCodeAt(i) + ((hash << 5) - hash);
+		}
+		return AVATAR_CLASSES[Math.abs(hash) % AVATAR_CLASSES.length];
+	}
+</script>
+
+<Sheet.Root bind:open>
+	<Sheet.Trigger class="">
+		<Tooltip.Root delayDuration={0}>
+			<Tooltip.Trigger>
+				<Button variant="outline" size={breakpointsState.isMobile ? 'icon-sm' : 'icon-lg'}>
+					<Drama class={breakpointsState.isMobile ? 'size-4' : 'size-5'} />
+				</Button>
+			</Tooltip.Trigger>
+			<Tooltip.Content>Use a custom persona</Tooltip.Content>
+		</Tooltip.Root>
+	</Sheet.Trigger>
+
+	<Sheet.Content class="max-w-2xl! gap-0! p-0!">
+		<Sheet.Header class="mb-0 gap-1! rounded-none border-b p-5">
+			<Sheet.Title class="flex items-center gap-2">
+				<Drama class="size-5" />
+				Personas Manager
+			</Sheet.Title>
+			<Sheet.Description>Use a custom persona to customize the model's behavior.</Sheet.Description>
+		</Sheet.Header>
+
+		<div class="flex items-center gap-2 bg-input p-3 text-xs text-muted-foreground">
+			<Info class="size-4 shrink-0" />
+			<p>
+				Your custom personas are stored in your browser's local storage. <br />
+				Meaning, they are not shared with anyone else and are only available on this device.
+			</p>
+		</div>
+
+		{#if typeof openFormPersona === 'string'}
+			<div class="flex items-center gap-3 border-b px-5 py-3">
+				<Button variant="ghost" size="icon-sm" onclick={() => (openFormPersona = null)}>
+					<ArrowLeft class="size-4" />
+				</Button>
+				<span class="text-sm font-medium">
+					{openFormPersona === 'new' ? 'New Persona' : 'Edit Persona'}
+				</span>
+			</div>
+
+			<form
+				onsubmit={(e) => {
+					e.preventDefault();
+					handleSave();
+				}}
+				class="flex flex-col gap-5 overflow-y-auto p-5"
+			>
+				<div class="flex flex-col gap-1.5">
+					<label for="persona-name" class="text-sm font-medium">Name</label>
+					<Input
+						id="persona-name"
+						bind:value={formName}
+						placeholder="e.g. Code Reviewer"
+						required
+					/>
+				</div>
+
+				<div class="flex flex-col gap-1.5">
+					<label for="persona-description" class="text-sm font-medium">
+						Description
+						<span class="ml-1 font-normal text-muted-foreground">(optional)</span>
+					</label>
+					<Input
+						id="persona-description"
+						bind:value={formDescription}
+						placeholder="A brief summary of what this persona does"
+					/>
+				</div>
+
+				<div class="flex flex-col gap-1.5">
+					<label for="persona-instructions" class="text-sm font-medium">Instructions</label>
+					<textarea
+						id="persona-instructions"
+						bind:value={formInstructions}
+						placeholder="You are a helpful code reviewer. You provide concise, actionable feedback..."
+						rows={7}
+						class="flex w-full resize-none rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs ring-offset-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30"
+					></textarea>
+				</div>
+
+				<Button type="submit" disabled={!formName.trim()} class="self-end">Save Persona</Button>
+			</form>
+		{:else}
+			<section class="overflow-y-auto p-5">
+				<div class="grid grid-cols-3 gap-3">
+					<button
+						tabindex={-1}
+						class="flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border border-dashed border-border px-3 py-8 text-muted-foreground transition-all duration-200 hover:bg-accent"
+						onclick={openNew}
+					>
+						<Plus class="size-8" />
+						<span class="text-sm">New Persona</span>
+					</button>
+
+					{#each [DEFAULT_PERSONA, ...personasState.personas] as persona (persona.id)}
+						{@const isSelected = personasState.selectedPersona === persona.id}
+						<div
+							role="button"
+							tabindex={-1}
+							class="group relative flex cursor-pointer flex-col items-start rounded-xl border p-4 text-left transition-all duration-200 {isSelected
+								? 'border-indigo-500/20 bg-indigo-500/10'
+								: 'border-border hover:bg-accent '}"
+							onkeydown={(e) => {
+								if (e.key === 'Enter' || e.key === ' ') {
+									setSelectedPersona(persona.id);
+								}
+							}}
+							onclick={() => setSelectedPersona(persona.id)}
+						>
+							{#if isSelected}
+								<span class="absolute top-2.5 right-2.5 size-1.5 rounded-full bg-indigo-500"></span>
+							{/if}
+
+							<div class="mb-3 flex w-full items-start justify-between gap-2">
+								<div
+									class="flex size-10 shrink-0 items-center justify-center rounded-full {persona.avatar
+										? 'text-lg'
+										: 'text-sm'} font-semibold {getAvatarClass(persona.name)}"
+								>
+									{persona.avatar ?? getInitials(persona.name)}
+								</div>
+								{#if persona.id !== DEFAULT_PERSONA.id}
+									<div
+										class="flex items-center justify-end gap-0 opacity-0 transition-opacity group-hover:opacity-100"
+									>
+										<Button
+											variant="ghost"
+											onclick={(e) => {
+												e.stopPropagation();
+												openEdit(persona);
+											}}
+											tabindex={-1}
+											size="icon-sm"
+											class="hover:text-blue-500!"
+										>
+											<Pencil class="size-3.5" />
+										</Button>
+										<Button
+											variant="ghost"
+											tabindex={-1}
+											onclick={(e) => {
+												e.stopPropagation();
+												if (confirm('Are you sure you want to delete this persona?')) {
+													deletePersona(persona.id);
+												}
+											}}
+											size="icon-sm"
+											class="hover:text-destructive!"
+										>
+											<Trash2 class="size-3.5" />
+										</Button>
+									</div>
+								{/if}
+							</div>
+
+							<p class="text-sm leading-snug font-medium">{persona.name}</p>
+							<p class="mt-1 line-clamp-2 text-xs text-muted-foreground">
+								{persona.description ?? 'No description'}
+							</p>
+						</div>
+					{/each}
+				</div>
+			</section>
+		{/if}
+	</Sheet.Content>
+</Sheet.Root>

src/lib/components/model/ComboBoxModels.svelte

@@ -7,6 +7,7 @@
 	import { MAX_TRENDING_MODELS } from '$lib';
 	import Spinner from '../loading/Spinner.svelte';
 	import ModelImageInput from './ModelImageInput.svelte';
+	import { mode } from 'mode-watcher';
 
 	interface Props {
 		onSelect?: (model: string) => void;
@@ -30,7 +31,7 @@
 </script>
 
 <Button
-	variant="transparent"
+	variant={mode.current === 'dark' ? 'secondary' : 'outline'}
 	size="icon-sm"
 	class="!shadow-none!"
 	onclick={() => {

src/lib/state/personas.svelte.ts

@@ -0,0 +1,74 @@
+const STORAGE_KEY = 'hf-playground-personas';
+const STORAGE_KEY_SELECTED_PERSONA = 'hf-playground-selected-persona';
+
+export interface Persona {
+	id: string;
+	name: string;
+	avatar?: string;
+	description?: string;
+	instructions: string;
+}
+
+export const DEFAULT_PERSONA: Persona = {
+	id: 'default',
+	name: 'Assistant',
+	avatar: '🤖',
+	description: 'A helpful assistant',
+	instructions: 'You are a helpful assistant. You are very helpful and friendly.'
+};
+
+export function setSelectedPersona(personaId: string) {
+	localStorage.setItem(STORAGE_KEY_SELECTED_PERSONA, personaId);
+	personasState.selectedPersona = personaId;
+}
+
+function saveStoredPersona(datas: Persona[]) {
+	if (typeof window === 'undefined') return;
+	try {
+		localStorage.setItem(STORAGE_KEY, JSON.stringify(datas));
+	} catch {
+		// ignore
+	}
+}
+
+export function addPersona(persona: Omit<Persona, 'id'>) {
+	const newPersona: Persona = { ...persona, id: crypto.randomUUID() };
+	personasState.personas = [...personasState.personas, newPersona];
+	saveStoredPersona(personasState.personas);
+}
+
+export function savePersona(personaId: string, datas: Persona) {
+	personasState.personas = personasState.personas.map((m) =>
+		m.id === personaId ? { ...m, ...datas } : m
+	);
+	saveStoredPersona(personasState.personas);
+}
+
+export function deletePersona(personaId: string) {
+	personasState.personas = personasState.personas.filter((p) => p.id !== personaId);
+	saveStoredPersona(personasState.personas);
+}
+
+export const personasState = $state({
+	personas: [] as Persona[],
+	selectedPersona: 'default' as string,
+	loading: true
+});
+
+export async function fetchPersonas() {
+	personasState.loading = true;
+
+	try {
+		const personas = localStorage.getItem(STORAGE_KEY);
+		const selectedPersona = localStorage.getItem(STORAGE_KEY_SELECTED_PERSONA);
+		if (selectedPersona) {
+			personasState.selectedPersona = selectedPersona;
+		}
+		if (!personas) return;
+		personasState.personas = JSON.parse(personas) as Persona[];
+	} catch {
+		personasState.personas = [];
+	} finally {
+		personasState.loading = false;
+	}
+}

src/routes/+layout.svelte

@@ -9,6 +9,7 @@
 	import { initAuth } from '$lib/state/auth.svelte';
 	import SigninModal from '$lib/components/auth/SigninModal.svelte';
 	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
+	import { fetchPersonas } from '$lib/state/personas.svelte';
 	interface Props {
 		children?: import('svelte').Snippet;
 	}
@@ -16,6 +17,7 @@
 	onMount(() => {
 		initAuth();
 		fetchModels();
+		fetchPersonas();
 		handleBreakpoints();
 		window.addEventListener('resize', handleBreakpoints);
 		return () => {

src/routes/api/+server.ts

@@ -1,5 +1,6 @@
 import { json, type RequestEvent } from '@sveltejs/kit';
 import { InferenceClient } from '@huggingface/inference';
+import { DEFAULT_PERSONA } from '$lib/state/personas.svelte';
 
 export async function POST({ request }: RequestEvent) {
 	const {
@@ -7,7 +8,8 @@ export async function POST({ request }: RequestEvent) {
 		messages,
 		options,
 		provider = 'preferred',
-		billingTo = 'personal'
+		billingTo = 'personal',
+		persona = DEFAULT_PERSONA
 	} = await request.json();
 	const token = request.headers.get('Authorization')?.split(' ')[1];
 
@@ -36,8 +38,7 @@ export async function POST({ request }: RequestEvent) {
 				messages: [
 					{
 						role: 'system',
-						content:
-							"You are a helpful assistant. You are very helpful and friendly. Use markdown to format your responses, but don't include array start and end markers."
+						content: `Your name is ${persona.name}.\n${persona.instructions} \n\nUse markdown to format your responses, but don't include array start and end markers.`
 					},
 					...(messages ?? [])
 				]