refactor: Major overhaul of Qiscus Chat SDK JS Sample with modern UX, error handling, and code cleanup #3
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
- Introduced a new `page.js` service to standardize page creation with `createPage` function. - Updated `create-group.js`, `login.js`, `profile.js`, `room-info.js`, `users.js` to utilize the new page creation pattern. - Improved event binding management to ensure idempotency and separation of concerns between rendering and mounting. - Enhanced user experience by organizing event handlers and reducing redundancy in code.
…nd a new user/chat creation UI.
…ling and a click handler to start new chats.
…, shadows, and interactive effects.
… styling and logic.
…clarify its description.
…t' across multiple pages.
…icated helper module.
…r comment pagination.
…iscus.selected` and improving avatar display with placeholders.
…s with toast messages.
…tar, and participant management.
…mes, and refine overflow message.
… with new styling, confirmation dialog, and robust state clearing, removing it from the chat list toolbar.
…pants and contacts when images fail to load.
…a manual user ID/email input.
…nnel room creation method.
…tifications, and comprehensive error handling.
…nd immediate stop on message send.
… instead of DOM data attributes.
Refactor/brandnew chatsdk
Comment out Realtime Check and Sync Event config display items that are not actively used in the sample application.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary
This PR introduces a comprehensive refactor and enhancement of the Qiscus Chat SDK JavaScript sample application. The changes focus on improving user experience, implementing robust error handling, modernizing the UI, and cleaning up the codebase by removing unused dependencies.
Changes
✨ New Features
Landing Page with SDK Status Display - Added a new landing page showing real-time SDK configuration and connection status
Dynamic App ID Configuration - Users can now configure the App ID through the UI with conditional Qiscus initialization
Toast Notification System - Implemented a global toast notification system replacing native browser alerts
Typing Indicator - Implemented user's own typing indicator with inactivity timeout and immediate stop on message send
Avatar Fallback System - Added avatar image error handling with SVG placeholders and a dedicated helper module
Floating Action Button (FAB) - Added FAB to the chat list page for starting new chats
Participant Modal - Replaced contact chooser with a modal for adding participants via manual user ID/email input
Clickable Links - Made links in messages clickable
🔧 Improvements
Enhanced Login Flow - Added input validation, loading states, success notifications, and comprehensive error handling
Improved Logout - Centralized logout functionality in profile page with confirmation dialog and robust state clearing
Better Room Management - Added validation and toast notifications for room name, avatar, and participant management
Optimized Room Info Loading - Leveraged qiscus.selected for better participant loading and avatar display
Comment Pagination - Implemented loading state, spam protection, and error handling
SDK Configuration Display - Added broker URL and syncOnConnect display with proper descriptions
🎨 Styling Enhancements
Improved widget button and container styling with new gradients, shadows, and interactive effects
Enhanced CSS across chat list, login, room info, toolbar, and users pages
New chat-list-page.css with 783 lines of modern styling
🔨 Refactoring
Refactored page modules to use a consistent page creation pattern (
js/service/page.js
)
Use fetched room data from qiscus.getRoomById for routing instead of DOM data attributes
Reduced participant name display limit to 2 with refined overflow message
🧹 Cleanup
Removed ~67,000 lines of unused code including bundled SDK files:
js/lib/qiscus-sdk-core.js (~29,000 lines)
js/lib/qiscus-sdk-javascript.umd.js (~40,000 lines)
Various source maps and unused library files
🐛 Bug Fixes
Fixed room avatar source attribute from avatar_url to avatar