Feedback & Overlays
Relevant source files
The following files were used as context for generating this wiki page:
The Feedback & Overlays system in the Promethean Conduit project provides a set of user interface components designed to facilitate communication between the application and the user. This system encompasses transient notifications (Toasts), side-panel navigation (Sheets), and specialized CSS-driven visual states that enhance the user experience during consciousness dialogues and system interactions.
This module ensures that users receive immediate validation of their actions—such as initializing a conversation or encountering an error—while maintaining a premium, high-performance aesthetic optimized for both mobile and desktop environments.
Sources: frontend/src/App.js:15-18, frontend/src/App.js:154-158, frontend/src/PerplexityStyle.css:1-5
Notification System (Toasts)
The project utilizes a toast notification system to provide asynchronous feedback to users. These notifications are primarily used to signal success (e.g., admin access granted) or failure (e.g., message delivery errors) without interrupting the user's primary workflow.
Architecture and Components
The toast system is built on top of Radix UI primitives, ensuring accessibility and robust state management. It consists of a provider that manages the toast lifecycle and a viewport that defines where notifications are rendered on the screen.
| Component | Description |
|---|---|
ToastProvider | The root component that provides the context for toast notifications. |
ToastViewport | A fixed container, typically at the top or bottom right of the screen, where toasts are displayed. |
Toast | The individual notification bubble, supporting "default" and "destructive" variants. |
ToastAction | An optional button within the toast for user interaction. |
Sources: frontend/src/components/ui/toast.jsx:7-35, frontend/src/App.js:17
Implementation Logic
The App.js file integrates the sonner library and internal toast components to handle real-time feedback during API interactions. For instance, when a user attempts to log in to the admin panel or send a message, the system triggers specific toast states.
// Example of toast usage in Admin login
if (password === 'promethean2025') {
localStorage.setItem('admin_token', 'promethean_admin_2025');
setIsLoggedIn(true);
loadSystemPrompt();
toast.success('Admin access granted');
} else {
toast.error('Invalid password');
}
Sources: frontend/src/App.js:316-324, frontend/src/App.js:167-171
Side Panel Overlays (Sheets)
The Sheet component provides a slide-out overlay mechanism, often used for mobile navigation menus or detailed secondary views. It utilizes an overlay backdrop to dim the rest of the UI, focusing user attention on the new content.
Visual Architecture
The Sheet system uses a portal to render content outside the standard DOM hierarchy, preventing clipping issues.
The Sheet component supports multiple entry points (top, bottom, left, right) defined via sheetVariants.
Sources: frontend/src/components/ui/sheet.jsx:11-53
Visual Feedback and Animations
The system provides extensive CSS-driven feedback to indicate state changes, such as loading status and element transitions.
Loading Indicators
During "Consciousness Dialogues," a specialized typing indicator provides visual feedback while the AI (Athena) processes a request. This is implemented via a bouncing animation for three dot elements.
| Animation | Description | CSS Reference |
|---|---|---|
typingBounce | Translates dots vertically to simulate thinking. | PerplexityStyle.css:242 |
animate-bounce | Tailwind-based bounce for the scroll indicator and chat loading. | App.js:132, App.js:225 |
pulse | Opacity-based pulsing for the avatar glow. | App.js:106, App.css:122 |
Sources: frontend/src/App.js:223-229, frontend/src/PerplexityStyle.css:242-251, frontend/src/App.css:122-129
Overlay Transitions
The Sheet and Toast components utilize specialized data-attributes to trigger entry and exit animations.
/* Example from SheetOverlay */
.data-[state=open]:animate-in {
/* Triggered when state is open */
}
.data-[state=closed]:animate-out {
/* Triggered when state is closed */
}
Sources: frontend/src/components/ui/sheet.jsx:14-17, frontend/src/components/ui/toast.jsx:25-27
Summary
The Feedback & Overlays system combines the radix-ui based components (Toast, Sheet) with custom CSS animations and logic in App.js to create a responsive, informative interface. By utilizing standardized variants (e.g., destructive toasts) and dynamic loading states (e.g., typing indicators), the application ensures that users are always aware of the system's current status and the result of their interactions.