Update app.py

app.py

@@ -1,14 +1,14 @@
 import gradio as gr
 import os
+import time
 from pathlib import Path
 import subprocess
 import requests
 import json
-import time
-import asyncio
 from datetime import datetime
 import textwrap
 import google.generativeai as genai
+import asyncio
 from typing import Generator, AsyncGenerator, List
 from openai import AsyncOpenAI
 import dotenv
@@ -50,6 +50,8 @@ GEMINI_MODELS = [
     "gemini-pro-vision",
 ]
 
+# Help texts
+
 GITHUB_TOKEN_HELP = """
 ### Cara Mendapatkan GitHub Token:
 
@@ -95,7 +97,6 @@ Catatan:
 - Ideal untuk privasi dan penggunaan offline
 """
 
-# Help texts
 XAI_API_HELP = """
 ### Cara Mendapatkan X.AI (Grok) API Key:
 
@@ -278,246 +279,84 @@ class RepoAnalyzer:
                 continue
         return False, "Tidak dapat membaca file dengan encoding yang didukung"
 
-async def handle_chat(message, history, provider_choice, model_name, xai_key, gemini_key, selected_files):
-    if not analyzer.current_repo:
-        yield history + [[message, "⚠️ Mohon clone repository terlebih dahulu sebelum mengajukan pertanyaan."]]
-        return
-        
-    history = history or []
-    history.append([message, ""])
-        
-    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, "")
-                escaped_content = content.replace('`', r'\`')
-                    
-                html = (
-                    '<div class="wrapper-artifact">'
-                    f'<div class="header-artifact">'
-                    f'<span>{file}</span>'
-                    f'<button class="copy-button" onclick="copyToClipboard(`{escaped_content}`)">Copy</button>'
-                    '</div>'
-                    '<div class="content-artifact">'
-                    f'<pre><code>{content}</code></pre>'
-                    '</div>'
-                    '</div>'
-                )
-                file_context += html
-            
-        enhanced_message = f"{message}\n{file_context}"
-            
-        full_response = ""
-        if provider_choice == AIProvider.XAI:
-            async for chunk in analyzer.stream_xai_response(enhanced_message, xai_key, model_name):
-                    # Wrap code blocks in custom styling
-                chunk = process_code_blocks(chunk)
-                full_response += chunk
-                await asyncio.sleep(0.08)
-                history[-1][1] = 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):
-                chunk = process_code_blocks(chunk)
-                full_response += chunk
-                await asyncio.sleep(0.08)
-                history[-1][1] = full_response
-                yield history
-                    
-        else:  # OLLAMA
-            response = analyze_with_ollama(model_name, enhanced_message)
-            response = process_code_blocks(response)
-            words = response.split()
-            for i in range(len(words)):
-                full_response = " ".join(words[:i+1])
-                await asyncio.sleep(0.08)
-                history[-1][1] = full_response
-                yield history
-                    
-    except Exception as e:
-        history[-1][1] = f"⚠️ Error: {str(e)}"
-        yield history
-    
-def process_code_blocks(text):
-    """Process markdown code blocks to use custom artifact styling"""
-    import re
-        
-        # Pattern for code blocks with language specification
-    pattern = r"```(\w+)\n(.*?)```"
-        
-    def replace_code_block(match):
-        language = match.group(1)
-        code = match.group(2)
-        escaped_code = code.replace('`', r'\`')
-            
-        html = (
-            '<div class="wrapper-artifact">'
-            f'<div class="header-artifact">'
-            f'<span>{language}</span>'
-            f'<button class="copy-button" onclick="copyToClipboard(`{escaped_code}`)">Copy</button>'
-            '</div>'
-            '<div class="content-artifact">'
-            f'<pre><code>{code}</code></pre>'
-            '</div>'
-            '</div>'
-        )
-        return html
-        
-        # Replace all code blocks in the text
-    processed_text = re.sub(pattern, replace_code_block, text, flags=re.DOTALL)
-    return processed_text
-
-analyzer = RepoAnalyzer()
-
 def create_ui():
-    # Get local time
-    local_time = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
     analyzer = RepoAnalyzer()
+    selected_files = []
     
     with gr.Blocks(title="Repository Chat Analysis", theme=gr.themes.Soft()) as app:
         gr.Markdown("""
