Upload 18 files

app.py

@@ -47,35 +47,70 @@ class ChatResponse(BaseModel):
 # Global model variables
 tokenizer = None
 model = None
+current_model_name = None
+available_models = {
+    "qwen-coder-3-30b": "Qwen/Qwen3-Coder-30B-A3B-Instruct",
+    "qwen-4b-thinking": "Qwen/Qwen3-4B-Thinking-2507"
+}
 
-def load_model():
-    """Load the Qwen model and tokenizer"""
-    global tokenizer, model
+
+def load_model(model_id: str = "qwen-coder-3-30b"):
+    """Load the specified Qwen model and tokenizer"""
+    global tokenizer, model, current_model_name
     
     try:
-        model_name = "Qwen/Qwen3-Coder-30B-A3B-Instruct"  # Adjust model name as needed
+        if model_id not in available_models:
+            raise ValueError(f"Unknown model ID: {model_id}")
+        
+        model_name = available_models[model_id]
+        
+        # If the same model is already loaded, skip
+        if current_model_name == model_name:
+            logger.info(f"Model {model_name} is already loaded")
+            return
+        
+        # Clear previous model from memory
+        if model is not None:
+            del model
+            torch.cuda.empty_cache() if torch.cuda.is_available() else None
         
         logger.info(f"Loading model: {model_name}")
         tokenizer = AutoTokenizer.from_pretrained(model_name, trust_remote_code=True)
-        model = AutoModelForCausalLM.from_pretrained(
-            model_name,
-            torch_dtype=torch.float16,
-            device_map="auto",
-            trust_remote_code=True
-        )
-        logger.info("Model loaded successfully")
+        
+        # Use different settings for the lighter model
+        if model_id == "qwen-4b-thinking":
+            model = AutoModelForCausalLM.from_pretrained(
+                model_name,
+                torch_dtype=torch.float16,
+                device_map="auto",
+                trust_remote_code=True,
+                low_cpu_mem_usage=True
+            )
+        else:
+            model = AutoModelForCausalLM.from_pretrained(
+                model_name,
+                torch_dtype=torch.float16,
+                device_map="auto",
+                trust_remote_code=True
+            )
+        
+        current_model_name = model_name
+        logger.info(f"Model {model_name} loaded successfully")
         
     except Exception as e:
-        logger.error(f"Error loading model: {e}")
+        logger.error(f"Error loading model {model_id}: {e}")
         # For development/testing, use a fallback
         logger.warning("Using fallback model response")
-
-def generate_response(messages: List[ChatMessage], temperature: float = 0.7, max_tokens: int = 2048):
+def generate_response(messages: List[ChatMessage], temperature: float = 0.7, max_tokens: int = 2048, model_id: str = "qwen-coder-3-30b"):
     """Generate response from the model"""
     try:
+        # Load model if not loaded or different model requested
+        if model is None or current_model_name != available_models.get(model_id):
+            load_model(model_id)
+        
         if model is None or tokenizer is None:
             # Fallback response for development
-            return "I'm a Qwen AI assistant. The model is currently loading, please try again in a moment."
+            return f"I'm a Qwen AI assistant ({model_id}). The model is currently loading, please try again in a moment."
         
         # Format messages for the model
         formatted_messages = []
