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:
cornmander
2025-11-02 19:21:26 -05:00
committed by GitHub
parent 65b28f5dce
commit c992a0b714
10 changed files with 70 additions and 36 deletions
+21 -16
View File
@@ -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>