-            <style>
-            .container { max-width: 100% !important; padding: 1rem; }
-            .mobile-full { width: 100% !important; }
-            .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; }
-            
-            /* Enhanced code block styling */
-            .wrapper-artifact {
-                border: 1px solid #e0e0e0;
-                border-radius: 8px;
-                margin: 16px 0;
-                background: #f8f9fa;
-            }
-            .header-artifact {
-                padding: 8px 16px;
-                background: #f1f3f4;
-                border-bottom: 1px solid #e0e0e0;
-                border-radius: 8px 8px 0 0;
-                font-family: monospace;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-            }
-            .content-artifact {
-                padding: 16px;
-                overflow-x: auto;
-                background: #ffffff;
-                border-radius: 0 0 8px 8px;
-            }
-            .content-artifact pre {
-                margin: 0;
-                padding: 0;
-            }
-            .copy-button {
-                background: #e0e0e0;
-                border: none;
-                padding: 4px 8px;
-                border-radius: 4px;
-                cursor: pointer;
-                font-size: 12px;
-            }
-            .copy-button:hover {
-                background: #d0d0d0;
-            }
+        <style>
+        .container { max-width: 100% !important; padding: 1rem; }
+        .mobile-full { width: 100% !important; }
+        .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; }
+        @media (max-width: 768px) {
+            .gr-form { flex-direction: column !important; }
+            .gr-group { margin: 0.5rem 0 !important; }
+        }
+        </style>
+        """)
+
+        with gr.Row(elem_classes="container"):
+            gr.Markdown(f"""
+            # AI Github Repository Chat 
             
