refactor: move docs to support_docs.py module with updated content

app.py

@@ -604,8 +604,8 @@ class SpaceGenerator:
     
     def _create_documentation_tab(self):
         """Create the documentation tab"""
-        with gr.Column():
-            gr.Markdown(self._get_support_docs())
+        from support_docs import create_support_docs
+        create_support_docs()
     
     def _apply_template(self, template_name, prev_template, cache, 
                         name, tagline, desc, prompt, model, temp, tokens, *args):
@@ -938,214 +938,6 @@ huggingface-hub>=0.20.0"""
 **System Prompt:**
 {config.get('system_prompt', 'Not set')}"""
     
-    def _get_support_docs(self):
-        """Get support documentation content"""
-        return """# ChatUI Helper Documentation
-
-Welcome to ChatUI Helper! This tool helps you create customizable AI chat interfaces for deployment on HuggingFace Spaces.
-
-<details open>
-<summary><h2>🚀 Quick Start Guide</h2></summary>
-
-1. **Configure** your assistant using templates or custom settings
-2. **Preview** your configuration to test it works
-3. **Generate** your deployment package
-4. **Deploy** to HuggingFace Spaces
-
-</details>
-
-<details>
-<summary><h2>📝 Step 1: Configure Your Space</h2></summary>
-
-The **Configuration Tab** provides these sections:
-
-### 1. Quick Start Templates
-- Choose from pre-configured academic templates
-- Or start with "None (Custom)" for full control
-- Your custom values are preserved when switching templates
-
-### 2. Space Identity
-- **Assistant Name**: Your AI assistant's display name
-- **Theme**: Choose from Default, Soft, Glass, Monochrome, or Base
-- **Tagline**: Brief description (60 chars max) for the Space header
-- **Description**: Full markdown description for the README
-
-### 3. System Configuration
-- **System Prompt**: Define your assistant's behavior and knowledge
-- **Model**: Select from available OpenRouter models
-- **Temperature**: Control response creativity (0-2)
-- **Max Tokens**: Set response length limit (50-4096)
-
-### 4. Example Prompts
-- Add 3-5 sample prompts that showcase capabilities
-- These appear as quick-start buttons for users
-- Use the ➕/➖ buttons to add/remove examples
-
-### 5. URL Grounding
-- Add reference URLs for context (up to 10)
-- First 2 URLs are primary sources (always loaded)
-- Additional URLs are secondary references
-- Content is fetched and provided as context
-
-### 6. API Configuration
-- **API_KEY**: Required OpenRouter API key variable
-- **HF_TOKEN**: Optional for auto-configuration updates
-- **ACCESS_CODE**: Optional password protection
-
-### 7. Upload Configuration
-- Import existing config.json files
-- Quickly restore previous configurations
-
-</details>
-
-<details>
-<summary><h2>💬 Step 2: Preview Your Assistant</h2></summary>
-
-The **Preview Tab** allows you to:
-
-### Test Configuration
-- Sends real API requests using your local API key
-- Uses the exact configuration from Step 1
-- Displays responses in the chat interface
-
-### Features Available
-- Try example prompts
-- Upload files (if enabled)
-- Export conversation history
-- View active configuration
-
-### API Key Setup
-- Set your OpenRouter API key as environment variable
-- Default variable name: `API_KEY`
-- Get your key at: https://openrouter.ai/keys
-
-</details>
-
-<details>
-<summary><h2>🗳️ Step 3: Generate Deployment Package</h2></summary>
-
-Click **Generate Deployment Package** to create:
-
-### Package Contents
-- **app.py**: Complete Gradio application
-- **requirements.txt**: Python dependencies
-- **config.json**: Configuration backup
-- **README.md**: Deployment instructions
-
-### Deployment Steps
-1. Download the generated ZIP file
-2. Create a new HuggingFace Space
-3. Upload all files from the package
-4. Configure secrets in Space settings
-
-</details>
-
-<details>
-<summary><h2>🔑 HuggingFace Secrets Setup</h2></summary>
-
-### Required Secret
-**API_KEY** (or your configured variable name)
-- Get from: https://openrouter.ai/keys
-- Must start with: `sk-or-`
-- Add in: Settings → Variables and secrets
-
-### Optional Secrets
-**HF_TOKEN**
-- Enables automatic configuration updates
-- Get from: https://huggingface.co/settings/tokens
-- Needs write permissions
-
-**ACCESS_CODE**
-- Password protects your Space
-- Set any password value
-- Share with authorized users only
-
-### How to Add Secrets
-1. Go to your Space Settings (⚙️ icon)
-2. Find "Variables and secrets" section
-3. Click "New secret"
-4. Enter the variable name and value
-5. Save your changes
-
-</details>
-
-<details>
-<summary><h2>🎨 Template System</h2></summary>
-
-### Available Templates
-- **STEM Adventure Games**: Interactive STEM learning
-- **Socratic Dialogue Partner**: Philosophical discussions
-- **Business Strategy Advisor**: Strategic planning assistant
-- **Creative Writing Coach**: Writing improvement helper
-- **Research Assistant**: Academic research support
-
-### Template Features
-- Pre-configured prompts and examples
-- Optimized model settings
-- Relevant grounding URLs
-- Domain-specific system prompts
-
-### Custom Values
-- Your custom settings are preserved
-- Switch templates without losing work
-- Return to "None (Custom)" to restore
-
-</details>
-
-<details>
-<summary><h2>🔧 Troubleshooting</h2></summary>
-
-### Common Issues
-
-**Build Errors**
-- Check requirements.txt compatibility
-- Ensure Gradio version ≥ 5.39.0
-- Verify all dependencies are available
-
-**API Errors**
-- Verify API_KEY is set correctly
-- Check API key starts with 'sk-or-'
-- Ensure you have API credits
-
-**Access Issues**
-- ACCESS_CODE must match exactly
-- Check for extra spaces in password
-- Verify secret is properly saved
-
-**Preview Not Working**
-- Set API_KEY in local environment
-- Check browser console for errors
-- Ensure configuration is saved
-
-</details>
-
-<details>
-<summary><h2>💡 Tips & Best Practices</h2></summary>
-
-### System Prompts
-- Be specific about capabilities
-- Include examples of desired behavior
-- Set clear boundaries and limitations
-
-### Model Selection
-- Gemini Flash: Fast, cost-effective
-- Claude Sonnet: High quality reasoning
-- GPT-4: Broad knowledge base
-- Llama: Open source alternative
-
-### URL Grounding
-- Use authoritative sources
-- Keep URLs up to date
-- Primary URLs load on every request
-- Secondary URLs provide additional context
-
-### Security
-- Never commit API keys to code
-- Use environment variables only
-- Enable ACCESS_CODE for sensitive Spaces
-- Regularly rotate API keys
-
-</details>"""
     
     def _create_readme(self, title, tagline, description, model, api_key_var, access_code):
         """Create README.md content"""

