hello world with system prompt

src/lib/JsonEditor/JsonEditor.svelte

@@ -6,9 +6,13 @@
 	import { linter, lintGutter, type Diagnostic } from '@codemirror/lint';
 	import LineWrapButton from '$lib/LineWrapButton/LineWrapButton.svelte';
 	import JSON5 from 'json5';
+	import type { FormattedChatTemplate } from '../ChatTemplateViewer/types';
+	import { getExampleHelloWorld } from '$lib/example-inputs/helloWorld';
+	import { onMount } from 'svelte';
 
 	export let content: Record<string, unknown> = {};
 	export let error = '';
+	export let selectedTemplate: FormattedChatTemplate | undefined = undefined;
 
 	let value = JSON5.stringify(content, null, 2);
 
@@ -98,6 +102,17 @@
 			return diagnostics;
 		};
 	}
+
+	onMount(() => {
+		if (selectedTemplate) {
+			console.log('or here');
+			const exampleHelloWorld = getExampleHelloWorld(selectedTemplate.template);
+			if (exampleHelloWorld) {
+				content = exampleHelloWorld;
+				value = JSON5.stringify(content, null, 2);
+			}
+		}
+	});
 </script>
 
 <div class="h-full overflow-scroll bg-white dark:bg-gray-900">

src/lib/example-inputs/helloWorld.ts

@@ -0,0 +1,58 @@
+import { Template } from '@huggingface/jinja';
+
+const variations = {
+	variation1_with_system_prompt: {
+		description: 'Variation with system prompt',
+		example: {
+			messages: [
+				{
+					role: 'system',
+					content: 'You are a helpful assistant.'
+				},
+				{
+					role: 'user',
+					content: 'Hello, how are you?'
+				},
+				{
+					role: 'assistant',
+					content: "I'm doing great. How can I help you today?"
+				},
+				{
+					role: 'user',
+					content: 'Can you tell me a joke?'
+				}
+			],
+			add_generation_prompt: true
+		}
+	},
+	variation2_without_system_prompt: {
+		description: 'Variation without system prompt',
+		example: {
+			messages: [
+				{
+					role: 'user',
+					content: 'Hello, how are you?'
+				},
+				{
+					role: 'assistant',
+					content: "I'm doing great. How can I help you today?"
+				},
+				{
+					role: 'user',
+					content: 'Can you tell me a joke?'
+				}
+			],
+			add_generation_prompt: true
+		}
+	}
+};
+
+export function getExampleHelloWorld(templateStr: string): Record<string, unknown> | undefined {
+	const template = new Template(templateStr);
+	const variationSystemPrompt = variations.variation1_with_system_prompt.example;
+	const variationSystemPromptRendered = template.render(variationSystemPrompt);
+	if (variationSystemPromptRendered.includes('You are a helpful assistant.')) {
+		return variations.variation1_with_system_prompt.example;
+	}
+	return variations.variation2_without_system_prompt.example;
+}

src/routes/+page.svelte

@@ -254,10 +254,12 @@
 		class="relative flex h-full flex-col bg-gray-100"
 		style="width: {100 - leftWidth}%"
 	>
-		<div class="w-full" style="height: {topHeight}%">
-			<!-- Right top pane -->
-			<JsonEditor bind:error bind:content={input} />
-		</div>
+		{#key `${modelId}-${selectedTemplate?.name}`}
+			<div class="w-full" style="height: {topHeight}%">
+				<!-- Right top pane -->
+				<JsonEditor bind:error bind:content={input} bind:selectedTemplate />
+			</div>
+		{/key}
 
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div