Chatbot - Writer AI Studio

Documentation Index

Fetch the complete documentation index at: /llms.txt

Use this file to discover all available pages before exploring further.

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	-	1. Single file 2. Multiple files 3. No
Enable image paste	Boolean	Allow users to paste images directly into the chat input using Ctrl/Cmd+V.	-
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)