7fd81f14a9
Drives the dock with a mock transport that returns a canned reply containing a rich table block — no network. Doubles as the design- review surface and satisfies the crema-manifest demo requirement. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
39 lines
1.5 KiB
TypeScript
39 lines
1.5 KiB
TypeScript
// Demo: the assistant dock driven by a mock transport. No network — the
|
|
// mock returns a canned reply with a rich table block so the card/table/
|
|
// tile/chart rendering (via @crema/agent-ui) is visible. Also the design-
|
|
// review surface for the dock.
|
|
|
|
import { AgentDock, type AgentDockTransport } from "../src"
|
|
|
|
const mockTransport: AgentDockTransport = {
|
|
async chat(_agentId, req) {
|
|
await new Promise((r) => setTimeout(r, 700))
|
|
return {
|
|
conversation_id: "demo-conversation",
|
|
message:
|
|
`You asked: **${req.user_message}**\n\n` +
|
|
"Here's a rich block rendered inline:\n\n" +
|
|
'```table { "id": "cities", "columns": [{"key":"city","label":"City"},{"key":"time","label":"Local time"}], "rows": [{"city":"Sydney","time":"09:00"},{"city":"London","time":"23:00"}] }\n```\n\n' +
|
|
"Buttons inside cards/tiles send their value as your next message.",
|
|
}
|
|
},
|
|
}
|
|
|
|
export default function AgentDockDemo() {
|
|
return (
|
|
<div className="p-8">
|
|
<h1 className="text-xl font-semibold">Assistant Dock</h1>
|
|
<p className="mt-2 text-sm text-[var(--muted-foreground)]">
|
|
The Sparkles button is fixed bottom-right. Open it and send a
|
|
message — the mock transport replies with a rich table block.
|
|
</p>
|
|
<AgentDock
|
|
transport={mockTransport}
|
|
resolveAgents={async () => [{ id: "demo", name: "Demo Assistant" }]}
|
|
getPageContext={() => ({ route: "/demo/agent-dock" })}
|
|
onExpand={() => alert("onExpand — the host app decides what this does")}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|