From 9d9ed42c5a4d9c4719057d55b2215048c5efd5a2 Mon Sep 17 00:00:00 2001
From: Adil Hafeez <adil@katanemo.com>
Date: Tue, 29 Oct 2024 00:10:11 -0700
Subject: [PATCH] move tools at the bottom and make it collapsed by default

---
 chatbot_ui/run.py        |  2 +-
 chatbot_ui/run_stream.py | 28 ++++++++++++----------------
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/chatbot_ui/run.py b/chatbot_ui/run.py
index a774dce5..82077810 100644
--- a/chatbot_ui/run.py
+++ b/chatbot_ui/run.py
@@ -2,7 +2,7 @@ import json
 import os
 import logging
 import yaml
-from common import get_arch_messages
+from common import get_arch_messages, get_prompt_targets
 import gradio as gr
 
 from typing import List, Optional, Tuple
diff --git a/chatbot_ui/run_stream.py b/chatbot_ui/run_stream.py
index 76ca8742..b6a41fba 100644
--- a/chatbot_ui/run_stream.py
+++ b/chatbot_ui/run_stream.py
@@ -26,11 +26,9 @@ log.info(f"CHAT_COMPLETION_ENDPOINT: {CHAT_COMPLETION_ENDPOINT}")
 
 CSS_STYLE = """
 .json-container {
-    height: 95vh !important;
     overflow-y: auto !important;
 }
 .chatbot {
-    height: calc(95vh - 100px) !important;
     overflow-y: auto !important;
 }
 footer {visibility: hidden}
@@ -101,34 +99,32 @@ def main():
         fill_height=True,
         css=CSS_STYLE,
     ) as demo:
-        with gr.Row(equal_height=True):
+        with gr.Row():
             state = gr.State({})
 
-            with gr.Column(scale=4):
-                gr.JSON(
-                    value=get_prompt_targets(),
-                    open=True,
-                    show_indices=False,
-                    label="Available Tools",
-                    scale=1,
-                    min_height="95vh",
-                    elem_classes="json-container",
-                )
-            with gr.Column(scale=6):
+            with gr.Column():
                 chatbot = gr.Chatbot(
                     label="Arch Chatbot",
-                    scale=1,
                     elem_classes="chatbot",
                 )
                 textbox = gr.Textbox(
                     show_label=False,
                     placeholder="Enter text and press enter",
-                    scale=1,
                     autofocus=True,
                 )
 
             textbox.submit(chat, [textbox, chatbot, state], [textbox, chatbot, state])
 
+        with gr.Row():
+            with gr.Accordion("See available tools", open=False):
+                with gr.Column(scale=1):
+                    gr.JSON(
+                        value=get_prompt_targets(),
+                        show_indices=False,
+                        label="Available Tools",
+                        elem_classes="json-container",
+                    )
+
     demo.launch(server_name="0.0.0.0", server_port=8080, show_error=True, debug=True)