Chat Components
These are the components available in Solara to build chat interfaces. Although they can be used together to create a pre-built chat interface, inserting custom components is also possible. For an example of how to use a custom message component, see the bottom of the page.
Also check out the Chatbot example.
ChatBox
@solara.component
def ChatBox(
children: List[solara.Element] = [],
style: Optional[Union[str, Dict[str, str]]] = None,
classes: List[str] = [],
):
...
The ChatBox component is a container for ChatMessage components.
Its primary use is to ensure the proper ordering of messages,
using flex-direction: column-reverse together with reversed(messages).
Arguments
children: A list of child components.style: CSS styles to apply to the component. Either a string or a dictionary.classes: A list of CSS classes to apply to the component.
ChatInput
@solara.component
def ChatInput(
send_callback: Optional[Callable] = None,
disabled: bool = False,
style: Optional[Union[str, Dict[str, str]]] = None,
classes: List[str] = [],
):
...
The ChatInput component renders a text input together with a send button.
Arguments
send_callback: A callback function for when the user presses enter or clicks the send button.disabled: Whether the input should be disabled. Useful for disabling sending further messages while a chatbot is replying, among other things.style: CSS styles to apply to the component. Either a string or a dictionary. These styles are applied to the container component.classes: A list of CSS classes to apply to the component. Also applied to the container.
ChatMessage
@solara.component
def ChatMessage(
children: Union[List[solara.Element], str],
user: bool = False,
avatar: Union[solara.Element, str, Literal[False], None] = None,
name: Optional[str] = None,
color: Optional[str] = "rgba(0,0,0,.06)",
avatar_background_color: Optional[str] = None,
border_radius: Optional[str] = None,
notch: bool = False,
style: Optional[Union[str, Dict[str, str]]] = None,
classes: List[str] = [],
):
...
The ChatMessage component renders a message. Messages with user=True are rendered on the right side of the screen,
all others on the left.
Arguments
children: A list of child components.user: Whether the message is from the current user or not.avatar: An avatar to display next to the message. Can be a string representation of a URL or Material design icon name, a solara Element, False to disable avatars altogether, or None to display initials based onname.name: The name of the user who sent the message.color: The background color of the message. Defaults torgba(0,0,0,.06). Can be any valid CSS color.avatar_background_color: The background color of the avatar. Defaults tocolorif left asNone.border_radius: Sets the roundness of the corners of the message. Defaults toNone, which applies the default border radius of asolara.Column, i.e.4px.notch: Whether to display a speech bubble style notch on the side of the message.style: CSS styles to apply to the component. Either a string or a dictionary. Applied to the container of the message.classes: A list of CSS classes to apply to the component. Applied to the same container.
Different Message Styles
The ChatMessage component has a few different styles available. These are shown below.
import solara
@solara.component
def Page():
with solara.Column():
solara.lab.ChatMessage(["Default"])
solara.lab.ChatMessage(["`color`"], color="#ff991f")
solara.lab.ChatMessage(["`avatar_background_color`"], avatar_background_color="success")
solara.lab.ChatMessage(["`border_radius='20px'`"], border_radius="20px")
solara.lab.ChatMessage(["`notch=True`"], notch=True)
A Basic Example
import solara
messages = solara.reactive([])
name = solara.reactive("User")
def send(new_message):
messages.set([
*messages.value,
{"user": True, "name": name.value, "message": new_message,},
])
@solara.component
def Page():
solara.InputText("username", value=name)
with solara.Column(style={"min-height": "50vh"}):
with solara.lab.ChatBox():
for item in messages.value:
with solara.lab.ChatMessage(
user=item["user"],
name=item["name"],
):
solara.Markdown(item["message"])
solara.lab.ChatInput(send_callback=send)
A Custom Message Component
import solara
messages = solara.reactive([])
def send(new_message):
messages.set([
*messages.value,
{"name": "User", "message": new_message},
])
@solara.component
def CustomMessage(
message,
name = "User",
):
with solara.Column(gap=0):
with solara.Row():
solara.Markdown(f"**{name}**: {message}")
solara.v.Divider(style_="margin: 0;")
@solara.component
def Page():
with solara.Column(style={"min-height": "50vh"}):
with solara.lab.ChatBox():
for item in messages.value:
CustomMessage(
message=item["message"],
name=item["name"],
)
solara.lab.ChatInput(send_callback=send)