mirror of
https://github.com/google-gemini/gemini-cli.git
synced 2026-07-20 23:10:48 -07:00
feat(ui): add response semantic color (#12450)
Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com> Co-authored-by: shambhu-hegde <143840542+shambhu-hegde@users.noreply.github.com>
This commit is contained in:
@@ -35,6 +35,7 @@ const MarkdownDisplayInternal: React.FC<MarkdownDisplayProps> = ({
|
||||
renderMarkdown = true,
|
||||
}) => {
|
||||
const settings = useSettings();
|
||||
const responseColor = theme.text.response ?? theme.text.primary;
|
||||
|
||||
if (!text) return <></>;
|
||||
|
||||
@@ -138,8 +139,8 @@ const MarkdownDisplayInternal: React.FC<MarkdownDisplayProps> = ({
|
||||
// Not a table, treat as regular text
|
||||
addContentBlock(
|
||||
<Box key={key}>
|
||||
<Text wrap="wrap">
|
||||
<RenderInline text={line} />
|
||||
<Text wrap="wrap" color={responseColor}>
|
||||
<RenderInline text={line} defaultColor={responseColor} />
|
||||
</Text>
|
||||
</Box>,
|
||||
);
|
||||
@@ -177,8 +178,8 @@ const MarkdownDisplayInternal: React.FC<MarkdownDisplayProps> = ({
|
||||
if (line.trim().length > 0) {
|
||||
addContentBlock(
|
||||
<Box key={key}>
|
||||
<Text wrap="wrap">
|
||||
<RenderInline text={line} />
|
||||
<Text wrap="wrap" color={responseColor}>
|
||||
<RenderInline text={line} defaultColor={responseColor} />
|
||||
</Text>
|
||||
</Box>,
|
||||
);
|
||||
@@ -197,35 +198,38 @@ const MarkdownDisplayInternal: React.FC<MarkdownDisplayProps> = ({
|
||||
case 1:
|
||||
headerNode = (
|
||||
<Text bold color={theme.text.link}>
|
||||
<RenderInline text={headerText} />
|
||||
<RenderInline text={headerText} defaultColor={theme.text.link} />
|
||||
</Text>
|
||||
);
|
||||
break;
|
||||
case 2:
|
||||
headerNode = (
|
||||
<Text bold color={theme.text.link}>
|
||||
<RenderInline text={headerText} />
|
||||
<RenderInline text={headerText} defaultColor={theme.text.link} />
|
||||
</Text>
|
||||
);
|
||||
break;
|
||||
case 3:
|
||||
headerNode = (
|
||||
<Text bold color={theme.text.primary}>
|
||||
<RenderInline text={headerText} />
|
||||
<Text bold color={responseColor}>
|
||||
<RenderInline text={headerText} defaultColor={responseColor} />
|
||||
</Text>
|
||||
);
|
||||
break;
|
||||
case 4:
|
||||
headerNode = (
|
||||
<Text italic color={theme.text.secondary}>
|
||||
<RenderInline text={headerText} />
|
||||
<RenderInline
|
||||
text={headerText}
|
||||
defaultColor={theme.text.secondary}
|
||||
/>
|
||||
</Text>
|
||||
);
|
||||
break;
|
||||
default:
|
||||
headerNode = (
|
||||
<Text color={theme.text.primary}>
|
||||
<RenderInline text={headerText} />
|
||||
<Text color={responseColor}>
|
||||
<RenderInline text={headerText} defaultColor={responseColor} />
|
||||
</Text>
|
||||
);
|
||||
break;
|
||||
@@ -268,8 +272,8 @@ const MarkdownDisplayInternal: React.FC<MarkdownDisplayProps> = ({
|
||||
} else {
|
||||
addContentBlock(
|
||||
<Box key={key}>
|
||||
<Text wrap="wrap" color={theme.text.primary}>
|
||||
<RenderInline text={line} />
|
||||
<Text wrap="wrap" color={responseColor}>
|
||||
<RenderInline text={line} defaultColor={responseColor} />
|
||||
</Text>
|
||||
</Box>,
|
||||
);
|
||||
@@ -401,6 +405,7 @@ const RenderListItemInternal: React.FC<RenderListItemProps> = ({
|
||||
const prefix = type === 'ol' ? `${marker}. ` : `${marker} `;
|
||||
const prefixWidth = prefix.length;
|
||||
const indentation = leadingWhitespace.length;
|
||||
const listResponseColor = theme.text.response ?? theme.text.primary;
|
||||
|
||||
return (
|
||||
<Box
|
||||
@@ -408,11 +413,11 @@ const RenderListItemInternal: React.FC<RenderListItemProps> = ({
|
||||
flexDirection="row"
|
||||
>
|
||||
<Box width={prefixWidth}>
|
||||
<Text color={theme.text.primary}>{prefix}</Text>
|
||||
<Text color={listResponseColor}>{prefix}</Text>
|
||||
</Box>
|
||||
<Box flexGrow={LIST_ITEM_TEXT_FLEX_GROW}>
|
||||
<Text wrap="wrap" color={theme.text.primary}>
|
||||
<RenderInline text={itemText} />
|
||||
<Text wrap="wrap" color={listResponseColor}>
|
||||
<RenderInline text={itemText} defaultColor={listResponseColor} />
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
Reference in New Issue
Block a user