support_docs.py

@@ -10,95 +10,112 @@ def create_support_docs():
     """Create the support documentation interface with accordion menus"""
     
     with gr.Column():
-        gr.Markdown("# Support Documentation")
-        gr.Markdown("Step-by-step guidance for creating and deploying chat interfaces with HuggingFace Spaces.")
+        gr.Markdown("# ChatUI Helper Documentation")
+        gr.Markdown("Welcome to ChatUI Helper! This tool helps you create customizable AI chat interfaces for deployment on HuggingFace Spaces.")
         
-        with gr.Accordion("🚀 Getting Started", open=True):
+        with gr.Accordion("🚀 Quick Start Guide", open=True):
             gr.Markdown("""
-            # Quick Start
+            ## Quick Start Guide
 
-            Build a functional assistant with URL grounding.
-
-            **Steps:**
-            1. Configure space settings and system prompt
-            2. Enable URL grounding tools
-            3. Preview and test
-            4. Generate deployment package
-            5. Deploy to HuggingFace
+            1. **Configure** your assistant using templates or custom settings
+            2. **Preview** your configuration to test it works
+            3. **Generate** your deployment package
+            4. **Deploy** to HuggingFace Spaces
 
             **Requirements:**
             - HuggingFace account (free)
             - OpenRouter API key
-            - Basic AI chatbot knowledge
+            - Basic understanding of AI assistants
             """)
         
