ECHO-333 Add feature flag for conversation health #199
Conversation
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
Co-authored-by: sameer <sameer@dembrane.com>
Contributor
WalkthroughA feature flag for "Conversation Health" was introduced, toggled via the new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI
participant Config
participant Backend
User->>UI: Loads ParticipantBody
UI->>Config: Reads ENABLE_CONVERSATION_HEALTH
alt Feature flag enabled
UI->>Backend: Subscribe to /api/conversations/health/stream
Backend-->>UI: Stream health status/events
UI->>User: Show health status & tips
else Feature flag disabled
UI->>User: Show standard participant UI
end
LGTM. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🧰 Additional context used🧠 Learnings (1)echo/frontend/src/components/participant/ParticipantBody.tsx (2)🧬 Code Graph Analysis (1)echo/frontend/src/components/participant/ParticipantBody.tsx (4)
⏰ Context from checks skipped due to timeout of 90000ms (5)
🔇 Additional comments (5)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Hi @cursoragent! Thank you for contributing to Dembrane ECHO! Before we consider your Pull Request, we ask that you sign our Contributor License Agreement (CLA). This is only required for your first Pull Request. Please review the CLA, and sign it by adding your GitHub username to the contributors.yml file. Thanks! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (4)
echo/frontend/.env.example(1 hunks)echo/frontend/FEATURE_FLAG_CONVERSATION_HEALTH.md(1 hunks)echo/frontend/src/components/participant/ParticipantBody.tsx(6 hunks)echo/frontend/src/config.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
echo/frontend/src/components/participant/ParticipantBody.tsx (4)
echo/frontend/src/hooks/useConversationsHealthStream.ts (1)
useConversationsHealthStream(6-73)echo/frontend/src/config.ts (1)
ENABLE_CONVERSATION_HEALTH(39-40)echo/frontend/src/components/common/ConnectionHealthStatus.tsx (1)
ConnectionHealthStatus(10-34)echo/frontend/src/components/common/TipBanner.tsx (1)
TipBanner(12-91)
🪛 LanguageTool
echo/frontend/FEATURE_FLAG_CONVERSATION_HEALTH.md
[duplication] ~8-~8: Possible typo: you repeated a word.
Context: ...Implementation Details ### Environment Variable - Variable Name: `VITE_ENABLE_CONVERSATION_HEALT...
(ENGLISH_WORD_REPEAT_RULE)
🪛 markdownlint-cli2 (0.17.2)
echo/frontend/FEATURE_FLAG_CONVERSATION_HEALTH.md
3-3: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Below
(MD022, blanks-around-headings)
8-8: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Below
(MD022, blanks-around-headings)
9-9: Lists should be surrounded by blank lines
(MD032, blanks-around-lists)
13-13: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Below
(MD022, blanks-around-headings)
15-15: Lists should be surrounded by blank lines
(MD032, blanks-around-lists)
23-23: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Below
(MD022, blanks-around-headings)
24-24: Lists should be surrounded by blank lines
(MD032, blanks-around-lists)
28-28: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Below
(MD022, blanks-around-headings)
30-30: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
36-36: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
42-42: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Below
(MD022, blanks-around-headings)
44-44: Lists should be surrounded by blank lines
(MD032, blanks-around-lists)
46-46: Files should end with a single newline character
(MD047, single-trailing-newline)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Cursor BugBot
- GitHub Check: ci-check-server
🔇 Additional comments (6)
echo/frontend/.env.example (1)
1-10: LGTM! Clean env var documentation.Solid documentation for the conversation health feature flag. The Vite naming convention is on point, and the comments clearly explain what this bad boy enables. Default to disabled is the right move for a new feature.
echo/frontend/src/config.ts (1)
37-40: LGTM! Solid feature flag implementation.Following the established pattern like a pro - string comparison with "1" and consistent naming convention. The ENABLE_CONVERSATION_HEALTH flag integrates cleanly with the existing config setup.
echo/frontend/src/components/participant/ParticipantBody.tsx (4)
26-26: LGTM! Clean import.Importing the feature flag constant like a boss. This sets up the conditional logic nicely throughout the component.
56-56: LGTM! Smart conditional hook usage.Passing
undefinedwhen the feature is disabled prevents unnecessary SSE connections - that's some 10x engineering right there. Clean and efficient.
131-136: LGTM! Clean conditional rendering.Feature-flagged component rendering done right. The ConnectionHealthStatus only shows when the feature is enabled and recording has started.
149-164: LGTM! Solid conditional banners.Both SSE connection health and conversation issue banners are properly gated behind the feature flag. The logic flow is clean and the UX makes sense.
|
|
||
| <img | ||
| className={`w-full object-contain ${isOnline ? "animate-pulse duration-1000" : "grayscale filter"} ${!conversationIssueBanner ? "saturate-200" : "opacity-50"}`} | ||
| className={`w-full object-contain ${isOnline ? "animate-pulse duration-1000" : "grayscale filter"} ${ENABLE_CONVERSATION_HEALTH && !conversationIssueBanner ? "saturate-200" : ENABLE_CONVERSATION_HEALTH && conversationIssueBanner ? "opacity-50" : "saturate-200"}`} |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion
Refactor this gnarly ternary chain for better readability.
This line is doing too much work with nested ternaries. Let's break it down for the next engineer who has to debug this at 2 AM.
- className={`w-full object-contain ${isOnline ? "animate-pulse duration-1000" : "grayscale filter"} ${ENABLE_CONVERSATION_HEALTH && !conversationIssueBanner ? "saturate-200" : ENABLE_CONVERSATION_HEALTH && conversationIssueBanner ? "opacity-50" : "saturate-200"}`}
+ className={`w-full object-contain ${getWelcomeImageClasses(isOnline, ENABLE_CONVERSATION_HEALTH, conversationIssueBanner)}`}Add this helper function above the component:
const getWelcomeImageClasses = (
isOnline: boolean,
enableConversationHealth: boolean,
conversationIssueBanner: any
): string => {
const baseClass = isOnline ? "animate-pulse duration-1000" : "grayscale filter";
if (!enableConversationHealth) {
return `${baseClass} saturate-200`;
}
const healthClass = conversationIssueBanner ? "opacity-50" : "saturate-200";
return `${baseClass} ${healthClass}`;
};🤖 Prompt for AI Agents
In echo/frontend/src/components/participant/ParticipantBody.tsx at line 167, the
className assignment uses a complex nested ternary expression that reduces
readability. Refactor by creating a helper function above the component, for
example getWelcomeImageClasses, that takes isOnline, ENABLE_CONVERSATION_HEALTH,
and conversationIssueBanner as parameters and returns the appropriate class
string using clear if statements. Then replace the inline ternary with a call to
this helper function to simplify the JSX and improve maintainability.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
echo/frontend/src/components/participant/ParticipantBody.tsx (1)
167-167: Refactor the gnarly ternary chain for better readability.This complex ternary was already flagged by a previous reviewer. The suggested helper function approach would significantly improve maintainability.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
echo/frontend/src/components/participant/ParticipantBody.tsx(5 hunks)
🧰 Additional context used
🧠 Learnings (1)
echo/frontend/src/components/participant/ParticipantBody.tsx (2)
Learnt from: ussaama
PR: Dembrane/echo#185
File: echo/frontend/src/App.tsx:25-36
Timestamp: 2025-06-16T11:51:33.799Z
Learning: In echo/frontend/src/App.tsx, user ussaama prefers explicit code over terse/inline code for React useEffect cleanup functions, choosing clarity and future maintainability over brevity when assigning cleanup functions to variables before returning them.
Learnt from: ussaama
PR: Dembrane/echo#169
File: echo/frontend/src/components/project/ProjectPortalEditor.tsx:409-464
Timestamp: 2025-05-30T15:38:44.413Z
Learning: Badge-based selectors in ProjectPortalEditor.tsx: Keyboard navigation enhancements for accessibility are considered optional improvements rather than critical issues. The user acknowledges these suggestions but doesn't prioritize them as blockers.
🧬 Code Graph Analysis (1)
echo/frontend/src/components/participant/ParticipantBody.tsx (4)
echo/frontend/src/hooks/useConversationsHealthStream.ts (1)
useConversationsHealthStream(6-73)echo/frontend/src/config.ts (1)
ENABLE_CONVERSATION_HEALTH(39-40)echo/frontend/src/components/common/ConnectionHealthStatus.tsx (1)
ConnectionHealthStatus(10-34)echo/frontend/src/components/common/TipBanner.tsx (1)
TipBanner(12-91)
🪛 Biome (1.9.4)
echo/frontend/src/components/participant/ParticipantBody.tsx
[error] 157-157: Expected an expression but instead found '&&'.
Expected an expression here.
(parse)
[error] 159-159: Expected an expression but instead found '.'.
Expected an expression here.
(parse)
[error] 159-159: Unexpected token. Did you mean {'}'} or }?
(parse)
[error] 160-160: expected } but instead found .
Remove .
(parse)
[error] 160-160: Unexpected token. Did you mean {'}'} or }?
(parse)
[error] 161-161: expected } but instead found .
Remove .
(parse)
[error] 161-161: Unexpected token. Did you mean {'}'} or }?
(parse)
[error] 162-162: expected } but instead found .
Remove .
(parse)
[error] 158-159: Expected corresponding JSX closing tag for 'TipBanner'.
Opening tag
closing tag
(parse)
[error] 162-162: Unexpected token. Did you mean {'}'} or }?
(parse)
[error] 163-163: Unexpected token. Did you mean {'>'} or >?
(parse)
[error] 164-164: Unexpected token. Did you mean {'}'} or }?
(parse)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: ci-check-server
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (5)
echo/frontend/src/components/participant/ParticipantBody.tsx (5)
26-26: LGTM! Clean feature flag import.Solid import pattern for the conversation health feature flag.
56-56: LGTM! Proper conditional hook usage.Clean implementation of the feature flag pattern - passing conversation ID array when enabled, undefined when disabled. This is exactly how you gate hook behavior.
116-116: LGTM! Consistent feature flag application.Nice consistent pattern for conditionally enabling conversation issue detection.
131-136: LGTM! Clean conditional rendering.Proper feature flag gating for the ConnectionHealthStatus component. The UI gracefully handles when the feature is disabled.
149-155: LGTM! Solid SSE health monitoring.Good implementation of the unhealthy connection banner with proper feature flag gating.
ussaama
changed the title
ArindamRoy23
approved these changes
Jul 1, 2025
ussaama
added a commit
that referenced
this pull request
Jul 3, 2025
* Add conversation health feature flag with optional monitoring Co-authored-by: sameer <sameer@dembrane.com> * refactor image classes * Update ParticipantBody.tsx --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Usama <59267656+ussaama@users.noreply.github.com>
spashii
added a commit
that referenced
this pull request
Jul 4, 2025
* Add Announcements component to Header for improved user notifications * Update Announcements component icons and adjust notification indicator styling * Refactor AnnouncementItem and Announcements components for improved functionality and styling - Updated AnnouncementItem to handle announcements with string IDs and added a date formatting function. - Enhanced the Announcements component to fetch announcements from an API, replacing hardcoded data. - Introduced loading states and error handling for marking announcements as read. - Removed the deprecated announcementList file and adjusted related types in Directus definitions. * Refactor AnnouncementItem and Announcements components for improved functionality and performance - Updated AnnouncementItem to use forwardRef for better ref handling and adjusted internal refs for message display. - Enhanced Announcements component to utilize useInfiniteAnnouncements for paginated fetching of announcements. - Implemented loading state for fetching more announcements and improved error handling. - Cleaned up code for better readability and maintainability. * Update Announcement components and add latest announcement query - Replaced IconUrgent with IconAlertTriangle in AnnouncementItem for better visual representation. - Refactored Announcements component to use useAnnouncementDrawer for managing drawer state. - Integrated TopAnnouncementBar into Header for enhanced user notifications. - Added useLatestAnnouncement hook to fetch the most recent announcement, improving data handling and user experience. * Enhance Announcements and TopAnnouncementBar components for improved styling and functionality - Updated the label in Announcements component to include padding and text size for better visibility. - Adjusted the rotation of the IconSpeakerphone in Announcements for a more polished appearance. - Changed the ThemeIcon variant in TopAnnouncementBar to 'transparent' for a cleaner look. - Increased the size of the IconAlertTriangle in TopAnnouncementBar for better visual impact. * Refactor TopAnnouncementBar and useProcessedAnnouncements for improved translation handling - Integrated language support in TopAnnouncementBar by utilizing the useLanguage hook. - Replaced direct translation access with a new getTranslatedContent function for better translation management. - Updated TopAnnouncementBar to render announcement titles using Markdown for enhanced formatting. - Removed staleTime configuration from useLatestAnnouncement for cleaner data fetching. * Update AnnouncementItem styling for improved user interaction - Changed button variants in AnnouncementItem to 'transparent' for a cleaner look. - Added 'gray' color to buttons and applied 'hover:underline' class for better visual feedback on hover. * Enhance TopAnnouncementBar functionality to track read status and mark announcements as read - Integrated useCurrentUser and useMarkAnnouncementAsReadMutation hooks for user-specific announcement handling. - Added logic to check if the announcement has been read by the current user before displaying it. - Implemented error handling and toast notifications for marking announcements as read, improving user feedback. * Refactor Announcements and TopAnnouncementBar components to remove current user dependency - Removed useCurrentUser hook from Announcements and TopAnnouncementBar components to simplify logic for marking announcements as read. - Updated the markAsRead mutation to handle user IDs as optional, streamlining the announcement read status functionality. - Enhanced error handling for marking announcements as read, improving overall user experience. * Refactor Announcements component and enhance query handling - Simplified the Announcements component by removing unnecessary dependencies and improving state management. - Enhanced error handling in announcement fetching and marking as read, providing better user feedback. - Introduced a new useUnreadAnnouncements hook to track unread announcements, improving notification functionality. - Updated Header to include AnnouncementIcon for better visual representation of announcements. * Refactor Announcements component to improve state management and query handling - Consolidated imports for cleaner code structure. - Introduced a new state to track if the drawer has been opened for the first time, enhancing user experience. - Updated the useInfiniteAnnouncements hook to conditionally enable fetching based on the new state, optimizing performance. * Refactor AnnouncementDrawerHeader to utilize useUnreadAnnouncements hook - Removed unreadCount prop and integrated useUnreadAnnouncements for fetching unread announcements directly. - Updated component structure for improved readability and functionality. - Enhanced conditional rendering for unread announcements and button visibility based on the fetched data. * Update Announcements component loader styling for improved user experience - Adjusted the loader size from 'sm' to 'md' for better visibility during data fetching. - Added vertical padding to the Center component to enhance layout aesthetics. * Refactor AnnouncementSkeleton component for enhanced loading experience - Updated the structure and styling of the AnnouncementSkeleton to provide a more visually appealing loading state. - Increased the number of skeleton items displayed and improved layout with additional icons and spacing for better user interaction. - Implemented hover effects and transitions to enhance the overall user experience during data fetching. * Refactor AnnouncementIcon component for improved user interaction - Updated the AnnouncementIcon component to enhance clickability by moving the onClick handler to the Group element. - Simplified the structure by removing the cursor-pointer class from the Box element, improving code readability. * Enhance useUnreadAnnouncements hook to improve user-specific announcement tracking - Integrated current user data into the useUnreadAnnouncements hook to conditionally fetch unread announcements based on user ID. - Added logic to return 0 if no user is logged in, ensuring a smoother experience for unauthenticated users. - Updated queryKey to include currentUser ID for more accurate data retrieval and caching. - Enabled the query only when a user is logged in, optimizing performance and reducing unnecessary requests. * Add markAllAsRead mutation to Announcements component for improved user experience - Introduced a new useMarkAllAnnouncementsAsReadMutation hook to handle marking all announcements as read in a single call. - Updated the Announcements component to utilize the new mutation, simplifying the process of marking all announcements as read. - Enhanced success and error handling with toast notifications for better user feedback during the marking process. * Refactor AnnouncementDrawerHeader and AnnouncementIcon for improved button visibility and interaction - Updated AnnouncementDrawerHeader to conditionally render the "Mark all read" button only when there are unread announcements, enhancing user experience. - Modified AnnouncementIcon to ensure the disabled state is correctly determined by parsing the unreadCount, improving interaction reliability. * Refactor AnnouncementDrawerHeader and useUnreadAnnouncements hook for improved logic and performance - Updated AnnouncementDrawerHeader to simplify unreadCount checks by removing unnecessary parsing. - Refactored useUnreadAnnouncements hook to enhance query logic, changing from _and to _or for better filtering of announcements based on expiration status. - Improved count calculation for unread announcements by directly parsing the counts, ensuring accurate results. * Refactor announcement marking logic for improved clarity and performance - Removed unnecessary isMarkingAsRead prop from AnnouncementItem component, simplifying its interface. - Updated mutation hooks in Announcements and TopAnnouncementBar components for consistency and clarity. - Enhanced the useMarkAsReadMutation and useMarkAllAsReadMutation hooks to streamline the announcement marking process with optimistic updates and improved error handling. * Remove unused unreadAnnouncements variable from Announcements component to streamline code and improve clarity. * Enhance useAnnouncementDrawer hook to reset drawer state on page reload - Added useEffect to reset the drawer state to closed when the page is reloaded, improving user experience. - Updated useUnreadAnnouncements hook to ensure unread announcement count does not go below zero, enhancing data accuracy. * Update TopAnnouncementBar to apply line clamping on title Markdown for improved text display * Add focus outline to close button in AnnouncementDrawerHeader for improved accessibility * Enhance layout responsiveness by introducing dynamic height and padding variables in Tailwind configuration - Added custom height and padding variables to Tailwind config for base and project layouts. - Updated TopAnnouncementBar to adjust layout height dynamically based on announcement state. - Refactored BaseLayout and ProjectLayout components to utilize new Tailwind variables for improved layout consistency. * Remove console log statements from AnnouncementItem component to clean up code and improve performance. * Update TopAnnouncementBar styles for improved layout consistency - Adjusted padding and margin in TopAnnouncementBar component for better alignment and spacing. - Enhanced the layout by modifying the class names to ensure a more visually appealing design. * Refactor AnnouncementIcon to simplify disabled state logic - Updated the disabled prop in AnnouncementIcon to directly check unreadCount, improving code clarity and reducing unnecessary parsing. * Enhance AnnouncementItem date formatting with localization support - Updated date formatting logic in AnnouncementItem to utilize the `t` function for localization, ensuring time strings are translatable. - Improved clarity of the TODO comment regarding future enhancements to the date formatting function. * ECHO-333 Add feature flag for conversation health (#199) * Add conversation health feature flag with optional monitoring Co-authored-by: sameer <sameer@dembrane.com> * refactor image classes * Update ParticipantBody.tsx --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Usama <59267656+ussaama@users.noreply.github.com> * Add current user filtering to latest announcements queries - Integrated current user data into the `useLatestAnnouncement` and `useInfiniteAnnouncements` hooks. - Implemented filtering for announcements based on the current user's ID to enhance relevance of displayed announcements. * Refactor announcement hooks import paths for consistency - Updated import paths for announcement-related hooks in multiple components to use relative paths instead of absolute paths. - This change enhances code organization and maintainability by standardizing the import structure across the announcement components. * Refactor date formatting in AnnouncementItem component - Moved the date formatting logic to a separate utility function in `utils/dateUtils` for better organization and reusability. - Removed the inline date formatting function and updated the component to import the new utility, enhancing code clarity and maintainability. * Enhance localization support in AnnouncementDrawerHeader component - Updated the AnnouncementDrawerHeader to use the `t` function for translating the unread announcements count, improving localization. - Added new translation entries for "Announcements", "unread announcement", and "unread announcements" in multiple language files, ensuring consistent user experience across different locales. * Add feature flag for announcements in Header component - Introduced a new feature flag `ENABLE_ANNOUNCEMENTS` in the config to control the display of announcements. - Updated the Header component to conditionally render the TopAnnouncementBar and related components based on the new feature flag, enhancing user experience and maintainability. * Remove unnecessary size prop from IconX in AnnouncementDrawerHeader component * Add border styling to announcement content - Updated the Announcements component to include a border-0 class for the content, enhancing the visual presentation and consistency of the announcement layout. * Update Announcements component to limit content width - Added a max-width style to the Announcements component to ensure better responsiveness and visual consistency across different screen sizes. * Add announcements and related metrics to dashboards and permissions - Introduced a new "Announcements" dashboard with associated panels for "Announcement Readers Graph", "Total Read Announcements", "Read By Users", and "Read Count Per User". - Updated permissions to include create, read, and update actions for the `announcement_activity` and `announcement` collections. - Enhanced GraphQL specifications to support new queries and mutations related to announcements and their translations. * Refactor date formatting utility and update AnnouncementItem component - Replaced the existing date formatting function with a new implementation using date-fns for improved localization support. - Introduced a custom hook `useFormatDate` to handle locale-specific date formatting. - Updated the AnnouncementItem component to utilize the new date formatting hook, enhancing code clarity and maintainability. * Refactor getTranslatedContent function to use specific types for announcements - Updated the getTranslatedContent function to replace 'any' type with specific types for better type safety and clarity. - Changed the parameter type for announcements from 'any' to 'Announcement' and for translations from 'any' to 'AnnouncementTranslations'. * Refactor announcement components for improved type safety and readability - Introduced a new variable `hasUnreadAnnouncements` in AnnouncementDrawerHeader for better clarity when checking unread announcements. - Updated type annotations in AnnouncementIcon and TopAnnouncementBar components to use specific types instead of 'any', enhancing type safety and code maintainability. * Update type annotation in AnnouncementIcon component for improved type safety - Changed the type of the activity parameter from 'any' to 'AnnouncementActivity' in the AnnouncementIcon component, enhancing type safety and code clarity. --------- Co-authored-by: Sameer Pashikanti <63326129+spashii@users.noreply.github.com> Co-authored-by: Cursor Agent <cursoragent@cursor.com>
spashii
added a commit
that referenced
this pull request
Nov 18, 2025
* Add conversation health feature flag with optional monitoring Co-authored-by: sameer <sameer@dembrane.com> * refactor image classes * Update ParticipantBody.tsx --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Usama <59267656+ussaama@users.noreply.github.com>
spashii
added a commit
that referenced
this pull request
Nov 18, 2025
* Add Announcements component to Header for improved user notifications * Update Announcements component icons and adjust notification indicator styling * Refactor AnnouncementItem and Announcements components for improved functionality and styling - Updated AnnouncementItem to handle announcements with string IDs and added a date formatting function. - Enhanced the Announcements component to fetch announcements from an API, replacing hardcoded data. - Introduced loading states and error handling for marking announcements as read. - Removed the deprecated announcementList file and adjusted related types in Directus definitions. * Refactor AnnouncementItem and Announcements components for improved functionality and performance - Updated AnnouncementItem to use forwardRef for better ref handling and adjusted internal refs for message display. - Enhanced Announcements component to utilize useInfiniteAnnouncements for paginated fetching of announcements. - Implemented loading state for fetching more announcements and improved error handling. - Cleaned up code for better readability and maintainability. * Update Announcement components and add latest announcement query - Replaced IconUrgent with IconAlertTriangle in AnnouncementItem for better visual representation. - Refactored Announcements component to use useAnnouncementDrawer for managing drawer state. - Integrated TopAnnouncementBar into Header for enhanced user notifications. - Added useLatestAnnouncement hook to fetch the most recent announcement, improving data handling and user experience. * Enhance Announcements and TopAnnouncementBar components for improved styling and functionality - Updated the label in Announcements component to include padding and text size for better visibility. - Adjusted the rotation of the IconSpeakerphone in Announcements for a more polished appearance. - Changed the ThemeIcon variant in TopAnnouncementBar to 'transparent' for a cleaner look. - Increased the size of the IconAlertTriangle in TopAnnouncementBar for better visual impact. * Refactor TopAnnouncementBar and useProcessedAnnouncements for improved translation handling - Integrated language support in TopAnnouncementBar by utilizing the useLanguage hook. - Replaced direct translation access with a new getTranslatedContent function for better translation management. - Updated TopAnnouncementBar to render announcement titles using Markdown for enhanced formatting. - Removed staleTime configuration from useLatestAnnouncement for cleaner data fetching. * Update AnnouncementItem styling for improved user interaction - Changed button variants in AnnouncementItem to 'transparent' for a cleaner look. - Added 'gray' color to buttons and applied 'hover:underline' class for better visual feedback on hover. * Enhance TopAnnouncementBar functionality to track read status and mark announcements as read - Integrated useCurrentUser and useMarkAnnouncementAsReadMutation hooks for user-specific announcement handling. - Added logic to check if the announcement has been read by the current user before displaying it. - Implemented error handling and toast notifications for marking announcements as read, improving user feedback. * Refactor Announcements and TopAnnouncementBar components to remove current user dependency - Removed useCurrentUser hook from Announcements and TopAnnouncementBar components to simplify logic for marking announcements as read. - Updated the markAsRead mutation to handle user IDs as optional, streamlining the announcement read status functionality. - Enhanced error handling for marking announcements as read, improving overall user experience. * Refactor Announcements component and enhance query handling - Simplified the Announcements component by removing unnecessary dependencies and improving state management. - Enhanced error handling in announcement fetching and marking as read, providing better user feedback. - Introduced a new useUnreadAnnouncements hook to track unread announcements, improving notification functionality. - Updated Header to include AnnouncementIcon for better visual representation of announcements. * Refactor Announcements component to improve state management and query handling - Consolidated imports for cleaner code structure. - Introduced a new state to track if the drawer has been opened for the first time, enhancing user experience. - Updated the useInfiniteAnnouncements hook to conditionally enable fetching based on the new state, optimizing performance. * Refactor AnnouncementDrawerHeader to utilize useUnreadAnnouncements hook - Removed unreadCount prop and integrated useUnreadAnnouncements for fetching unread announcements directly. - Updated component structure for improved readability and functionality. - Enhanced conditional rendering for unread announcements and button visibility based on the fetched data. * Update Announcements component loader styling for improved user experience - Adjusted the loader size from 'sm' to 'md' for better visibility during data fetching. - Added vertical padding to the Center component to enhance layout aesthetics. * Refactor AnnouncementSkeleton component for enhanced loading experience - Updated the structure and styling of the AnnouncementSkeleton to provide a more visually appealing loading state. - Increased the number of skeleton items displayed and improved layout with additional icons and spacing for better user interaction. - Implemented hover effects and transitions to enhance the overall user experience during data fetching. * Refactor AnnouncementIcon component for improved user interaction - Updated the AnnouncementIcon component to enhance clickability by moving the onClick handler to the Group element. - Simplified the structure by removing the cursor-pointer class from the Box element, improving code readability. * Enhance useUnreadAnnouncements hook to improve user-specific announcement tracking - Integrated current user data into the useUnreadAnnouncements hook to conditionally fetch unread announcements based on user ID. - Added logic to return 0 if no user is logged in, ensuring a smoother experience for unauthenticated users. - Updated queryKey to include currentUser ID for more accurate data retrieval and caching. - Enabled the query only when a user is logged in, optimizing performance and reducing unnecessary requests. * Add markAllAsRead mutation to Announcements component for improved user experience - Introduced a new useMarkAllAnnouncementsAsReadMutation hook to handle marking all announcements as read in a single call. - Updated the Announcements component to utilize the new mutation, simplifying the process of marking all announcements as read. - Enhanced success and error handling with toast notifications for better user feedback during the marking process. * Refactor AnnouncementDrawerHeader and AnnouncementIcon for improved button visibility and interaction - Updated AnnouncementDrawerHeader to conditionally render the "Mark all read" button only when there are unread announcements, enhancing user experience. - Modified AnnouncementIcon to ensure the disabled state is correctly determined by parsing the unreadCount, improving interaction reliability. * Refactor AnnouncementDrawerHeader and useUnreadAnnouncements hook for improved logic and performance - Updated AnnouncementDrawerHeader to simplify unreadCount checks by removing unnecessary parsing. - Refactored useUnreadAnnouncements hook to enhance query logic, changing from _and to _or for better filtering of announcements based on expiration status. - Improved count calculation for unread announcements by directly parsing the counts, ensuring accurate results. * Refactor announcement marking logic for improved clarity and performance - Removed unnecessary isMarkingAsRead prop from AnnouncementItem component, simplifying its interface. - Updated mutation hooks in Announcements and TopAnnouncementBar components for consistency and clarity. - Enhanced the useMarkAsReadMutation and useMarkAllAsReadMutation hooks to streamline the announcement marking process with optimistic updates and improved error handling. * Remove unused unreadAnnouncements variable from Announcements component to streamline code and improve clarity. * Enhance useAnnouncementDrawer hook to reset drawer state on page reload - Added useEffect to reset the drawer state to closed when the page is reloaded, improving user experience. - Updated useUnreadAnnouncements hook to ensure unread announcement count does not go below zero, enhancing data accuracy. * Update TopAnnouncementBar to apply line clamping on title Markdown for improved text display * Add focus outline to close button in AnnouncementDrawerHeader for improved accessibility * Enhance layout responsiveness by introducing dynamic height and padding variables in Tailwind configuration - Added custom height and padding variables to Tailwind config for base and project layouts. - Updated TopAnnouncementBar to adjust layout height dynamically based on announcement state. - Refactored BaseLayout and ProjectLayout components to utilize new Tailwind variables for improved layout consistency. * Remove console log statements from AnnouncementItem component to clean up code and improve performance. * Update TopAnnouncementBar styles for improved layout consistency - Adjusted padding and margin in TopAnnouncementBar component for better alignment and spacing. - Enhanced the layout by modifying the class names to ensure a more visually appealing design. * Refactor AnnouncementIcon to simplify disabled state logic - Updated the disabled prop in AnnouncementIcon to directly check unreadCount, improving code clarity and reducing unnecessary parsing. * Enhance AnnouncementItem date formatting with localization support - Updated date formatting logic in AnnouncementItem to utilize the `t` function for localization, ensuring time strings are translatable. - Improved clarity of the TODO comment regarding future enhancements to the date formatting function. * ECHO-333 Add feature flag for conversation health (#199) * Add conversation health feature flag with optional monitoring Co-authored-by: sameer <sameer@dembrane.com> * refactor image classes * Update ParticipantBody.tsx --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Usama <59267656+ussaama@users.noreply.github.com> * Add current user filtering to latest announcements queries - Integrated current user data into the `useLatestAnnouncement` and `useInfiniteAnnouncements` hooks. - Implemented filtering for announcements based on the current user's ID to enhance relevance of displayed announcements. * Refactor announcement hooks import paths for consistency - Updated import paths for announcement-related hooks in multiple components to use relative paths instead of absolute paths. - This change enhances code organization and maintainability by standardizing the import structure across the announcement components. * Refactor date formatting in AnnouncementItem component - Moved the date formatting logic to a separate utility function in `utils/dateUtils` for better organization and reusability. - Removed the inline date formatting function and updated the component to import the new utility, enhancing code clarity and maintainability. * Enhance localization support in AnnouncementDrawerHeader component - Updated the AnnouncementDrawerHeader to use the `t` function for translating the unread announcements count, improving localization. - Added new translation entries for "Announcements", "unread announcement", and "unread announcements" in multiple language files, ensuring consistent user experience across different locales. * Add feature flag for announcements in Header component - Introduced a new feature flag `ENABLE_ANNOUNCEMENTS` in the config to control the display of announcements. - Updated the Header component to conditionally render the TopAnnouncementBar and related components based on the new feature flag, enhancing user experience and maintainability. * Remove unnecessary size prop from IconX in AnnouncementDrawerHeader component * Add border styling to announcement content - Updated the Announcements component to include a border-0 class for the content, enhancing the visual presentation and consistency of the announcement layout. * Update Announcements component to limit content width - Added a max-width style to the Announcements component to ensure better responsiveness and visual consistency across different screen sizes. * Add announcements and related metrics to dashboards and permissions - Introduced a new "Announcements" dashboard with associated panels for "Announcement Readers Graph", "Total Read Announcements", "Read By Users", and "Read Count Per User". - Updated permissions to include create, read, and update actions for the `announcement_activity` and `announcement` collections. - Enhanced GraphQL specifications to support new queries and mutations related to announcements and their translations. * Refactor date formatting utility and update AnnouncementItem component - Replaced the existing date formatting function with a new implementation using date-fns for improved localization support. - Introduced a custom hook `useFormatDate` to handle locale-specific date formatting. - Updated the AnnouncementItem component to utilize the new date formatting hook, enhancing code clarity and maintainability. * Refactor getTranslatedContent function to use specific types for announcements - Updated the getTranslatedContent function to replace 'any' type with specific types for better type safety and clarity. - Changed the parameter type for announcements from 'any' to 'Announcement' and for translations from 'any' to 'AnnouncementTranslations'. * Refactor announcement components for improved type safety and readability - Introduced a new variable `hasUnreadAnnouncements` in AnnouncementDrawerHeader for better clarity when checking unread announcements. - Updated type annotations in AnnouncementIcon and TopAnnouncementBar components to use specific types instead of 'any', enhancing type safety and code maintainability. * Update type annotation in AnnouncementIcon component for improved type safety - Changed the type of the activity parameter from 'any' to 'AnnouncementActivity' in the AnnouncementIcon component, enhancing type safety and code clarity. --------- Co-authored-by: Sameer Pashikanti <63326129+spashii@users.noreply.github.com> Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This pull request contains changes generated by Cursor background composer.
Summary by CodeRabbit
New Features
Documentation