feat: add icons to ComponentContext - #3246
Merged
Merged
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughThe PR adds typed icon override slots to ChangesContext-driven icon customization
Estimated code review effort: 4 (Complex) | ~45 minutes Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Warning Tools execution failed with the following error: Failed to run tools: 14 UNAVAILABLE: read ECONNRESET 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 |
|
Size Change: +2.86 kB (+0.32%) Total Size: 884 kB 📦 View Changed
ℹ️ View Unchanged
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.tsx (1)
62-67: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueConsolidate redundant
useComponentContextcalls.Both components fetch from
useComponentContext()multiple times in a row. You can consolidate these calls into a single destructuring statement to clean up the component bodies.
src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.tsx#L62-L67: combine theiconsandAvatarlookups into one hook call inChannelManagementInfoBody.src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.tsx#L323-L324: combine theiconsandAvatarlookups into one hook call inChannelManagementEditBody.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.tsx` around lines 62 - 67, Consolidate the adjacent useComponentContext calls in ChannelManagementInfoBody at src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.tsx lines 62-67 into one destructuring statement containing both icons and Avatar, preserving their existing defaults. Apply the same consolidation in ChannelManagementEditBody at lines 323-324; both sites require direct changes.src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.tsx (1)
82-100: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueHoist the hook call to the parent component.
useComponentContextis currently called inside a dynamically created function (MemberTrailingSlot). Depending on how the layout component invokesTrailingSlot(as a render propTrailingSlot()vs a component<TrailingSlot />), this might violate the Rules of Hooks. Hoisting it to the top level ofChannelMembersBrowseViewItemis safer and more idiomatic.♻️ Proposed refactor
- const TrailingSlot = useMemo( - () => - function MemberTrailingSlot() { - const { icons: { IconMute = DefaultIconMute } = {} } = useComponentContext(); - return ( - <div className='str-chat__channel-detail__channel-members-view__list-item__trailing-slot'> - {roleTranslation ? ( - <span className='str-chat__channel-detail__channel-members-view__role-label'> - {roleTranslation} - </span> - ) : null} - {isMuted ? ( - <IconMute className='str-chat__channel-detail__channel-members-view__list-item__indicator-icon str-chat__channel-detail__channel-members-view__list-item__indicator-icon--mute' /> - ) : null} - </div> - ); - }, - [isMuted, roleTranslation], - ); + const { icons: { IconMute = DefaultIconMute } = {} } = useComponentContext(); + + const TrailingSlot = useMemo( + () => + function MemberTrailingSlot() { + return ( + <div className='str-chat__channel-detail__channel-members-view__list-item__trailing-slot'> + {roleTranslation ? ( + <span className='str-chat__channel-detail__channel-members-view__role-label'> + {roleTranslation} + </span> + ) : null} + {isMuted ? ( + <IconMute className='str-chat__channel-detail__channel-members-view__list-item__indicator-icon str-chat__channel-detail__channel-members-view__list-item__indicator-icon--mute' /> + ) : null} + </div> + ); + }, + [isMuted, roleTranslation, IconMute], + );🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.tsx` around lines 82 - 100, Move the useComponentContext call out of the dynamically created MemberTrailingSlot function and invoke it at the top level of ChannelMembersBrowseViewItem. Derive the IconMute fallback there, then have MemberTrailingSlot reuse that value while preserving the existing mute and role-label rendering.src/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.tsx (1)
12-15: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRemove the deprecated string argument.
The
_componentNameparameter inuseComponentContextis marked as@deprecated. It is recommended to call the hook without any arguments.♻️ Proposed refactor
const GeolocationPreviewImage = () => { - const { icons: { IconLocation = DefaultIconLocation } = {} } = useComponentContext( - 'GeolocationPreviewImage', - ); + const { icons: { IconLocation = DefaultIconLocation } = {} } = useComponentContext(); return (🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.tsx` around lines 12 - 15, Update GeolocationPreviewImage to call useComponentContext without the deprecated string argument, while preserving the existing icons destructuring and DefaultIconLocation fallback.src/components/MessageActions/MessageActions.defaults.tsx (1)
94-94: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueMerge duplicate
useComponentContextinvocations.
useComponentContext()is already invoked earlier in this action function (around line 80) to retrieveReactionSelector. You can consolidate these calls into a single destructuring statement.♻️ Proposed refactor
React() { - const { ReactionSelector = DefaultReactionSelector } = useComponentContext(); const { anchorReferenceElement } = useContextMenuContext(); const { isMyMessage, message, threadList } = useMessageContext(); @@ -91,3 +90,5 @@ const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id); - const { icons: { IconEmoji = DefaultIconEmoji } = {} } = useComponentContext(); + const { + icons: { IconEmoji = DefaultIconEmoji } = {}, + ReactionSelector = DefaultReactionSelector, + } = useComponentContext(); return (🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/MessageActions/MessageActions.defaults.tsx` at line 94, Merge the later useComponentContext() call used to obtain IconEmoji into the earlier invocation that retrieves ReactionSelector in the same action function. Extend the existing destructuring to read both values, preserving DefaultIconEmoji as the fallback when icons or IconEmoji are unavailable.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/Badge/MediaBadge.tsx`:
- Around line 17-30: Update the voice entry in MediaBadge’s
mediaBadgeVariantToIcon mapping to use the exact MediaBadgeVariant value
"voice-recording" instead of "voiceRecording", while preserving the existing
microphone icon mapping.
---
Nitpick comments:
In `@src/components/MessageActions/MessageActions.defaults.tsx`:
- Line 94: Merge the later useComponentContext() call used to obtain IconEmoji
into the earlier invocation that retrieves ReactionSelector in the same action
function. Extend the existing destructuring to read both values, preserving
DefaultIconEmoji as the fallback when icons or IconEmoji are unavailable.
In `@src/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.tsx`:
- Around line 12-15: Update GeolocationPreviewImage to call useComponentContext
without the deprecated string argument, while preserving the existing icons
destructuring and DefaultIconLocation fallback.
In
`@src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.tsx`:
- Around line 62-67: Consolidate the adjacent useComponentContext calls in
ChannelManagementInfoBody at
src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.tsx
lines 62-67 into one destructuring statement containing both icons and Avatar,
preserving their existing defaults. Apply the same consolidation in
ChannelManagementEditBody at lines 323-324; both sites require direct changes.
In
`@src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.tsx`:
- Around line 82-100: Move the useComponentContext call out of the dynamically
created MemberTrailingSlot function and invoke it at the top level of
ChannelMembersBrowseViewItem. Derive the IconMute fallback there, then have
MemberTrailingSlot reuse that value while preserving the existing mute and
role-label rendering.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 954d8a21-faf0-4bb8-bc63-0199423c5c8d
📒 Files selected for processing (103)
src/components/Attachment/Geolocation.tsxsrc/components/Attachment/Giphy.tsxsrc/components/Attachment/LinkPreview/Card.tsxsrc/components/Attachment/LinkPreview/CardAudio.tsxsrc/components/Attachment/ModalGallery.tsxsrc/components/Attachment/UnsupportedAttachment.tsxsrc/components/Attachment/VisibilityDisclaimer.tsxsrc/components/Attachment/components/DownloadButton.tsxsrc/components/Avatar/Avatar.tsxsrc/components/Badge/Badge.tsxsrc/components/Badge/MediaBadge.tsxsrc/components/BaseImage/ImagePlaceholder.tsxsrc/components/Button/PlayButton.tsxsrc/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsxsrc/components/ChannelListItem/ChannelListItemUI.tsxsrc/components/ChatView/ChatView.tsxsrc/components/Dialog/components/Callout.tsxsrc/components/Dialog/components/ContextMenu.tsxsrc/components/Dialog/components/Prompt.tsxsrc/components/Dialog/components/Viewer.tsxsrc/components/EmptyStateIndicator/EmptyStateIndicator.tsxsrc/components/Form/NumericInput.tsxsrc/components/Form/TextInput.tsxsrc/components/Gallery/GalleryHeader.tsxsrc/components/Gallery/GalleryUI.tsxsrc/components/Icons/index.tssrc/components/Icons/slots.tssrc/components/Loading/LoadingIndicator.tsxsrc/components/Location/ShareLocationDialog.tsxsrc/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsxsrc/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsxsrc/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsxsrc/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.tsxsrc/components/MediaRecorder/AudioRecorder/__tests__/AudioRecordingPreview.test.tsxsrc/components/Message/MessageAlsoSentInChannelIndicator.tsxsrc/components/Message/MessageDeletedBubble.tsxsrc/components/Message/MessageStatus.tsxsrc/components/Message/MessageTranslationIndicator.tsxsrc/components/Message/PinIndicator.tsxsrc/components/Message/ReminderNotification.tsxsrc/components/MessageActions/DownloadSubmenu.tsxsrc/components/MessageActions/MessageActions.defaults.tsxsrc/components/MessageActions/RemindMeSubmenu.tsxsrc/components/MessageBounce/MessageBouncePrompt.tsxsrc/components/MessageComposer/AttachmentPreviewList/AudioAttachmentPreview.tsxsrc/components/MessageComposer/AttachmentPreviewList/FileAttachmentPreview.tsxsrc/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.tsxsrc/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsxsrc/components/MessageComposer/AttachmentPreviewList/UnsupportedAttachmentPreview.tsxsrc/components/MessageComposer/AttachmentSelector/AttachmentSelector.tsxsrc/components/MessageComposer/AttachmentSelector/CommandsMenu.tsxsrc/components/MessageComposer/AttachmentSelector/__tests__/CommandsMenu.test.tsxsrc/components/MessageComposer/CommandChip.tsxsrc/components/MessageComposer/LinkPreviewList.tsxsrc/components/MessageComposer/MessageComposerActions.tsxsrc/components/MessageComposer/QuotedMessagePreview.tsxsrc/components/MessageComposer/RemoveAttachmentPreviewButton.tsxsrc/components/MessageComposer/SendButton.tsxsrc/components/MessageComposer/SendToChannelCheckbox.tsxsrc/components/MessageComposer/WithDragAndDropUpload.tsxsrc/components/MessageComposer/__tests__/CommandChip.test.tsxsrc/components/MessageList/ScrollToLatestMessageButton.tsxsrc/components/MessageList/UnreadMessagesNotification.tsxsrc/components/MessageList/UnreadMessagesSeparator.tsxsrc/components/Modal/CloseButtonOnModalOverlay.tsxsrc/components/Notifications/Notification.tsxsrc/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.tsxsrc/components/Poll/PollCreationDialog/OptionFieldSet.tsxsrc/components/Poll/PollCreationDialog/PollCreationDialogControls.tsxsrc/components/Poll/PollCreationDialog/PollOptionReorderHandle.tsxsrc/components/Reactions/MessageReactionsDetail.tsxsrc/components/Reactions/ReactionSelector.tsxsrc/components/Reactions/ReactionSelectorWithButton.tsxsrc/components/SummarizedMessagePreview/SummarizedMessagePreview.tsxsrc/components/TextareaComposer/SuggestionList/MentionItem/BroadcastMentionItem.tsxsrc/components/TextareaComposer/SuggestionList/MentionItem/RoleItem.tsxsrc/components/TextareaComposer/SuggestionList/MentionItem/UserGroupItem.tsxsrc/components/TextareaComposer/__tests__/CommandItem.test.tsxsrc/components/Thread/ThreadHeader.tsxsrc/components/Threads/ThreadList/ThreadListEmptyPlaceholder.tsxsrc/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.tsxsrc/components/VideoPlayer/VideoThumbnail.tsxsrc/context/ComponentContext.tsxsrc/context/WithComponents.tsxsrc/plugins/ChannelDetail/ChannelDetail.tsxsrc/plugins/ChannelDetail/ChannelDetailEmptyList.tsxsrc/plugins/ChannelDetail/ChannelDetailSearchInput.tsxsrc/plugins/ChannelDetail/SectionNavigator/SectionNavigatorHeader.tsxsrc/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesEmptyList.tsxsrc/plugins/ChannelDetail/Views/ChannelFilesView/__tests__/ChannelFilesView.test.tsxsrc/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementActions.defaults.tsxsrc/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.tsxsrc/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaEmptyList.tsxsrc/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.tsxsrc/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberActions.defaults.tsxsrc/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersAddView.tsxsrc/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.tsxsrc/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersHeaderActions.defaults.tsxsrc/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersAddView.test.tsxsrc/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersBrowseView.test.tsxsrc/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.tsxsrc/plugins/ChannelDetail/Views/PinnedMessagesView/__tests__/PinnedMessagesView.test.tsxsrc/plugins/Emojis/EmojiPicker.tsx
Comment on lines
17
to
+30
| export const MediaBadge = ({ attachment, variant }: MediaBadgeProps) => { | ||
| const Icon = MediaBadgeVariantToIcon[variant]; | ||
| const { | ||
| icons: { | ||
| IconMicrophoneSolid = DefaultIconMicrophoneSolid, | ||
| IconVideoFill = DefaultIconVideoFill, | ||
| } = {}, | ||
| } = useComponentContext(); | ||
|
|
||
| const mediaBadgeVariantToIcon: Record<MediaBadgeVariant, ComponentType> = { | ||
| video: IconVideoFill, | ||
| voiceRecording: IconMicrophoneSolid, | ||
| }; | ||
|
|
||
| const Icon = mediaBadgeVariantToIcon[variant]; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🔴 Critical | ⚡ Quick win
Fix variant mapping key to match the exact string type.
The MediaBadgeVariant type defines the voice variant as 'voice-recording', but the mediaBadgeVariantToIcon dictionary uses the camelCased key voiceRecording. Consequently, when variant='voice-recording' is passed, the icon will fail to resolve and render.
🐛 Proposed fix for the dictionary key
const mediaBadgeVariantToIcon: Record<MediaBadgeVariant, ComponentType> = {
video: IconVideoFill,
- voiceRecording: IconMicrophoneSolid,
+ 'voice-recording': IconMicrophoneSolid,
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| export const MediaBadge = ({ attachment, variant }: MediaBadgeProps) => { | |
| const Icon = MediaBadgeVariantToIcon[variant]; | |
| const { | |
| icons: { | |
| IconMicrophoneSolid = DefaultIconMicrophoneSolid, | |
| IconVideoFill = DefaultIconVideoFill, | |
| } = {}, | |
| } = useComponentContext(); | |
| const mediaBadgeVariantToIcon: Record<MediaBadgeVariant, ComponentType> = { | |
| video: IconVideoFill, | |
| voiceRecording: IconMicrophoneSolid, | |
| }; | |
| const Icon = mediaBadgeVariantToIcon[variant]; | |
| export const MediaBadge = ({ attachment, variant }: MediaBadgeProps) => { | |
| const { | |
| icons: { | |
| IconMicrophoneSolid = DefaultIconMicrophoneSolid, | |
| IconVideoFill = DefaultIconVideoFill, | |
| } = {}, | |
| } = useComponentContext(); | |
| const mediaBadgeVariantToIcon: Record<MediaBadgeVariant, ComponentType> = { | |
| video: IconVideoFill, | |
| 'voice-recording': IconMicrophoneSolid, | |
| }; | |
| const Icon = mediaBadgeVariantToIcon[variant]; |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/Badge/MediaBadge.tsx` around lines 17 - 30, Update the voice
entry in MediaBadge’s mediaBadgeVariantToIcon mapping to use the exact
MediaBadgeVariant value "voice-recording" instead of "voiceRecording", while
preserving the existing microphone icon mapping.
Contributor
Author
There was a problem hiding this comment.
@MartinCupela - would you know whether this is a type issue or is the mapping is wrong?
arnautov-anton
force-pushed
the
add-icons-to-component-context
branch
from
July 27, 2026 14:35
da9db39 to
5611b39
Compare
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## master #3246 +/- ##
==========================================
- Coverage 85.22% 85.18% -0.05%
==========================================
Files 506 507 +1
Lines 15795 15949 +154
Branches 5023 5025 +2
==========================================
+ Hits 13462 13586 +124
- Misses 2333 2363 +30 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/Badge/Badge.tsx`:
- Around line 51-59: Add tests in Badge.test.tsx covering the error Badge’s
default IconExclamationMarkFill rendering and the contextual
icons.IconExclamationMarkFill override. Use the existing component-context test
patterns and assert that each configuration renders the expected icon.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: a05bb20e-b68b-401c-8a35-93d20fd53884
📒 Files selected for processing (103)
src/components/Attachment/Geolocation.tsxsrc/components/Attachment/Giphy.tsxsrc/components/Attachment/LinkPreview/Card.tsxsrc/components/Attachment/LinkPreview/CardAudio.tsxsrc/components/Attachment/ModalGallery.tsxsrc/components/Attachment/UnsupportedAttachment.tsxsrc/components/Attachment/VisibilityDisclaimer.tsxsrc/components/Attachment/components/DownloadButton.tsxsrc/components/Avatar/Avatar.tsxsrc/components/Badge/Badge.tsxsrc/components/Badge/MediaBadge.tsxsrc/components/BaseImage/ImagePlaceholder.tsxsrc/components/Button/PlayButton.tsxsrc/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsxsrc/components/ChannelListItem/ChannelListItemUI.tsxsrc/components/ChatView/ChatView.tsxsrc/components/Dialog/components/Callout.tsxsrc/components/Dialog/components/ContextMenu.tsxsrc/components/Dialog/components/Prompt.tsxsrc/components/Dialog/components/Viewer.tsxsrc/components/EmptyStateIndicator/EmptyStateIndicator.tsxsrc/components/Form/NumericInput.tsxsrc/components/Form/TextInput.tsxsrc/components/Gallery/GalleryHeader.tsxsrc/components/Gallery/GalleryUI.tsxsrc/components/Icons/index.tssrc/components/Icons/slots.tssrc/components/Loading/LoadingIndicator.tsxsrc/components/Location/ShareLocationDialog.tsxsrc/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsxsrc/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsxsrc/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsxsrc/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.tsxsrc/components/MediaRecorder/AudioRecorder/__tests__/AudioRecordingPreview.test.tsxsrc/components/Message/MessageAlsoSentInChannelIndicator.tsxsrc/components/Message/MessageDeletedBubble.tsxsrc/components/Message/MessageStatus.tsxsrc/components/Message/MessageTranslationIndicator.tsxsrc/components/Message/PinIndicator.tsxsrc/components/Message/ReminderNotification.tsxsrc/components/MessageActions/DownloadSubmenu.tsxsrc/components/MessageActions/MessageActions.defaults.tsxsrc/components/MessageActions/RemindMeSubmenu.tsxsrc/components/MessageBounce/MessageBouncePrompt.tsxsrc/components/MessageComposer/AttachmentPreviewList/AudioAttachmentPreview.tsxsrc/components/MessageComposer/AttachmentPreviewList/FileAttachmentPreview.tsxsrc/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.tsxsrc/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsxsrc/components/MessageComposer/AttachmentPreviewList/UnsupportedAttachmentPreview.tsxsrc/components/MessageComposer/AttachmentSelector/AttachmentSelector.tsxsrc/components/MessageComposer/AttachmentSelector/CommandsMenu.tsxsrc/components/MessageComposer/AttachmentSelector/__tests__/CommandsMenu.test.tsxsrc/components/MessageComposer/CommandChip.tsxsrc/components/MessageComposer/LinkPreviewList.tsxsrc/components/MessageComposer/MessageComposerActions.tsxsrc/components/MessageComposer/QuotedMessagePreview.tsxsrc/components/MessageComposer/RemoveAttachmentPreviewButton.tsxsrc/components/MessageComposer/SendButton.tsxsrc/components/MessageComposer/SendToChannelCheckbox.tsxsrc/components/MessageComposer/WithDragAndDropUpload.tsxsrc/components/MessageComposer/__tests__/CommandChip.test.tsxsrc/components/MessageList/ScrollToLatestMessageButton.tsxsrc/components/MessageList/UnreadMessagesNotification.tsxsrc/components/MessageList/UnreadMessagesSeparator.tsxsrc/components/Modal/CloseButtonOnModalOverlay.tsxsrc/components/Notifications/Notification.tsxsrc/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.tsxsrc/components/Poll/PollCreationDialog/OptionFieldSet.tsxsrc/components/Poll/PollCreationDialog/PollCreationDialogControls.tsxsrc/components/Poll/PollCreationDialog/PollOptionReorderHandle.tsxsrc/components/Reactions/MessageReactionsDetail.tsxsrc/components/Reactions/ReactionSelector.tsxsrc/components/Reactions/ReactionSelectorWithButton.tsxsrc/components/SummarizedMessagePreview/SummarizedMessagePreview.tsxsrc/components/TextareaComposer/SuggestionList/MentionItem/BroadcastMentionItem.tsxsrc/components/TextareaComposer/SuggestionList/MentionItem/RoleItem.tsxsrc/components/TextareaComposer/SuggestionList/MentionItem/UserGroupItem.tsxsrc/components/TextareaComposer/__tests__/CommandItem.test.tsxsrc/components/Thread/ThreadHeader.tsxsrc/components/Threads/ThreadList/ThreadListEmptyPlaceholder.tsxsrc/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.tsxsrc/components/VideoPlayer/VideoThumbnail.tsxsrc/context/ComponentContext.tsxsrc/context/WithComponents.tsxsrc/plugins/ChannelDetail/ChannelDetail.tsxsrc/plugins/ChannelDetail/ChannelDetailEmptyList.tsxsrc/plugins/ChannelDetail/ChannelDetailSearchInput.tsxsrc/plugins/ChannelDetail/SectionNavigator/SectionNavigatorHeader.tsxsrc/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesEmptyList.tsxsrc/plugins/ChannelDetail/Views/ChannelFilesView/__tests__/ChannelFilesView.test.tsxsrc/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementActions.defaults.tsxsrc/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.tsxsrc/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaEmptyList.tsxsrc/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.tsxsrc/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberActions.defaults.tsxsrc/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersAddView.tsxsrc/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.tsxsrc/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersHeaderActions.defaults.tsxsrc/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersAddView.test.tsxsrc/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersBrowseView.test.tsxsrc/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.tsxsrc/plugins/ChannelDetail/Views/PinnedMessagesView/__tests__/PinnedMessagesView.test.tsxsrc/plugins/Emojis/EmojiPicker.tsx
🚧 Files skipped from review as they are similar to previous changes (96)
- src/components/Icons/index.ts
- src/components/MessageComposer/tests/CommandChip.test.tsx
- src/components/MediaRecorder/AudioRecorder/tests/AudioRecordingPreview.test.tsx
- src/plugins/ChannelDetail/SectionNavigator/SectionNavigatorHeader.tsx
- src/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesEmptyList.tsx
- src/components/Message/MessageTranslationIndicator.tsx
- src/components/Attachment/VisibilityDisclaimer.tsx
- src/components/Loading/LoadingIndicator.tsx
- src/components/MessageComposer/AttachmentPreviewList/FileAttachmentPreview.tsx
- src/components/Modal/CloseButtonOnModalOverlay.tsx
- src/components/TextareaComposer/SuggestionList/MentionItem/UserGroupItem.tsx
- src/components/MessageComposer/AttachmentPreviewList/UnsupportedAttachmentPreview.tsx
- src/components/Message/MessageAlsoSentInChannelIndicator.tsx
- src/components/Icons/slots.ts
- src/components/BaseImage/ImagePlaceholder.tsx
- src/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsx
- src/components/Dialog/components/Callout.tsx
- src/components/MessageComposer/LinkPreviewList.tsx
- src/components/Reactions/MessageReactionsDetail.tsx
- src/components/MessageList/ScrollToLatestMessageButton.tsx
- src/components/Threads/ThreadList/ThreadListEmptyPlaceholder.tsx
- src/components/ChannelListItem/ChannelListItemUI.tsx
- src/components/MessageComposer/AttachmentSelector/tests/CommandsMenu.test.tsx
- src/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.tsx
- src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx
- src/components/Button/PlayButton.tsx
- src/components/Reactions/ReactionSelectorWithButton.tsx
- src/components/Attachment/Geolocation.tsx
- src/context/ComponentContext.tsx
- src/components/TextareaComposer/SuggestionList/MentionItem/BroadcastMentionItem.tsx
- src/context/WithComponents.tsx
- src/plugins/ChannelDetail/Views/ChannelFilesView/tests/ChannelFilesView.test.tsx
- src/components/Poll/PollCreationDialog/PollOptionReorderHandle.tsx
- src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementActions.defaults.tsx
- src/components/Form/NumericInput.tsx
- src/components/Message/ReminderNotification.tsx
- src/components/Gallery/GalleryUI.tsx
- src/plugins/ChannelDetail/ChannelDetailSearchInput.tsx
- src/components/MessageComposer/AttachmentPreviewList/AudioAttachmentPreview.tsx
- src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx
- src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersHeaderActions.defaults.tsx
- src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersAddView.tsx
- src/components/MessageList/UnreadMessagesSeparator.tsx
- src/components/Gallery/GalleryHeader.tsx
- src/components/Reactions/ReactionSelector.tsx
- src/components/Poll/PollCreationDialog/PollCreationDialogControls.tsx
- src/components/MessageComposer/SendToChannelCheckbox.tsx
- src/components/Location/ShareLocationDialog.tsx
- src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.tsx
- src/components/Thread/ThreadHeader.tsx
- src/components/Attachment/ModalGallery.tsx
- src/components/Attachment/LinkPreview/Card.tsx
- src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaEmptyList.tsx
- src/components/Attachment/LinkPreview/CardAudio.tsx
- src/components/VideoPlayer/VideoThumbnail.tsx
- src/components/Notifications/Notification.tsx
- src/components/Badge/MediaBadge.tsx
- src/plugins/ChannelDetail/ChannelDetailEmptyList.tsx
- src/components/MessageComposer/SendButton.tsx
- src/components/MessageActions/RemindMeSubmenu.tsx
- src/components/Form/TextInput.tsx
- src/components/Message/PinIndicator.tsx
- src/components/ChatView/ChatView.tsx
- src/components/TextareaComposer/SuggestionList/MentionItem/RoleItem.tsx
- src/components/Avatar/Avatar.tsx
- src/components/MessageList/UnreadMessagesNotification.tsx
- src/components/Dialog/components/Prompt.tsx
- src/components/Poll/PollCreationDialog/OptionFieldSet.tsx
- src/components/MessageComposer/CommandChip.tsx
- src/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberActions.defaults.tsx
- src/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.tsx
- src/plugins/ChannelDetail/ChannelDetail.tsx
- src/plugins/ChannelDetail/Views/PinnedMessagesView/tests/PinnedMessagesView.test.tsx
- src/components/Attachment/Giphy.tsx
- src/components/MessageComposer/RemoveAttachmentPreviewButton.tsx
- src/components/Message/MessageStatus.tsx
- src/components/MessageActions/DownloadSubmenu.tsx
- src/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsx
- src/components/MessageComposer/AttachmentSelector/AttachmentSelector.tsx
- src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.tsx
- src/components/MessageBounce/MessageBouncePrompt.tsx
- src/components/Attachment/UnsupportedAttachment.tsx
- src/components/MessageComposer/MessageComposerActions.tsx
- src/components/TextareaComposer/tests/CommandItem.test.tsx
- src/components/MessageComposer/AttachmentSelector/CommandsMenu.tsx
- src/components/MessageComposer/WithDragAndDropUpload.tsx
- src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.tsx
- src/components/Dialog/components/ContextMenu.tsx
- src/components/Dialog/components/Viewer.tsx
- src/components/Attachment/components/DownloadButton.tsx
- src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.tsx
- src/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.tsx
- src/plugins/Emojis/EmojiPicker.tsx
- src/components/EmptyStateIndicator/EmptyStateIndicator.tsx
- src/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.tsx
- src/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsx
Comment on lines
+51
to
+59
| }: Omit<BadgeProps, 'variant'>) => { | ||
| const { icons: { IconExclamationMarkFill = DefaultIconExclamationMarkFill } = {} } = | ||
| useComponentContext(); | ||
| return ( | ||
| <Badge {...rest} className={className} size={size} variant='error'> | ||
| <IconExclamationMarkFill /> | ||
| </Badge> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Add coverage for the contextual icon override.
Extend src/components/Badge/__tests__/Badge.test.tsx to verify both the default icon and an icons.IconExclamationMarkFill override.
As per coding guidelines, “Add and extend tests in the matching module's __tests__/ folder.”
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/Badge/Badge.tsx` around lines 51 - 59, Add tests in
Badge.test.tsx covering the error Badge’s default IconExclamationMarkFill
rendering and the contextual icons.IconExclamationMarkFill override. Use the
existing component-context test patterns and assert that each configuration
renders the expected icon.
Source: Coding guidelines
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
src/plugins/ChannelDetail/Views/PinnedMessagesView/__tests__/PinnedMessagesView.test.tsx (1)
225-225: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse deterministic icon-hook mocks in both tests.
The original
useComponentContextIconsimplementation resolves through its originaluseComponentContextbinding, bypassing each test’s mocked context hook.
src/plugins/ChannelDetail/Views/PinnedMessagesView/__tests__/PinnedMessagesView.test.tsx#L225-L225: returnDEFAULT_ICONSfrom the mocked icon hook.src/plugins/ChannelDetail/__tests__/ChannelManagementActions.defaults.test.tsx#L115-L115: replaceactual.useComponentContextIconswith the same deterministic default-icon stub.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/plugins/ChannelDetail/Views/PinnedMessagesView/__tests__/PinnedMessagesView.test.tsx` at line 225, Use deterministic icon-hook mocks in both tests: keep the useComponentContextIcons mock returning DEFAULT_ICONS in src/plugins/ChannelDetail/Views/PinnedMessagesView/__tests__/PinnedMessagesView.test.tsx:225-225, and replace actual.useComponentContextIcons with the same DEFAULT_ICONS stub in src/plugins/ChannelDetail/__tests__/ChannelManagementActions.defaults.test.tsx:115-115.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/context/index.ts`:
- Line 7: Update the public API documentation and affected guide pages to
document the newly exported useComponentContextIcons hook, alongside its inline
JSDoc. Ensure consumer-facing documentation reflects the hook’s availability and
usage before merging.
In `@src/context/useComponentContextIcons.ts`:
- Around line 20-22: Update useComponentContextIcons so undefined values in
icons cannot overwrite entries from DEFAULT_ICONS. Merge only defined icon
overrides while preserving the existing defaults and Required<IconSlots> return
contract.
In `@src/plugins/ChannelDetail/__tests__/ChannelManagementView.test.tsx`:
- Line 45: Remove the duplicate useTranslationContext property from the test
mock configuration, retaining a single implementation of the translation
context. Ensure the resulting object has no duplicate keys or related
diagnostics.
---
Nitpick comments:
In
`@src/plugins/ChannelDetail/Views/PinnedMessagesView/__tests__/PinnedMessagesView.test.tsx`:
- Line 225: Use deterministic icon-hook mocks in both tests: keep the
useComponentContextIcons mock returning DEFAULT_ICONS in
src/plugins/ChannelDetail/Views/PinnedMessagesView/__tests__/PinnedMessagesView.test.tsx:225-225,
and replace actual.useComponentContextIcons with the same DEFAULT_ICONS stub in
src/plugins/ChannelDetail/__tests__/ChannelManagementActions.defaults.test.tsx:115-115.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 6f857dcc-8d0e-4cc9-8b0a-a30dafbd50e3
📒 Files selected for processing (107)
src/components/Attachment/Geolocation.tsxsrc/components/Attachment/Giphy.tsxsrc/components/Attachment/LinkPreview/Card.tsxsrc/components/Attachment/LinkPreview/CardAudio.tsxsrc/components/Attachment/ModalGallery.tsxsrc/components/Attachment/UnsupportedAttachment.tsxsrc/components/Attachment/VisibilityDisclaimer.tsxsrc/components/Attachment/__tests__/Giphy.test.tsxsrc/components/Attachment/components/DownloadButton.tsxsrc/components/Avatar/Avatar.tsxsrc/components/Badge/Badge.tsxsrc/components/Badge/MediaBadge.tsxsrc/components/BaseImage/ImagePlaceholder.tsxsrc/components/Button/PlayButton.tsxsrc/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsxsrc/components/ChannelListItem/ChannelListItemUI.tsxsrc/components/ChatView/ChatView.tsxsrc/components/Dialog/components/Callout.tsxsrc/components/Dialog/components/ContextMenu.tsxsrc/components/Dialog/components/Prompt.tsxsrc/components/Dialog/components/Viewer.tsxsrc/components/EmptyStateIndicator/EmptyStateIndicator.tsxsrc/components/Form/NumericInput.tsxsrc/components/Form/TextInput.tsxsrc/components/Gallery/GalleryHeader.tsxsrc/components/Gallery/GalleryUI.tsxsrc/components/Loading/LoadingIndicator.tsxsrc/components/Location/ShareLocationDialog.tsxsrc/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsxsrc/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsxsrc/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsxsrc/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.tsxsrc/components/MediaRecorder/AudioRecorder/__tests__/AudioRecordingPreview.test.tsxsrc/components/Message/MessageAlsoSentInChannelIndicator.tsxsrc/components/Message/MessageDeletedBubble.tsxsrc/components/Message/MessageStatus.tsxsrc/components/Message/MessageTranslationIndicator.tsxsrc/components/Message/PinIndicator.tsxsrc/components/Message/ReminderNotification.tsxsrc/components/MessageActions/DownloadSubmenu.tsxsrc/components/MessageActions/MessageActions.defaults.tsxsrc/components/MessageActions/RemindMeSubmenu.tsxsrc/components/MessageBounce/MessageBouncePrompt.tsxsrc/components/MessageComposer/AttachmentPreviewList/AudioAttachmentPreview.tsxsrc/components/MessageComposer/AttachmentPreviewList/FileAttachmentPreview.tsxsrc/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.tsxsrc/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsxsrc/components/MessageComposer/AttachmentPreviewList/UnsupportedAttachmentPreview.tsxsrc/components/MessageComposer/AttachmentSelector/AttachmentSelector.tsxsrc/components/MessageComposer/AttachmentSelector/CommandsMenu.tsxsrc/components/MessageComposer/AttachmentSelector/__tests__/CommandsMenu.test.tsxsrc/components/MessageComposer/CommandChip.tsxsrc/components/MessageComposer/LinkPreviewList.tsxsrc/components/MessageComposer/MessageComposerActions.tsxsrc/components/MessageComposer/QuotedMessagePreview.tsxsrc/components/MessageComposer/RemoveAttachmentPreviewButton.tsxsrc/components/MessageComposer/SendButton.tsxsrc/components/MessageComposer/SendToChannelCheckbox.tsxsrc/components/MessageComposer/WithDragAndDropUpload.tsxsrc/components/MessageComposer/__tests__/CommandChip.test.tsxsrc/components/MessageList/ScrollToLatestMessageButton.tsxsrc/components/MessageList/UnreadMessagesNotification.tsxsrc/components/MessageList/UnreadMessagesSeparator.tsxsrc/components/Modal/CloseButtonOnModalOverlay.tsxsrc/components/Notifications/Notification.tsxsrc/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.tsxsrc/components/Poll/PollCreationDialog/OptionFieldSet.tsxsrc/components/Poll/PollCreationDialog/PollCreationDialogControls.tsxsrc/components/Poll/PollCreationDialog/PollOptionReorderHandle.tsxsrc/components/Reactions/MessageReactionsDetail.tsxsrc/components/Reactions/ReactionSelector.tsxsrc/components/Reactions/ReactionSelectorWithButton.tsxsrc/components/SummarizedMessagePreview/SummarizedMessagePreview.tsxsrc/components/TextareaComposer/SuggestionList/MentionItem/BroadcastMentionItem.tsxsrc/components/TextareaComposer/SuggestionList/MentionItem/RoleItem.tsxsrc/components/TextareaComposer/SuggestionList/MentionItem/UserGroupItem.tsxsrc/components/TextareaComposer/__tests__/CommandItem.test.tsxsrc/components/Thread/ThreadHeader.tsxsrc/components/Threads/ThreadList/ThreadListEmptyPlaceholder.tsxsrc/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.tsxsrc/components/VideoPlayer/VideoThumbnail.tsxsrc/context/index.tssrc/context/useComponentContextIcons.tssrc/plugins/ChannelDetail/ChannelDetail.tsxsrc/plugins/ChannelDetail/ChannelDetailEmptyList.tsxsrc/plugins/ChannelDetail/ChannelDetailSearchInput.tsxsrc/plugins/ChannelDetail/SectionNavigator/SectionNavigatorHeader.tsxsrc/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesEmptyList.tsxsrc/plugins/ChannelDetail/Views/ChannelFilesView/__tests__/ChannelFilesView.test.tsxsrc/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementActions.defaults.tsxsrc/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.tsxsrc/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaEmptyList.tsxsrc/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.tsxsrc/plugins/ChannelDetail/Views/ChannelMediaView/__tests__/ChannelMediaView.test.tsxsrc/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberActions.defaults.tsxsrc/plugins/ChannelDetail/Views/ChannelMemberDetailView/__tests__/ChannelMemberDetail.test.tsxsrc/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersAddView.tsxsrc/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.tsxsrc/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersHeaderActions.defaults.tsxsrc/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersAddView.test.tsxsrc/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersBrowseView.test.tsxsrc/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersView.test.tsxsrc/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.tsxsrc/plugins/ChannelDetail/Views/PinnedMessagesView/__tests__/PinnedMessagesView.test.tsxsrc/plugins/ChannelDetail/__tests__/ChannelManagementActions.defaults.test.tsxsrc/plugins/ChannelDetail/__tests__/ChannelManagementView.test.tsxsrc/plugins/Emojis/EmojiPicker.tsx
🚧 Files skipped from review as they are similar to previous changes (38)
- src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.tsx
- src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaEmptyList.tsx
- src/components/TextareaComposer/tests/CommandItem.test.tsx
- src/components/Button/PlayButton.tsx
- src/components/SummarizedMessagePreview/SummarizedMessagePreview.tsx
- src/components/Poll/PollCreationDialog/PollCreationDialogControls.tsx
- src/components/Modal/CloseButtonOnModalOverlay.tsx
- src/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesEmptyList.tsx
- src/plugins/ChannelDetail/ChannelDetailEmptyList.tsx
- src/components/MessageComposer/tests/CommandChip.test.tsx
- src/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsx
- src/components/Message/MessageStatus.tsx
- src/plugins/ChannelDetail/Views/ChannelMembersView/tests/ChannelMembersBrowseView.test.tsx
- src/components/Loading/LoadingIndicator.tsx
- src/components/MessageComposer/AttachmentSelector/tests/CommandsMenu.test.tsx
- src/components/MessageComposer/LinkPreviewList.tsx
- src/components/Badge/MediaBadge.tsx
- src/components/Message/MessageTranslationIndicator.tsx
- src/components/Message/ReminderNotification.tsx
- src/components/Threads/ThreadList/ThreadListEmptyPlaceholder.tsx
- src/components/MessageComposer/AttachmentPreviewList/FileAttachmentPreview.tsx
- src/plugins/ChannelDetail/Views/ChannelFilesView/tests/ChannelFilesView.test.tsx
- src/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsx
- src/components/Gallery/GalleryUI.tsx
- src/plugins/ChannelDetail/Views/ChannelMembersView/tests/ChannelMembersAddView.test.tsx
- src/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.tsx
- src/components/Notifications/Notification.tsx
- src/components/Dialog/components/Prompt.tsx
- src/components/Gallery/GalleryHeader.tsx
- src/components/Reactions/MessageReactionsDetail.tsx
- src/components/Avatar/Avatar.tsx
- src/components/MessageComposer/AttachmentSelector/CommandsMenu.tsx
- src/components/Form/NumericInput.tsx
- src/components/Form/TextInput.tsx
- src/plugins/Emojis/EmojiPicker.tsx
- src/components/MessageActions/RemindMeSubmenu.tsx
- src/components/MessageComposer/QuotedMessagePreview.tsx
- src/components/Reactions/ReactionSelectorWithButton.tsx
| export * from './ChannelStateContext'; | ||
| export * from './ChatContext'; | ||
| export * from './ComponentContext'; | ||
| export * from './useComponentContextIcons'; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
Update public API documentation for the new hook.
This export adds useComponentContextIcons to the consumer-facing API. Update the affected guide pages in addition to the inline JSDoc before merging.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/context/index.ts` at line 7, Update the public API documentation and
affected guide pages to document the newly exported useComponentContextIcons
hook, alongside its inline JSDoc. Ensure consumer-facing documentation reflects
the hook’s availability and usage before merging.
Source: Coding guidelines
arnautov-anton
force-pushed
the
add-icons-to-component-context
branch
from
July 27, 2026 16:21
ce26cf2 to
3bb6370
Compare
oliverlaz
approved these changes
Jul 28, 2026
arnautov-anton
force-pushed
the
add-icons-to-component-context
branch
from
July 29, 2026 14:16
3bb6370 to
bb7309e
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/context/useComponentContextIcons.ts`:
- Around line 23-32: Update the useMemo in useComponentContextIcons to include
the context icons value in its dependency array, so definedOverrides and the
merged DEFAULT_ICONS result recompute when overrides change. Remove the
exhaustive-deps suppression comment while preserving the existing filtering and
merge behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 3a7ec3e6-9209-4d58-ae45-c03b3724379a
📒 Files selected for processing (111)
src/components/Attachment/Geolocation.tsxsrc/components/Attachment/Giphy.tsxsrc/components/Attachment/LinkPreview/Card.tsxsrc/components/Attachment/LinkPreview/CardAudio.tsxsrc/components/Attachment/ModalGallery.tsxsrc/components/Attachment/UnsupportedAttachment.tsxsrc/components/Attachment/VisibilityDisclaimer.tsxsrc/components/Attachment/__tests__/Giphy.test.tsxsrc/components/Attachment/components/DownloadButton.tsxsrc/components/Avatar/Avatar.tsxsrc/components/Badge/Badge.tsxsrc/components/Badge/MediaBadge.tsxsrc/components/BaseImage/ImagePlaceholder.tsxsrc/components/Button/PlayButton.tsxsrc/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsxsrc/components/ChannelListItem/ChannelListItemUI.tsxsrc/components/ChatView/ChatView.tsxsrc/components/Dialog/components/Callout.tsxsrc/components/Dialog/components/ContextMenu.tsxsrc/components/Dialog/components/Prompt.tsxsrc/components/Dialog/components/Viewer.tsxsrc/components/EmptyStateIndicator/EmptyStateIndicator.tsxsrc/components/Form/NumericInput.tsxsrc/components/Form/TextInput.tsxsrc/components/Gallery/GalleryHeader.tsxsrc/components/Gallery/GalleryUI.tsxsrc/components/Icons/index.tssrc/components/Icons/slots.tssrc/components/Loading/LoadingIndicator.tsxsrc/components/Location/ShareLocationDialog.tsxsrc/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsxsrc/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsxsrc/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsxsrc/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.tsxsrc/components/MediaRecorder/AudioRecorder/__tests__/AudioRecordingPreview.test.tsxsrc/components/Message/MessageAlsoSentInChannelIndicator.tsxsrc/components/Message/MessageDeletedBubble.tsxsrc/components/Message/MessageStatus.tsxsrc/components/Message/MessageTranslationIndicator.tsxsrc/components/Message/PinIndicator.tsxsrc/components/Message/ReminderNotification.tsxsrc/components/MessageActions/DownloadSubmenu.tsxsrc/components/MessageActions/MessageActions.defaults.tsxsrc/components/MessageActions/RemindMeSubmenu.tsxsrc/components/MessageBounce/MessageBouncePrompt.tsxsrc/components/MessageComposer/AttachmentPreviewList/AudioAttachmentPreview.tsxsrc/components/MessageComposer/AttachmentPreviewList/FileAttachmentPreview.tsxsrc/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.tsxsrc/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsxsrc/components/MessageComposer/AttachmentPreviewList/UnsupportedAttachmentPreview.tsxsrc/components/MessageComposer/AttachmentSelector/AttachmentSelector.tsxsrc/components/MessageComposer/AttachmentSelector/CommandsMenu.tsxsrc/components/MessageComposer/AttachmentSelector/__tests__/CommandsMenu.test.tsxsrc/components/MessageComposer/CommandChip.tsxsrc/components/MessageComposer/LinkPreviewList.tsxsrc/components/MessageComposer/MessageComposerActions.tsxsrc/components/MessageComposer/QuotedMessagePreview.tsxsrc/components/MessageComposer/RemoveAttachmentPreviewButton.tsxsrc/components/MessageComposer/SendButton.tsxsrc/components/MessageComposer/SendToChannelCheckbox.tsxsrc/components/MessageComposer/WithDragAndDropUpload.tsxsrc/components/MessageComposer/__tests__/CommandChip.test.tsxsrc/components/MessageList/ScrollToLatestMessageButton.tsxsrc/components/MessageList/UnreadMessagesNotification.tsxsrc/components/MessageList/UnreadMessagesSeparator.tsxsrc/components/Modal/CloseButtonOnModalOverlay.tsxsrc/components/Notifications/Notification.tsxsrc/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.tsxsrc/components/Poll/PollCreationDialog/OptionFieldSet.tsxsrc/components/Poll/PollCreationDialog/PollCreationDialogControls.tsxsrc/components/Poll/PollCreationDialog/PollOptionReorderHandle.tsxsrc/components/Reactions/MessageReactionsDetail.tsxsrc/components/Reactions/ReactionSelector.tsxsrc/components/Reactions/ReactionSelectorWithButton.tsxsrc/components/SummarizedMessagePreview/SummarizedMessagePreview.tsxsrc/components/TextareaComposer/SuggestionList/MentionItem/BroadcastMentionItem.tsxsrc/components/TextareaComposer/SuggestionList/MentionItem/RoleItem.tsxsrc/components/TextareaComposer/SuggestionList/MentionItem/UserGroupItem.tsxsrc/components/TextareaComposer/__tests__/CommandItem.test.tsxsrc/components/Thread/ThreadHeader.tsxsrc/components/Threads/ThreadList/ThreadListEmptyPlaceholder.tsxsrc/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.tsxsrc/components/VideoPlayer/VideoThumbnail.tsxsrc/context/ComponentContext.tsxsrc/context/WithComponents.tsxsrc/context/index.tssrc/context/useComponentContextIcons.tssrc/plugins/ChannelDetail/ChannelDetail.tsxsrc/plugins/ChannelDetail/ChannelDetailEmptyList.tsxsrc/plugins/ChannelDetail/ChannelDetailSearchInput.tsxsrc/plugins/ChannelDetail/SectionNavigator/SectionNavigatorHeader.tsxsrc/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesEmptyList.tsxsrc/plugins/ChannelDetail/Views/ChannelFilesView/__tests__/ChannelFilesView.test.tsxsrc/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementActions.defaults.tsxsrc/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.tsxsrc/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaEmptyList.tsxsrc/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.tsxsrc/plugins/ChannelDetail/Views/ChannelMediaView/__tests__/ChannelMediaView.test.tsxsrc/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberActions.defaults.tsxsrc/plugins/ChannelDetail/Views/ChannelMemberDetailView/__tests__/ChannelMemberDetail.test.tsxsrc/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersAddView.tsxsrc/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.tsxsrc/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersHeaderActions.defaults.tsxsrc/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersAddView.test.tsxsrc/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersBrowseView.test.tsxsrc/plugins/ChannelDetail/Views/ChannelMembersView/__tests__/ChannelMembersView.test.tsxsrc/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.tsxsrc/plugins/ChannelDetail/Views/PinnedMessagesView/__tests__/PinnedMessagesView.test.tsxsrc/plugins/ChannelDetail/__tests__/ChannelManagementActions.defaults.test.tsxsrc/plugins/ChannelDetail/__tests__/ChannelManagementView.test.tsxsrc/plugins/Emojis/EmojiPicker.tsx
🚧 Files skipped from review as they are similar to previous changes (93)
- src/components/Threads/ThreadList/ThreadListEmptyPlaceholder.tsx
- src/components/MessageComposer/AttachmentPreviewList/UnsupportedAttachmentPreview.tsx
- src/components/MessageActions/DownloadSubmenu.tsx
- src/components/MessageComposer/AttachmentPreviewList/AudioAttachmentPreview.tsx
- src/components/SummarizedMessagePreview/SummarizedMessagePreview.tsx
- src/components/Modal/CloseButtonOnModalOverlay.tsx
- src/components/MessageComposer/RemoveAttachmentPreviewButton.tsx
- src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx
- src/components/MessageComposer/SendToChannelCheckbox.tsx
- src/components/MediaRecorder/AudioRecorder/tests/AudioRecordingPreview.test.tsx
- src/components/MessageComposer/AttachmentSelector/tests/CommandsMenu.test.tsx
- src/plugins/ChannelDetail/SectionNavigator/SectionNavigatorHeader.tsx
- src/components/Loading/LoadingIndicator.tsx
- src/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.tsx
- src/components/MessageComposer/CommandChip.tsx
- src/components/MessageComposer/SendButton.tsx
- src/components/Message/MessageAlsoSentInChannelIndicator.tsx
- src/components/TextareaComposer/SuggestionList/MentionItem/UserGroupItem.tsx
- src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.tsx
- src/components/Message/PinIndicator.tsx
- src/plugins/ChannelDetail/tests/ChannelManagementActions.defaults.test.tsx
- src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaEmptyList.tsx
- src/components/BaseImage/ImagePlaceholder.tsx
- src/components/Thread/ThreadHeader.tsx
- src/components/Attachment/LinkPreview/CardAudio.tsx
- src/components/ChannelListItem/ChannelListItemUI.tsx
- src/components/MessageComposer/MessageComposerActions.tsx
- src/components/MessageComposer/QuotedMessagePreview.tsx
- src/components/Attachment/ModalGallery.tsx
- src/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.tsx
- src/components/Reactions/ReactionSelectorWithButton.tsx
- src/components/VideoPlayer/VideoThumbnail.tsx
- src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx
- src/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsx
- src/context/ComponentContext.tsx
- src/components/TextareaComposer/SuggestionList/MentionItem/RoleItem.tsx
- src/components/Poll/PollCreationDialog/PollOptionReorderHandle.tsx
- src/components/Attachment/components/DownloadButton.tsx
- src/components/Message/MessageStatus.tsx
- src/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsx
- src/components/Attachment/tests/Giphy.test.tsx
- src/components/TextareaComposer/SuggestionList/MentionItem/BroadcastMentionItem.tsx
- src/plugins/ChannelDetail/ChannelDetailSearchInput.tsx
- src/components/Message/MessageDeletedBubble.tsx
- src/components/Attachment/Giphy.tsx
- src/components/Icons/slots.ts
- src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.tsx
- src/components/Attachment/LinkPreview/Card.tsx
- src/components/Button/PlayButton.tsx
- src/components/Notifications/Notification.tsx
- src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersAddView.tsx
- src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.tsx
- src/components/MessageComposer/tests/CommandChip.test.tsx
- src/components/Poll/PollCreationDialog/PollCreationDialogControls.tsx
- src/components/Reactions/MessageReactionsDetail.tsx
- src/components/MessageComposer/AttachmentSelector/AttachmentSelector.tsx
- src/components/TextareaComposer/tests/CommandItem.test.tsx
- src/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberActions.defaults.tsx
- src/plugins/ChannelDetail/Views/ChannelMediaView/tests/ChannelMediaView.test.tsx
- src/plugins/Emojis/EmojiPicker.tsx
- src/components/Avatar/Avatar.tsx
- src/components/Dialog/components/Callout.tsx
- src/components/MessageComposer/LinkPreviewList.tsx
- src/components/MessageComposer/WithDragAndDropUpload.tsx
- src/components/Form/NumericInput.tsx
- src/components/Location/ShareLocationDialog.tsx
- src/components/Gallery/GalleryHeader.tsx
- src/plugins/ChannelDetail/Views/ChannelMembersView/tests/ChannelMembersView.test.tsx
- src/plugins/ChannelDetail/Views/ChannelFilesView/tests/ChannelFilesView.test.tsx
- src/components/Badge/Badge.tsx
- src/components/MessageBounce/MessageBouncePrompt.tsx
- src/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.tsx
- src/plugins/ChannelDetail/Views/PinnedMessagesView/tests/PinnedMessagesView.test.tsx
- src/components/MessageComposer/AttachmentPreviewList/FileAttachmentPreview.tsx
- src/components/Reactions/ReactionSelector.tsx
- src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersHeaderActions.defaults.tsx
- src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementActions.defaults.tsx
- src/components/Attachment/VisibilityDisclaimer.tsx
- src/components/Badge/MediaBadge.tsx
- src/components/Form/TextInput.tsx
- src/components/Icons/index.ts
- src/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.tsx
- src/plugins/ChannelDetail/Views/ChannelMembersView/tests/ChannelMembersAddView.test.tsx
- src/components/Attachment/UnsupportedAttachment.tsx
- src/components/MessageActions/MessageActions.defaults.tsx
- src/components/ChatView/ChatView.tsx
- src/components/Message/ReminderNotification.tsx
- src/plugins/ChannelDetail/Views/ChannelMemberDetailView/tests/ChannelMemberDetail.test.tsx
- src/plugins/ChannelDetail/tests/ChannelManagementView.test.tsx
- src/components/Dialog/components/Viewer.tsx
- src/components/Dialog/components/ContextMenu.tsx
- src/components/EmptyStateIndicator/EmptyStateIndicator.tsx
- src/components/MessageComposer/AttachmentSelector/CommandsMenu.tsx
Comment on lines
+23
to
+32
| return useMemo(() => { | ||
| const definedOverrides = Object.fromEntries( | ||
| Object.entries(icons ?? {}).filter(([, Icon]) => typeof Icon === 'function'), | ||
| ); | ||
|
|
||
| return { ...DEFAULT_ICONS, ...definedOverrides }; | ||
|
|
||
| // Component should be stable. | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Recompute icons when the context override changes.
icons is read from context but omitted from the useMemo dependency array, so mounted consumers retain the initial icon map when WithComponents receives new overrides. Remove the suppression and depend on icons.
Proposed fix
- }, []);
-
- // Component should be stable.
- // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [icons]);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| return useMemo(() => { | |
| const definedOverrides = Object.fromEntries( | |
| Object.entries(icons ?? {}).filter(([, Icon]) => typeof Icon === 'function'), | |
| ); | |
| return { ...DEFAULT_ICONS, ...definedOverrides }; | |
| // Component should be stable. | |
| // eslint-disable-next-line react-hooks/exhaustive-deps | |
| }, []); | |
| return useMemo(() => { | |
| const definedOverrides = Object.fromEntries( | |
| Object.entries(icons ?? {}).filter(([, Icon]) => typeof Icon === 'function'), | |
| ); | |
| return { ...DEFAULT_ICONS, ...definedOverrides }; | |
| }, [icons]); |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/context/useComponentContextIcons.ts` around lines 23 - 32, Update the
useMemo in useComponentContextIcons to include the context icons value in its
dependency array, so definedOverrides and the merged DEFAULT_ICONS result
recompute when overrides change. Remove the exhaustive-deps suppression comment
while preserving the existing filtering and merge behavior.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🎯 Goal
Adds ability to override icons through the component context.
Ref: GetStream/stream-chat-react-native#3731
Summary by CodeRabbit
useComponentContextIcons, enabling centralized, context-based icon customization (with SDK defaults) across messages, attachments, dialogs, forms, media, polls, reactions, and channel views.iconscustomizations are preserved and combined correctly instead of being replaced.ComponentContexticon slots.