File size: 1,552 Bytes
52efc7b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | /**
* @license
* Copyright 2026 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import type React from 'react';
import { Text, Box } from 'ink';
import { theme } from '../../semantic-colors.js';
import { SCREEN_READER_USER_PREFIX } from '../../textConstants.js';
import { HalfLinePaddedBox } from '../shared/HalfLinePaddedBox.js';
import { useConfig } from '../../contexts/ConfigContext.js';
interface HintMessageProps {
text: string;
}
export const HintMessage: React.FC<HintMessageProps> = ({ text }) => {
const prefix = '💡 ';
const prefixWidth = prefix.length;
const config = useConfig();
const useBackgroundColorSetting = config.getUseBackgroundColor();
const useBackgroundColor =
useBackgroundColorSetting && !!theme.background.message;
return (
<HalfLinePaddedBox
backgroundBaseColor={theme.text.accent}
backgroundOpacity={0.1}
useBackgroundColor={useBackgroundColor}
>
<Box
flexDirection="row"
paddingY={0}
marginY={useBackgroundColor ? 0 : 1}
paddingX={useBackgroundColor ? 1 : 0}
alignSelf="flex-start"
>
<Box width={prefixWidth} flexShrink={0}>
<Text
color={theme.text.accent}
aria-label={SCREEN_READER_USER_PREFIX}
>
{prefix}
</Text>
</Box>
<Box flexGrow={1}>
<Text wrap="wrap" italic color={theme.text.accent}>
{`Steering Hint: ${text}`}
</Text>
</Box>
</Box>
</HalfLinePaddedBox>
);
};
|