chore: ganti interface

app.py

@@ -16,16 +16,15 @@ import dotenv
 # Load environment variables
 dotenv.load_dotenv()
 
-# Metadata# Metadata
-CURRENT_TIME = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
-CURRENT_USER = os.getenv("USER", "ErRickow")
+# Metadata
+CURRENT_TIME = "2025-05-23 12:57:22"
+CURRENT_USER = "ErRickow"
 
 # Default API Keys (fallback if user doesn't provide their own)
 DEFAULT_XAI_KEY = os.getenv(
     "XAI_API_KEY"
 )
 DEFAULT_GEMINI_KEY = os.getenv("GEMINI_API_KEY")
-GEMINI_BASE_URL = "https://generativelanguage.googleapis.com/v1beta/openai/"
 
 # API settings
 OLLAMA_API = os.environ.get("OLLAMA_API", "http://localhost:11434")
@@ -113,7 +112,6 @@ Note:
 - Masukkan API key Anda sendiri jika default mencapai limit
 """
 
-
 async def get_available_models(provider: str, api_key: str = None) -> List[str]:
     """Mendapatkan daftar model yang tersedia dari API."""
     try:
@@ -282,7 +280,9 @@ class RepoAnalyzer:
         except Exception as e:
             yield f"⚠️ Error dalam X.AI API: {str(e)}\nPastikan:\n1. API Key valid\n2. Model {model} tersedia\n3. Anda memiliki akses ke model ini"
 
-    def clone_repository(self, repo_url: str, github_token: str, branch: str = None) -> tuple[bool, str]:
+    def clone_repository(
+        self, repo_url: str, github_token: str, branch: str = None
+    ) -> tuple[bool, str]:
         """Clone repository GitHub dengan autentikasi"""
         if not repo_url:
             return False, "⚠️ URL repository diperlukan"
@@ -297,7 +297,9 @@ class RepoAnalyzer:
 
             # Cek apakah repository private
             headers = {"Authorization": f"token {github_token}"} if github_token else {}
-            repo_check = requests.get(f"https://api.github.com/repos/{owner_repo}", headers=headers)
+            repo_check = requests.get(
+                f"https://api.github.com/repos/{owner_repo}", headers=headers
+            )
 
             if repo_check.status_code == 404:
                 return False, "⚠️ Repository tidak ditemukan. Periksa URL repository."
@@ -306,7 +308,9 @@ class RepoAnalyzer:
                     False,
                     "⚠️ Token GitHub tidak valid. Klik icon bantuan (?) untuk panduan mendapatkan token.",
                 )
-            elif repo_check.status_code == 403 and repo_check.json().get("private", False):
+            elif repo_check.status_code == 403 and repo_check.json().get(
+                "private", False
+            ):
                 return (
                     False,
                     "⚠️ Ini adalah repository private. Token GitHub dengan akses 'repo' diperlukan.",
@@ -363,10 +367,8 @@ class RepoAnalyzer:
                 continue
         return False, "Tidak dapat membaca file dengan encoding yang didukung"
 
-
 analyzer = RepoAnalyzer()
 
-
 async def handle_chat(
     message,
     history,
@@ -378,420 +380,173 @@ async def handle_chat(
     analyzer=analyzer,
 ):
     """Menangani interaksi chat dengan model AI"""
-    try:
-        if not analyzer.current_repo:
-            new_message = {
-                "role": "assistant",
-                "content": "⚠️ Mohon clone repository terlebih dahulu sebelum mengajukan pertanyaan.",
-            }
-            history = history or []
-            history.append({"role": "user", "content": message})
-            history.append(new_message)
-            yield history
-            return
-
+    if not analyzer.current_repo:
+        new_message = {
+            "role": "assistant",
+            "content": "⚠️ Mohon clone repository terlebih dahulu sebelum mengajukan pertanyaan.",
+        }
         history = history or []
-        user_message = f'<div class="user-message">{message}</div>'
-        history.append({"role": "user", "content": user_message})
-        history.append({"role": "assistant", "content": '<div class="assistant-message">'})
+        history.append({"role": "user", "content": message})
+        history.append(new_message)
+        yield history
+        return
 
-        # Add context about selected files
+    history = history or []
+    history.append({"role": "user", "content": message})
+    history.append({"role": "assistant", "content": ""})
+
+    try:
+        # Add context about selected files to the prompt
         file_context = ""
         if selected_files:
             file_context = "\n\nFile yang dipilih:\n"
             for file in selected_files:
                 content = analyzer.repo_content.get(file, "")
-                if content:
+                if content:  # Only include files that exist
                     file_context += f"\n{file}:\n```\n{content}\n```\n"
 
         enhanced_message = f"{message}\n{file_context}"
-        full_response = ""
-
-        try:
-            if provider_choice == AIProvider.XAI:
-                async for chunk in analyzer.stream_xai_response(enhanced_message, xai_key, model_name):
-                    full_response += chunk
-                    formatted_response = format_response(full_response)
-                    history[-1]["content"] = f'<div class="assistant-message">{formatted_response}</div>'
-                    await asyncio.sleep(0.05)
-                    yield history
-
-            elif provider_choice == AIProvider.GEMINI:
-                if not gemini_key and not DEFAULT_GEMINI_KEY:
-                    error_msg = "⚠️ API Key Gemini diperlukan"
-                    history[-1]["content"] = f'<div class="assistant-message">{error_msg}</div>'
-                    yield history
-                    return
 
-                async for chunk in analyzer.stream_gemini_response(enhanced_message, gemini_key or DEFAULT_GEMINI_KEY):
-                    full_response += chunk
-                    formatted_response = format_response(full_response)
-                    history[-1]["content"] = f'<div class="assistant-message">{formatted_response}</div>'
-                    await asyncio.sleep(0.05)
-                    yield history
-
-            else:  # OLLAMA
-                try:
-                    response = analyze_with_ollama(model_name, enhanced_message)
-                    words = response.split()
-                    for i in range(len(words)):
-                        full_response = " ".join(words[: i + 1])
-                        formatted_response = format_response(full_response)
-                        history[-1]["content"] = f'<div class="assistant-message">{formatted_response}</div>'
-                        await asyncio.sleep(0.05)
-                        yield history
-                except Exception as e:
-                    error_msg = f"⚠️ Error dengan Ollama: {str(e)}\nPastikan:\n1. Ollama berjalan di {OLLAMA_API}\n2. Model {model_name} sudah diinstall"
-                    history[-1]["content"] = f'<div class="assistant-message">{error_msg}</div>'
-                    yield history
+        full_response = ""
+        if provider_choice == AIProvider.XAI:
+            async for chunk in analyzer.stream_xai_response(
+                enhanced_message, xai_key, model_name
+            ):
+                full_response += chunk
+                # Add delay between chunks for readability
+                await asyncio.sleep(1)
+                history[-1]["content"] = full_response
+                yield history
+
+        elif provider_choice == AIProvider.GEMINI:
+            async for chunk in analyzer.stream_gemini_response(
+                enhanced_message, gemini_key or DEFAULT_GEMINI_KEY
+            ):
+                full_response += chunk
+                # Add delay between chunks for readability
+                await asyncio.sleep(1)
+                history[-1]["content"] = full_response
+                yield history
 
-        except Exception as e:
-            error_msg = f"⚠️ Error saat streaming response: {str(e)}"
-            history[-1]["content"] = f'<div class="assistant-message">{error_msg}</div>'
-            yield history
+        else:  # OLLAMA
+            response = analyze_with_ollama(model_name, enhanced_message)
+            # Simulate streaming for OLLAMA with delay
+            words = response.split()
+            for i in range(len(words)):
+                full_response = " ".join(words[: i + 1])
+                await asyncio.sleep(1)
+                history[-1]["content"] = full_response
+                yield history
 
     except Exception as e:
-        error_msg = f"⚠️ Error umum: {str(e)}"
-        history[-1]["content"] = f'<div class="assistant-message">{error_msg}</div>'
+        history[-1]["content"] = f"⚠️ Error: {str(e)}"
         yield history
 
 
-def format_response(text):
-    """Format response text with code blocks"""
-    import re
-    import uuid
-
-    # Replace code blocks with styled versions
-    def replace_code_block(match):
-        language = match.group(1) or ""
-        code = match.group(2)
-        block_id = f"code-block-{uuid.uuid4().hex[:8]}"
-
-        return f'''
-        <div class="code-block">
-            <div class="code-header">
-                <span class="code-title">{language}</span>
-                <button class="code-copy-btn" id="{block_id}-btn" onclick="copyCode('{block_id}')">Copy</button>
-            </div>
-            <pre class="code-content" id="{block_id}">{code}</pre>
-        </div>
-        '''
-
-    # Replace ```language\ncode``` blocks
-    text = re.sub(r"```(\w+)?\n(.*?)```", replace_code_block, text, flags=re.DOTALL)
-
-    # Replace inline code
-    text = re.sub(r"`([^`]+)`", r"<code>\1</code>", text)
-
-    return text
-
-
-def clear_all():
-    """Clear semua input dan status"""
-    return (
-        "",  # repo_url
-        "",  # github_token
-        "",  # branch
-        "",  # clone_status
-        [],  # chat_history
-        [],  # file_selector
-        "<div class='file-list'>Belum ada file yang dipilih</div>",  # file_list
-        "",  # xai_key
-        "",  # gemini_key
-        "grok-2-latest",  # model_dropdown default value
-    )
-
-
 def create_ui():
+    # Gunakan analyzer global
     global analyzer
-    current_time = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+    current_time = datetime.now().strftime("%Y-%m-%d %H:%M")
 
     with gr.Blocks(title="Open Repo AI", theme=gr.themes.Soft()) as app:
         # CSS Styling
         gr.Markdown("""
         <style>
