fix: XYN-175 chatPage height bug

[MayankBansal2004]

Description

ChatPage height bug

Testing

tested locally.

Additional Notes

Summary by CodeRabbit

• New Features
  • Dynamic bottom spacing during message streaming to maintain clear separation from the input area and improve readability.
  • Smoother, automatic adjustments as messages grow, preserving expected scrolling and positioning behavior.
  • Improved spacing on mid-size screens for a more consistent layout and better visual balance.

[gemini-code-assist]

Summary of Changes

Hello @MayankBansal2004, 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 resolves a height bug on the chat page by enhancing the dynamic management of bottom spacing, especially during the streaming of assistant messages. The changes ensure that the chat interface maintains correct padding and layout across different screen sizes as content is generated, improving the overall user experience by preventing visual glitches related to content overflow.

Highlights

• Dynamic Bottom Space Adjustment: Introduced a new useEffect hook to dynamically adjust the chat page's bottom padding as streaming content (assistant messages) grows. This ensures proper spacing and prevents content overflow during real-time generation.
• Initial Bottom Space Tracking: A new state variable, initialBottomSpace, was added to store the initial calculated bottom padding, which serves as a baseline for subsequent dynamic adjustments.
• Responsive Layout Refinement: The calculation for spaceNeeded on medium-sized screens (containerHeight <= 900) was slightly increased from 0.72 to 0.78 to provide better separation.
• Performance and Smoothness: The dynamic adjustment mechanism utilizes ResizeObserver for efficient tracking of container size changes and a setInterval for smooth, periodic updates during streaming.

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

[coderabbitai]

Walkthrough

Adds dynamic bottom-space management to the chat page during streaming by introducing initialBottomSpace, a ResizeObserver-driven adjustment loop, and periodic checks. Tweaks mid-size screen spacing calculation. Updates bottomSpace initialization on new streams. No API or exported type changes.

Changes

Cohort / File(s)	Summary of changes
Chat streaming spacing logic frontend/src/routes/_authenticated/chat.tsx	Introduced initialBottomSpace; set baseline bottomSpace at stream start; adjusted mid-size spacing formula (0.72→0.78); added ResizeObserver and 100ms interval to reduce bottomSpace based on streaming content height with a 50px floor and 10px change threshold; retained existing positioning/scroll behavior.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant ChatPage
  participant MessagesContainer
  participant ResizeObserver
  participant Stream

  User->>ChatPage: Start new streaming query
  ChatPage->>ChatPage: Compute spaceNeeded (incl. 0.78 factor for mid-size)
  ChatPage->>ChatPage: Set bottomSpace = initialBottomSpace = spaceNeeded
  ChatPage->>Stream: Begin streaming
  Note over ChatPage,Stream: streamingStarted = true

  ChatPage->>ResizeObserver: Attach to MessagesContainer
  ChatPage->>ChatPage: Start 100ms interval checks

  loop While isStreaming
    ResizeObserver->>ChatPage: Report content height growth (delta)
    ChatPage->>ChatPage: newBottom = max(50px, initialBottomSpace - delta)
    alt Change > 10px
      ChatPage->>MessagesContainer: Update bottomSpace padding
    else No significant change
      ChatPage->>ChatPage: Skip update
    end
  end

  Stream-->>ChatPage: Streaming ends
  ChatPage->>ResizeObserver: Disconnect
  ChatPage->>ChatPage: Clear interval

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat: scroll to bottom button #919 — Earlier introduction of bottomSpace state and its propagation; closely related to this PR’s dynamic adjustments.
• fix(streaming): multi chat parallel streaming #543 — Touches streaming flags/state (isStreaming, partial, retryIsStreaming) within the same file; intersects with new effect dependencies.
• fix(chatbox): fix chatbox position at bottom during chat  #583 — Changes to bottom spacing and chat input layout; complements this PR’s streaming-era padding behavior.

Suggested reviewers

• zereraz
• shivamashtikar
• devesh-juspay
• junaid-shirur
• kalpadhwaryu

Poem

A bunny peeks where chat lines flow,
Adjusts the space as answers grow.
With gentle hops, it tracks the height,
Keeps cushions soft, the margins right.
Stream on, dear words, we’ll make you fit—
A burrow cozy, bit by bit. 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title clearly states the purpose of the change as a fix for the chat page height bug, referencing the relevant ticket and matching the changeset focused on adjusting bottom spacing for chat streaming.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/chatpage-height

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Code Review

This pull request aims to fix a UI bug with the chat page height during message streaming by dynamically adjusting the bottom padding. A new state initialBottomSpace is introduced and a useEffect hook is added to manage this adjustment. While the intent is correct, the new useEffect hook has critical performance issues due to an incorrect dependency array and inefficient polling. I've provided a detailed comment with a suggested refactoring to address these performance problems by using ResizeObserver more effectively and fixing the dependencies.

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cb21713 and ff009b4.

📒 Files selected for processing (1)

• frontend/src/routes/_authenticated/chat.tsx (3 hunks)

🧰 Additional context used

🧠 Learnings (1)

📓 Common learnings

Learnt from: MayankBansal2004
PR: xynehq/xyne#765
File: server/api/chat/chat.ts:5706-5712
Timestamp: 2025-09-04T08:53:33.995Z
Learning: MayankBansal2004 prefers to defer technical improvements like input validation and type safety when the current implementation is working, even when acknowledging potential benefits. He takes a pragmatic approach of "if it's not broken, don't fix it" and will revisit improvements when he has bandwidth.

Learnt from: MayankBansal2004
PR: xynehq/xyne#532
File: frontend/src/routes/_authenticated/chat.tsx:1238-1242
Timestamp: 2025-06-16T08:36:57.488Z
Learning: MayankBansal2004 prefers to keep working implementations even when security improvements are suggested, but appreciates being made aware of potential security considerations for future reference.