jcarr
/
gemini-cli
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Replace logo with custom ASCII (#958)

This commit is contained in:
Miguel Solorio 2025-06-13 00:59:45 -07:00 committed by GitHub
parent 95e4a60a83
commit f8a31f29aa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 79 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/cli/src/ui/App.tsx
View File

@ -324,7 +324,7 @@ const App = ({ config, settings, startupWarnings = [] }: AppProps) => {
refreshStatic();
}, [clearItems, clearConsoleMessagesState, refreshStatic]);
const { rows: terminalHeight } = useTerminalSize();
const { rows: terminalHeight, columns: terminalWidth } = useTerminalSize(); // Get terminalWidth
const mainControlsRef = useRef<DOMElement>(null);
const pendingHistoryItemRef = useRef<DOMElement>(null);
@ -407,7 +407,7 @@ const App = ({ config, settings, startupWarnings = [] }: AppProps) => {
key={staticKey}
items={[
<Box flexDirection="column" key="header">
<Header title={process.env.GEMINI_CLI_TITLE} />
<Header terminalWidth={terminalWidth} />
<Tips config={config} />
</Box>,
...history.map((h) => (

27
packages/cli/src/ui/components/AsciiArt.ts Normal file
View File

@ -0,0 +1,27 @@
/**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
export const shortAsciiLogo = `
█████████ ██████████ ██████ ██████ █████ ██████ █████ █████
███░░░░░███░░███░░░░░█░░██████ ██████ ░░███ ░░██████ ░░███ ░░███
███ ░░░ ░███ █ ░ ░███░█████░███ ░███ ░███░███ ░███ ░███
░███ ░██████ ░███░░███ ░███ ░███ ░███░░███░███ ░███
░███ █████ ░███░░█ ░███ ░░░ ░███ ░███ ░███ ░░██████ ░███
░░███ ░░███ ░███ ░ █ ░███ ░███ ░███ ░███ ░░█████ ░███
░░█████████ ██████████ █████ █████ █████ █████ ░░█████ █████
░░░░░░░░░ ░░░░░░░░░░ ░░░░░ ░░░░░ ░░░░░ ░░░░░ ░░░░░ ░░░░░
`;
export const longAsciiLogo = `
███ █████████ ██████████ ██████ ██████ █████ ██████ █████ █████
░░░███ ███░░░░░███░░███░░░░░█░░██████ ██████ ░░███ ░░██████ ░░███ ░░███
░░░███ ███ ░░░ ░███ █ ░ ░███░█████░███ ░███ ░███░███ ░███ ░███
░░░███ ░███ ░██████ ░███░░███ ░███ ░███ ░███░░███░███ ░███
███░ ░███ █████ ░███░░█ ░███ ░░░ ░███ ░███ ░███ ░░██████ ░███
███░ ░░███ ░░███ ░███ ░ █ ░███ ░███ ░███ ░███ ░░█████ ░███
███░ ░░█████████ ██████████ █████ █████ █████ █████ ░░█████ █████
░░░ ░░░░░░░░░ ░░░░░░░░░░ ░░░░░ ░░░░░ ░░░░░ ░░░░░ ░░░░░ ░░░░░
`;

55
packages/cli/src/ui/components/Header.tsx
View File

@ -8,30 +8,39 @@ import React from 'react';
import { Box, Text } from 'ink';
import Gradient from 'ink-gradient';
import { Colors } from '../colors.js';
const asciiArtLogo = `
██████╗ ███████╗███╗ ███╗██╗███╗ ██╗██╗
██╔════╝ ██╔════╝████╗ ████║██║████╗ ██║██║
██║ ███╗█████╗ ██╔████╔██║██║██╔██╗ ██║██║
██║ ██║██╔══╝ ██║╚██╔╝██║██║██║╚██╗██║██║
╚██████╔╝███████╗██║ ╚═╝ ██║██║██║ ╚████║██║
╚═════╝ ╚══════╝╚═╝ ╚═╝╚═╝╚═╝ ╚═══╝╚═╝
`;
import { shortAsciiLogo, longAsciiLogo } from './AsciiArt.js';
import { getAsciiArtWidth } from '../utils/textUtils.js';
interface HeaderProps {
title?: string;
customAsciiArt?: string; // For user-defined ASCII art
terminalWidth: number; // For responsive logo
}
export const Header: React.FC<HeaderProps> = ({ title = asciiArtLogo }) => (
<>
<Box marginBottom={1} alignItems="flex-start">
{Colors.GradientColors ? (
<Gradient colors={Colors.GradientColors}>
<Text>{title}</Text>
</Gradient>
) : (
<Text>{title}</Text>
)}
</Box>
</>
);
export const Header: React.FC<HeaderProps> = ({
customAsciiArt,
terminalWidth,
}) => {
let displayTitle;
const widthOfLongLogo = getAsciiArtWidth(longAsciiLogo);
if (customAsciiArt) {
displayTitle = customAsciiArt;
} else {
displayTitle =
terminalWidth >= widthOfLongLogo ? longAsciiLogo : shortAsciiLogo;
}
return (
<>
<Box marginBottom={1} alignItems="flex-start">
{Colors.GradientColors ? (
<Gradient colors={Colors.GradientColors}>
<Text>{displayTitle}</Text>
</Gradient>
) : (
<Text>{displayTitle}</Text>
)}
</Box>
</>
);
};

18
packages/cli/src/ui/utils/textUtils.ts Normal file
View File

@ -0,0 +1,18 @@
/**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
/**
* Calculates the maximum width of a multi-line ASCII art string.
* @param asciiArt The ASCII art string.
* @returns The length of the longest line in the ASCII art.
*/
export const getAsciiArtWidth = (asciiArt: string): number => {
if (!asciiArt) {
return 0;
}
const lines = asciiArt.split('\n');
return Math.max(...lines.map((line) => line.length));
};