From ffe368afed853f43c9ab8851c1edc86160db8486 Mon Sep 17 00:00:00 2001
From: Taylor Mullen <ntaylormullen@google.com>
Date: Tue, 22 Apr 2025 18:25:03 -0700
Subject: [PATCH] Refactor tool confirmation radio buttons to own component.

- I plan to utilize these radio buttons for theme selection in the future. Refactoring them into their own component.

Part of https://b.corp.google.com/issues/412797985
---
 .../messages/ToolConfirmationMessage.tsx      | 45 +++-------
 .../components/shared/RadioButtonSelect.tsx   | 90 +++++++++++++++++++
 2 files changed, 100 insertions(+), 35 deletions(-)
 create mode 100644 packages/cli/src/ui/components/shared/RadioButtonSelect.tsx

diff --git a/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx b/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx
index abc4fe61..9f65f1b9 100644
--- a/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx
+++ b/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx
@@ -6,7 +6,6 @@
 
 import React from 'react';
 import { Box, Text, useInput } from 'ink';
-import SelectInput from 'ink-select-input';
 import { PartListUnion } from '@google/genai';
 import { DiffRenderer } from './DiffRenderer.js';
 import { UI_WIDTH } from '../../constants.js';
@@ -17,6 +16,10 @@ import {
   ToolConfirmationOutcome,
   ToolExecuteConfirmationDetails,
 } from '@gemini-code/server';
+import {
+  RadioButtonSelect,
+  RadioSelectItem,
+} from '../shared/RadioButtonSelect.js';
 
 export interface ToolConfirmationMessageProps {
   confirmationDetails: ToolCallConfirmationDetails;
@@ -29,11 +32,6 @@ function isEditDetails(
   return (props as ToolEditConfirmationDetails).fileName !== undefined;
 }
 
-interface InternalOption {
-  label: string;
-  value: ToolConfirmationOutcome;
-}
-
 export const ToolConfirmationMessage: React.FC<
   ToolConfirmationMessageProps
 > = ({ confirmationDetails }) => {
@@ -45,13 +43,14 @@ export const ToolConfirmationMessage: React.FC<
     }
   });
 
-  const handleSelect = (item: InternalOption) => {
-    onConfirm(item.value);
-  };
+  const handleSelect = (item: ToolConfirmationOutcome) => onConfirm(item);
 
   let bodyContent: React.ReactNode | null = null; // Removed contextDisplay here
   let question: string;
-  const options: InternalOption[] = [];
+
+  const options: Array<RadioSelectItem<ToolConfirmationOutcome>> = new Array<
+    RadioSelectItem<ToolConfirmationOutcome>
+  >();
 
   if (isEditDetails(confirmationDetails)) {
     // Body content is now the DiffRenderer, passing filename to it
@@ -118,32 +117,8 @@ export const ToolConfirmationMessage: React.FC<
 
       {/* Select Input for Options */}
       <Box flexShrink={0}>
-        <SelectInput
-          indicatorComponent={Indicator}
-          itemComponent={Item}
-          items={options}
-          onSelect={handleSelect}
-        />
+        <RadioButtonSelect items={options} onSelect={handleSelect} />
       </Box>
     </Box>
   );
 };
-
-function Indicator({ isSelected = false }): React.JSX.Element {
-  return (
-    <Text color={isSelected ? Colors.AccentGreen : Colors.Gray}>
-      {isSelected ? '◉ ' : '○ '}
-    </Text>
-  );
-}
-
-export type ItemProps = {
-  readonly isSelected?: boolean;
-  readonly label: string;
-};
-
-function Item({ isSelected = false, label }: ItemProps): React.JSX.Element {
-  return (
-    <Text color={isSelected ? Colors.AccentGreen : Colors.Gray}>{label}</Text>
-  );
-}
diff --git a/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx b/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx
new file mode 100644
index 00000000..7fef19c6
--- /dev/null
+++ b/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx
@@ -0,0 +1,90 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import SelectInput, {
+  type ItemProps as InkSelectItemProps,
+  type IndicatorProps as InkSelectIndicatorProps,
+} from 'ink-select-input';
+import { Colors } from '../../colors.js';
+
+/**
+ * Represents a single option for the RadioButtonSelect.
+ * Requires a label for display and a value to be returned on selection.
+ */
+export interface RadioSelectItem<T> {
+  label: string;
+  value: T;
+}
+
+/**
+ * Props for the RadioButtonSelect component.
+ * @template T The type of the value associated with each radio item.
+ */
+export interface RadioButtonSelectProps<T> {
+  /** An array of items to display as radio options. */
+  items: Array<RadioSelectItem<T>>;
+
+  /** The initial index selected */
+  initialIndex?: number;
+
+  /** Function called when an item is selected. Receives the `value` of the selected item. */
+  onSelect: (value: T) => void;
+}
+
+/**
+ * Custom indicator component displaying radio button style (◉/○).
+ */
+function RadioIndicator({
+  isSelected = false,
+}: InkSelectIndicatorProps): React.JSX.Element {
+  return (
+    <Box marginRight={1}>
+      <Text color={isSelected ? Colors.AccentGreen : Colors.Gray}>
+        {isSelected ? '◉' : '○'}
+      </Text>
+    </Box>
+  );
+}
+
+/**
+ * Custom item component for displaying the label with appropriate color.
+ */
+function RadioItem({
+  isSelected = false,
+  label,
+}: InkSelectItemProps): React.JSX.Element {
+  return (
+    <Text color={isSelected ? Colors.AccentGreen : Colors.Gray}>{label}</Text>
+  );
+}
+
+/**
+ * A specialized SelectInput component styled to look like radio buttons.
+ * It uses '◉' for selected and '○' for unselected items.
+ *
+ * @template T The type of the value associated with each radio item.
+ */
+export function RadioButtonSelect<T>({
+  items,
+  initialIndex,
+  onSelect,
+}: RadioButtonSelectProps<T>): React.JSX.Element {
+  const handleSelect = (item: RadioSelectItem<T>) => {
+    onSelect(item.value);
+  };
+  initialIndex = initialIndex ?? 0;
+  return (
+    <SelectInput
+      indicatorComponent={RadioIndicator}
+      itemComponent={RadioItem}
+      items={items}
+      initialIndex={initialIndex}
+      onSelect={handleSelect}
+    />
+  );
+}