feat: add support for model variants across chat components and session management

2026-01-08 14:48:06 +02:00
parent 8ff7b61b8a
commit 8e777a94c2
11 changed files with 472 additions and 35 deletions
@@ -145,7 +145,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
    const consumePendingInputText = useSessionStore((state) => state.consumePendingInputText);
    const pendingInputText = useSessionStore((state) => state.pendingInputText);

-    const { currentProviderId, currentModelId, currentAgentName, setAgent, getVisibleAgents } = useConfigStore();
+    const { currentProviderId, currentModelId, currentVariant, currentAgentName, setAgent, getVisibleAgents } = useConfigStore();
    const agents = getVisibleAgents();
    const { isMobile, inputBarOffset, isKeyboardOpen, setTimelineDialogOpen } = useUIStore();
    const { working } = useAssistantStatus();
@@ -473,7 +473,8 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
            currentAgentName, 
            primaryAttachments, 
            agentMentionName,
-            additionalParts.length > 0 ? additionalParts : undefined
+            additionalParts.length > 0 ? additionalParts : undefined,
+            currentVariant
        ).catch((error: unknown) => {
                const rawMessage =
                    error instanceof Error
@@ -165,18 +165,21 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
        const mode = getMessageInfoProp(previousMessage.info, 'mode');
        const providerID = getMessageInfoProp(previousMessage.info, 'providerID');
        const modelID = getMessageInfoProp(previousMessage.info, 'modelID');
+        const variant = getMessageInfoProp(previousMessage.info, 'variant');
        const resolvedAgent = typeof mode === 'string' && mode.trim().length > 0 ? mode : undefined;
        const resolvedProvider = typeof providerID === 'string' && providerID.trim().length > 0 ? providerID : undefined;
        const resolvedModel = typeof modelID === 'string' && modelID.trim().length > 0 ? modelID : undefined;
-
-        if (!resolvedAgent && !resolvedProvider && !resolvedModel) {
+        const resolvedVariant = typeof variant === 'string' && variant.trim().length > 0 ? variant : undefined;
+ 
+        if (!resolvedAgent && !resolvedProvider && !resolvedModel && !resolvedVariant) {
            return null;
        }
-
+ 
        return {
            agentName: resolvedAgent,
            providerId: resolvedProvider,
            modelId: resolvedModel,
+            variant: resolvedVariant,
        };
    }, [isUser, previousMessage]);

@@ -267,6 +270,23 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
        return undefined;
    }, [isUser, providerID, modelID, providers]);

+    const modelHasVariants = React.useMemo(() => {
+        if (isUser) return false;
+        if (!providerID || !modelID) return false;
+
+        const provider = providers.find((p) => p.id === providerID);
+        if (!provider?.models || !Array.isArray(provider.models)) {
+            return false;
+        }
+
+        const model = provider.models.find((m: Record<string, unknown>) => (m as Record<string, unknown>).id === modelID) as
+            | { variants?: Record<string, unknown> }
+            | undefined;
+
+        const variants = model?.variants;
+        return Boolean(variants && Object.keys(variants).length > 0);
+    }, [isUser, modelID, providerID, providers]);
+ 
    const displayAgentName = useStickyDisplayValue<string>(agentName);
    const displayProviderIDValue = useStickyDisplayValue<string>(providerID ?? undefined);
    const displayModelName = useStickyDisplayValue<string>(modelName);
@@ -508,6 +528,22 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
        return typeof body === 'string' && body.trim().length > 0 ? body : undefined;
    });

+    const variantFromTurnStore = useMessageStore((state) => {
+        if (!userMessageIdForTurn) return undefined;
+        const sessionId = message.info.sessionID;
+        if (!sessionId) return undefined;
+        const sessionMessages = state.messages.get(sessionId);
+        if (!sessionMessages) return undefined;
+        const userMsg = sessionMessages.find((entry) => entry.info?.id === userMessageIdForTurn);
+        if (!userMsg) return undefined;
+        const variant = (userMsg.info as { variant?: unknown }).variant;
+        return typeof variant === 'string' && variant.trim().length > 0 ? variant : undefined;
+    });
+
+    const headerVariantRaw = !isUser ? (variantFromTurnStore ?? previousUserMetadata?.variant) : undefined;
+
+    const headerVariant = !isUser && modelHasVariants ? (headerVariantRaw ?? 'Default') : undefined;
+ 
    const assistantSummaryCandidate =
        typeof turnGroupingContext?.summaryBody === 'string' && turnGroupingContext.summaryBody.trim().length > 0
            ? turnGroupingContext.summaryBody
