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
This commit is contained in:
Aleksander Grygier
2026-08-13 08:21:15 +02:00
committed by GitHub
parent f2efd64141
commit d86c7d62df
32 changed files with 378 additions and 577 deletions
@@ -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);
}
@@ -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);
}
@@ -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);
}
@@ -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);
}
@@ -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);
}
+5 -16
View File
@@ -1,19 +1,8 @@
export {
getMessageEditContext,
setMessageEditContext,
type MessageEditContext,
type MessageEditState,
type MessageEditActions
} from './message-edit.context';
export { getChatMessageEditContext, setChatMessageEditContext } from './chat-message-edit.context';
export {
getChatActionsContext,
setChatActionsContext,
type ChatActionsContext
} from './chat-actions.context';
getChatMessageActionsContext,
setChatMessageActionsContext
} from './chat-message-actions.context';
export {
getChatSettingsConfigContext,
setChatSettingsConfigContext,
type ChatSettingsConfigContext
} from './chat-settings-config.context';
export { getChatFormActionsContext, setChatFormActionsContext } from './chat-form-actions.context';
@@ -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);
}