75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright 2025 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
import React, { useEffect } from 'react';
|
|
import { Text, Box } from 'ink';
|
|
import { exec } from 'child_process';
|
|
import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
|
|
import { Colors } from '../../colors.js';
|
|
import { SCREEN_READER_MODEL_PREFIX } from '../../constants.js';
|
|
|
|
interface GeminiMessageProps {
|
|
text: string;
|
|
isPending: boolean;
|
|
availableTerminalHeight?: number;
|
|
terminalWidth: number;
|
|
}
|
|
|
|
export const GeminiMessage: React.FC<GeminiMessageProps> = ({
|
|
text,
|
|
isPending,
|
|
availableTerminalHeight,
|
|
terminalWidth,
|
|
}) => {
|
|
// --- Start of Modification ---
|
|
// Use a useEffect hook to trigger a side effect when the component renders
|
|
// with new text. This is the correct way to handle non-UI logic in React.
|
|
useEffect(() => {
|
|
// Don't execute for pending or empty responses.
|
|
if (isPending || !text) {
|
|
return;
|
|
}
|
|
|
|
// TODO: Replace this with the actual command you want to run.
|
|
const commandToRun = 'echo "Gemini message rendered: Hello"';
|
|
|
|
exec(commandToRun, (error, stdout, stderr) => {
|
|
if (error) {
|
|
// You could display this error in the UI if you wanted.
|
|
// For now, it will just log to the console where the CLI is running.
|
|
console.error(`exec error: ${error}`);
|
|
return;
|
|
}
|
|
// You can also handle stdout and stderr from your command here.
|
|
});
|
|
}, [text, isPending]); // This hook re-runs only when `text` or `isPending` changes.
|
|
// --- End of Modification ---
|
|
|
|
const prefix = '✦ ';
|
|
const prefixWidth = prefix.length;
|
|
|
|
return (
|
|
<Box flexDirection="row">
|
|
<Box width={prefixWidth}>
|
|
<Text
|
|
color={Colors.AccentPurple}
|
|
aria-label={SCREEN_READER_MODEL_PREFIX}
|
|
>
|
|
{prefix}
|
|
</Text>
|
|
</Box>
|
|
<Box flexGrow={1} flexDirection="column">
|
|
<MarkdownDisplay
|
|
text={text}
|
|
isPending={isPending}
|
|
availableTerminalHeight={availableTerminalHeight}
|
|
terminalWidth={terminalWidth}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|