Context
The three suggested actions above the prompt bar are hardcoded strings that don't represent the agent's actual capabilities. Replace them with a horizontally-scrolling carousel seeded from a curated popular-actions list.
Actions:
- Instantly Swap ETH for SOL
- Set a limit order
- Tell me about FOX
- Set up a TWAP/DCA into ETH
- What's my balance on Arbitrum?
- Check trending tokens
- Send some of my assets to another wallet
Files
apps/agentic-chat/src/components/Chat.tsx:14-18 — current hardcoded suggestion array
apps/agentic-chat/src/components/Chat.tsx:118-134 — current render (3 buttons)
Approach
- Add
embla-carousel-react (~10KB, tree-shakeable — no shadcn carousel installed yet).
- Replace the 3-button grid with a horizontally-scrolling carousel of popular actions. Auto-advance slowly; pause on hover; swipeable on mobile.
TODO
Verification
bun run lint
bun run type-check
bun test
Visual QA: carousel auto-advances on load, pauses on hover, swipes on mobile (<768px).
Context
The three suggested actions above the prompt bar are hardcoded strings that don't represent the agent's actual capabilities. Replace them with a horizontally-scrolling carousel seeded from a curated popular-actions list.
Actions:
Files
apps/agentic-chat/src/components/Chat.tsx:14-18— current hardcoded suggestion arrayapps/agentic-chat/src/components/Chat.tsx:118-134— current render (3 buttons)Approach
embla-carousel-react(~10KB, tree-shakeable — no shadcn carousel installed yet).TODO
Verification
bun run lint bun run type-check bun testVisual QA: carousel auto-advances on load, pauses on hover, swipes on mobile (<768px).