diff options
| author | Taylor Mullen <[email protected]> | 2025-04-15 21:41:08 -0700 |
|---|---|---|
| committer | Taylor Mullen <[email protected]> | 2025-04-17 13:19:55 -0400 |
| commit | add233c5043264d47ecc6d3339a383f41a241ae8 (patch) | |
| tree | 3d80d412ed805007132cf44257bbd7667005dcd8 /packages/cli/src/ui/App.tsx | |
Initial commit of Gemini Code CLI
This commit introduces the initial codebase for the Gemini Code CLI, a command-line interface designed to facilitate interaction with the Gemini API for software engineering tasks.
The code was migrated from a previous git repository as a single squashed commit.
Core Features & Components:
* **Gemini Integration:** Leverages the `@google/genai` SDK to interact with the Gemini models, supporting chat history, streaming responses, and function calling (tools).
* **Terminal UI:** Built with Ink (React for CLIs) providing an interactive chat interface within the terminal, including input prompts, message display, loading indicators, and tool interaction elements.
* **Tooling Framework:** Implements a robust tool system allowing Gemini to interact with the local environment. Includes tools for:
* File system listing (`ls`)
* File reading (`read-file`)
* Content searching (`grep`)
* File globbing (`glob`)
* File editing (`edit`)
* File writing (`write-file`)
* Executing bash commands (`terminal`)
* **State Management:** Handles the streaming state of Gemini responses and manages the conversation history.
* **Configuration:** Parses command-line arguments (`yargs`) and loads environment variables (`dotenv`) for setup.
* **Project Structure:** Organized into `core`, `ui`, `tools`, `config`, and `utils` directories using TypeScript. Includes basic build (`tsc`) and start scripts.
This initial version establishes the foundation for a powerful CLI tool enabling developers to use Gemini for coding assistance directly in their terminal environment.
---
Created by yours truly: __Gemini Code__
Diffstat (limited to 'packages/cli/src/ui/App.tsx')
| -rw-r--r-- | packages/cli/src/ui/App.tsx | 90 |
1 files changed, 90 insertions, 0 deletions
diff --git a/packages/cli/src/ui/App.tsx b/packages/cli/src/ui/App.tsx new file mode 100644 index 00000000..32dcaac0 --- /dev/null +++ b/packages/cli/src/ui/App.tsx @@ -0,0 +1,90 @@ +import React, { useState, useEffect } from 'react'; +import { Box, Text } from 'ink'; +import type { HistoryItem } from './types.js'; +import { useGeminiStream } from './hooks/useGeminiStream.js'; +import { useLoadingIndicator } from './hooks/useLoadingIndicator.js'; +import Header from './components/Header.js'; +import Tips from './components/Tips.js'; +import HistoryDisplay from './components/HistoryDisplay.js'; +import LoadingIndicator from './components/LoadingIndicator.js'; +import InputPrompt from './components/InputPrompt.js'; +import Footer from './components/Footer.js'; +import { StreamingState } from '../core/StreamingState.js'; +import { PartListUnion } from '@google/genai'; + +interface AppProps { + directory: string; +} + +const App = ({ directory }: AppProps) => { + const [query, setQuery] = useState(''); + const [history, setHistory] = useState<HistoryItem[]>([]); + const { streamingState, submitQuery, initError } = useGeminiStream(setHistory); + const { elapsedTime, currentLoadingPhrase } = useLoadingIndicator(streamingState); + + const handleInputSubmit = (value: PartListUnion) => { + submitQuery(value).then(() => { + setQuery(''); + }).catch(() => { + setQuery(''); + }); + }; + + useEffect(() => { + if (initError && !history.some(item => item.type === 'error' && item.text?.includes(initError))) { + setHistory(prev => [ + ...prev, + { id: Date.now(), type: 'error', text: `Initialization Error: ${initError}. Please check API key and configuration.` } as HistoryItem + ]); + } + }, [initError, history]); + + const isWaitingForToolConfirmation = history.some(item => + item.type === 'tool_group' && item.tools.some(tool => tool.confirmationDetails !== undefined) + ); + const isInputActive = streamingState === StreamingState.Idle && !initError; + + + return ( + <Box flexDirection="column" padding={1} marginBottom={1} width="100%"> + <Header cwd={directory} /> + + <Tips /> + + {initError && streamingState !== StreamingState.Responding && !isWaitingForToolConfirmation && ( + <Box borderStyle="round" borderColor="red" paddingX={1} marginBottom={1}> + {history.find(item => item.type === 'error' && item.text?.includes(initError))?.text ? ( + <Text color="red">{history.find(item => item.type === 'error' && item.text?.includes(initError))?.text}</Text> + ) : ( + <> + <Text color="red">Initialization Error: {initError}</Text> + <Text color="red"> Please check API key and configuration.</Text> + </> + )} + </Box> + )} + + <Box flexDirection="column"> + <HistoryDisplay history={history} onSubmit={handleInputSubmit} /> + <LoadingIndicator + isLoading={streamingState === StreamingState.Responding} + currentLoadingPhrase={currentLoadingPhrase} + elapsedTime={elapsedTime} + /> + </Box> + + {!isWaitingForToolConfirmation && isInputActive && ( + <InputPrompt + query={query} + setQuery={setQuery} + onSubmit={handleInputSubmit} + isActive={isInputActive} + /> + )} + + <Footer queryLength={query.length} /> + </Box> + ); +}; + +export default App;
\ No newline at end of file |
