How to Set Up a Live Chat Feature Using FlutterFlow

Create a support_chats collection with fields: userId (String), agentId (String, nullable), status (String: 'waiting', 'active', 'resolved'), subject (String), createdAt (Timestamp), resolvedAt (Timestamp, nullable), lastMessageAt (Timestamp). Create a support_chats/{chatId}/messages subcollection with: senderId (String), text (String), timestamp (Timestamp), isAgent (Boolean). Create a canned_responses collection with: text (String), category (String: 'greeting', 'troubleshooting', 'closing'), shortcut (String), order (Integer). This model separates the chat lifecycle (status) from the messages for clean queue management.

On your main app pages, add a FloatingActionButton with a chat bubble Icon in the bottom-right corner. Show a Badge with unread message count using a Backend Query counting messages where isAgent == true and timestamp > lastReadTimestamp. On FAB tap, check if the user has an existing support_chats document with status 'waiting' or 'active'. If yes, open the existing chat. If no, create a new support_chats document with status 'waiting' and open it. The chat opens as a Bottom Sheet with a Column: header Row (subject Text + close IconButton), messages ListView (real-time Backend Query on messages subcollection ordered by timestamp ascending), and an input Row at the bottom with TextField and send IconButton.

Create an AgentDashboardPage (Conditional Visibility: user role == 'agent'). Add two tabs: Queue and My Chats. The Queue tab shows a ListView with Backend Query on support_chats where status == 'waiting', ordered by createdAt ascending. Each row shows: user avatar, subject, waiting time (calculated from createdAt), and an 'Accept' Button. On Accept tap: update the chat document agentId to currentUser.uid and status to 'active'. This removes it from other agents' queues. The My Chats tab shows a ListView filtered by agentId == currentUser.uid AND status == 'active'. Tap a chat to open the agent-side chat view.

Create an AgentChatPage with Route Parameter chatId. Display the same message ListView as the user view but with agent-specific additions. Above the input Row, add a horizontal ScrollView of canned response Containers from a Backend Query on canned_responses ordered by order. Each Container shows the shortcut text. On tap, insert the canned response text into the TextField. Below the canned responses, add the standard input Row: TextField and send IconButton. On send, create a message document with isAgent: true. Add a 'Resolve' Button in the header that updates the chat status to 'resolved', sets resolvedAt to now, and sends a closing message.

Create a Cloud Function autoAssignChat triggered on support_chats document creation (status == 'waiting'). After a 30-second delay (Cloud Tasks or scheduled), check if the chat still has status 'waiting' (no agent claimed it). If so, query users where role == 'agent' and find the one with the fewest active chats (least busy), then assign agentId and set status to 'active'. On the user side, show status indicators: 'Waiting for agent...' Text with a loading animation when status == 'waiting', and 'Connected to [agentName]' when status == 'active'. Use a real-time listener on the support_chats document to update the status display instantly.