update frontend with tabs

app.py

@@ -220,38 +220,50 @@ with gr.Blocks(title=f"{demo_name}", css=css, theme=theme) as demo:
     #     )
 
     with gr.Column(visible=True) as bloc_2:
-        gr.Markdown(f"<h1><center>{demo_name}</center></h1>")
-        with gr.Row():
-            with gr.Column(scale=2):
-                chatbot = gr.Chatbot(
-                    value=[(None, init_prompt)],
-                    show_copy_button=True,
-                    show_label=False,
-                    elem_id="chatbot",
-                    layout="panel",
-                    avatar_images=(None, "https://i.ibb.co/YNyd5W2/logo4.png"),
-                )
-                state = gr.State([])
-
-                with gr.Row():
-                    ask = gr.Textbox(
+        with gr.Tab("ESRS Q&A"):
+            with gr.Row():
+                with gr.Column(scale=2):
+                    chatbot = gr.Chatbot(
+                        value=[(None, init_prompt)],
+                        show_copy_button=True,
                         show_label=False,
-                        placeholder="Input your question then press enter",
+                        elem_id="chatbot",
+                        layout="panel",
+                        avatar_images=(None, "https://i.ibb.co/YNyd5W2/logo4.png"),
                     )
-
-            with gr.Column(scale=1, variant="panel"):
-                gr.Markdown("### Sources")
-                sources_textbox = gr.Markdown(show_label=False)
-
-    # demo.load(update_visible, inputs=None, outputs=[bloc_1, bloc_2, bloc_3])
-    ask.submit(
-        fn=chat,
-        inputs=[
-            ask,
-            state,
-        ],
-        outputs=[ask, chatbot, state, sources_textbox],
-    )
+                    state = gr.State([])
+
+                    with gr.Row(elem_id="input-message"):
+                        ask = gr.Textbox(
+                            placeholder="Ask me anything here!",
+                            show_label=False,
+                            scale=7,
+                            lines=1,
+                            interactive=True,
+                            elem_id="input-textbox",
+                        )
+
+                with gr.Column(scale=1, variant="panel", elem_id="right-panel"):
+                    with gr.Tab("Sources", elem_id="tab-citations", id=1):
+                        sources_textbox = gr.HTML(
+                            show_label=False, elem_id="sources-textbox"
+                        )
+                        docs_textbox = gr.State("")
+
+        with gr.Tab("About", elem_classes="max-height other-tabs"):
+            with gr.Row():
+                with gr.Column(scale=1):
+                    gr.Markdown("WIP")
+
+        # demo.load(update_visible, inputs=None, outputs=[bloc_1, bloc_2, bloc_3])
+        ask.submit(
+            fn=chat,
+            inputs=[
+                ask,
+                state,
+            ],
+            outputs=[ask, chatbot, state, sources_textbox],
+        )
 
 
 demo.launch(