feat(ui): implement refreshed UX for Composer layout (#21212)

Co-authored-by: Keith Guerin <keithguerin@gmail.com>

packages/cli/src/ui/components/GeminiRespondingSpinner.tsx

@@ -23,14 +23,28 @@ interface GeminiRespondingSpinnerProps {
    */
   nonRespondingDisplay?: string;
   spinnerType?: SpinnerName;
+  /**
+   * If true, we prioritize showing the nonRespondingDisplay (hook icon)
+   * even if the state is Responding.
+   */
+  isHookActive?: boolean;
+  color?: string;
 }
 
 export const GeminiRespondingSpinner: React.FC<
   GeminiRespondingSpinnerProps
-> = ({ nonRespondingDisplay, spinnerType = 'dots' }) => {
+> = ({
+  nonRespondingDisplay,
+  spinnerType = 'dots',
+  isHookActive = false,
+  color,
+}) => {
   const streamingState = useStreamingContext();
   const isScreenReaderEnabled = useIsScreenReaderEnabled();
-  if (streamingState === StreamingState.Responding) {
+
+  // If a hook is active, we want to show the hook icon (nonRespondingDisplay)
+  // to be consistent, instead of the rainbow spinner which means "Gemini is talking".
+  if (streamingState === StreamingState.Responding && !isHookActive) {
     return (
       <GeminiSpinner
         spinnerType={spinnerType}
@@ -43,7 +57,7 @@ export const GeminiRespondingSpinner: React.FC<
     return isScreenReaderEnabled ? (
       <Text>{SCREEN_READER_LOADING}</Text>
     ) : (
-      <Text color={theme.text.primary}>{nonRespondingDisplay}</Text>
+      <Text color={color ?? theme.text.primary}>{nonRespondingDisplay}</Text>
     );
   }