Made bubble height width configurable through props. #945
Conversation
WalkthroughThe changes introduced in this pull request primarily focus on enhancing the customization of the chat bubble component. The Changes
WalkthroughThe changes introduced in this pull request primarily focus on enhancing the customization of the Changes
TipsChat with CodeRabbit Bot (
|
|
@prateekkalra is attempting to deploy a commit to the Typebot Team on Vercel. A member of the Team first needs to authorize it. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Status
Actionable comments generated: 1
Files selected for processing (2)
- packages/embeds/js/src/features/bubble/components/Bubble.tsx (3 hunks)
- packages/embeds/js/src/features/bubble/types.ts (1 hunks)
Files skipped from review due to trivial changes (1)
- packages/embeds/js/src/features/bubble/types.ts
Additional comments (Suppressed): 2
packages/embeds/js/src/features/bubble/components/Bubble.tsx (2)
20-24: The
BubblePropsinterface has been extended to include optionalheightandwidthproperties. This allows for greater customization of the chat bubble's dimensions. Ensure that all uses of theBubblecomponent throughout the codebase are compatible with these new properties.166-167: The
w-fullclass has been removed from thebotpart's class list. This could affect the chat bubble's width on small screens. Ensure that this change does not negatively impact the chat bubble's appearance or functionality on small screens.
|
The difference in images might be due to screen resolution. |
Width is ok in my screenshot, it's the height that is not! Please checkout the main branch to check the default styling 🙏 |
|
Sure @baptisteArno |
|
Hi @baptisteArno |
|
It should look like this by default: 
|
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Files selected for processing (1)
- packages/embeds/js/src/features/bubble/components/Bubble.tsx (3 hunks)
Additional comments (Suppressed): 3
packages/embeds/js/src/features/bubble/components/Bubble.tsx (3)
23-24: The addition of
heightandwidthproperties to theBubblePropsinterface allows for greater customization of the chat bubble's dimensions. This is a good change as it enhances the flexibility of the component's usage. However, it would be beneficial to add a comment explaining what units these properties should be in (e.g., pixels, em, etc.) to avoid any confusion for future developers.150-154: The
heightandwidthproperties are used to set theheightandwidthstyles of thebotdiv. If the properties are not provided, fallback values are used. This is a good approach as it ensures that the chat bubble will have default dimensions if no specific dimensions are provided. However, thewidthfallback value includes an!importantflag, which is generally discouraged as it can make debugging more difficult by breaking the natural cascading in your stylesheets. Consider removing this flag if it's not necessary.165-166: The
widthproperty is removed from the class string. This is consistent with the addition of thewidthproperty to theBubblePropsinterface and the use of this property to set thewidthstyle of thebotdiv. However, ensure that this change does not affect the layout of the chat bubble in unexpected ways, especially in different screen sizes and resolutions.
|
@baptisteArno You were right about the height issue. It was looking same for me, because of the smaller resolution in my laptop. Pushed a fix to align the default height with main branch. Removed max-height, since it's already been taken care by the tailwind class. |
|
Sorry the issue lacked some context and clear scope. I'll close this as it does not fully satisfy what I was thinking about 🙏 |
|
/tip 10 |
|
🎉🎈 @prateekkalra has been awarded $10! 🎈🎊 |
/claim #458
Made bubble height width configurable through props.
Please find default height width screenshot below.
Summary by CodeRabbit