refactor: update preview to match space_template.py visual hierarchy

app.py

@@ -426,121 +426,113 @@ class SpaceGenerator:
             def render_preview(config):
                 if not config or not config.get('preview_ready'):
                     gr.Markdown(
+                        "### ⚠️ Preview Not Ready\n\n"
                         "Configure your assistant in the Configuration tab and click 'Preview Configuration' to test it here."
                     )
                     return
                 
-                # Preview chatbot
+                # Header
+                gr.Markdown(f"# {config.get('name', 'AI Assistant')}")
+                if config.get('tagline'):
+                    gr.Markdown(f"*{config.get('tagline')}*")
+                
+                # Chat interface
                 preview_chatbot = gr.Chatbot(
-                    label=config.get('name', 'AI Assistant'),
+                    type="messages",
                     height=400,
-                    show_copy_button=True,
-                    type='messages'
+                    show_copy_button=True
                 )
                 
-                # Example buttons
-                examples = config.get('examples_list', [])
-                if examples:
-                    gr.Markdown("**Try these examples:**")
-                    example_btns = []
-                    for i, example in enumerate(examples[:3]):
-                        btn = gr.Button(f"{example}", size="sm")
-                        example_btns.append((btn, example))
+                # Message input
+                msg = gr.Textbox(
+                    label="Message",
+                    placeholder="Type your message here...",
+                    lines=2
+                )
                 
-                # Chat input
+                # Buttons
                 with gr.Row():
-                    preview_input = gr.Textbox(
-                        label="Message",
-                        placeholder="Type your message...",
-                        lines=1,
-                        scale=4
-                    )
-                    preview_send = gr.Button("Send", variant="primary", scale=1)
+                    submit_btn = gr.Button("Send", variant="primary")
+                    clear_btn = gr.Button("Clear")
                 
-                # Export functionality
+                # Export functionality  
                 with gr.Row():
-                    preview_clear = gr.Button("🗑️ Clear", size="sm")
-                    preview_export = gr.DownloadButton(
-                        "Export Conversation",
-                        size="sm",
-                        visible=False
+                    export_btn = gr.DownloadButton(
+                        "📥 Export Conversation",
+                        variant="secondary",
+                        size="sm"
                     )
                 
-                # Configuration display
-                with gr.Accordion("Configuration Details", open=False):
-                    config_display = gr.Markdown(self._format_config_display(config))
+                # Examples section
+                examples = config.get('examples_list', [])
+                if examples:
+                    gr.Examples(examples=examples, inputs=msg)
+                
+                # File upload accordion (if enabled)
+                if config.get('enable_file_upload'):
+                    with gr.Accordion("📎 Upload Files", open=False):
+                        file_upload = gr.File(
+                            label="Upload Files",
+                            file_types=None,
+                            file_count="multiple",
+                            visible=True,
+                            interactive=True
+                        )
+                        uploaded_files_display = gr.Markdown("", visible=False)
+                
+                # Configuration accordion
+                with gr.Accordion("ℹ️ Configuration", open=False):
+                    gr.JSON(
+                        value=config,
+                        label="config.json",
+                        show_label=True
+                    )
                 
-                # Event handlers
-                def preview_respond(message, history):
+                # Chat functionality
+                def respond(message, chat_history):
+                    if not message:
+                        return chat_history, ""
+                    
                     # Simulate response for preview
                     api_key = os.environ.get(config.get('api_key_var', 'API_KEY'))
                     
                     if not api_key:
                         response = (
-                            f"🔑 **API Key Required for Preview**\n\n"
-                            f"To test with real responses, set your `{config.get('api_key_var', 'API_KEY')}` "
-                            f"environment variable.\n\n"
-                            f"**Configured Model:** {config.get('model', 'Unknown')}"
+                            f"🔑 **API Key Required**\n\n"
+                            f"Please configure your OpenRouter API key:\n"
+                            f"1. Go to Settings (⚙️) in your HuggingFace Space\n"
+                            f"2. Click 'Variables and secrets'\n"
+                            f"3. Add secret: **{config.get('api_key_var', 'API_KEY')}**\n"
+                            f"4. Value: Your OpenRouter API key (starts with `sk-or-`)\n\n"
+                            f"Get your API key at: https://openrouter.ai/keys"
                         )
                     else:
-                        # Here you would make actual API call
+                        # Preview mode response
                         response = (
                             f"[Preview Mode] This would call {config.get('model', 'Unknown')} "
                             f"with your message: '{message}'"
                         )
                     
-                    history.append({"role": "user", "content": message})
-                    history.append({"role": "assistant", "content": response})
-                    return "", history
-                
-                preview_send.click(
-                    preview_respond,
-                    inputs=[preview_input, preview_chatbot],
-                    outputs=[preview_input, preview_chatbot]
-                )
-                
-                preview_input.submit(
-                    preview_respond,
-                    inputs=[preview_input, preview_chatbot],
-                    outputs=[preview_input, preview_chatbot]
-                )
-                
-                preview_clear.click(
-                    lambda: ("", []),
-                    outputs=[preview_input, preview_chatbot]
-                )
+                    # Update chat history
+                    chat_history = chat_history + [
+                        {"role": "user", "content": message},
+                        {"role": "assistant", "content": response}
+                    ]
+                    
+                    return chat_history, ""
                 
-                # Example button handlers
-                if examples:
-                    for btn, example in example_btns:
-                        btn.click(
-                            lambda ex=example: ex,
-                            outputs=[preview_input]
-                        )
+                # Wire up the interface
+                msg.submit(respond, [msg, preview_chatbot], [preview_chatbot, msg])
+                submit_btn.click(respond, [msg, preview_chatbot], [preview_chatbot, msg])
+                clear_btn.click(lambda: ([], ""), outputs=[preview_chatbot, msg])
                 
                 # Export handler
-                def prepare_export(history):
-                    if not history:
-                        return gr.update(visible=False)
-                    
-                    content = export_conversation_to_markdown(history, config)
-                    filename = create_safe_filename(
-                        config.get('name', 'assistant'),
-                        prefix="preview"
-                    )
-                    
-                    temp_file = Path(f"/tmp/{filename}")
-                    temp_file.write_text(content)
-                    
-                    return gr.update(
-                        visible=True,
-                        value=str(temp_file)
-                    )
+                def prepare_export():
+                    return None  # Simplified for preview
                 
-                preview_chatbot.change(
+                export_btn.click(
                     prepare_export,
-                    inputs=[preview_chatbot],
-                    outputs=[preview_export]
+                    outputs=[export_btn]
                 )
     
     def _create_documentation_tab(self):