support system messages in code snippets

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -40,11 +40,6 @@
 	let waitForNonStreaming = true;
 
 	$: systemPromptSupported = isSystemPromptSupported(conversation.model);
-	$: {
-		if (!systemPromptSupported) {
-			conversation.systemMessage = { role: "system", content: "" };
-		}
-	}
 
 	function addMessage() {
 		conversation.messages = [
@@ -162,7 +157,8 @@
 				placeholder={systemPromptSupported
 					? "Enter a custom prompt"
 					: "System prompt is not supported with the chosen model."}
-				bind:value={conversation.systemMessage.content}
+				value={systemPromptSupported ? conversation.systemMessage.content : ""}
+				on:input={e => (conversation.systemMessage.content = e.currentTarget.value)}
 				class="absolute inset-x-0 bottom-0 h-full resize-none bg-transparent px-3 pt-10 text-sm outline-none"
 			></textarea>
 		</div>

src/lib/components/InferencePlayground/InferencePlaygroundCodeSnippets.svelte

@@ -8,6 +8,7 @@
 	import http from "highlight.js/lib/languages/http";
 
 	import IconCopyCode from "../Icons/IconCopyCode.svelte";
+	import { isSystemPromptSupported } from "./inferencePlaygroundUtils";
 
 	hljs.registerLanguage("javascript", javascript);
 	hljs.registerLanguage("python", python);
@@ -46,10 +47,17 @@
 
 	function getMessages() {
 		const placeholder = [{ role: "user", content: "Tell me a story" }];
-		let messages = conversation.messages;
+
+		let messages = [...conversation.messages];
 		if (messages.length === 1 && messages[0].role === "user" && !messages[0].content) {
 			messages = placeholder;
 		}
+
+		const { model, systemMessage } = conversation;
+		if (isSystemPromptSupported(model) && systemMessage.content?.length) {
+			messages.unshift(systemMessage);
+		}
+
 		return messages;
 	}