ECHO-321 Finish button loading and error handling in participant portal #196
Conversation
… ParticipantConversation component - Introduced a loading state to the finish button to prevent multiple submissions. - Added error handling to display a toast notification if finishing the conversation fails, improving user feedback and experience.
… conversation-related strings - Adjusted line numbers in localization files for German, English, Spanish, French, and Dutch to ensure accurate mapping to the ParticipantConversation component. - Added new error message for failed conversation finishing in all supported languages, enhancing user feedback. - Ensured consistency across localization files by updating related strings and their translations.
WalkthroughThis change introduces improved error handling and user feedback for finishing a conversation in the participant audio route. It adds a loading state to the "Finish" button, disables it during the finishing process, and displays an error toast on failure. Localization files are updated to include the new error message and adjust source line references. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI
participant handleFinish
participant API
participant Toast
User->>UI: Click "Finish" button
UI->>handleFinish: Call handleFinish()
handleFinish->>UI: set isFinishing = true
handleFinish->>API: Attempt finish conversation (async)
alt Success
API-->>handleFinish: Success
handleFinish->>UI: Navigate to finish URL
else Failure
API-->>handleFinish: Error
handleFinish->>Toast: Show error toast
handleFinish->>UI: set isFinishing = false
end
Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes found. Suggested reviewers
✨ 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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
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 (11)
echo/frontend/src/locales/de-DE.po(37 hunks)echo/frontend/src/locales/de-DE.ts(1 hunks)echo/frontend/src/locales/en-US.po(37 hunks)echo/frontend/src/locales/en-US.ts(1 hunks)echo/frontend/src/locales/es-ES.po(37 hunks)echo/frontend/src/locales/es-ES.ts(1 hunks)echo/frontend/src/locales/fr-FR.po(37 hunks)echo/frontend/src/locales/fr-FR.ts(1 hunks)echo/frontend/src/locales/nl-NL.po(37 hunks)echo/frontend/src/locales/nl-NL.ts(1 hunks)echo/frontend/src/routes/participant/ParticipantConversation.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: ci-check-server
- GitHub Check: ci-check-frontend
🔇 Additional comments (16)
echo/frontend/src/locales/en-US.ts (1)
1-1: LGTM - Localization formatting only.
This update is a pure reformat of the English locale to stay in sync with other locales—no semantic changes detected.echo/frontend/src/locales/fr-FR.po (2)
751-754: LGTM! Solid French translation for the new error handling.The translation is technically sound and maintains consistency with the existing formal tone throughout the localization file. Perfect addition for the finish button error flow.
67-67: Standard i18n maintenance - line reference updates look clean.These line number updates are the expected result of source code changes. The automated i18n extraction process correctly updated all references while preserving the actual translations. Ship it! 🚀
Also applies to: 75-75, 86-88, 162-162, 232-234, 330-330, 367-367, 413-413, 449-449, 465-465, 474-474, 478-478, 591-593, 801-803, 882-882, 923-923, 932-932, 991-991, 1029-1029, 1192-1192, 1208-1208, 1249-1249, 1258-1258, 1278-1278, 1319-1319, 1360-1360, 1368-1368, 1427-1427, 1431-1431, 1445-1445, 1481-1483, 1563-1563, 1689-1689, 1734-1734, 1754-1756, 1800-1802, 1810-1810, 1814-1814, 1867-1869, 2104-2104
echo/frontend/src/locales/de-DE.ts (1)
1-1: LGTM – German locale reformat only, no semantic changes and new finish-error translation included.echo/frontend/src/locales/es-ES.ts (1)
1-1: LGTM – Spanish locale reformat only, no semantic changes and new finish-error translation included.echo/frontend/src/locales/fr-FR.ts (1)
1-1: LGTM – French locale reformat only, no semantic changes and new finish-error translation included.echo/frontend/src/locales/en-US.po (1)
784-787: LGTM – Added finish‐error entry.
Themsgid "Failed to finish conversation. Please try again."and itsmsgstrare present with the correct source reference toParticipantConversation.tsx:250.echo/frontend/src/locales/de-DE.po (2)
747-750: ✅ LGTM – New error translation
The added msgid"Failed to finish conversation. Please try again."and its German msgstr
"Fehler beim Beenden des Gesprächs. Bitte versuchen Sie es erneut."correctly reflect the new error toast.
797-801: Skip: “Finish” label reference update
The translation of “Finish” to “Beenden” remains accurate, and only the source references were bumped.echo/frontend/src/locales/es-ES.po (2)
751-754: LGTM! Clean Spanish translation for the error handling.The new error message translation is solid - "Error al finalizar la conversación. Por favor, inténtalo de nuevo." maintains the right tone and formality level. Consistent with existing error patterns in the codebase. Ship it! 🚀
67-593: Line number reference updates look clean.All the source line reference updates throughout the file are expected maintenance when the source code changes. The automated tooling handled the metadata sync properly. These don't need detailed review - just keeping the translation pipeline healthy.
echo/frontend/src/locales/nl-NL.po (2)
67-67: LGTM on the line number updates!These are routine maintenance changes that happen when source code evolves. The gettext extraction process correctly updated all the file references to match the new line numbers after code additions in the codebase. Solid engineering practice to keep the localization references in sync.
Also applies to: 75-75, 98-100, 190-190, 272-275, 440-440, 522-522, 538-538, 547-547, 551-551, 626-626, 704-706, 922-924, 970-970, 1028-1028, 1077-1077, 1087-1087, 1149-1149, 1187-1187, 1358-1358, 1378-1378, 1441-1441, 1461-1461, 1506-1507, 1547-1547, 1555-1555, 1626-1626, 1648-1648, 1684-1686, 1766-1766, 1905-1905, 1950-1950, 2016-2017, 2026-2026, 2030-2030, 2091-2093, 2140-2140, 2361-2361
872-875: LGTM - clean error message translation!The new Dutch translation for the conversation finish error is spot-on. "Fout bij het voltooien van het gesprek. Probeer het opnieuw." perfectly captures the English meaning with appropriate Dutch phrasing. The tone is professional yet user-friendly - exactly what you want when a user hits an error state. This aligns perfectly with the PR's goal of improving error handling UX in the participant portal.
echo/frontend/src/routes/participant/ParticipantConversation.tsx (3)
103-103: LGTM! Clean state management.Solid addition of the
isFinishingstate variable. Follows React patterns perfectly.
244-252: LGTM! Proper async error handling implemented.The try-catch implementation is clean and follows best practices:
- Sets loading state before async operation
- Proper error logging and user feedback via toast
- State cleanup on error to prevent stuck UI
This is exactly how async operations should be handled in React.
530-531: LGTM! Excellent UX improvement.Adding
loadinganddisabledprops tied toisFinishingstate prevents double-clicks and provides clear user feedback. This is textbook React UX pattern implementation.
…al (#196) * Add loading state and error handling to finish conversation button in ParticipantConversation component - Introduced a loading state to the finish button to prevent multiple submissions. - Added error handling to display a toast notification if finishing the conversation fails, improving user feedback and experience. * Update localization files for various languages to reflect changes in conversation-related strings - Adjusted line numbers in localization files for German, English, Spanish, French, and Dutch to ensure accurate mapping to the ParticipantConversation component. - Added new error message for failed conversation finishing in all supported languages, enhancing user feedback. - Ensured consistency across localization files by updating related strings and their translations.
Summary by CodeRabbit
New Features
Bug Fixes
Style
Documentation