# Files changed · PR \#23069 · pingdotgg/t3code [View on GitCafe](https://git.cafe/pingdotgg/t3code/pull/23069/diffs) Repository: [pingdotgg/t3code](https://git.cafe/pingdotgg/t3code) Visibility: public [refactor\(web\): ChatView's model, mode, and workspace choices live in useComposerSelection](https://git.cafe/pingdotgg/t3code/pull/23069.md) Version: 7 Head commit: d7052be1584ef4c21e11eed75ae43ddced5989f3 Base commit: 7d392e036d156169d491a794306b55a0aed8c239 Comparison base: 7d392e036d156169d491a794306b55a0aed8c239 Showing up to 20 entries from this revision. If the pull request changes, reopen the first page before continuing. ## apps/web/src/components/ChatView.tsx Status: modified; +32; −175 ```diff @@ -1,3 +1,4 @@ +import { useComposerSelection } from "./chat/useComposerSelection"; import { useProjectCloneBanner } from "./chat/useProjectCloneBanner"; import { useAttachmentPreviewHandoff } from "./chat/useAttachmentPreviewHandoff"; import { useTimelineRewind } from "./chat/useTimelineRewind"; @@ -200,10 +201,8 @@ import { usePanelAnimationSettings, usePanelPresence } from "../panelAnimations"; import { useNewThreadHandler } from "../hooks/useHandleNewThread"; import { useOpenPanelPullRequestUrl } from "../hooks/useOpenPanelPullRequestUrl"; -import { resolveAppModelSelectionForInstance } from "../modelSelection"; import { isPreviewFocused } from "../lib/previewFocus"; import { getTerminalFocusOwner } from "../lib/terminalFocus"; -import { resolveNewDraftStartFromOrigin } from "../lib/chatThreadActions"; import { deriveLogicalProjectKeyFromSettings, selectProjectGroupingSettings, @@ -332,7 +331,6 @@ dismissBranchMismatchForSession, shouldShowPlanFollowUpPrompt, shouldRenderPreviewMiniPlayer, - getStartedThreadModelChangeBlockReason, deriveLockedProvider, resolveFileAttachmentUrl, resolveComposerInteractionMode, @@ -371,7 +369,6 @@ import { isCompactCommandMessage, type LocalThreadErrorEntry, - makeModelDisabledReason, makeThreadErrorSetter, } from "./ChatView.logic"; @@ -588,9 +585,6 @@ })(); const settings = useEnvironmentSettings(environmentId); const clientSettingsHydrated = useClientSettingsHydrated(); - const setStickyComposerModelSelection = useComposerDraftStore( - (store) => store.setStickyModelSelection, - ); const timestampFormat = settings.timestampFormat; const navigate = useNavigate(); // Selects primitives: an object here is new on every router store update, which @@ -640,11 +634,6 @@ return draft ? composerDraftHasUserContent({ ...draft, prompt: "" }) : false; }); const setComposerDraftPrompt = useComposerDraftStore((store) => store.setPrompt); - const setComposerDraftModelSelection = useComposerDraftStore((store) => store.setModelSelection); - const setComposerDraftRuntimeMode = useComposerDraftStore((store) => store.setRuntimeMode); - const setComposerDraftInteractionMode = useComposerDraftStore( - (store) => store.setInteractionMode, - ); const setDraftThreadContext = useComposerDraftStore((store) => store.setDraftThreadContext); const getDraftSessionByLogicalProjectKey = useComposerDraftStore( (store) => store.getDraftSessionByLogicalProjectKey, @@ -2103,39 +2092,6 @@ scripts: activeProjectScripts, settings, }); - - const handleRuntimeModeChange = (mode: RuntimeMode) => { - if (mode === runtimeMode) return; - setComposerDraftRuntimeMode(composerDraftTarget, mode); - if (isLocalDraftThread) { - setDraftThreadContext(composerDraftTarget, { runtimeMode: mode }); - } - scheduleComposerFocus(); - }; - const handleRuntimeModeChangeStable = useStableCallback(handleRuntimeModeChange); - - const handleInteractionModeChange = (mode: ProviderInteractionMode) => { - if (mode === "plan" && !interactionModeEnabled) return; - if (mode === interactionMode) return; - setComposerDraftInteractionMode(composerDraftTarget, mode); - if (isLocalDraftThread) { - setDraftThreadContext(composerDraftTarget, { interactionMode: mode }); - } - scheduleComposerFocus(); - }; - const handleInteractionModeChangeStable = useStableCallback(handleInteractionModeChange); - const toggleInteractionMode = () => { - if (!interactionModeEnabled) return; - handleInteractionModeChange(interactionMode === "plan" ? "default" : "plan"); - }; - const toggleInteractionModeStable = useStableCallback(toggleInteractionMode); - const openProviderSetup = (instanceId: ProviderInstanceId) => { - void navigate({ - to: "/settings/providers", - search: { environmentId, instanceId }, - }); - }; - const openProviderSetupStable = useStableCallback(openProviderSetup); const canOperatePreview = useEnvironmentScope( activeThreadRef?.environmentId ?? null, AuthPreviewOperateScope, @@ -3178,6 +3134,37 @@ void sendStandaloneCommand("/compact", "Failed to compact context."); }; + const { + getModelDisabledReason, + handleInteractionModeChange, + handleInteractionModeChangeStable, + handleRuntimeModeChangeStable, + onEnvModeChangeStable, + onProviderModelSelectStable, + onStartFromOriginChange, + openProviderSetupStable, + toggleInteractionModeStable, + } = useComposerSelection({ + environmentId, + composerDraftTarget, + draftThread, + activeThread, + activeRuntime, + activeProjectSettings, + settings, + providerStatuses, + lockedProvider, + supportsProviderSwitchingViaHandoff, + multipleModelSelections, + runtimeMode, + interactionMode, + interactionModeEnabled, + isLocalDraftThread, + canOverrideServerThreadEnvMode, + setPendingServerThreadEnvModeEntry, + setPendingServerThreadStartFromOriginByThreadId, + scheduleComposerFocus, + }); const { onSend, onResume, onImplementPlanInNewThread, isResuming } = useComposerSend({ environmentId, routeThreadKey, @@ -3264,120 +3251,6 @@ }); const onImplementPlanInNewThreadStable = useStableCallback(onImplementPlanInNewThread); - // Keyed on the fields it reads: the thread and runtime objects change with - // every streamed event, and a new function re-renders the whole model picker. - const hasStartedSession = activeRuntime !== null; - const runtimeProviderInstanceId = activeRuntime?.providerInstanceId ?? null; - const currentModelSelection = activeThread?.modelSelection ?? null; - const getModelDisabledReason = makeModelDisabledReason( - currentModelSelection - ? { - providers: providerStatuses, - hasStartedSession, - supportsProviderSwitchingViaHandoff, - currentModelSelection, - currentProviderInstanceId: runtimeProviderInstanceId, - } - : null, - ); - - const onProviderModelSelect = ( - instanceId: ProviderInstanceId, - model: string, - options?: { focusComposer?: boolean }, - ) => { - if (!activeThread) return; - const entry = providerStatuses.find((snapshot) => snapshot.instanceId === instanceId); - const resolvedDriverKind = entry?.driver ?? null; - if ( - !supportsProviderSwitchingViaHandoff && - lockedProvider !== null && - resolvedDriverKind !== null && - resolvedDriverKind !== lockedProvider - ) { - if (options?.focusComposer !== false) scheduleComposerFocus(); - return; - } - if ( - !supportsProviderSwitchingViaHandoff && - lockedProvider !== null && - activeRuntime?.providerInstanceId - ) { - const currentEntry = providerStatuses.find( - (snapshot) => snapshot.instanceId === activeRuntime.providerInstanceId, - ); - if ( - currentEntry?.continuation?.groupKey && - entry?.continuation?.groupKey && - currentEntry.continuation.groupKey !== entry.continuation.groupKey - ) { - if (options?.focusComposer !== false) scheduleComposerFocus(); - return; - } - } - const resolvedModel = resolveAppModelSelectionForInstance( - instanceId, - settings, - providerStatuses, - model, - ); - if (!resolvedModel) { - if (options?.focusComposer !== false) scheduleComposerFocus(); - return; - } - const rememberedOptions = - useComposerDraftStore.getState().stickyOptionsByModelByProvider[instanceId]?.[resolvedModel]; - const nextModelSelection: ModelSelection = - rememberedOptions !== undefined && rememberedOptions.length > 0 - ? { instanceId, model: resolvedModel, options: [...rememberedOptions] } - : { instanceId, model: resolvedModel }; - const modelChangeBlockReason = getStartedThreadModelChangeBlockReason({ - providers: providerStatuses, - hasStartedSession: activeRuntime !== null, - supportsProviderSwitchingViaHandoff, - currentModelSelection: activeThread.modelSelection, - currentProviderInstanceId: activeRuntime?.providerInstanceId ?? null, - nextModelSelection, - }); - if (modelChangeBlockReason) { - toastManager.add({ - type: "warning", - title: modelChangeBlockReason.title, - description: modelChangeBlockReason.description, - }); - if (options?.focusComposer !== false) scheduleComposerFocus(); - return; - } - setComposerDraftModelSelection( - scopeThreadRef(activeThread.environmentId, activeThread.id), - nextModelSelection, - { explicit: true, replaceOptions: true }, - ); - setStickyComposerModelSelection(nextModelSelection); - if (options?.focusComposer !== false) scheduleComposerFocus(); - }; - const onProviderModelSelectStable = useStableCallback(onProviderModelSelect); - const onEnvModeChange = (mode: DraftThreadEnvMode) => { - if (multipleModelSelections !== null) return; - if (canOverrideServerThreadEnvMode) { - if (activeThread) setPendingServerThreadEnvModeEntry({ threadId: activeThread.id, mode }); - scheduleComposerFocus(); - return; - } - if (isLocalDraftThread) { - setDraftThreadContext(composerDraftTarget, { - envMode: mode, - startFromOrigin: resolveNewDraftStartFromOrigin({ - envMode: mode, - newWorktreesStartFromOrigin: activeProjectSettings.settings.newWorktreesStartFromOrigin, - }), - ...(mode === "worktree" && draftThread?.worktreePath ? { worktreePath: null } : {}), - }); - } - scheduleComposerFocus(); - }; - const onEnvModeChangeStable = useStableCallback(onEnvModeChange); - const onWorktreeSetupWorkLocally = () => { if (!worktreeSetup || worktreeSetup.phase !== "running" || !draftId) { return; @@ -3458,22 +3331,6 @@ workLocallyResendReady, ]); - const onStartFromOriginChange = (nextStartFromOrigin: boolean) => { - if (canOverrideServerThreadEnvMode && activeThread) { - setPendingServerThreadStartFromOriginByThreadId((current) => - current[activeThread.id] === nextStartFromOrigin - ? current - : { ...current, [activeThread.id]: nextStartFromOrigin }, - ); - return; - } - if (isLocalDraftThread) { - setDraftThreadContext(composerDraftTarget, { - startFromOrigin: nextStartFromOrigin, - }); - } - }; - const onExpandTimelineImage = (preview: ExpandedImagePreview) => { openExpandedImagePreview(routeThreadKey, preview); }; ``` ## apps/web/src/components/chat/useComposerSelection.ts Status: added; +266; −0 ```diff @@ -1,0 +1,266 @@ +import type { EnvironmentThreadShell } from "@t3tools/client-runtime/state/shell"; +import type { UnifiedSettings } from "@t3tools/contracts"; +import type { Dispatch } from "react"; +import type { ComposerThreadTarget, DraftSessionState } from "../../composerDraftStore"; +import { useStableCallback } from "../../hooks/useStableCallback"; +import { + type EnvironmentId, + type ModelSelection, + ProviderInstanceId, + type ServerProvider, + type ThreadId, + ProviderInteractionMode, + RuntimeMode, +} from "@t3tools/contracts"; +import { deriveThreadRuntime } from "@t3tools/client-runtime/state/thread-execution"; +import { scopeThreadRef } from "@t3tools/client-runtime/environment"; +import { type SetStateAction } from "react"; +import { useNavigate } from "@tanstack/react-router"; +import { toastManager } from "../ui/toast"; +import { resolveAppModelSelectionForInstance } from "../../modelSelection"; +import { resolveNewDraftStartFromOrigin } from "../../lib/chatThreadActions"; +import { type DraftThreadEnvMode, useComposerDraftStore } from "../../composerDraftStore"; +import { + getStartedThreadModelChangeBlockReason, + deriveLockedProvider, + makeModelDisabledReason, +} from "../ChatView.logic"; +interface ComposerSelectionInput { + readonly environmentId: EnvironmentId; + readonly composerDraftTarget: ComposerThreadTarget; + readonly draftThread: DraftSessionState | null; + readonly activeThread: EnvironmentThreadShell | undefined; + readonly activeRuntime: ReturnType; + readonly activeProjectSettings: { + readonly settings: { readonly newWorktreesStartFromOrigin: boolean }; + }; + readonly settings: UnifiedSettings; + readonly providerStatuses: ReadonlyArray; + readonly lockedProvider: ReturnType; + readonly supportsProviderSwitchingViaHandoff: boolean; + readonly multipleModelSelections: ReadonlyArray | null; + readonly runtimeMode: RuntimeMode; + readonly interactionMode: ProviderInteractionMode; + readonly interactionModeEnabled: boolean; + readonly isLocalDraftThread: boolean; + readonly canOverrideServerThreadEnvMode: boolean; + readonly setPendingServerThreadEnvModeEntry: Dispatch< + SetStateAction<{ readonly threadId: ThreadId; readonly mode: DraftThreadEnvMode } | null> + >; + readonly setPendingServerThreadStartFromOriginByThreadId: Dispatch< + SetStateAction> + >; + readonly scheduleComposerFocus: () => void; +} + +/** + * The composer's choices for the next turn: provider and model, runtime and interaction mode, + * and where a new thread runs (local or a new worktree, from the remote's tip or not). + */ +export function useComposerSelection(input: ComposerSelectionInput) { + const { + environmentId, + composerDraftTarget, + draftThread, + activeThread, + activeRuntime, + activeProjectSettings, + settings, + providerStatuses, + lockedProvider, + supportsProviderSwitchingViaHandoff, + multipleModelSelections, + runtimeMode, + interactionMode, + interactionModeEnabled, + isLocalDraftThread, + canOverrideServerThreadEnvMode, + setPendingServerThreadEnvModeEntry, + setPendingServerThreadStartFromOriginByThreadId, + scheduleComposerFocus, + } = input; + const navigate = useNavigate(); + const setStickyComposerModelSelection = useComposerDraftStore( + (store) => store.setStickyModelSelection, + ); + const setComposerDraftModelSelection = useComposerDraftStore((store) => store.setModelSelection); + const setComposerDraftRuntimeMode = useComposerDraftStore((store) => store.setRuntimeMode); + const setComposerDraftInteractionMode = useComposerDraftStore( + (store) => store.setInteractionMode, + ); + const setDraftThreadContext = useComposerDraftStore((store) => store.setDraftThreadContext); + + const handleRuntimeModeChange = (mode: RuntimeMode) => { + if (mode === runtimeMode) return; + setComposerDraftRuntimeMode(composerDraftTarget, mode); + if (isLocalDraftThread) { + setDraftThreadContext(composerDraftTarget, { runtimeMode: mode }); + } + scheduleComposerFocus(); + }; + const handleRuntimeModeChangeStable = useStableCallback(handleRuntimeModeChange); + + const handleInteractionModeChange = (mode: ProviderInteractionMode) => { + if (mode === "plan" && !interactionModeEnabled) return; + if (mode === interactionMode) return; + setComposerDraftInteractionMode(composerDraftTarget, mode); + if (isLocalDraftThread) { + setDraftThreadContext(composerDraftTarget, { interactionMode: mode }); + } + scheduleComposerFocus(); + }; + const handleInteractionModeChangeStable = useStableCallback(handleInteractionModeChange); + const toggleInteractionMode = () => { + if (!interactionModeEnabled) return; + handleInteractionModeChange(interactionMode === "plan" ? "default" : "plan"); + }; + const toggleInteractionModeStable = useStableCallback(toggleInteractionMode); + const openProviderSetup = (instanceId: ProviderInstanceId) => { + void navigate({ + to: "/settings/providers", + search: { environmentId, instanceId }, + }); + }; + const openProviderSetupStable = useStableCallback(openProviderSetup); + + // Keyed on the fields it reads: the thread and runtime objects change with + // every streamed event, and a new function re-renders the whole model picker. + const hasStartedSession = activeRuntime !== null; + const runtimeProviderInstanceId = activeRuntime?.providerInstanceId ?? null; + const currentModelSelection = activeThread?.modelSelection ?? null; + const getModelDisabledReason = makeModelDisabledReason( + currentModelSelection + ? { + providers: providerStatuses, + hasStartedSession, + supportsProviderSwitchingViaHandoff, + currentModelSelection, + currentProviderInstanceId: runtimeProviderInstanceId, + } + : null, + ); + + const onProviderModelSelect = ( + instanceId: ProviderInstanceId, + model: string, + options?: { focusComposer?: boolean }, + ) => { + if (!activeThread) return; + const entry = providerStatuses.find((snapshot) => snapshot.instanceId === instanceId); + const resolvedDriverKind = entry?.driver ?? null; + if ( + !supportsProviderSwitchingViaHandoff && + lockedProvider !== null && + resolvedDriverKind !== null && + resolvedDriverKind !== lockedProvider + ) { + if (options?.focusComposer !== false) scheduleComposerFocus(); + return; + } + if ( + !supportsProviderSwitchingViaHandoff && + lockedProvider !== null && + activeRuntime?.providerInstanceId + ) { + const currentEntry = providerStatuses.find( + (snapshot) => snapshot.instanceId === activeRuntime.providerInstanceId, + ); + if ( + currentEntry?.continuation?.groupKey && + entry?.continuation?.groupKey && + currentEntry.continuation.groupKey !== entry.continuation.groupKey + ) { + if (options?.focusComposer !== false) scheduleComposerFocus(); + return; + } + } + const resolvedModel = resolveAppModelSelectionForInstance( + instanceId, + settings, + providerStatuses, + model, + ); + if (!resolvedModel) { + if (options?.focusComposer !== false) scheduleComposerFocus(); + return; + } + const rememberedOptions = + useComposerDraftStore.getState().stickyOptionsByModelByProvider[instanceId]?.[resolvedModel]; + const nextModelSelection: ModelSelection = + rememberedOptions !== undefined && rememberedOptions.length > 0 + ? { instanceId, model: resolvedModel, options: [...rememberedOptions] } + : { instanceId, model: resolvedModel }; + const modelChangeBlockReason = getStartedThreadModelChangeBlockReason({ + providers: providerStatuses, + hasStartedSession: activeRuntime !== null, + supportsProviderSwitchingViaHandoff, + currentModelSelection: activeThread.modelSelection, + currentProviderInstanceId: activeRuntime?.providerInstanceId ?? null, + nextModelSelection, + }); + if (modelChangeBlockReason) { + toastManager.add({ + type: "warning", + title: modelChangeBlockReason.title, + description: modelChangeBlockReason.description, + }); + if (options?.focusComposer !== false) scheduleComposerFocus(); + return; + } + setComposerDraftModelSelection( + scopeThreadRef(activeThread.environmentId, activeThread.id), + nextModelSelection, + { explicit: true, replaceOptions: true }, + ); + setStickyComposerModelSelection(nextModelSelection); + if (options?.focusComposer !== false) scheduleComposerFocus(); + }; + const onProviderModelSelectStable = useStableCallback(onProviderModelSelect); + const onEnvModeChange = (mode: DraftThreadEnvMode) => { + if (multipleModelSelections !== null) return; + if (canOverrideServerThreadEnvMode) { + if (activeThread) setPendingServerThreadEnvModeEntry({ threadId: activeThread.id, mode }); + scheduleComposerFocus(); + return; + } + if (isLocalDraftThread) { + setDraftThreadContext(composerDraftTarget, { + envMode: mode, + startFromOrigin: resolveNewDraftStartFromOrigin({ + envMode: mode, + newWorktreesStartFromOrigin: activeProjectSettings.settings.newWorktreesStartFromOrigin, + }), + ...(mode === "worktree" && draftThread?.worktreePath ? { worktreePath: null } : {}), + }); + } + scheduleComposerFocus(); + }; + const onEnvModeChangeStable = useStableCallback(onEnvModeChange); + + const onStartFromOriginChange = (nextStartFromOrigin: boolean) => { + if (canOverrideServerThreadEnvMode && activeThread) { + setPendingServerThreadStartFromOriginByThreadId((current) => + current[activeThread.id] === nextStartFromOrigin + ? current + : { ...current, [activeThread.id]: nextStartFromOrigin }, + ); + return; + } + if (isLocalDraftThread) { + setDraftThreadContext(composerDraftTarget, { + startFromOrigin: nextStartFromOrigin, + }); + } + }; + return { + getModelDisabledReason, + handleInteractionModeChange, + handleInteractionModeChangeStable, + handleRuntimeModeChangeStable, + onEnvModeChangeStable, + onProviderModelSelectStable, + onStartFromOriginChange, + openProviderSetupStable, + toggleInteractionModeStable, + }; +} ```