Chatbot

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

Name	Type	Description	Options
Conversation	Object	An array with messages or a variable that contains your conversation as an object.	-
Assistant initials	Text	-	-
User initials	Text	-	-
Enable markdown	Boolean	If active, the output will be sanitized; unsafe elements will be removed.	-
Enable file upload	Text	-	Single file Multiple files No
Placeholder	Text	-	-
Assistant role	Color	-	-
User role	Color	-	-
Avatar	Color	-	-
Avatar text	Color	-	-
Accent	Color	-	-
Container background	Color	-	-
Primary text	Color	-	-
Secondary text	Color	-	-
Separator	Color	-	-
Button	Color	-	-
Button text	Color	-	-
Custom CSS classes	Text	CSS classes, separated by spaces. You can define classes in custom stylesheets.	-

Events

wf-chatbot-message

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)

wf-chatbot-action-click

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"
    }]
}]

wf-file-change

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)

Getting started

Tutorials

Core concepts

User interface

Blueprints

Custom code

Interface block reference

Blueprint block reference

Fields

Events

Getting started

Tutorials

Core concepts

User interface

Blueprints

Custom code

Interface block reference

Blueprint block reference

​Fields

​Events

Fields

Events