I am currently trying to make a phone text game. I have got most of functionality working except the part where I want to make the viewport of a screen to automatically scroll to the bottom when a new text comes in. I have already tried using YScrollValue but Renpy doesn't seem to recognize it, so I'm stuck on how to make it auto-scroll.

I had to revert the code back to how it was before and this is what I currently have for my script.rpy and screens.rpy files:

script.rpy

# The script of the game goes in this file.

# Declare characters used by this game. The color argument colorizes the
# name of the character.

define e = Character("Testing")

default chat_messages = []
default chat_scroll_pos = 1.0  # Default to bottom


python early:

    import enum

    class ChatAlign(enum.Enum):
        LEFT = 0
        RIGHT = 1

    # Function to add a message and refresh the screen
    def add_message(text, color = "#000000", align = ChatAlign.LEFT):
        chat_messages.append((text, color, align))
        renpy.restart_interaction()  # Forces UI refresh
        

# The game starts here.

label start:

    # Show a background. This uses a placeholder by default, but you can
    # add a file (named either "bg room.png" or "bg room.jpg") to the
    # images directory to show it.

    scene trudy_phone_message

    show screen phone_chat

    $ add_message("This is a text from the sender", align = ChatAlign.RIGHT)
    $ renpy.pause()

    $ add_message("This is a text from the receiver", align = ChatAlign.LEFT)
    $ renpy.pause()

    $ add_message("This is a text from the sender", align = ChatAlign.RIGHT)
    $ renpy.pause()

    $ add_message("This is a text from the receiver", align = ChatAlign.LEFT)
    $ renpy.pause()

    $ add_message("This is a text from the sender", align = ChatAlign.RIGHT)
    $ renpy.pause()

    $ add_message("This is a text from the receiver", align = ChatAlign.LEFT)
    $ renpy.pause()

    $ add_message("This is a text from the sender", align = ChatAlign.RIGHT)
    $ renpy.pause()

    $ add_message("This is a text from the receiver", align = ChatAlign.LEFT)
    $ renpy.pause()

    $ add_message("This is a text from the sender", align = ChatAlign.RIGHT)
    $ renpy.pause()

    $ add_message("This is a text from the receiver", align = ChatAlign.LEFT)
    $ renpy.pause()

    $ add_message("This is a text from the sender", align = ChatAlign.RIGHT)
    $ renpy.pause()

    $ add_message("This is a text from the receiver", align = ChatAlign.LEFT)
    $ renpy.pause()

    $ add_message("This is a text from the sender", align = ChatAlign.RIGHT)
    $ renpy.pause()

    $ add_message("This is a text from the receiver", align = ChatAlign.LEFT)
    $ renpy.pause()

    return

screens.rpy

screen phone_chat():

    frame:
        xsize 430
        ysize 700
        xpos 745
        ypos 220
        background "#FFFFFF"

        viewport:
            id "chat_scroll"
            draggable True
            mousewheel True
            ysize 694

            vbox:
                spacing 10
                xalign 0.5

                for msg, color, align in chat_messages:
                    hbox:
                        xfill True

                        if align == ChatAlign.LEFT:
                            frame:
                                background Frame("gui/leftBubble.png", 15, 15)
                                xpadding 10
                                ypadding 5
                                xfill False
                                xmaximum 300
                                xalign 0.0
                                xmargin 5
                                text msg color "#000000" size 15

                        elif align == ChatAlign.RIGHT:
                            null width 100  # Pushes message to the right
                            frame:
                                background Frame("gui/rightBubble.png", 15, 15)
                                xpadding 10
                                ypadding 5
                                xfill False
                                xmaximum 300
                                xalign 1.0
                                xmargin 5
                                text msg color "#FFFFFF" size 15 

        vbar:
            value YScrollValue("chat_scroll")
            xalign 1.0  
            xsize 3
            unscrollable "hide"