Forms & Tasks Designerπ π§¨
Elements
Chat
16 min
π¬ 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 user sends a message chat triggers an event you handle the event (usually with a process) the process decides what to do a response is sent back to the chat 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 add chat to your form use onmessagesent trigger a process filter the latest message use decisionals 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 true 199,205 19950764933367,159 47161921518676,97 32887313547963 unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type 1 1 unhandled content type 1 1 unhandled content type 1 1 unhandled content type 1 1 unhandled content type 1 1 unhandled content type 1 1 unhandled content type 1 1 unhandled content type 1 1 unhandled content type 1 1 unhandled content type 1 1 unhandled content type 1 1 unhandled content type 1 1 unhandled content type 1 1 unhandled content type 1 1 unhandled content type 1 1 unhandled content type 1 1 unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type for support, please join our https //discord com/invite/cebukgjefv for further assistance and support
