Overview
The ChatBar is a prominent, chat-style input bar positioned in the top center of the TopBar. It serves as Centercode Agentic's primary interaction point, enabling open feedback for all users and AI agent interaction for builders and owners.
Features
- Role-based access (public, participant, builder, owner)
- Feedback mode with sentiment rating and file attachments
- Agent chat mode for builders/owners (coming soon)
- Keyboard shortcuts (Cmd/Ctrl+F, Cmd/Ctrl+A, Cmd/Ctrl+Shift+M)
Layout Availability
ChatBar is designed to slot into the center area of TopBar. It provides the primary interaction point for feedback submission and agent communication.
LayoutShell
Via TopBar center prop
LayoutFocus
Via TopBar center prop
LayoutWizard
Via TopBar center prop
LayoutCard
Not available in this layout
LayoutBlank
Not available in this layout
ChatBar Variants
Public User (Not Logged In)
The ChatBar adapts its behavior based on the user's role.
Participant
Builder
Owner
With Scope Context
In Project Scope (Phoenix)
When in a project scope, the scope picker is hidden in the feedback modal.
In Home Scope
Individual Modals
Each modal can be used independently or as part of the ChatBar.
ScopePicker Component
Projects Only Mode
Reusable scope selection component with two modes: projects-only and all.
All Scopes Mode
RatingSelector Component
Emoji-based sentiment rating selector. Click to select, click again to deselect.
Rating: None
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| Cmd/Ctrl + F | Open Feedback modal |
| Cmd/Ctrl + A | Open Agent Chat (builders/owners) |
| Cmd/Ctrl + Shift + M | Toggle mode (builders/owners) |
| Escape | Close modal |
Module Exports
The chat-bar module exports additional components for advanced use cases. Import from @/ui/components/chat-bar
| Component | Description |
|---|---|
ChatBar | Main trigger component with mode toggle (feedback/agent) |
AgentChatModal | AI agent chat interface with message history |
LoginPromptModal | Authentication prompt for public users |
ScopePicker | Scope selection dropdown (programs/projects) |
RatingSelector | 1-5 emoji sentiment rating selector |
Usage Example
import { ChatBar } from '@/ui/components';
import { ScopePicker } from '@/ui/components/chat-bar';
// In your TopBar or layout
// Feedback goes through the AI-powered insight pipeline:
// 1. User submits free-form feedback
// 2. AI extracts, classifies, and deduplicates insights
// 3. User reviews potential duplicates (if any)
// 4. Insights are created or merged automatically
<TopBar
chatBar={{
userRole: 'participant',
currentScope: { type: 'project', id: '123', name: 'Phoenix' },
programs: myPrograms,
onInsightsCreated: handleInsightsCreated,
}}
/>
// Or use ChatBar directly
<ChatBar
userRole="builder"
programs={programs}
defaultMode="feedback"
onInsightsCreated={handleInsightsCreated}
onSendAgentMessage={handleAgentMessage}
/>
// Use ScopePicker for custom scope selection
<ScopePicker
value={selectedScope}
onChange={setSelectedScope}
programs={programs}
mode="projects-only"
/>