[#20] Add scroll functionality to response textboxes (#41)

When a response length exceeds a certain length, the text box does not scroll to bottom to show the remaining text.

There are two ways to fix this:
1. Display the scroll bar and let the user scroll to the bottom. When it reaches the bottom, the scroll bar will automatically scroll to the bottom.
2. Automatically scroll to the bottom when the response text is generated.

This PR implements the second option since it's cumbersome to scroll to the bottom manually.

When the response text is generated, `element.scrollTop = element.scrollHeight` is triggered to scroll to the bottom of the text box.
It's not the most efficient way to do this, but it's the simplest way to do it.

Co-authored-by: suhyun.kang <[email protected]>

app.py

@@ -63,6 +63,15 @@ def vote(vote_button, response_a, response_b, model_a_name, model_b_name,
   raise gr.Error("Please select a response type.")
 
 
+def scroll_to_bottom_js(elem_id):
+  return f"""
+  () => {{
+    const element = document.querySelector("#{elem_id} textarea");
+    element.scrollTop = element.scrollHeight;
+  }}
+  """
+
+
 with gr.Blocks(title="Arena") as app:
   with gr.Row():
     category_radio = gr.Radio(
@@ -101,8 +110,21 @@ with gr.Blocks(title="Arena") as app:
 
   with gr.Group():
     with gr.Row():
-      response_boxes[0] = gr.Textbox(label="Model A", interactive=False)
-      response_boxes[1] = gr.Textbox(label="Model B", interactive=False)
+      response_a_elem_id = "responseA"
+      response_a_textbox = gr.Textbox(label="Model A",
+                                      interactive=False,
+                                      elem_id=response_a_elem_id)
+      response_a_textbox.change(fn=None,
+                                js=scroll_to_bottom_js(response_a_elem_id))
+      response_boxes[0] = response_a_textbox
+
+      response_b_elem_id = "responseB"
+      response_b_textbox = gr.Textbox(label="Model B",
+                                      interactive=False,
+                                      elem_id=response_b_elem_id)
+      response_b_textbox.change(fn=None,
+                                js=scroll_to_bottom_js(response_b_elem_id))
+      response_boxes[1] = response_b_textbox
 
     with gr.Row(visible=False) as model_name_row:
       model_names[0] = gr.Textbox(show_label=False)