Skip to content

Chatbot

A chatbot component to build human-to-AI interactions.

Connect it to an LLM by handling the ss-chatbot-message event, which is triggered every time the user sends a message. When the response is ready, return it.

You can add actions to your response, which are buttons that trigger the ss-chatbot-action-click.

See the stubs for more details.

Fields

NameTypeDescriptionOptions
Incoming initialsText
Outgoing initialsText
Use MarkdownTextIt'll only be applied to incoming messages. The output will be sanitised; unsafe elements will be removed.
  • Yes
  • No
Enable file uploadText
  • Single file
  • Multiple files
  • No
PlaceholderText
IncomingColor
OutgoingColor
AvatarColor
Avatar textColor
Container backgroundColor
Primary textColor
Secondary textColor
SeparatorColor
ButtonColor
Button textColor
Custom CSS classesTextCSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

NameDescriptionUsage
ss-chatbot-messageTriggered when the user sends a message.
def handle_message_simple(payload):
    query = payload

    if query == "Hello":

    # You can simply return a string

        return "Hello, human."
    elif query == "Surprise me":

    # Or you can return a dict with actions, which are buttons
    # added to the conversation

        return {
            "text": "I can help you with that.",
            "actions": [{
              "subheading": "Resource",
              "name": "Surprise",
              "desc": "Click to be surprised",
              "data": "change_title" 
          }]
        }
    else:
        return "I don't know"
ss-chatbot-action-clickHandle clicks on actions.
def handle_action_simple(payload, state):
    
    # payload contains the "data" property of the action 
    
    if payload == "change_title":
        state["app_title"] = "Surprise!"
        state["app_background_color"] = "red"
    
    # A message can be added to the chat
    
    return "Hope you're surprised."
ss-file-changeTriggered 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.

python
ui.Chatbot(content={
        "incomingInitials": "", # str 
        "outgoingInitials": "", # str 
        "useMarkdown": "no", # str [yes, no]
        "enableFileUpload": "no", # str [single, multiple, no]
        "placeholder": "", # str 
        "incomingColor": "", # str 
        "outgoingColor": "", # str 
        "avatarBackgroundColor": "", # str 
        "avatarTextColor": "", # str 
        "containerBackgroundColor": "", # str 
        "primaryTextColor": "", # str 
        "secondaryTextColor": "", # str 
        "separatorColor": "", # str 
        "buttonColor": "", # str 
        "buttonTextColor": "", # str 
        "cssClasses": "", # str 
    },
    handlers={
        "ss-chatbot-message": handle_event,
        "ss-chatbot-action-click": handle_event,
        "ss-file-change": handle_event,
    }
)
A function, in this example handle_event, should be implemented in your code to handle events.
python
def handle_event(state, payload, context, ui):
  pass

Reference