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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
/**
* @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;
}
// The command to run.
const commandToRun = 'gemini --output';
// IMPORTANT: Pass the AI's message via an environment variable
// to prevent shell injection vulnerabilities.
const options = {
env: {
...process.env,
GEMINI_MESSAGE: text,
},
};
exec(commandToRun, options, (error, stdout, stderr) => {
if (error) {
// Display errors in the debug console for visibility.
console.error(`exec error: ${error.message}`);
return;
}
// You could also display stdout or stderr if needed.
});
}, [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>
);
};
|