@@ -809,6 +845,7 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
                                    providerID={headerProviderID}
                                    agentName={headerAgentName}
                                    modelName={headerModelName}
+                                    variant={headerVariant}
                                    isDarkTheme={isDarkTheme}
                                />
                            )}
@@ -274,9 +274,12 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
        providers,
        currentProviderId,
        currentModelId,
+        currentVariant,
        currentAgentName,
        setProvider,
        setModel,
+        setCurrentVariant,
+        getCurrentModelVariants,
        setAgent,
        getCurrentProvider,
        getModelMetadata,
@@ -294,6 +297,8 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
        getSessionAgentSelection,
        saveAgentModelForSession,
        getAgentModelForSession,
+        saveAgentModelVariantForSession,
+        getAgentModelVariantForSession,
        analyzeAndSaveExternalSessionChoices,
        getSessionAgentEditMode,
        setSessionAgentEditMode,
@@ -308,7 +313,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
    const isVSCodeRuntime = useIsVSCodeRuntime();
    // Only use mobile panels on actual mobile devices, VSCode uses desktop dropdowns
    const isCompact = isMobile;
-    const [activeMobilePanel, setActiveMobilePanel] = React.useState<'model' | 'agent' | null>(null);
+    const [activeMobilePanel, setActiveMobilePanel] = React.useState<'model' | 'agent' | 'variant' | null>(null);
    const [mobileTooltipOpen, setMobileTooltipOpen] = React.useState<'model' | 'agent' | null>(null);
    const [mobileModelQuery, setMobileModelQuery] = React.useState('');
    const closeMobilePanel = React.useCallback(() => setActiveMobilePanel(null), []);
@@ -498,6 +503,15 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
    const inputModalityIcons = getModalityIcons(currentMetadata, 'input');
    const outputModalityIcons = getModalityIcons(currentMetadata, 'output');

+    const availableVariants = React.useMemo(() => {
+        const variantKey = `${currentProviderId}/${currentModelId}`;
+        if (!variantKey) {
+            return [];
+        }
+        return getCurrentModelVariants();
+    }, [getCurrentModelVariants, currentProviderId, currentModelId]);
+    const hasVariants = availableVariants.length > 0;
+
    const costRows = [
        { label: 'Input', value: formatCost(currentMetadata?.cost?.input) },
        { label: 'Output', value: formatCost(currentMetadata?.cost?.output) },
@@ -850,6 +864,62 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
        handleAgentSwitch();
    }, [currentAgentName, currentSessionId, getAgentModelForSession, tryApplyModelSelection, agents, contextHydrated]);

+    React.useEffect(() => {
+        if (!contextHydrated || !currentSessionId || !currentAgentName) {
+            setCurrentVariant(undefined);
+            return;
+        }
+
+        if (!currentProviderId || !currentModelId) {
+            setCurrentVariant(undefined);
+            return;
+        }
+
+        const savedVariant = getAgentModelVariantForSession(
+            currentSessionId,
+            currentAgentName,
+            currentProviderId,
+            currentModelId,
+        );
+
+        if (savedVariant && !availableVariants.includes(savedVariant)) {
+            setCurrentVariant(undefined);
+            return;
+        }
+
+        setCurrentVariant(savedVariant);
+    }, [
+        availableVariants,
+        contextHydrated,
+        currentSessionId,
+        currentAgentName,
+        currentProviderId,
+        currentModelId,
+        getAgentModelVariantForSession,
+        setCurrentVariant,
+    ]);
+
+    const handleVariantSelect = React.useCallback((variant: string | undefined) => {
+        setCurrentVariant(variant);
+
+        if (currentSessionId && currentAgentName && currentProviderId && currentModelId) {
+            saveAgentModelVariantForSession(
+                currentSessionId,
+                currentAgentName,
+                currentProviderId,
+                currentModelId,
+                variant,
+            );
+        }
+    }, [
+        currentAgentName,
+        currentModelId,
+        currentProviderId,
+        currentSessionId,
+        saveAgentModelVariantForSession,
+        setCurrentVariant,
+    ]);
+
    const handleAgentChange = (agentName: string) => {
        try {
            setAgent(agentName);
@@ -1464,11 +1534,70 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
        );
    };

