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
2026-08-13 08:21:15 +02:00
parent f2efd64141
commit d86c7d62df
32 changed files with 378 additions and 577 deletions
@@ -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 {
-		class: className = '',
-		disabled = false,
-		hasAudioModality = false,
-		hasMcpPromptsSupport = false,
-		hasMcpResourcesSupport = false,
-		hasVideoModality = false,
-		hasVisionModality = false,
-		onFileUpload,
-		onMcpPromptClick,
-		onMcpResourcesClick,
-		onMcpSettingsClick,
-		onSystemPromptClick
-	}: Props = $props();
+	let { class: className = '' }: Props = $props();
+
+	const chatFormActions = getChatFormActionsContext();

 	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,
-			hasMcpPromptsSupport,
-			hasMcpResourcesSupport,
-			hasVideoModality,
-			hasVisionModality
+			hasAudioModality: chatFormActions.hasAudioModality,
+			hasMcpPromptsSupport: chatFormActions.hasMcpPromptsSupport,
+			hasMcpResourcesSupport: chatFormActions.hasMcpResourcesSupport,
+			hasVideoModality: chatFormActions.hasVideoModality,
+			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} />

@@ -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 {
-		class: className = '',
-		disabled = false,
-		hasAudioModality = false,
-		hasMcpPromptsSupport = false,
-		hasMcpResourcesSupport = false,
-		hasVideoModality = false,
-		hasVisionModality = false,
-		onFileUpload,
-		onMcpPromptClick,
-		onMcpResourcesClick,
-		onSystemPromptClick,
-		trigger
-	}: Props = $props();
+	let { class: className = '', trigger }: Props = $props();
+
+	const chatFormActions = getChatFormActionsContext();

 	let sheetOpen = $state(false);
 	let reasoningExpanded = $state(false);
