ChatInterfaceElement

This element is the backbone of flows involving user interaction through the browser by offering multiple Views you are able to compose to create your chat interface, including an input area, chat feed, and send button.

It provides the essential component of user interaction through receiving MessagePayloads and ToolsResponsePayloads, generating MessagePayloads as responses, as well as granting tool call permission to received ToolsResponsePayloads.

Input Ports

Port Name Payload Type Behavior
message_input MessagePayload Displays any incoming message in the chat feed (no downstream emit).
message_emit_input MessagePayload Displays and then emits messages (user or assistant) via user_message_output, assistant_message_output, and message_output.
tools_response_emit_input ToolsResponsePayload Displays and then emits tool response messages via tools_response_output.

Output Ports

Port Name Payload Type Behavior
user_message_output MessagePayload Emits processed user messages.
assistant_message_output MessagePayload Emits processed assistant messages.
message_output MessagePayload Emits both user and assistant messages from their respective emit inputs.
tools_response_output ToolsResponsePayload Emits processed tool response messages.

Views

View Name Description Image
chatfeed_view Displays the chat history. ChatFeedView
chat_input_view Displays the chat input area.
Args:
placeholder: str = 'Yap Here'
Text to display as placeholder in the chat input area.		 ChatInputView
send_button_view Displays the send button. SendButtonView
interface_view Displays the chat interface.
Args:
height: int = 800
Total height of the interface (feed + input).
input_height: Optional[int] = 120
Height allocated to the chat input area.		 InterfaceView