fix(ui): remove redundant newlines in Gemini messages

[NTaylorMullen]

Summary

This PR fixes a regression where extra newlines were rendered between paragraphs and tool calls in Gemini messages. It also resolves a pre-existing build failure caused by missing dependencies and improves test stability by updating mock configurations.

Details

• Conditional Spacing: The marginBottom={1} on GeminiMessage and GeminiMessageContent segments is now conditional on isAlternateBuffer. This prevents the "double newline" effect in standard mode when messages are split across segments.
• ShowMoreLines Adjustment: Added a conditional marginTop={1} to the ShowMoreLines component to maintain proper separation from content when it is displayed in standard mode.
• Test Stability: Updated configProxy in render.tsx to include getUseBackgroundColor, fixing pre-existing test failures in components like UserMessage.
• Dependency Fix: Includes a package-lock.json update to restore the proper-lockfile dependency, which was missing and causing build failures.

Related Issues

N/A

How to Validate

1. Run UI tests to ensure spacing and stability:

   npm test -w @google/gemini-cli -- src/ui/components/messages/GeminiMessage.test.tsx src/ui/components/ShowMoreLines.test.tsx src/ui/components/HistoryItemDisplay.test.tsx

2. Verify that the build passes:

   npm run build

3. (Manual) Generate a multi-paragraph response in the CLI and verify that paragraph spacing is consistent (exactly one blank line) and that no extra lines appear before tool results.

Pre-Merge Checklist

• Updated relevant documentation and README (if needed)
• Added/updated tests (if needed)
• Noted breaking changes (if any)
• Validated on required platforms/methods:
  • MacOS
    • npm run
    • npx
    • Docker
    • Podman
    • Seatbelt
  • Windows
    • npm run
    • npx
    • Docker
  • Linux
    • npm run
    • npx
    • Docker

[gemini-code-assist]

Summary of Changes

Hello @NTaylorMullen, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses a regression that caused excessive newlines in Gemini messages, specifically between paragraphs and tool calls, to improve the user interface's readability. Concurrently, it resolves a critical build failure by reinstating a missing dependency and enhances the reliability of UI tests through updated mock configurations.

Highlights

• Conditional Spacing in Gemini Messages: The marginBottom property on GeminiMessage and GeminiMessageContent segments is now conditional on isAlternateBuffer, preventing redundant newlines in standard display mode.
• ShowMoreLines Component Adjustment: A conditional marginTop of 1 has been added to the ShowMoreLines component to ensure correct separation from content when displayed in standard mode.
• Improved Test Stability: The configProxy in render.tsx has been updated to include getUseBackgroundColor, resolving pre-existing test failures in components like UserMessage.
• Dependency Fix: The package-lock.json file was updated to restore the proper-lockfile dependency, which was previously missing and causing build failures.

Changelog

• package-lock.json
  • Removed peer: true property from numerous dependency entries, which likely contributed to resolving dependency issues.
  • Restored the proper-lockfile dependency, fixing a build failure.
• packages/cli/src/test-utils/render.tsx
  • Added a mock implementation for getUseBackgroundColor within configProxy to return true, improving test stability.
• packages/cli/src/ui/components/ShowMoreLines.test.tsx
  • Imported and mocked the useAlternateBuffer hook.
  • Configured mockUseAlternateBuffer to return false by default in test setup.
• packages/cli/src/ui/components/ShowMoreLines.tsx
  • Integrated the useAlternateBuffer hook.
  • Applied conditional marginTop to the root Box component based on the isAlternateBuffer value.
• packages/cli/src/ui/components/snapshots/HistoryItemDisplay.test.tsx.snap
  • Updated several snapshot tests to reflect the changes in UI rendering due to spacing adjustments.
• packages/cli/src/ui/components/messages/GeminiMessage.tsx
  • Modified the marginBottom of the Box component containing ShowMoreLines to be conditional on isAlternateBuffer.
• packages/cli/src/ui/components/messages/GeminiMessageContent.tsx
  • Adjusted the marginBottom of the Box component containing ShowMoreLines to be conditional on isAlternateBuffer.

Activity

• NTaylorMullen initiated this pull request to resolve a UI regression related to Gemini message formatting.
• The author implemented conditional styling to manage spacing in UI components, specifically GeminiMessage, GeminiMessageContent, and ShowMoreLines.
• Test utilities were updated to ensure consistent test environments, particularly for background color usage.
• A critical dependency issue causing build failures was addressed by updating package-lock.json.
• The author has confirmed that tests were added/updated and validated the changes on MacOS.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[github-actions]

Size Change: +94 B (0%)

Total Size: 23.9 MB

ℹ️ View Unchanged

Filename	Size	Change
./bundle/gemini.js	23.9 MB	+94 B (0%)
./bundle/sandbox-macos-permissive-closed.sb	1.03 kB	0 B
./bundle/sandbox-macos-permissive-open.sb	890 B	0 B
./bundle/sandbox-macos-permissive-proxied.sb	1.31 kB	0 B
./bundle/sandbox-macos-restrictive-closed.sb	3.29 kB	0 B
./bundle/sandbox-macos-restrictive-open.sb	3.36 kB	0 B
./bundle/sandbox-macos-restrictive-proxied.sb	3.56 kB	0 B

_{compressed-size-action}

[gemini-code-assist]

Code Review

The pull request addresses a regression causing redundant newlines in Gemini messages and resolves a build failure due to a missing dependency. It also improves test stability by updating mock configurations. The changes to package-lock.json remove "peer": true from several dependencies, which is a common practice when these dependencies are not expected to be peer dependencies in the current context. The UI components GeminiMessage and GeminiMessageContent now conditionally apply marginBottom based on isAlternateBuffer to fix spacing issues, and ShowMoreLines conditionally applies marginTop for proper separation. It is recommended to replace the magic numbers used for layout/padding in these UI components with named constants for improved readability and maintainability. The test utility render.tsx has been updated to include getUseBackgroundColor in its mock configuration, which is crucial for test stability. Overall, the changes seem to correctly address the reported issues, with a minor suggestion for code clarity.

[jacob314]

Approved. I'll fast follow with some additional polish. Don't think we should be specializing based on alternate buffer here.