+    const renderMobileVariantPanel = () => {
+        if (!isCompact || !hasVariants) return null;
+
+        const isDefault = !currentVariant;
+
+        const handleSelect = (variant: string | undefined) => {
+            handleVariantSelect(variant);
+            closeMobilePanel();
+            requestAnimationFrame(() => {
+                const textarea = document.querySelector<HTMLTextAreaElement>('textarea[data-chat-input="true"]');
+                textarea?.focus();
+            });
+        };
+
+        return (
+            <MobileOverlayPanel
+                open={activeMobilePanel === 'variant'}
+                onClose={closeMobilePanel}
+                title="Thinking"
+            >
+                <div className="flex flex-col gap-1.5">
+                    <button
+                        type="button"
+                        className={cn(
+                            'flex w-full items-center justify-between gap-2 rounded-xl border px-2 py-1.5 text-left',
+                            'focus:outline-none focus-visible:ring-1 focus-visible:ring-primary',
+                            isDefault ? 'border-primary/30 bg-primary/10' : 'border-border/40'
+                        )}
+                        onClick={() => handleSelect(undefined)}
+                    >
+                        <span className="typography-meta font-medium text-foreground">Default</span>
+                        {isDefault && <RiCheckLine className="h-4 w-4 text-primary flex-shrink-0" />}
+                    </button>
+
+                    {availableVariants.map((variant) => {
+                        const selected = currentVariant === variant;
+                        const label = variant.charAt(0).toUpperCase() + variant.slice(1);
+
+                        return (
+                            <button
+                                key={variant}
+                                type="button"
+                                className={cn(
+                                    'flex w-full items-center justify-between gap-2 rounded-xl border px-2 py-1.5 text-left',
+                                    'focus:outline-none focus-visible:ring-1 focus-visible:ring-primary',
+                                    selected ? 'border-primary/30 bg-primary/10' : 'border-border/40'
+                                )}
+                                onClick={() => handleSelect(variant)}
+                            >
+                                <span className="typography-meta font-medium text-foreground">{label}</span>
+                                {selected && <RiCheckLine className="h-4 w-4 text-primary flex-shrink-0" />}
+                            </button>
+                        );
+                    })}
+                </div>
+            </MobileOverlayPanel>
+        );
+    };
+
    const renderMobileAgentPanel = () => {
        if (!isCompact) return null;
-
+ 
        const primaryAgents = agents.filter(agent => isPrimaryMode(agent.mode));
-
+ 
        return (
            <MobileOverlayPanel
                open={activeMobilePanel === 'agent'}
@@ -2152,6 +2281,94 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
        );
    };