-            /* Chat interface styling */
-            .fullscreen-chat {
-                height: calc(100vh - 200px) !important;
-                margin: 20px 0;
-            }
-            .chat-input {
-                position: sticky;
-                bottom: 0;
-                background: white;
-                padding: 10px 0;
-                border-top: 1px solid #eee;
-            }
-            .chat-message {
-                margin: 8px 0;
-            }
-            @media (max-width: 768px) {
-                .gr-form { flex-direction: column !important; }
-                .gr-group { margin: 0.5rem 0 !important; }
-                .fullscreen-chat {
-                    height: calc(100vh - 300px) !important;
-                }
-            }
-            </style>
-            <script>
-            function copyToClipboard(text) {
-                navigator.clipboard.writeText(text).then(() => {
-                    const button = event.target;
-                    button.textContent = 'Copied!';
-                    setTimeout(() => {
-                        button.textContent = 'Copy';
-                    }, 2000);
-                });
-            }
-            </script>
+            📅 Waktu: {CURRENT_TIME}  
             """)
-    
-        # Header
-        with gr.Row(elem_classes="container"):
-            gr.Markdown(f"# 🤖 Repository Chat Analysis\n\n📅 {local_time}")
 
-        # Main Interface
         with gr.Tabs() as tabs:
-            # Configuration Tab
-            with gr.Tab("🛠️ 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:
-                    # XAI API Key
-                    with gr.Group():
-                        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)
-                    
-                    # Gemini API Key
-                    with gr.Group():
-                        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 gr.Tab("🛠️ Konfigurasi"):
+            provider = gr.Radio(
+                choices=[AIProvider.XAI, AIProvider.GEMINI, AIProvider.OLLAMA],
+                label="Penyedia AI",
+                value=AIProvider.XAI
+            )
+            
+            with gr.Group() as api_settings:
                 with gr.Row():
-                    model_dropdown = gr.Dropdown(
-                        label="Model AI",
-                        choices=XAI_MODELS,
-                        value="grok-2-latest",
-                        interactive=True,
-                        elem_classes="mobile-full"
+                    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)
+                
+                with gr.Row():
+                    gemini_key = gr.Textbox(
+                        label="Gemini API Key",
+                        type="password",
+                        placeholder="Opsional - Kosongkan untuk gunakan key default",
+                        show_label=True
                     )
+                    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]
+            )
 
-            # Repository Analysis Tab
             with gr.Tab("📊 Analisis Repository", elem_classes="mobile-full"):
-                # Repository Input Section
                 with gr.Group():
                     with gr.Row():
                         repo_url = gr.Textbox(
@@ -540,8 +379,7 @@ def create_ui():
                                 placeholder="main",
                                 elem_classes="mobile-full"
                             )
-
-                # Clone Repository Section
+                
                 clone_button = gr.Button(
                     "🔄 Clone Repository",
                     variant="primary",
@@ -554,7 +392,7 @@ def create_ui():
                     elem_classes="mobile-full"
                 )
 
-                # File Selection Section
+                # Add file selection components
                 with gr.Group():
                     gr.Markdown("### 📎 File yang Dipilih")
                     
@@ -571,223 +409,169 @@ def create_ui():
                         label="Daftar File Terpilih"
                     )
 
-        # Chat Interface (Outside tabs for full width)
-        with gr.Group():
-            chat_history = gr.Chatbot(
-                label="📝 Riwayat Chat",
-                elem_classes="fullscreen-chat",
-                height=None,
-                show_label=True,
-                type="messages"
-            )
-            
-            with gr.Group(elem_classes="chat-input"):
-                chat_input = gr.Textbox(
-                    label="💭 Tanyakan tentang Repository",
-                    placeholder="Ketik pertanyaan Anda di sini...",
-                    lines=3,
-                    elem_classes="mobile-full"
+                def update_file_list(selected: List[str]) -> str:
+                    if not selected:
+                        return "<div class='file-list'>Belum ada file yang dipilih</div>"
+                    
+                    html = "<div class='file-list'>"
+                    for file in selected:
+                        html += f"<div class='file-item'><span>{file}</span></div>"
+                    html += "</div>"
+                    return html
+
+                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)
+                    
+                    if success:
+                        # Get list of files from cloned repository
+                        files = list(analyzer.repo_content.keys())
+                        return message, files, []
+                    
+                    return message, [], []
+
+                # Connect clone button click event
+                clone_button.click(
+                    fn=handle_clone,
+                    inputs=[repo_url, github_token, branch],
+                    outputs=[clone_status, file_selector, file_list]
                 )
-                with gr.Row():
-                    clear_button = gr.Button("🧹 Bersihkan", variant="secondary")
-                    send_button = gr.Button("📤 Kirim", variant="primary")
 
-        # Event Handlers
-        def clear_chat_history():
-            return None
+                # Update file list when selection changes
+                file_selector.change(
+                    fn=update_file_list,
+                    inputs=[file_selector],
+                    outputs=[file_list]
+                )
 
-        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)
-            
-            if success:
-                # Get files with metadata for better display
-                files = []
-                file_metadata = []
+                gr.Markdown("""
+                ### 💡 Contoh Pertanyaan:
+                - "Jelaskan struktur utama dari repository ini"
+                - "Analisis kode di file yang dipilih"
+                - "Bagaimana cara memperbaiki [masalah specific] di file-file ini?"
+                - "Bandingkan implementasi di file-file yang dipilih"
+                """)
                 
-                for file_path in analyzer.repo_content.keys():
-                    files.append(file_path)
-                    content = analyzer.repo_content[file_path]
-                    size = len(content.encode('utf-8'))
-                    file_metadata.append({
-                        'path': file_path,
-                        'size': f"{size / 1024:.1f} KB",
-                        'lines': len(content.splitlines())
-                    })
-                
-                # Create rich HTML display for clone status
-                status_html = f"""
-                <div style="padding: 1rem; background: #f0f8ff; border-radius: 8px; border: 1px solid #add8e6;">
-                    <h3 style="margin-top: 0;">✅ Repository berhasil di-clone!</h3>
-                    <p><strong>Nama:</strong> {analyzer.current_repo}</p>
-                    <p><strong>Jumlah file:</strong> {len(files)}</p>
-                    <p><strong>Status:</strong> Siap untuk analisis</p>
-                </div>
-                """
-                
-                # Create initial file list display
-                file_list_html = create_file_list_html(file_metadata)
+                # Improved chat interface
+                with gr.Group():
+                    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"
+                    )
                 
-                return status_html, files, file_list_html
-            return message, [], []
+                chat_history = gr.Chatbot(
+                    label="📝 Riwayat Chat",
+                    height=500,
+                    show_label=True,
+                    elem_classes="mobile-full"
+                )
 
-        def create_file_list_html(file_metadata):
-            if not file_metadata:
-                return "<div class='file-list'>Belum ada file yang dipilih</div>"
-            
-            html = "<div class='file-list'>"
-            html += "<style>\n"
-            html += ".file-list { max-height: 300px; overflow-y: auto; }\n"
-            html += ".file-item { display: flex; justify-content: space-between; padding: 8px; border-bottom: 1px solid #eee; }\n"
-            html += ".file-item:hover { background: #f5f5f5; }\n"
-            html += ".file-info { display: flex; gap: 1rem; color: #666; font-size: 0.9em; }\n"
-            html += "</style>"
-            
-            for metadata in file_metadata:
-                html += f"""
-                <div class='file-item'>
-                    <div class='file-path'>{metadata['path']}</div>
-                    <div class='file-info'>
-                        <span>{metadata['size']}</span>
-                        <span>{metadata['lines']} lines</span>
-                    </div>
-                </div>
-                """
-            html += "</div>"
-            return html
-
-        def update_file_list(selected):
-            if not selected:
-                return "<div class='file-list'>Belum ada file yang dipilih</div>"
-            
-            file_metadata = []
-            for file_path in selected:
-                if file_path in analyzer.repo_content:
-                    content = analyzer.repo_content[file_path]
-                    size = len(content.encode('utf-8'))
-                    file_metadata.append({
-                        'path': file_path,
-                        'size': f"{size / 1024:.1f} KB",
-                        'lines': len(content.splitlines())
-                    })
-            
-            return create_file_list_html(file_metadata)
+                loading_indicator = gr.HTML(
+                    '<div id="loading" style="display:none">Memproses permintaan...</div>'
+                )
 
-        # Modified handle_chat function with better file context handling
-        async def handle_chat(message, history, provider_choice, model_name, xai_key, gemini_key, selected_files):
-            if not analyzer.current_repo:
-                yield history + [[message, "⚠️ Mohon clone repository terlebih dahulu sebelum mengajukan pertanyaan."]]
-                return
-            
-            history = history or []
-            history.append([message, ""])
-            
-            try:
-                # Improved file context formatting
-                file_context = ""
-                if selected_files:
-                    file_context = "\n\nAnalisis berdasarkan file yang dipilih:\n"
-                    for file in selected_files:
-                        content = analyzer.repo_content.get(file, "")
-                        file_context += f"\n### File: {file}\n```\n{content}\n```\n"
-                
-                enhanced_message = f"{message}\n{file_context}"
-                
-                # Rest of the handle_chat function remains the same
-                full_response = ""
-                if provider_choice == AIProvider.XAI:
-                    async for chunk in analyzer.stream_xai_response(enhanced_message, xai_key, model_name):
-                        chunk = process_code_blocks(chunk)
-                        full_response += chunk
-                        await asyncio.sleep(0.08)
-                        history[-1][1] = 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):
-                        chunk = process_code_blocks(chunk)
-                        full_response += chunk
-                        await asyncio.sleep(0.08)
-                        history[-1][1] = full_response
-                        yield history
-                
-                else:  # OLLAMA
-                    response = analyze_with_ollama(model_name, enhanced_message)
-                    response = process_code_blocks(response)
-                    words = response.split()
-                    for i in range(len(words)):
-                        full_response = " ".join(words[:i+1])
-                        await asyncio.sleep(0.08)
-                        history[-1][1] = full_response
+                async def handle_chat(message, history, provider_choice, model_name, xai_key, gemini_key, selected_files):
+                    if not analyzer.current_repo:
+                        yield history + [[message, "⚠️ Mohon clone repository terlebih dahulu sebelum mengajukan pertanyaan."]]
+                        return
+                    
+                    history = history or []
+                    history.append([message, ""])
+                    
+                    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, "")
+                                file_context += f"\n{file}:\n```\n{content}\n```\n"
+                        
+                        enhanced_message = f"{message}\n{file_context}"
+                        
+                        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(0.05)
+                                history[-1][1] = 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(0.05)
+                                history[-1][1] = full_response
+                                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(0.05)
+                                history[-1][1] = full_response
+                                yield history
+                            
+                    except Exception as e:
+                        history[-1][1] = f"⚠️ Error: {str(e)}"
                         yield history
-                
-            except Exception as e:
-                history[-1][1] = f"⚠️ Error: {str(e)}"
-                yield history
 
-        # Add additional CSS for improved repository display
-        gr.Markdown("""
-            <style>
-            /* Additional styles for repository content */
-            .repo-status {
-                margin: 1rem 0;
-                padding: 1rem;
-                background: #f0f8ff;
-                border-radius: 8px;
-                border: 1px solid #add8e6;
-            }
-            .file-list {
-                border: 1px solid #ddd;
-                border-radius: 8px;
-                margin-top: 1rem;
-                background: white;
-            }
-            .file-item {
-                transition: background-color 0.2s;
-            }
-            .file-info {
-                opacity: 0.7;
-            }
-            .file-path {
-                font-family: monospace;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-            
-            /* Improved scrollbars for file list */
-            .file-list::-webkit-scrollbar {
-                width: 8px;
-                height: 8px;
-            }
-            .file-list::-webkit-scrollbar-track {
-                background: #f1f1f1;
-                border-radius: 4px;
-            }
-            .file-list::-webkit-scrollbar-thumb {
-                background: #888;
-                border-radius: 4px;
-            }
-            .file-list::-webkit-scrollbar-thumb:hover {
-                background: #555;
-            }
-            </style>
-        """)
+                # Connect chat events with file selection
+                send_event = send_button.click(
+                    fn=handle_chat,
+                    inputs=[
+                        chat_input,
+                        chat_history,
+                        provider,
+                        model_dropdown,
+                        xai_key,
+                        gemini_key,
+                        file_selector
+                    ],
+                    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,
+                        file_selector
+                    ],
+                    outputs=chat_history,
+                    show_progress=True
+                ).then(
+                    fn=lambda: gr.update(value=""),
+                    outputs=chat_input
+                )
 
-        return app
+    return app
 
 if __name__ == "__main__":
     print(f"""
     🚀 Memulai Repository Chat Analysis
-    📅 Current Date and Time (UTC): {datetime.utcnow().strftime("%Y-%m-%d %H:%M:%S")}
     """)
     
     app = create_ui()
-    app.launch(
-        share=True,
-        show_error=True,
-        server_name="0.0.0.0",
-        server_port=7860
-    )
+    app.launch(share=True)