Build a chatbot

In the block’s configuration panel, update the following fields:

• Conversation: @{chat}. This is the state variable that stores the chat conversation.
• Assistant initials: AI. This is the text that appears next to the assistant’s messages in the chat.
• User initials: YOU. This is the text that appears next to the user’s messages in the chat.
• Use markdown: yes. This configures the chatbot to parse markdown in the messages.
• Enable file upload: no. This disables the file uploads in the chatbot.
• Placeholder: Type your message here.... This is the text that appears in the input field when it is empty.

To start a new chat conversation when the agent first opens, add a UI trigger block to the canvas. In the block’s configuration panel, update the following fields:

• Component Id: select the Page component from the dropdown of UI blocks
• Event type: wf-page-open

Add a Start chat conversation block to the canvas, which will run after the page open event triggers. In the block’s configuration panel, update the following fields:

• Conversation state element: chat
• Model: Palmyra X5

You can also update the Temperature and Max output tokens fields to control the output of the chat conversation.

To add messages to the chat whenever a user types in the Chatbot component, add a UI trigger block to the canvas. In the block’s configuration panel, update the following fields:

• Component Id: select the Chatbot component from the dropdown of UI blocks
• Event type: wf-chatbot-message

Add an Add chat message block to the canvas after the chat message event triggers. In the block’s configuration panel, update the following fields:

• Conversation state element: chat
• Message: @{payload}. This references the payload variable set by the previous UI trigger. The payload variable created by the UI trigger contains the message from the user in the following format: {"message": "<user's message>", "role": "user"}.

Add a Generate chat response block to the canvas after the chat message event triggers. This passes the chat conversation to the Palmyra X5 model to generate a response. In the block’s configuration panel, update the following fields:

• Conversation state element: chat
• Use streaming: yes. This configures the block to stream the response from the model to the chat in real time, rather than waiting for the entire response to be generated before displaying it.

Once the response is generated, the block adds a new message to the chat conversation with the following format: {"message": "<assistant's response>", "role": "assistant"}.

This tutorial doesn’t show how to add additional tools to the chatbot, but this block is where you would add them, under the Tools section of the configuration panel. For example, you could connect to a Knowledge Graph to answer questions about data related to your business.