-        with gr.Accordion("⚙️ Configuration Guide", open=False):
+        with gr.Accordion("📝 Step 1: Configure Your Space", open=False):
             gr.Markdown("""
-            ### Essential Settings
-            
-            **System Prompt** - Define your assistant's role, behavior, and capabilities
+            ### Configuration Tab Sections
             
-            **Model Selection:**
-            - **Gemini 2.0 Flash** - Fast, reliable (recommended)
-            - **Gemma 3 27B** - Open-source, cost-effective
-            - **Claude 3.5 Haiku** - Advanced reasoning
+            **1. Quick Start Templates**
+            - Choose from pre-configured academic templates
+            - Or start with "None (Custom)" for full control
+            - Your custom values are preserved when switching templates
             
-            **System Prompt & Templates:**
-            - **Custom** - Write your own specific instructions
-            - **Research Template** - Academic work, citations, fact-checking
-            - **Socratic Template** - Teaching through questions, critical thinking
+            **2. Space Identity**
+            - **Assistant Name**: Your AI assistant's display name
+            - **Theme**: Choose from Default, Soft, Glass, Monochrome, or Base
+            - **Tagline**: Brief description (60 chars max) for the Space header
+            - **Description**: Full markdown description for the README
             
-            **URL Grounding (up to 10 URLs)** - Static content for consistent context
+            **3. System Configuration**
+            - **System Prompt**: Define your assistant's behavior and knowledge
+            - **Model**: Select from available OpenRouter models
+            - **Temperature**: Control response creativity (0-2)
+            - **Max Tokens**: Set response length limit (50-4096)
             
-            **URL Priority System:**
-            - **Primary URLs (2)**: Main references (syllabus, textbook) - always processed first with highest priority
-            - **Secondary URLs (8)**: Supplementary sources - additional context as needed
+            **4. Example Prompts**
+            - Add 3-5 sample prompts that showcase capabilities
+            - These appear as quick-start buttons for users
+            - Use the ➕/➖ buttons to add/remove examples
             
-            The system processes URLs in order of priority, ensuring your most important content is always included in the assistant's context.
+            **5. URL Grounding**
+            - Add reference URLs for context (up to 10)
+            - First 2 URLs are primary sources (always loaded)
+            - Additional URLs are secondary references
+            - Content is fetched and provided as context
             
-            **Example Prompts Guidelines:**
-            - One prompt per line, under 100 characters
-            - Show assistant capabilities
-            - Examples: "Explain [topic] in simple terms", "Help prepare for exam", "Analyze this source: [URL]"
+            **6. API Configuration**
+            - **API_KEY**: Required OpenRouter API key variable
+            - **HF_TOKEN**: Optional for auto-configuration updates
+            - **ACCESS_CODE**: Optional password protection
             
-            **Advanced Parameters:**
-            - **Temperature (0.0-2.0)**: 0.0-0.3 (focused), 0.4-0.7 (balanced), 0.8+ (creative)
-            - **Max Tokens (50-4096)**: 750 recommended for balanced responses
-            - **API Key Variable**: Default `OPENROUTER_API_KEY`
-            - **Access Code**: Optional student protection
+            **7. Upload Configuration**
+            - Import existing config.json files
+            - Quickly restore previous configurations
             """)
 