@@ -65,13 +45,18 @@

 	const attachmentMenu = useAttachmentMenu(
 		() => ({
-			hasAudioModality,
-			hasMcpPromptsSupport,
-			hasMcpResourcesSupport,
-			hasVideoModality,
-			hasVisionModality
+			hasAudioModality: chatFormActions.hasAudioModality,
+			hasMcpPromptsSupport: chatFormActions.hasMcpPromptsSupport,
+			hasMcpResourcesSupport: chatFormActions.hasMcpResourcesSupport,
+			hasVideoModality: chatFormActions.hasVideoModality,
+			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}
@@ -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
-		{disabled}
-		{hasAudioModality}
-		{hasVideoModality}
-		{hasVisionModality}
-		{hasMcpPromptsSupport}
-		{hasMcpResourcesSupport}
-		{onFileUpload}
-		{onSystemPromptClick}
-		{onMcpPromptClick}
-		{onMcpResourcesClick}
-	>
+	<ChatFormActionAddSheet>
 		{#snippet trigger({ disabled, onclick })}
 			<ChatFormActionAddButton {disabled} {onclick} />
 		{/snippet}
 	</ChatFormActionAddSheet>
 {:else}
-	<ChatFormActionAddDropdown
-		{disabled}
-		{hasAudioModality}
-		{hasVideoModality}
-		{hasVisionModality}
-		{hasMcpPromptsSupport}
-		{hasMcpResourcesSupport}
-		{onFileUpload}
-		{onMcpPromptClick}
-		{onMcpResourcesClick}
-		{onMcpSettingsClick}
-		{onSystemPromptClick}
-	/>
+	<ChatFormActionAddDropdown />
 {/if}
@@ -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
-				{disabled}
-				{hasAudioModality}
-				{hasVideoModality}
-				{hasVisionModality}
-				{hasMcpPromptsSupport}
-				{hasMcpResourcesSupport}
-				{onFileUpload}
-				{onSystemPromptClick}
-				{onMcpPromptClick}
-				{onMcpResourcesClick}
-				onMcpSettingsClick={() => goto(ROUTES.MCP_SERVERS)}
-			/>
+			<ChatFormActionsAdd />
 		</div>
 	{/if}

@@ -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<{
-		totalCount: number;
-		userMessages: number;
-		assistantMessages: number;
-		messageTypes: string[];
-	} | null>(null);
+	let deletionInfo = $state<ChatMessageDeletionInfo | 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
-			bind:textareaElement
-			class={className}
-			{deletionInfo}
-			{message}
-			onConfirmDelete={handleConfirmDelete}
-			onCopy={handleCopy}
-			onDelete={handleDelete}
-			onEdit={handleEdit}
-			onNavigateToSibling={handleNavigateToSibling}
-			onShowDeleteDialogChange={handleShowDeleteDialogChange}
-			{showDeleteDialog}
-			{siblingInfo}
-		/>
+		<ChatMessageSystem bind:textareaElement class={className} {message} />
 	{:else if mcpPromptExtra}
-		<ChatMessageMcpPrompt
-			class={className}
-			{deletionInfo}
-			{message}
-			mcpPrompt={mcpPromptExtra}
-			onConfirmDelete={handleConfirmDelete}
-			onCopy={handleCopy}
-			onDelete={handleDelete}
-			onEdit={handleEdit}
-			onNavigateToSibling={handleNavigateToSibling}
-			onShowDeleteDialogChange={handleShowDeleteDialogChange}
-			{showDeleteDialog}
-			{siblingInfo}
-		/>
+		<ChatMessageMcpPrompt class={className} {message} mcpPrompt={mcpPromptExtra} />
 	{:else if isSynthetic}
 		<ChatMessageSynthetic {message} class={className} />
 	{:else if message.role === MessageRole.USER}
-		<ChatMessageUser
-			class={className}
-			{deletionInfo}
-			{isLastUserMessage}
-			{message}
-			{nextAssistantMessage}
-			onConfirmDelete={handleConfirmDelete}
-			onCopy={handleCopy}
-			onDelete={handleDelete}
-			onEdit={handleEdit}
-			onForkConversation={handleForkConversation}
-			onNavigateToSibling={handleNavigateToSibling}
-			onShowDeleteDialogChange={handleShowDeleteDialogChange}
-			{showDeleteDialog}
-			{siblingInfo}
-		/>
+		<ChatMessageUser class={className} {isLastUserMessage} {message} {nextAssistantMessage} />
 	{: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>
@@ -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)}
@@ -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 {
-		class: className = '',
-		deletionInfo,
-		mcpPrompt,
-		message,
-		onConfirmDelete,
-		onCopy,
-		onDelete,
-		onEdit,
-		onNavigateToSibling,
-		onShowDeleteDialogChange,
-		showDeleteDialog,
-		siblingInfo = null
-	}: Props = $props();
+	let { class: className = '', mcpPrompt, message }: 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
-					actionsPosition="right"
-					{deletionInfo}
-					justify="end"
-					{onConfirmDelete}
-					{onCopy}
-					{onDelete}
-					{onEdit}
-					{onNavigateToSibling}
-					{onShowDeleteDialogChange}
-					{siblingInfo}
-					{showDeleteDialog}
-					role={MessageRole.USER}
-				/>
+				<ChatMessageActionIcons actionsPosition="right" justify="end" role={MessageRole.USER} />
 			</div>
 		{/if}
 	{/if}
@@ -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 {
-		class: className = '',
-		deletionInfo,
-		message,
-		onConfirmDelete,
-		onCopy,
-		onDelete,
-		onEdit,
-		onNavigateToSibling,
-		onShowDeleteDialogChange,
-		showDeleteDialog,
-		siblingInfo = null,
-		textareaElement = $bindable()
-	}: Props = $props();
+	let { class: className = '', message, 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
-					actionsPosition="right"
-					{deletionInfo}
-					justify="end"
-					{onConfirmDelete}
-					{onCopy}
-					{onDelete}
-					{onEdit}
-					{onNavigateToSibling}
-					{onShowDeleteDialogChange}
-					{siblingInfo}
-					{showDeleteDialog}
-					role={MessageRole.USER}
-				/>
+				<ChatMessageActionIcons actionsPosition="right" justify="end" role={MessageRole.USER} />
 			</div>
 		{/if}
 	{/if}
@@ -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 { DatabaseMessageExtra } from '$lib/types';
+	import type { AgenticSection, DatabaseMessageExtra } from '$lib/types';
 	import { extractSearchQuery, extractSearchResults, isWebSearchToolName } from '$lib/utils';

 	interface Props {
@@ -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 { DatabaseMessageExtra } from '$lib/types';
+	import type { AgenticSection, DatabaseMessageExtra, ToolResultLine } from '$lib/types';
 	import {
 		abbreviateHome,
 		type ExecShellExitStatus,
@@ -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,
-		onConfirmDelete,
-		onCopy,
-		onDelete,
-		onEdit,
-		onForkConversation,
-		onNavigateToSibling,
-		onShowDeleteDialogChange,
-		showDeleteDialog,
-		siblingInfo = null
+		nextAssistantMessage = 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
-					actionsPosition="right"
-					{deletionInfo}
-					justify="end"
-					{onConfirmDelete}
-					{onCopy}
-					{onDelete}
-					{onEdit}
-					{onForkConversation}
-					{onNavigateToSibling}
-					{onShowDeleteDialogChange}
-					{siblingInfo}
-					{showDeleteDialog}
-					role={MessageRole.USER}
-				/>
+				<ChatMessageActionIcons actionsPosition="right" justify="end" role={MessageRole.USER} />
 			</div>
 		{/if}
 	{/if}
@@ -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)
@@ -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,
-		siblingInfo = null
+		showRawOutputSwitch = false
 	}: Props = $props();

+	const messageActions = getChatMessageActionsContext();
+	const editCtx = getChatMessageEditContext();
+
 	let showForkDialog = $state(false);
 	let forkName = $state('');
 	let forkIncludeAttachments = $state(true);

 	function handleConfirmDelete() {
-		onConfirmDelete();
-		onShowDeleteDialogChange(false);
+		messageActions.confirmDelete();
+		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}
-			<ChatMessageActionIconsBranchingControls {siblingInfo} {onNavigateToSibling} />
+		{#if messageActions.siblingInfo && messageActions.siblingInfo.totalSiblings > 1}
+			<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={onEdit} />
-			{/if}
+			<ActionIcon icon={Edit} tooltip="Edit" onclick={editCtx.startEdit} />

 			{#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
-		? `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.`
+	description={messageActions.deletionInfo && messageActions.deletionInfo.totalCount > 1
+		? `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
-		? `Delete ${deletionInfo.totalCount} Messages`
+	confirmText={messageActions.deletionInfo && messageActions.deletionInfo.totalCount > 1
+		? `Delete ${messageActions.deletionInfo.totalCount} Messages`
 		: 'Delete'}
 	cancelText="Cancel"
 	variant="destructive"
 	icon={Trash2}
 	onConfirm={handleConfirmDelete}
-	onCancel={() => onShowDeleteDialogChange(false)}
+	onCancel={() => messageActions.setShowDeleteDialog(false)}
 />

 <DialogConfirmation
@@ -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}
@@ -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
@@ -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);
@@ -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 } from '$lib/types';
+	import type { AgenticSection, DatabaseMessageExtra } from '$lib/types';

 	interface Props {
 		section: AgenticSection;
@@ -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}
@@ -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 }}>