@@ -92,6 +127,12 @@ def generate_response(messages: List[ChatMessage], temperature: float = 0.7, max
         # Tokenize
         inputs = tokenizer(text, return_tensors="pt").to(model.device)
         
+        # Adjust generation parameters for different models
+        if model_id == "qwen-4b-thinking":
+            # Use more conservative settings for the smaller model
+            max_tokens = min(max_tokens, 1024)
+            temperature = min(temperature, 0.8)
+        
         # Generate
         with torch.no_grad():
             outputs = model.generate(
@@ -110,12 +151,16 @@ def generate_response(messages: List[ChatMessage], temperature: float = 0.7, max
         logger.error(f"Error generating response: {e}")
         return f"I apologize, but I encountered an error while processing your request: {str(e)}"
 
-def generate_streaming_response(messages: List[ChatMessage], temperature: float = 0.7, max_tokens: int = 2048):
+def generate_streaming_response(messages: List[ChatMessage], temperature: float = 0.7, max_tokens: int = 2048, model_id: str = "qwen-coder-3-30b"):
     """Generate streaming response from the model"""
     try:
+        # Load model if not loaded or different model requested
+        if model is None or current_model_name != available_models.get(model_id):
+            load_model(model_id)
+        
         if model is None or tokenizer is None:
             # Fallback streaming response
-            response = "I'm a Qwen AI assistant. The model is currently loading, please try again in a moment."
+            response = f"I'm a Qwen AI assistant ({model_id}). The model is currently loading, please try again in a moment."
             for char in response:
                 yield f"data: {json.dumps({'choices': [{'delta': {'content': char}}]})}\n\n"
                 time.sleep(0.05)
@@ -138,6 +183,11 @@ def generate_streaming_response(messages: List[ChatMessage], temperature: float
         # Tokenize
         inputs = tokenizer(text, return_tensors="pt").to(model.device)
         
+        # Adjust generation parameters for different models
+        if model_id == "qwen-4b-thinking":
+            max_tokens = min(max_tokens, 1024)
+            temperature = min(temperature, 0.8)
+        
         # Setup streaming
         streamer = TextIteratorStreamer(tokenizer, skip_prompt=True, skip_special_tokens=True)
         
@@ -169,12 +219,16 @@ def generate_streaming_response(messages: List[ChatMessage], temperature: float
         yield f"data: {json.dumps({'choices': [{'finish_reason': 'stop'}]})}\n\n"
         yield "data: [DONE]\n\n"
  
-def generate_plain_text_stream(messages: List[ChatMessage], temperature: float = 0.7, max_tokens: int = 2048):
+def generate_plain_text_stream(messages: List[ChatMessage], temperature: float = 0.7, max_tokens: int = 2048, model_id: str = "qwen-coder-3-30b"):
     """Plain text streaming generator used by /chat compatibility endpoint (no SSE)."""
     try:
+        # Load model if not loaded or different model requested
+        if model is None or current_model_name != available_models.get(model_id):
+            load_model(model_id)
+        
         if model is None or tokenizer is None:
             # Fallback streaming: plain text (no SSE)
-            response = "I'm a Qwen AI assistant. The model is currently loading, please try again in a moment."
+            response = f"I'm a Qwen AI assistant ({model_id}). The model is currently loading, please try again in a moment."
             for ch in response:
                 yield ch
                 time.sleep(0.02)
@@ -193,6 +247,11 @@ def generate_plain_text_stream(messages: List[ChatMessage], temperature: float =
         # Tokenize
         inputs = tokenizer(text, return_tensors="pt").to(model.device)
  
+        # Adjust parameters for lighter model
+        if model_id == "qwen-4b-thinking":
+            max_tokens = min(max_tokens, 1024)
+            temperature = min(temperature, 0.8)
+ 
         # Setup streaming (plain text)
         streamer = TextIteratorStreamer(tokenizer, skip_prompt=True, skip_special_tokens=True)
         generation_kwargs = {
@@ -256,7 +315,17 @@ async def list_models():
                 "id": "qwen-coder-3-30b",
                 "object": "model",
                 "created": int(time.time()),
-                "owned_by": "qwen"
+                "owned_by": "qwen",
+                "name": "Qwen 3 Coder 30B",
+                "description": "Výkonný model pro programování"
+            },
+            {
+                "id": "qwen-4b-thinking", 
+                "object": "model",
+                "created": int(time.time()),
+                "owned_by": "qwen",
+                "name": "Qwen 4B Thinking",
+                "description": "Rychlejší odlehčený model"
             }
         ]
     }
@@ -265,12 +334,19 @@ async def list_models():
 async def chat_completion(request: ChatRequest):
     """OpenAI compatible chat completion endpoint"""
     try:
+        model_id = request.model or "qwen-coder-3-30b"
+        
+        # Validate model ID
+        if model_id not in available_models:
+            raise HTTPException(status_code=400, detail=f"Unknown model: {model_id}")
+        
         if request.stream:
             return StreamingResponse(
                 generate_streaming_response(
                     request.messages, 
                     request.temperature or 0.7, 
-                    request.max_tokens or 2048
+                    request.max_tokens or 2048,
+                    model_id
                 ),
                 media_type="text/plain"
             )
@@ -278,13 +354,14 @@ async def chat_completion(request: ChatRequest):
             response_content = generate_response(
                 request.messages, 
                 request.temperature or 0.7, 
-                request.max_tokens or 2048
+                request.max_tokens or 2048,
+                model_id
             )
             
             return ChatResponse(
                 id=f"chatcmpl-{int(time.time())}",
                 created=int(time.time()),
-                model=request.model or "qwen-coder-3-30b",
+                model=model_id,
                 choices=[{
                     "index": 0,
                     "message": {
@@ -299,6 +376,7 @@ async def chat_completion(request: ChatRequest):
         logger.error(f"Error in chat completion: {e}")
         raise HTTPException(status_code=500, detail=str(e))
 
+
 @app.post("/v1/chat/completions")
 async def openai_chat_completion(request: ChatRequest):
     """OpenAI API compatible endpoint"""
@@ -310,6 +388,11 @@ async def chat_stream_compat(payload: Dict[str, Any]):
     try:
         message = str(payload.get("message", "") or "").strip()
         history_raw = payload.get("history", []) or []
+        model_id = payload.get("model", "qwen-coder-3-30b")
+        
+        # Validate model ID
+        if model_id not in available_models:
+            model_id = "qwen-coder-3-30b"  # fallback
 
         history_msgs: List[ChatMessage] = []
         for item in history_raw:
@@ -325,7 +408,8 @@ async def chat_stream_compat(payload: Dict[str, Any]):
             generate_plain_text_stream(
                 history_msgs,
                 temperature=0.7,
-                max_tokens=2048
+                max_tokens=2048,
+                model_id=model_id
             ),
             media_type="text/plain; charset=utf-8"
         )
@@ -336,12 +420,13 @@ async def chat_stream_compat(payload: Dict[str, Any]):
 # Mount static files AFTER API routes
 app.mount("/", StaticFiles(directory="public", html=True), name="static")
 
+# Startup event
 # Startup event
 @app.on_event("startup")
 async def startup_event():
-    """Initialize the model on startup"""
-    # Load model in background thread to avoid blocking startup
-    thread = Thread(target=load_model)
+    """Initialize the default model on startup"""
+    # Load default model in background thread to avoid blocking startup
+    thread = Thread(target=load_model, args=("qwen-coder-3-30b",))
     thread.daemon = True
     thread.start()
 

public/app.js

@@ -79,14 +79,53 @@ class ChatState {
 
   // Generate conversation title from first message
   generateTitle(content) {
-    const words = content.trim().split(" ").slice(0, 5).join(" ");
-    let title =
-      words.length > 35 ? words.substring(0, 32) + "..." : words || "New Chat";
-
-    // Clean up title for better readability
-    title = title.replace(/[^\w\s.,!?-]/g, "").trim();
+    // Remove extra whitespace and line breaks
+    const cleanContent = content.trim().replace(/\s+/g, ' ');
+    
+    // Generate a more intelligent title
+    let title;
+    
+    // Check for common patterns
+    if (cleanContent.toLowerCase().includes('napište') || cleanContent.toLowerCase().includes('napiš')) {
+      // Extract what user wants to write
+      const match = cleanContent.match(/napi[šs]\w*\s+(.+)/i);
+      title = match ? `Napsat: ${match[1]}` : cleanContent;
+    } else if (cleanContent.toLowerCase().includes('vytvořte') || cleanContent.toLowerCase().includes('vytvoř')) {
+      // Extract what user wants to create
+      const match = cleanContent.match(/vytvo[řr]\w*\s+(.+)/i);
+      title = match ? `Vytvořit: ${match[1]}` : cleanContent;
+    } else if (cleanContent.toLowerCase().includes('pomozte') || cleanContent.toLowerCase().includes('pomoc')) {
+      // Help requests
+      title = `Pomoc: ${cleanContent.replace(/pomozte\s*mi\s*/i, '').replace(/pomoc\s*s\s*/i, '')}`;
+    } else if (cleanContent.toLowerCase().includes('vysvětlete') || cleanContent.toLowerCase().includes('vysvětli')) {
+      // Explanations
+      const match = cleanContent.match(/vysvětl\w*\s+(.+)/i);
+      title = match ? `Vysvětlit: ${match[1]}` : cleanContent;
+    } else if (cleanContent.toLowerCase().includes('oprav')) {
+      // Fixes
+      const match = cleanContent.match(/oprav\w*\s+(.+)/i);
+      title = match ? `Opravit: ${match[1]}` : cleanContent;
+    } else {
+      // Default: use first meaningful words
+      const words = cleanContent.split(" ");
+      const meaningfulWords = words.filter(word => 
+        word.length > 2 && 
+        !['jak', 'kde', 'kdy', 'proč', 'která', 'který', 'které'].includes(word.toLowerCase())
+      );
+      
+      title = meaningfulWords.slice(0, 4).join(" ");
+      if (title.length < 10 && words.length > 4) {
+        title = words.slice(0, 6).join(" ");
+      }
+    }
 
-    return title;
+    // Cleanup and limit length
+    title = title.replace(/[^\w\s.,!?-áčďéěíňóřšťúůýž]/gi, '').trim();
+    if (title.length > 50) {
+      title = title.substring(0, 47) + "...";
+    }
+    
+    return title || "New Chat";
   }
 
   // Save state to localStorage
@@ -171,8 +210,12 @@ class APIManager {
     }
   }
 
-  // Send chat message using streaming endpoint
+    // Send chat message using streaming endpoint
   async sendMessage(message, history = []) {
+    // Get current model from conversation or default
+    const conversation = this.state.getCurrentConversation();
+    const modelId = conversation?.model || "qwen-coder-3-30b";
+    
     const response = await this.makeRequest("/chat", {
       method: "POST",
       headers: {
@@ -184,6 +227,7 @@ class APIManager {
           role: msg.role,
           content: msg.content,
         })),
+        model: modelId
       }),
     });
 
@@ -384,15 +428,49 @@ class MessageRenderer {
 
   // Format message content (handle markdown, code, etc.)
   formatContent(content) {
-    // Basic formatting - can be enhanced with a markdown parser
-    return content
-      .replace(/\n/g, "<br>")
-      .replace(
-        /`([^`]+)`/g,
-        '<code class="bg-zinc-200 dark:bg-zinc-700 px-1 py-0.5 rounded text-sm">$1</code>'
-      )
+    // Enhanced formatting with code block support
+    let formatted = content;
+
+    // First handle code blocks (triple backticks)
+    formatted = formatted.replace(
+      /```(\w+)?\n?([\s\S]*?)```/g,
+      (match, language, code) => {
+        const lang = language ? ` data-language="${language}"` : '';
+        const escapedCode = code
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&#39;');
+        
+        return `<div class="code-block my-4">
+          <div class="code-header bg-zinc-100 dark:bg-zinc-800 px-3 py-2 text-xs text-zinc-600 dark:text-zinc-400 border-b border-zinc-200 dark:border-zinc-700 rounded-t-md flex items-center justify-between">
+            <span>${language || 'Code'}</span>
+            <button class="copy-code-btn text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300" onclick="copyToClipboard(this)" title="Kopírovat kód">
+              <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+              </svg>
+            </button>
+          </div>
+          <pre class="code-content bg-zinc-50 dark:bg-zinc-900 p-4 rounded-b-md overflow-x-auto text-sm border border-zinc-200 dark:border-zinc-700"${lang}><code>${escapedCode}</code></pre>
+        </div>`;
+      }
+    );
+
+    // Then handle inline code (single backticks)
+    formatted = formatted.replace(
+      /`([^`]+)`/g,
+      '<code class="bg-zinc-200 dark:bg-zinc-700 px-1.5 py-0.5 rounded text-sm font-mono">$1</code>'
+    );
+
+    // Handle other markdown formatting
+    formatted = formatted
       .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
-      .replace(/\*([^*]+)\*/g, "<em>$1</em>");
+      .replace(/\*([^*]+)\*/g, "<em>$1</em>")
+      .replace(/\n/g, "<br>");
+
+    return formatted;
   }
 
   // Format timestamp
@@ -544,95 +622,71 @@ class ChatApp {
     const modelDropdown = this.elements.modelDropdown;
     if (!modelDropdown) return;
 
-    const trigger = modelDropdown.querySelector("[data-dd-trigger]");
-    const menu = modelDropdown.querySelector("[data-dd-menu]");
-    const modelButtons = menu ? menu.querySelectorAll("button") : [];
-
-    if (!trigger || !menu) return;
-
-    // Available models mapping
-    const modelMap = {
-      "Qwen 3 Coder 30B": "qwen-coder-3-30b",
-      "Qwen 3 Coder (Default)": "qwen-coder-3-default",
-    };
-
-    // Set current model from state or default
-    const currentModel =
-      this.state.getCurrentConversation()?.model || "Qwen 3 Coder (Default)";
-    trigger.childNodes[0].textContent = currentModel;
-
-    // Handle model selection
-    modelButtons.forEach((button) => {
-      // Skip info/status buttons
-      if (!button.textContent.includes("Qwen")) return;
-
-      button.addEventListener("click", (e) => {
-        e.stopPropagation();
-        const selectedModel = button.textContent.trim();
+    const modelOptions = modelDropdown.querySelectorAll('.model-option');
+    const currentModelName = document.getElementById('current-model-name');
+    const responseTimeElement = document.getElementById('model-response-time');
 
+    modelOptions.forEach(option => {
+      option.addEventListener('click', (e) => {
+        e.preventDefault();
+        const modelId = option.dataset.modelId;
+        const modelName = option.querySelector('.font-medium').textContent;
+        
         // Update UI
-        trigger.childNodes[0].textContent = selectedModel;
-        menu.classList.add("hidden");
-
+        if (currentModelName) {
+          currentModelName.textContent = modelName;
+        }
+        
+        // Update response time estimate
+        if (responseTimeElement) {
+          if (modelId === 'qwen-4b-thinking') {
+            responseTimeElement.textContent = 'Response time: ~1-3s';
+          } else {
+            responseTimeElement.textContent = 'Response time: ~2-5s';
+          }
+        }
+        
         // Update current conversation model
         const conversation = this.state.getCurrentConversation();
         if (conversation) {
-          conversation.model = selectedModel;
-          conversation.modelId =
-            modelMap[selectedModel] || "qwen-coder-3-default";
+          conversation.model = modelId;
           this.state.saveToStorage();
         }
-
+        
         // Update chat header
-        this.updateChatHeader(selectedModel);
-
-        console.log("Model changed to:", selectedModel);
-
-        // Show brief notification
-        this.showModelChangeNotification(selectedModel);
+        this.updateChatHeader(modelName);
+        
+        // Show model change notification
+        this.showModelChangeNotification(modelName);
+        
+        // Close dropdown
+        const menu = modelDropdown.querySelector('[data-dd-menu]');
+        if (menu) {
+          menu.classList.add('hidden');
+        }
       });
     });
   }
 
   // Show model change notification
+ // Show model change notification
   showModelChangeNotification(modelName) {
-    // Create notification element
-    const notification = document.createElement("div");
-    notification.className =
-      "fixed top-20 right-4 z-50 px-4 py-2 rounded-lg bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 text-sm font-medium transition-all duration-300 transform translate-x-full";
-    notification.innerHTML = `
-      <div class="flex items-center gap-2">
-        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M9 12l2 2 4-4"/>
-          <path d="M21 12c-1 0-3-1-3-3s2-3 3-3 3 1 3 3-2 3-3 3"/>
-          <path d="M3 12c1 0 3-1 3-3s-2-3-3-3-3 1-3 3 2 3 3 3"/>
-          <path d="M3 12h6m6 0h6"/>
-        </svg>
-        Model switched to ${modelName}
-      </div>
-    `;
-
-    document.body.appendChild(notification);
-
-    // Animate in
-    requestAnimationFrame(() => {
-      notification.classList.remove("translate-x-full");
-    });
-
-    // Animate out after 3 seconds
-    setTimeout(() => {
-      notification.classList.add("translate-x-full");
-      setTimeout(() => {
-        document.body.removeChild(notification);
-      }, 300);
-    }, 3000);
+    if (this.showNotification) {
+      this.showNotification(`Přepnuto na model: ${modelName}`, "success");
+    }
   }
 
-  // Update chat header with current model
-  updateChatHeader(modelName) {
+  // Update chat header with current model and conversation title
+  updateChatHeader(modelName, conversationTitle = null) {
     const chatTitle = document.getElementById("chat-title");
     const chatSubtitle = chatTitle?.nextElementSibling;
 
+    // Update the conversation title if provided
+    if (conversationTitle && chatTitle) {
+      chatTitle.textContent = conversationTitle;
+    }
+
+    // Update the subtitle with model info
     if (chatSubtitle) {
       chatSubtitle.textContent = `Using ${modelName} • Ready to help`;
     }
@@ -737,17 +791,23 @@ class ChatApp {
         this.renderMessage(userMessage);
       }
 
+      // Update chat title in header if this was the first user message
+      const conversation = this.state.getCurrentConversation();
+      if (conversation && conversation.messages.filter(m => m.role === "user").length === 1) {
+        this.updateChatHeader(conversation.model || "Qwen 3 Coder (Default)", conversation.title);
+      }
+
       // Show typing indicator
       this.renderer.showTyping();
 
       // Prepare conversation history for API
-      const conversation = this.state.getCurrentConversation();
-      const history = conversation
-        ? conversation.messages.map((msg) => ({
-            role: msg.role,
-            content: msg.content,
-          }))
-        : [];
+      const conversationForHistory = this.state.getCurrentConversation();
+      const history = conversationForHistory
+         ? conversation.messages.map((msg) => ({
+             role: msg.role,
+             content: msg.content,
+           }))
+         : [];
 
       // Use the streaming chat endpoint
       const response = await this.api.sendMessage(
@@ -925,6 +985,10 @@ class ChatApp {
     this.renderWelcomeScreen();
     this.updateChatHistory();
     this.state.saveToStorage();
+    
+    // Update chat header with default title
+    this.updateChatHeader(conversation.model || "Qwen 3 Coder (Default)", "New Chat");
+    
     console.log("Created new conversation:", conversation.id);
   }
 
@@ -1044,6 +1108,9 @@ class ChatApp {
     this.updateChatHistory();
     this.state.saveToStorage();
 
+    // Update chat header with conversation title
+    this.updateChatHeader(conversation.model || "Qwen 3 Coder (Default)", conversation.title);
+
     console.log("Loaded chat session:", sessionId);
   }
 
@@ -1724,19 +1791,43 @@ class AccessibilityManager {
       }: ${message.content}`;
     }
   }
+
+  
 }
 
-// Initialize accessibility manager
-const accessibilityManager = new AccessibilityManager();
-
-// Export for debugging and testing
-window.chatDebug = {
-  chatApp,
-  chatState,
-  apiManager,
-  messageRenderer,
-  performanceMonitor,
-  errorReporter,
-  accessibilityManager,
-  SecurityUtils,
+// Global function for copying code to clipboard
+window.copyToClipboard = function(button) {
+  const codeBlock = button.closest('.code-block');
+  const codeContent = codeBlock.querySelector('code').textContent;
+  
+  navigator.clipboard.writeText(codeContent).then(() => {
+    // Změníme ikonu na checkmark
+    button.innerHTML = `
+      <svg class="h-4 w-4 text-green-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M9 12l2 2 4-4"/>
+        <path d="M21 12c-1 0-3-1-3-3s2-3 3-3 3 1 3 3-2 3-3 3"/>
+        <path d="M3 12c1 0 3-1 3-3s-2-3-3-3-3 1-3 3 2 3 3 3"/>
+      </svg>
+    `;
+    
+    // Zobrazíme notifikaci
+    if (window.chatApp && window.chatApp.showNotification) {
+      window.chatApp.showNotification("Kód byl zkopírován do schránky", "success");
+    }
+    
+    // Vraťme ikonu zpět po 2 sekundách
+    setTimeout(() => {
+      button.innerHTML = `
+        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+        </svg>
+      `;
+    }, 2000);
+  }).catch(err => {
+    console.error('Failed to copy code:', err);
+    if (window.chatApp && window.chatApp.showNotification) {
+      window.chatApp.showNotification("Chyba při kopírování kódu", "error");
+    }
+  });
 };

public/index.html

@@ -45,24 +45,30 @@
         <!-- Model Dropdown -->
         <div class="relative" id="model-dd">
           <button class="inline-flex items-center gap-2 rounded-md border border-zinc-200 px-3 py-1.5 text-sm hover:bg-zinc-50 dark:border-zinc-800 dark:hover:bg-zinc-800" data-dd-trigger>
-            Qwen 3 Coder
+            <span id="current-model-name">Qwen 3 Coder 30B</span>
             <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
           </button>
-          <div class="absolute right-0 z-40 mt-2 hidden w-56 overflow-hidden rounded-md border border-zinc-200 bg-white p-1 text-sm shadow-lg dark:border-zinc-800 dark:bg-zinc-900" data-dd-menu>
-            <div class="px-2 py-1 text-xs font-medium text-zinc-500">Available Models</div>
-            <button class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-800">
-              <span class="w-2 h-2 bg-green-500 rounded-full"></span>
-              Qwen 3 Coder 30B
+          <div class="absolute right-0 z-40 mt-2 hidden w-64 overflow-hidden rounded-md border border-zinc-200 bg-white p-1 text-sm shadow-lg dark:border-zinc-800 dark:bg-zinc-900" data-dd-menu>
+            <div class="px-2 py-1 text-xs font-medium text-zinc-500">Dostupné modely</div>
+            <button class="model-option flex w-full items-center gap-3 rounded-md px-2 py-2 hover:bg-zinc-100 dark:hover:bg-zinc-800" data-model-id="qwen-coder-3-30b">
+              <span class="w-2 h-2 bg-green-500 rounded-full flex-shrink-0"></span>
+              <div class="flex-1 text-left">
+                <div class="font-medium">Qwen 3 Coder 30B</div>
+                <div class="text-xs text-zinc-500">Výkonný model pro programování</div>
+              </div>
             </button>
-            <button class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-800">
-              <span class="w-2 h-2 bg-green-500 rounded-full"></span>
-              Qwen 3 Coder (Default)
+            <button class="model-option flex w-full items-center gap-3 rounded-md px-2 py-2 hover:bg-zinc-100 dark:hover:bg-zinc-800" data-model-id="qwen-4b-thinking">
+              <span class="w-2 h-2 bg-blue-500 rounded-full flex-shrink-0"></span>
+              <div class="flex-1 text-left">
+                <div class="font-medium">Qwen 4B Thinking</div>
+                <div class="text-xs text-zinc-500">Rychlejší odlehčený model</div>
+              </div>
             </button>
             <div class="my-1 h-px bg-zinc-200 dark:bg-zinc-800"></div>
             <div class="px-2 py-1 text-xs text-zinc-400">
               <div class="flex items-center gap-1">
                 <svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
-                Response time: ~2-5s
+                <span id="model-response-time">Response time: ~2-5s</span>
               </div>
             </div>
           </div>
@@ -96,7 +102,7 @@
         </div>
         <div class="h-px bg-zinc-200 dark:bg-zinc-800"></div>
         <div class="flex-1 overflow-y-auto p-2 scrollbar-thin">
-          <!-- chat list -->
+          <!-- chat list 
           <button class="group flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left hover:bg-zinc-100 dark:hover:bg-zinc-800">
             <svg class="h-4 w-4 text-zinc-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 12c2 0 4 1 5 3-1 2-3 3-5 3s-4-1-5-3c1-2 3-3 5-3Z"/><circle cx="12" cy="8" r="3"/></svg>
             <div class="min-w-0 flex-1"><div class="truncate text-sm font-medium">Build Tailwind Navbar</div><div class="truncate text-xs text-zinc-500">Today</div></div>
@@ -112,6 +118,7 @@
             <div class="min-w-0 flex-1"><div class="truncate text-sm font-medium">Write SQL for analytics</div><div class="truncate text-xs text-zinc-500">Yesterday</div></div>
             <svg class="h-4 w-4 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
           </button>
+          -->
         </div>
         <div class="h-px bg-zinc-200 dark:bg-zinc-800"></div>
         <div class="flex items-center justify-between p-3">

public/styles.css

@@ -323,4 +323,32 @@ body {
 /* Dark mode toggle improvements */
 .dark-mode-transition {
   transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
-}
+}
+
+  .scrollbar-thin{scrollbar-width:thin} .scrollbar-thin::-webkit-scrollbar{height:8px;width:8px} .scrollbar-thin::-webkit-scrollbar-thumb{border-radius:9999px;background-color:#c7c7d0} .scrollbar-thin::-webkit-scrollbar-track{background-color:transparent}
+  
+  /* Code block styles */
+  .code-block {
+    font-family: 'Fira Code', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
+  }
+  
+  .code-content {
+    line-height: 1.5;
+    font-size: 0.875rem;
+  }
+  
+  .code-content code {
+    font-family: inherit;
+    background: none !important;
+    padding: 0 !important;
+    border-radius: 0 !important;
+  }
+  
+  /* Copy button hover effect */
+  .copy-code-btn {
+    transition: all 0.2s ease;
+  }
+  
+  .copy-code-btn:hover {
+    transform: scale(1.1);
+  }