mirror of
https://github.com/google-gemini/gemini-cli.git
synced 2026-05-02 16:04:38 -07:00
refactor: Integrate checkExhaustive function and ensure Card component width is configurable
This commit is contained in:
@@ -9,6 +9,7 @@ import { Box, Text } from 'ink';
|
|||||||
import { theme } from '../../semantic-colors.js';
|
import { theme } from '../../semantic-colors.js';
|
||||||
import { ToolStatusIndicator } from '../messages/ToolShared.js';
|
import { ToolStatusIndicator } from '../messages/ToolShared.js';
|
||||||
import { ToolCallStatus } from '../../types.js';
|
import { ToolCallStatus } from '../../types.js';
|
||||||
|
import { checkExhaustive } from '@google/gemini-cli-core';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Props for the Card component.
|
* Props for the Card component.
|
||||||
@@ -24,6 +25,8 @@ export interface CardProps {
|
|||||||
children?: React.ReactNode;
|
children?: React.ReactNode;
|
||||||
/** The styling and intent of the card. */
|
/** The styling and intent of the card. */
|
||||||
status?: ToolCallStatus;
|
status?: ToolCallStatus;
|
||||||
|
/** The width of the card. Defaults to 100%. */
|
||||||
|
width?: string | number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Card: React.FC<CardProps> = ({
|
export const Card: React.FC<CardProps> = ({
|
||||||
@@ -32,6 +35,7 @@ export const Card: React.FC<CardProps> = ({
|
|||||||
prefix = true,
|
prefix = true,
|
||||||
suffix,
|
suffix,
|
||||||
children,
|
children,
|
||||||
|
width = '100%',
|
||||||
}) => {
|
}) => {
|
||||||
const getColors = () => {
|
const getColors = () => {
|
||||||
switch (status) {
|
switch (status) {
|
||||||
@@ -48,6 +52,7 @@ export const Card: React.FC<CardProps> = ({
|
|||||||
case ToolCallStatus.Executing:
|
case ToolCallStatus.Executing:
|
||||||
return { border: theme.border.default, text: theme.status.success };
|
return { border: theme.border.default, text: theme.status.success };
|
||||||
default:
|
default:
|
||||||
|
checkExhaustive(status);
|
||||||
return { border: theme.border.default, text: theme.text.primary };
|
return { border: theme.border.default, text: theme.text.primary };
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -55,7 +60,7 @@ export const Card: React.FC<CardProps> = ({
|
|||||||
const colors = getColors();
|
const colors = getColors();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box flexDirection="column">
|
<Box flexDirection="column" width={width}>
|
||||||
<Box width="100%" flexDirection="row">
|
<Box width="100%" flexDirection="row">
|
||||||
{/* Top border section */}
|
{/* Top border section */}
|
||||||
<Box
|
<Box
|
||||||
@@ -73,7 +78,6 @@ export const Card: React.FC<CardProps> = ({
|
|||||||
gap={1}
|
gap={1}
|
||||||
justifyContent="flex-start"
|
justifyContent="flex-start"
|
||||||
>
|
>
|
||||||
{/* TODO: Use shared ToolStatusIndicator component */}
|
|
||||||
<Box marginRight={-2}>
|
<Box marginRight={-2}>
|
||||||
{prefix && <ToolStatusIndicator status={status} name={title} />}
|
{prefix && <ToolStatusIndicator status={status} name={title} />}
|
||||||
</Box>
|
</Box>
|
||||||
@@ -105,7 +109,6 @@ export const Card: React.FC<CardProps> = ({
|
|||||||
borderColor={colors.border}
|
borderColor={colors.border}
|
||||||
></Box>
|
></Box>
|
||||||
</Box>
|
</Box>
|
||||||
{/* Content area */}
|
|
||||||
<Box
|
<Box
|
||||||
borderStyle="round"
|
borderStyle="round"
|
||||||
borderTop={false}
|
borderTop={false}
|
||||||
|
|||||||
Reference in New Issue
Block a user