enhancement: bubble/full chat css enhancements for width/height on chatWindow#355
enhancement: bubble/full chat css enhancements for width/height on chatWindow#355chloebyun-wd wants to merge 3 commits intomainfrom
Conversation
Summary of ChangesHello, I'm Gemini Code Assist1! 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 improves the flexibility and responsiveness of the chat window's height and width properties across both bubble and full-screen modes. It introduces support for various CSS units and expressions, ensuring chat windows adapt gracefully to different screen sizes and user configurations, particularly on mobile devices, while also fixing several related display bugs. Highlights
Using Gemini Code AssistThe 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
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 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. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces significant enhancements to the chat window's height and width properties, allowing for more flexible and responsive configurations using CSS strings. The changes are well-implemented across the bubble and full-page chat components, including necessary type updates, improved mobile handling, and excellent documentation updates. I've found one area in src/features/full/components/Full.tsx where the code could be made more readable, and I've provided a suggestion for it. Overall, this is a great enhancement.
| height: props.theme?.chatWindow?.height | ||
| ? typeof props.theme.chatWindow.height === 'string' | ||
| ? props.theme.chatWindow.height | ||
| : `min(${props.theme.chatWindow.height}px, 100dvh)` | ||
| : '100dvh', | ||
| 'max-height': '100dvh', | ||
| width: props.theme?.chatWindow?.width | ||
| ? typeof props.theme.chatWindow.width === 'string' | ||
| ? props.theme.chatWindow.width | ||
| : `${props.theme.chatWindow.width}px` | ||
| : '100%', |
There was a problem hiding this comment.
The logic for determining height and width is functionally correct but can be hard to read due to nested ternary operators and repeated property access. This can be simplified for better readability and maintainability by using an immediately-invoked function expression (IIFE) to evaluate the property once.
height: (h => (typeof h === 'string' ? h : typeof h === 'number' ? `min(${h}px, 100dvh)` : '100dvh'))(props.theme?.chatWindow?.height),
'max-height': '100dvh',
width: (w => (typeof w === 'string' ? w : typeof w === 'number' ? `${w}px` : '100%'))(props.theme?.chatWindow?.width),
chloebyun-wd
force-pushed
the
enhancement/mobile-height-responsiveness
branch
2 times, most recently
from
80fccf4 to
22001df
Compare
|
For mobile bubble, its good that it fills the screen for <= 640 dimension, how bout the width? do we want to fill the width over certain threshold as well? Any breaking effect on |
| ``` | ||
|
|
||
| To enable full screen, add `margin: 0` to <code>body</code> style, and confirm you don't set height and width | ||
| To enable full screen, add `margin: 0` to <code>body</code> style. The default height is `100dvh` (full viewport height), so omitting `height` is recommended for true full-screen mode. |
There was a problem hiding this comment.
Don think we need to still add margin 0 right? its now responsive full screen by default?
There was a problem hiding this comment.
Theres acutally inline code that sets/cleanns the margin on the Full experience:
introduced from: 00cde42
so we can definitely leave it as part of the docs as a defensive mechanism for css
I see on my local the width snapping to full width on width less than 640px and I believe this is existing behaviour this bubble has ( FlowiseChatEmbed/src/assets/index.css Line 474 in 22001df As for any breaking changes from the index.css file, theres no obvious breaking changes. For index.css specifically, the only meaningful behavior changes are in the mobile media block (@media (max-width: 640px) for div[part='bot']). Nothing to call out for the API side, but may affect some users who depended on the old mobile height behavior or aggressive !important overrides that the file previously had. If anything, they would set a chatWindow.height explicitly. |
chloebyun-wd
force-pushed
the
enhancement/mobile-height-responsiveness
branch
from
22001df to
902a432
Compare
|
awesome, thanks for checking! let me know when its ready to review again |
|
@HenryHengZJ Ive restored index.css to what main currently has to give more granular control over to the theme config (originally this branch added more defensive ways for full screening) since the current index.css does support full screen on screen sizes less than 640px width. Ready for re-review 👍 |
2 participants
Additions/enhancements to the height/width properties as part of enhancement request
Test cases covered:
Bubble — Height
Bubble — Width
Bubble — Mobile
Full — Height
Issue #225 — Core scenarios