Build a support chat widget with Tailwind CSS: a floating action bubble in the bottom-right corner that opens a chat panel with a header (agent name, online dot), a message thread where agent messages are left-aligned cards and the visitor's are right-aligned accent cards, and canned quick-reply chips under the last message. Include a composer with send button, a typing indicator that appears before canned replies, and an unread badge on the bubble when a reply arrives while closed.
提示词保持英文原文——直接粘贴进 Claude、Cursor、v0 或任何 AI 编程工具即可使用。