S
Solara•3mo ago
Helleeni

Chatbox vertical size

Hi, I (or rather Cursor) am struggling to make chatbox stay on the window. The user input box goes partially below the screen botton and I need to scroll to get there. My application would work better if the chat box would be restricted to a card or column with a fixed height. Is there a simple way to achieve this?
4 Replies
Helleeni
HelleeniOP•3mo ago
Here is a solution (snippet by Cursor) how I got it to work: 
import solara
import solara.lab

# A list of dictionaries is simpler than a class for a minimal example.
# We create enough messages to guarantee the content will overflow.
messages = [
    {"user": i % 2 == 0, "text": f"Message #{i+1}"}
    for i in range(20)
]

@solara.component
def MinimalScrollableChat():
    """
    A minimal example showing how to make a ChatBox scrollable.
    The key is wrapping it in a flex Column and giving the ChatBox
    the style `min-height: 0`.
    """
    # This Column acts as a flex container that constrains the height.
    with solara.Column(
        style={
            "height": "300px",          # 1. Define a fixed height.
            "display": "flex",          # 2. Use flexbox layout.
            "flex-direction": "column", # 3. Arrange children vertically.
        }
    ):
        # This ChatBox is a flex item. `min-height: 0` allows it to shrink
        # and enables its internal scrollbar when content overflows.
        with solara.lab.ChatBox(style={"min-height": "0"}):
            for msg in messages:
                solara.lab.ChatMessage(text=msg["text"], user=msg["user"])

# To run this example in a Solara application
Page = MinimalScrollableChat
import solara
import solara.lab

# A list of dictionaries is simpler than a class for a minimal example.
# We create enough messages to guarantee the content will overflow.
messages = [
    {"user": i % 2 == 0, "text": f"Message #{i+1}"}
    for i in range(20)
]

@solara.component
def MinimalScrollableChat():
    """
    A minimal example showing how to make a ChatBox scrollable.
    The key is wrapping it in a flex Column and giving the ChatBox
    the style `min-height: 0`.
    """
    # This Column acts as a flex container that constrains the height.
    with solara.Column(
        style={
            "height": "300px",          # 1. Define a fixed height.
            "display": "flex",          # 2. Use flexbox layout.
            "flex-direction": "column", # 3. Arrange children vertically.
        }
    ):
        # This ChatBox is a flex item. `min-height: 0` allows it to shrink
        # and enables its internal scrollbar when content overflows.
        with solara.lab.ChatBox(style={"min-height": "0"}):
            for msg in messages:
                solara.lab.ChatMessage(text=msg["text"], user=msg["user"])

# To run this example in a Solara application
Page = MinimalScrollableChat
Alonso Silva
Alonso Silva•3mo ago
Helleeni
HelleeniOP•3mo ago
Yes, exactly what I was looking for thank you. Took me ages to come up with a solution with Cursor. Your application looks really elagant.
Alonso Silva
Alonso Silva•3mo ago
Thank you!

Did you find this page helpful?