ui: Clean up contexts, remove prop drilling from Chat Form Actions (#26951)

* refactor: Remove dead context for Chat Settings and create a new one for Chat Messages Actions

* refactor: Contexts & types

tools/ui/src/app.d.ts

@@ -32,8 +32,8 @@ import type {
 	ApiRouterModelsStatusResponse,
 	ApiRouterModelsUnloadRequest,
 	ApiRouterModelsUnloadResponse,
-	// Chat types
 	ChatAttachmentDisplayItem,
+	// Chat types
 	ChatMessagePromptProgress,
 	ChatMessageSiblingInfo,
 	ChatMessageTimings,

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte

@@ -15,37 +15,16 @@
 		ICON_CLASS_DEFAULT,
 		TOOLTIP_DELAY_DURATION
 	} from '$lib/constants';
+	import { getChatFormActionsContext } from '$lib/contexts';
 	import { useAttachmentMenu } from '$lib/hooks/use-attachment-menu.svelte';
 
 	interface Props {
 		class?: string;
-		disabled?: boolean;
-		hasAudioModality?: boolean;
-		hasVideoModality?: boolean;
-		hasVisionModality?: boolean;
-		hasMcpPromptsSupport?: boolean;
-		hasMcpResourcesSupport?: boolean;
-		onFileUpload?: () => void;
-		onSystemPromptClick?: () => void;
-		onMcpPromptClick?: () => void;
-		onMcpSettingsClick?: () => void;
-		onMcpResourcesClick?: () => void;
 	}
 
-	let {
+	let { class: className = '' }: Props = $props();
-		class: className = '',
+
-		disabled = false,
+	const chatFormActions = getChatFormActionsContext();
-		hasAudioModality = false,
-		hasMcpPromptsSupport = false,
-		hasMcpResourcesSupport = false,
-		hasVideoModality = false,
-		hasVisionModality = false,
-		onFileUpload,
-		onMcpPromptClick,
-		onMcpResourcesClick,
-		onMcpSettingsClick,
-		onSystemPromptClick
-	}: Props = $props();
 
 	let dropdownOpen = $state(false);
 	// The system message action moves focus to the message editor, so the menu
@@ -54,18 +33,23 @@
 
 	function handleMcpSettingsClick() {
 		dropdownOpen = false;
-		onMcpSettingsClick?.();
+		chatFormActions.onMcpSettingsClick?.();
 	}
 
 	const attachmentMenu = useAttachmentMenu(
 		() => ({
-			hasAudioModality,
+			hasAudioModality: chatFormActions.hasAudioModality,
-			hasMcpPromptsSupport,
+			hasMcpPromptsSupport: chatFormActions.hasMcpPromptsSupport,
-			hasMcpResourcesSupport,
+			hasMcpResourcesSupport: chatFormActions.hasMcpResourcesSupport,
-			hasVideoModality,
+			hasVideoModality: chatFormActions.hasVideoModality,
-			hasVisionModality
+			hasVisionModality: chatFormActions.hasVisionModality
+		}),
+		() => ({
+			onFileUpload: chatFormActions.onFileUpload,
+			onMcpPromptClick: chatFormActions.onMcpPromptClick,
+			onMcpResourcesClick: chatFormActions.onMcpResourcesClick,
+			onSystemPromptClick: chatFormActions.onSystemPromptClick
 		}),
-		() => ({ onFileUpload, onMcpPromptClick, onMcpResourcesClick, onSystemPromptClick }),
 		() => {
 			dropdownOpen = false;
 		}
@@ -85,7 +69,7 @@
 							buttonVariants({ variant: 'secondary' }),
 							'file-upload-button h-8 w-8 cursor-pointer rounded-full p-0'
 						)}
-						{disabled}
+						disabled={chatFormActions.disabled}
 					>
 						<span class="sr-only">{ATTACHMENT_TOOLTIP_TEXT}</span>
 
@@ -162,7 +146,7 @@
 				class="flex cursor-pointer items-center gap-2"
 				onclick={() => {
 					suppressCloseAutoFocus = true;
-					onSystemPromptClick?.();
+					chatFormActions.onSystemPromptClick?.();
 				}}
 			>
 				<MessageSquare class={ICON_CLASS_DEFAULT} />
@@ -174,12 +158,12 @@
 
 			<ChatFormActionAddMcpServersSubmenu onMcpSettingsClick={handleMcpSettingsClick} />
 
