💬 Chat Component (Headless)

Overview

The Chat component in PROCESIO Forms is a headless chat engine.

⚡ Headless means the Chat shows messages and captures input — but the logic is fully controlled by you.

The Chat:

• Displays messages
• Triggers events
• Waits for your Process / Form / JavaScript to respond

It does not automatically generate answers.

🧠 How It Works

Simple Flow

1. User sends a message
2. Chat triggers an event
3. You handle the event (usually with a Process)
4. The Process decides what to do
5. A response is sent back to the Chat
6. The user sees the answer

💡 Think of the Chat as the interface. Your Process is the brain.

🎯 Chat Events

The Chat component provides 3 control events:

🔹 onReady

Triggered when the Chat loads.

Use it to:

• Send a welcome message
• Load previous conversation
• Initialize session variables

🔹 onMessageFetch

Triggered when messages are loaded.

Use it to:

• Sync chat history
• Modify messages before display
• Load data from a database

🔹 onMessageSent (Main Event)

Triggered when a user sends a message.

This is where most logic happens.

Common uses:

• Trigger a Process
• Analyze user input
• Route logic
• Send a response

✅ In most cases, you will use onMessageSent.

🔌 How to Connect Chat to Logic

You can map Chat events to:

✅ Option 1 — Process (Recommended)

Best for:

• Business logic
• API calls
• Integrations
• Conditional routing
• AI logic

Example Flow

User sends message → onMessageSent → Process starts → Process checks message → Process sends response

📋 Option 2 — Another Form

Use this when:

• You want to open a form based on chat input
• You want structured data collection

Example

User types: Create request

→ Open Request Form

💻 Option 3 — JavaScript

Use JavaScript for:

• UI behavior
• Input validation
• Formatting messages
• Controlling visibility

⚠️ Keep business logic inside Processes whenever possible.

📦 Chat Data & Properties

The Chat component stores messages in:

value

This contains the list of chat messages.

Other useful properties:

• userId — identifies the user
• roomId — identifies the chat session
• loading — shows loading state
• typing — typing indicator
• visible — show/hide chat

These can be used in:

• Processes
• JavaScript
• Conditional logic

🔍 Using Filters in Processes

Inside your Process, you typically:

Step 1 — Filter the message

Example: Check if the message contains "help".

Filtering helps simplify your logic before making decisions.

🔀 Using Decisionals

After filtering, use Decisionals to route the conversation.

Example Logic

If message contains "status" → Call order API

If message contains "help" → Send help instructions

Else → Send default response

This is how you build conversation flows.

🏗 Typical Setup

1. Add Chat to your Form
2. Use onMessageSent
3. Trigger a Process
4. Filter the latest message
5. Use Decisionals
6. Send response back

That’s all you need for a working chat flow.

🚀 Common Use Cases

FAQ Bot

Automatically answer common questions.

Command-Based Chat

User types:

/status 1234

Process:

• Extract order ID
• Call backend API
• Return result

Guided Assistant

• Ask step-by-step questions
• Collect answers
• Create a request automatically

AI-Powered Chat

• Send user message to AI
• Receive generated response
• Return it to the Chat

✅ Best Practices

• Use onMessageSent for main logic
• Keep business logic in Processes
• Filter messages early
• Always include a fallback response
• Store chat history if needed

📌 Summary

The Chat component:

• Is headless
• Is event-driven
• Is fully customizable
• Works together with Processes

It is not a ready-made chatbot.

It is a flexible conversational engine powered by your workflows.

API

For support, please join our Discord community for further assistance and support.