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	Text	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

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)

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

Layout

Content

Input

Other

Embed

Fields

Events

Low code usage

Reference

Layout

Content

Input

Other

Embed

​Fields

​Events

​Low code usage

​Reference

Fields

Events

Low code usage

Reference