abbyswag/qwen-code
1
0
Fork 0
mirror of https://github.com/QwenLM/qwen-code.git synced 2025-12-20 08:47:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Give Gemini Code a face lift.

Browse Source 
- This utilizes `ink-gradient` to render GEMINI CODE in amazing colors.
- Added a shared color configuration for UX (should this be in config?). It's very possible that we shouldn't be talking about the specific colors and instead be mentioning "foreground"/"background"/inlineCode etc. type colors.
- Updated existing color usages to utilize `Colors.*`

Fixes https://b.corp.google.com/issues/411385593
This commit is contained in:
Taylor Mullen
2025-04-19 12:38:09 -04:00
committed by N. Taylor Mullen
parent 3fce6cea27
commit f7edf71190
18 changed files with 223 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/cli/src/ui/components/messages/DiffRenderer.tsx
View File

@@ -6,6 +6,7 @@
import React from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../../colors.js';
interface DiffLine {
type: 'add' | 'del' | 'context' | 'hunk' | 'other';
@@ -96,7 +97,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
tabWidth = DEFAULT_TAB_WIDTH,
}) => {
if (!diffContent || typeof diffContent !== 'string') {
return <Text color="yellow">No diff content.</Text>;
return <Text color={Colors.AccentYellow}>No diff content.</Text>;
}
const parsedLines = parseDiffWithLineNumbers(diffContent);
@@ -114,7 +115,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
if (displayableLines.length === 0) {
return (
<Box borderStyle="round" borderColor="gray" padding={1}>
<Box borderStyle="round" borderColor={Colors.SubtleComment} padding={1}>
<Text dimColor>No changes detected.</Text>
</Box>
);
@@ -137,7 +138,11 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
// --- End Modification ---
return (
<Box borderStyle="round" borderColor="gray" flexDirection="column">
<Box
borderStyle="round"
borderColor={Colors.SubtleComment}
flexDirection="column"
>
{/* Iterate over the lines that should be displayed (already normalized) */}
{displayableLines.map((line, index) => {
const key = `diff-line-${index}`;
@@ -165,7 +170,6 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
break;
default:
throw new Error(`Unknown line type: ${line.type}`);
break;
}
// Render the line content *after* stripping the calculated *minimum* baseIndentation.
@@ -175,7 +179,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
return (
// Using your original rendering structure
<Box key={key} flexDirection="row">
<Text color="gray">{gutterNumStr} </Text>
<Text color={Colors.SubtleComment}>{gutterNumStr} </Text>
<Text color={color} dimColor={dim}>
{prefixSymbol}{' '}
</Text>

5
packages/cli/src/ui/components/messages/ErrorMessage.tsx
View File

@@ -6,6 +6,7 @@
import React from 'react';
import { Text, Box } from 'ink';
import { Colors } from '../../colors.js';
interface ErrorMessageProps {
text: string;
@@ -18,10 +19,10 @@ export const ErrorMessage: React.FC<ErrorMessageProps> = ({ text }) => {
return (
<Box flexDirection="row">
<Box width={prefixWidth}>
<Text color="red">{prefix}</Text>
<Text color={Colors.AccentRed}>{prefix}</Text>
</Box>
<Box flexGrow={1}>
<Text wrap="wrap" color="red">
<Text wrap="wrap" color={Colors.AccentRed}>
{text}
</Text>
</Box>

5
packages/cli/src/ui/components/messages/GeminiMessage.tsx
View File

@@ -7,6 +7,7 @@
import React from 'react';
import { Text, Box } from 'ink';
import { MarkdownRenderer } from '../../utils/MarkdownRenderer.js';
import { Colors } from '../../colors.js';
interface GeminiMessageProps {
text: string;
@@ -28,7 +29,7 @@ export const GeminiMessage: React.FC<GeminiMessageProps> = ({ text }) => {
return (
<Box flexDirection="row">
<Box width={prefixWidth}>
<Text color="blue">{prefix}</Text>
<Text color={Colors.AccentPurple}>{prefix}</Text>
</Box>
<Box flexGrow={1}></Box>
</Box>
@@ -38,7 +39,7 @@ export const GeminiMessage: React.FC<GeminiMessageProps> = ({ text }) => {
return (
<Box flexDirection="row">
<Box width={prefixWidth}>
<Text color="blue">{prefix}</Text>
<Text color={Colors.AccentPurple}>{prefix}</Text>
</Box>
<Box flexGrow={1} flexDirection="column">
{renderedBlocks}

5
packages/cli/src/ui/components/messages/InfoMessage.tsx
View File

@@ -6,6 +6,7 @@
import React from 'react';
import { Text, Box } from 'ink';
import { Colors } from '../../colors.js';
interface InfoMessageProps {
text: string;
@@ -18,10 +19,10 @@ export const InfoMessage: React.FC<InfoMessageProps> = ({ text }) => {
return (
<Box flexDirection="row">
<Box width={prefixWidth}>
<Text color="yellow">{prefix}</Text>
<Text color={Colors.AccentYellow}>{prefix}</Text>
</Box>
<Box flexGrow={1}>
<Text wrap="wrap" color="yellow">
<Text wrap="wrap" color={Colors.AccentYellow}>
{text}
</Text>
</Box>

5
packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx
View File

@@ -16,6 +16,7 @@ import {
import { PartListUnion } from '@google/genai';
import { DiffRenderer } from './DiffRenderer.js';
import { UI_WIDTH } from '../../constants.js';
import { Colors } from '../../colors.js';
export interface ToolConfirmationMessageProps {
confirmationDetails: ToolCallConfirmationDetails;
@@ -74,7 +75,9 @@ export const ToolConfirmationMessage: React.FC<
confirmationDetails as ToolExecuteConfirmationDetails;
// For execution, we still need context display and description
const commandDisplay = <Text color="cyan">{executionProps.command}</Text>;
const commandDisplay = (
<Text color={Colors.AccentCyan}>{executionProps.command}</Text>
);
// Combine command and description into bodyContent for layout consistency
bodyContent = (

3
packages/cli/src/ui/components/messages/ToolGroupMessage.tsx
View File

@@ -10,6 +10,7 @@ import { IndividualToolCallDisplay, ToolCallStatus } from '../../types.js';
import { ToolMessage } from './ToolMessage.js';
import { PartListUnion } from '@google/genai';
import { ToolConfirmationMessage } from './ToolConfirmationMessage.js';
import { Colors } from '../../colors.js';
interface ToolGroupMessageProps {
toolCalls: IndividualToolCallDisplay[];
@@ -22,7 +23,7 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
onSubmit,
}) => {
const hasPending = toolCalls.some((t) => t.status === ToolCallStatus.Pending);
const borderColor = hasPending ? 'yellow' : 'blue';
const borderColor = hasPending ? Colors.AccentYellow : Colors.AccentBlue;
return (
<Box flexDirection="column" borderStyle="round" borderColor={borderColor}>

15
packages/cli/src/ui/components/messages/ToolMessage.tsx
View File

@@ -16,6 +16,7 @@ import {
} from '../../types.js';
import { DiffRenderer } from './DiffRenderer.js';
import { FileDiff, ToolResultDisplay } from '../../../tools/tools.js';
import { Colors } from '../../colors.js';
export const ToolMessage: React.FC<IndividualToolCallDisplay> = ({
callId,
@@ -31,7 +32,7 @@ export const ToolMessage: React.FC<IndividualToolCallDisplay> = ({
| undefined;
const typedResultDisplay = resultDisplay as ToolResultDisplay | undefined;
let color = 'gray';
let color = Colors.SubtleComment;
let prefix = '';
switch (status) {
case ToolCallStatus.Pending:
@@ -41,15 +42,15 @@ export const ToolMessage: React.FC<IndividualToolCallDisplay> = ({
prefix = 'Executing:';
break;
case ToolCallStatus.Confirming:
color = 'yellow';
color = Colors.AccentYellow;
prefix = 'Confirm:';
break;
case ToolCallStatus.Success:
color = 'green';
color = Colors.AccentGreen;
prefix = 'Success:';
break;
case ToolCallStatus.Error:
color = 'red';
color = Colors.AccentRed;
prefix = 'Error:';
break;
default:
@@ -60,11 +61,11 @@ export const ToolMessage: React.FC<IndividualToolCallDisplay> = ({
const title = `${prefix} ${name}`;
return (
<Box key={callId} borderStyle="round" paddingX={1} flexDirection="column">
<Box key={callId} flexDirection="column" paddingX={1}>
<Box>
{status === ToolCallStatus.Invoked && (
<Box marginRight={1}>
<Text color="blue">
<Text color={Colors.AccentBlue}>
<Spinner type="dots" />
</Text>
</Box>
@@ -91,7 +92,7 @@ export const ToolMessage: React.FC<IndividualToolCallDisplay> = ({
)}
{/* Display command for execute */}
{'command' in typedConfirmationDetails && (
<Text color="yellow">
<Text color={Colors.AccentYellow}>
Command:{' '}
{
(typedConfirmationDetails as ToolExecuteConfirmationDetails)

3
packages/cli/src/ui/components/messages/UserMessage.tsx
View File

@@ -6,6 +6,7 @@
import React from 'react';
import { Text, Box } from 'ink';
import { Colors } from '../../colors.js';
interface UserMessageProps {
text: string;
@@ -18,7 +19,7 @@ export const UserMessage: React.FC<UserMessageProps> = ({ text }) => {
return (
<Box flexDirection="row">
<Box width={prefixWidth}>
<Text color="gray">{prefix}</Text>
<Text color={Colors.SubtleComment}>{prefix}</Text>
</Box>
<Box flexGrow={1}>
<Text wrap="wrap">{text}</Text>