Update app.py

app.py

@@ -278,315 +278,394 @@ class RepoAnalyzer:
                 continue
         return False, "Tidak dapat membaca file dengan encoding yang didukung"
 
-def create_ui():
-    # Get local time
-    local_time = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
-    analyzer = RepoAnalyzer()
+    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
     
-    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; }
+    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(.*?)```"
         
-        /* 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;
-        }
+        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
         
-        /* 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; }
+        # Replace all code blocks in the text
+        processed_text = re.sub(pattern, replace_code_block, text, flags=re.DOTALL)
+        return processed_text
+
+    def create_ui():
+        # Get local time
+        local_time = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+        analyzer = RepoAnalyzer()
+        
+        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;
+            }
+            
+            /* Chat interface styling */
             .fullscreen-chat {
-                height: calc(100vh - 300px) !important;
+                height: calc(100vh - 200px) !important;
+                margin: 20px 0;
             }
-        }
-        </style>
-        <script>
-        function copyToClipboard(text) {
-            navigator.clipboard.writeText(text).then(() => {
-                const button = event.target;
-                button.textContent = 'Copied!';
-                setTimeout(() => {
-                    button.textContent = 'Copy';
-                }, 2000);
-            });
-        }
-        </script>
-        """)
-
-        with gr.Row(elem_classes="container"):
-            gr.Markdown(f"# 🤖 Repository Chat Analysis\n\n📅 {local_time}")
-
-        with gr.Tabs() as tabs:
-            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:
-                    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)
-                    
-                    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 better layout
-                with gr.Row():
-                    model_dropdown = gr.Dropdown(
-                        label="Model AI",
-                        choices=XAI_MODELS,
-                        value="grok-2-latest",
+            .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>
+            """)
+    
+            with gr.Row(elem_classes="container"):
+                gr.Markdown(f"# 🤖 Repository Chat Analysis\n\n📅 {local_time}")
+    
+            with gr.Tabs() as tabs:
+                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.Tab("📊 Analisis Repository", elem_classes="mobile-full"):
-                with gr.Group():
+                    
+                    with gr.Group() as api_settings:
+                        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)
+                        
+                        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 better layout
                     with gr.Row():
-                        repo_url = gr.Textbox(
-                            label="URL Repository GitHub",
-                            placeholder="https://github.com/username/repository",
+                        model_dropdown = gr.Dropdown(
+                            label="Model AI",
+                            choices=XAI_MODELS,
+                            value="grok-2-latest",
+                            interactive=True,
                             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",
+    
+                with gr.Tab("📊 Analisis Repository", elem_classes="mobile-full"):
+                    with gr.Group():
+                        with gr.Row():
+                            repo_url = gr.Textbox(
+                                label="URL Repository GitHub",
+                                placeholder="https://github.com/username/repository",
                                 elem_classes="mobile-full"
                             )
-                        with gr.Column(scale=1):
-                            branch = gr.Textbox(
-                                label="Branch (opsional)",
-                                placeholder="main",
+                        
+                        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"
+                                )
+    
+                    clone_button = gr.Button(
+                        "🔄 Clone Repository",
+                        variant="primary",
+                        elem_classes="mobile-full"
+                    )
+                    
+                    clone_status = gr.Markdown(
+                        value="",
+                        label="Status Repository",
+                        elem_classes="mobile-full"
+                    )
+    
+                    # File selection components
+                    with gr.Group():
+                        gr.Markdown("### 📎 File yang Dipilih")
+                        
+                        with gr.Row():
+                            file_selector = gr.Dropdown(
+                                label="Pilih File dari Repository",
+                                choices=[],
+                                multiselect=True,
                                 elem_classes="mobile-full"
                             )
-
-                clone_button = gr.Button(
-                    "🔄 Clone Repository",
-                    variant="primary",
-                    elem_classes="mobile-full"
+                        
+                        file_list = gr.HTML(
+                            value="<div class='file-list'>Belum ada file yang dipilih</div>",
+                            label="Daftar File Terpilih"
+                        )
+    
+                    # Enhanced chat interface with fullscreen support
+            with gr.Group():
+                chat_history = gr.Chatbot(
+                    label="📝 Riwayat Chat",
+                    elem_classes="fullscreen-chat",
+                    height=None,  # Let CSS handle the height
+                    show_label=True,
+                    type="messages"  # Fix deprecation warning
                 )
                 
-                clone_status = gr.Markdown(
-                    value="",
-                    label="Status Repository",
-                    elem_classes="mobile-full"
-                )
-
-                # File selection components
-                with gr.Group():
-                    gr.Markdown("### 📎 File yang Dipilih")
-                    
-                    with gr.Row():
-                        file_selector = gr.Dropdown(
-                            label="Pilih File dari Repository",
-                            choices=[],
-                            multiselect=True,
-                            elem_classes="mobile-full"
-                        )
-                    
-                    file_list = gr.HTML(
-                        value="<div class='file-list'>Belum ada file yang dipilih</div>",
-                        label="Daftar File Terpilih"
+                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"
                     )
+                    with gr.Row():
+                        clear_button = gr.Button("🧹 Bersihkan", variant="secondary")
+                        send_button = gr.Button("📤 Kirim", variant="primary")
 
-                # Enhanced chat interface with fullscreen support
-                with gr.Group():
-                    chat_history = gr.Chatbot(
-                        label="📝 Riwayat Chat",
-                        elem_classes="fullscreen-chat",
-                        height=None,  # Let CSS handle the height
-                        show_label=True
-                    )
-                    
-                    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"
-                        )
-                        with gr.Row():
-                            clear_button = gr.Button("🧹 Bersihkan", variant="secondary")
-                            send_button = gr.Button("📤 Kirim", variant="primary")
+        # Connect event handlers
+        def clear_chat_history():
+            return None
 
-                loading_indicator = gr.HTML(
-                    '<div id="loading" style="display:none">Memproses permintaan...</div>'
-                )
+        clear_button.click(
+            fn=clear_chat_history,
+            outputs=chat_history
+        )
 
-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 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, [], []
 
-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>'
+        # Connect clone button click event
+        clone_button.click(
+            fn=handle_clone,
+            inputs=[repo_url, github_token, branch],
+            outputs=[clone_status, file_selector, file_list]
         )
-        return html
-    
-    # Replace all code blocks in the text
-    processed_text = re.sub(pattern, replace_code_block, text, flags=re.DOTALL)
-    return processed_text
 
+        def update_file_list(selected):
+            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
+
+        # Update file list when selection changes
+        file_selector.change(
+            fn=update_file_list,
+            inputs=[file_selector],
+            outputs=[file_list]
+        )
+
+        # Connect chat events
+        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"""