diff --git a/CHANGELOG.md b/CHANGELOG.md index eb06704c..e667c9d3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ All notable changes to this project will be documented in this file. ## [Unreleased] +- Adjusted model/agent selection alignment ## [1.1.0] - 2025-12-13 diff --git a/packages/desktop/src-tauri/Cargo.lock b/packages/desktop/src-tauri/Cargo.lock index 9eec912f..7890db71 100644 --- a/packages/desktop/src-tauri/Cargo.lock +++ b/packages/desktop/src-tauri/Cargo.lock @@ -2847,7 +2847,7 @@ dependencies = [ [[package]] name = "openchamber-desktop" -version = "1.0.9" +version = "1.1.0" dependencies = [ "anyhow", "axum", diff --git a/packages/ui/src/components/chat/ModelControls.tsx b/packages/ui/src/components/chat/ModelControls.tsx index 094bea4a..f4639f6e 100644 --- a/packages/ui/src/components/chat/ModelControls.tsx +++ b/packages/ui/src/components/chat/ModelControls.tsx @@ -1,5 +1,24 @@ import React from 'react'; import type { ComponentType } from 'react'; +import { + RiAiAgentLine, + RiArrowDownSLine, + RiArrowRightSLine, + RiBrainAi3Line, + RiCheckboxCircleLine, + RiCloseCircleLine, + RiFileImageLine, + RiFileMusicLine, + RiFilePdfLine, + RiFileVideoLine, + RiPencilAiLine, + RiQuestionLine, + RiSearchLine, + RiText, + RiToolsLine, +} from '@remixicon/react'; +import type { EditPermissionMode } from '@/stores/types/sessionTypes'; +import type { ModelMetadata } from '@/types'; import { DropdownMenu, DropdownMenuContent, @@ -10,30 +29,26 @@ import { DropdownMenuSubTrigger, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; -import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'; import { Input } from '@/components/ui/input'; -import { RiAiAgentLine, RiArrowDownSLine, RiArrowRightSLine, RiBrainAi3Line, RiCheckboxCircleLine, RiCloseCircleLine, RiFileImageLine, RiFileMusicLine, RiFilePdfLine, RiFileVideoLine, RiPencilAiLine, RiQuestionLine, RiSearchLine, RiText, RiToolsLine } from '@remixicon/react'; -import type { ModelMetadata } from '@/types'; -import type { EditPermissionMode } from '@/stores/types/sessionTypes'; +import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel'; +import { ProviderLogo } from '@/components/ui/ProviderLogo'; +import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay'; +import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'; +import { useIsDesktopRuntime, useIsVSCodeRuntime } from '@/hooks/useRuntimeAPIs'; +import { getAgentColor } from '@/lib/agentColors'; +import { useDeviceInfo } from '@/lib/device'; +import { calculateEditPermissionUIState, type BashPermissionSetting } from '@/lib/permissions/editPermissionDefaults'; import { getEditModeColors } from '@/lib/permissions/editModeColors'; +import { cn } from '@/lib/utils'; +import { useContextStore } from '@/stores/contextStore'; +import { useConfigStore } from '@/stores/useConfigStore'; +import { useSessionStore } from '@/stores/useSessionStore'; // eslint-disable-next-line @typescript-eslint/no-explicit-any type IconComponent = ComponentType; type ProviderModel = Record & { id?: string; name?: string }; -import { useConfigStore } from '@/stores/useConfigStore'; -import { useSessionStore } from '@/stores/useSessionStore'; -import { useContextStore } from '@/stores/contextStore'; -import { useDeviceInfo } from '@/lib/device'; -import { useIsVSCodeRuntime } from '@/hooks/useRuntimeAPIs'; -import { cn } from '@/lib/utils'; -import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel'; -import { getAgentColor } from '@/lib/agentColors'; -import { ProviderLogo } from '@/components/ui/ProviderLogo'; -import { calculateEditPermissionUIState, type BashPermissionSetting } from '@/lib/permissions/editPermissionDefaults'; -import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay'; - const isPrimaryMode = (mode?: string) => mode === 'primary' || mode === 'all' || mode === undefined || mode === null; interface CapabilityDefinition { @@ -216,6 +231,7 @@ export const ModelControls: React.FC = ({ className }) => { const contextHydrated = useContextStore((state) => state.hasHydrated); const { isMobile } = useDeviceInfo(); + const isDesktopRuntime = useIsDesktopRuntime(); const isVSCodeRuntime = useIsVSCodeRuntime(); const isCompact = isMobile || isVSCodeRuntime; const [activeMobilePanel, setActiveMobilePanel] = React.useState<'model' | 'agent' | null>(null); @@ -1456,7 +1472,8 @@ export const ModelControls: React.FC = ({ className }) => {
@@ -1476,7 +1493,8 @@ export const ModelControls: React.FC = ({ className }) => { className={cn( 'model-controls__model-label', controlTextSize, - 'font-medium whitespace-nowrap text-foreground truncate min-w-0 flex-1' + 'font-medium whitespace-nowrap text-foreground truncate min-w-0', + isDesktopRuntime ? 'max-w-[260px]' : 'flex-1' )} > {getCurrentModelDisplayName()} @@ -1762,7 +1780,7 @@ export const ModelControls: React.FC = ({ className }) => {
= ({ className }) => { /> @@ -1946,7 +1966,12 @@ export const ModelControls: React.FC = ({ className }) => { return ( <>
-
+
{renderModelSelector()}