feat: support two tabs

app.py

@@ -362,7 +362,7 @@ def select_example(example: dict):
 
 def generate_code(query: str):
     if not query:
-        return None, None, None, gr.update(active_key="empty")
+        return None, None, None, gr.update(active_key="empty"), gr.update(active_key="reasoning", visible=False)
     
     print("Starting code generation with query:", query)
     messages = [{
@@ -419,6 +419,7 @@ def generate_code(query: str):
                             code_output: content,
                             reasoning_output: reasoning_content + "\n",
                             state_tab: gr.update(active_key="loading"),
+                            output_tabs: gr.update(active_key="reasoning", visible=True)
                         }
                     elif 'message' in choice:
                         message_data = choice['message']
@@ -433,6 +434,7 @@ def generate_code(query: str):
                             reasoning_output: reasoning_content + "\n",
                             sandbox: send_to_sandbox(html_content),
                             state_tab: gr.update(active_key="render"),
+                            output_tabs: gr.update(active_key="code", visible=True)  # Switch to code tab when complete
                         }
             
             # If successful, break out of retry loop
@@ -473,21 +475,25 @@ css = """
 }
 
 .reasoning-box {
-  height: 160px;
+  height: 300px;
   overflow-y: auto;
-  padding: 8px 12px;
   background-color: #f5f5f5;
   border-radius: 4px;
   margin-bottom: 12px;
-  font-family: monospace;
-  font-size: 12px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: 14px;
   line-height: 1.2;
   white-space: pre-wrap;
   word-break: break-word;
   width: 100%;
   box-sizing: border-box;
+  scroll-behavior: smooth;
 }
 
+.reasoning-box .ms-markdown {
+  padding: 0 12px;
+} 
+
 .reasoning-box::-webkit-scrollbar {
   width: 6px;
 }
@@ -506,7 +512,19 @@ css = """
   background: #555;
 }
 
-.reasoning-box textarea {
+.markdown-container {
+  height: 300px;
+  overflow-y: auto;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  margin-bottom: 12px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+  width: 100%;
+  box-sizing: border-box;
   scroll-behavior: smooth;
 }
 """
@@ -514,10 +532,16 @@ css = """
 def scroll_to_bottom():
     return """
     function() {
-        const textarea = document.querySelector('.reasoning-box textarea');
-        if (textarea) {
-            textarea.scrollTop = textarea.scrollHeight;
-        }
+        setTimeout(() => {
+            const reasoningBox = document.querySelector('.reasoning-box');
+            if (reasoningBox) {
+                reasoningBox.scrollTop = reasoningBox.scrollHeight;
+            }
+            const markdownContainer = document.querySelector('.markdown-container');
+            if (markdownContainer) {
+                markdownContainer.scrollTop = markdownContainer.scrollHeight;
+            }
+        }, 100);
     }
     """
 
@@ -580,26 +604,24 @@ with gr.Blocks(css=css) as demo, ms.Application(), antdx.XProvider():
                 )
                 chatbot.welcome_prompt_select(fn=prompt_select, outputs=[sender])
 
-        with antd.Tabs.Item(key="code", label="Code Playground (webdev)"):
+        with antd.Tabs.Item(key="code", label="Code Playground (WebDev)"):
             with antd.Row(gutter=[32, 12]):
                 with antd.Col(span=12):
                     with antd.Flex(vertical=True, gap="middle"):
                         code_input = antd.InputTextarea(
                             size="large",
                             allow_clear=True,
-                            placeholder="Please enter what kind of application you want"
+                            placeholder="Please enter what kind of application you want or choose an example below and click the button"
                         )
                         code_btn = antd.Button("Generate Code", type="primary", size="large")
-                        reasoning_output = gr.TextArea(
-                            label="Thinking Process",
-                            elem_classes="reasoning-box",
-                            interactive=False,
-                            lines=4,
-                            elem_id="reasoning-output"
-                        )
-                        code_output = legacy.Markdown()
+                        with antd.Tabs(active_key="reasoning", visible=False) as output_tabs:
+                            with antd.Tabs.Item(key="reasoning", label="🤔 Thinking Process"):
+                                reasoning_output = legacy.Markdown(
+                                    elem_classes="reasoning-box"
+                                )
+                            with antd.Tabs.Item(key="code", label="💻 Generated Code"):
+                                code_output = legacy.Markdown(elem_classes="markdown-container")
                         
-
                         antd.Divider("Examples")
 
                         # Examples
@@ -646,7 +668,28 @@ with gr.Blocks(css=css) as demo, ms.Application(), antdx.XProvider():
             code_btn.click(
                 generate_code,
                 inputs=[code_input],
-                outputs=[code_output, reasoning_output, sandbox, state_tab]
+                outputs=[code_output, reasoning_output, sandbox, state_tab, output_tabs]
+            )
+
+            # Add auto-scroll functionality
+            reasoning_output.change(
+                fn=scroll_to_bottom,
+                inputs=[],
+                outputs=[],
+            )
+            code_output.change(
+                fn=scroll_to_bottom,
+                inputs=[],
+                outputs=[],
+            )
+
+            def on_tab_change(tab_key):
+                return gr.update(active_key=tab_key, visible=True)
+
+            output_tabs.change(
+                fn=on_tab_change,
+                inputs=[output_tabs],
+                outputs=[output_tabs],
             )
 
 if __name__ == '__main__':