[Python] How to make viewport auto-scroll to the bottom in Renpy

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"

Continue reading...