-			{#if hasMcpPromptsSupport}
+			{#if chatFormActions.hasMcpPromptsSupport}
 				<DropdownMenu.Separator />
 
 				<DropdownMenu.Item
 					class="flex cursor-pointer items-center gap-2"
-					onclick={onMcpPromptClick}
+					onclick={chatFormActions.onMcpPromptClick}
 				>
 					<Zap class={ICON_CLASS_DEFAULT} />
 
@@ -187,10 +171,10 @@
 				</DropdownMenu.Item>
 			{/if}
 
-			{#if hasMcpResourcesSupport}
+			{#if chatFormActions.hasMcpResourcesSupport}
 				<DropdownMenu.Item
 					class="flex cursor-pointer items-center gap-2"
-					onclick={onMcpResourcesClick}
+					onclick={chatFormActions.onMcpResourcesClick}
 				>
 					<FolderOpen class={ICON_CLASS_DEFAULT} />
 

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddSheet.svelte

@@ -19,6 +19,7 @@
 		ICON_CLASS_DEFAULT,
 		TOOLTIP_DELAY_DURATION
 	} from '$lib/constants';
+	import { getChatFormActionsContext } from '$lib/contexts';
 	import { HealthCheckStatus } from '$lib/enums';
 	import { AttachmentAction } from '$lib/enums/attachment.enums';
 	import { useAttachmentMenu } from '$lib/hooks/use-attachment-menu.svelte';
@@ -29,33 +30,12 @@
 
 	interface Props {
 		class?: string;
-		disabled?: boolean;
-		hasAudioModality?: boolean;
-		hasVideoModality?: boolean;
-		hasVisionModality?: boolean;
-		hasMcpPromptsSupport?: boolean;
-		hasMcpResourcesSupport?: boolean;
-		onFileUpload?: () => void;
-		onSystemPromptClick?: () => void;
-		onMcpPromptClick?: () => void;
-		onMcpResourcesClick?: () => void;
 		trigger: Snippet<[{ disabled: boolean; onclick?: () => void }]>;
 	}
 
-	let {
+	let { class: className = '', trigger }: Props = $props();
-		class: className = '',
+
-		disabled = false,
+	const chatFormActions = getChatFormActionsContext();
-		hasAudioModality = false,
-		hasMcpPromptsSupport = false,
-		hasMcpResourcesSupport = false,
-		hasVideoModality = false,
-		hasVisionModality = false,
-		onFileUpload,
-		onMcpPromptClick,
-		onMcpResourcesClick,
-		onSystemPromptClick,
-		trigger
-	}: Props = $props();
 
 	let sheetOpen = $state(false);
 	let reasoningExpanded = $state(false);
@@ -65,13 +45,18 @@
 
 	const attachmentMenu = useAttachmentMenu(
 		() => ({
-			hasAudioModality,
+			hasAudioModality: chatFormActions.hasAudioModality,
-			hasMcpPromptsSupport,
+			hasMcpPromptsSupport: chatFormActions.hasMcpPromptsSupport,
-			hasMcpResourcesSupport,
+			hasMcpResourcesSupport: chatFormActions.hasMcpResourcesSupport,
-			hasVideoModality,
+			hasVideoModality: chatFormActions.hasVideoModality,
-			hasVisionModality
+			hasVisionModality: chatFormActions.hasVisionModality
+		}),
+		() => ({
+			onFileUpload: chatFormActions.onFileUpload,
+			onMcpPromptClick: chatFormActions.onMcpPromptClick,
+			onMcpResourcesClick: chatFormActions.onMcpResourcesClick,
+			onSystemPromptClick: chatFormActions.onSystemPromptClick
 		}),
-		() => ({ onFileUpload, onMcpPromptClick, onMcpResourcesClick, onSystemPromptClick }),
 		() => {
 			sheetOpen = false;
 		}
@@ -91,7 +76,7 @@
 
 <div class="flex items-center gap-1 {className}">
 	<Sheet.Root bind:open={sheetOpen}>
-		{@render trigger({ disabled, onclick: () => (sheetOpen = true) })}
+		{@render trigger({ disabled: chatFormActions.disabled, onclick: () => (sheetOpen = true) })}
 
 		<Sheet.Content side="bottom" class="max-h-[85vh] gap-0 overflow-y-auto">
 			<Sheet.Header>
@@ -350,7 +335,7 @@
 					<span>System Message</span>
 				</button>
 
-				{#if hasMcpPromptsSupport}
+				{#if chatFormActions.hasMcpPromptsSupport}
 					<button
 						type="button"
 						class={sheetItemClass}
@@ -362,7 +347,7 @@
 					</button>
 				{/if}
 
-				{#if hasMcpResourcesSupport}
+				{#if chatFormActions.hasMcpResourcesSupport}
 					<button
 						type="button"
 						class={sheetItemClass}

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionsAdd.svelte

@@ -3,65 +3,14 @@
 	import ChatFormActionAddDropdown from './ChatFormActionAddDropdown.svelte';
 	import ChatFormActionAddSheet from './ChatFormActionAddSheet.svelte';
 	import { isMobile } from '$lib/stores';
-
-	interface Props {
-		disabled?: boolean;
-		hasAudioModality?: boolean;
-		hasVideoModality?: boolean;
-		hasMcpPromptsSupport?: boolean;
-		hasMcpResourcesSupport?: boolean;
-		hasVisionModality?: boolean;
-		onFileUpload?: () => void;
-		onMcpPromptClick?: () => void;
-		onMcpResourcesClick?: () => void;
-		onMcpSettingsClick?: () => void;
-		onSystemPromptClick?: () => void;
-	}
-
-	let {
-		disabled = false,
-		hasAudioModality = false,
-		hasMcpPromptsSupport = false,
-		hasMcpResourcesSupport = false,
-		hasVideoModality = false,
-		hasVisionModality = false,
-		onFileUpload,
-		onMcpPromptClick,
-		onMcpResourcesClick,
-		onMcpSettingsClick,
-		onSystemPromptClick
-	}: Props = $props();
 </script>
 
 {#if isMobile.current}
-	<ChatFormActionAddSheet
+	<ChatFormActionAddSheet>
-		{disabled}
-		{hasAudioModality}
-		{hasVideoModality}
-		{hasVisionModality}
-		{hasMcpPromptsSupport}
-		{hasMcpResourcesSupport}
-		{onFileUpload}
-		{onSystemPromptClick}
-		{onMcpPromptClick}
-		{onMcpResourcesClick}
-	>
 		{#snippet trigger({ disabled, onclick })}
 			<ChatFormActionAddButton {disabled} {onclick} />
 		{/snippet}
 	</ChatFormActionAddSheet>
 {:else}
-	<ChatFormActionAddDropdown
+	<ChatFormActionAddDropdown />
-		{disabled}
-		{hasAudioModality}
-		{hasVideoModality}
-		{hasVisionModality}
-		{hasMcpPromptsSupport}
-		{hasMcpResourcesSupport}
-		{onFileUpload}
-		{onMcpPromptClick}
-		{onMcpResourcesClick}
-		{onMcpSettingsClick}
-		{onSystemPromptClick}
-	/>
 {/if}

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte

@@ -11,6 +11,7 @@
 	} from '$lib/components/app';
 	import { Button } from '$lib/components/ui/button';
 	import { ICON_CLASS_DEFAULT, ROUTES } from '$lib/constants';
+	import { setChatFormActionsContext } from '$lib/contexts';
 	import { FileTypeCategory, MessageRole } from '$lib/enums';
 	import { ChatService } from '$lib/services';
 	import { chatStore, conversationsStore, mcpStore, settingsStore } from '$lib/stores';
@@ -132,6 +133,42 @@
 
 		return livePromptTokens > 0 || liveOutputTokens > 0;
 	});
+
+	setChatFormActionsContext({
+		get disabled() {
+			return disabled;
+		},
+		get hasAudioModality() {
+			return hasAudioModality;
+		},
+		get hasMcpPromptsSupport() {
+			return hasMcpPromptsSupport;
+		},
+		get hasMcpResourcesSupport() {
+			return hasMcpResourcesSupport;
+		},
+		get hasVideoModality() {
+			return hasVideoModality;
+		},
+		get hasVisionModality() {
+			return hasVisionModality;
+		},
+		get onFileUpload() {
+			return onFileUpload;
+		},
+		get onMcpPromptClick() {
+			return onMcpPromptClick;
+		},
+		get onMcpResourcesClick() {
+			return onMcpResourcesClick;
+		},
+		get onMcpSettingsClick() {
+			return () => goto(ROUTES.MCP_SERVERS);
+		},
+		get onSystemPromptClick() {
+			return onSystemPromptClick;
+		}
+	});
 </script>
 
 <div
@@ -140,19 +177,7 @@
 >
 	{#if showAddButton}
 		<div class="mr-auto flex items-center gap-2">
-			<ChatFormActionsAdd
+			<ChatFormActionsAdd />
-				{disabled}
-				{hasAudioModality}
-				{hasVideoModality}
-				{hasVisionModality}
-				{hasMcpPromptsSupport}
-				{hasMcpResourcesSupport}
-				{onFileUpload}
-				{onSystemPromptClick}
-				{onMcpPromptClick}
-				{onMcpResourcesClick}
-				onMcpSettingsClick={() => goto(ROUTES.MCP_SERVERS)}
-			/>
 		</div>
 	{/if}
 

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessage.svelte

@@ -8,16 +8,21 @@
 		ChatMessageUser
 	} from '$lib/components/app/chat';
 	import { REASONING_TAGS, ROUTES, SYSTEM_MESSAGE_PLACEHOLDER } from '$lib/constants';
-	import { getChatActionsContext, setMessageEditContext } from '$lib/contexts';
+	import { setChatMessageActionsContext, setChatMessageEditContext } from '$lib/contexts';
 	import { AgenticSectionType, AttachmentType, MessageRole } from '$lib/enums';
 	import { DatabaseService } from '$lib/services/database.service';
 	import { chatStore, conversationsStore, isMobile } from '$lib/stores';
-	import type { DatabaseMessageExtraMcpPrompt } from '$lib/types';
+	import type {
+		ChatMessageActions,
+		ChatMessageDeletionInfo,
+		DatabaseMessageExtraMcpPrompt
+	} from '$lib/types';
 	import { deriveAgenticSections } from '$lib/utils';
 	import { parseFilesToMessageExtras } from '$lib/utils/browser-only';
 
 	interface Props {
 		class?: string;
+		chatActions: ChatMessageActions;
 		message: DatabaseMessage;
 		toolMessages?: DatabaseMessage[];
 		isLastAssistantMessage?: boolean;
@@ -27,6 +32,7 @@
 	}
 
 	let {
+		chatActions,
 		class: className = '',
 		isLastAssistantMessage = false,
 		isLastUserMessage = false,
@@ -36,14 +42,7 @@
 		toolMessages = []
 	}: Props = $props();
 
-	const chatActions = getChatActionsContext();
+	let deletionInfo = $state<ChatMessageDeletionInfo | null>(null);
-
-	let deletionInfo = $state<{
-		totalCount: number;
-		userMessages: number;
-		assistantMessages: number;
-		messageTypes: string[];
-	} | null>(null);
 	// The system message placeholder must never surface as editable content; keeping
 	// it in the derived (not just in handleEdit) guards against prop invalidation
 	// reverting the override while editing
@@ -112,7 +111,7 @@
 	let showSaveOnlyOption = $derived(message.role === MessageRole.USER);
 	let showBranchAfterEditOption = $derived(message.role === MessageRole.ASSISTANT);
 
-	setMessageEditContext({
+	setChatMessageEditContext({
 		cancel: handleCancelEdit,
 		get editedContent() {
 			return editedContent;
@@ -166,6 +165,30 @@
 		startEdit: handleEdit
 	});
 
+	setChatMessageActionsContext({
+		confirmDelete: handleConfirmDelete,
+		copy: handleCopy,
+		get deletionInfo() {
+			return deletionInfo;
+		},
+		get forkConversation() {
+			const isForkableUser = message.role === MessageRole.USER && !mcpPromptExtra;
+
+			return isForkableUser || message.role === MessageRole.ASSISTANT
+				? handleForkConversation
+				: undefined;
+		},
+		navigateToSibling: handleNavigateToSibling,
+		requestDelete: handleDelete,
+		setShowDeleteDialog: handleShowDeleteDialogChange,
+		get showDeleteDialog() {
+			return showDeleteDialog;
+		},
+		get siblingInfo() {
+			return siblingInfo;
+		}
+	});
+
 	let mcpPromptExtra = $derived.by(() => {
 		if (message.role !== MessageRole.USER) return null;
 
@@ -360,73 +383,22 @@
 
 <div class="chat-message" class:chat-message--synthetic={isSynthetic}>
 	{#if message.role === MessageRole.SYSTEM}
-		<ChatMessageSystem
+		<ChatMessageSystem bind:textareaElement class={className} {message} />
-			bind:textareaElement
-			class={className}
-			{deletionInfo}
-			{message}
-			onConfirmDelete={handleConfirmDelete}
-			onCopy={handleCopy}
-			onDelete={handleDelete}
-			onEdit={handleEdit}
-			onNavigateToSibling={handleNavigateToSibling}
-			onShowDeleteDialogChange={handleShowDeleteDialogChange}
-			{showDeleteDialog}
-			{siblingInfo}
-		/>
 	{:else if mcpPromptExtra}
-		<ChatMessageMcpPrompt
+		<ChatMessageMcpPrompt class={className} {message} mcpPrompt={mcpPromptExtra} />
-			class={className}
-			{deletionInfo}
-			{message}
-			mcpPrompt={mcpPromptExtra}
-			onConfirmDelete={handleConfirmDelete}
-			onCopy={handleCopy}
-			onDelete={handleDelete}
-			onEdit={handleEdit}
-			onNavigateToSibling={handleNavigateToSibling}
-			onShowDeleteDialogChange={handleShowDeleteDialogChange}
-			{showDeleteDialog}
-			{siblingInfo}
-		/>
 	{:else if isSynthetic}
 		<ChatMessageSynthetic {message} class={className} />
 	{:else if message.role === MessageRole.USER}
-		<ChatMessageUser
+		<ChatMessageUser class={className} {isLastUserMessage} {message} {nextAssistantMessage} />
-			class={className}
-			{deletionInfo}
-			{isLastUserMessage}
-			{message}
-			{nextAssistantMessage}
-			onConfirmDelete={handleConfirmDelete}
-			onCopy={handleCopy}
-			onDelete={handleDelete}
-			onEdit={handleEdit}
-			onForkConversation={handleForkConversation}
-			onNavigateToSibling={handleNavigateToSibling}
-			onShowDeleteDialogChange={handleShowDeleteDialogChange}
-			{showDeleteDialog}
-			{siblingInfo}
-		/>
 	{:else}
 		<ChatMessageAssistant
 			bind:textareaElement
 			class={className}
-			{deletionInfo}
 			{isLastAssistantMessage}
 			{message}
 			{toolMessages}
-			onConfirmDelete={handleConfirmDelete}
 			onContinue={handleContinue}
-			onCopy={handleCopy}
-			onDelete={handleDelete}
-			onEdit={handleEdit}
-			onForkConversation={handleForkConversation}
-			onNavigateToSibling={handleNavigateToSibling}
 			onRegenerate={handleRegenerate}
-			onShowDeleteDialogChange={handleShowDeleteDialogChange}
-			{showDeleteDialog}
-			{siblingInfo}
 		/>
 	{/if}
 </div>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageAssistant/ChatMessageAssistant.svelte

@@ -8,7 +8,7 @@
 		ChatMessageAssistantStatistics,
 		ChatMessageEditForm
 	} from '$lib/components/app';
-	import { getMessageEditContext } from '$lib/contexts';
+	import { getChatMessageEditContext } from '$lib/contexts';
 	import { MessageRole } from '$lib/enums';
 	import { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
 	import { chatStore, modelsStore, serverStore, settingsStore } from '$lib/stores';
@@ -17,51 +17,26 @@
 
 	interface Props {
 		class?: string;
-		deletionInfo: {
-			totalCount: number;
-			userMessages: number;
-			assistantMessages: number;
-			messageTypes: string[];
-		} | null;
 		isLastAssistantMessage?: boolean;
 		message: DatabaseMessage;
 		toolMessages?: DatabaseMessage[];
-		onCopy: () => void;
-		onConfirmDelete: () => void;
 		onContinue?: () => void;
-		onDelete: () => void;
-		onEdit?: () => void;
-		onForkConversation?: (options: { name: string; includeAttachments: boolean }) => void;
-		onNavigateToSibling?: (siblingId: string) => void;
 		onRegenerate: (modelOverride?: string) => void;
-		onShowDeleteDialogChange: (show: boolean) => void;
-		showDeleteDialog: boolean;
-		siblingInfo?: ChatMessageSiblingInfo | null;
 		textareaElement?: HTMLTextAreaElement;
 	}
 
 	let {
 		class: className = '',
-		deletionInfo,
 		isLastAssistantMessage = false,
 		message,
-		onConfirmDelete,
 		onContinue,
-		onCopy,
-		onDelete,
-		onEdit,
-		onForkConversation,
-		onNavigateToSibling,
 		onRegenerate,
-		onShowDeleteDialogChange,
-		showDeleteDialog,
-		siblingInfo = null,
 		textareaElement = $bindable(),
 		toolMessages = []
 	}: Props = $props();
 
 	// Get edit context
-	const editCtx = getMessageEditContext();
+	const editCtx = getChatMessageEditContext();
 
 	const isAgentic = $derived(hasAgenticContent(message, toolMessages));
 	const processingState = useProcessingState();
@@ -207,18 +182,8 @@
 			role={MessageRole.ASSISTANT}
 			justify="start"
 			actionsPosition="left"
-			{siblingInfo}
-			{showDeleteDialog}
-			{deletionInfo}
-			{onCopy}
-			{onEdit}
 			{onRegenerate}
 			onContinue={currentConfig.enableContinueGeneration ? onContinue : undefined}
-			{onForkConversation}
-			{onDelete}
-			{onConfirmDelete}
-			{onNavigateToSibling}
-			{onShowDeleteDialogChange}
 			showRawOutputSwitch={currentConfig.showRawOutputSwitch}
 			rawOutputEnabled={showRawOutput}
 			onRawOutputToggle={(enabled) => (showRawOutput = enabled)}

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageMcpPrompt/ChatMessageMcpPrompt.svelte

@@ -4,7 +4,7 @@
 		ChatMessageEditForm,
 		ChatMessageMcpPromptContent
 	} from '$lib/components/app';
-	import { getMessageEditContext } from '$lib/contexts';
+	import { getChatMessageEditContext } from '$lib/contexts';
 	import { McpPromptVariant, MessageRole } from '$lib/enums';
 	import type { DatabaseMessageExtraMcpPrompt } from '$lib/types';
 
@@ -12,39 +12,12 @@
 		class?: string;
 		message: DatabaseMessage;
 		mcpPrompt: DatabaseMessageExtraMcpPrompt;
-		siblingInfo?: ChatMessageSiblingInfo | null;
-		showDeleteDialog: boolean;
-		deletionInfo: {
-			totalCount: number;
-			userMessages: number;
-			assistantMessages: number;
-			messageTypes: string[];
-		} | null;
-		onCopy: () => void;
-		onEdit: () => void;
-		onDelete: () => void;
-		onConfirmDelete: () => void;
-		onNavigateToSibling?: (siblingId: string) => void;
-		onShowDeleteDialogChange: (show: boolean) => void;
 	}
 
-	let {
+	let { class: className = '', mcpPrompt, message }: Props = $props();
-		class: className = '',
-		deletionInfo,
-		mcpPrompt,
-		message,
-		onConfirmDelete,
-		onCopy,
-		onDelete,
-		onEdit,
-		onNavigateToSibling,
-		onShowDeleteDialogChange,
-		showDeleteDialog,
-		siblingInfo = null
-	}: Props = $props();
 
 	// Get edit context
-	const editCtx = getMessageEditContext();
+	const editCtx = getChatMessageEditContext();
 </script>
 
 <div
@@ -63,20 +36,7 @@
 
 		{#if message.timestamp}
 			<div class="max-w-[80%]">
-				<ChatMessageActionIcons
+				<ChatMessageActionIcons actionsPosition="right" justify="end" role={MessageRole.USER} />
-					actionsPosition="right"
-					{deletionInfo}
-					justify="end"
-					{onConfirmDelete}
-					{onCopy}
-					{onDelete}
-					{onEdit}
-					{onNavigateToSibling}
-					{onShowDeleteDialogChange}
-					{siblingInfo}
-					{showDeleteDialog}
-					role={MessageRole.USER}
-				/>
 			</div>
 		{/if}
 	{/if}

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageSystem/ChatMessageSystem.svelte

@@ -4,7 +4,7 @@
 	import { Button } from '$lib/components/ui/button';
 	import { Card } from '$lib/components/ui/card';
 	import { INPUT_CLASSES } from '$lib/constants';
-	import { getMessageEditContext } from '$lib/contexts';
+	import { getChatMessageEditContext } from '$lib/contexts';
 	import { KeyboardKey, MessageRole } from '$lib/enums';
 	import { settingsStore } from '$lib/stores';
 	import { autoResizeTextarea, isIMEComposing } from '$lib/utils';
@@ -12,39 +12,12 @@
 	interface Props {
 		class?: string;
 		message: DatabaseMessage;
-		siblingInfo?: ChatMessageSiblingInfo | null;
-		showDeleteDialog: boolean;
-		deletionInfo: {
-			totalCount: number;
-			userMessages: number;
-			assistantMessages: number;
-			messageTypes: string[];
-		} | null;
-		onCopy: () => void;
-		onEdit: () => void;
-		onDelete: () => void;
-		onConfirmDelete: () => void;
-		onNavigateToSibling?: (siblingId: string) => void;
-		onShowDeleteDialogChange: (show: boolean) => void;
 		textareaElement?: HTMLTextAreaElement;
 	}
 
-	let {
+	let { class: className = '', message, textareaElement = $bindable() }: Props = $props();
-		class: className = '',
-		deletionInfo,
-		message,
-		onConfirmDelete,
-		onCopy,
-		onDelete,
-		onEdit,
-		onNavigateToSibling,
-		onShowDeleteDialogChange,
-		showDeleteDialog,
-		siblingInfo = null,
-		textareaElement = $bindable()
-	}: Props = $props();
 
-	const editCtx = getMessageEditContext();
+	const editCtx = getChatMessageEditContext();
 
 	function handleEditKeydown(event: KeyboardEvent) {
 		if (event.key === KeyboardKey.ENTER && !event.shiftKey && !isIMEComposing(event)) {
@@ -218,20 +191,7 @@
 
 		{#if message.timestamp}
 			<div class="max-w-[80%]">
-				<ChatMessageActionIcons
+				<ChatMessageActionIcons actionsPosition="right" justify="end" role={MessageRole.USER} />
-					actionsPosition="right"
-					{deletionInfo}
-					justify="end"
-					{onConfirmDelete}
-					{onCopy}
-					{onDelete}
-					{onEdit}
-					{onNavigateToSibling}
-					{onShowDeleteDialogChange}
-					{siblingInfo}
-					{showDeleteDialog}
-					role={MessageRole.USER}
-				/>
 			</div>
 		{/if}
 	{/if}

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlock.svelte

@@ -12,8 +12,7 @@
 	import ChatMessageToolCallBlockSearchResults from './ChatMessageToolCallBlockSearchResults.svelte';
 	import ChatMessageToolCallBlockWriteFile from './ChatMessageToolCallBlockWriteFile.svelte';
 	import { BuiltInTool } from '$lib/enums';
-	import type { AgenticSection } from '$lib/types';
+	import type { AgenticSection, DatabaseMessageExtra } from '$lib/types';
-	import type { DatabaseMessageExtra } from '$lib/types';
 	import { extractSearchQuery, extractSearchResults, isWebSearchToolName } from '$lib/utils';
 
 	interface Props {

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockExecShellCommand.svelte

@@ -13,8 +13,7 @@
 	import { SETTINGS_KEYS, TOOL_RUNTIME_SCROLL_AT_BOTTOM_THRESHOLD_PX } from '$lib/constants';
 	import { AttachmentType } from '$lib/enums';
 	import { settingsStore, toolsStore } from '$lib/stores';
-	import type { AgenticSection, ToolResultLine } from '$lib/types';
+	import type { AgenticSection, DatabaseMessageExtra, ToolResultLine } from '$lib/types';
-	import type { DatabaseMessageExtra } from '$lib/types';
 	import {
 		abbreviateHome,
 		type ExecShellExitStatus,

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageUser/ChatMessageUser.svelte

@@ -5,7 +5,7 @@
 		ChatMessageStatistics,
 		ChatMessageUserBubble
 	} from '$lib/components/app/chat';
-	import { getMessageEditContext } from '$lib/contexts';
+	import { getChatMessageEditContext } from '$lib/contexts';
 	import { ChatMessageStatisticsMode, MessageRole } from '$lib/enums';
 	import { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
 	import { chatStore, settingsStore } from '$lib/stores';
@@ -13,44 +13,19 @@
 	interface Props {
 		class?: string;
 		message: DatabaseMessage;
-		siblingInfo?: ChatMessageSiblingInfo | null;
-		deletionInfo: {
-			totalCount: number;
-			userMessages: number;
-			assistantMessages: number;
-			messageTypes: string[];
-		} | null;
 		isLastUserMessage?: boolean;
 		nextAssistantMessage?: DatabaseMessage | null;
-		showDeleteDialog: boolean;
-		onEdit: () => void;
-		onDelete: () => void;
-		onConfirmDelete: () => void;
-		onForkConversation?: (options: { name: string; includeAttachments: boolean }) => void;
-		onShowDeleteDialogChange: (show: boolean) => void;
-		onNavigateToSibling?: (siblingId: string) => void;
-		onCopy: () => void;
 	}
 
 	let {
 		class: className = '',
-		deletionInfo,
 		isLastUserMessage = false,
 		message,
-		nextAssistantMessage = null,
+		nextAssistantMessage = null
-		onConfirmDelete,
-		onCopy,
-		onDelete,
-		onEdit,
-		onForkConversation,
-		onNavigateToSibling,
-		onShowDeleteDialogChange,
-		showDeleteDialog,
-		siblingInfo = null
 	}: Props = $props();
 
 	// Get contexts
-	const editCtx = getMessageEditContext();
+	const editCtx = getChatMessageEditContext();
 	const processingState = useProcessingState();
 
 	const currentConfig = $derived(settingsStore.config);
@@ -132,21 +107,7 @@
 
 		{#if message.timestamp}
 			<div class="max-w-[80%]">
-				<ChatMessageActionIcons
+				<ChatMessageActionIcons actionsPosition="right" justify="end" role={MessageRole.USER} />
-					actionsPosition="right"
-					{deletionInfo}
-					justify="end"
-					{onConfirmDelete}
-					{onCopy}
-					{onDelete}
-					{onEdit}
-					{onForkConversation}
-					{onNavigateToSibling}
-					{onShowDeleteDialogChange}
-					{siblingInfo}
-					{showDeleteDialog}
-					role={MessageRole.USER}
-				/>
 			</div>
 		{/if}
 	{/if}

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageUser/ChatMessageUserPending.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ArrowUp, Edit, Trash2 } from '@lucide/svelte';
 	import { ActionIcon, ChatMessageEditForm, ChatMessageUserBubble } from '$lib/components/app';
-	import { useMessageEditContext } from '$lib/hooks/use-message-edit-context.svelte';
+	import { useChatMessageEditContext } from '$lib/hooks/use-chat-message-edit-context.svelte';
 
 	interface Props {
 		class?: string;
@@ -21,7 +21,7 @@
 		onSendImmediately
 	}: Props = $props();
 
-	const editCtx = useMessageEditContext({
+	const editCtx = useChatMessageEditContext({
 		getContent: () => content,
 		getExtras: () => extras,
 		onSave: (content, extras) => onEdit(content, extras)

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionIcons/ChatMessageActionIcons.svelte

@@ -9,6 +9,7 @@
 	import Input from '$lib/components/ui/input/input.svelte';
 	import Label from '$lib/components/ui/label/label.svelte';
 	import { Switch } from '$lib/components/ui/switch';
+	import { getChatMessageActionsContext, getChatMessageEditContext } from '$lib/contexts';
 	import { MessageRole } from '$lib/enums';
 	import { conversationsStore } from '$lib/stores';
 
@@ -16,23 +17,8 @@
 		role: MessageRole.USER | MessageRole.ASSISTANT;
 		justify: 'start' | 'end';
 		actionsPosition: 'left' | 'right';
-		siblingInfo?: ChatMessageSiblingInfo | null;
-		showDeleteDialog: boolean;
-		deletionInfo: {
-			totalCount: number;
-			userMessages: number;
-			assistantMessages: number;
-			messageTypes: string[];
-		} | null;
-		onCopy: () => void;
-		onEdit?: () => void;
 		onRegenerate?: () => void;
 		onContinue?: () => void;
-		onForkConversation?: (options: { name: string; includeAttachments: boolean }) => void;
-		onDelete: () => void;
-		onConfirmDelete: () => void;
-		onNavigateToSibling?: (siblingId: string) => void;
-		onShowDeleteDialogChange: (show: boolean) => void;
 		showRawOutputSwitch?: boolean;
 		rawOutputEnabled?: boolean;
 		onRawOutputToggle?: (enabled: boolean) => void;
@@ -40,32 +26,25 @@
 
 	let {
 		actionsPosition,
-		deletionInfo,
 		justify,
-		onConfirmDelete,
 		onContinue,
-		onCopy,
-		onDelete,
-		onEdit,
-		onForkConversation,
-		onNavigateToSibling,
 		onRawOutputToggle,
 		onRegenerate,
-		onShowDeleteDialogChange,
 		rawOutputEnabled = false,
 		role,
-		showDeleteDialog,
+		showRawOutputSwitch = false
-		showRawOutputSwitch = false,
-		siblingInfo = null
 	}: Props = $props();
 
+	const messageActions = getChatMessageActionsContext();
+	const editCtx = getChatMessageEditContext();
+
 	let showForkDialog = $state(false);
 	let forkName = $state('');
 	let forkIncludeAttachments = $state(true);
 
 	function handleConfirmDelete() {
-		onConfirmDelete();
+		messageActions.confirmDelete();
-		onShowDeleteDialogChange(false);
+		messageActions.setShowDeleteDialog(false);
 	}
 
 	function handleOpenForkDialog() {
@@ -77,7 +56,10 @@
 	}
 
 	function handleConfirmFork() {
-		onForkConversation?.({ includeAttachments: forkIncludeAttachments, name: forkName.trim() });
+		messageActions.forkConversation?.({
+			includeAttachments: forkIncludeAttachments,
+			name: forkName.trim()
+		});
 		showForkDialog = false;
 	}
 </script>
@@ -88,18 +70,16 @@
 			? 'left-0'
 			: 'right-0'} flex items-center gap-2 opacity-100 transition-opacity"
 	>
-		{#if siblingInfo && siblingInfo.totalSiblings > 1}
+		{#if messageActions.siblingInfo && messageActions.siblingInfo.totalSiblings > 1}
-			<ChatMessageActionIconsBranchingControls {siblingInfo} {onNavigateToSibling} />
+			<ChatMessageActionIconsBranchingControls />
 		{/if}
 
 		<div
 			class="pointer-events-auto inset-0 flex items-center gap-1 opacity-100 transition-all duration-150"
 		>
-			<ActionIcon icon={Copy} tooltip="Copy" onclick={onCopy} />
+			<ActionIcon icon={Copy} tooltip="Copy" onclick={messageActions.copy} />
 
-			{#if onEdit}
+			<ActionIcon icon={Edit} tooltip="Edit" onclick={editCtx.startEdit} />
-				<ActionIcon icon={Edit} tooltip="Edit" onclick={onEdit} />
-			{/if}
 
 			{#if role === MessageRole.ASSISTANT && onRegenerate}
 				<ActionIcon icon={RefreshCw} tooltip="Regenerate" onclick={() => onRegenerate()} />
@@ -109,11 +89,11 @@
 				<ActionIcon icon={ArrowRight} tooltip="Continue" onclick={onContinue} />
 			{/if}
 
-			{#if onForkConversation}
+			{#if messageActions.forkConversation}
 				<ActionIcon icon={GitBranch} tooltip="Fork conversation" onclick={handleOpenForkDialog} />
 			{/if}
 
-			<ActionIcon icon={Trash2} tooltip="Delete" onclick={onDelete} />
+			<ActionIcon icon={Trash2} tooltip="Delete" onclick={messageActions.requestDelete} />
 		</div>
 	</div>
 
@@ -129,19 +109,19 @@
 </div>
 
 <DialogConfirmation
-	bind:open={showDeleteDialog}
+	open={messageActions.showDeleteDialog}
 	title="Delete Message"
-	description={deletionInfo && deletionInfo.totalCount > 1
+	description={messageActions.deletionInfo && messageActions.deletionInfo.totalCount > 1
-		? `This will delete ${deletionInfo.totalCount} messages including: ${deletionInfo.userMessages} user message${deletionInfo.userMessages > 1 ? 's' : ''} and ${deletionInfo.assistantMessages} assistant response${deletionInfo.assistantMessages > 1 ? 's' : ''}. All messages in this branch and their responses will be permanently removed. This action cannot be undone.`
+		? `This will delete ${messageActions.deletionInfo.totalCount} messages including: ${messageActions.deletionInfo.userMessages} user message${messageActions.deletionInfo.userMessages > 1 ? 's' : ''} and ${messageActions.deletionInfo.assistantMessages} assistant response${messageActions.deletionInfo.assistantMessages > 1 ? 's' : ''}. All messages in this branch and their responses will be permanently removed. This action cannot be undone.`
 		: 'Are you sure you want to delete this message? This action cannot be undone.'}
-	confirmText={deletionInfo && deletionInfo.totalCount > 1
+	confirmText={messageActions.deletionInfo && messageActions.deletionInfo.totalCount > 1
-		? `Delete ${deletionInfo.totalCount} Messages`
+		? `Delete ${messageActions.deletionInfo.totalCount} Messages`
 		: 'Delete'}
 	cancelText="Cancel"
 	variant="destructive"
 	icon={Trash2}
 	onConfirm={handleConfirmDelete}
-	onCancel={() => onShowDeleteDialogChange(false)}
+	onCancel={() => messageActions.setShowDeleteDialog(false)}
 />
 
 <DialogConfirmation

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionIcons/ChatMessageActionIconsBranchingControls.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
 	import { ChevronLeft, ChevronRight } from '@lucide/svelte';
 	import { ActionIcon } from '$lib/components/app';
+	import { getChatMessageActionsContext } from '$lib/contexts';
 
 	interface Props {
 		class?: string;
-		siblingInfo: ChatMessageSiblingInfo | null;
-		onNavigateToSibling?: (siblingId: string) => void;
 	}
 
-	let { class: className = '', onNavigateToSibling, siblingInfo }: Props = $props();
+	let { class: className = '' }: Props = $props();
+
+	const messageActions = getChatMessageActionsContext();
+
+	let siblingInfo = $derived(messageActions.siblingInfo);
 
 	let hasPrevious = $derived(siblingInfo && siblingInfo.currentIndex > 0);
 	let hasNext = $derived(siblingInfo && siblingInfo.currentIndex < siblingInfo.totalSiblings - 1);
@@ -31,7 +34,7 @@
 			tooltip="Previous version"
 			disabled={!hasPrevious}
 			class="h-5 w-5 p-0 {!hasPrevious ? '!cursor-not-allowed opacity-30' : ''}"
-			onclick={() => onNavigateToSibling?.(previousSiblingId!)}
+			onclick={() => messageActions.navigateToSibling(previousSiblingId!)}
 		/>
 
 		<span class="px-1 font-mono text-xs">
@@ -43,7 +46,7 @@
 			tooltip="Next version"
 			disabled={!hasNext}
 			class="h-5 w-5 p-0 {!hasNext ? 'opacity-30' : ''}"
-			onclick={() => onNavigateToSibling?.(nextSiblingId!)}
+			onclick={() => messageActions.navigateToSibling(nextSiblingId!)}
 		/>
 	</div>
 {/if}

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageAgenticContent.svelte

@@ -9,8 +9,8 @@
 	} from '$lib/components/app';
 	import { AgenticSectionType, ChatMessageStatsView, ToolPermissionDecision } from '$lib/enums';
 	import { agenticStore, settingsStore } from '$lib/stores';
-	import type { AgenticSection } from '$lib/types';
 	import type {
+		AgenticSection,
 		ChatMessageAgenticTimings,
 		ChatMessageAgenticTurnStats,
 		DatabaseMessage

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageEditForm.svelte

@@ -3,12 +3,12 @@
 	import { ChatForm, DialogConfirmation } from '$lib/components/app';
 	import { Button } from '$lib/components/ui/button';
 	import { Switch } from '$lib/components/ui/switch';
-	import { getMessageEditContext } from '$lib/contexts';
+	import { getChatMessageEditContext } from '$lib/contexts';
 	import { KeyboardKey, MessageRole } from '$lib/enums';
 	import { chatStore } from '$lib/stores';
 	import { processFilesToChatUploaded } from '$lib/utils/browser-only';
 
-	const editCtx = getMessageEditContext();
+	const editCtx = getChatMessageEditContext();
 
 	let saveWithoutRegenerate = $state(false);
 	let showDiscardDialog = $state(false);

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageReasoningBlock.svelte

@@ -4,8 +4,7 @@
 	import { REASONING_SCROLL_AT_BOTTOM_THRESHOLD_PX } from '$lib/constants';
 	import { AgenticSectionType } from '$lib/enums';
 	import { settingsStore } from '$lib/stores';
-	import type { DatabaseMessageExtra } from '$lib/types';
+	import type { AgenticSection, DatabaseMessageExtra } from '$lib/types';
-	import type { AgenticSection } from '$lib/types';
 
 	interface Props {
 		section: AgenticSection;

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { ChatMessage, ChatMessageUserPending } from '$lib/components/app';
-	import { setChatActionsContext } from '$lib/contexts';
 	import { MessageRole } from '$lib/enums';
 	import { agenticStore, chatStore, conversationsStore, settingsStore } from '$lib/stores';
+	import type { ChatMessageActions } from '$lib/types';
 	import {
 		buildSiblingInfoMap,
 		copyToClipboard,
@@ -22,7 +22,7 @@
 
 	const currentConfig = settingsStore.config;
 
-	setChatActionsContext({
+	const chatActions: ChatMessageActions = {
 		continueAssistantMessage: async (message: DatabaseMessage) => {
 			onUserAction?.();
 			await chatStore.continueAssistantMessage(message.id);
@@ -91,7 +91,7 @@
 			await chatStore.regenerateMessageWithBranching(message.id, modelOverride);
 			refreshAllMessages();
 		}
-	});
+	};
 
 	function refreshAllMessages() {
 		const conversation = conversationsStore.activeConversation;
@@ -228,6 +228,7 @@
 	{#each displayMessages as { isLastAssistantMessage, isLastUserMessage, message, nextAssistantMessage, siblingInfo, toolMessages } (message.id)}
 		<ChatMessage
 			class="mx-auto mt-12 w-full max-w-3xl"
+			{chatActions}
 			{message}
 			{toolMessages}
 			{isLastAssistantMessage}

tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChat.svelte

@@ -17,7 +17,6 @@
 		SETTINGS_CHAT_SECTIONS,
 		SETTINGS_SECTION_TITLES
 	} from '$lib/constants';
-	import { setChatSettingsConfigContext } from '$lib/contexts';
 	import { ColorMode } from '$lib/enums/ui.enums';
 	import { RouterService } from '$lib/services/router.service';
 	import { modelsStore, serverStore, settingsReferrer, settingsStore } from '$lib/stores';
@@ -122,14 +121,6 @@
 	export function reset() {
 		localConfig = { ...settingsStore.config };
 	}
-
-	setChatSettingsConfigContext({
-		handleConfigChange,
-		handleThemeChange,
-		get localConfig() {
-			return localConfig;
-		}
-	});
 </script>
 
 <div class="mx-auto flex h-full w-full flex-col md:pl-8" in:fade={{ duration: 150 }}>

tools/ui/src/lib/constants/context-keys.constants.ts

@@ -1,3 +1,3 @@
-export const CONTEXT_KEY_MESSAGE_EDIT = 'chat-message-edit';
+export const CONTEXT_KEY_CHAT_MESSAGE_EDIT = 'chat-message-edit';
-export const CONTEXT_KEY_CHAT_ACTIONS = 'chat-actions';
+export const CONTEXT_KEY_CHAT_MESSAGE_ACTIONS = 'chat-message-actions';
-export const CONTEXT_KEY_CHAT_SETTINGS_CONFIG = 'chat-settings-config';
+export const CONTEXT_KEY_CHAT_FORM_ACTIONS = 'chat-form-actions';

tools/ui/src/lib/contexts/chat-actions.context.ts

@@ -1,39 +0,0 @@
-import { CONTEXT_KEY_CHAT_ACTIONS } from '$lib/constants';
-import { getContext, setContext } from 'svelte';
-
-export interface ChatActionsContext {
-	copy: (message: DatabaseMessage) => void;
-	delete: (message: DatabaseMessage) => void;
-	navigateToSibling: (siblingId: string) => void;
-	editWithBranching: (
-		message: DatabaseMessage,
-		newContent: string,
-		newExtras?: DatabaseMessageExtra[]
-	) => void;
-	editWithReplacement: (
-		message: DatabaseMessage,
-		newContent: string,
-		shouldBranch: boolean
-	) => void;
-	editUserMessagePreserveResponses: (
-		message: DatabaseMessage,
-		newContent: string,
-		newExtras?: DatabaseMessageExtra[]
-	) => void;
-	regenerateWithBranching: (message: DatabaseMessage, modelOverride?: string) => void;
-	continueAssistantMessage: (message: DatabaseMessage) => void;
-	forkConversation: (
-		message: DatabaseMessage,
-		options: { name: string; includeAttachments: boolean }
-	) => void;
-}
-
-const CHAT_ACTIONS_KEY = Symbol.for(CONTEXT_KEY_CHAT_ACTIONS);
-
-export function setChatActionsContext(ctx: ChatActionsContext): ChatActionsContext {
-	return setContext(CHAT_ACTIONS_KEY, ctx);
-}
-
-export function getChatActionsContext(): ChatActionsContext {
-	return getContext(CHAT_ACTIONS_KEY);
-}

tools/ui/src/lib/contexts/chat-form-actions.context.ts

@@ -0,0 +1,19 @@
+import { CONTEXT_KEY_CHAT_FORM_ACTIONS } from '$lib/constants';
+import type { ChatFormActionsContext } from '$lib/types';
+import { getContext, setContext } from 'svelte';
+
+const CHAT_FORM_ACTIONS_KEY = Symbol.for(CONTEXT_KEY_CHAT_FORM_ACTIONS);
+
+/**
+ * Sets the chat form actions context. Call in the parent component (ChatFormActions.svelte).
+ */
+export function setChatFormActionsContext(ctx: ChatFormActionsContext): ChatFormActionsContext {
+	return setContext(CHAT_FORM_ACTIONS_KEY, ctx);
+}
+
+/**
+ * Gets the chat form actions context. Call in child components.
+ */
+export function getChatFormActionsContext(): ChatFormActionsContext {
+	return getContext(CHAT_FORM_ACTIONS_KEY);
+}

tools/ui/src/lib/contexts/chat-message-actions.context.ts

@@ -0,0 +1,21 @@
+import { CONTEXT_KEY_CHAT_MESSAGE_ACTIONS } from '$lib/constants';
+import type { ChatMessageActionsContext } from '$lib/types';
+import { getContext, setContext } from 'svelte';
+
+const CHAT_MESSAGE_ACTIONS_KEY = Symbol.for(CONTEXT_KEY_CHAT_MESSAGE_ACTIONS);
+
+/**
+ * Sets the per-message actions context. Call this in the parent component (ChatMessage.svelte).
+ */
+export function setChatMessageActionsContext(
+	ctx: ChatMessageActionsContext
+): ChatMessageActionsContext {
+	return setContext(CHAT_MESSAGE_ACTIONS_KEY, ctx);
+}
+
+/**
+ * Gets the per-message actions context. Call this in child components.
+ */
+export function getChatMessageActionsContext(): ChatMessageActionsContext {
+	return getContext(CHAT_MESSAGE_ACTIONS_KEY);
+}

tools/ui/src/lib/contexts/chat-message-edit.context.ts

@@ -0,0 +1,19 @@
+import { CONTEXT_KEY_CHAT_MESSAGE_EDIT } from '$lib/constants';
+import type { ChatMessageEditContext } from '$lib/types';
+import { getContext, setContext } from 'svelte';
+
+const CHAT_MESSAGE_EDIT_KEY = Symbol.for(CONTEXT_KEY_CHAT_MESSAGE_EDIT);
+
+/**
+ * Sets the message edit context. Call this in the parent component (ChatMessage.svelte).
+ */
+export function setChatMessageEditContext(ctx: ChatMessageEditContext): ChatMessageEditContext {
+	return setContext(CHAT_MESSAGE_EDIT_KEY, ctx);
+}
+
+/**
+ * Gets the message edit context. Call this in child components.
+ */
+export function getChatMessageEditContext(): ChatMessageEditContext {
+	return getContext(CHAT_MESSAGE_EDIT_KEY);
+}

tools/ui/src/lib/contexts/chat-settings-config.context.ts

@@ -1,20 +0,0 @@
-import { CONTEXT_KEY_CHAT_SETTINGS_CONFIG } from '$lib/constants';
-import { getContext, setContext } from 'svelte';
-
-export interface ChatSettingsConfigContext {
-	readonly localConfig: SettingsConfigType;
-	handleConfigChange: (key: string, value: string | boolean) => void;
-	handleThemeChange: (theme: string) => void;
-}
-
-const CHAT_SETTINGS_CONFIG_KEY = Symbol.for(CONTEXT_KEY_CHAT_SETTINGS_CONFIG);
-
-export function setChatSettingsConfigContext(
-	ctx: ChatSettingsConfigContext
-): ChatSettingsConfigContext {
-	return setContext(CHAT_SETTINGS_CONFIG_KEY, ctx);
-}
-
-export function getChatSettingsConfigContext(): ChatSettingsConfigContext {
-	return getContext(CHAT_SETTINGS_CONFIG_KEY);
-}

tools/ui/src/lib/contexts/index.ts

@@ -1,19 +1,8 @@
-export {
+export { getChatMessageEditContext, setChatMessageEditContext } from './chat-message-edit.context';
-	getMessageEditContext,
-	setMessageEditContext,
-	type MessageEditContext,
-	type MessageEditState,
-	type MessageEditActions
-} from './message-edit.context';
 
 export {
-	getChatActionsContext,
+	getChatMessageActionsContext,
-	setChatActionsContext,
+	setChatMessageActionsContext
-	type ChatActionsContext
+} from './chat-message-actions.context';
-} from './chat-actions.context';
 
-export {
+export { getChatFormActionsContext, setChatFormActionsContext } from './chat-form-actions.context';
-	getChatSettingsConfigContext,
-	setChatSettingsConfigContext,
-	type ChatSettingsConfigContext
-} from './chat-settings-config.context';

tools/ui/src/lib/contexts/message-edit.context.ts

@@ -1,51 +0,0 @@
-import { CONTEXT_KEY_MESSAGE_EDIT } from '$lib/constants';
-import { MessageRole } from '$lib/enums';
-import { getContext, setContext } from 'svelte';
-
-export interface MessageEditState {
-	readonly isEditing: boolean;
-	readonly editedContent: string;
-	readonly editedExtras: DatabaseMessageExtra[];
-	readonly editedUploadedFiles: ChatUploadedFile[];
-	readonly originalContent: string;
-	readonly originalExtras: DatabaseMessageExtra[];
-	readonly showSaveOnlyOption: boolean;
-	readonly showBranchAfterEditOption: boolean;
-	readonly shouldBranchAfterEdit: boolean;
-	readonly messageRole: MessageRole;
-	readonly rawEditContent?: string;
-}
-
-export interface MessageEditActions {
-	setContent: (content: string) => void;
-	setExtras: (extras: DatabaseMessageExtra[]) => void;
-	setUploadedFiles: (files: ChatUploadedFile[]) => void;
-	save: () => void;
-	saveOnly: () => void;
-	cancel: () => void;
-	startEdit: () => void;
-}
-
-export interface AssistantEditActions {
-	setShouldBranchAfterEdit: (value: boolean) => void;
-}
-
-export type MessageEditContext = MessageEditState &
-	MessageEditActions &
-	Partial<AssistantEditActions>;
-
-const MESSAGE_EDIT_KEY = Symbol.for(CONTEXT_KEY_MESSAGE_EDIT);
-
-/**
- * Sets the message edit context. Call this in the parent component (ChatMessage.svelte).
- */
-export function setMessageEditContext(ctx: MessageEditContext): MessageEditContext {
-	return setContext(MESSAGE_EDIT_KEY, ctx);
-}
-
-/**
- * Gets the message edit context. Call this in child components.
- */
-export function getMessageEditContext(): MessageEditContext {
-	return getContext(MESSAGE_EDIT_KEY);
-}

tools/ui/src/lib/hooks/use-chat-message-edit-context.svelte.ts

@@ -1,15 +1,15 @@
-import { setMessageEditContext } from '$lib/contexts';
+import { setChatMessageEditContext } from '$lib/contexts';
 import { MessageRole } from '$lib/enums';
 import { parseFilesToMessageExtras } from '$lib/utils/convert-files-to-extra';
 
-interface UseMessageEditContextOptions {
+interface UseChatMessageEditContextOptions {
 	getContent: () => string;
 	getExtras: () => DatabaseMessageExtra[];
 	showSaveOnlyOption?: boolean;
 	onSave: (content: string, extras?: DatabaseMessageExtra[]) => void;
 }
 
-export function useMessageEditContext(options: UseMessageEditContextOptions) {
+export function useChatMessageEditContext(options: UseChatMessageEditContextOptions) {
 	let isEditing = $state(false);
 	let editedContent = $state('');
 	let editedExtras = $state<DatabaseMessageExtra[]>([]);
@@ -45,7 +45,7 @@ export function useMessageEditContext(options: UseMessageEditContextOptions) {
 		isEditing = false;
 	}
 
-	setMessageEditContext({
+	setChatMessageEditContext({
 		cancel: handleCancelEdit,
 		get editedContent() {
 			return editedContent;

tools/ui/src/lib/types/chat.d.ts

@@ -7,7 +7,8 @@ import type {
 	AttachmentMenuItemId,
 	ChatFormCommandAction,
 	ErrorDialogType,
-	FileMentionEntryType
+	FileMentionEntryType,
+	MessageRole
 } from '$lib/enums';
 import type { Component } from 'svelte';
 
@@ -235,3 +236,111 @@ export interface ChatFormCommand {
 	action: ChatFormCommandAction;
 	disabled: boolean;
 }
+
+/**
+ * Data shown in the message delete confirmation dialog.
+ */
+export interface ChatMessageDeletionInfo {
+	totalCount: number;
+	userMessages: number;
+	assistantMessages: number;
+	messageTypes: string[];
+}
+
+/**
+ * Conversation-level message operations owned by ChatMessages (store calls + list
+ * refresh + user-action notification), passed to each ChatMessage as a prop.
+ */
+export interface ChatMessageActions {
+	copy: (message: DatabaseMessage) => void;
+	delete: (message: DatabaseMessage) => void;
+	navigateToSibling: (siblingId: string) => void;
+	editWithBranching: (
+		message: DatabaseMessage,
+		newContent: string,
+		newExtras?: DatabaseMessageExtra[]
+	) => void;
+	editWithReplacement: (
+		message: DatabaseMessage,
+		newContent: string,
+		shouldBranch: boolean
+	) => void;
+	editUserMessagePreserveResponses: (
+		message: DatabaseMessage,
+		newContent: string,
+		newExtras?: DatabaseMessageExtra[]
+	) => void;
+	regenerateWithBranching: (message: DatabaseMessage, modelOverride?: string) => void;
+	continueAssistantMessage: (message: DatabaseMessage) => void;
+	forkConversation: (
+		message: DatabaseMessage,
+		options: { name: string; includeAttachments: boolean }
+	) => void;
+}
+
+/**
+ * Per-message actions and state. Set once per message in ChatMessage.svelte and
+ * consumed by its descendants (action icons, branching controls).
+ */
+export interface ChatMessageActionsContext {
+	readonly siblingInfo: ChatMessageSiblingInfo | null;
+	readonly deletionInfo: ChatMessageDeletionInfo | null;
+	readonly showDeleteDialog: boolean;
+	copy: () => void;
+	requestDelete: () => void;
+	confirmDelete: () => void;
+	setShowDeleteDialog: (show: boolean) => void;
+	navigateToSibling: (siblingId: string) => void;
+	forkConversation?: (options: { name: string; includeAttachments: boolean }) => void;
+}
+
+export interface ChatMessageEditState {
+	readonly isEditing: boolean;
+	readonly editedContent: string;
+	readonly editedExtras: DatabaseMessageExtra[];
+	readonly editedUploadedFiles: ChatUploadedFile[];
+	readonly originalContent: string;
+	readonly originalExtras: DatabaseMessageExtra[];
+	readonly showSaveOnlyOption: boolean;
+	readonly showBranchAfterEditOption: boolean;
+	readonly shouldBranchAfterEdit: boolean;
+	readonly messageRole: MessageRole;
+	readonly rawEditContent?: string;
+}
+
+export interface ChatMessageEditActions {
+	setContent: (content: string) => void;
+	setExtras: (extras: DatabaseMessageExtra[]) => void;
+	setUploadedFiles: (files: ChatUploadedFile[]) => void;
+	save: () => void;
+	saveOnly: () => void;
+	cancel: () => void;
+	startEdit: () => void;
+}
+
+export interface ChatMessageAssistantEditActions {
+	setShouldBranchAfterEdit: (value: boolean) => void;
+}
+
+export type ChatMessageEditContext = ChatMessageEditState &
+	ChatMessageEditActions &
+	Partial<ChatMessageAssistantEditActions>;
+
+/**
+ * Actions and capability flags for the ChatForm add-menu. Set once in
+ * ChatFormActions.svelte and consumed by its deep descendants (the add sheet,
+ * dropdown and MCP servers submenu) to avoid relaying them through props.
+ */
+export interface ChatFormActionsContext {
+	readonly disabled: boolean;
+	readonly hasAudioModality: boolean;
+	readonly hasVideoModality: boolean;
+	readonly hasVisionModality: boolean;
+	readonly hasMcpPromptsSupport: boolean;
+	readonly hasMcpResourcesSupport: boolean;
+	onFileUpload?: () => void;
+	onSystemPromptClick?: () => void;
+	onMcpPromptClick?: () => void;
+	onMcpResourcesClick?: () => void;
+	onMcpSettingsClick?: () => void;
+}

tools/ui/src/lib/types/index.ts

@@ -44,6 +44,14 @@ export type {
 	ChatUploadedFile,
 	ChatAttachmentDisplayItem,
 	ChatMessageSiblingInfo,
+	ChatMessageActions,
+	ChatMessageActionsContext,
+	ChatMessageDeletionInfo,
+	ChatMessageEditContext,
+	ChatMessageEditState,
+	ChatMessageEditActions,
+	ChatMessageAssistantEditActions,
+	ChatFormActionsContext,
 	ChatMessagePromptProgress,
 	ChatMessageTimings,
 	ChatMessageAgenticTimings,

tools/ui/tests/stories/ChatMessage.stories.svelte

@@ -1,6 +1,7 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import ChatMessage from '$lib/components/app/chat/ChatMessages/ChatMessage/ChatMessage.svelte';
+	import type { ChatMessageActions } from '$lib/types';
 
 	const { Story } = defineMeta({
 		component: ChatMessage,
@@ -10,6 +11,18 @@
 		title: 'Components/ChatScreen/ChatMessage'
 	});
 
+	const chatActions: ChatMessageActions = {
+		continueAssistantMessage: () => {},
+		copy: () => {},
+		delete: () => {},
+		editUserMessagePreserveResponses: () => {},
+		editWithBranching: () => {},
+		editWithReplacement: () => {},
+		forkConversation: () => {},
+		navigateToSibling: () => {},
+		regenerateWithBranching: () => {}
+	};
+
 	// Mock messages for different scenarios
 	const userMessage: DatabaseMessage = {
 		children: [],
@@ -190,7 +203,7 @@
 	}}
 >
 	<div class="w-[56rem]">
-		<ChatMessage message={streamingMessage} />
+		<ChatMessage message={streamingMessage} {chatActions} />
 	</div>
 </Story>