-        with gr.Accordion("🔬 Preview & Testing", open=False):
+        with gr.Accordion("💬 Step 2: Preview Your Assistant", open=False):
             gr.Markdown("""
-            ### Pre-Deployment Testing
+            ### Preview Tab Features
+            
+            **Test Configuration**
+            - Sends real API requests using your local API key
+            - Uses the exact configuration from Step 1
+            - Displays responses in the chat interface
             
-            **Preview Steps:**
-            1. Complete Configuration tab setup
-            2. Click "Preview Deployment Package"
-            3. Test chat interface and URL grounding
-            4. Export conversations for documentation
+            **Features Available**
+            - Try example prompts
+            - Upload files (if enabled)
+            - Export conversation history
+            - View active configuration
             
-            **Requirements:** Set `OPENROUTER_API_KEY` environment variable for full testing
+            **API Key Setup**
+            - Set your OpenRouter API key as environment variable
+            - Default variable name: `API_KEY`
+            - Get your key at: https://openrouter.ai/keys
             
             **Test Checklist:**
             - Various query types and assistant responses
-            - URL grounding functionality (if enabled)
+            - URL grounding functionality (if configured)
             - System prompt behavior matches expectations
             - Example prompts work correctly
             """)
         
-        with gr.Accordion("🚀 HuggingFace Space Deployment", open=False):
+        with gr.Accordion("🗳️ Step 3: Generate & Deploy", open=False):
             gr.Markdown("""
-            ### Complete Deployment Workflow
+            ### Deployment Package & HuggingFace Space Setup
             
-            **Overview:** Generate Package → Create Space → Upload Files → Configure Secrets → Monitor Build → Verify Configuration
+            **Package Contents:**
+            - **app.py**: Complete Gradio application
+            - **requirements.txt**: Python dependencies
+            - **config.json**: Configuration backup
+            - **README.md**: Deployment instructions
+            
+            **Deployment Overview:** Generate Package → Create Space → Upload Files → Configure Secrets → Monitor Build → Verify
             """)
             
             with gr.Accordion("Step 1: Generate & Create Space", open=False):
                 gr.Markdown("""
                 **1.1 Generate Deployment Package**
-                - Click "Generate Deployment Package" and download zip
-                - Extract files: `app.py`, `config.json`, `requirements.txt`
+                - Click "🗳️ Generate Deployment Package" in Configuration tab
+                - Download the generated ZIP file
+                - Extract files: `app.py`, `config.json`, `requirements.txt`, `README.md`
                 
                 **1.2 Create New Space**
                 - Go to [huggingface.co/spaces](https://huggingface.co/spaces)
@@ -163,10 +180,19 @@ def create_support_docs():
                 - Click "New secret"
                 
                 **Required Secret:**
-                - **OPENROUTER_API_KEY**: Set this to your OpenRouter API key value
+                - **API_KEY** (or your configured variable name)
+                  - Get from: https://openrouter.ai/keys
+                  - Must start with: `sk-or-`
+                  - Add in: Settings → Variables and secrets
+                
+                **Optional Secrets:**
+                - **HF_TOKEN**: Enables automatic configuration updates
+                  - Get from: https://huggingface.co/settings/tokens
+                  - Needs write permissions
                 
-                **Optional Secret:**
-                - **SPACE_ACCESS_CODE**: Set this to your desired access code value for student access control
+                - **ACCESS_CODE**: Password protects your Space
+                  - Set any password value
+                  - Share with authorized users only
                 
                 **Access Control Notes:**
                 - If you don't create the `SPACE_ACCESS_CODE` secret, your Space will be publicly accessible
@@ -251,54 +277,101 @@ def create_support_docs():
             gr.Markdown("""
             ### Common Issues and Solutions
             
+            **Build Errors**
+            - Check requirements.txt compatibility
+            - Ensure Gradio version ≥ 5.39.0
+            - Verify all dependencies are available
+            
+            **API Errors**
+            - Verify API_KEY is set correctly
+            - Check API key starts with 'sk-or-'
+            - Ensure you have API credits
+            
+            **Access Issues**
+            - ACCESS_CODE must match exactly
+            - Check for extra spaces in password
+            - Verify secret is properly saved
+            
+            **Preview Not Working**
+            - Set API_KEY in local environment
+            - Check browser console for errors
+            - Ensure configuration is saved
+            
             **Configuration Status Shows Red X:**
-            - Verify API key secret name matches configuration (usually `OPENROUTER_API_KEY`)
+            - Verify API key secret name matches configuration
             - Check OpenRouter account has credits
             - Regenerate API key if needed
+            """)
+        
+        with gr.Accordion("🎨 Template System", open=False):
+            gr.Markdown("""
+            ### Available Templates
+            - **STEM Adventure Games**: Interactive STEM learning
+            - **Socratic Dialogue Partner**: Philosophical discussions  
+            - **Business Strategy Advisor**: Strategic planning assistant
+            - **Creative Writing Coach**: Writing improvement helper
+            - **Research Assistant**: Academic research support
             
-            **Build Failed:**
-            - Check `requirements.txt` formatting (no extra spaces)
-            - Try reuploading files if build gets stuck
-            - Monitor build logs for specific errors
+            ### Template Features
+            - Pre-configured prompts and examples
+            - Optimized model settings
+            - Relevant grounding URLs
+            - Domain-specific system prompts
             
-            **API Errors:**
-            - **401 Unauthorized**: Invalid API key or incorrect secret name
-            - **429 Rate Limited**: Wait a few minutes, consider upgrading OpenRouter plan
+            ### Custom Values
+            - Your custom settings are preserved
+            - Switch templates without losing work
+            - Return to "None (Custom)" to restore
+            """)
+        
+        with gr.Accordion("💡 Tips & Best Practices", open=False):
+            gr.Markdown("""
+            ### System Prompts
+            - Be specific about capabilities
+            - Include examples of desired behavior
+            - Set clear boundaries and limitations
+            
+            ### Model Selection
+            - Gemini Flash: Fast, cost-effective
+            - Claude Sonnet: High quality reasoning
+            - GPT-4: Broad knowledge base
+            - Llama: Open source alternative
             
-            **Access Issues:**
-            - **Access code not working**: Verify `SPACE_ACCESS_CODE` secret is set correctly (case-sensitive)
-            - **URLs not fetching**: Check URLs are publicly accessible, some sites block automated requests
+            ### URL Grounding
+            - Use authoritative sources
+            - Keep URLs up to date
+            - Primary URLs load on every request
+            - Secondary URLs provide additional context
+            
+            ### Security
+            - Never commit API keys to code
+            - Use environment variables only
+            - Enable ACCESS_CODE for sensitive Spaces
+            - Regularly rotate API keys
             """)
         
         with gr.Accordion("📚 Additional Resources", open=False):
             gr.Markdown("""
-            ### Helpful Links
+            ### Documentation Links
             
-            **HuggingFace Documentation**
+            **HuggingFace**
             - [Spaces Overview](https://huggingface.co/docs/hub/spaces-overview)
             - [Gradio on Spaces](https://huggingface.co/docs/hub/spaces-gradio)
             - [Environment Variables](https://huggingface.co/docs/hub/spaces-overview#managing-secrets)
             
-            **OpenRouter Documentation**
+            **OpenRouter**
             - [API Keys](https://openrouter.ai/keys)
             - [Model Comparison](https://openrouter.ai/models)
             - [Pricing](https://openrouter.ai/docs#models)
             
-            **Gradio Documentation**
+            **Gradio**
             - [Chat Interface](https://gradio.app/docs/chatinterface)
             - [Components](https://gradio.app/docs/)
             - [Sharing Apps](https://gradio.app/sharing-your-app/)
             
             **Community Support**
-            - [HuggingFace Community Forums](https://discuss.huggingface.co/)
+            - [HuggingFace Forums](https://discuss.huggingface.co/)
             - [Gradio Discord](https://discord.gg/feTf9x3ZSB)
-            
-            **Educational Use Cases**
-            - Course assistants for Q&A
-            - Research writing support
-            - Study guide generation
-            - Document analysis tools
-            - Language practice partners
             """)
 
 def export_conversation_to_markdown(conversation_history, config_metadata=None):