How to Implement a Chatbot for Customer Support in FlutterFlow

Create a `chat_sessions` collection with fields: userId (String), status (String: active/escalated/resolved), createdAt (Timestamp), lastMessageAt (Timestamp), escalatedAt (Timestamp, optional), agentId (String, optional). Add a `messages` subcollection under each session with fields: role (String: user/assistant/system), content (String), timestamp (Timestamp). The role field matches OpenAI's message format directly, making it easy to pass conversation history to the API. Register both collections in FlutterFlow's Data panel.

Create a ChatBot page. Add a Column filling the full screen. The main area is a ListView bound to a Backend Query on the current session's messages subcollection ordered by timestamp ascending, with the ListView set to reverse: true (this keeps the latest message at the bottom). For each message, use a Conditional layout: if role is 'user', align the Container to the right with a blue background and white text. If role is 'assistant', align left with a grey background and dark text. Add padding, rounded corners (topLeft, topRight, and the opposite bottom corner), and the message text inside. Below the ListView, pin a Row at the bottom with a multiline TextField and a Send IconButton. Add a typing indicator: when waiting for the bot response, show three animated dots in a left-aligned Container.

Create a callable Cloud Function named chatWithBot. It receives the sessionId and the user's message text. The function: (1) reads the last 10 messages from the session's messages subcollection, (2) constructs the OpenAI messages array starting with a system prompt containing your support knowledge base (FAQ answers, policies, product info), (3) appends the conversation history and the new user message, (4) calls the OpenAI Chat Completions API with model 'gpt-4o-mini' (cost-effective for support), (5) saves both the user message and assistant response to the messages subcollection, (6) returns the assistant's response text. Store the OpenAI API key in Firebase Functions config, never in client code.

1const functions = require('firebase-functions');
2const admin = require('firebase-admin');
3const OpenAI = require('openai');
4admin.initializeApp();
5
6const openai = new OpenAI({
7  apiKey: functions.config().openai.key,
8});
9
10const SYSTEM_PROMPT = `You are a helpful customer support assistant for [YourApp].
11Knowledge base:
12- Pricing: Free plan includes X. Pro plan is $Y/month.
13- Returns: 30-day return policy for unused items.
14- Shipping: Standard 5-7 days, Express 2-3 days.
15- Account: Users can reset passwords via Settings > Security.
16Rules:
17- Be concise and friendly.
18- If you cannot answer, say "Let me connect you with a support agent."
19- Never make up information not in the knowledge base.`;
20
21exports.chatWithBot = functions.https.onCall(async (data, context) => {
22  if (!context.auth) throw new functions.https.HttpsError(
23    'unauthenticated', 'Must be logged in');
24
25  const { sessionId, message } = data;
26  const db = admin.firestore();
27  const messagesRef = db
28    .collection(`chat_sessions/${sessionId}/messages`);
29
30  // Save user message
31  await messagesRef.add({
32    role: 'user',
33    content: message,
34    timestamp: admin.firestore.FieldValue.serverTimestamp(),
35  });
36
37  // Load last 10 messages for context window
38  const history = await messagesRef
39    .orderBy('timestamp', 'desc').limit(10).get();
40  const messages = [
41    { role: 'system', content: SYSTEM_PROMPT },
42    ...history.docs.reverse().map(d => ({
43      role: d.data().role,
44      content: d.data().content,
45    })),
46  ];
47
48  const completion = await openai.chat.completions.create({
49    model: 'gpt-4o-mini',
50    messages,
51    max_tokens: 300,
52  });
53
54  const reply = completion.choices[0].message.content;
55
56  // Save bot response
57  await messagesRef.add({
58    role: 'assistant',
59    content: reply,
60    timestamp: admin.firestore.FieldValue.serverTimestamp(),
61  });
62
63  // Update session timestamp
64  await db.collection('chat_sessions').doc(sessionId).update({
65    lastMessageAt: admin.firestore.FieldValue.serverTimestamp(),
66  });
67
68  return { reply };
69});

On the Send button tap, create an Action Flow: (1) Read the TextField value and clear it immediately for better UX. (2) Set a Page State variable isTyping to true — this shows the three-dot typing indicator in the ListView. (3) Call the chatWithBot Cloud Function via an API Call action, passing sessionId and the message text. (4) On success, set isTyping to false. The real-time listener on the messages subcollection (Single Time Query OFF) will automatically display both the user message and bot response as they are written to Firestore. If the API call fails, show a SnackBar error and set isTyping to false. Also check: if the bot's response contains 'connect you with a support agent', automatically trigger the escalation flow.

Track a Page State variable failedAttempts (Integer, starts at 0). When the bot's response contains phrases like 'I cannot help with that' or 'connect you with an agent', increment failedAttempts. When failedAttempts reaches 3 (or the user taps an Escalate button), update the chat_sessions document: set status to 'escalated' and escalatedAt to now. Display a system message: 'You have been connected to a support agent. Please wait for a response.' On the admin side, create a SupportQueue page listing sessions where status == 'escalated', ordered by escalatedAt ascending. Agents can claim a session (set agentId), view the full conversation history including bot messages, and reply directly. Agent messages are saved with role 'assistant' but a separate agentId field to distinguish from bot messages.