Build a customer messaging platform

Visió general

Computer can spin up a complete customer messaging platform in one shot — an embeddable chat widget for your site plus an agent inbox your team can work from immediately. It wires real-time threads, canned responses, basic bot flows, and conversation status together, persisting everything locally so you can demo and iterate without any backend setup.

Resultat clau

Computer delivered a fully functional “Breeze”‑style messaging app with two main views: a Chat Widget Preview and an Agent Inbox Dashboard, both running in the same page. The widget view shows a floating, animated button in the bottom-right that opens a chat window with a pre-chat form (name and email), welcome message, user/agent bubbles with timestamps, typing indicators, and an emoji picker. When no agent is available, a simple bot flow greets the user, collects their email, and confirms follow-up.

The agent inbox view uses a three-panel layout: a left conversation list with unread badges, status filters (All, Open, Snoozed, Closed), and search; a center panel with the full message thread and timestamps; and a right panel with user details and notes. Canned responses appear when an agent types /, offering quick-reply templates for greeting, closing, follow-up, and resolution. Conversation status can be updated per thread, and messages sync between the widget and inbox views via an in-memory event system, with all conversations stored in browser storage for persistence. A dark-mode toggle rounds it out so support teams can demo or use it comfortably throughout the day.

Amplia

Amplia

Consells

• Clarify your embedding model – Add guidance like: “Optimize the widget markup and script so it can be dropped into any site via a single script tag and minimal CSS overrides.”
• Constrain canned responses – Specify tone and categories, for example: “Include /greeting, /troubleshoot, and /handoff templates, all written in a friendly but concise tone.”
• Tie statuses to SLAs – Tell Computer how status should behave, for example: “Automatically move threads from Snoozed to Open when the customer replies, and highlight any Open conversation with no agent response after 5 minutes.”