✨ (theme) Add progress bar option #1276
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Important Auto Review SkippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the To trigger a single review, invoke the WalkthroughThe updates mainly focus on integrating a progress bar into the application, affecting both the UI components and the bot engine's logic. The progress bar's appearance and behavior are governed by new constants and schemas, with specific changes to calculate and display progress in chat sessions. Additionally, adjustments were made to the settings and theme components for consistent height management, leveraging a shared Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![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: 4
Configuration used: CodeRabbit UI
Files selected for processing (22)
- apps/builder/src/features/settings/components/SettingsPage.tsx (2 hunks)
- apps/builder/src/features/settings/components/SettingsSideMenu.tsx (2 hunks)
- apps/builder/src/features/theme/components/ThemePage.tsx (2 hunks)
- apps/builder/src/features/theme/components/ThemeSideMenu.tsx (2 hunks)
- apps/builder/src/features/theme/components/general/GeneralSettings.tsx (4 hunks)
- apps/builder/src/features/theme/components/general/ProgressBarForm.tsx (1 hunks)
- apps/viewer/src/features/chat/api/continueChat.ts (2 hunks)
- apps/viewer/src/features/chat/api/startChat.ts (1 hunks)
- apps/viewer/src/features/chat/api/startChatPreview.ts (1 hunks)
- packages/bot-engine/computeCurrentProgress.ts (1 hunks)
- packages/bot-engine/continueBotFlow.ts (1 hunks)
- packages/bot-engine/getNextGroup.ts (1 hunks)
- packages/bot-engine/startSession.ts (1 hunks)
- packages/embeds/js/src/assets/index.css (2 hunks)
- packages/embeds/js/src/components/Bot.tsx (7 hunks)
- packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx (3 hunks)
- packages/embeds/js/src/components/ProgressBar.tsx (1 hunks)
- packages/embeds/js/src/utils/setCssVariablesValue.ts (3 hunks)
- packages/schemas/features/chat/schema.ts (1 hunks)
- packages/schemas/features/chat/sessionState.ts (1 hunks)
- packages/schemas/features/typebot/theme/constants.ts (2 hunks)
- packages/schemas/features/typebot/theme/schema.ts (2 hunks)
Additional comments: 30
apps/builder/src/features/theme/components/ThemePage.tsx (1)
- 5-11: > 📝 NOTE
This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [8-18]
The changes in
ThemePageto useheaderHeightfor dynamic height calculation are correctly implemented and follow best practices for maintaining layout consistency.apps/builder/src/features/settings/components/SettingsPage.tsx (1)
- 6-12: > 📝 NOTE
This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [9-19]
The use of
headerHeightinSettingsPagefor dynamic height calculation is correctly implemented, enhancing layout consistency with the progress bar feature.packages/schemas/features/typebot/theme/constants.ts (1)
- 35-47: > 📝 NOTE
This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [11-45]
The addition of
progressBarPlacements,progressBarPositions, and their incorporation into thedefaultThemeobject are well-implemented, promoting consistency and maintainability for progress bar settings.apps/viewer/src/features/chat/api/startChatPreview.ts (1)
- 86-86: The conditional assignment of the
progressproperty instartChatPreviewis correctly implemented. Ensure that the consumer code correctly handles the presence or absence of this property.Ensure that the consumer code correctly handles the
progressproperty, especially its absence, to avoid potential issues.apps/viewer/src/features/chat/api/startChat.ts (1)
- 99-99: The addition of a conditional
progressproperty instartChatis correctly implemented. As withstartChatPreview, ensure the consumer code properly handles the presence or absence of this property.Verify that the consumer code correctly handles the
progressproperty to ensure a smooth user experience.packages/schemas/features/typebot/theme/schema.ts (1)
- 59-72: The introduction of
progressBarSchemaand its inclusion ingeneralThemeSchemaare well-implemented, allowing for customizable progress bar settings within the theme schema.apps/viewer/src/features/chat/api/continueChat.ts (1)
- 97-118: The enhancements in
continueChatto compute and return theprogressproperty based on the chat session's state are correctly implemented. Ensure that the handling of theprogressproperty is consistent and correctly managed across the application.Verify that the handling of the
progressproperty is consistent across the application to ensure a seamless user experience.apps/builder/src/features/theme/components/general/ProgressBarForm.tsx (1)
- 18-100: The
ProgressBarFormcomponent is well-structured and correctly implements form inputs for configuring the progress bar's appearance and behavior. The use ofdefaultThemefor default values and controlled components aligns with best practices.apps/builder/src/features/settings/components/SettingsSideMenu.tsx (1)
- 54-54: The change to use a fixed height of "full" in
SettingsSideMenusimplifies the layout and ensures the component occupies the entire available vertical space, which is a positive change for UI consistency.apps/builder/src/features/theme/components/general/GeneralSettings.tsx (4)
- 9-9: The import of
ProgressBarfrom@typebot.io/schemasis correctly added to support the new progress bar feature in the theme settings.- 27-27: The import of
ProgressBarFormcomponent is correctly added, which is essential for rendering the progress bar settings form in the UI.- 67-68: The
updateProgressBarfunction is correctly implemented to update the progress bar settings in the theme. It ensures that any changes made through theProgressBarFormare reflected in the theme's general settings.- 134-139: The usage of
ProgressBarFormwithin theGeneralSettingscomponent is correctly implemented. It passes the current progress bar settings from the theme and provides a callback to update these settings, ensuring a seamless user experience for configuring the progress bar.packages/bot-engine/getNextGroup.ts (1)
- 73-79: The logic added to update
progressMetadataby incrementingtotalAnswersbased on the answers length of the first item intypebotsQueueis correctly implemented. This change is crucial for accurately tracking the user's progress through the session.packages/schemas/features/chat/sessionState.ts (1)
- 84-88: The addition of the
progressMetadatafield to thesessionStateSchemaV2object is correctly implemented. This new field, which includes atotalAnswersproperty of type number, is essential for tracking the user's progress in a session.apps/builder/src/features/theme/components/ThemeSideMenu.tsx (1)
- 63-63: The change to use a fixed height value (
h="full") for theThemeSideMenucomponent is correctly implemented. This adjustment ensures that the component's layout is consistent and accommodates the new progress bar feature effectively.packages/embeds/js/src/utils/setCssVariablesValue.ts (4)
- 22-29: The addition of the
progressBarobject with properties undercssVariableNames.generalis correctly implemented. This setup is essential for defining CSS variables related to the progress bar's styling, ensuring a customizable appearance.- 60-70: The modification of
setCssVariablesValueto accept an additionalisPreviewparameter is correctly implemented. This change allows for conditional styling adjustments based on whether the theme is being previewed, which is particularly relevant for the progress bar's position.- 89-93: The update to
setGeneralThemeto include theisPreviewparameter and callsetProgressBarwith this parameter is correctly implemented. This ensures that the progress bar's styling can be dynamically adjusted based on the preview state.- 96-133: The addition of the
setProgressBarfunction is correctly implemented. This function handles setting CSS variables related to the progress bar's styling, including its position, color, background color, height, and placement. The conditional logic for thepositionproperty based on theisPreviewstate is particularly noteworthy, as it ensures the progress bar is displayed correctly in both preview and live modes.packages/embeds/js/src/components/Bot.tsx (5)
- 3-3: The import of
isDefinedis correctly added to support conditional rendering based on the progress bar's state.- 21-21: The import of
ProgressBaris correctly added to support the display of the progress bar within the bot's UI.- 133-140: The logic to re-initialize the bot when the progress bar is enabled but not previously enabled in the initial chat reply is a thoughtful addition. However, ensure that this re-initialization does not lead to any unintended side effects or duplicate API calls.
- 202-204: Creating a signal for
progressValuebased on theinitialChatReply.progressis a clean way to manage the progress bar's state. This ensures that the progress bar accurately reflects the user's progress through the session.- 242-249: The conditional rendering of the
ProgressBarcomponent based on theprogressValueand the progress bar's enabled state in the theme settings is correctly implemented. This ensures that the progress bar is only displayed when appropriate.packages/schemas/features/chat/schema.ts (1)
- 313-318: The addition of the
progressfield to thechatResponseBaseSchemawith a description indicating its purpose and constraints is well-documented and correctly implemented. This field is essential for supporting the progress bar feature by providing a way to communicate the user's current progress through the chat session.packages/embeds/js/src/assets/index.css (2)
- 34-39: The custom properties for the Typebot progress bar's styling, including its position, background color, color, height, top, and bottom properties, are correctly defined. These properties provide a flexible way to customize the progress bar's appearance.
- 411-427: The CSS rules for the
.typebot-progress-bar-containerand its child.typebot-progress-barare correctly defined, ensuring the progress bar is styled according to the custom properties. The use ofvar()to apply the custom properties and the transition effect for the width change are best practices for a smooth user experience.packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx (1)
- 67-67: The addition of the
onProgressUpdatecallback to thePropstype is a good practice for extending functionality in a type-safe manner. This allows for a clean way to handle progress updates externally.packages/bot-engine/startSession.ts (1)
- 140-144: The conditional addition of
progressMetadatato the session state object is well-implemented, taking into account the presence ofinitialSessionState.whatsAppand whether the progress bar is enabled intypebot.theme.general. This approach ensures thatprogressMetadatais only added when relevant, which is a good practice for maintaining clean and relevant state objects.However, it's important to ensure that the rest of the system correctly handles the presence or absence of
progressMetadatain the session state, especially in functions that consume this state.Verification successful
The verification process has confirmed that the application correctly handles
progressMetadataacross various components, including session state management, progress computation, and user interface updates. The codebase demonstrates a consistent approach to managing this data, ensuring thatprogressMetadatais effectively integrated and utilized where necessary. This aligns with the initial review comment's emphasis on the importance of handlingprogressMetadatacorrectly throughout the system.Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Verify that functions consuming session state handle progressMetadata correctly. # This is a placeholder for the actual verification logic, which would depend on the specific usage of session state throughout the application. echo "Verification logic to be implemented based on application specifics."Length of output: 146
Script:
#!/bin/bash # Search for references to 'progressMetadata' in the codebase to see how it's handled. rg "progressMetadata" --context 5Length of output: 9462
packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Configuration used: CodeRabbit UI
Files ignored due to path filters (3)
packages/embeds/js/package.jsonis excluded by:!**/*.jsonpackages/embeds/nextjs/package.jsonis excluded by:!**/*.jsonpackages/embeds/react/package.jsonis excluded by:!**/*.json
Files selected for processing (1)
- packages/embeds/js/src/components/Bot.tsx (7 hunks)
Files skipped from review as they are similar to previous changes (1)
- packages/embeds/js/src/components/Bot.tsx
Summary by CodeRabbit