feat(web): Add disclaimer for UTL web chat #16577
Conversation
WalkthroughThe pull request introduces changes to the Changes
Possibly related PRs
Suggested reviewers
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 using PR comments)
Other keywords and placeholders
Documentation and Community
|
Datadog ReportAll test runs ✅ 34 Total Test Services: 0 Failed, 32 Passed Test ServicesThis report shows up to 10 services
🔻 Code Coverage Decreases vs Default Branch (2) |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #16577 +/- ##
==========================================
- Coverage 36.80% 36.78% -0.02%
==========================================
Files 6854 6855 +1
Lines 142256 142308 +52
Branches 40572 40591 +19
==========================================
- Hits 52353 52351 -2
- Misses 89903 89957 +54
Flags with carried forward coverage won't be shown. Click here to find out more.
... and 3 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 10
🧹 Outside diff range and nitpick comments (4)
apps/web/components/ChatPanel/ChatBubble/ChatBubble.tsx (3)
30-30: Consider renaming 'hasButtonBeenClicked' to 'hasAcceptedTerms' for clarityThe variable
hasButtonBeenClickedis used to track whether the user has accepted the terms from the disclaimer. Renaming it tohasAcceptedTermswould improve code readability and better reflect its purpose.Apply this diff to rename the variable:
- const hasButtonBeenClicked = useRef(false) + const hasAcceptedTerms = useRef(false)And update its usages accordingly.
48-86: Ensure the 'FocusableBox' component meets accessibility standardsConsider verifying that the
FocusableBoxcomponent includes necessary accessibility attributes. If the button lacks sufficient accessible text for screen readers, adding anaria-labeloraria-labelledbyattribute would enhance accessibility.
72-72: Avoid inline styles for maintainabilityUsing inline styles can make the code harder to maintain and override. Consider using CSS classes instead of inline styles for controlling visibility.
Apply this diff:
- <Box style={{ visibility: loading ? 'hidden' : 'visible' }}> + <Box className={loading ? styles.hidden : undefined}>And define the
hiddenclass in your CSS:.hidden { visibility: hidden; }apps/web/components/ChatPanel/WatsonChatPanel/WatsonChatPanel.tsx (1)
418-418: Usenullinstead of an empty string forchatTermsUrldefaultAssigning
''(empty string) as the default value forchatTermsUrlmight lead to unintended behavior when performing truthy checks. Usingnullcan be clearer for representing the absence of a value.Apply this diff to adjust the default value:
- const chatTermsUrl = n('chatTermsUrl', '') + const chatTermsUrl = n('chatTermsUrl', null)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (4)
- apps/web/components/ChatPanel/ChatBubble/ChatBubble.tsx (3 hunks)
- apps/web/components/ChatPanel/ChatBubble/EmbedDisclaimer/EmbedDisclaimer.css.ts (1 hunks)
- apps/web/components/ChatPanel/ChatBubble/EmbedDisclaimer/EmbedDisclaimer.tsx (1 hunks)
- apps/web/components/ChatPanel/WatsonChatPanel/WatsonChatPanel.tsx (3 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
apps/web/components/ChatPanel/ChatBubble/ChatBubble.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/components/ChatPanel/ChatBubble/EmbedDisclaimer/EmbedDisclaimer.css.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/components/ChatPanel/ChatBubble/EmbedDisclaimer/EmbedDisclaimer.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/components/ChatPanel/WatsonChatPanel/WatsonChatPanel.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
🔇 Additional comments (2)
apps/web/components/ChatPanel/ChatBubble/EmbedDisclaimer/EmbedDisclaimer.css.ts (1)
1-3: LGTM! Clean imports following best practices.The imports are well-organized, separating third-party and internal dependencies.
apps/web/components/ChatPanel/ChatBubble/ChatBubble.tsx (1)
Line range hint
1-88: The implementation follows Next.js and TypeScript best practicesThe code effectively integrates the
EmbedDisclaimercomponent, manages state efficiently withuseStateanduseRef, and appropriately uses TypeScript for type safety.
apps/web/components/ChatPanel/ChatBubble/EmbedDisclaimer/EmbedDisclaimer.css.ts
Show resolved
Hide resolved
apps/web/components/ChatPanel/ChatBubble/EmbedDisclaimer/EmbedDisclaimer.css.ts
Show resolved
Hide resolved
apps/web/components/ChatPanel/ChatBubble/EmbedDisclaimer/EmbedDisclaimer.tsx
Show resolved
Hide resolved
apps/web/components/ChatPanel/ChatBubble/EmbedDisclaimer/EmbedDisclaimer.tsx
Outdated
Show resolved
Hide resolved
apps/web/components/ChatPanel/ChatBubble/EmbedDisclaimer/EmbedDisclaimer.tsx
Show resolved
Hide resolved
apps/web/components/ChatPanel/ChatBubble/EmbedDisclaimer/EmbedDisclaimer.tsx
Show resolved
Hide resolved
apps/web/components/ChatPanel/ChatBubble/EmbedDisclaimer/EmbedDisclaimer.tsx
Show resolved
Hide resolved
apps/web/components/ChatPanel/ChatBubble/EmbedDisclaimer/EmbedDisclaimer.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (1)
apps/web/components/ChatPanel/ChatBubble/ChatBubble.tsx (1)
29-30: Consider adding documentation for state and refWhile the implementation is correct, adding JSDoc comments would improve code maintainability by explaining:
- Why a ref is used for tracking button clicks
- The purpose of the modal state
+// Tracks if the button has been clicked to prevent showing the modal multiple times const hasButtonBeenClicked = useRef(false) +// Controls the visibility of the disclaimer modal const [isConfirmModalOpen, setIsConfirmModalOpen] = useState(false)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (2)
- apps/web/components/ChatPanel/ChatBubble/ChatBubble.tsx (3 hunks)
- apps/web/components/ChatPanel/ChatBubble/EmbedDisclaimer/EmbedDisclaimer.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/web/components/ChatPanel/ChatBubble/EmbedDisclaimer/EmbedDisclaimer.tsx
🧰 Additional context used
📓 Path-based instructions (1)
apps/web/components/ChatPanel/ChatBubble/ChatBubble.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
🔇 Additional comments (3)
apps/web/components/ChatPanel/ChatBubble/ChatBubble.tsx (3)
1-1: LGTM: Import statements are well-organizedThe new imports are properly structured, with React hooks and the EmbedDisclaimer component and its types clearly separated.
Also applies to: 6-9
18-18: LGTM: Props interface is well-typedGood use of TypeScript's Pick utility type to ensure type safety while only including the necessary props from EmbedDisclaimerProps.
Line range hint
1-94: LGTM: Follows NextJS best practicesThe component adheres to NextJS best practices:
- Proper use of TypeScript for type safety
- Efficient state management with hooks
- Clean component structure
* Add disclaimer * Move EmbedDisclaimer component * Remove whitespace * Address coderabbit suggestions --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Add disclaimer for UTL web chat
Why
Screenshots / Gifs
Screen.Recording.2024-10-28.at.09.37.49.mov
Checklist:
Summary by CodeRabbit
Release Notes
New Features
EmbedDisclaimercomponent to present terms and conditions within the chat interface.ChatBubbleto conditionally display the disclaimer based on user interactions.Bug Fixes
Styling
EmbedDisclaimercomponent to improve visual presentation and responsiveness.