fix: ui and clone repo

app.py

@@ -49,8 +49,6 @@ GEMINI_MODELS = [
     "gemini-pro-vision",
 ]
 
-# Help texts
-
 GITHUB_TOKEN_HELP = """
 ### Cara Mendapatkan GitHub Token:
 
@@ -96,6 +94,7 @@ Catatan:
 - Ideal untuk privasi dan penggunaan offline
 """
 
+# Help texts
 XAI_API_HELP = """
 ### Cara Mendapatkan X.AI (Grok) API Key:
 
@@ -281,163 +280,243 @@ class RepoAnalyzer:
 def create_ui():
     analyzer = RepoAnalyzer()
     
-    with gr.Blocks(title="Repository Chat Analysis") as app:
-        gr.Markdown(f"""
-        # 🤖 Repository Chat Analysis
-        
-        📅 Waktu: {CURRENT_TIME}
-        👤 Pengguna: {CURRENT_USER}
+    with gr.Blocks(title="Repository Chat Analysis", theme=gr.themes.Soft()) as app:
+        # Add CSS for better mobile responsiveness
+        gr.Markdown("""
+        <style>
+        .container {
+            max-width: 100% !important;
+            padding: 1rem;
+        }
+        .mobile-full {
+            width: 100% !important;
+        }
+        @media (max-width: 768px) {
+            .gr-form {
+                flex-direction: column !important;
+            }
+            .gr-box {
+                margin: 0.5rem 0 !important;
+            }
+        }
+        </style>
         """)
 
-        with gr.Tab("🛠️ Konfigurasi"):
-            provider = gr.Radio(
-                choices=[AIProvider.XAI, AIProvider.GEMINI, AIProvider.OLLAMA],
-                label="Penyedia AI",
-                value=AIProvider.XAI
-            )
+        with gr.Row(elem_classes="container"):
+            gr.Markdown(f"""
+            # 🤖 Repository Chat Analysis
             
-            with gr.Group() as api_settings:
-                with gr.Row():
-                    xai_key = gr.Textbox(
-                        label="X.AI (Grok) API Key",
-                        type="password",
-                        placeholder="Opsional - Klik icon (?) untuk info. Kosongkan untuk gunakan key default",
-                        show_label=True
-                    )
-                    gr.Markdown(XAI_API_HELP)
+            📅 Waktu: {CURRENT_TIME}  
+            👤 Pengguna: {CURRENT_USER}
+            """)
+
+        with gr.Tabs() as tabs:
+            with gr.TabItem("🛠️ Konfigurasi", elem_classes="mobile-full"):
+                provider = gr.Radio(
+                    choices=[AIProvider.XAI, AIProvider.GEMINI, AIProvider.OLLAMA],
+                    label="Penyedia AI",
+                    value=AIProvider.XAI,
+                    interactive=True,
+                    elem_classes="mobile-full"
+                )
                 
+                with gr.Group() as api_settings:
+                    with gr.Box():
+                        with gr.Row():
+                            xai_key = gr.Textbox(
+                                label="X.AI (Grok) API Key",
+                                type="password",
+                                placeholder="Opsional - Klik icon (?) untuk info",
+                                show_label=True,
+                                scale=3
+                            )
+                            with gr.Column(scale=1):
+                                gr.Markdown(XAI_API_HELP)
+                    
+                    with gr.Box():
+                        with gr.Row():
+                            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(GEMINI_API_HELP)
+
+                # Model selection with better layout
                 with gr.Row():
