Agent Chat Block
EntitySelector sidebar + ConversationPanel composed into a full agent chat experience.
Agents
Knowledge Architect
Can you analyze our sales pipeline and suggest which deals to prioritize?
I'll analyze your pipeline using the **optimal-stopping algorithm** and **SPCL scoring**. Based on 4 active deals: 1. **Acme Enterprise Deal** ($150K, 75% probability) — Highest expected value. In negotiation stage with confirmed budget. Prioritize closing. 2. **TechStart Pilot** ($45K, 50% probability) — Good pilot opportunity. Demo scheduled. Medium priority. 3. **Global Ventures Partnership** ($200K, 30% probability) — High value but early stage. Qualified only. Monitor. 4. **Enterprise Co Expansion** ($55K, 20% probability) — Low probability lead. Defer until pipeline clears.
Run the sales-rfp workflow for the Acme deal. I want a full proposal.
Starting the **sales-rfp-workflow** for Acme Enterprise Deal. Workflow stages: 1. Research & Discovery — gathering company intel 2. Needs Analysis — matching capabilities to requirements 3. Proposal Generation — drafting solution + pricing 4. Quality Review — scoring confidence and completeness I'll delegate to specialized agents at each stage. The Knowledge Architect will handle research, and the UI Architect will format the deliverable. Estimated cost: ~$0.12 | Estimated time: 45 seconds
What agents are available on my team?
Your team has **4 active agents**: | Agent | Role | Model | Key Capability | |-------|------|-------|----------------| | Knowledge Architect | Documentation & Diagrams | Opus 4.5 | diagram_creation | | Orchestrator | Team Coordination | Opus 4.5 | team_orchestration | | Navigator | Strategy & Questions | Sonnet 4.5 | socratic_questioning | | UI Architect | Component Design | Sonnet 4.5 | component_design | Each agent has specialized capabilities and can be delegated tasks through the A2A protocol. Want me to show capabilities for a specific agent?
Data Contracts
MessageRowData
| Prop | Type | Default | Description |
|---|---|---|---|
| id* | string | — | Unique message ID |
| role* | 'user' | 'assistant' | — | Sender role |
| content* | string | — | Message text |
| agentName | string | — | Agent display name |
| isStreaming | boolean | — | Show streaming cursor |
EntityItem
| Prop | Type | Default | Description |
|---|---|---|---|
| id* | string | — | Unique entity ID |
| name* | string | — | Display name |
| description | string | — | Short description |
| badges | string[] | — | Capability tags |
Copy This Block
import { EntitySelector } from '@stackmates/ui-interactive/molecules';
import { ConversationPanel } from '@stackmates/ui-interactive/organisms';
import { CostDisplay } from '@stackmates/ui-interactive/atoms';
<div className="flex h-[500px]">
<div className="w-64 shrink-0 border-r p-3">
<EntitySelector entities={agents} selectedId={id} onSelect={setId} />
<CostDisplay costUsd={cost} tokens={tokens} />
</div>
<div className="flex-1">
<ConversationPanel
messages={messages}
onSend={handleSend}
headerTitle={agentName}
/>
</div>
</div>