-        /* General Styles */
         .container { max-width: 100% !important; padding: 1rem; }
         .mobile-full { width: 100% !important; }
-        
-        /* Header Styles */
-        .header-info {
-            display: flex;
-            justify-content: space-between;
-            padding: 10px;
+        .file-list { margin: 10px 0; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
+        .file-item { display: flex; justify-content: space-between; padding: 5px 0; }
+        .file-remove { color: red; cursor: pointer; }
+        .example-list {
+            padding: 20px;
             background: #f8f9fa;
-            border-radius: 4px;
-            margin: 10px 0;
-            font-family: monospace;
-        }
-        .timestamp, .user-info {
-            padding: 5px 10px;
-            background: #fff;
-            border-radius: 4px;
+            border-radius: 8px;
             border: 1px solid #e9ecef;
-        }
-        
-        /* File List Styles */
-        .file-list { 
-            margin: 10px 0; 
-            padding: 10px; 
-            border: 1px solid #ddd; 
-            border-radius: 4px; 
-        }
-        .file-item { 
-            display: flex; 
-            justify-content: space-between; 
-            padding: 5px 0; 
-        }
-        
-        /* Collapsible Sections */
-        details {
             margin: 10px 0;
-            border: 1px solid #e9ecef;
-            border-radius: 8px;
-            overflow: hidden;
         }
-        summary {
-            padding: 15px;
-            background: #f8f9fa;
-            cursor: pointer;
-            font-weight: 600;
-            display: flex;
-            align-items: center;
-            transition: background-color 0.3s;
+        .example-list h3 {
+            color: #2c3e50;
+            margin-top: 20px;
+            margin-bottom: 10px;
+            font-size: 1.2em;
         }
-        summary:hover {
-            background: #e9ecef;
-        }
-        .help-content {
-            padding: 15px;
-            background: white;
+        .example-list h4 {
+            color: #34495e;
+            margin-top: 15px;
+            margin-bottom: 5px;
+            font-size: 1.1em;
         }
-        
-        /* Example Sections */
-        .examples-wrapper {
-            margin: 20px 0;
-        }
-        .example-section {
+        .example-list ul {
             margin: 10px 0;
+            padding-left: 20px;
         }
-        .example-content {
-            padding: 15px;
-            background: white;
-        }
-        .example-btn {
-            width: 100%;
-            text-align: left;
-            padding: 8px 12px;
-            background: #f8f9fa;
-            border: 1px solid #e9ecef;
-            border-radius: 4px;
-            cursor: pointer;
-            transition: all 0.3s;
+        .example-list li {
+            margin: 8px 0;
+            line-height: 1.5;
+            list-style-type: disc;
         }
-        .example-btn:hover {
+        .example-list code {
             background: #e9ecef;
-            border-color: #dee2e6;
-        }
-        
-        /* Chat Message Styling */
-        .message-wrap {
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-        }
-        .user-message, .assistant-message {
-            padding: 1rem;
-            border-radius: 8px;
-            max-width: 90%;
-        }
-        .user-message {
-            align-self: flex-end;
-            background: #007AFF;
-            color: white;
-        }
-        .assistant-message {
-            align-self: flex-start;
-            background: #f8f9fa;
-            border: 1px solid #e9ecef;
-        }
-        
-        /* Code Block Styling */
-        .code-block {
-            position: relative;
-            margin: 1rem 0;
-            border-radius: 8px;
-            overflow: hidden;
-            border: 1px solid #e9ecef;
-        }
-        .code-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 0.5rem 1rem;
-            background: #f8f9fa;
-            border-bottom: 1px solid #e9ecef;
-        }
-        .code-title {
-            font-family: monospace;
-            font-weight: bold;
-            color: #495057;
-        }
-        .code-copy-btn {
-            padding: 4px 8px;
-            font-size: 12px;
-            color: #6c757d;
-            background: white;
-            border: 1px solid #ced4da;
+            padding: 2px 5px;
             border-radius: 4px;
-            cursor: pointer;
-            transition: all 0.2s;
+            font-family: monospace;
+            font-size: 0.9em;
         }
-        .code-copy-btn:hover {
-            background: #e9ecef;
-            border-color: #adb5bd;
+        .example-list strong {
+            color: #2c3e50;
+            font-weight: bold;
         }
-        .code-content {
-            padding: 1rem;
-            background: #282a36;
-            color: #f8f8f2;
-            overflow-x: auto;
-            font-family: monospace;
+        .example-list p {
+            margin: 10px 0;
+            line-height: 1.5;
         }
-        
-        /* Media Queries */
         @media (max-width: 768px) {
             .gr-form { flex-direction: column !important; }
             .gr-group { margin: 0.5rem 0 !important; }
         }
-        .clear-button {
-            background: #dc3545 !important;
-            color: white !important;
-            border: none !important;
-            padding: 0.5rem 1rem !important;
-            border-radius: 4px !important;
-            cursor: pointer !important;
-            transition: background-color 0.2s !important;
-        }
-        
-        .clear-button:hover {
-            background: #c82333 !important;
-        }
-        
-        /* Button Container */
-        .button-container {
-            display: flex;
-            gap: 10px;
-            margin-top: 10px;
-        }
-        
-        .button-container button {
-            flex: 1;
-        }
         </style>
-
-        <script>
-        function copyCode(blockId) {
-            const codeBlock = document.getElementById(blockId);
-            const code = codeBlock.innerText;
-            navigator.clipboard.writeText(code).then(() => {
-                const btn = document.querySelector(`#${blockId}-btn`);
-                btn.innerText = 'Copied!';
-                setTimeout(() => {
-                    btn.innerText = 'Copy';
-                }, 2000);
-            });
-        }
-        
-        function setQuestion(text) {
-            const chatInput = document.querySelector('textarea[data-testid="textbox"]');
-            if (chatInput) {
-                chatInput.value = text;
-                chatInput.focus();
-            }
-        }
-        </script>
         """)
 
         # Header
         with gr.Row(elem_classes="container"):
             gr.Markdown(f"""
-            # AI Github Repository Chat
+            # AI Github Repository Chat 
             
-            <div class="header-info">
-                <span class="timestamp">Current Date and Time (UTC - YYYY-MM-DD HH:MM:SS formatted): {current_time}</span>
-            </div>
+            - Current Date and Time (UTC): {current_time}
             """)
 
         # Main Tabs Container
         with gr.Tabs() as tabs:
             # Configuration Tab
-            with gr.Tab("🛠️ Konfigurasi"):
+            with gr.Tab("Konfigurasi"):
                 provider = gr.Radio(
                     choices=[AIProvider.XAI, AIProvider.GEMINI, AIProvider.OLLAMA],
-                    label="Penyedia AI",
+                    label="AI Providers",
                     value=AIProvider.XAI,
                 )
 
                 with gr.Group() as api_settings:
-                    # X.AI API Key section
                     with gr.Row():
-                        with gr.Column(scale=3):
-                            xai_key = gr.Textbox(
-                                label="X.AI (Grok) API Key",
-                                type="password",
-                                placeholder="Opsional - Klik (?) untuk info",
-                                show_label=True,
-                            )
+                        xai_key = gr.Textbox(
+                            label="X.AI (Grok) API Key (opsional)",
+                            type="password",
+                            placeholder="Memakai Apikey Kamu Sendiri",
+                            show_label=True,
+                            scale=3,
+                        )
                         with gr.Column(scale=1):
-                            gr.Markdown("""
-                            <details>
-                                <summary>❓ Cara Mendapatkan X.AI API Key</summary>
-                                <div class="help-content">
-                                    <ol>
-                                        <li>Kunjungi <a href="https://x.ai" target="_blank">X.AI Developer Portal</a></li>
-                                        <li>Daftar/Login ke akun Anda</li>
-                                        <li>Buat API Key baru</li>
-                                        <li>Salin API Key</li>
-                                    </ol>
-                                    <p><strong>Catatan:</strong></p>
-                                    <ul>
-                                        <li>Jika tidak diisi, akan menggunakan API key default</li>
-                                        <li>Masukkan API key Anda sendiri jika default mencapai limit</li>
-                                    </ul>
-                                </div>
-                            </details>
-                            """)
-
-                    # Gemini API Key section
+                            gr.Markdown(XAI_API_HELP)
+
                     with gr.Row():
-                        with gr.Column(scale=3):
-                            gemini_key = gr.Textbox(
-                                label="Gemini API Key",
-                                type="password",
-                                placeholder="Opsional - Klik (?) untuk info",
-                                show_label=True,
-                            )
+                        gemini_key = gr.Textbox(
+                            label="Gemini API Key",
+                            type="password",
+                            placeholder="Opsional - Kosongkan untuk gunakan key default",
+                            show_label=True,
+                            scale=3,
+                        )
                         with gr.Column(scale=1):
-                            gr.Markdown("""
-                            <details>
-                                <summary>❓ Cara Mendapatkan Gemini API Key</summary>
-                                <div class="help-content">
-                                    <ol>
-                                        <li>Kunjungi <a href="https://makersuite.google.com/app/apikey" target="_blank">Google AI Studio</a></li>
-                                        <li>Login dengan akun Google Anda</li>
-                                        <li>Klik "Create API Key"</li>
-                                        <li>Salin API Key yang dihasilkan</li>
-                                    </ol>
-                                    <p><strong>Catatan:</strong></p>
-                                    <ul>
-                                        <li>Gemini memberikan kuota gratis setiap bulan</li>
-                                        <li>Key bisa dibuat ulang jika diperlukan</li>
-                                        <li>Monitor penggunaan di <a href="https://console.cloud.google.com/" target="_blank">Google Cloud Console</a></li>
-                                    </ul>
-                                </div>
-                            </details>
-                            """)
+                            gr.Markdown(GEMINI_API_HELP)
 
                 with gr.Row():
                     model_dropdown = gr.Dropdown(
@@ -802,9 +557,9 @@ def create_ui():
                     )
 
             # Repository Analysis Tab
-            with gr.Tab("📊 Analisis Repository"):
+            with gr.Tab("Analisis Repository"):
                 with gr.Group():
-                    # Repository URL input
+                    # Repository URL and Token inputs
                     with gr.Row():
                         repo_url = gr.Textbox(
                             label="URL Repository GitHub",
@@ -812,35 +567,15 @@ def create_ui():
                             elem_classes="mobile-full",
                         )
 
-                    # GitHub Token section
                     with gr.Row():
                         with gr.Column(scale=2):
                             github_token = gr.Textbox(
-                                label="Token GitHub",
+                                label="Token GitHub (opsional)",
                                 type="password",
-                                placeholder="Klik (?) untuk panduan",
+                                placeholder="Masukkan github token jika repo private",
                                 elem_classes="mobile-full",
                             )
-                            gr.Markdown("""
-                            <details>
-                                <summary>❓ Cara Mendapatkan GitHub Token</summary>
-                                <div class="help-content">
-                                    <ol>
-                                        <li>Kunjungi <a href="https://github.com/settings/tokens" target="_blank">GitHub Token Settings</a></li>
-                                        <li>Klik "Generate new token" > "Generate new token (classic)"</li>
-                                        <li>Beri nama token Anda di "Note"</li>
-                                        <li>Pilih scope:
-                                            <ul>
-                                                <li><code>repo</code> (untuk akses repository private)</li>
-                                                <li><code>read:packages</code> (opsional, untuk akses package)</li>
-                                            </ul>
-                                        </li>
-                                        <li>Klik "Generate token"</li>
-                                        <li><strong>PENTING:</strong> Salin token segera! Token hanya ditampilkan sekali</li>
-                                    </ol>
-                                </div>
-                            </details>
-                            """)
+                            gr.Markdown(GITHUB_TOKEN_HELP)
                         with gr.Column(scale=1):
                             branch = gr.Textbox(
                                 label="Branch (opsional)",
@@ -848,18 +583,20 @@ def create_ui():
                                 elem_classes="mobile-full",
                             )
 
-                    # Clone Button and Status
+                
                     clone_button = gr.Button(
-                        "🔄 Clone Repository",
+                        "Analisa Repo",
                         variant="primary",
                         elem_classes="mobile-full",
                     )
 
-                    clone_status = gr.Markdown(value="", label="Status Repository", elem_classes="mobile-full")
+                    clone_status = gr.Markdown(
+                        value="", label="Status Repository", elem_classes="mobile-full"
+                    )
 
                     # File Selection
                     with gr.Group():
-                        gr.Markdown("### 📎 File yang Dipilih")
+                        gr.Markdown("###  File yang Dipilih")
                         with gr.Row():
                             file_selector = gr.Dropdown(
                                 label="Pilih File dari Repository",
@@ -877,200 +614,17 @@ def create_ui():
                         )
 
             # Examples Tab
-            with gr.Tab("💡 Examples"):
-                gr.Markdown("""
-                <style>
-                /* Styling untuk collapse */
-                .examples-container {
-                    padding: 20px;
-                    background: #fff;
-                    border-radius: 8px;
-                }
-                
-                .category-collapse {
-                    margin-bottom: 15px;
-                    border: 1px solid #e9ecef;
-                    border-radius: 8px;
-                    overflow: hidden;
-                }
-                
-                .category-header {
-                    padding: 15px;
-                    background: #f8f9fa;
-                    cursor: pointer;
-                    user-select: none;
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                    transition: background-color 0.2s;
-                }
-                
-                .category-header:hover {
-                    background: #e9ecef;
-                }
-                
-                .category-content {
-                    padding: 15px;
-                    display: none;
-                    border-top: 1px solid #e9ecef;
-                }
-                
-                .category-collapse.active .category-content {
-                    display: block;
-                    animation: slideDown 0.3s ease-out;
-                }
-                
-                .category-header::after {
-                    content: '▼';
-                    font-size: 12px;
-                    transition: transform 0.3s;
-                }
-                
-                .category-collapse.active .category-header::after {
-                    transform: rotate(180deg);
-                }
-                
-                .example-button {
-                    display: block;
-                    width: 100%;
-                    padding: 10px;
-                    margin: 5px 0;
-                    text-align: left;
-                    background: #fff;
-                    border: 1px solid #e9ecef;
-                    border-radius: 4px;
-                    cursor: pointer;
-                    transition: all 0.2s;
-                }
-                
-                .example-button:hover {
-                    background: #f8f9fa;
-                    border-color: #dee2e6;
-                }
-                
-                @keyframes slideDown {
-                    from {
-                        opacity: 0;
-                        transform: translateY(-10px);
-                    }
-                    to {
-                        opacity: 1;
-                        transform: translateY(0);
-                    }
-                }
-                </style>
-                
-                <div class="examples-container">
-                    <h3>🎯 Contoh Pertanyaan</h3>
-                    <p>Klik pada kategori untuk melihat contoh pertanyaan yang bisa diajukan</p>
-                    
-                    <div class="category-collapse">
-                        <div class="category-header">
-                            🔍 Analisis Kode
-                        </div>
-                        <div class="category-content">
-                            <button class="example-button" onclick="setQuestion('Jelaskan logika dan alur dari kode ini')">
-                                Jelaskan logika dari kode
-                            </button>
-                            <button class="example-button" onclick="setQuestion('Bagaimana cara mengoptimalkan performa kode ini?')">
-                                Optimasi performa
-                            </button>
-                            <button class="example-button" onclick="setQuestion('Apakah ada potential bugs yang perlu diperbaiki?')">
-                                Cek potential bugs
-                            </button>
-                        </div>
-                    </div>
-                    
-                    <div class="category-collapse">
-                        <div class="category-header">
-                            📚 Best Practices
-                        </div>
-                        <div class="category-content">
-                            <button class="example-button" onclick="setQuestion('Apa saja best practices yang bisa diterapkan di kode ini?')">
-                                Saran best practices
-                            </button>
-                            <button class="example-button" onclick="setQuestion('Bagaimana cara meningkatkan maintainability kode ini?')">
-                                Improve maintainability
-                            </button>
-                            <button class="example-button" onclick="setQuestion('Berikan saran untuk meningkatkan code quality')">
-                                Improve code quality
-                            </button>
-                        </div>
-                    </div>
-                    
-                    <div class="category-collapse">
-                        <div class="category-header">
-                            🧪 Testing
-                        </div>
-                        <div class="category-content">
-                            <button class="example-button" onclick="setQuestion('Buatkan unit test untuk fungsi ini')">
-                                Generate unit tests
-                            </button>
-                            <button class="example-button" onclick="setQuestion('Bagaimana cara test error handling yang baik?')">
-                                Test error handling
-                            </button>
-                            <button class="example-button" onclick="setQuestion('Berikan saran untuk meningkatkan test coverage')">
-                                Improve test coverage
-                            </button>
-                        </div>
-                    </div>
-                    
-                    <div class="category-collapse">
-                        <div class="category-header">
-                            📝 Dokumentasi
-                        </div>
-                        <div class="category-content">
-                            <button class="example-button" onclick="setQuestion('Buatkan dokumentasi untuk fungsi-fungsi utama')">
-                                Generate documentation
-                            </button>
-                            <button class="example-button" onclick="setQuestion('Buat README.md untuk project ini')">
-                                Create README.md
-                            </button>
-                            <button class="example-button" onclick="setQuestion('Jelaskan cara penggunaan library/framework')">
-                                Usage guide
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            
-                <script>
-                document.addEventListener('DOMContentLoaded', function() {
-                    // Handle collapse functionality
-                    const categories = document.querySelectorAll('.category-collapse');
-                    
-                    categories.forEach(category => {
-                        const header = category.querySelector('.category-header');
-                        
-                        header.addEventListener('click', () => {
-                            const isActive = category.classList.contains('active');
-                            
-                            // Close all categories
-                            categories.forEach(c => c.classList.remove('active'));
-                            
-                            // If clicked category wasn't active, open it
-                            if (!isActive) {
-                                category.classList.add('active');
-                            }
-                        });
-                    });
-                });
-            
-                // Function to set question in chat input
-                function setQuestion(text) {
-                    const chatInput = document.querySelector('textarea[data-testid="textbox"]');
-                    if (chatInput) {
-                        chatInput.value = text;
-                        chatInput.focus();
-                    }
-                }
-                </script>
-                """)
+            with gr.Tab("Ide Cepat"):
+                example_output = gr.HTML(
+                    value="Pilih file di tab Analisis Repository untuk melihat contoh pertanyaan.",
+                    label="Contoh Pertanyaan",
+                )
 
         # Chat Interface (outside tabs)
         with gr.Group():
             chat_history = gr.Chatbot(
-                label="📝 Riwayat Chat",
-                height=500,
+                label="Open Repo AI Assistant",
+                height=300,
                 show_label=True,
                 type="messages",
                 elem_classes="mobile-full",
@@ -1078,20 +632,19 @@ def create_ui():
 
             with gr.Row():
                 chat_input = gr.Textbox(
-                    label="💭 Tanyakan tentang Repository",
-                    placeholder="Ketik pertanyaan Anda di sini...",
+                    label="Chat Dengan Repository",
+                    placeholder="Ketik di sini...",
                     lines=3,
                     elem_classes="mobile-full",
                 )
-                with gr.Column(scale=1):
-                    send_button = gr.Button("📤 Kirim", variant="primary")
-                    clear_button = gr.Button("🧹 Bersihkan Semua", variant="secondary")
+                send_button = gr.Button("Kirim", variant="primary")
+                clear_button = gr.Button("Bersihkan", variant="secondary")
 
         # Event Handlers
         def handle_clone(repo_url, github_token, branch):
             if not repo_url:
                 return (
-                    "⚠️ URL repository diperlukan!",
+                    "URL repository diperlukan!",
                     gr.Dropdown(choices=[]),
                     "<div class='file-list'>Belum ada file yang dipilih</div>",
                 )
@@ -1122,6 +675,88 @@ def create_ui():
             html += "</div>"
             return html
 
+        def generate_examples(selected_files):
+                if not selected_files:
+                    return """
+                    <div class='example-list'>
+                        <h3>Pilih File Terlebih Dahulu</h3>
+                        <p>Silakan pilih file di tab Analisis Repository untuk melihat contoh pertanyaan yang relevan.</p>
+                    </div>
+                    """
+
+                examples = "<div class='example-list'>"
+
+                # General examples for any file
+                examples += """
+                <h3>Contoh Pertanyaan Umum:</h3>
+                <ul>
+                """
+
+                file_names = ", ".join(
+                    [f"<code>{f.split('/')[-1]}</code>" for f in selected_files]
+                )
+                examples += f"""
+                    <li><strong>Analisis Kode:</strong> "Jelaskan logika dan fungsi utama dari {file_names}"</li>
+                    <li><strong>Deteksi Bug:</strong> "Apakah ada potensi bug atau masalah keamanan di file-file ini?"</li>
+                    <li><strong>Best Practices:</strong> "Bagaimana cara mengoptimalkan kode di file-file ini?"</li>
+                """
+
+                # Specific examples based on file types
+                for file in selected_files:
+                    filename = file.split("/")[-1]
+                    ext = filename.split(".")[-1].lower() if "." in filename else ""
+                    examples += f"<h4>Contoh untuk {filename}:</h4><ul>"
+
+                    if ext in ["py", "js", "java", "cpp", "c", "go"]:
+                        examples += f"""
+                            <li>"Jelaskan fungsi-fungsi utama di {filename}"</li>
+                            <li>"Bagaimana cara mengoptimalkan performa di {filename}?"</li>
+                            <li>"Buat unit test untuk fungsi-fungsi di {filename}"</li>
+                        """
+                    elif ext in ["html", "css"]:
+                        examples += f"""
+                            <li>"Analisis struktur dan layout dari {filename}"</li>
+                            <li>"Bagaimana cara membuat {filename} lebih responsif?"</li>
+                            <li>"Optimasi untuk mobile view di {filename}"</li>
+                        """
+                    elif ext == "md":
+                        examples += f"""
+                            <li>"Ringkas isi dokumentasi dari {filename}"</li>
+                            <li>"Buat tabel konten untuk {filename}"</li>
+                            <li>"Perbaiki formatting di {filename}"</li>
+                        """
+                    elif ext in ["json", "yaml", "yml"]:
+                        examples += f"""
+                            <li>"Validasi struktur data di {filename}"</li>
+                            <li>"Jelaskan konfigurasi di {filename}"</li>
+                            <li>"Optimasi format di {filename}"</li>
+                        """
+                    elif ext == "dockerfile":
+                        examples += f"""
+                            <li>"Analisis keamanan dari {filename}"</li>
+                            <li>"Optimasi multi-stage build di {filename}"</li>
+                            <li>"Best practices untuk {filename}"</li>
+                        """
+                    else:
+                        examples += f"""
+                            <li>"Analisis isi dari {filename}"</li>
+                            <li>"Jelaskan struktur dan tujuan {filename}"</li>
+                            <li>"Saran perbaikan untuk {filename}"</li>
+                        """
+                    examples += "</ul>"
+
+                examples += """
+                <h3>Tips:</h3>
+                <ul>
+                    <li>Gunakan pertanyaan yang spesifik dan fokus pada bagian tertentu</li>
+                    <li>Sebutkan nama file jika bertanya tentang file tertentu</li>
+                    <li>Jelaskan konteks atau masalah yang ingin diselesaikan</li>
+                </ul>
+                """
+
+                examples += "</div>"
+                return examples
+
         def clear_chat_history():
             return []
 
@@ -1141,8 +776,8 @@ def create_ui():
                 )
             except Exception as e:
                 return gr.Dropdown(
-                    choices=["grok-2-latest"] if provider_choice == AIProvider.XAI else ["gemini-pro"],
-                    value="grok-2-latest" if provider_choice == AIProvider.XAI else "gemini-pro",
+                    choices=["grok-2-latest"] if provider_choice == AIProvider.XAI else ["gemini-1.5-flash"],
+                    value="grok-2-latest" if provider_choice == AIProvider.XAI else "gemini-1.5-flash",
                     label=f"Model AI (Error: {str(e)})",
                 )
 
@@ -1167,27 +802,26 @@ def create_ui():
             outputs=[clone_status, file_selector, file_list],
         )
 
-        file_selector.change(fn=update_file_list, inputs=[file_selector], outputs=[file_list])
+        file_selector.change(
+            fn=update_file_list, inputs=[file_selector], outputs=[file_list]
+        )
 
-        clear_button = gr.Button("🧹 Bersihkan Semua", variant="secondary")
+        # Example tab updates
+        tabs.select(
+            fn=generate_examples,
+            inputs=[file_selector],
+            outputs=[example_output],
+            api_name=False,
+        )
 
-        # Chat events
-        clear_button.click(
-            fn=clear_all,
-            outputs=[
-                repo_url,
-                github_token,
-                branch,
-                clone_status,
-                chat_history,
-                file_selector,
-                file_list,
-                xai_key,
-                gemini_key,
-                model_dropdown,
-            ],
+        # Also update when file selection changes
+        file_selector.change(
+            fn=generate_examples, inputs=[file_selector], outputs=[example_output]
         )
 
+        # Chat events
+        clear_button.click(fn=clear_chat_history, outputs=[chat_history])
+
         send_button.click(
             fn=handle_chat,
             inputs=[
@@ -1222,10 +856,9 @@ def create_ui():
 
 
 if __name__ == "__main__":
-    print("""
-    🚀 Starting Repository Chat Analysis
-    ====================================
+    print(f"""
+    🚀 Memulai Repository Chat Analysis
     """)
 
     app = create_ui()
-    app.launch(share=True, server_name="0.0.0.0", server_port=7860, debug=True)
+    app.launch(share=True)