From bc60beb1a7b4114c64296c6310142b5c2e7f74da Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Mon, 5 Jan 2026 12:03:35 +0100
Subject: [PATCH] feat: Enable adding System Prompt per-chat

---
 .../app/chat/ChatForm/ChatForm.svelte         |  4 ++--
 .../ChatFormActionFileAttachments.svelte      | 24 +++++++++++++++++--
 .../ChatFormActions/ChatFormActions.svelte    |  3 ++-
 .../app/chat/ChatMessages/ChatMessage.svelte  | 17 +++++++++----
 .../app/chat/ChatScreen/ChatScreen.svelte     |  4 ++--
 .../webui/src/lib/stores/chat.svelte.ts       |  4 +---
 6 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte
index 6cdc05a970..7e469682c2 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte
@@ -33,7 +33,7 @@
 		onFileUpload?: (files: File[]) => void;
 		onSend?: (message: string, files?: ChatUploadedFile[]) => Promise<boolean>;
 		onStop?: () => void;
-		onSystemPromptAdd?: (draft: { message: string; files: ChatUploadedFile[] }) => void;
+		onSystemPromptAdd?: () => void;
 		showHelperText?: boolean;
 		uploadedFiles?: ChatUploadedFile[];
 	}
@@ -325,7 +325,7 @@
 			onFileUpload={handleFileUpload}
 			onMicClick={handleMicClick}
 			onStop={handleStop}
-			onSystemPromptClick={handleSystemPromptClick}
+			onSystemPromptClick={onSystemPromptAdd}
 		/>
 	</div>
 </form>
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionFileAttachments.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionFileAttachments.svelte
index 474693232a..a7abcba317 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionFileAttachments.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionFileAttachments.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Plus } from '@lucide/svelte';
+	import { Plus, MessageSquare } from '@lucide/svelte';
 	import { Button } from '$lib/components/ui/button';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import * as Tooltip from '$lib/components/ui/tooltip';
@@ -15,6 +15,7 @@
 		showMcpOption?: boolean;
 		onFileUpload?: (fileType?: FileTypeCategory) => void;
 		onMcpClick?: () => void;
+		onSystemPromptClick?: () => void;
 	}
 
 	let {
@@ -24,7 +25,8 @@
 		hasVisionModality = false,
 		showMcpOption = false,
 		onFileUpload,
-		onMcpClick
+		onMcpClick,
+		onSystemPromptClick
 	}: Props = $props();
 
 	const fileUploadTooltipText = 'Add files or MCP servers';
@@ -136,6 +138,24 @@
 					<span>MCP Servers</span>
 				</DropdownMenu.Item>
 			{/if}
+
+			<DropdownMenu.Separator />
+			<Tooltip.Root>
+				<Tooltip.Trigger class="w-full">
+					<DropdownMenu.Item
+						class="flex cursor-pointer items-center gap-2"
+						onclick={() => onSystemPromptClick?.()}
+					>
+						<MessageSquare class="h-4 w-4" />
+
+						<span>System Prompt</span>
+					</DropdownMenu.Item>
+				</Tooltip.Trigger>
+
+				<Tooltip.Content>
+					<p>Add a custom system message for this conversation</p>
+				</Tooltip.Content>
+			</Tooltip.Root>
 		</DropdownMenu.Content>
 	</DropdownMenu.Root>
 </div>
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte
index 43b5e9a717..a98df690e5 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte
@@ -169,7 +169,7 @@
 
 	let showMcpDialog = $state(false);
 
-
+	// MCP servers state (simplified - just need to check if any exist)
 	let mcpServers = $derived(parseMcpServerSettings(currentConfig.mcpServers));
 	let hasMcpServers = $derived(mcpServers.length > 0);
 </script>
@@ -183,6 +183,7 @@
 			showMcpOption={!hasMcpServers}
 			onMcpClick={() => (showMcpDialog = true)}
 			{onFileUpload}
+			{onSystemPromptClick}
 		/>
 
 		{#if hasMcpServers}
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte
index 4a6658e487..2b65ef09ca 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { base } from '$app/paths';
 	import {
 		chatStore,
 		pendingEditMessageId,
@@ -79,7 +78,17 @@
 		return null;
 	});
 
-	function handleCancelEdit() {
+	// Auto-start edit mode if this message is the pending edit target
+	$effect(() => {
+		const pendingId = pendingEditMessageId();
+
+		if (pendingId && pendingId === message.id && !isEditing) {
+			handleEdit();
+			clearPendingEditMessageId();
+		}
+	});
+
+	async function handleCancelEdit() {
 		isEditing = false;
 
 		// If canceling a new system message with placeholder content, remove it without deleting children
@@ -87,7 +96,7 @@
 			const conversationDeleted = await removeSystemPromptPlaceholder(message.id);
 
 			if (conversationDeleted) {
-				goto(`${base}/`);
+				goto('/');
 			}
 
 			return;
@@ -188,7 +197,7 @@
 				const conversationDeleted = await removeSystemPromptPlaceholder(message.id);
 				isEditing = false;
 				if (conversationDeleted) {
-					goto(`${base}/`);
+					goto('/');
 				}
 				return;
 			}
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
index a5450e6af8..948d991900 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
@@ -451,7 +451,7 @@
 					onFileUpload={handleFileUpload}
 					onSend={handleSendMessage}
 					onStop={() => chatStore.stopGeneration()}
-					onSystemPromptAdd={handleSystemPromptAdd}
+					onSystemPromptAdd={() => chatStore.addSystemPrompt()}
 					showHelperText={false}
 					bind:uploadedFiles
 				/>
@@ -511,7 +511,7 @@
 					onFileUpload={handleFileUpload}
 					onSend={handleSendMessage}
 					onStop={() => chatStore.stopGeneration()}
-					onSystemPromptAdd={handleSystemPromptAdd}
+					onSystemPromptAdd={() => chatStore.addSystemPrompt()}
 					showHelperText={true}
 					bind:uploadedFiles
 				/>
diff --git a/tools/server/webui/src/lib/stores/chat.svelte.ts b/tools/server/webui/src/lib/stores/chat.svelte.ts
index fc8d88cac3..ec04809cb1 100644
--- a/tools/server/webui/src/lib/stores/chat.svelte.ts
+++ b/tools/server/webui/src/lib/stores/chat.svelte.ts
@@ -17,6 +17,7 @@ import {
 import { SvelteMap } from 'svelte/reactivity';
 import { DEFAULT_CONTEXT } from '$lib/constants/default-context';
 import { getAgenticConfig } from '$lib/config/agentic';
+import { SYSTEM_MESSAGE_PLACEHOLDER } from '$lib/constants/ui';
 
 /**
  * chatStore - Active AI interaction and streaming state management
@@ -79,9 +80,6 @@ class ChatStore {
 	private isEditModeActive = $state(false);
 	private addFilesHandler: ((files: File[]) => void) | null = $state(null);
 	pendingEditMessageId = $state<string | null>(null);
-	// Draft preservation for navigation (e.g., when adding system prompt from welcome page)
-	private _pendingDraftMessage = $state<string>('');
-	private _pendingDraftFiles = $state<ChatUploadedFile[]>([]);
 
 	// ─────────────────────────────────────────────────────────────────────────────
 	// Loading State