feat(cli): Add /model command for interactive model selection (#8940)

Co-authored-by: Miguel Solorio <miguel.solorio07@gmail.com>
2026-04-21 10:34:35 -07:00 · 2025-09-23 12:50:09 -04:00
parent c96f8259c1
commit 5151bedf06
19 changed files with 743 additions and 1 deletions
@@ -0,0 +1,107 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { useCallback, useContext, useMemo } from 'react';
+import { Box, Text } from 'ink';
+import {
+  DEFAULT_GEMINI_FLASH_LITE_MODEL,
+  DEFAULT_GEMINI_FLASH_MODEL,
+  DEFAULT_GEMINI_MODEL,
+  DEFAULT_GEMINI_MODEL_AUTO,
+} from '@google/gemini-cli-core';
+import { useKeypress } from '../hooks/useKeypress.js';
+import { theme } from '../semantic-colors.js';
+import { DescriptiveRadioButtonSelect } from './shared/DescriptiveRadioButtonSelect.js';
+import { ConfigContext } from '../contexts/ConfigContext.js';
+
+interface ModelDialogProps {
+  onClose: () => void;
+}
+
+const MODEL_OPTIONS = [
+  {
+    value: DEFAULT_GEMINI_MODEL_AUTO,
+    title: 'Auto (recommended)',
+    description: 'Let the system choose the best model for your task',
+  },
+  {
+    value: DEFAULT_GEMINI_MODEL,
+    title: 'Pro',
+    description: 'For complex tasks that require deep reasoning and creativity',
+  },
+  {
+    value: DEFAULT_GEMINI_FLASH_MODEL,
+    title: 'Flash',
+    description: 'For tasks that need a balance of speed and reasoning',
+  },
+  {
+    value: DEFAULT_GEMINI_FLASH_LITE_MODEL,
+    title: 'Flash-Lite',
+    description: 'For simple tasks that need to be done quickly',
+  },
+];
+
+export function ModelDialog({ onClose }: ModelDialogProps): React.JSX.Element {
+  const config = useContext(ConfigContext);
+
+  // Determine the Preferred Model (read once when the dialog opens).
+  const preferredModel = config?.getModel() || DEFAULT_GEMINI_MODEL_AUTO;
+
+  useKeypress(
+    (key) => {
+      if (key.name === 'escape') {
+        onClose();
+      }
+    },
+    { isActive: true },
+  );
+
+  // Calculate the initial index based on the preferred model.
+  const initialIndex = useMemo(
+    () => MODEL_OPTIONS.findIndex((option) => option.value === preferredModel),
+    [preferredModel],
+  );
+
+  // Handle selection internally (Autonomous Dialog).
+  const handleSelect = useCallback(
+    (model: string) => {
+      if (config) {
+        config.setModel(model);
+      }
+      onClose();
+    },
+    [config, onClose],
+  );
+
+  return (
+    <Box
+      borderStyle="round"
+      borderColor={theme.border.default}
+      flexDirection="column"
+      padding={1}
+      width="100%"
+    >
+      <Text bold>Select Model</Text>
+      <Box marginTop={1}>
+        <DescriptiveRadioButtonSelect
+          items={MODEL_OPTIONS}
+          onSelect={handleSelect}
+          initialIndex={initialIndex}
+          showNumbers={true}
+        />
+      </Box>
+      <Box flexDirection="column">
+        <Text color={theme.text.secondary}>
+          {'> To use a specific Gemini model, use the --model flag.'}
+        </Text>
+      </Box>
+      <Box marginTop={1} flexDirection="column">
+        <Text color={theme.text.secondary}>(Press Esc to close)</Text>
+      </Box>
+    </Box>
+  );
+}