feat: adding artefact like chat ui

app.py

@@ -4,11 +4,12 @@ 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
+from typing import Generator, AsyncGenerator, List
 from openai import AsyncOpenAI
 import dotenv
 
@@ -20,7 +21,7 @@ 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_XAI_KEY = os.getenv("XAI_API_KEY", "xai-vfjhklL384Z4HKdItsZomqpFlXubTZJAFnISQUpV7dE8lRnWwYBVPSCxSTlu08wDbAcv720bx2dDiQ9x")
 DEFAULT_GEMINI_KEY = os.getenv("GEMINI_API_KEY")
 
 # API settings
@@ -278,36 +279,99 @@ class RepoAnalyzer:
         return False, "Tidak dapat membaca file dengan encoding yang didukung"
 
 def create_ui():
+    # Get UTC time
+    utc_time = datetime.utcnow().strftime("%Y-%m-%d %H:%M:%S")
     analyzer = RepoAnalyzer()
     
     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;
+        .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;
         }
-        .mobile-full {
-            width: 100% !important;
+        .copy-button:hover {
+            background: #d0d0d0;
+        }
+        
+        /* 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;
+            .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
             
-            📅 Waktu: {CURRENT_TIME}  
-            👤 Pengguna: {CURRENT_USER}
+            📅 Current Date and Time (UTC): {utc_time}
             """)
 
         with gr.Tabs() as tabs:
@@ -378,8 +442,7 @@ def create_ui():
                                 placeholder="main",
                                 elem_classes="mobile-full"
                             )
-                
-                # Fix clone repository functionality
+
                 clone_button = gr.Button(
                     "🔄 Clone Repository",
                     variant="primary",
@@ -391,140 +454,140 @@ def create_ui():
                     label="Status Repository",
                     elem_classes="mobile-full"
                 )
-                
-                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
-                )
 
-                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]"
-                """)
-                
-                # Improved chat interface
+                # File selection components
                 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"
+                    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"
                     )
-                
-                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>'
+                # 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
                     )
-
-                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
-
-                # 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
-                )
+                    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")
 
-                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
+                loading_indicator = gr.HTML(
+                    '<div id="loading" style="display:none">Memproses permintaan...</div>'
                 )
 
-        # 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-pro")
-            else:  # OLLAMA
-                return gr.Dropdown(choices=OLLAMA_MODELS, value="llama2")
-        
-        provider.change(
-            fn=update_model_list,
-            inputs=[provider],
-            outputs=[model_dropdown]
-        )
+        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, "")
+                        # Wrap code blocks in custom artifact styling
+                        file_context += f"""
+<div class="wrapper-artifact">
+    <div class="header-artifact">
+        <span>{file}</span>
+        <button class="copy-button" onclick="copyToClipboard(`{content.replace('`', '\\`')}`)">Copy</button>
+    </div>
+    <div class="content-artifact">
+        <pre><code>{content}</code></pre>
+    </div>
+</div>
+"""
+                
+                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
 
-    return app
+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)
+        return f"""
+<div class="wrapper-artifact">
+    <div class="header-artifact">
+        <span>{language}</span>
+        <button class="copy-button" onclick="copyToClipboard(`{code.replace('`', '\\`')}`)">Copy</button>
+    </div>
+    <div class="content-artifact">
+        <pre><code>{code}</code></pre>
+    </div>
+</div>
+"""
+    
+    # Replace all code blocks in the text
+    processed_text = re.sub(pattern, replace_code_block, text, flags=re.DOTALL)
+    return processed_text
 
 if __name__ == "__main__":
     print(f"""
     🚀 Memulai Repository Chat Analysis
-    📅 Waktu: {CURRENT_TIME}
-    👤 Pengguna: {CURRENT_USER}
+    📅 Current Date and Time (UTC): {datetime.utcnow().strftime("%Y-%m-%d %H:%M:%S")}
     """)
     
     app = create_ui()