+    const renderVariantSelector = () => {
+        if (!hasVariants) {
+            return null;
+        }
+
+        const displayVariant = currentVariant ?? 'Default';
+        const isDefault = !currentVariant;
+        const colorClass = isDefault ? 'text-muted-foreground' : 'text-[color:var(--status-info)]';
+
+        if (isCompact) {
+            return (
+                <button
+                    type="button"
+                    onClick={() => setActiveMobilePanel('variant')}
+                    className={cn(
+                        'model-controls__variant-trigger flex items-center gap-1.5 transition-opacity min-w-0 focus:outline-none',
+                        buttonHeight,
+                        'cursor-pointer hover:opacity-70',
+                    )}
+                >
+                    <RiBrainAi3Line className={cn(controlIconSize, 'flex-shrink-0', colorClass)} />
+                    <span className={cn('model-controls__variant-label', controlTextSize, 'font-medium truncate min-w-0', colorClass)}>
+                        {displayVariant}
+                    </span>
+                </button>
+            );
+        }
+
+        return (
+            <Tooltip delayDuration={800}>
+                <DropdownMenu>
+                    <TooltipTrigger asChild>
+                        <DropdownMenuTrigger asChild>
+                            <div
+                                className={cn(
+                                    'model-controls__variant-trigger flex items-center gap-1.5 transition-opacity cursor-pointer hover:opacity-70 min-w-0',
+                                    buttonHeight,
+                                )}
+                            >
+                                <RiBrainAi3Line className={cn(controlIconSize, 'flex-shrink-0', colorClass)} />
+                                <span
+                                    className={cn(
+                                        'model-controls__variant-label',
+                                        controlTextSize,
+                                        'font-medium min-w-0 truncate',
+                                        isDesktopRuntime ? 'max-w-[180px]' : undefined,
+                                        colorClass,
+                                    )}
+                                >
+                                    {displayVariant}
+                                </span>
+                            </div>
+                        </DropdownMenuTrigger>
+                    </TooltipTrigger>
+                    <DropdownMenuContent align="end" alignOffset={-40} className="w-[min(180px,calc(100vw-2rem))]">
+                        <DropdownMenuLabel className="typography-ui-header font-semibold text-foreground">Thinking</DropdownMenuLabel>
+                        <DropdownMenuItem className="typography-meta" onSelect={() => handleVariantSelect(undefined)}>
+                            <div className="flex items-center justify-between gap-2 w-full min-w-0">
+                                <span className="typography-meta font-medium text-foreground truncate min-w-0">Default</span>
+                                {isDefault && <RiCheckLine className="h-4 w-4 text-primary flex-shrink-0" />}
+                            </div>
+                        </DropdownMenuItem>
+                        {availableVariants.length > 0 && <DropdownMenuSeparator />}
+                        {availableVariants.map((variant) => {
+                            const selected = currentVariant === variant;
+                            const label = variant.charAt(0).toUpperCase() + variant.slice(1);
+                            return (
+                                <DropdownMenuItem
+                                    key={variant}
+                                    className="typography-meta"
+                                    onSelect={() => handleVariantSelect(variant)}
+                                >
+                                    <div className="flex items-center justify-between gap-2 w-full min-w-0">
+                                        <span className="typography-meta font-medium text-foreground truncate min-w-0">{label}</span>
+                                        {selected && <RiCheckLine className="h-4 w-4 text-primary flex-shrink-0" />}
+                                    </div>
+                                </DropdownMenuItem>
+                            );
+                        })}
+                    </DropdownMenuContent>
+                </DropdownMenu>
+                <TooltipContent side="top">
+                    <p className="typography-meta">Thinking: {displayVariant}</p>
+                </TooltipContent>
+            </Tooltip>
+        );
+    };
+
    const renderAgentSelector = () => {
        if (!isCompact) {
            return (
@@ -2344,7 +2561,6 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {

    const inlineClassName = cn(
        '@container/model-controls flex items-center min-w-0',
-        inlineGapClass,
        // Only force full-width + truncation behaviors on true mobile layouts.
        // VS Code also uses "compact" mode, but should keep its right-aligned inline sizing.
        isMobile && 'w-full',
@@ -2357,17 +2573,18 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                <div
                    className={cn(
                        'flex items-center min-w-0 flex-1 justify-end',
+                        inlineGapClass,
                        isMobile && 'overflow-hidden'
                    )}
                >
+                    {renderVariantSelector()}
                    {renderModelSelector()}
-                </div>
-                <div className={cn('flex items-center min-w-0', inlineGapClass, isMobile && 'flex-shrink-0')}>
                    {renderAgentSelector()}
                </div>
            </div>

            {renderMobileModelPanel()}
+            {renderMobileVariantPanel()}
            {renderMobileAgentPanel()}
            {renderMobileModelTooltip()}
            {renderMobileAgentTooltip()}
@@ -10,10 +10,11 @@ interface MessageHeaderProps {
    providerID: string | null;
    agentName: string | undefined;
    modelName: string | undefined;
+    variant?: string;
    isDarkTheme: boolean;
 }

-const MessageHeader: React.FC<MessageHeaderProps> = ({ isUser, providerID, agentName, modelName, isDarkTheme }) => {
+const MessageHeader: React.FC<MessageHeaderProps> = ({ isUser, providerID, agentName, modelName, variant, isDarkTheme }) => {
    const { src: logoSrc, onError: handleLogoError, hasLogo } = useProviderLogo(providerID);

    return (
@@ -67,6 +68,25 @@ const MessageHeader: React.FC<MessageHeaderProps> = ({ isUser, providerID, agent
                                    <span className="font-medium">{agentName}</span>
                                </div>
                            )}
+                            {!isUser && variant && (
+                                <div
+                                    className={cn(
+                                        'flex items-center gap-1 px-1.5 py-0 rounded',
+                                        'agent-badge typography-meta',
+                                        variant === 'Default' ? undefined : 'agent-info'
+                                    )}
+                                    style={
+                                        variant === 'Default'
+                                            ? ({
+                                                  '--agent-color': 'var(--muted-foreground)',
+                                                  '--agent-color-bg': 'var(--muted-foreground)',
+                                              } as React.CSSProperties)
+                                            : undefined
+                                    }
+                                >
+                                    <span className="font-medium">{variant.length > 0 ? variant[0].toLowerCase() + variant.slice(1) : variant}</span>
+                                </div>
+                            )}
                        </div>
                    </div>
                </div>