Nicholai
5305c1839c
- Move new chat button to left side, bookmark button stays on right - Add max-width constraint (75%) to user messages with proper text wrapping - Remove right-align text from user message frames (keep bubbles on right) - Add overflow handling for code blocks in messages - Change scrollbar color from orange to gray in light and dark modes - Fix pill loading animation flicker by initializing pinnedAgents from localStorage - Add 0.2s base delay to pill animations for staggered reveal - Improve Create new button animation: longer duration (0.6s), bouncy scale sequence, easeInOut easing
15 KiB
15 KiB
Agent Forge - System Flow Diagram
High-Level Flow
┌─────────────┐
│ User │
│ Browser │
└──────┬──────┘
│
│ 1. "Help me create an agent"
│
▼
┌──────────────────────────────────────────────────────────┐
│ ChatInterface │
│ • Sends message to /api/chat │
│ • Receives tool call in response │
│ • Renders AgentForgeCard │
└──────┬───────────────────────────────────────────────────┘
│
│ 2. POST /api/chat
│ { message, agentId: "agent-1" (Morgan) }
│
▼
┌──────────────────────────────────────────────────────────┐
│ /api/chat Route │
│ • Forwards to Morgan's n8n webhook │
│ • Parses streaming response │
│ • Detects tool_call with name="create_agent_package" │
│ • Returns { toolCall: {...} } │
└──────┬───────────────────────────────────────────────────┘
│
│ 3. Webhook request
│
▼
┌──────────────────────────────────────────────────────────┐
│ Morgan's n8n Workflow │
│ • Runs agent design conversation │
│ • Collects requirements │
│ • Generates complete system prompt │
│ • Emits tool call with payload: │
│ { │
│ agentId: "custom-uuid", │
│ displayName: "Agent Name", │
│ systemPrompt: "# Web Agent Bundle...", │
│ ...metadata │
│ } │
└──────┬───────────────────────────────────────────────────┘
│
│ 4. Tool call response
│
▼
┌──────────────────────────────────────────────────────────┐
│ ChatInterface │
│ • Displays AgentForgeCard with payload │
│ • User chooses action: │
│ - Use now │
│ - Pin for later │
│ - Share │
└──────┬───────────────────────────────────────────────────┘
│
├──────────────────────────────────────────────────┐
│ │
│ USE NOW │ PIN
│ │
▼ ▼
┌────────────────────────────────┐ ┌────────────────────────────┐
│ Register with Backend │ │ Save to LocalStorage │
│ │ │ │
│ POST /api/agents/create │ │ Key: "pinned-agents" │
│ { │ │ Value: [ │
│ agentId, │ │ { │
│ systemPrompt, │ │ agentId, │
│ metadata │ │ displayName, │
│ } │ │ systemPrompt, │
│ │ │ ... │
│ ▼ │ │ } │
│ │ │ ] │
│ n8n Registration Webhook │ │ │
│ • Stores prompt in DB │ │ ▼ │
│ • Returns promptToken │ │ │
│ │ │ Confirmation message │
│ ▼ │ │ "✓ Agent pinned" │
│ │ │ │
│ Switch to custom agent │ └────────────────────────────┘
│ Update UI │
│ Timeline marker │
│ "✓ Now chatting with X" │
└────────────────────────────────┘
Using a Custom Agent
┌─────────────┐
│ User │
└──────┬──────┘
│
│ 1. Starts chat with custom agent
│ (from "Use now" or pinned drawer)
│
▼
┌──────────────────────────────────────────────────────────┐
│ ChatInterface │
│ • Calls handleUseAgentNow() or handleSelectPinnedAgent()│
│ • Registers agent (if needed) │
│ • Switches active agent │
└──────┬───────────────────────────────────────────────────┘
│
│ 2. User sends message
│
▼
┌──────────────────────────────────────────────────────────┐
│ POST /api/chat │
│ { message, agentId: "custom-xyz", ... } │
└──────┬───────────────────────────────────────────────────┘
│
│ 3. Routes to custom webhook
│ (detects agentId.startsWith("custom-"))
│
▼
┌──────────────────────────────────────────────────────────┐
│ n8n Custom Agent Webhook │
│ • Receives message │
│ • Retrieves systemPrompt by agentId │
│ • Uses as system message for LLM │
│ • Returns response │
└──────┬───────────────────────────────────────────────────┘
│
│ 4. Response (standard format)
│
▼
┌──────────────────────────────────────────────────────────┐
│ ChatInterface │
│ • Displays assistant message │
│ • Continues conversation │
└──────────────────────────────────────────────────────────┘
Pinned Agents Flow
┌─────────────┐
│ User │
└──────┬──────┘
│
│ 1. Clicks bookmark icon
│
▼
┌──────────────────────────────────────────────────────────┐
│ PinnedAgentsDrawer Opens │
│ │
│ • Reads from localStorage["pinned-agents"] │
│ • Displays reorderable list │
│ • Each card shows: │
│ - Icon, name, summary │
│ - Tags and note │
│ - "Start chat" button │
│ - Remove button │
│ │
│ User Actions: │
│ ├─ Drag to reorder → saves to localStorage │
│ ├─ Click "Start chat" → loads agent & starts session │
│ └─ Click remove → deletes from localStorage │
└─────────────────────────────────────────────────────────┘
LocalStorage Structure
// Pinned agents array
localStorage["pinned-agents"] = [
{
agentId: "custom-aurora-123",
displayName: "Aurora Researcher",
summary: "Synthesizes insights with citations",
tags: ["research", "citations"],
recommendedIcon: "🌌",
whenToUse: "Use for research tasks...",
systemPrompt: "# Web Agent Bundle Instructions\n...",
pinnedAt: "2025-11-15T10:30:00.000Z",
note: "Great for academic research"
},
// ... more agents
]
// Per-agent session (existing)
localStorage["chat-session-custom-aurora-123"] = "session-custom-aurora-123-1731672000000-abc123"
// Per-agent messages (existing)
localStorage["chat-messages-custom-aurora-123"] = [
{
id: "123",
role: "user",
content: "Help me research...",
timestamp: "2025-11-15T10:31:00.000Z"
},
// ... more messages
]
n8n Webhook Payloads
1. Morgan's Tool Call Response
{
"type": "tool_call",
"name": "create_agent_package",
"payload": {
"agentId": "custom-aurora-researcher",
"displayName": "Aurora Researcher",
"summary": "Synthesizes multi-source insights with citations",
"tags": ["research", "analysis", "citations"],
"systemPrompt": "# Web Agent Bundle Instructions\n\nYou are now operating as...\n\n[FULL PROMPT HERE - 1000s of lines]",
"hints": {
"recommendedIcon": "🌌",
"whenToUse": "Use when you need comprehensive research with proper citations"
}
}
}
2. Registration Webhook Request
{
"agentId": "custom-aurora-researcher",
"systemPrompt": "# Web Agent Bundle Instructions...",
"metadata": {
"displayName": "Aurora Researcher",
"summary": "Synthesizes multi-source insights with citations",
"tags": ["research", "analysis", "citations"],
"recommendedIcon": "🌌",
"whenToUse": "Use when you need comprehensive research...",
"createdAt": "2025-11-15T10:30:00.000Z"
}
}
3. Registration Webhook Response
{
"success": true,
"agentId": "custom-aurora-researcher",
"promptToken": "encrypted-token-or-agentId",
"message": "Agent registered successfully"
}
4. Custom Agent Chat Request
{
"message": "What are the latest trends in AI research?",
"sessionId": "session-custom-aurora-researcher-1731672000000-abc123",
"agentId": "custom-aurora-researcher",
"timestamp": "2025-11-15T10:35:00.000Z",
"images": [] // optional
}
5. Custom Agent Chat Response
{
"response": "Based on recent research, the top AI trends include...",
"citations": ["Source 1", "Source 2"] // optional custom fields
}
Component Hierarchy
ChatInterface
├── Header Actions
│ ├── Bookmark Button → opens PinnedAgentsDrawer
│ └── New Chat Button
│
├── Message Feed
│ ├── User Messages
│ ├── Assistant Messages
│ ├── Loading Indicator
│ └── AgentForgeCard (when tool call received)
│ ├── Loading Animation (3 steps)
│ ├── Metadata Display
│ │ ├── Icon Badge
│ │ ├── Display Name
│ │ ├── Summary
│ │ ├── Tags
│ │ └── Status Badge
│ └── Action Buttons
│ ├── Use Now
│ ├── Pin (opens dialog)
│ └── Share
│
├── Hero Empty State
│ ├── Greeting Animation
│ ├── Agent Chips
│ │ ├── Regular agents
│ │ └── "+ Create new" chip
│ └── Prompt Cards
│
├── Composer
│ ├── Textarea
│ ├── Agent Dropdown
│ ├── Send Button
│ └── Image Attach Button (if enabled)
│
└── PinnedAgentsDrawer (modal)
├── Header (count + close)
├── Agent List (reorderable)
│ └── Agent Cards
│ ├── Icon + Name
│ ├── Summary
│ ├── Tags
│ ├── User Note
│ ├── "Start chat" Button
│ └── Remove Button
└── Empty State (if no agents)
State Management
// ChatInterface state
const [messages, setMessages] = useState<Message[]>([])
const [agentPackage, setAgentPackage] = useState<AgentPackagePayload | null>(null)
const [showPinnedDrawer, setShowPinnedDrawer] = useState(false)
// When tool call received:
if (data.toolCall?.name === "create_agent_package") {
setAgentPackage(data.toolCall.payload)
// AgentForgeCard renders automatically
}
// When user clicks "Use now":
handleUseAgentNow(agentId)
→ POST /api/agents/create
→ onAgentSelected(customAgent)
→ setAgentPackage(null)
→ Timeline marker added
// When user clicks "Pin":
handlePinAgent(package, note)
→ Save to localStorage["pinned-agents"]
→ setAgentPackage(null)
→ Confirmation message added
// When user clicks bookmark:
setShowPinnedDrawer(true)
→ PinnedAgentsDrawer opens
→ Reads from localStorage
→ Displays agents
// When user starts chat from drawer:
handleSelectPinnedAgent(agent)
→ POST /api/agents/create (if needed)
→ onAgentSelected(customAgent)
→ setShowPinnedDrawer(false)
Last Updated: 2025-11-15
For: Multi-Agent Chat Interface - Agent Forge Feature