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

Guides

Tutorials

Advanced

Component reference

Fields

Events

Low code usage

Reference

Getting started

Guides

Tutorials

Advanced

Component reference

​Fields

​Events

​Low code usage

​Reference

Fields

Events

Low code usage

Reference