-                    gemini_key = gr.Textbox(
-                        label="Gemini API Key",
-                        type="password",
-                        placeholder="Opsional - Kosongkan untuk gunakan key default",
-                        show_label=True
+                    model_dropdown = gr.Dropdown(
+                        label="Model AI",
+                        choices=XAI_MODELS,
+                        value="grok-2-latest",
+                        interactive=True,
+                        elem_classes="mobile-full"
                     )
-                    gr.Markdown(GEMINI_API_HELP)
-
-            # Model selection based on provider
-            with gr.Row():
-                model_dropdown = gr.Dropdown(
-                    label="Model AI",
-                    choices=XAI_MODELS,
-                    value="grok-2-latest",
-                    interactive=True
-                )
 
-            def update_model_list(provider_choice):
-                if provider_choice == AIProvider.XAI:
-                    return gr.Dropdown(choices=XAI_MODELS, value="grok-2-latest")
-                elif provider_choice == AIProvider.GEMINI:
-                    return gr.Dropdown(choices=GEMINI_MODELS, value="gemini-pro")
-                else:  # OLLAMA
-                    return gr.Dropdown(choices=OLLAMA_MODELS, value="llama2")
-            
-            provider.change(
-                fn=update_model_list,
-                inputs=[provider],
-                outputs=[model_dropdown]
-            )
-
-        with gr.Tab("📊 Analisis Repository"):
-            with gr.Row():
-                repo_url = gr.Textbox(
-                    label="URL Repository GitHub",
-                    placeholder="Contoh: https://github.com/username/repository"
+            with gr.TabItem("📊 Analisis Repository", elem_classes="mobile-full"):
+                with gr.Box():
+                    with gr.Row():
+                        repo_url = gr.Textbox(
+                            label="URL Repository GitHub",
+                            placeholder="https://github.com/username/repository",
+                            elem_classes="mobile-full"
+                        )
+                    
+                    with gr.Row():
+                        with gr.Column(scale=2):
+                            github_token = gr.Textbox(
+                                label="Token GitHub", 
+                                type="password",
+                                placeholder="Klik icon (?) untuk panduan",
+                                elem_classes="mobile-full"
+                            )
+                        with gr.Column(scale=1):
+                            branch = gr.Textbox(
+                                label="Branch (opsional)",
+                                placeholder="main",
+                                elem_classes="mobile-full"
+                            )
+                
+                # Fix clone repository functionality
+                clone_button = gr.Button(
+                    "🔄 Clone Repository",
+                    variant="primary",
+                    elem_classes="mobile-full"
                 )
-                with gr.Column():
-                    github_token = gr.Textbox(
-                        label="Token GitHub", 
-                        type="password",
-                        placeholder="Klik icon (?) untuk panduan mendapatkan token"
-                    )
-                    gr.Markdown(GITHUB_TOKEN_HELP)
-                branch = gr.Textbox(
-                    label="Branch (opsional)",
-                    placeholder="main"
+                
+                clone_status = gr.Markdown(
+                    "",
+                    label="Status Repository",
+                    elem_classes="mobile-full"
                 )
-            
-            clone_button = gr.Button("🔄 Clone Repository", variant="primary")
-            clone_status = gr.Markdown(
-                label="Status Repository",
-            )
-            
-            gr.Markdown("""
-            ### 💡 Contoh Pertanyaan:
-            - "Jelaskan struktur utama dari repository ini"
-            - "Apa saja fitur-fitur utama dalam kode ini?"
-            - "Bagaimana cara memperbaiki [masalah specific] di repository ini?"
-            - "Tolong analisis kualitas kode di file [nama file]"
-            """)
-            
-            with gr.Row():
-                chat_input = gr.Textbox(
-                    label="💭 Tanyakan tentang Repository",
-                    placeholder="Ketik pertanyaan Anda di sini...",
-                    lines=3
+                
+                def handle_clone(repo_url, github_token, branch):
+                    if not repo_url:
+                        return "⚠️ URL repository diperlukan!"
+                    success, message = analyzer.clone_repository(repo_url, github_token, branch)
+                    return message
+
+                # Connect clone button click event
+                clone_button.click(
+                    fn=handle_clone,
+                    inputs=[repo_url, github_token, branch],
+                    outputs=clone_status
                 )
-                send_button = gr.Button("📤 Kirim", variant="primary")
-            
-            chat_history = gr.Chatbot(
-                label="📝 Riwayat Chat",
-                height=500,
-                show_label=True
-            )
 
-            async def handle_chat(message, history, provider_choice, model_name, xai_key, gemini_key):
-                if not analyzer.current_repo:
-                    yield history + [[message, "⚠️ Mohon clone repository terlebih dahulu sebelum mengajukan pertanyaan."]]
-                    return
+                gr.Markdown("""
+                ### 💡 Contoh Pertanyaan:
+                - "Jelaskan struktur utama dari repository ini"
+                - "Apa saja fitur-fitur utama dalam kode ini?"
+                - "Bagaimana cara memperbaiki [masalah specific] di repository ini?"
+                - "Tolong analisis kualitas kode di file [nama file]"
+                """)
                 
-                history = history or []
-                history.append([message, ""])
+                # Improved chat interface
+                with gr.Box():
+                    chat_input = gr.Textbox(
+                        label="💭 Tanyakan tentang Repository",
+                        placeholder="Ketik pertanyaan Anda di sini...",
+                        lines=3,
+                        elem_classes="mobile-full"
+                    )
+                    send_button = gr.Button(
+                        "📤 Kirim",
+                        variant="primary",
+                        elem_classes="mobile-full"
+                    )
                 
-                full_response = ""
-                if provider_choice == AIProvider.XAI:
-                    async for chunk in analyzer.stream_xai_response(message, xai_key, model_name):
-                        full_response += chunk
-                        history[-1][1] = full_response
-                        yield history
-                elif provider_choice == AIProvider.GEMINI:
-                    async for chunk in analyzer.stream_gemini_response(message, gemini_key or DEFAULT_GEMINI_KEY):
-                        full_response += chunk
-                        history[-1][1] = full_response
+                chat_history = gr.Chatbot(
+                    label="📝 Riwayat Chat",
+                    height=500,
+                    show_label=True,
+                    elem_classes="mobile-full"
+                )
+
+                # Add loading indicator
+                with gr.Row():
+                    loading_indicator = gr.HTML(
+                        '<div id="loading" style="display:none">Memproses permintaan...</div>'
+                    )
+
+                async def handle_chat(message, history, provider_choice, model_name, xai_key, gemini_key):
+                    if not analyzer.current_repo:
+                        yield history + [[message, "⚠️ Mohon clone repository terlebih dahulu sebelum mengajukan pertanyaan."]]
+                        return
+                    
+                    history = history or []
+                    history.append([message, ""])
+                    
+                    try:
+                        full_response = ""
+                        if provider_choice == AIProvider.XAI:
+                            async for chunk in analyzer.stream_xai_response(message, xai_key, model_name):
+                                full_response += chunk
+                                history[-1][1] = full_response
+                                yield history
+                        elif provider_choice == AIProvider.GEMINI:
+                            async for chunk in analyzer.stream_gemini_response(message, gemini_key or DEFAULT_GEMINI_KEY):
+                                full_response += chunk
+                                history[-1][1] = full_response
+                                yield history
+                        else:  # OLLAMA
+                            response = analyze_with_ollama(model_name, message)
+                            history[-1][1] = response
+                            yield history
+                    except Exception as e:
+                        history[-1][1] = f"⚠️ Error: {str(e)}"
                         yield history
-                else:  # OLLAMA
-                    response = analyze_with_ollama(model_name, message)
-                    history[-1][1] = response
-                    yield history
-
-            send_button.click(
-                fn=handle_chat,
-                inputs=[
-                    chat_input,
-                    chat_history,
-                    provider,
-                    model_dropdown,
-                    xai_key,
-                    gemini_key
-                ],
-                outputs=chat_history
-            ).then(
-                fn=lambda: gr.update(value=""),
-                outputs=chat_input
-            )
 
-            chat_input.submit(
-                fn=handle_chat,
-                inputs=[
-                    chat_input,
-                    chat_history,
-                    provider,
-                    model_dropdown,
-                    xai_key,
-                    gemini_key
-                ],
-                outputs=chat_history
-            ).then(
-                fn=lambda: gr.update(value=""),
-                outputs=chat_input
-            )
+                # Connect chat events with loading states
+                send_event = send_button.click(
+                    fn=handle_chat,
+                    inputs=[
+                        chat_input,
+                        chat_history,
+                        provider,
+                        model_dropdown,
+                        xai_key,
+                        gemini_key
+                    ],
+                    outputs=chat_history,
+                    show_progress=True
+                ).then(
+                    fn=lambda: gr.update(value=""),
+                    outputs=chat_input
+                )
+
+                input_event = chat_input.submit(
+                    fn=handle_chat,
+                    inputs=[
+                        chat_input,
+                        chat_history,
+                        provider,
+                        model_dropdown,
+                        xai_key,
+                        gemini_key
+                    ],
+                    outputs=chat_history,
+                    show_progress=True
+                ).then(
+                    fn=lambda: gr.update(value=""),
+                    outputs=chat_input
+                )
+
+        # Update provider change handler
+        def update_model_list(provider_choice):
+            if provider_choice == AIProvider.XAI:
+                return gr.Dropdown(choices=XAI_MODELS, value="grok-2-latest")
+            elif provider_choice == AIProvider.GEMINI:
+                return gr.Dropdown(choices=GEMINI_MODELS, value="gemini-1.5-mini")
+            else:  # OLLAMA
+                return gr.Dropdown(choices=OLLAMA_MODELS, value="llama2")
+        
+        provider.change(
+            fn=update_model_list,
+            inputs=[provider],
+            outputs=[model_dropdown]
+        )
 
     return app
 
@@ -449,4 +528,9 @@ if __name__ == "__main__":
     """)
     
     app = create_ui()
-    app.launch(share=True)
+    app.launch(
+        share=True,
+        show_error=True,
+        server_name="0.0.0.0",
+        server_port=7860
+    )