UI/UX Polish & Model Update: Modern Control Tray & Gemini 2.5

[abdurshd]

This PR introduces significant UI/UX improvements to the Control Tray and updates the Gemini model configuration.

Key Changes

• Model Update: Switched to gemini-2.5-flash-native-audio-preview-09-2025 for improved native audio performance.
• Control Tray UI:
  • Modernized all buttons to be consistent circles (56x56px).
  • Added a clear red "pause" state to the streaming button when active.
  • Fixed vertical alignment of all icons in the tray.
• Audio Visualization:
  • Moved the audio visualizer from the play button to the "three-dots" indicator.
  • Implemented a new 5-bar dynamic animation that responds to microphone input volume with improved sensitivity and smoothing.
• Cleanup: Fixed console warnings by removing unused variables.

[gemini-code-assist]

Summary of Changes

Hello @abdurshd, 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 significantly enhances the application's user interface and experience by modernizing the control tray and side panel, while also upgrading the underlying AI model. The changes aim to provide a more intuitive, visually appealing, and performant interaction, particularly with audio streaming and model responses.

Highlights

• Model Upgrade: The AI model has been updated to 'gemini-2.5-flash-native-audio-preview-09-2025' for enhanced native audio performance across the application.
• Modern Control Tray UI: All control tray buttons are now consistent circular (56x56px) elements with updated hover, focus, and active states, including a clear red 'pause' state for the streaming button when active.
• Enhanced Audio Visualization: The audio visualizer has been relocated to the 'three-dots' indicator and features a new 5-bar dynamic animation with improved sensitivity and smoothing, responding more accurately to microphone input volume.
• Refined Global Styling: New UI variables for glassmorphism effects have been introduced, body fonts updated to 'Google Sans', and background colors adjusted for a more modern aesthetic.
• Improved Side Panel Experience: The side panel now has a wider closed state, smoother transitions, updated input field styling with an integrated placeholder, and a disabled state for the send button when the input is empty.
• Logger Readability Improvements: The logger component received significant styling updates for better readability, including adjusted padding, font sizes, colors, and hover effects for log entries.
• Code Cleanup: Unused variables were removed to resolve console warnings, contributing to a cleaner and more efficient codebase.

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. ↩

[gemini-code-assist]

Code Review

This pull request introduces a significant and well-executed UI/UX overhaul, modernizing the control tray, side panel, and audio visualization components. The update to the Gemini 2.5 model is also consistently applied. The result is a much more polished and professional-looking interface. The code quality is high, with effective use of modern SCSS and React practices. I've included a couple of suggestions to further enhance maintainability by abstracting magic numbers and removing redundant styling. Overall, this is an excellent update.

[gemini-code-assist]

The background property is being redundantly set. The base style for & > div already defines the default gradient, so the declarations on line 39 and for :nth-child(2)/:nth-child(4) are unnecessary. Removing them will simplify the code.

      box-shadow: 0 0 6px rgba(31, 148, 255, 0.5);
      
      &:nth-child(1),
      &:nth-child(5) {
        background: linear-gradient(to top, var(--Blue-800), var(--Blue-500));
      }
      
      &:nth-child(3) {
        background: linear-gradient(to top, var(--Blue-400), #a8d4ff);
        box-shadow: 0 0 8px rgba(31, 148, 255, 0.6);
      }