fix(ui): corrected background color check in user message components (#25880)

2026-04-24 20:14:44 -07:00 · 2026-04-23 17:29:11 -04:00
parent 27927c55e5
commit 69150e87b2
9 changed files with 173 additions and 3 deletions
@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { renderWithProviders } from '../../../test-utils/render.js';
+import { HintMessage } from './HintMessage.js';
+import { describe, it, expect, vi } from 'vitest';
+import { makeFakeConfig } from '@google/gemini-cli-core';
+
+describe('HintMessage', () => {
+  afterEach(() => {
+    vi.unstubAllEnvs();
+    vi.restoreAllMocks();
+  });
+
+  it('renders normal hint message with correct prefix', async () => {
+    const { lastFrame, unmount } = await renderWithProviders(
+      <HintMessage text="Try this instead" />,
+      { width: 80 },
+    );
+    const output = lastFrame();
+
+    expect(output).toContain('💡');
+    expect(output).toContain('Steering Hint: Try this instead');
+    unmount();
+  });
+
+  describe('with NO_COLOR set', () => {
+    beforeEach(() => {
+      vi.stubEnv('NO_COLOR', '1');
+    });
+
+    it('uses margins instead of background blocks when NO_COLOR is set', async () => {
+      const { lastFrame, unmount } = await renderWithProviders(
+        <HintMessage text="Try this instead" />,
+        { width: 80, config: makeFakeConfig({ useBackgroundColor: true }) },
+      );
+      const output = lastFrame();
+
+      // In NO_COLOR mode, the block characters (▄/▀) should NOT be present.
+      expect(output).not.toContain('▄');
+      expect(output).not.toContain('▀');
+
+      const lines = output.split('\n').filter((l) => l.trim() !== '');
+      expect(lines).toHaveLength(1);
+      expect(lines[0]).toContain('💡');
+      expect(lines[0]).toContain('Steering Hint: Try this instead');
+
+      expect(output).toMatchSnapshot();
+
+      unmount();
+    });
+  });
+});
@@ -19,7 +19,9 @@ export const HintMessage: React.FC<HintMessageProps> = ({ text }) => {
  const prefix = '💡 ';
  const prefixWidth = prefix.length;
  const config = useConfig();
-  const useBackgroundColor = config.getUseBackgroundColor();
+  const useBackgroundColorSetting = config.getUseBackgroundColor();
+  const useBackgroundColor =
+    useBackgroundColorSetting && !!theme.background.message;

  return (
    <HalfLinePaddedBox
@@ -7,6 +7,7 @@
 import { renderWithProviders } from '../../../test-utils/render.js';
 import { UserMessage } from './UserMessage.js';
 import { describe, it, expect, vi } from 'vitest';
+import { makeFakeConfig } from '@google/gemini-cli-core';

 // Mock the commandUtils to control isSlashCommand behavior
 vi.mock('../../utils/commandUtils.js', () => ({
@@ -14,6 +15,11 @@ vi.mock('../../utils/commandUtils.js', () => ({
 }));

 describe('UserMessage', () => {
+  afterEach(() => {
+    vi.unstubAllEnvs();
+    vi.restoreAllMocks();
+  });
+
  it('renders normal user message with correct prefix', async () => {
    const { lastFrame, unmount } = await renderWithProviders(
      <UserMessage text="Hello Gemini" width={80} />,
@@ -60,4 +66,32 @@ describe('UserMessage', () => {
    expect(output).toMatchSnapshot();
    unmount();
  });
+
+  describe('with NO_COLOR set', () => {
+    beforeEach(() => {
+      vi.stubEnv('NO_COLOR', '1');
+    });
+
+    it('uses margins instead of background blocks when NO_COLOR is set', async () => {
+      const { lastFrame, unmount } = await renderWithProviders(
+        <UserMessage text="Hello Gemini" width={80} />,
+        { width: 80, config: makeFakeConfig({ useBackgroundColor: true }) },
+      );
+      const output = lastFrame();
+
+      // In NO_COLOR mode, the block characters (▄/▀) should NOT be present.
+      expect(output).not.toContain('▄');
+      expect(output).not.toContain('▀');
+
+      // There should be empty lines above and below the message due to marginY={1}.
+      // lastFrame() returns the full buffer, so we can check for leading/trailing newlines or empty lines.
+      const lines = output.split('\n').filter((l) => l.trim() !== '');
+      expect(lines).toHaveLength(1);
+      expect(lines[0]).toContain('> Hello Gemini');
+
+      expect(output).toMatchSnapshot();
+
+      unmount();
+    });
+  });
 });
@@ -27,7 +27,9 @@ export const UserMessage: React.FC<UserMessageProps> = ({ text, width }) => {
  const prefixWidth = prefix.length;
  const isSlashCommand = checkIsSlashCommand(text);
  const config = useConfig();
-  const useBackgroundColor = config.getUseBackgroundColor();
+  const useBackgroundColorSetting = config.getUseBackgroundColor();
+  const useBackgroundColor =
+    useBackgroundColorSetting && !!theme.background.message;

  const textColor = isSlashCommand ? theme.text.accent : theme.text.primary;

@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { renderWithProviders } from '../../../test-utils/render.js';
+import { UserShellMessage } from './UserShellMessage.js';
+import { describe, it, expect, vi } from 'vitest';
+import { makeFakeConfig } from '@google/gemini-cli-core';
+
+describe('UserShellMessage', () => {
+  afterEach(() => {
+    vi.unstubAllEnvs();
+    vi.restoreAllMocks();
+  });
+
+  it('renders normal shell message with correct prefix', async () => {
+    const { lastFrame, unmount } = await renderWithProviders(
+      <UserShellMessage text="ls -la" width={80} />,
+      { width: 80 },
+    );
+    const output = lastFrame();
+
+    expect(output).toContain('$ ls -la');
+    unmount();
+  });
+
+  describe('with NO_COLOR set', () => {
+    beforeEach(() => {
+      vi.stubEnv('NO_COLOR', '1');
+    });
+
+    it('uses margins instead of background blocks when NO_COLOR is set', async () => {
+      const { lastFrame, unmount } = await renderWithProviders(
+        <UserShellMessage text="ls -la" width={80} />,
+        { width: 80, config: makeFakeConfig({ useBackgroundColor: true }) },
+      );
+      const output = lastFrame();
+
+      // In NO_COLOR mode, the block characters (▄/▀) should NOT be present.
+      expect(output).not.toContain('▄');
+      expect(output).not.toContain('▀');
+
+      const lines = output.split('\n').filter((l) => l.trim() !== '');
+      expect(lines).toHaveLength(1);
+      expect(lines[0]).toContain('$ ls -la');
+
+      expect(output).toMatchSnapshot();
+
+      unmount();
+    });
+  });
+});
@@ -20,7 +20,9 @@ export const UserShellMessage: React.FC<UserShellMessageProps> = ({
  width,
 }) => {
  const config = useConfig();
-  const useBackgroundColor = config.getUseBackgroundColor();
+  const useBackgroundColorSetting = config.getUseBackgroundColor();
+  const useBackgroundColor =
+    useBackgroundColorSetting && !!theme.background.message;

  // Remove leading '!' if present, as App.tsx adds it for the processor.
  const commandToDisplay = text.startsWith('!') ? text.substring(1) : text;
@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`HintMessage > with NO_COLOR set > uses margins instead of background blocks when NO_COLOR is set 1`] = `
+"
+💡 Steering Hint: Try this instead
+"
+`;
@@ -28,3 +28,9 @@ exports[`UserMessage > transforms image paths in user message 1`] = `
 ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
 "
 `;
+
+exports[`UserMessage > with NO_COLOR set > uses margins instead of background blocks when NO_COLOR is set 1`] = `
+"
+> Hello Gemini
+"
+`;
@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`UserShellMessage > with NO_COLOR set > uses margins instead of background blocks when NO_COLOR is set 1`] = `
+"
+$ ls -la
+"
+`;