diff options
Diffstat (limited to 'packages/cli/src/ui/components')
| -rw-r--r-- | packages/cli/src/ui/components/Footer.tsx | 12 | ||||
| -rw-r--r-- | packages/cli/src/ui/components/Header.tsx | 38 | ||||
| -rw-r--r-- | packages/cli/src/ui/components/HistoryDisplay.tsx | 37 | ||||
| -rw-r--r-- | packages/cli/src/ui/components/InputPrompt.tsx | 4 | ||||
| -rw-r--r-- | packages/cli/src/ui/components/Tips.tsx | 26 | ||||
| -rw-r--r-- | packages/cli/src/ui/components/messages/ToolGroupMessage.tsx | 34 |
6 files changed, 73 insertions, 78 deletions
diff --git a/packages/cli/src/ui/components/Footer.tsx b/packages/cli/src/ui/components/Footer.tsx index 6b069a2f..f2afc1bd 100644 --- a/packages/cli/src/ui/components/Footer.tsx +++ b/packages/cli/src/ui/components/Footer.tsx @@ -6,12 +6,12 @@ interface FooterProps { } const Footer: React.FC<FooterProps> = ({ queryLength }) => ( - <Box marginTop={1} justifyContent="space-between"> - <Box minWidth={15}> - <Text color="gray">{queryLength === 0 ? '? for shortcuts' : ''}</Text> - </Box> - <Text color="blue">Gemini</Text> + <Box marginTop={1} justifyContent="space-between"> + <Box minWidth={15}> + <Text color="gray">{queryLength === 0 ? '? for shortcuts' : ''}</Text> </Box> - ); + <Text color="blue">Gemini</Text> + </Box> +); export default Footer; diff --git a/packages/cli/src/ui/components/Header.tsx b/packages/cli/src/ui/components/Header.tsx index d3f0f9d5..f8f7d27e 100644 --- a/packages/cli/src/ui/components/Header.tsx +++ b/packages/cli/src/ui/components/Header.tsx @@ -8,31 +8,31 @@ interface HeaderProps { } const Header: React.FC<HeaderProps> = ({ cwd }) => ( - <> - {/* Static Header Art */} - <Box marginBottom={1}> - <Text color="blue">{` + <> + {/* Static Header Art */} + <Box marginBottom={1}> + <Text color="blue">{` ______ ________ ____ ____ _____ ____ _____ _____ .' ___ ||_ __ ||_ \\ / _||_ _||_ \\|_ _||_ _| / .' \\_| | |_ \\_| | \\/ | | | | \\ | | | | | | ____ | _| _ | |\\ /| | | | | |\\ \\| | | | \\ \`.___] |_| |__/ | _| |_\\/_| |_ _| |_ _| |_\\ |_ _| |_ \`._____.'|________||_____||_____||_____||_____|\\____||_____|`}</Text> + </Box> + {/* CWD Display */} + <Box + borderStyle="round" + borderColor="blue" + paddingX={BOX_PADDING_X} + flexDirection="column" + marginBottom={1} + width={UI_WIDTH} + > + <Box paddingLeft={2}> + <Text color="gray">cwd: {shortenPath(cwd, /*maxLength*/ 70)}</Text> </Box> - {/* CWD Display */} - <Box - borderStyle="round" - borderColor="blue" - paddingX={BOX_PADDING_X} - flexDirection="column" - marginBottom={1} - width={UI_WIDTH} - > - <Box paddingLeft={2}> - <Text color="gray">cwd: {shortenPath(cwd, /*maxLength*/ 70)}</Text> - </Box> - </Box> - </> - ); + </Box> + </> +); export default Header; diff --git a/packages/cli/src/ui/components/HistoryDisplay.tsx b/packages/cli/src/ui/components/HistoryDisplay.tsx index fe0bf4c1..7565c5bc 100644 --- a/packages/cli/src/ui/components/HistoryDisplay.tsx +++ b/packages/cli/src/ui/components/HistoryDisplay.tsx @@ -17,26 +17,23 @@ interface HistoryDisplayProps { const HistoryDisplay: React.FC<HistoryDisplayProps> = ({ history, onSubmit, -}) => +}) => ( // No grouping logic needed here anymore - ( - <Box flexDirection="column"> - {history.map((item) => ( - <Box key={item.id} marginBottom={1}> - {/* Render standard message types */} - {item.type === 'user' && <UserMessage text={item.text} />} - {item.type === 'gemini' && <GeminiMessage text={item.text} />} - {item.type === 'info' && <InfoMessage text={item.text} />} - {item.type === 'error' && <ErrorMessage text={item.text} />} - - {/* Render the tool group component */} - {item.type === 'tool_group' && ( - <ToolGroupMessage toolCalls={item.tools} onSubmit={onSubmit} /> - )} - </Box> - ))} - </Box> - ) -; + <Box flexDirection="column"> + {history.map((item) => ( + <Box key={item.id} marginBottom={1}> + {/* Render standard message types */} + {item.type === 'user' && <UserMessage text={item.text} />} + {item.type === 'gemini' && <GeminiMessage text={item.text} />} + {item.type === 'info' && <InfoMessage text={item.text} />} + {item.type === 'error' && <ErrorMessage text={item.text} />} + {/* Render the tool group component */} + {item.type === 'tool_group' && ( + <ToolGroupMessage toolCalls={item.tools} onSubmit={onSubmit} /> + )} + </Box> + ))} + </Box> +); export default HistoryDisplay; diff --git a/packages/cli/src/ui/components/InputPrompt.tsx b/packages/cli/src/ui/components/InputPrompt.tsx index 1102e75d..96089eec 100644 --- a/packages/cli/src/ui/components/InputPrompt.tsx +++ b/packages/cli/src/ui/components/InputPrompt.tsx @@ -3,8 +3,6 @@ import { Box, Text } from 'ink'; import TextInput from 'ink-text-input'; import { globalConfig } from '../../config/config.js'; - - interface InputPromptProps { query: string; setQuery: (value: string) => void; @@ -34,6 +32,6 @@ const InputPrompt: React.FC<InputPromptProps> = ({ </Box> </Box> ); -} +}; export default InputPrompt; diff --git a/packages/cli/src/ui/components/Tips.tsx b/packages/cli/src/ui/components/Tips.tsx index 6be53360..aa8d39d6 100644 --- a/packages/cli/src/ui/components/Tips.tsx +++ b/packages/cli/src/ui/components/Tips.tsx @@ -3,18 +3,18 @@ import { Box, Text } from 'ink'; import { UI_WIDTH } from '../constants.js'; const Tips: React.FC = () => ( - <Box flexDirection="column" marginBottom={1} width={UI_WIDTH}> - <Text>Tips for getting started:</Text> - <Text> - 1. <Text bold>/help</Text> for more information. - </Text> - <Text> - 2. <Text bold>/init</Text> to create a GEMINI.md for instructions & - context. - </Text> - <Text>3. Ask coding questions, edit code or run commands.</Text> - <Text>4. Be specific for the best results.</Text> - </Box> - ); + <Box flexDirection="column" marginBottom={1} width={UI_WIDTH}> + <Text>Tips for getting started:</Text> + <Text> + 1. <Text bold>/help</Text> for more information. + </Text> + <Text> + 2. <Text bold>/init</Text> to create a GEMINI.md for instructions & + context. + </Text> + <Text>3. Ask coding questions, edit code or run commands.</Text> + <Text>4. Be specific for the best results.</Text> + </Box> +); export default Tips; diff --git a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx index 6627faee..6644cd5f 100644 --- a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx +++ b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx @@ -21,23 +21,23 @@ const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({ return ( <Box flexDirection="column" borderStyle="round" borderColor={borderColor}> {toolCalls.map((tool) => ( - <React.Fragment key={tool.callId}> - <ToolMessage - key={tool.callId} // Use callId as the key - name={tool.name} - description={tool.description} - resultDisplay={tool.resultDisplay} - status={tool.status} - /> - {tool.status === ToolCallStatus.Confirming && - tool.confirmationDetails && ( - <ToolConfirmationMessage - confirmationDetails={tool.confirmationDetails} - onSubmit={onSubmit} - ></ToolConfirmationMessage> - )} - </React.Fragment> - ))} + <React.Fragment key={tool.callId}> + <ToolMessage + key={tool.callId} // Use callId as the key + name={tool.name} + description={tool.description} + resultDisplay={tool.resultDisplay} + status={tool.status} + /> + {tool.status === ToolCallStatus.Confirming && + tool.confirmationDetails && ( + <ToolConfirmationMessage + confirmationDetails={tool.confirmationDetails} + onSubmit={onSubmit} + ></ToolConfirmationMessage> + )} + </React.Fragment> + ))} {/* Optional: Add padding below the last item if needed, though ToolMessage already has some vertical space implicitly */} {/* {tools.length > 0 && <Box height={1} />} */} |
