chore: update dependencies and refactor sidebar and email components#6546
chore: update dependencies and refactor sidebar and email components#6546KhBaterdene merged 2 commits intomainfrom
Conversation
Reviewer's GuideThis PR updates project dependencies and refactors multiple UI components to simplify their structure, adopt updated erxes-ui primitives, improve layout consistency, and standardize navigation patterns. Class diagram for refactored ChooseChannel componentclassDiagram
class ChooseChannel {
+useGetChannels()
+channels: IChannel[]
+loading: boolean
}
class ChannelItem {
+_id: string
+name: string
+isActive: boolean
+handleClick()
}
ChooseChannel --> ChannelItem: renders multiple
Class diagram for updated EmailField and EmailList componentsclassDiagram
class EmailListField {
+emails: Email[]
+noValidation: boolean
+onValidationStatusChange()
}
class EmailList {
+emails: Email[]
}
class EmailForm {
+editingEmail: Email
}
EmailListField --> EmailList: contains
EmailListField --> EmailForm: contains
Class diagram for refactored ConversationSideWidget componentclassDiagram
class ConversationSideWidget {
+customerId: string
}
class CustomerWidget {
+customerIds: string[]
+scope: InboxHotkeyScope
}
class CustomerWidgetTrigger {
}
ConversationSideWidget --> CustomerWidget: renders
ConversationSideWidget --> CustomerWidgetTrigger: renders
Class diagram for updated SidebarContent componentclassDiagram
class SidebarContent {
+ScrollArea
+className: string
}
SidebarContent --> ScrollArea: wraps
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
There was a problem hiding this comment.
Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughReplaces the SidebarContent div with a ScrollArea-backed component and updates its types; simplifies channel selection UI to direct Button rendering; removes FrontlineActions; adjusts navigation/group wrappers and several inbox-related component renderings and minor DOM/class changes. Changes
Sequence Diagram(s)sequenceDiagram
participant SidebarParent as Sidebar (consumer)
participant SidebarContent as Sidebar.Content
participant ScrollArea as ScrollArea (new)
SidebarParent->>SidebarContent: render
Note over SidebarContent,ScrollArea: Previously rendered a <div>\nNow forwards ref/props to ScrollArea
SidebarContent->>ScrollArea: mount with props & ref
ScrollArea-->>SidebarParent: provides scrolling container for children
sequenceDiagram
participant UI as ChooseChannel UI
participant API as useGetChannels
participant List as Channel list (Buttons)
UI->>API: call useGetChannels (unconditional)
API-->>UI: channels (loading / data / empty)
alt loading
UI->>UI: show skeleton stack
else has channels
UI->>List: render ChannelItem as Button per channel
else empty
UI->>UI: render "No channels found"
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (2)**/*.{ts,tsx}📄 CodeRabbit inference engine (.cursorrules)
Files:
**/*.tsx📄 CodeRabbit inference engine (.cursorrules)
Files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
🔇 Additional comments (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Hey there - I've reviewed your changes and they look great!
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location> `frontend/plugins/frontline_ui/src/modules/inbox/channel/components/ChooseChannel.tsx:7` </location>
<code_context>
- const { channels, loading } = useGetChannels({
- skip: !open,
- });
+ const { channels, loading } = useGetChannels();
if (loading)
</code_context>
<issue_to_address>
**question (performance):** Removing the 'skip: !open' option may lead to unnecessary data fetching.
Previously, channels were only fetched when the collapsible was open, minimizing network requests. Now, channels are always fetched, which may affect performance if the component is mounted but not visible. Please confirm if this behavior is intended.
</issue_to_address>
### Comment 2
<location> `frontend/plugins/frontline_ui/src/modules/inbox/conversations/conversation-detail/components/ConversationSideWidget.tsx:10-13` </location>
<code_context>
- <SideMenu.Content value="customer">
- <SideMenu.Header Icon={IconUser} label="Customer Details" />
- {customerId && (
- <CustomerWidget
- customerId={customerId}
- scope={InboxHotkeyScope.MainPage}
- />
- )}
</code_context>
<issue_to_address>
**suggestion:** Passing duplicate customerId values in customerIds array may be redundant.
If only one customer ID is needed, pass a single value to prevent confusion or unexpected behavior.
```suggestion
<CustomerWidget
customerIds={customerId ? [customerId] : []}
scope={InboxHotkeyScope.MainPage}
/>
```
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
frontend/plugins/frontline_ui/src/modules/inbox/channel/components/ChooseChannel.tsx
Show resolved
Hide resolved
| <CustomerWidget | ||
| customerIds={[customerId || '', customerId || '']} | ||
| scope={InboxHotkeyScope.MainPage} | ||
| /> |
There was a problem hiding this comment.
suggestion: Passing duplicate customerId values in customerIds array may be redundant.
If only one customer ID is needed, pass a single value to prevent confusion or unexpected behavior.
| <CustomerWidget | |
| customerIds={[customerId || '', customerId || '']} | |
| scope={InboxHotkeyScope.MainPage} | |
| /> | |
| <CustomerWidget | |
| customerIds={customerId ? [customerId] : []} | |
| scope={InboxHotkeyScope.MainPage} | |
| /> |
There was a problem hiding this comment.
Caution
Changes requested ❌
Reviewed everything up to f617ad2 in 1 minute and 51 seconds. Click for details.
- Reviewed
359lines of code in9files - Skipped
1files when reviewing. - Skipped posting
12draft comments. View those below. - Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.
1. frontend/libs/erxes-ui/src/components/sidebar.tsx:408
- Draft comment:
Using ScrollArea instead of a plain div: verify that removal of 'overflow-auto' is intentional and ScrollArea correctly handles scrolling. - Reason this comment was not posted:
Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 0% vs. threshold = 50% The comment violates our rules in multiple ways: 1) It asks for verification/confirmation which we explicitly disallow 2) It starts with "verify that..." which is a red flag 3) The change appears intentional and deliberate - they're switching to a ScrollArea component which is clearly meant to handle scrolling behavior 4) If there was an issue with scrolling, it would be immediately obvious in testing. Could the ScrollArea component be buggy or not work as expected? Could removing overflow-auto cause issues in certain edge cases? While those are theoretical concerns, the comment still violates our rules by asking for verification rather than pointing out an actual issue. If there were real scrolling problems, they should be reported directly rather than asking for verification. Delete this comment. It violates our rules by asking for verification, and doesn't point out any actual issues with the code change.
2. frontend/libs/erxes-ui/src/modules/inputs/components/EmailField.tsx:147
- Draft comment:
EmailListField: Removing the wrapper div around may affect layout/padding – confirm that the direct use of maintains the intended spacing. - Reason this comment was not posted:
Comment was not on a location in the diff, so it can't be submitted as a review comment.
3. frontend/libs/erxes-ui/src/modules/inputs/components/EmailField.tsx:171
- Draft comment:
EmailList: The empty state now returns a simple. Consider if a more informative empty state is desired. - Reason this comment was not posted:
Confidence changes required:33%<= threshold50%None
4. frontend/libs/erxes-ui/src/modules/inputs/components/EmailField.tsx:378
- Draft comment:
EmailForm: Changed container padding from 'px-1 pb-1' to 'p-1 pt-0'; ensure this new spacing meets UI design requirements. - Reason this comment was not posted:
Comment was not on a location in the diff, so it can't be submitted as a review comment.
5. frontend/plugins/frontline_ui/src/modules/FrontlineActions.tsx:1
- Draft comment:
Removal of FrontlineActions: Confirm that this deletion is intentional and no downstream dependencies require this component. - Reason this comment was not posted:
Comment was not on a location in the diff, so it can't be submitted as a review comment.
6. frontend/plugins/frontline_ui/src/modules/FrontlineNavigation.tsx:27
- Draft comment:
New usage of 'group/inbox' and 'group-hover/inbox:visible' Tailwind classes: ensure these class names are supported and provide the expected hover behavior. - Reason this comment was not posted:
Comment did not seem useful. Confidence is useful =0%<= threshold50%This comment is asking the PR author to ensure that the Tailwind classes are supported and provide the expected behavior. This falls under the rule of not asking the author to ensure behavior is intended or tested. Therefore, this comment should be removed.
7. frontend/plugins/frontline_ui/src/modules/FrontlineSubGroups.tsx:6
- Draft comment:
Unused variable 'location' is declared but not used; consider removing it if no longer necessary. - Reason this comment was not posted:
Comment was not on a location in the diff, so it can't be submitted as a review comment.
8. frontend/plugins/frontline_ui/src/modules/inbox/channel/components/ChooseChannel.tsx:6
- Draft comment:
Refactor in ChooseChannel: Removal of the Collapsible and search functionality simplifies the component. Confirm that the loss of search/filter capability is intentional. - Reason this comment was not posted:
Comment looked like it was already resolved.
9. frontend/plugins/frontline_ui/src/modules/inbox/components/InboxActions.tsx:12
- Draft comment:
InboxActions: Removed searchParams-based background style logic. Verify that omitting the 'bg-muted' style when no search params exist is acceptable. - Reason this comment was not posted:
Comment did not seem useful. Confidence is useful =0%<= threshold50%The comment is asking the PR author to verify if omitting a style is acceptable, which falls under asking the author to confirm their intention. This violates the rule against asking for confirmation of intention or behavior.
10. frontend/plugins/frontline_ui/src/modules/integrations/components/ChooseIntegrationType.tsx:31
- Draft comment:
IntegrationTypeItem: Replacing plain text with TextOverflowTooltip improves text handling—verify that tooltip behavior is consistent with other UI elements. - Reason this comment was not posted:
Confidence changes required:33%<= threshold50%None
11. frontend/plugins/frontline_ui/src/modules/FrontlineNavigation.tsx:15
- Draft comment:
Typographical error: The class name "group/inbox" appears suspicious. It might be intended to be two separate classes (e.g., "group inbox") rather than using a forward slash. Please verify if this is intentional. - Reason this comment was not posted:
Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 0% vs. threshold = 50% This is a false positive. The forward slash syntax ingroup/inboxis a valid Tailwind CSS feature for named groups, used to prevent group naming conflicts. This is confirmed by the matchinggroup-hover/inboxmodifier that references it. The code is using the feature correctly. Could there be a different CSS framework in use that doesn't support this syntax? Could this be a custom implementation where this syntax isn't supported? The presence of other Tailwind-style utility classes (likerelative,invisible,absolute) and the consistent usage of the group naming pattern strongly indicates this is indeed Tailwind CSS. The comment should be deleted as it incorrectly flags a valid Tailwind CSS group naming feature as a typographical error.
12. frontend/plugins/frontline_ui/src/modules/FrontlineNavigation.tsx:27
- Draft comment:
Typographical error: The class name 'group-hover/inbox:visible' appears to be a mistake. Did you mean to use 'group-hover:visible'? - Reason this comment was not posted:
Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 0% vs. threshold = 50% The comment is incorrect. Tailwind CSS supports named groups using the /name syntax, which is exactly what's being used here. The code is using this feature correctly to scope the hover effect to a specific group. This is actually a good practice when you have multiple groups on a page to avoid conflicts. Could there be an older version of Tailwind in use that doesn't support named groups? Could this be a custom CSS setup that doesn't support this syntax? Even if it's an older version, we should assume the team knows their tooling. The syntax is consistent between the parent and child elements, showing intentional use of named groups. The comment should be deleted as it incorrectly flags valid Tailwind CSS syntax for named groups.
Workflow ID: wflow_b2AKDPAKQFOowxb8
You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.
| )} | ||
| </SideMenu.Content> | ||
| <CustomerWidget | ||
| customerIds={[customerId || '', customerId || '']} |
There was a problem hiding this comment.
CustomerWidget receives duplicate customerId entries in the customerIds array. Confirm whether duplicating the ID is required or if a single entry suffices.
| customerIds={[customerId || '', customerId || '']} | |
| customerIds={[customerId || '']} |
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (9)
frontend/libs/erxes-ui/src/components/sidebar.tsx(2 hunks)frontend/libs/erxes-ui/src/modules/inputs/components/EmailField.tsx(3 hunks)frontend/plugins/frontline_ui/src/modules/FrontlineActions.tsx(0 hunks)frontend/plugins/frontline_ui/src/modules/FrontlineNavigation.tsx(2 hunks)frontend/plugins/frontline_ui/src/modules/FrontlineSubGroups.tsx(2 hunks)frontend/plugins/frontline_ui/src/modules/inbox/channel/components/ChooseChannel.tsx(3 hunks)frontend/plugins/frontline_ui/src/modules/inbox/components/InboxActions.tsx(1 hunks)frontend/plugins/frontline_ui/src/modules/inbox/conversations/conversation-detail/components/ConversationSideWidget.tsx(1 hunks)frontend/plugins/frontline_ui/src/modules/integrations/components/ChooseIntegrationType.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- frontend/plugins/frontline_ui/src/modules/FrontlineActions.tsx
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx}: Write concise, technical TypeScript code
Use functional and declarative programming patterns; avoid classes
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Avoid console logs
Always use absolute paths for imports
Use TypeScript for all code (no .js/.jsx)
Prefer interfaces over types for object shapes
Avoid enums; use maps instead
Use the function keyword for pure functions
Avoid unnecessary curly braces in simple conditionals; use concise syntax
Files:
frontend/plugins/frontline_ui/src/modules/integrations/components/ChooseIntegrationType.tsxfrontend/libs/erxes-ui/src/modules/inputs/components/EmailField.tsxfrontend/plugins/frontline_ui/src/modules/FrontlineSubGroups.tsxfrontend/plugins/frontline_ui/src/modules/inbox/conversations/conversation-detail/components/ConversationSideWidget.tsxfrontend/libs/erxes-ui/src/components/sidebar.tsxfrontend/plugins/frontline_ui/src/modules/inbox/channel/components/ChooseChannel.tsxfrontend/plugins/frontline_ui/src/modules/FrontlineNavigation.tsxfrontend/plugins/frontline_ui/src/modules/inbox/components/InboxActions.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursorrules)
**/*.tsx: Use declarative JSX
Use Shadcn UI, Radix UI, and Tailwind for components and styling
Implement responsive, mobile-first design with Tailwind CSS
Minimize useEffect and setState usage
Wrap client components in React.Suspense with a fallback
Use dynamic loading for non-critical components
Include explicit width and height (or sizes) when rendering images
Implement lazy loading for images
Limit 'use client': favor server components and Next.js SSR
Use 'use client' only for Web API access in small components
Do not use 'use client' components for data fetching or state management
Files:
frontend/plugins/frontline_ui/src/modules/integrations/components/ChooseIntegrationType.tsxfrontend/libs/erxes-ui/src/modules/inputs/components/EmailField.tsxfrontend/plugins/frontline_ui/src/modules/FrontlineSubGroups.tsxfrontend/plugins/frontline_ui/src/modules/inbox/conversations/conversation-detail/components/ConversationSideWidget.tsxfrontend/libs/erxes-ui/src/components/sidebar.tsxfrontend/plugins/frontline_ui/src/modules/inbox/channel/components/ChooseChannel.tsxfrontend/plugins/frontline_ui/src/modules/FrontlineNavigation.tsxfrontend/plugins/frontline_ui/src/modules/inbox/components/InboxActions.tsx
🧬 Code graph analysis (3)
frontend/plugins/frontline_ui/src/modules/FrontlineSubGroups.tsx (2)
frontend/libs/erxes-ui/src/modules/navigation-menu/components/NavigationMenu.tsx (1)
NavigationMenuGroup(85-116)frontend/plugins/frontline_ui/src/modules/inbox/channel/components/ChooseChannel.tsx (1)
ChooseChannel(6-28)
frontend/plugins/frontline_ui/src/modules/inbox/channel/components/ChooseChannel.tsx (1)
frontend/plugins/frontline_ui/src/modules/channels/hooks/useGetChannels.tsx (1)
useGetChannels(9-20)
frontend/plugins/frontline_ui/src/modules/inbox/components/InboxActions.tsx (1)
frontend/libs/erxes-ui/src/modules/navigation-menu/components/NavigationMenu.tsx (1)
NavigationMenuGroup(85-116)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Sourcery review
- GitHub Check: core-ui
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (17)
frontend/libs/erxes-ui/src/modules/inputs/components/EmailField.tsx (4)
154-156: LGTM: Simplified DOM structure.Removing the wrapper div around EmailList and EmailForm creates a cleaner component hierarchy without affecting functionality.
171-173: LGTM: Clean early return pattern.The early return for empty emails with a spacer div maintains consistent spacing while improving code readability.
176-178: LGTM: Consistent padding adjustment.The unified
p-1padding withspace-y-1spacing provides consistent styling across the email list container.
388-388: LGTM: Refined padding for form input.The change from
px-1 pb-1top-1 pt-0maintains horizontal and bottom padding while explicitly removing top padding, aligning with the overall padding refactor.frontend/plugins/frontline_ui/src/modules/inbox/channel/components/ChooseChannel.tsx (3)
7-7: LGTM: Simplified hook usage.Calling
useGetChannelsunconditionally is cleaner and follows React hooks best practices by avoiding conditional hook calls.
11-16: LGTM: Structured loading state.The container div with
flex flex-col gap-1provides consistent spacing for loading skeletons.
40-47: LGTM: Cleaner Button-based interaction.Replacing Command.Item with Button simplifies the component while maintaining the active state styling and click handling.
frontend/plugins/frontline_ui/src/modules/inbox/conversations/conversation-detail/components/ConversationSideWidget.tsx (1)
15-17: LGTM: Updated to use CustomerWidgetTrigger.The addition of
CustomerWidgetTriggerwithinSideMenu.Sidebaraligns with the component refactoring and provides a specific trigger for the customer widget.frontend/libs/erxes-ui/src/components/sidebar.tsx (2)
403-418: LGTM: Well-integrated ScrollArea component.The migration from a div to ScrollArea for
SidebarContentis properly implemented:
- ForwardRef types correctly updated to
React.ElementRef<typeof ScrollArea>andReact.ComponentProps<typeof ScrollArea>- The
overflow-autoclass appropriately removed since ScrollArea handles scrolling internally- All existing props and data attributes preserved
21-21: LGTM: Required import for ScrollArea integration.The ScrollArea import is properly added to support the SidebarContent refactor.
frontend/plugins/frontline_ui/src/modules/integrations/components/ChooseIntegrationType.tsx (1)
33-33: LGTM: Improved text overflow handling.Wrapping the integration type name with
TextOverflowTooltipprovides better UX for long names by preventing text overflow and showing a tooltip on hover. This is consistent with similar components likeChooseChannel.frontend/plugins/frontline_ui/src/modules/inbox/components/InboxActions.tsx (2)
4-4: LGTM: Updated to modern React Router API.The import from
react-router(instead ofreact-router-dom) aligns with the modern React Router API.
13-22: LGTM: Simplified button styling.The removal of conditional
bg-mutedstyling based on search params simplifies the component. The "Reset filters" button now has consistent styling regardless of filter state, which is a reasonable UX simplification since the Link always navigates to the base inbox route.frontend/plugins/frontline_ui/src/modules/FrontlineNavigation.tsx (1)
15-27: LGTM: Improved CSS specificity with scoped groups.The change from
grouptogroup/inboxand the correspondinggroup-hover/inbox:visibleprovides better CSS specificity, preventing unintended hover interactions with other group elements on the page.frontend/plugins/frontline_ui/src/modules/FrontlineSubGroups.tsx (3)
14-16: LGTM: Consistent NavigationMenuGroup usage.Wrapping
ChooseChannelin aNavigationMenuGroupnamed "Channels" provides a consistent, collapsible group structure that aligns with the broader UI refactor across frontline components.
2-2: LGTM: Cleaned up imports.The removal of
FrontlineActionsandSidebarimports aligns with the component refactor, leaving only the necessaryNavigationMenuGroupimport.
8-10: Path guard is appropriate and correctly restricts channel selection to inbox.The path guard restricting
FrontlineSubGroupsto/frontline/inboxis correct. The component rendersChooseChannel, which is inbox-specific and manages thechannelIdquery parameter for filtering conversations. This UI is only relevant to inbox workflows. Other frontline routes—/frontline/ticket(markedsettingsOnly: true) and/frontline/calls—don't require channel selection in the sidebar navigation; they have their own independent configuration systems.
| <CustomerWidget | ||
| customerIds={[customerId || '', customerId || '']} | ||
| scope={InboxHotkeyScope.MainPage} | ||
| /> |
There was a problem hiding this comment.
🧩 Analysis chain
Verify the duplicated customerId in the array.
The customerIds array contains the same customerId value duplicated: [customerId || '', customerId || '']. This appears unusual and may be unintentional.
Please verify:
- Does the
CustomerWidgetcomponent expect duplicate customer IDs? - Is this a placeholder for future multi-customer support?
- Should this be a single-element array instead?
Run the following script to check the CustomerWidget implementation and usage:
🏁 Script executed:
#!/bin/bash
# Description: Check CustomerWidget interface and other usages
# Find CustomerWidget type definition
ast-grep --pattern 'interface $_ {
$$$
customerIds: $_
$$$
}'
# Find other usages of CustomerWidget
rg -n -A2 -B2 'CustomerWidget' --type=tsx --type=ts -g '!ConversationSideWidget.tsx'Length of output: 27
🏁 Script executed:
#!/bin/bash
# Description: Check CustomerWidget interface and usages with corrected syntax
# Find CustomerWidget definition (interface/type/function)
rg -n 'interface CustomerWidget|type CustomerWidget|function CustomerWidget|const CustomerWidget' --glob='*.tsx' --glob='*.ts'
# Find CustomerWidget component usages
rg -n -A3 -B1 '<CustomerWidget' --glob='*.tsx' --glob='*.ts' -g '!ConversationSideWidget.tsx'
# Search for customerIds prop pattern
rg -n 'customerIds' --glob='*.tsx' --glob='*.ts'Length of output: 17499
🏁 Script executed:
#!/bin/bash
# Get CustomerWidget component definition and props
# Extract the full CustomerWidget export
rg -n -A15 'export const CustomerWidget = ' --glob='*.tsx' --glob='*.ts' frontend/libs/ui-modules/src/modules/contacts/components/CustomerWidget.tsxLength of output: 304
🏁 Script executed:
#!/bin/bash
# Get complete CustomerWidget file to see full props interface
cat frontend/libs/ui-modules/src/modules/contacts/components/CustomerWidget.tsxLength of output: 3865
Fix incorrect customerIds prop passed to CustomerWidget.
The CustomerWidget component expects a customerId prop (string, singular), but the code passes customerIds (array, plural) with a duplicated value. The component definition shows it accepts customerId: string and uses it directly to fetch a single customer's details.
Issues:
- Prop name:
customerIdsshould becustomerId - Type: array
[customerId || '', customerId || '']should be stringcustomerId || '' - Duplication is unnecessary
This same bug appears in 6 other files: FbMessengerMessages.tsx, InternalNotes.tsx, CallConversationDetail.tsx, ConversationHeader.tsx, ConversationMessage.tsx, and MessageItem.tsx.
Fix:
<CustomerWidget
customerId={customerId || ''}
scope={InboxHotkeyScope.MainPage}
/>🤖 Prompt for AI Agents
In
frontend/plugins/frontline_ui/src/modules/inbox/conversations/conversation-detail/components/ConversationSideWidget.tsx
around lines 10-13, the CustomerWidget is receiving the wrong prop: customerIds
(an array with duplicated values) instead of the expected singular string prop
customerId. Replace the customerIds prop with customerId and pass a string
fallback (customerId || '') so the component receives a single string; apply the
same change in the six other affected files (FbMessengerMessages.tsx,
InternalNotes.tsx, CallConversationDetail.tsx, ConversationHeader.tsx,
ConversationMessage.tsx, MessageItem.tsx).
… SideMenu.Trigger
There was a problem hiding this comment.
Important
Looks good to me! 👍
Reviewed 2f65da2 in 34 seconds. Click for details.
- Reviewed
28lines of code in1files - Skipped
0files when reviewing. - Skipped posting
2draft comments. View those below. - Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.
1. frontend/plugins/frontline_ui/src/modules/inbox/conversations/conversation-detail/components/ConversationSideWidget.tsx:12
- Draft comment:
Refactored CustomerWidget prop from array (customerIds) to a single customerId. Confirm that the updated CustomerWidget handles empty or invalid customerId correctly. - Reason this comment was not posted:
Confidence changes required:33%<= threshold50%None
2. frontend/plugins/frontline_ui/src/modules/inbox/conversations/conversation-detail/components/ConversationSideWidget.tsx:17
- Draft comment:
Replaced CustomerWidgetTrigger with SideMenu.Trigger. Verify that the trigger behavior remains consistent with previous functionality. - Reason this comment was not posted:
Confidence changes required:33%<= threshold50%None
Workflow ID: wflow_S7EBK8pabhGw09Fy
You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.
|
Summary by Sourcery
Update dependencies and refactor various UI components to simplify layouts, remove redundant wrappers, and standardize styling across the channel chooser, conversation sidebar, email fields, and navigation sidebar.
Enhancements:
Chores:
Summary by CodeRabbit
New Features
Bug Fixes & Improvements
Removed
Important
Refactor UI components for improved layout and styling consistency, and update dependencies.
SidebarContentinsidebar.tsxto useScrollAreafor content rendering.EmailListFieldinEmailField.tsxby removing extra wrappers and handling empty email lists.ChooseChannelinChooseChannel.tsxby removing collapsible and command patterns.CustomerWidgetusage inConversationSideWidgetinConversationSideWidget.tsx.FrontlineActionsinFrontlineSubGroups.tsx.FrontlineNavigation.tsx.This description was created by
for 2f65da2. You can customize this summary. It will automatically update as commits are pushed.