Skip to main content
A chatbot component to build human-to-AI interactions. Connect it to an LLM by handling the wf-chatbot-message event, which is triggered every time the user sends a message. You can add actions to messages, which are buttons that trigger the wf-chatbot-action-click. See the stubs for more details.

​
Fields

NameTypeDescriptionOptions
ConversationObjectAn array with messages or a variable that contains your conversation as an object.-
Assistant initialsText--
User initialsText--
Enable markdownBooleanIf active, the output will be sanitized; unsafe elements will be removed.-
Enable file uploadText-
  1. Single file
  2. Multiple files
  3. No
PlaceholderText--
Assistant roleColor--
User roleColor--
AvatarColor--
Avatar textColor--
AccentColor--
Container backgroundColor--
Primary textColor--
Secondary textColor--
SeparatorColor--
ButtonColor--
Button textColor--
Custom CSS classesTextCSS classes, separated by spaces. You can define classes in custom stylesheets.-

​
Events

Triggered when the user sends a message.
def handle_message_simple(payload, state):

# payload contains a dict in the form { "role": "user", "message": "hello"}

state["conversation"] += [payload]
state["conversation"] += [{
    "role": "assistant",
    "content": "Hello human" if payload == "Hello" else "I don't understand"
}]

# Handle streaming by appending to the last message

import time
for i in range(10):
    conv = state["conversation"]
    conv[-1]["content"] += f" {i}"
    state["conversation"] = conv
    time.sleep(0.5)
Handle clicks on actions.
def handle_action_simple(payload, state):

# payload contains the "data" property of the action

if payload == "change_title":
    state["app_background_color"] = "red"

# Make an action available when adding a message

def handle_message_with_action(payload, state):
state["conversation"] += [payload]
state["conversation"] += [{
    "role": "assistant",
    "content": "I don't know, but check this out.",
    "actions": [{
        "subheading": "Resource",
        "name": "Surprise",
        "desc": "Click to be surprised",
        "data": "change_title"
    }]
}]
Triggered when files are uploaded
def handle_file_upload(state, payload):

# An array of dictionaries is provided in the payload
# The dictionaries have the properties name, type and data
# The data property is a file-like object

uploaded_files = payload
for i, uploaded_file in enumerate(uploaded_files):
    name = uploaded_file.get("name")
    file_data = uploaded_file.get("data")
    with open(f"{name}-{i}.jpeg", "wb") as file_handle:
        file_handle.write(file_data)