From 91ee02898a7d0fad1e5a6c72492a91a60515bed7 Mon Sep 17 00:00:00 2001 From: Jacob Richman Date: Fri, 23 May 2025 10:25:17 -0700 Subject: [PATCH] feat: Modify loading indicator to support a paused state (#506) --- packages/cli/src/ui/App.tsx | 16 +- .../src/ui/components/HistoryItemDisplay.tsx | 5 +- .../ui/components/LoadingIndicator.test.tsx | 94 ++++++++++ .../src/ui/components/LoadingIndicator.tsx | 15 +- .../components/messages/ToolGroupMessage.tsx | 9 +- .../components/messages/ToolMessage.test.tsx | 152 ++++++++++++++++ .../ui/components/messages/ToolMessage.tsx | 33 +++- packages/cli/src/ui/hooks/useGeminiStream.ts | 16 +- .../src/ui/hooks/useLoadingIndicator.test.ts | 164 ++++++++++++++++++ .../cli/src/ui/hooks/useLoadingIndicator.ts | 88 +++++++--- 10 files changed, 542 insertions(+), 50 deletions(-) create mode 100644 packages/cli/src/ui/components/LoadingIndicator.test.tsx create mode 100644 packages/cli/src/ui/components/messages/ToolMessage.test.tsx create mode 100644 packages/cli/src/ui/hooks/useLoadingIndicator.test.ts diff --git a/packages/cli/src/ui/App.tsx b/packages/cli/src/ui/App.tsx index 4921c93e..ac36b87c 100644 --- a/packages/cli/src/ui/App.tsx +++ b/packages/cli/src/ui/App.tsx @@ -182,8 +182,17 @@ export const App = ({ handleSlashCommand, shellModeActive, ); - const { elapsedTime, currentLoadingPhrase } = - useLoadingIndicator(streamingState); + const isPausedForConfirmation = useMemo( + () => + pendingHistoryItems.some( + (item) => + item?.type === 'tool_group' && + item.tools.some((tool) => tool.status === 'Confirming'), + ), + [pendingHistoryItems], + ); + const { elapsedTime, currentLoadingPhrase, shouldShowSpinner } = + useLoadingIndicator(streamingState, isPausedForConfirmation); const showAutoAcceptIndicator = useAutoAcceptIndicator({ config }); const handleFinalSubmit = useCallback( @@ -302,6 +311,7 @@ export const App = ({ key={h.id} item={h} isPending={false} + streamingState={streamingState} /> )), ]} @@ -317,6 +327,7 @@ export const App = ({ // HistoryItemDisplay. Refactor later. Use a fake id for now. item={{ ...item, id: 0 }} isPending={true} + streamingState={streamingState} /> ))} @@ -356,6 +367,7 @@ export const App = ({ <> diff --git a/packages/cli/src/ui/components/HistoryItemDisplay.tsx b/packages/cli/src/ui/components/HistoryItemDisplay.tsx index 0b61fc04..9a93d09f 100644 --- a/packages/cli/src/ui/components/HistoryItemDisplay.tsx +++ b/packages/cli/src/ui/components/HistoryItemDisplay.tsx @@ -5,7 +5,7 @@ */ import React from 'react'; -import type { HistoryItem } from '../types.js'; +import type { HistoryItem, StreamingState } from '../types.js'; import { UserMessage } from './messages/UserMessage.js'; import { UserShellMessage } from './messages/UserShellMessage.js'; import { GeminiMessage } from './messages/GeminiMessage.js'; @@ -19,12 +19,14 @@ interface HistoryItemDisplayProps { item: HistoryItem; availableTerminalHeight: number; isPending: boolean; + streamingState?: StreamingState; } export const HistoryItemDisplay: React.FC = ({ item, availableTerminalHeight, isPending, + streamingState, }) => ( {/* Render standard message types */} @@ -51,6 +53,7 @@ export const HistoryItemDisplay: React.FC = ({ toolCalls={item.tools} groupId={item.id} availableTerminalHeight={availableTerminalHeight} + streamingState={streamingState} /> )} diff --git a/packages/cli/src/ui/components/LoadingIndicator.test.tsx b/packages/cli/src/ui/components/LoadingIndicator.test.tsx new file mode 100644 index 00000000..6a8880d4 --- /dev/null +++ b/packages/cli/src/ui/components/LoadingIndicator.test.tsx @@ -0,0 +1,94 @@ +/** + * @license + * Copyright 2025 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +import { render } from 'ink-testing-library'; +import { Text } from 'ink'; // Import Text directly from ink +import { LoadingIndicator } from './LoadingIndicator.js'; + +vi.mock('ink-spinner', () => ({ + default: function MockSpinner() { + return MockSpinner; + }, +})); + +describe('', () => { + it('should not render when isLoading is false', () => { + const { lastFrame } = render( + , + ); + expect(lastFrame()).toBe(''); + }); + + it('should render spinner, phrase, and time when isLoading is true and showSpinner is true', () => { + const phrase = 'Processing data...'; + const time = 5; + const { lastFrame } = render( + , + ); + + const output = lastFrame(); + expect(output).toContain(phrase); + expect(output).toContain(`(esc to cancel, ${time}s)`); + // Check for spinner presence by looking for its characteristic characters or structure + // This is a bit fragile as it depends on Spinner's output. + // A more robust way would be to mock Spinner and check if it was rendered. + expect(output).toContain('MockSpinner'); // Check for the mocked spinner text + }); + + it('should render phrase and time but no spinner when isLoading is true and showSpinner is false', () => { + const phrase = 'Waiting for input...'; + const time = 10; + const { lastFrame } = render( + , + ); + const output = lastFrame(); + expect(output).toContain(phrase); + expect(output).toContain(`(esc to cancel, ${time}s)`); + // Ensure spinner characters are NOT present + expect(output).not.toContain('MockSpinner'); + }); + + it('should display the currentLoadingPhrase correctly', () => { + const specificPhrase = 'Almost there!'; + const { lastFrame } = render( + , + ); + expect(lastFrame()).toContain(specificPhrase); + }); + + it('should display the elapsedTime correctly', () => { + const specificTime = 7; + const { lastFrame } = render( + , + ); + expect(lastFrame()).toContain(`(esc to cancel, ${specificTime}s)`); + }); +}); diff --git a/packages/cli/src/ui/components/LoadingIndicator.tsx b/packages/cli/src/ui/components/LoadingIndicator.tsx index 4f342c9d..b0c24f80 100644 --- a/packages/cli/src/ui/components/LoadingIndicator.tsx +++ b/packages/cli/src/ui/components/LoadingIndicator.tsx @@ -11,6 +11,7 @@ import { Colors } from '../colors.js'; interface LoadingIndicatorProps { isLoading: boolean; + showSpinner: boolean; currentLoadingPhrase: string; elapsedTime: number; rightContent?: React.ReactNode; @@ -18,21 +19,25 @@ interface LoadingIndicatorProps { export const LoadingIndicator: React.FC = ({ isLoading, + showSpinner, currentLoadingPhrase, elapsedTime, rightContent, }) => { if (!isLoading) { - return null; // Don't render anything if not loading + return null; } return ( - - - + {showSpinner && ( + + + + )} - {currentLoadingPhrase} (esc to cancel, {elapsedTime}s) + {currentLoadingPhrase} + {isLoading && ` (esc to cancel, ${elapsedTime}s)`} {/* Spacer */} {rightContent && {rightContent}} diff --git a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx index 8bcde3bb..c6c8b874 100644 --- a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx +++ b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx @@ -6,7 +6,11 @@ import React, { useMemo } from 'react'; import { Box } from 'ink'; -import { IndividualToolCallDisplay, ToolCallStatus } from '../../types.js'; +import { + IndividualToolCallDisplay, + StreamingState, + ToolCallStatus, +} from '../../types.js'; import { ToolMessage } from './ToolMessage.js'; import { ToolConfirmationMessage } from './ToolConfirmationMessage.js'; import { Colors } from '../../colors.js'; @@ -15,12 +19,14 @@ interface ToolGroupMessageProps { groupId: number; toolCalls: IndividualToolCallDisplay[]; availableTerminalHeight: number; + streamingState?: StreamingState; } // Main component renders the border and maps the tools using ToolMessage export const ToolGroupMessage: React.FC = ({ toolCalls, availableTerminalHeight, + streamingState, }) => { const hasPending = !toolCalls.every( (t) => t.status === ToolCallStatus.Success, @@ -72,6 +78,7 @@ export const ToolGroupMessage: React.FC = ({ ? 'low' : 'medium' } + streamingState={streamingState} /> {tool.status === ToolCallStatus.Confirming && diff --git a/packages/cli/src/ui/components/messages/ToolMessage.test.tsx b/packages/cli/src/ui/components/messages/ToolMessage.test.tsx new file mode 100644 index 00000000..1c81cc36 --- /dev/null +++ b/packages/cli/src/ui/components/messages/ToolMessage.test.tsx @@ -0,0 +1,152 @@ +/** + * @license + * Copyright 2025 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +import { render } from 'ink-testing-library'; +import { ToolMessage, ToolMessageProps } from './ToolMessage.js'; +import { StreamingState, ToolCallStatus } from '../../types.js'; +import { Text } from 'ink'; + +// Mock child components or utilities if they are complex or have side effects +vi.mock('ink-spinner', () => ({ + default: () => MockSpinner, +})); +vi.mock('./DiffRenderer.js', () => ({ + DiffRenderer: function MockDiffRenderer({ + diffContent, + }: { + diffContent: string; + }) { + return MockDiff:{diffContent}; + }, +})); +vi.mock('../../utils/MarkdownDisplay.js', () => ({ + MarkdownDisplay: function MockMarkdownDisplay({ text }: { text: string }) { + return MockMarkdown:{text}; + }, +})); + +describe('', () => { + const baseProps: ToolMessageProps = { + callId: 'tool-123', + name: 'test-tool', + description: 'A tool for testing', + resultDisplay: 'Test result', + status: ToolCallStatus.Success, + availableTerminalHeight: 20, + confirmationDetails: undefined, + emphasis: 'medium', + streamingState: StreamingState.Idle, + }; + + it('renders basic tool information', () => { + const { lastFrame } = render(); + const output = lastFrame(); + expect(output).toContain('✔'); // Success indicator + expect(output).toContain('test-tool'); + expect(output).toContain('A tool for testing'); + expect(output).toContain('MockMarkdown:Test result'); + }); + + describe('ToolStatusIndicator rendering', () => { + it('shows ✔ for Success status', () => { + const { lastFrame } = render( + , + ); + expect(lastFrame()).toContain('✔'); + }); + + it('shows o for Pending status', () => { + const { lastFrame } = render( + , + ); + expect(lastFrame()).toContain('o'); + }); + + it('shows ? for Confirming status', () => { + const { lastFrame } = render( + , + ); + expect(lastFrame()).toContain('?'); + }); + + it('shows - for Canceled status', () => { + const { lastFrame } = render( + , + ); + expect(lastFrame()).toContain('-'); + }); + + it('shows x for Error status', () => { + const { lastFrame } = render( + , + ); + expect(lastFrame()).toContain('x'); + }); + + it('shows MockSpinner for Executing status when streamingState is Idle', () => { + const { lastFrame } = render( + , + ); + expect(lastFrame()).toContain('MockSpinner'); + expect(lastFrame()).not.toContain('✔'); + }); + + it('shows MockSpinner for Executing status when streamingState is undefined (default behavior)', () => { + const { lastFrame } = render( + , + ); + expect(lastFrame()).toContain('MockSpinner'); + expect(lastFrame()).not.toContain('✔'); + }); + + it('shows ✔ (paused/confirmed look) for Executing status when streamingState is Responding', () => { + // This is the key change from the commit: if the overall app is still responding + // (e.g., waiting for other tool confirmations), an already confirmed and executing tool + // should show a static checkmark to avoid spinner flicker. + const { lastFrame } = render( + , + ); + expect(lastFrame()).toContain('✔'); // Should be a checkmark, not spinner + expect(lastFrame()).not.toContain('MockSpinner'); + }); + }); + + it('renders DiffRenderer for diff results', () => { + const diffResult = { + fileDiff: '--- a/file.txt\n+++ b/file.txt\n@@ -1 +1 @@\n-old\n+new', + fileName: 'file.txt', + }; + const { lastFrame } = render( + , + ); + // Check that the output contains the MockDiff content as part of the whole message + expect(lastFrame()).toMatch(/MockDiff:--- a\/file\.txt/); + }); + + it('renders emphasis correctly', () => { + const { lastFrame: highEmphasisFrame } = render( + , + ); + // Check for trailing indicator or specific color if applicable (Colors are not easily testable here) + expect(highEmphasisFrame()).toContain('←'); // Trailing indicator for high emphasis + + const { lastFrame: lowEmphasisFrame } = render( + , + ); + // For low emphasis, the name and description might be dimmed (check for dimColor if possible) + // This is harder to assert directly in text output without color checks. + // We can at least ensure it doesn't have the high emphasis indicator. + expect(lowEmphasisFrame()).not.toContain('←'); + }); +}); diff --git a/packages/cli/src/ui/components/messages/ToolMessage.tsx b/packages/cli/src/ui/components/messages/ToolMessage.tsx index 32b3b7e8..49743190 100644 --- a/packages/cli/src/ui/components/messages/ToolMessage.tsx +++ b/packages/cli/src/ui/components/messages/ToolMessage.tsx @@ -7,7 +7,11 @@ import React from 'react'; import { Box, Text } from 'ink'; import Spinner from 'ink-spinner'; -import { IndividualToolCallDisplay, ToolCallStatus } from '../../types.js'; +import { + IndividualToolCallDisplay, + StreamingState, + ToolCallStatus, +} from '../../types.js'; import { DiffRenderer } from './DiffRenderer.js'; import { Colors } from '../../colors.js'; import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js'; @@ -21,6 +25,7 @@ export type TextEmphasis = 'high' | 'medium' | 'low'; export interface ToolMessageProps extends IndividualToolCallDisplay { availableTerminalHeight: number; emphasis?: TextEmphasis; + streamingState?: StreamingState; } export const ToolMessage: React.FC = ({ @@ -30,6 +35,7 @@ export const ToolMessage: React.FC = ({ status, availableTerminalHeight, emphasis = 'medium', + streamingState, }) => { const contentHeightEstimate = availableTerminalHeight - STATIC_HEIGHT - RESERVED_LINE_COUNT; @@ -57,7 +63,7 @@ export const ToolMessage: React.FC = ({ {/* Status Indicator */} - + = ({ ); }; -type ToolStatusIndicator = { +type ToolStatusIndicatorProps = { status: ToolCallStatus; + streamingState?: StreamingState; }; -const ToolStatusIndicator: React.FC = ({ status }) => ( +const ToolStatusIndicator: React.FC = ({ + status, + streamingState, +}) => ( {status === ToolCallStatus.Pending && ( o )} - {status === ToolCallStatus.Executing && } + {status === ToolCallStatus.Executing && + (streamingState === StreamingState.Responding ? ( + // If the tool is responding that means the user has already confirmed + // this tool call, so we can show a checkmark. The call won't complete + // executing until all confirmations are done. Showing a spinner would + // be misleading as the task is not actually executing at the moment + // and also has flickering issues due to Ink rendering limitations. + // If this hack becomes a problem, we can always add an additional prop + // indicating that the tool was indeed confirmed. If the tool was not + // confirmed we could show a paused version of the spinner. + ✔ + ) : ( + + ))} {status === ToolCallStatus.Success && ( ✔ )} diff --git a/packages/cli/src/ui/hooks/useGeminiStream.ts b/packages/cli/src/ui/hooks/useGeminiStream.ts index 8468e61b..45415f39 100644 --- a/packages/cli/src/ui/hooks/useGeminiStream.ts +++ b/packages/cli/src/ui/hooks/useGeminiStream.ts @@ -414,15 +414,13 @@ export const useGeminiStream = ( return StreamProcessingStatus.Completed; }; - const streamingState: StreamingState = (() => { - if (toolCalls.some((t) => t.status === 'awaiting_approval')) { - return StreamingState.WaitingForConfirmation; - } - if (isResponding || toolCalls.some((t) => t.status === 'executing')) { - return StreamingState.Responding; - } - return StreamingState.Idle; - })(); + const streamingState: StreamingState = + isResponding || + toolCalls.some( + (t) => t.status === 'awaiting_approval' || t.status === 'executing', + ) + ? StreamingState.Responding + : StreamingState.Idle; const submitQuery = useCallback( async (query: PartListUnion) => { diff --git a/packages/cli/src/ui/hooks/useLoadingIndicator.test.ts b/packages/cli/src/ui/hooks/useLoadingIndicator.test.ts new file mode 100644 index 00000000..496e13d3 --- /dev/null +++ b/packages/cli/src/ui/hooks/useLoadingIndicator.test.ts @@ -0,0 +1,164 @@ +/** + * @license + * Copyright 2025 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; +import { renderHook, act } from '@testing-library/react'; +import { useLoadingIndicator } from './useLoadingIndicator.js'; +import { StreamingState } from '../types.js'; +import { + WITTY_LOADING_PHRASES, + PHRASE_CHANGE_INTERVAL_MS, +} from '../constants.js'; + +describe('useLoadingIndicator', () => { + beforeEach(() => { + vi.useFakeTimers(); + }); + + afterEach(() => { + vi.restoreAllMocks(); + }); + + it('should initialize with default values when not responding', () => { + const { result } = renderHook(() => + useLoadingIndicator(StreamingState.Idle, false), + ); + expect(result.current.elapsedTime).toBe(0); + expect(result.current.currentLoadingPhrase).toBe(WITTY_LOADING_PHRASES[0]); + expect(result.current.shouldShowSpinner).toBe(true); + }); + + describe('when streamingState is Responding', () => { + it('should increment elapsedTime and cycle phrases when not paused', () => { + const { result } = renderHook(() => + useLoadingIndicator(StreamingState.Responding, false), + ); + expect(result.current.shouldShowSpinner).toBe(true); + expect(result.current.currentLoadingPhrase).toBe( + WITTY_LOADING_PHRASES[0], + ); + + act(() => { + vi.advanceTimersByTime(1000); + }); + expect(result.current.elapsedTime).toBe(1); + + act(() => { + vi.advanceTimersByTime(PHRASE_CHANGE_INTERVAL_MS); + }); + expect(result.current.currentLoadingPhrase).toBe( + WITTY_LOADING_PHRASES[1], + ); + expect(result.current.elapsedTime).toBe( + 1 + PHRASE_CHANGE_INTERVAL_MS / 1000, + ); + }); + + it('should pause elapsedTime, show specific phrase, and hide spinner when paused', () => { + const { result, rerender } = renderHook( + ({ isPaused }) => + useLoadingIndicator(StreamingState.Responding, isPaused), + { initialProps: { isPaused: false } }, + ); + + act(() => { + vi.advanceTimersByTime(2000); + }); + expect(result.current.elapsedTime).toBe(2); + expect(result.current.shouldShowSpinner).toBe(true); + + rerender({ isPaused: true }); + + expect(result.current.currentLoadingPhrase).toBe( + 'Waiting for user confirmation...', + ); + expect(result.current.shouldShowSpinner).toBe(false); + + // Time should not advance while paused + const timeBeforePauseAdv = result.current.elapsedTime; + act(() => { + vi.advanceTimersByTime(3000); + }); + expect(result.current.elapsedTime).toBe(timeBeforePauseAdv); + + // Unpause + rerender({ isPaused: false }); + expect(result.current.shouldShowSpinner).toBe(true); + // Phrase should reset to the beginning of witty phrases + expect(result.current.currentLoadingPhrase).toBe( + WITTY_LOADING_PHRASES[0], + ); + + act(() => { + vi.advanceTimersByTime(1000); + }); + // Elapsed time should resume from where it left off + expect(result.current.elapsedTime).toBe(timeBeforePauseAdv + 1); + }); + + it('should reset timer and phrase when streamingState changes from Responding to Idle', () => { + const { result, rerender } = renderHook( + ({ streamingState }) => useLoadingIndicator(streamingState, false), + { initialProps: { streamingState: StreamingState.Responding } }, + ); + + act(() => { + vi.advanceTimersByTime(PHRASE_CHANGE_INTERVAL_MS + 1000); + }); + expect(result.current.elapsedTime).toBe( + PHRASE_CHANGE_INTERVAL_MS / 1000 + 1, + ); + expect(result.current.currentLoadingPhrase).toBe( + WITTY_LOADING_PHRASES[1], + ); + + rerender({ streamingState: StreamingState.Idle }); + + expect(result.current.elapsedTime).toBe(0); + // When idle, the phrase interval should be cleared, but the last phrase might persist + // until the next "Responding" state. The important part is that the timer is reset. + // Depending on exact timing, it might be the last witty phrase or the first. + // For this test, we'll ensure it's one of them. + expect(WITTY_LOADING_PHRASES).toContain( + result.current.currentLoadingPhrase, + ); + }); + }); + + it('should clear intervals on unmount', () => { + const { unmount } = renderHook(() => + useLoadingIndicator(StreamingState.Responding, false), + ); + const clearIntervalSpy = vi.spyOn(global, 'clearInterval'); + unmount(); + // Expecting two intervals (elapsedTime and phraseInterval) to be cleared. + expect(clearIntervalSpy).toHaveBeenCalledTimes(2); + }); + + it('should reset to initial witty phrase when unpaused', () => { + const { result, rerender } = renderHook( + ({ isPaused }) => + useLoadingIndicator(StreamingState.Responding, isPaused), + { initialProps: { isPaused: false } }, + ); + + // Advance to the second witty phrase + act(() => { + vi.advanceTimersByTime(PHRASE_CHANGE_INTERVAL_MS); + }); + expect(result.current.currentLoadingPhrase).toBe(WITTY_LOADING_PHRASES[1]); + + // Pause + rerender({ isPaused: true }); + expect(result.current.currentLoadingPhrase).toBe( + 'Waiting for user confirmation...', + ); + + // Unpause + rerender({ isPaused: false }); + expect(result.current.currentLoadingPhrase).toBe(WITTY_LOADING_PHRASES[0]); + }); +}); diff --git a/packages/cli/src/ui/hooks/useLoadingIndicator.ts b/packages/cli/src/ui/hooks/useLoadingIndicator.ts index 6d1d77d4..ac75986a 100644 --- a/packages/cli/src/ui/hooks/useLoadingIndicator.ts +++ b/packages/cli/src/ui/hooks/useLoadingIndicator.ts @@ -11,7 +11,10 @@ import { } from '../constants.js'; import { StreamingState } from '../types.js'; -export const useLoadingIndicator = (streamingState: StreamingState) => { +export const useLoadingIndicator = ( + streamingState: StreamingState, + isPaused: boolean, +) => { const [elapsedTime, setElapsedTime] = useState(0); const [currentLoadingPhrase, setCurrentLoadingPhrase] = useState( WITTY_LOADING_PHRASES[0], @@ -20,48 +23,79 @@ export const useLoadingIndicator = (streamingState: StreamingState) => { const phraseIntervalRef = useRef(null); const currentPhraseIndexRef = useRef(0); - // Timer effect for elapsed time during loading + const [shouldShowSpinner, setShouldShowSpinner] = useState(true); + useEffect(() => { if (streamingState === StreamingState.Responding) { - setElapsedTime(0); // Reset timer on new loading start - timerRef.current = setInterval(() => { - setElapsedTime((prevTime) => prevTime + 1); - }, 1000); - } else if (timerRef.current) { - clearInterval(timerRef.current); - timerRef.current = null; + if (!isPaused) { + if (!timerRef.current) { + // No specific action needed here if timer wasn't running and we are not paused. + // Elapsed time continues from where it left off or starts from 0 if it's a fresh start. + } + if (timerRef.current) clearInterval(timerRef.current); + timerRef.current = setInterval(() => { + setElapsedTime((prevTime) => prevTime + 1); + }, 1000); + } else { + if (timerRef.current) { + clearInterval(timerRef.current); + timerRef.current = null; + } + } + } else { + if (timerRef.current) { + clearInterval(timerRef.current); + timerRef.current = null; + } + setElapsedTime(0); } - // Cleanup on unmount or when isLoading changes + return () => { if (timerRef.current) { clearInterval(timerRef.current); + timerRef.current = null; } }; - }, [streamingState]); + }, [streamingState, isPaused]); - // Effect for cycling through witty loading phrases useEffect(() => { if (streamingState === StreamingState.Responding) { - currentPhraseIndexRef.current = 0; - setCurrentLoadingPhrase(WITTY_LOADING_PHRASES[0]); - phraseIntervalRef.current = setInterval(() => { - currentPhraseIndexRef.current = - (currentPhraseIndexRef.current + 1) % WITTY_LOADING_PHRASES.length; - setCurrentLoadingPhrase( - WITTY_LOADING_PHRASES[currentPhraseIndexRef.current], - ); - }, PHRASE_CHANGE_INTERVAL_MS); - } else if (phraseIntervalRef.current) { - clearInterval(phraseIntervalRef.current); - phraseIntervalRef.current = null; + if (!isPaused) { + setShouldShowSpinner(true); + if (!phraseIntervalRef.current) { + currentPhraseIndexRef.current = 0; + setCurrentLoadingPhrase(WITTY_LOADING_PHRASES[0]); + phraseIntervalRef.current = setInterval(() => { + currentPhraseIndexRef.current = + (currentPhraseIndexRef.current + 1) % + WITTY_LOADING_PHRASES.length; + setCurrentLoadingPhrase( + WITTY_LOADING_PHRASES[currentPhraseIndexRef.current], + ); + }, PHRASE_CHANGE_INTERVAL_MS); + } + } else { + setShouldShowSpinner(false); + setCurrentLoadingPhrase('Waiting for user confirmation...'); + if (phraseIntervalRef.current) { + clearInterval(phraseIntervalRef.current); + phraseIntervalRef.current = null; + } + } + } else { + if (phraseIntervalRef.current) { + clearInterval(phraseIntervalRef.current); + phraseIntervalRef.current = null; + } } - // Cleanup on unmount or when isLoading changes + return () => { if (phraseIntervalRef.current) { clearInterval(phraseIntervalRef.current); + phraseIntervalRef.current = null; } }; - }, [streamingState]); + }, [streamingState, isPaused]); - return { elapsedTime, currentLoadingPhrase }; + return { elapsedTime, currentLoadingPhrase, shouldShowSpinner }; };