dispaly persona

src/lib/components/chat/Assistant.svelte

@@ -10,7 +10,7 @@
 		type Edge,
 		type Node
 	} from '@xyflow/svelte';
-	import { MessageCirclePlus } from '@lucide/svelte';
+	import { Drama, MessageCirclePlus } from '@lucide/svelte';
 	import { mode } from 'mode-watcher';
 
 	import type { ChatMessage, TokenUsage } from '$lib/helpers/types';
@@ -20,6 +20,7 @@
 	import { formatUsageCost, 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';
 
 	let { id }: NodeProps = $props();
 
@@ -33,6 +34,12 @@
 	let messages = $derived((nodeData.current?.data.messages as ChatMessage[]) ?? []);
 	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
+	);
+
 	let message = $derived(
 		nodeData.current?.data.content != null
 			? ({
@@ -148,6 +155,16 @@
 				<div class="flex flex-wrap items-center gap-1">
 					<ListModels selectedModels={[selectedModel]} showSelector={false} />
 				</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"
+					>
+						<span class="flex size-4 items-center justify-center rounded-full bg-muted">
+							<Drama class="size-3" />
+						</span>
+						{persona.name}
+					</div>
+				{/if}
 			</header>
 
 			{#if loading}

src/lib/components/chat/User.svelte

@@ -29,6 +29,7 @@
 	import { breakpointsState } from '$lib/state/breakpoints.svelte';
 	import { autosize } from '$lib/actions/autosize';
 	import { modelsState } from '$lib/state/models.svelte';
+	import { personasState } from '$lib/state/personas.svelte';
 
 	let { id }: NodeProps = $props();
 
@@ -124,6 +125,7 @@
 					selectedModel: m,
 					content: '',
 					loading: true,
+					persona: personasState.selectedPersona,
 					messages: newMessages
 				}
 			};