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 writer.ai.Conversation object.	-
Assistant initials	Text	-	-
User initials	Text	-	-
Use Markdown	Boolean	If active, the output will be sanitized; unsafe elements will be removed.	Yes No
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)

Low code usage

This component can be declared directly in Python, using backend-driven UI.

ui.Chatbot(content={
        "conversation": {}, # Union[Dict, str] 
        "assistantInitials": "", # str 
        "userInitials": "", # str 
        "useMarkdown": "no", # str [yes, no]
        "enableFileUpload": "no", # str [single, multiple, no]
        "placeholder": "", # str 
        "assistantRoleColor": "", # str 
        "userRoleColor": "", # str 
        "avatarBackgroundColor": "", # str 
        "avatarTextColor": "", # str 
        "accentColor": "", # str 
        "containerBackgroundColor": "", # str 
        "primaryTextColor": "", # str 
        "secondaryTextColor": "", # str 
        "separatorColor": "", # str 
        "buttonColor": "", # str 
        "buttonTextColor": "", # str 
        "cssClasses": "", # str 
    },
    handlers={
        "wf-chatbot-message": handle_event,
        "wf-chatbot-action-click": handle_event,
        "wf-file-change": handle_event,
    }
)

A function, in this example handle_event, should be implemented in your code to handle events.

def handle_event(state, payload, context, ui):
  pass

Reference

Explore this component’s source code on GitHub

Getting started

Core concepts

Custom code

Interface block reference

Blueprint block reference

Fields

Events

Low code usage

Reference

Getting started

Core concepts

Custom code

Interface block reference

Blueprint block reference

​Fields

​Events

​Low code usage

​Reference

Fields

Events

Low code usage

Reference