<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a new layout option for the TextInput component.
- Added support for GUMLET and TIKTOK video content types in
VideoBubbleContent.
- Enhanced VideoUploadContent to handle new properties like aspectRatio
and maxWidth.
- Updated VideoBubble to include aspect-ratio and max-width styles based
on content properties.
- **Refactor**
- Changed the extension used for internationalization (i18n) in the VS
Code environment.
- Modified how environment variables are accessed in tolgee.tsx.
- Updated parseVideoUrl function to include a new property
videoSizeSuggestion.
- **Chores**
- Updated the tolgeeEnv object in env.ts and added a new optional
parameter to the getRuntimeVariable function.
- Expanded video handling capabilities by introducing new video content
types and associated regular expressions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Closes#978#936#926
this PR fixes issue
https://github.com/baptisteArno/typebot.io/issues/1008 by making the
position of `HandDrawnArrow`'s parent relative, which confines the
absolute position of its children to be within the bounds of the parent,
causing layout not shift due to `right -30px`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Updated the layout behavior of the `RealTimeResults` component on the
landing page for better user experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
### Summary by CodeRabbit
- Refactor: Transitioned to a new translation library (`@tolgee/react`)
across the application, enhancing the localization capabilities and
consistency.
- New Feature: Introduced a JSON configuration file for application
settings, improving customization and flexibility.
- Refactor: Updated SVG attribute naming convention in the
`WhatsAppLogo` component to align with React standards.
- Chore: Adjusted the `.gitignore` file and added a new line at the end.
- Documentation: Added instructions for setting up environment variables
for the Tolgee i18n contribution dev tool, improving the self-hosting
configuration guide.
- Style: Updated the `CollaborationMenuButton` to hide the
`PopoverContent` component by scaling it down to zero.
- Refactor: Simplified error handling logic for fetching and updating
typebots in `TypebotProvider.tsx`, improving code readability and
maintenance.
- Refactor: Removed the dependency on the `parseGroupTitle` function,
simplifying the code in several components.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR fixes the flickering and improves the performance so panning
around the graph is much smoother than before.
https://github.com/baptisteArno/typebot.io/assets/62795688/56b91e20-1eb0-44b5-9a4a-c07525c2ba48
/claim #575
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
### Summary by CodeRabbit
- Refactor: Improved the Graph component's scaling calculation for
enhanced readability and maintenance.
- Style: Updated the Graph component's style properties to ensure better
compatibility and visual performance on webkit browsers.
These changes aim to enhance the user experience by ensuring the Graph
component displays consistently across different web browsers. The
refactoring of the scaling calculation also makes the code easier to
understand and maintain, potentially leading to quicker updates and bug
fixes in the future.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Baptiste Arnaud <contact@baptiste-arnaud.fr>
/claim #667
The volume slider in audio element in windows chrome overflows.
Possible fixes:
1. Change the width of audio blocks. (Not suggested, as the width of all
blocks should be consistent)
2. Adjust the audio sub elements, so it doesn't overflow.(IMPLEMENTED)
It's not so straightforward to apply customization to audio tag element.
The best possible way I could find, to make the app look good, is by
hiding the timeline track in the audio. It was showing up very small
anyway(due to block width), so there shouldn't be an issue.
Please look at the before & after videos below.
https://github.com/baptisteArno/typebot.io/assets/29385192/f61c5b58-834d-470f-b684-bd82181e07f4https://github.com/baptisteArno/typebot.io/assets/29385192/88f932eb-dc7e-4346-bf64-6405a015013e
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
### Summary by CodeRabbit
- Style: Improved the visual layout of the audio player on Windows. The
update includes a cleaner interface by hiding the track timeline and
adjusting the media controls panel. This change enhances the user
experience by providing a more streamlined and intuitive audio player
design.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
**Fixed the drastic zoom increase decrease on ctrl + mouse scroll.**
The issue was occuring due to the "scale" property in the pinch gesture.
The scale was getting bigger values, leading to more zooming.
What I did was, made sure that maximum scale difference between current
and last value cannot be more than the scaling factor used in
zoomin/zoomout buttons. That is. 0.2
Also, the pinch zoom would work as expected.
/claim #567
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
### Summary by CodeRabbit
- Improvement: Enhanced zoom precision in the Graph component. This
update allows for more accurate scaling when adjusting the view in the
graph builder. The change ensures that the zoom level adjusts more
precisely, providing a smoother and more controlled user experience when
interacting with graphs.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
BREAKING CHANGE: Stripe environment variables simplified. Check out the
new configs to adapt your existing system.
Closes#906
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
### Summary by CodeRabbit
**New Features:**
- Introduced a usage-based billing system, providing more flexibility
and options for users.
- Integrated with Stripe for a smoother and more secure payment process.
- Enhanced the user interface with improvements to the billing,
workspace, and pricing pages for a more intuitive experience.
**Improvements:**
- Simplified the billing logic, removing additional chats and yearly
billing for a more streamlined user experience.
- Updated email notifications to keep users informed about their usage
and limits.
- Improved pricing and currency formatting for better clarity and
understanding.
**Testing:**
- Updated tests and specifications to ensure the reliability of new
features and improvements.
**Note:** These changes aim to provide a more flexible and user-friendly
billing system, with clearer pricing and improved notifications. Users
should find the new system more intuitive and easier to navigate.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
