ui for persona

src/lib/components/chat/Assistant.svelte

@@ -17,7 +17,7 @@
 	import { Button } from '$lib/components/ui/button';
 	import Message from './Message.svelte';
 	import Spinner from '$lib/components/loading/Spinner.svelte';
-	import { formatUsageCost, getProviderName } from '$lib';
+	import { formatUsageCost, getAvatarClass, getProviderName } from '$lib';
 	import { modelsState } from '$lib/state/models.svelte';
 	import ListModels from '$lib/components/model/ListModels.svelte';
 	import { DEFAULT_PERSONA, personasState } from '$lib/state/personas.svelte';
@@ -35,9 +35,9 @@
 	let loading = $derived((nodeData.current?.data.loading as boolean) ?? false);
 	let usage = $derived((nodeData.current?.data.usage as TokenUsage) ?? null);
 	let persona = $derived(
-		nodeData.current?.data.persone !== DEFAULT_PERSONA.id
-			? personasState.personas.find((p) => p.id === nodeData.current?.data.persona)
-			: null
+		nodeData.current?.data.persona === DEFAULT_PERSONA.id
+			? null
+			: personasState.personas.find((p) => p.id === nodeData.current?.data.persona)
 	);
 
 	let message = $derived(
@@ -157,11 +157,11 @@
 				</div>
 				{#if persona}
 					<div
-						class="inline-flex max-w-max items-center gap-0.5 rounded-md bg-accent px-2 py-1 text-xs text-muted-foreground"
+						class="inline-flex max-w-max items-center gap-1 rounded-md px-2 py-1 text-xs {getAvatarClass(
+							persona.name
+						)}"
 					>
-						<span class="flex size-4 items-center justify-center rounded-full bg-muted">
-							<Drama class="size-3" />
-						</span>
+						<Drama class="size-3" />
 						{persona.name}
 					</div>
 				{/if}

src/lib/components/chat/Welcome.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { useNodes, useNodesData, type NodeProps } from '@xyflow/svelte';
 	import { fly } from 'svelte/transition';
 
 	import HFLogo from '$lib/assets/hf-logo.svg';

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

@@ -14,6 +14,7 @@
 	} from '$lib/state/personas.svelte';
 	import { Input } from '$lib/components/ui/input';
 	import type { Persona } from '$lib/state/personas.svelte';
+	import { getAvatarClass, getInitials } from '$lib';
 
 	// 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
@@ -21,14 +22,6 @@
 	// 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);
@@ -70,22 +63,6 @@
 		}
 		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>

src/lib/index.ts

@@ -33,3 +33,28 @@ export function getProviderName(provider: string) {
 	};
 	return providersMap[provider as keyof typeof providersMap] ?? provider;
 }
+
+export function getInitials(name: string): string {
+	return name
+		.split(' ')
+		.slice(0, 2)
+		.map((w) => w[0]?.toUpperCase() ?? '')
+		.join('');
+}
+
+export 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];
+}
+
+export 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'
+];