Conversation
- Introduced AutoSelectConversationItem component to manage auto-select functionality for conversations. - Updated API calls to include auto_select_bool parameter for adding and deleting chat contexts. - Enhanced ProjectChatRoute to display progress and success messages when auto-select is active. - Refactored related hooks and types to support the new feature, improving user experience in conversation management.
- Added AUTO_SELECT_ENABLED configuration to manage auto-select behavior. - Updated ChatContextProgress to conditionally render based on auto-select state. - Enhanced ConversationAccordion to utilize auto-select logic for conversation item interactions. - Refactored NavigationButton and ConversationLinks to support dynamic border colors based on auto-select status. - Replaced AutoSelectConversationItem with AutoSelectConversations for improved integration in the conversation flow.
- Integrated SourcesSearch component to show progress during source searching when auto-select is enabled. - Added SourcesSearched and Citations components to display searched sources and their citations upon successful search. - Updated conditional rendering logic for success messages based on auto-select state.
- Updated conditional checks to ensure progress and success messages are displayed only when AUTO_SELECT_ENABLED is true and auto_select_bool is set. - Enhanced error handling to maintain consistent user feedback during chat submission process when auto-select is active.
- Integrated SourcesSearched component to display when the message content is "searched" from the dembrane role. - Updated conditional rendering logic in ChatHistoryMessage to include the new component for specific message types.
…atRoute - Updated ChatMessage component to adjust alignment logic for user role, ensuring proper message alignment. - Commented out the Citations component in ProjectChatRoute to prevent rendering issues while maintaining the structure for future use.
- Refactored ChatHistoryMessage to use Box for layout when displaying the SourcesSearched component. - Adjusted alignment logic in ChatMessage to ensure proper message alignment for both user and dembrane roles.
- Added logic to determine if the user is in chat mode based on the current pathname. - Updated rendering conditions to display auto-select functionality only when in chat mode, improving user experience in conversation management.
…Route - Enhanced the chat message submission logic to use async mutation when auto-select is enabled, ensuring smoother message handling. - Improved progress indication during chat submission with a more responsive progress bar. - Streamlined success message display logic based on auto-select conditions, enhancing user feedback during chat interactions.
…ing and functionality - Simplified border color logic in NavigationButton to enhance visual consistency. - Updated ConversationAccordion to use Tailwind CSS classes for border color, ensuring better integration with the styling framework. - Added filtering for locked conversations in ProjectChatRoute, improving chat context management. - Introduced alert messaging for scenarios with no selected transcripts, enhancing user feedback during chat interactions.
- Updated German, English, Spanish, French, Dutch localization files with new translations for various UI elements. - Added translations for "Auto-select" functionality and related messages to enhance user experience. - Improved existing translations for clarity and consistency across different languages. - Adjusted message IDs and context references to ensure accurate localization in the conversation components.
- Updated German, English, Spanish, French, and Dutch localization files with new translations for various UI elements. - Enhanced existing translations for clarity and consistency across different languages. - Adjusted message IDs and context references to ensure accurate localization in conversation components.
- Updated AutoSelectConversations to no longer require projectId as a prop, simplifying its usage. - Adjusted references in ConversationAccordion to reflect the change in prop requirements. - Cleaned up unused imports in ProjectChatRoute for improved code clarity.
WalkthroughThis update introduces a comprehensive "auto-select" feature for chat conversations, controlled by a new configuration flag and integrated throughout the chat UI. Key changes include new UI components for displaying source search progress and success, conditional rendering and styling based on the auto-select state, and expanded localization for multiple languages. The chat context and mutation API are extended to support the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ProjectChatRoute
participant AutoSelectConversations
participant API
participant ChatContextProgress
participant SourcesSearch
participant SourcesSearched
User->>ProjectChatRoute: Submits chat message
ProjectChatRoute->>AutoSelectConversations: Checks auto_select_bool & AUTO_SELECT_ENABLED
alt Auto-select enabled
ProjectChatRoute->>SourcesSearch: Show progress bar
ProjectChatRoute->>API: Await addChatMessage mutation
API-->>ProjectChatRoute: Mutation complete
ProjectChatRoute->>SourcesSearched: Show success message
ProjectChatRoute->>API: Refetch chat history
else Auto-select disabled
ProjectChatRoute->>API: Submit addChatMessage mutation (no progress bar)
API-->>ProjectChatRoute: Mutation complete
ProjectChatRoute->>API: Refetch chat history
end
ProjectChatRoute->>ChatContextProgress: Update progress bar based on context
Poem
Tip ⚡💬 Agentic Chat (Pro Plan, General Availability)
✨ 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:
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 (
|
ussaama
requested review from
ArindamRoy23 and
JorimTheuns
and removed request for
spashii
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (8)
echo/frontend/src/components/chat/SourcesSearched.tsx (1)
5-18: LGTM! Well-structured component with proper visual feedback.This component is tight and focused. The green styling with the check icon provides clear feedback to users. Nice use of
Transfor i18n support - thinking globally from day one!Consider extracting these styles to a shared component since they appear similar to the
SourcesSearchcomponent. DRY it up:- <Box className="rounded-bl-0 w-fit rounded-br-[0.75rem] rounded-tl-[0.75rem] rounded-tr-[0.75rem] border border-green-500 px-4 py-3"> + <SearchStatusContainer> <Group> <Box className="rounded-full bg-green-500 p-1"> <IconCheck size={16} color="white" /> </Box> <Text size="sm"> <Trans>Searched through the most relevant sources</Trans> </Text> </Group> - </Box> + </SearchStatusContainer>Where SearchStatusContainer is a shared styled component.
echo/frontend/src/components/chat/SourcesSearch.tsx (1)
9-18: LGTM! Clean implementation with visual feedback.This progress indicator is 🔥. The component provides clear visual feedback with the progress bar while maintaining consistent styling with
SourcesSearched.Same style duplication issue as mentioned in
SourcesSearched. Consider extracting the shared styles.Also, might want to add validation for progressValue:
const SourcesSearch = ({ progressValue }: SourcesSearchProps) => { + // Ensure progressValue is within valid range + const normalizedProgress = Math.max(0, Math.min(100, progressValue)); return ( <Box className="rounded-bl-0 w-fit rounded-br-[0.75rem] rounded-tl-[0.75rem] rounded-tr-[0.75rem] border border-green-500 px-4 py-3"> <Text size="sm" className="mb-2 text-center"> <Trans>Searching through the most relevant sources</Trans> </Text> - <Progress value={progressValue} color="green" size="sm" /> + <Progress value={normalizedProgress} color="green" size="sm" /> </Box> ); };echo/frontend/src/locales/nl-NL.po (1)
321-327: Minor optimization for "Auto-select sources" Dutch translation.The translation is functional but could be made more idiomatic with a slight restructuring.
-msgstr "Automatisch selecteren bronnen om toe te voegen aan het gesprek" +msgstr "Automatisch bronnen selecteren om toe te voegen aan het gesprek"echo/frontend/src/components/conversation/AutoSelectConversations.tsx (1)
1-49: Clean implementation of auto-select toggle functionalityThis component follows React best practices with:
- Proper hook usage with
useParams,useProjectChatContextand mutation hooks- Good state management with the auto_select_bool flag
- Smart event handling with stopPropagation to prevent bubbling
- Clean UI with descriptive text explaining the feature purpose
One minor suggestion would be to add loading/error states for mutation operations for better UX, but this might be handled at a higher level.
Consider adding loading state handling during mutations:
- <Checkbox - size="md" - checked={autoSelect} - color="green" - onClick={(e) => e.stopPropagation()} - onChange={(e) => handleCheckboxChange(e.currentTarget.checked)} - /> + <Checkbox + size="md" + checked={autoSelect} + color="green" + onClick={(e) => e.stopPropagation()} + onChange={(e) => handleCheckboxChange(e.currentTarget.checked)} + disabled={addChatContextMutation.isPending || deleteChatContextMutation.isPending} + />echo/frontend/src/components/conversation/ConversationAccordion.tsx (2)
113-114: Keep computed flags outside hot‑paths
isAutoSelectEnabledis derived for every checkbox render. With thousands of rows this results in two.find()calls per render (lines 106‑111). Stash the lookup result in auseMemotied toprojectChatContextQuery.datato shave off unnecessary cycles.
142-144: Mantine‑vs‑Tailwind colour mismatchMantine’s
Checkboxcolorprop expects a theme key such as"green"(✅) or a CSS literal like"#4ade80". Passingundefinedis fine, but when the flag istrueyou might want to use the design‑system shade ("teal" | "lime") instead of raw"green"to stay on‑brand.echo/frontend/src/routes/project/chat/ProjectChatRoute.tsx (2)
108-127: Duplicate mutation paths = brittle maintenanceWe fork between
mutateAsyncandmutate. The divergent logic is easy to desynchronise. Instead, alwaysawait mutateAsyncinside atry/catch; if you need fire‑and‑forget, wrap it invoidwhere the caller doesn’t care about the promise.- if (AUTO_SELECT_ENABLED && contextToBeAdded?.auto_select_bool) { - await addChatMessageMutation.mutateAsync({...}); - } else { - addChatMessageMutation.mutate({...}); - } + await addChatMessageMutation.mutateAsync({...});This keeps one code‑path and guarantees ordering.
395-411: Complex boolean reads like a regex – extract intentThe alert’s visibility condition nests two ternaries and three negations. Future you will thank present you for pulling it into a
const shouldShowNoContextAlert = …;and adding a comment.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (25)
echo/frontend/src/components/chat/ChatContextProgress.tsx(6 hunks)echo/frontend/src/components/chat/ChatHistoryMessage.tsx(2 hunks)echo/frontend/src/components/chat/Citations.tsx(1 hunks)echo/frontend/src/components/chat/SourcesSearch.tsx(1 hunks)echo/frontend/src/components/chat/SourcesSearched.tsx(1 hunks)echo/frontend/src/components/common/NavigationButton.tsx(3 hunks)echo/frontend/src/components/conversation/AutoSelectConversations.tsx(1 hunks)echo/frontend/src/components/conversation/ConversationAccordion.tsx(7 hunks)echo/frontend/src/components/conversation/ConversationLinks.tsx(2 hunks)echo/frontend/src/components/project/ProjectSidebar.tsx(0 hunks)echo/frontend/src/config.ts(1 hunks)echo/frontend/src/lib/api.ts(1 hunks)echo/frontend/src/lib/query.ts(2 hunks)echo/frontend/src/lib/types.d.ts(1 hunks)echo/frontend/src/locales/de-DE.po(50 hunks)echo/frontend/src/locales/de-DE.ts(1 hunks)echo/frontend/src/locales/en-US.po(36 hunks)echo/frontend/src/locales/en-US.ts(1 hunks)echo/frontend/src/locales/es-ES.po(53 hunks)echo/frontend/src/locales/es-ES.ts(1 hunks)echo/frontend/src/locales/fr-FR.po(50 hunks)echo/frontend/src/locales/fr-FR.ts(1 hunks)echo/frontend/src/locales/nl-NL.po(38 hunks)echo/frontend/src/locales/nl-NL.ts(1 hunks)echo/frontend/src/routes/project/chat/ProjectChatRoute.tsx(9 hunks)
💤 Files with no reviewable changes (1)
- echo/frontend/src/components/project/ProjectSidebar.tsx
🧰 Additional context used
🧬 Code Graph Analysis (6)
echo/frontend/src/components/chat/ChatContextProgress.tsx (1)
echo/frontend/src/config.ts (1)
AUTO_SELECT_ENABLED(31-31)
echo/frontend/src/lib/query.ts (1)
echo/frontend/src/lib/api.ts (2)
addChatContext(718-730)deleteChatContext(732-744)
echo/frontend/src/locales/en-US.ts (4)
echo/frontend/src/locales/de-DE.ts (1)
messages(1-1)echo/frontend/src/locales/fr-FR.ts (1)
messages(1-1)echo/frontend/src/locales/es-ES.ts (1)
messages(1-1)echo/frontend/src/locales/nl-NL.ts (1)
messages(1-1)
echo/frontend/src/components/conversation/AutoSelectConversations.tsx (1)
echo/frontend/src/lib/query.ts (3)
useProjectChatContext(1318-1324)useAddChatContextMutation(1326-1347)useDeleteChatContextMutation(1349-1361)
echo/frontend/src/locales/de-DE.ts (1)
echo/frontend/src/locales/en-US.ts (1)
messages(1-1)
echo/frontend/src/locales/fr-FR.ts (1)
echo/frontend/src/locales/en-US.ts (1)
messages(1-1)
🔇 Additional comments (55)
echo/frontend/src/config.ts (1)
31-31: LGTM! Flag implementation is solid.Clean addition of the auto-select feature flag following the established pattern. Environment variable check matches existing config style.
echo/frontend/src/lib/types.d.ts (1)
168-168: LGTM! Type definition is on point.The new
auto_select_boolproperty fits perfectly with the broader auto-select feature implementation. Boolean type is appropriate for this toggle functionality.echo/frontend/src/components/conversation/ConversationLinks.tsx (2)
7-7: LGTM! Prop addition looks clean.Nice job extending the component with an optional color prop. Follows React best practices.
Also applies to: 10-10
21-21: LGTM! Prop usage is optimal.Correctly passing the color prop to Mantine's Anchor component. Clean implementation.
echo/frontend/src/components/chat/ChatHistoryMessage.tsx (2)
3-3: LGTM! Import changes are minimal and focused.Added required imports for the new UI component. Box from Mantine and the new SourcesSearched component - shipping only what's needed.
Also applies to: 10-10
47-55: LGTM! Conditional rendering for search completion state.Smart implementation of the "sources searched" UI state. Clean conditional logic with explicit role and content checks. Flex styling matches the design system.
echo/frontend/src/components/common/NavigationButton.tsx (3)
19-19: LGTM! Nice touch with the borderColor prop.The addition of this optional string prop is a slick move that allows for dynamic customization of hover states. Super extensible design pattern here.
32-32: LGTM! Clean prop destructuring.Properly pulling in the new borderColor param with the other props. Solid.
59-59: LGTM! Elegant conditional styling implementation.This ternary for conditional styling is chef's kiss - it gracefully handles the borderColor prop while maintaining backward compatibility. Very smart use of string template literals to compose the Tailwind classes dynamically. 10x engineering right here.
echo/frontend/src/components/chat/SourcesSearched.tsx (2)
1-4: LGTM! Clean imports.Perfect import organization - you're grabbing just what you need and nothing more. Mantine core, icons and i18n - the holy trinity of a solid component foundation.
20-20: LGTM! Clean default export.Standard pattern for component exports. Ship it!
echo/frontend/src/components/chat/SourcesSearch.tsx (3)
1-4: LGTM! Imports on point.Clean, focused imports. You've got everything you need for i18n, UI components, and nothing more.
5-8: LGTM! Well-typed props.Nice, explicit typing for the progressValue prop. TypeScript FTW!
20-20: LGTM! Standard export pattern.Clean default export. Ship it!
echo/frontend/src/lib/api.ts (4)
719-722: LGTM! Perfect API function signature update.Smart addition of the optional auto_select_bool parameter. Backward compatible while supporting the new feature. That's how we roll.
726-728: LGTM! Clean payload addition.Properly adding the auto_select_bool to the request payload. Clean and precise.
732-736: LGTM! Consistent parameter addition.Maintaining consistency by adding the same parameter to deleteChatContext. DRY and clean.
740-742: LGTM! Properly passing the flag to the API.Correctly including the auto_select_bool in the request payload. Solid API integration work.
echo/frontend/src/locales/nl-NL.ts (1)
1-1: LGTM! Dutch locale file properly updated with auto-select feature strings.The Dutch locale file has been updated with all necessary translations for the new auto-select feature. All key strings are properly translated to maintain a consistent UX for Dutch users.
echo/frontend/src/locales/en-US.ts (1)
1-1: LGTM! English locale properly supports the new auto-select feature.The English locale has been updated with all necessary strings for the auto-select feature, including "Auto-select", "Auto-select sources to add to the chat", "Citing the following sources", and "Searched through the most relevant sources".
echo/frontend/src/components/chat/ChatContextProgress.tsx (5)
5-5: LGTM! Proper import of the feature flag.Clean import of the auto-select feature flag from config.
21-23: Smart optimization to handle the auto-select empty state.Early return pattern when auto-select is enabled but no conversations are present - keeps the UI clean in the auto-select workflow.
33-39: Well-factored color logic with proper encapsulation.Excellent extraction of the color logic into a dedicated function that handles the auto-select state. This keeps the component render logic clean while maintaining visual consistency.
53-53: LGTM! Proper application of dynamic color for locked conversations.The getColor function properly applies the green highlight for locked conversations when auto-select is enabled.
68-68: LGTM! Proper application of dynamic color for unlocked conversations.The getColor function properly applies the green highlight for unlocked conversations when auto-select is enabled, maintaining visual consistency.
echo/frontend/src/locales/de-DE.ts (1)
1-1: LGTM! German locale properly supports auto-select functionality.The German locale has been comprehensively updated with all necessary strings for the auto-select feature, including "Automatisch auswählen", "Quellen automatisch auswählen", and other related UI text.
echo/frontend/src/locales/de-DE.po (4)
244-251: Awesome auto-select translations added!New localization strings for the auto-select feature. The translations appropriately convey the functionality in German. Perfect addition to support the new auto-select conversations feature.
317-320: Citation source translations LGTM!The German translation for "Citing the following sources" works well and matches the functionality. Good localization work!
1007-1010: Clean translation for empty state!Great translation for the "No transcripts are selected for this chat" message. This provides appropriate feedback to German users when no transcripts are selected.
1424-1432: Source search status translations rock!The translations for source searching status messages look great. Both the active searching state and completed search state are appropriately translated into German.
echo/frontend/src/lib/query.ts (2)
1329-1330: Mutation signature update for auto-select support!The
useAddChatContextMutationnow correctly accepts the optionalauto_select_boolparameter and passes it to the API call. This enables the auto-select functionality to control context addition.
1352-1353: Auto-select support for delete mutation!The
useDeleteChatContextMutationhas been updated to match the API changes, accepting the optionalauto_select_boolparameter. This ensures consistent behavior between adding and removing chat contexts with the auto-select feature.echo/frontend/src/locales/es-ES.po (4)
248-254: LGTM! 🚀 Auto-select translations look solid.Translations for the auto-select feature are semantically on point and grammatically correct. Spanish conventions maintained perfectly.
321-323: LGTM! 🔥 Properly translated citation references.Spanish translation for citation UI is correctly implemented with appropriate sentence structure.
1011-1013: LGTM! 👌 Clean "no transcripts" message translation.Translation correctly uses "No hay transcripciones" construction which is idiomatic Spanish.
1428-1435: LGTM! 🧠 Source search translations properly conjugated.Perfect tense handling between "Buscó" (past) and "Buscando" (continuous present) maintains the original semantic distinction in Spanish.
echo/frontend/src/locales/nl-NL.po (5)
394-396: LGTM! 💯 Citation translations properly structured.The Dutch translation uses "Citeert" which correctly captures the action in third-person present tense.
1177-1179: LGTM! ✨ Clean translation for empty transcripts state.Properly uses the Dutch existential construction "Er zijn geen..." to indicate absence.
1631-1638: LGTM! 🔍 Source search translations properly implemented.Correct tense handling in Dutch for both completed search and in-progress search states.
2159-2159: LGTM!⚠️ Warning translation now added.Translation for "Warning" as "Waarschuwing" is now properly filled in where it was previously empty.
1809-1809: LGTM! 🎵 File formats translation completed.Comprehensive translation of all supported audio formats completed.
echo/frontend/src/locales/en-US.po (4)
265-271: New localization entries for auto-select feature look solidThese new entries support the auto-select functionality being introduced. Clean implementation with proper translation keys that match the component names in the codebase.
321-323: Looks good - citation support strings addedThe "Citing the following sources" string properly supports the new citation display component.
1011-1014: LGTM - empty state messagingGood UX to have proper messaging when no transcripts are selected.
1428-1436: Solid addition of source search status stringsThese new strings are well-formed and properly support the search progress/completion states in the UI.
echo/frontend/src/components/chat/Citations.tsx (1)
1-49: Clean component implementation with solid patternsThis is a well-structured React component that displays citation sources with a good UI hierarchy. Props for:
- Using TypeScript for type safety with the
CitationsPropsinterface- Clean conditional rendering with the remainder count
- Proper use of Mantine components for consistent styling
- Following i18n best practices with the
TranscomponentThe limiting to 3 visible sources with a "+N more" pattern is a good UX decision.
echo/frontend/src/locales/fr-FR.po (4)
248-254: French translations for auto-select feature LGTMSolid translations for the auto-select feature. "Sélection automatique" and "Sélectionner les sources à ajouter à la conversation" accurately represent the English originals.
321-323: French translation for citations looks good"Citation des sources suivantes" is a good translation for the citations feature.
1011-1014: Empty state messaging properly translatedClear French translation for the empty transcripts message.
1428-1436: Source searching status strings properly translatedBoth the "searching through" and "searched through" messages are well translated to maintain the same meaning as the English versions.
echo/frontend/src/components/conversation/ConversationAccordion.tsx (1)
630-635:⚠️ Potential issueEarly short‑circuit hides loading skeleton
When
conversationsQuery.isLoadingistrue,conversationsQuery.dataisundefined; the guardconversationsQuery.data?.length !== 0therefore yieldsfalse, so theLoadingOverlay(line 632) never shows. Consider dropping the length check or adding it after the loading overlay:- {inChatMode && AUTO_SELECT_ENABLED && conversationsQuery.data?.length !== 0 && ( + {inChatMode && AUTO_SELECT_ENABLED && (Likely an incorrect or invalid review comment.
echo/frontend/src/locales/fr-FR.ts (1)
1-1: LGTM for locale payloadTranslations look mechanically generated; no technical issues detected.
echo/frontend/src/locales/es-ES.ts (3)
1-1: LGTM! Added Spanish translations for the auto-select feature.The localization file properly includes the Spanish translation "Seleccionar automáticamente" for the auto-select feature introduced in this PR. This ensures the feature is fully accessible to Spanish-speaking users.
1-1: Nice work on the source search translations 🚀The Spanish translations for the source search functionality look solid:
- "Buscó en las fuentes más relevantes"
- "Buscando en las fuentes más relevantes"
- "Seleccionar fuentes para añadir al chat"
These translations maintain consistent terminology and properly convey the searching and selection states to Spanish users.
1-1: Ship it! The localization file contains all required translations.All translations related to the new auto-select functionality are present and correctly formatted in the Spanish locale file. The minified JSON format is production-ready and optimized for performance.
| // Submit the chat | ||
| handleSubmit(); | ||
|
|
||
| if(AUTO_SELECT_ENABLED && contextToBeAdded?.auto_select_bool){ | ||
| setShowProgress(true); | ||
| setProgressValue(0); | ||
| // Start progress animation | ||
| const interval = setInterval(() => { | ||
| setProgressValue((prev) => { | ||
| if (prev >= 95) { | ||
| clearInterval(interval); | ||
| return 95; // Cap at 95% to show it's still loading | ||
| } | ||
| return prev + 5; | ||
| }); | ||
| }, 500); | ||
| } |
There was a problem hiding this comment.
Progress animation never cleared on error or unmount
Besides the success path, an exception (network drop, 500, etc.) leaves the interval alive. Couple the timer to component lifecycle:
useEffect(() => {
return () => {
- // cleanup
+ if (progressTimer.current) clearInterval(progressTimer.current);
};
}, []);Committable suggestion skipped: line range outside the PR's diff.
There was a problem hiding this comment.
interval is being cleared out when more than 95%
There was a problem hiding this comment.
@ussaama LGTM, you're right that the interval clears when it hits 95%. But the bot was flagging two edge cases where it might leak:
- If the component unmounts before hitting 95%
- If an error happens before hitting 95%
You could store the interval ID in a ref and clean it up in both places:
const progressTimer = useRef<NodeJS.Timeout | null>(null);
// In your submit function
progressTimer.current = setInterval(() => {
// existing code
});
// In your catch block
if (progressTimer.current) clearInterval(progressTimer.current);
// Add cleanup effect
useEffect(() => {
return () => {
if (progressTimer.current) clearInterval(progressTimer.current);
};
}, []);But if you're cool with the current implementation, we can ship it. Your call!
| onResponse: async (_response) => { | ||
| setShowProgress(false); | ||
| setProgressValue(0); | ||
| setShowSuccessMessage(true); | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Interval continues ticking after success – potential memory leak
setInterval is started in customHandleSubmit, but here we only reset state. The timer reference is lost, so the callback keeps firing even after showProgress is false, causing wasted renders (and React warning on unmounted component). Capture the ID in a useRef and clear it both on success and in useEffect cleanup.
- const interval = setInterval(() => {
+ progressTimer.current = window.setInterval(() => {
...
- clearInterval(interval);
+ clearInterval(progressTimer.current);Committable suggestion skipped: line range outside the PR's diff.
There was a problem hiding this comment.
interval is being cleared out when more than 95%
There was a problem hiding this comment.
@ussaama You're totally right, the interval gets cleared when progress hits 95%! LGTM for the happy path.
If you wanna make it extra bulletproof, consider handling edge cases where the component unmounts before hitting 95% or the response comes back early. A useRef + useEffect cleanup would catch those rare scenarios, but your current implementation works for the main flow path.
ʕ•ᴥ•ʔ 🐰
* Add auto-select feature for conversation items in ConversationAccordion - Introduced AutoSelectConversationItem component to manage auto-select functionality for conversations. - Updated API calls to include auto_select_bool parameter for adding and deleting chat contexts. - Enhanced ProjectChatRoute to display progress and success messages when auto-select is active. - Refactored related hooks and types to support the new feature, improving user experience in conversation management. * Implement auto-select functionality across conversation components - Added AUTO_SELECT_ENABLED configuration to manage auto-select behavior. - Updated ChatContextProgress to conditionally render based on auto-select state. - Enhanced ConversationAccordion to utilize auto-select logic for conversation item interactions. - Refactored NavigationButton and ConversationLinks to support dynamic border colors based on auto-select status. - Replaced AutoSelectConversationItem with AutoSelectConversations for improved integration in the conversation flow. * Enhance ProjectChatRoute with source search and citation display - Integrated SourcesSearch component to show progress during source searching when auto-select is enabled. - Added SourcesSearched and Citations components to display searched sources and their citations upon successful search. - Updated conditional rendering logic for success messages based on auto-select state. * Refine auto-select logic in ProjectChatRoute - Updated conditional checks to ensure progress and success messages are displayed only when AUTO_SELECT_ENABLED is true and auto_select_bool is set. - Enhanced error handling to maintain consistent user feedback during chat submission process when auto-select is active. * Add SourcesSearched component to ChatHistoryMessage - Integrated SourcesSearched component to display when the message content is "searched" from the dembrane role. - Updated conditional rendering logic in ChatHistoryMessage to include the new component for specific message types. * Refactor ChatMessage component and comment out Citations in ProjectChatRoute - Updated ChatMessage component to adjust alignment logic for user role, ensuring proper message alignment. - Commented out the Citations component in ProjectChatRoute to prevent rendering issues while maintaining the structure for future use. * Update ChatHistoryMessage and ChatMessage components for improved layout - Refactored ChatHistoryMessage to use Box for layout when displaying the SourcesSearched component. - Adjusted alignment logic in ChatMessage to ensure proper message alignment for both user and dembrane roles. * Enhance ConversationAccordion with chat mode detection - Added logic to determine if the user is in chat mode based on the current pathname. - Updated rendering conditions to display auto-select functionality only when in chat mode, improving user experience in conversation management. * Refactor chat message submission and progress handling in ProjectChatRoute - Enhanced the chat message submission logic to use async mutation when auto-select is enabled, ensuring smoother message handling. - Improved progress indication during chat submission with a more responsive progress bar. - Streamlined success message display logic based on auto-select conditions, enhancing user feedback during chat interactions. * Refactor NavigationButton and ConversationAccordion for improved styling and functionality - Simplified border color logic in NavigationButton to enhance visual consistency. - Updated ConversationAccordion to use Tailwind CSS classes for border color, ensuring better integration with the styling framework. - Added filtering for locked conversations in ProjectChatRoute, improving chat context management. - Introduced alert messaging for scenarios with no selected transcripts, enhancing user feedback during chat interactions. * Update localization files for improved translations and context handling - Updated German, English, Spanish, French, Dutch localization files with new translations for various UI elements. - Added translations for "Auto-select" functionality and related messages to enhance user experience. - Improved existing translations for clarity and consistency across different languages. - Adjusted message IDs and context references to ensure accurate localization in the conversation components. * Update localization files for improved translations and context handling - Updated German, English, Spanish, French, and Dutch localization files with new translations for various UI elements. - Enhanced existing translations for clarity and consistency across different languages. - Adjusted message IDs and context references to ensure accurate localization in conversation components. * Refactor AutoSelectConversations component to remove projectId prop - Updated AutoSelectConversations to no longer require projectId as a prop, simplifying its usage. - Adjusted references in ConversationAccordion to reflect the change in prop requirements. - Cleaned up unused imports in ProjectChatRoute for improved code clarity.
2 participants
Auto Select functionality added for conversations
Summary by CodeRabbit
New Features
Enhancements
Localization
Bug Fixes / Style