Upload 18 files

app.py

@@ -168,7 +168,52 @@ def generate_streaming_response(messages: List[ChatMessage], temperature: float
         yield f"data: {json.dumps({'choices': [{'delta': {'content': error_msg}}]})}\n\n"
         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):
+    """Plain text streaming generator used by /chat compatibility endpoint (no SSE)."""
+    try:
+        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."
+            for ch in response:
+                yield ch
+                time.sleep(0.02)
+            return
+ 
+        # Format messages
+        formatted_messages = [{"role": m.role, "content": m.content} for m in messages]
+ 
+        # Apply chat template
+        text = tokenizer.apply_chat_template(
+            formatted_messages,
+            tokenize=False,
+            add_generation_prompt=True
+        )
+ 
+        # Tokenize
+        inputs = tokenizer(text, return_tensors="pt").to(model.device)
+ 
+        # Setup streaming (plain text)
+        streamer = TextIteratorStreamer(tokenizer, skip_prompt=True, skip_special_tokens=True)
+        generation_kwargs = {
+            **inputs,
+            "max_new_tokens": max_tokens,
+            "temperature": temperature,
+            "do_sample": True,
+            "pad_token_id": tokenizer.eos_token_id,
+            "streamer": streamer
+        }
+ 
+        thread = Thread(target=model.generate, kwargs=generation_kwargs)
+        thread.start()
+ 
+        for new_text in streamer:
+            if new_text:
+                yield new_text
+    except Exception as e:
+        logger.error(f"Error in plain streaming generation: {e}")
+        yield f"[error] {str(e)}"
+ 
 # FastAPI app
 app = FastAPI(title="AI Chat API", description="OpenAI compatible interface for Qwen model")
 
@@ -197,6 +242,11 @@ async def ping():
     """Simple ping endpoint"""
     return {"status": "pong"}
 
+@app.head("/ping")
+async def ping_head():
+    """HEAD ping for health checks"""
+    return Response(status_code=200)
+
 @app.get("/api/models")
 async def list_models():
     """List available models"""
@@ -254,6 +304,35 @@ async def openai_chat_completion(request: ChatRequest):
     """OpenAI API compatible endpoint"""
     return await chat_completion(request)
 
+@app.post("/chat")
+async def chat_stream_compat(payload: Dict[str, Any]):
+    """Compatibility endpoint for frontend streaming /chat (plain text stream)."""
+    try:
+        message = str(payload.get("message", "") or "").strip()
+        history_raw = payload.get("history", []) or []
+
+        history_msgs: List[ChatMessage] = []
+        for item in history_raw:
+            role = item.get("role")
+            content = item.get("content")
+            if role and content is not None:
+                history_msgs.append(ChatMessage(role=role, content=str(content)))
+
+        if message:
+            history_msgs.append(ChatMessage(role="user", content=message))
+
+        return StreamingResponse(
+            generate_plain_text_stream(
+                history_msgs,
+                temperature=0.7,
+                max_tokens=2048
+            ),
+            media_type="text/plain; charset=utf-8"
+        )
+    except Exception as e:
+        logger.error(f"/chat compatibility error: {e}")
+        raise HTTPException(status_code=400, detail="Invalid request body")
+
 # Mount static files AFTER API routes
 app.mount("/", StaticFiles(directory="public", html=True), name="static")
 

public/app.js

@@ -1,6 +1,6 @@
 /**
  * Enhanced AI Chat Application - Core JavaScript Implementation
- * 
+ *
  * Features:
  * - Real-time chat functionality
  * - WebSocket support for live messaging
@@ -19,7 +19,7 @@ class ChatState {
     this.isConnected = false;
     this.isTyping = false;
     this.lastActivity = Date.now();
-    this.connectionStatus = 'disconnected';
+    this.connectionStatus = "disconnected";
     this.messageQueue = [];
     this.retryAttempts = 0;
     this.maxRetries = 3;
@@ -32,7 +32,7 @@ class ChatState {
   }
 
   // Create new conversation
-  createConversation(title = 'New Chat') {
+  createConversation(title = "New Chat") {
     const id = `chat_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
     const conversation = {
       id,
@@ -40,8 +40,8 @@ class ChatState {
       messages: [],
       created: Date.now(),
       updated: Date.now(),
-      model: 'qwen-coder-3-30b',
-      metadata: {}
+      model: "qwen-coder-3-30b",
+      metadata: {},
     };
     this.conversations.set(id, conversation);
     this.currentConversationId = id;
@@ -58,15 +58,18 @@ class ChatState {
       role,
       content,
       timestamp: Date.now(),
-      status: 'sent',
-      metadata
+      status: "sent",
+      metadata,
     };
 
     conversation.messages.push(message);
     conversation.updated = Date.now();
-    
+
     // Update conversation title if it's the first user message
-    if (role === 'user' && conversation.messages.filter(m => m.role === 'user').length === 1) {
+    if (
+      role === "user" &&
+      conversation.messages.filter((m) => m.role === "user").length === 1
+    ) {
       conversation.title = this.generateTitle(content);
     }
 
@@ -76,12 +79,13 @@ 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';
-    
+    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();
-    
+    title = title.replace(/[^\w\s.,!?-]/g, "").trim();
+
     return title;
   }
 
@@ -91,24 +95,24 @@ class ChatState {
       const data = {
         conversations: Array.from(this.conversations.entries()),
         currentConversationId: this.currentConversationId,
-        timestamp: Date.now()
+        timestamp: Date.now(),
       };
-      localStorage.setItem('chatState', JSON.stringify(data));
+      localStorage.setItem("chatState", JSON.stringify(data));
     } catch (error) {
-      console.error('Failed to save state:', error);
+      console.error("Failed to save state:", error);
     }
   }
 
   // Load state from localStorage
   loadFromStorage() {
     try {
-      const data = JSON.parse(localStorage.getItem('chatState') || '{}');
+      const data = JSON.parse(localStorage.getItem("chatState") || "{}");
       if (data.conversations) {
         this.conversations = new Map(data.conversations);
         this.currentConversationId = data.currentConversationId;
       }
     } catch (error) {
-      console.error('Failed to load state:', error);
+      console.error("Failed to load state:", error);
     }
   }
 }
@@ -121,26 +125,26 @@ class APIManager {
     this.requestTimeout = 60000; // 60 seconds for AI responses
     this.retryDelay = 1000; // 1 second
     this.maxRetryDelay = 10000; // 10 seconds
-    this.apiVersion = 'v1';
+    this.apiVersion = "v1";
   }
 
   // Make API request with retry logic
   async makeRequest(endpoint, options = {}, retries = 3) {
     const url = `${this.baseURL}${endpoint}`;
-    
+
     for (let attempt = 0; attempt <= retries; attempt++) {
       try {
         // Create new AbortController for this request
         this.abortController = new AbortController();
-        
+
         // Add timeout handling
         const timeoutId = setTimeout(() => {
           this.abortController.abort();
         }, this.requestTimeout);
-        
+
         const response = await fetch(url, {
           ...options,
-          signal: this.abortController.signal
+          signal: this.abortController.signal,
         });
 
         clearTimeout(timeoutId);
@@ -152,13 +156,16 @@ class APIManager {
         return response;
       } catch (error) {
         console.warn(`Request attempt ${attempt + 1} failed:`, error);
-        
+
         if (attempt === retries) {
           throw error;
         }
 
         // Exponential backoff
-        const delay = Math.min(this.retryDelay * Math.pow(2, attempt), this.maxRetryDelay);
+        const delay = Math.min(
+          this.retryDelay * Math.pow(2, attempt),
+          this.maxRetryDelay
+        );
         await this.sleep(delay);
       }
     }
@@ -166,18 +173,18 @@ class APIManager {
 
   // Send chat message using streaming endpoint
   async sendMessage(message, history = []) {
-    const response = await this.makeRequest('/chat', {
-      method: 'POST',
+    const response = await this.makeRequest("/chat", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
+        "Content-Type": "application/json",
       },
-      body: JSON.stringify({ 
-        message, 
-        history: history.map(msg => ({
+      body: JSON.stringify({
+        message,
+        history: history.map((msg) => ({
           role: msg.role,
-          content: msg.content
-        }))
-      })
+          content: msg.content,
+        })),
+      }),
     });
 
     return response;
@@ -186,23 +193,23 @@ class APIManager {
   // Send message using OpenAI API compatible endpoint
   async sendMessageOpenAI(messages, options = {}) {
     const requestBody = {
-      model: options.model || 'qwen-coder-3-30b',
-      messages: messages.map(msg => ({
+      model: options.model || "qwen-coder-3-30b",
+      messages: messages.map((msg) => ({
         role: msg.role,
-        content: msg.content
+        content: msg.content,
       })),
       max_tokens: options.maxTokens || 1024,
       temperature: options.temperature || 0.7,
-      stream: options.stream || false
+      stream: options.stream || false,
     };
 
-    const response = await this.makeRequest('/v1/chat/completions', {
-      method: 'POST',
+    const response = await this.makeRequest("/v1/chat/completions", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        'Authorization': `Bearer ${options.apiKey || 'dummy-key'}`
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${options.apiKey || "dummy-key"}`,
       },
-      body: JSON.stringify(requestBody)
+      body: JSON.stringify(requestBody),
     });
 
     return response;
@@ -211,13 +218,13 @@ class APIManager {
   // Health check endpoint
   async healthCheck() {
     try {
-      const response = await fetch(`${this.baseURL}/ping`, { 
-        method: 'HEAD',
-        cache: 'no-cache'
+      const response = await fetch(`${this.baseURL}/ping`, {
+        method: "HEAD",
+        cache: "no-cache",
       });
       return response.ok;
     } catch (error) {
-      console.warn('Health check failed:', error);
+      console.warn("Health check failed:", error);
       return false;
     }
   }
@@ -232,7 +239,7 @@ class APIManager {
 
   // Utility sleep function
   sleep(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
+    return new Promise((resolve) => setTimeout(resolve, ms));
   }
 }
 
@@ -248,41 +255,41 @@ class ConnectionMonitor {
   }
 
   setupEventListeners() {
-    window.addEventListener('online', () => {
+    window.addEventListener("online", () => {
       this.isOnline = true;
-      this.onStatusChange('online');
+      this.onStatusChange("online");
       // Immediately test connection when coming back online
       this.pingServer();
     });
 
-    window.addEventListener('offline', () => {
+    window.addEventListener("offline", () => {
       this.isOnline = false;
-      this.onStatusChange('offline');
+      this.onStatusChange("offline");
     });
   }
 
   // Ping server to check actual connectivity
   async pingServer() {
     if (!this.isOnline) return false;
-    
+
     try {
       const startTime = Date.now();
-      const response = await fetch('/ping', { 
-        method: 'HEAD',
-        cache: 'no-cache',
-        timeout: 5000
+      const response = await fetch("/ping", {
+        method: "HEAD",
+        cache: "no-cache",
+        timeout: 5000,
       });
-      
+
       const pingTime = Date.now() - startTime;
       const isConnected = response.ok;
-      
+
       this.lastPingTime = pingTime;
-      this.onStatusChange(isConnected ? 'connected' : 'disconnected');
-      
+      this.onStatusChange(isConnected ? "connected" : "disconnected");
+
       return isConnected;
     } catch (error) {
-      console.warn('Ping failed:', error);
-      this.onStatusChange('disconnected');
+      console.warn("Ping failed:", error);
+      this.onStatusChange("disconnected");
       return false;
     }
   }
@@ -291,7 +298,7 @@ class ConnectionMonitor {
   startPingTest() {
     // Initial ping
     setTimeout(() => this.pingServer(), 1000);
-    
+
     // Regular pings
     setInterval(() => {
       this.pingServer();
@@ -321,41 +328,50 @@ class MessageRenderer {
 
   // Render a single message
   renderMessage(message) {
-    const messageDiv = document.createElement('div');
+    const messageDiv = document.createElement("div");
     messageDiv.className = `relative flex items-start gap-3 px-4 py-5 sm:px-6`;
     messageDiv.dataset.messageId = message.id;
 
     // Create avatar
-    const avatar = document.createElement('div');
+    const avatar = document.createElement("div");
     avatar.className = `mt-1 h-8 w-8 shrink-0 overflow-hidden rounded-full ${
-      message.role === 'user' 
-        ? 'bg-zinc-300 grid place-items-center text-[10px] font-medium' 
-        : 'bg-zinc-200'
+      message.role === "user"
+        ? "bg-zinc-300 grid place-items-center text-[10px] font-medium"
+        : "bg-zinc-200"
     }`;
-    
-    if (message.role === 'user') {
-      avatar.textContent = 'YOU';
+
+    if (message.role === "user") {
+      avatar.textContent = "YOU";
     }
 
     // Create message content wrapper
-    const contentWrapper = document.createElement('div');
-    contentWrapper.className = 'min-w-0 flex-1';
+    const contentWrapper = document.createElement("div");
+    contentWrapper.className = "min-w-0 flex-1";
 
     // Create message header
-    const header = document.createElement('div');
-    header.className = 'mb-1 flex items-baseline gap-2';
+    const header = document.createElement("div");
+    header.className = "mb-1 flex items-baseline gap-2";
     header.innerHTML = `
-      <div class="text-sm font-medium">${message.role === 'user' ? 'You' : 'Ava'}</div>
-      <div class="text-xs text-zinc-500">${this.formatTime(message.timestamp)}</div>
-      ${message.status !== 'sent' ? `<div class="text-xs text-zinc-400">${message.status}</div>` : ''}
+      <div class="text-sm font-medium">${
+        message.role === "user" ? "You" : "Ava"
+      }</div>
+      <div class="text-xs text-zinc-500">${this.formatTime(
+        message.timestamp
+      )}</div>
+      ${
+        message.status !== "sent"
+          ? `<div class="text-xs text-zinc-400">${message.status}</div>`
+          : ""
+      }
     `;
 
     // Create message content
-    const content = document.createElement('div');
-    content.className = message.role === 'user' 
-      ? 'prose prose-sm max-w-none rounded-2xl border border-zinc-200 bg-white p-4 dark:prose-invert dark:border-zinc-800 dark:bg-zinc-900'
-      : 'prose prose-sm max-w-none rounded-2xl border border-zinc-200 bg-zinc-50 p-4 dark:prose-invert dark:border-zinc-800 dark:bg-zinc-800/60';
-    
+    const content = document.createElement("div");
+    content.className =
+      message.role === "user"
+        ? "prose prose-sm max-w-none rounded-2xl border border-zinc-200 bg-white p-4 dark:prose-invert dark:border-zinc-800 dark:bg-zinc-900"
+        : "prose prose-sm max-w-none rounded-2xl border border-zinc-200 bg-zinc-50 p-4 dark:prose-invert dark:border-zinc-800 dark:bg-zinc-800/60";
+
     content.innerHTML = this.formatContent(message.content);
 
     contentWrapper.appendChild(header);
@@ -370,10 +386,13 @@ class MessageRenderer {
   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>')
-      .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
-      .replace(/\*([^*]+)\*/g, '<em>$1</em>');
+      .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>'
+      )
+      .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
+      .replace(/\*([^*]+)\*/g, "<em>$1</em>");
   }
 
   // Format timestamp
@@ -383,22 +402,24 @@ class MessageRenderer {
 
   // Create typing indicator
   createTypingIndicator() {
-    const messageDiv = document.createElement('div');
-    messageDiv.className = 'relative flex items-start gap-3 px-4 py-5 sm:px-6';
-    messageDiv.id = 'typing-indicator';
+    const messageDiv = document.createElement("div");
+    messageDiv.className = "relative flex items-start gap-3 px-4 py-5 sm:px-6";
+    messageDiv.id = "typing-indicator";
 
-    const avatar = document.createElement('div');
-    avatar.className = 'mt-1 h-8 w-8 shrink-0 overflow-hidden rounded-full bg-zinc-200';
+    const avatar = document.createElement("div");
+    avatar.className =
+      "mt-1 h-8 w-8 shrink-0 overflow-hidden rounded-full bg-zinc-200";
 
-    const contentWrapper = document.createElement('div');
-    contentWrapper.className = 'min-w-0 flex-1';
+    const contentWrapper = document.createElement("div");
+    contentWrapper.className = "min-w-0 flex-1";
 
-    const header = document.createElement('div');
-    header.className = 'mb-1 flex items-baseline gap-2';
-    header.innerHTML = '<div class="text-sm font-medium">Ava</div><div class="text-xs text-zinc-500">typing...</div>';
+    const header = document.createElement("div");
+    header.className = "mb-1 flex items-baseline gap-2";
+    header.innerHTML =
+      '<div class="text-sm font-medium">Ava</div><div class="text-xs text-zinc-500">typing...</div>';
 
-    const typingDots = document.createElement('div');
-    typingDots.className = 'flex items-center space-x-1 p-4';
+    const typingDots = document.createElement("div");
+    typingDots.className = "flex items-center space-x-1 p-4";
     typingDots.innerHTML = `
       <div class="w-2 h-2 bg-zinc-400 rounded-full animate-bounce" style="animation-delay: 0ms"></div>
       <div class="w-2 h-2 bg-zinc-400 rounded-full animate-bounce" style="animation-delay: 150ms"></div>
@@ -425,7 +446,7 @@ class MessageRenderer {
 
   // Hide typing indicator
   hideTyping() {
-    const existing = document.getElementById('typing-indicator');
+    const existing = document.getElementById("typing-indicator");
     if (existing) {
       existing.remove();
     }
@@ -434,7 +455,8 @@ class MessageRenderer {
   // Scroll to bottom of message container
   scrollToBottom() {
     if (this.messageContainer && this.messageContainer.parentElement) {
-      this.messageContainer.parentElement.scrollTop = this.messageContainer.parentElement.scrollHeight;
+      this.messageContainer.parentElement.scrollTop =
+        this.messageContainer.parentElement.scrollHeight;
     }
   }
 }
@@ -461,12 +483,12 @@ class ChatApp {
 
   // Initialize the application
   async init() {
-    console.log('Initializing Chat Application...');
-    
+    console.log("Initializing Chat Application...");
+
     // Wait for DOM to be ready
-    if (document.readyState === 'loading') {
-      await new Promise(resolve => {
-        document.addEventListener('DOMContentLoaded', resolve);
+    if (document.readyState === "loading") {
+      await new Promise((resolve) => {
+        document.addEventListener("DOMContentLoaded", resolve);
       });
     }
 
@@ -475,14 +497,15 @@ class ChatApp {
 
     // Get DOM elements from existing HTML structure
     this.elements = {
-      messages: document.getElementById('messages'),
-      composer: document.getElementById('composer'),
-      sendButton: document.getElementById('btn-send'),
-      messagesScroller: document.getElementById('msg-scroll'),
-      leftSidebar: document.getElementById('left-desktop'),
-      modelDropdown: document.getElementById('model-dd'),
-      chatMore: document.getElementById('chat-more'),
-      themeButton: document.getElementById('btn-theme')
+      messages: document.getElementById("messages"),
+      composer: document.getElementById("composer"),
+      sendButton: document.getElementById("btn-send"),
+      stopButton: document.getElementById("btn-stop"),
+      messagesScroller: document.getElementById("msg-scroll"),
+      leftSidebar: document.getElementById("left-desktop"),
+      modelDropdown: document.getElementById("model-dd"),
+      chatMore: document.getElementById("chat-more"),
+      themeButton: document.getElementById("btn-theme"),
     };
 
     // Set up message renderer
@@ -499,14 +522,21 @@ class ChatApp {
     // Setup model selector
     this.setupModelSelector();
 
+    // Initialize chat header with current model
+    const currentConversation = this.state.getCurrentConversation();
+    const currentModel = currentConversation?.model || "Qwen 3 Coder (Default)";
+    this.updateChatHeader(currentModel);
+
     // Initialize with existing conversation or create new one
     if (this.state.conversations.size === 0) {
       this.createNewConversation();
     } else {
       this.loadCurrentConversation();
+      // Zobrazíme historii chatů hned při načtení
+      this.updateChatHistory();
     }
 
-    console.log('Chat Application initialized successfully');
+    console.log("Chat Application initialized successfully");
   }
 
   // Setup model selector functionality
@@ -514,55 +544,126 @@ 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') : [];
+    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';
+    const currentModel =
+      this.state.getCurrentConversation()?.model || "Qwen 3 Coder (Default)";
     trigger.childNodes[0].textContent = currentModel;
 
     // Handle model selection
-    modelButtons.forEach(button => {
-      button.addEventListener('click', (e) => {
+    modelButtons.forEach((button) => {
+      // Skip info/status buttons
+      if (!button.textContent.includes("Qwen")) return;
+
+      button.addEventListener("click", (e) => {
         e.stopPropagation();
         const selectedModel = button.textContent.trim();
-        
+
         // Update UI
         trigger.childNodes[0].textContent = selectedModel;
-        menu.classList.add('hidden');
-        
+        menu.classList.add("hidden");
+
         // Update current conversation model
         const conversation = this.state.getCurrentConversation();
         if (conversation) {
           conversation.model = selectedModel;
+          conversation.modelId =
+            modelMap[selectedModel] || "qwen-coder-3-default";
           this.state.saveToStorage();
         }
-        
-        console.log('Model changed to:', selectedModel);
+
+        // Update chat header
+        this.updateChatHeader(selectedModel);
+
+        console.log("Model changed to:", selectedModel);
+
+        // Show brief notification
+        this.showModelChangeNotification(selectedModel);
       });
     });
   }
 
+  // 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);
+  }
+
+  // Update chat header with current model
+  updateChatHeader(modelName) {
+    const chatTitle = document.getElementById("chat-title");
+    const chatSubtitle = chatTitle?.nextElementSibling;
+
+    if (chatSubtitle) {
+      chatSubtitle.textContent = `Using ${modelName} • Ready to help`;
+    }
+  }
+
   // Set up all event listeners
   setupEventListeners() {
     // Message sending
     if (this.elements.sendButton) {
-      this.elements.sendButton.addEventListener('click', () => this.handleSendMessage());
+      this.elements.sendButton.addEventListener("click", () =>
+        this.handleSendMessage()
+      );
+    }
+
+    // Stop button
+    if (this.elements.stopButton) {
+      this.elements.stopButton.addEventListener("click", () =>
+        this.cancelCurrentMessage()
+      );
     }
 
     if (this.elements.composer) {
-      this.elements.composer.addEventListener('keydown', (e) => {
-        if (e.key === 'Enter' && !e.shiftKey) {
+      this.elements.composer.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
           e.preventDefault();
           this.handleSendMessage();
         }
       });
 
       // Auto-resize textarea
-      this.elements.composer.addEventListener('input', () => {
+      this.elements.composer.addEventListener("input", () => {
         this.autoResizeComposer();
         this.updateSendButtonState();
       });
@@ -570,8 +671,8 @@ class ChatApp {
 
     // Handle suggestion clicks from welcome screen
     if (this.elements.messages) {
-      this.elements.messages.addEventListener('click', (e) => {
-        const suggestion = e.target.closest('[data-suggest]');
+      this.elements.messages.addEventListener("click", (e) => {
+        const suggestion = e.target.closest("[data-suggest]");
         if (suggestion) {
           const text = suggestion.textContent.trim();
           if (text && this.elements.composer) {
@@ -585,9 +686,9 @@ class ChatApp {
     }
 
     // New chat button in sidebar
-    const newChatBtn = document.querySelector('#left-desktop button');
-    if (newChatBtn && newChatBtn.textContent.includes('New chat')) {
-      newChatBtn.addEventListener('click', () => {
+    const newChatBtn = document.querySelector("#left-desktop button");
+    if (newChatBtn && newChatBtn.textContent.includes("New chat")) {
+      newChatBtn.addEventListener("click", () => {
         this.createNewConversation();
       });
     }
@@ -598,7 +699,7 @@ class ChatApp {
     }, 30000); // Save every 30 seconds
 
     // Save on page unload
-    window.addEventListener('beforeunload', () => {
+    window.addEventListener("beforeunload", () => {
       this.state.saveToStorage();
     });
   }
@@ -614,21 +715,25 @@ class ChatApp {
     try {
       // Clear composer
       if (this.elements.composer) {
-        this.elements.composer.value = '';
+        this.elements.composer.value = "";
         this.autoResizeComposer();
       }
 
       // Check if message was already added by inline script
       const lastMessage = this.elements.messages?.lastElementChild;
-      const isUserMessage = lastMessage?.querySelector('.text-sm')?.textContent === 'You';
-      
+      const isUserMessage =
+        lastMessage?.querySelector(".text-sm")?.textContent === "You";
+
       let userMessage;
-      if (isUserMessage && lastMessage.querySelector('.prose')?.textContent?.trim() === message) {
+      if (
+        isUserMessage &&
+        lastMessage.querySelector(".prose")?.textContent?.trim() === message
+      ) {
         // Message already added by inline script, just update our state
-        userMessage = this.state.addMessage('user', message);
+        userMessage = this.state.addMessage("user", message);
       } else {
         // Add user message normally
-        userMessage = this.state.addMessage('user', message);
+        userMessage = this.state.addMessage("user", message);
         this.renderMessage(userMessage);
       }
 
@@ -637,42 +742,46 @@ class ChatApp {
 
       // Prepare conversation history for API
       const conversation = this.state.getCurrentConversation();
-      const history = conversation ? conversation.messages.map(msg => ({
-        role: msg.role,
-        content: msg.content
-      })) : [];
+      const history = conversation
+        ? conversation.messages.map((msg) => ({
+            role: msg.role,
+            content: msg.content,
+          }))
+        : [];
 
       // Use the streaming chat endpoint
-      const response = await this.api.sendMessage(message, history.slice(0, -1));
-      
+      const response = await this.api.sendMessage(
+        message,
+        history.slice(0, -1)
+      );
+
       // Hide typing indicator
       this.renderer.hideTyping();
 
       // Handle streaming response
       await this.handleStreamingResponse(response);
-
     } catch (error) {
-      console.error('Error sending message:', error);
+      console.error("Error sending message:", error);
       this.renderer.hideTyping();
-      
+
       // Add error message based on error type
-      let errorMessage = 'Sorry, I encountered an error. Please try again.';
-      
-      if (error.name === 'AbortError') {
-        errorMessage = 'Request was cancelled.';
-      } else if (error.message.includes('HTTP 429')) {
-        errorMessage = 'Too many requests. Please wait a moment and try again.';
-      } else if (error.message.includes('HTTP 401')) {
-        errorMessage = 'Authentication error. Please check your API key.';
-      } else if (error.message.includes('HTTP 500')) {
-        errorMessage = 'Server error. The AI service is temporarily unavailable.';
-      } else if (error.message.includes('Failed to fetch')) {
-        errorMessage = 'Network error. Please check your internet connection.';
+      let errorMessage = "Sorry, I encountered an error. Please try again.";
+
+      if (error.name === "AbortError") {
+        errorMessage = "Request was cancelled.";
+      } else if (error.message.includes("HTTP 429")) {
+        errorMessage = "Too many requests. Please wait a moment and try again.";
+      } else if (error.message.includes("HTTP 401")) {
+        errorMessage = "Authentication error. Please check your API key.";
+      } else if (error.message.includes("HTTP 500")) {
+        errorMessage =
+          "Server error. The AI service is temporarily unavailable.";
+      } else if (error.message.includes("Failed to fetch")) {
+        errorMessage = "Network error. Please check your internet connection.";
       }
 
-      const errorMsg = this.state.addMessage('assistant', errorMessage);
+      const errorMsg = this.state.addMessage("assistant", errorMessage);
       this.renderMessage(errorMsg);
-
     } finally {
       this.isProcessingMessage = false;
       this.updateSendButtonState();
@@ -683,61 +792,64 @@ class ChatApp {
   async handleStreamingResponse(response) {
     const reader = response.body.getReader();
     const decoder = new TextDecoder();
-    
+
     // Remove any stub responses first
     this.removeStubResponses();
-    
+
     // Create assistant message
-    const assistantMessage = this.state.addMessage('assistant', '');
+    const assistantMessage = this.state.addMessage("assistant", "");
     const messageElement = this.renderMessage(assistantMessage);
-    
+
     // Get content div for streaming updates
-    const contentDiv = messageElement.querySelector('.prose');
-    
-    let accumulatedContent = '';
-    
+    const contentDiv = messageElement.querySelector(".prose");
+
+    let accumulatedContent = "";
+
     try {
       while (true) {
         const { done, value } = await reader.read();
         if (done) break;
-        
+
         const chunk = decoder.decode(value, { stream: true });
         accumulatedContent += chunk;
-        
+
         // Update message content with real-time formatting
         assistantMessage.content = accumulatedContent;
         contentDiv.innerHTML = this.renderer.formatContent(accumulatedContent);
-        
+
         // Scroll to bottom smoothly
         this.renderer.scrollToBottom();
-        
+
         // Add a small delay to make streaming visible
-        await new Promise(resolve => setTimeout(resolve, 10));
+        await new Promise((resolve) => setTimeout(resolve, 10));
       }
-      
+
       // Final update with complete content
       assistantMessage.content = accumulatedContent;
-      assistantMessage.status = 'delivered';
+      assistantMessage.status = "delivered";
       contentDiv.innerHTML = this.renderer.formatContent(accumulatedContent);
-      
+
       // Update state with final content
       this.state.saveToStorage();
-      
     } catch (error) {
-      console.error('Error reading stream:', error);
-      
+      console.error("Error reading stream:", error);
+
       // If streaming fails, try to get any partial content
       if (accumulatedContent.trim()) {
         assistantMessage.content = accumulatedContent;
-        assistantMessage.status = 'partial';
-        contentDiv.innerHTML = this.renderer.formatContent(accumulatedContent) + 
-                               '<br><em class="text-zinc-400 text-xs">[Response incomplete]</em>';
+        assistantMessage.status = "partial";
+        contentDiv.innerHTML =
+          this.renderer.formatContent(accumulatedContent) +
+          '<br><em class="text-zinc-400 text-xs">[Response incomplete]</em>';
       } else {
-        assistantMessage.content = 'Error receiving response. Please try again.';
-        assistantMessage.status = 'error';
-        contentDiv.innerHTML = this.renderer.formatContent(assistantMessage.content);
+        assistantMessage.content =
+          "Error receiving response. Please try again.";
+        assistantMessage.status = "error";
+        contentDiv.innerHTML = this.renderer.formatContent(
+          assistantMessage.content
+        );
       }
-      
+
       this.state.saveToStorage();
     }
   }
@@ -745,15 +857,18 @@ class ChatApp {
   // Remove stub responses that might have been added by inline script
   removeStubResponses() {
     if (!this.elements.messages) return;
-    
-    const messages = this.elements.messages.querySelectorAll('.relative.flex.items-start');
-    messages.forEach(messageElement => {
-      const content = messageElement.querySelector('.prose');
-      if (content && (
-        content.textContent.includes('Stubbed response') ||
-        content.textContent.includes('Sem přijde odpověď modelu') ||
-        content.textContent.includes('Chat system loading')
-      )) {
+
+    const messages = this.elements.messages.querySelectorAll(
+      ".relative.flex.items-start"
+    );
+    messages.forEach((messageElement) => {
+      const content = messageElement.querySelector(".prose");
+      if (
+        content &&
+        (content.textContent.includes("Stubbed response") ||
+          content.textContent.includes("Sem přijde odpověď modelu") ||
+          content.textContent.includes("Chat system loading"))
+      ) {
         messageElement.remove();
       }
     });
@@ -763,30 +878,32 @@ class ChatApp {
   async sendMessageOpenAI(message, options = {}) {
     try {
       const conversation = this.state.getCurrentConversation();
-      const messages = conversation ? conversation.messages.map(msg => ({
-        role: msg.role,
-        content: msg.content
-      })) : [];
-      
+      const messages = conversation
+        ? conversation.messages.map((msg) => ({
+            role: msg.role,
+            content: msg.content,
+          }))
+        : [];
+
       // Add current message
-      messages.push({ role: 'user', content: message });
+      messages.push({ role: "user", content: message });
 
       const response = await this.api.sendMessageOpenAI(messages, {
-        model: options.model || 'qwen-coder-3-30b',
+        model: options.model || "qwen-coder-3-30b",
         maxTokens: options.maxTokens || 1024,
         temperature: options.temperature || 0.7,
-        stream: false
+        stream: false,
       });
 
       const data = await response.json();
-      
+
       if (data.choices && data.choices[0] && data.choices[0].message) {
         return data.choices[0].message.content;
       } else {
-        throw new Error('Invalid response format from OpenAI API');
+        throw new Error("Invalid response format from OpenAI API");
       }
     } catch (error) {
-      console.error('OpenAI API error:', error);
+      console.error("OpenAI API error:", error);
       throw error;
     }
   }
@@ -794,11 +911,11 @@ class ChatApp {
   // Render a message to the UI
   renderMessage(message) {
     if (!this.elements.messages) return null;
-    
+
     const messageElement = this.renderer.renderMessage(message);
     this.elements.messages.appendChild(messageElement);
     this.renderer.scrollToBottom();
-    
+
     return messageElement;
   }
 
@@ -808,59 +925,79 @@ class ChatApp {
     this.renderWelcomeScreen();
     this.updateChatHistory();
     this.state.saveToStorage();
-    console.log('Created new conversation:', conversation.id);
+    console.log("Created new conversation:", conversation.id);
   }
 
   // Update chat history in sidebar
+    // Update chat history in sidebar
   updateChatHistory() {
-    const historyContainer = document.querySelector('#left-desktop .overflow-y-auto');
+    const historyContainer = document.querySelector(
+      "#left-desktop .overflow-y-auto"
+    );
     if (!historyContainer) return;
 
     // Clear existing history (keep search and new chat button)
-    const existingChats = historyContainer.querySelectorAll('.chat-item');
-    existingChats.forEach(item => item.remove());
+    const existingChats = historyContainer.querySelectorAll(".chat-item");
+    existingChats.forEach((item) => item.remove());
 
     // Add conversations
-    const conversations = Array.from(this.state.conversations.values())
-      .sort((a, b) => b.updated - a.updated);
-
-    conversations.forEach(conversation => {
-      const chatItem = document.createElement('button');
-      chatItem.className = `chat-item 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 ${
-        conversation.id === this.state.currentConversationId ? 'bg-zinc-100 dark:bg-zinc-800' : ''
+    const conversations = Array.from(this.state.conversations.values()).sort(
+      (a, b) => b.updated - a.updated
+    );
+
+    conversations.forEach((conversation) => {
+      const chatItem = document.createElement("button");
+      chatItem.className = `chat-item 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 relative ${
+        conversation.id === this.state.currentConversationId
+          ? "bg-zinc-100 dark:bg-zinc-800"
+          : ""
       }`;
-      
+
       chatItem.innerHTML = `
-        <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">
+        <svg class="h-4 w-4 text-zinc-500 flex-shrink-0" 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">${conversation.title}</div>
-          <div class="truncate text-xs text-zinc-500">${this.formatChatDate(conversation.updated)}</div>
+          <div class="truncate text-xs text-zinc-500">${this.formatChatDate(
+            conversation.updated
+          )}</div>
         </div>
-        <div class="chat-actions opacity-0 group-hover:opacity-100 transition-opacity">
-          <button class="delete-chat p-1 hover:bg-red-100 dark:hover:bg-red-900 rounded" data-chat-id="${conversation.id}">
-            <svg class="h-3 w-3 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <polyline points="3 6 5 6 21 6"/>
-              <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
+        <div class="chat-actions opacity-0 group-hover:opacity-100 transition-opacity flex items-center">
+          <button class="delete-chat p-1.5 hover:bg-red-100 dark:hover:bg-red-900 rounded-md transition-colors" data-chat-id="${
+            conversation.id
+          }" title="Smazat chat">
+            <svg class="h-4 w-4 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M3 6h18"></path>
+              <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
+              <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
+              <line x1="10" y1="11" x2="10" y2="17"></line>
+              <line x1="14" y1="11" x2="14" y2="17"></line>
             </svg>
           </button>
         </div>
       `;
 
       // Handle chat selection
-      chatItem.addEventListener('click', (e) => {
-        if (e.target.closest('.delete-chat')) return;
+      chatItem.addEventListener("click", (e) => {
+        // Prevent click if clicking on delete button
+        if (e.target.closest(".delete-chat")) {
+          e.stopPropagation();
+          return;
+        }
         this.loadChatSession(conversation.id);
       });
 
       // Handle chat deletion
-      const deleteBtn = chatItem.querySelector('.delete-chat');
-      deleteBtn.addEventListener('click', (e) => {
-        e.stopPropagation();
-        this.deleteChatSession(conversation.id);
-      });
+      const deleteBtn = chatItem.querySelector(".delete-chat");
+      if (deleteBtn) {
+        deleteBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          this.deleteChatSession(conversation.id);
+        });
+      }
 
       historyContainer.appendChild(chatItem);
     });
@@ -872,11 +1009,11 @@ class ChatApp {
     const now = new Date();
     const diffInHours = (now - date) / (1000 * 60 * 60);
 
-    if (diffInHours < 1) return 'Just now';
+    if (diffInHours < 1) return "Just now";
     if (diffInHours < 24) return `${Math.floor(diffInHours)}h ago`;
-    if (diffInHours < 48) return 'Yesterday';
+    if (diffInHours < 48) return "Yesterday";
     if (diffInHours < 168) return `${Math.floor(diffInHours / 24)}d ago`;
-    
+
     return date.toLocaleDateString();
   }
 
@@ -892,13 +1029,13 @@ class ChatApp {
 
     // Clear existing messages
     if (this.elements.messages) {
-      this.elements.messages.innerHTML = '';
+      this.elements.messages.innerHTML = "";
     }
 
     if (conversation.messages.length === 0) {
       this.renderWelcomeScreen();
     } else {
-      conversation.messages.forEach(message => {
+      conversation.messages.forEach((message) => {
         this.renderMessage(message);
       });
     }
@@ -906,27 +1043,77 @@ class ChatApp {
     // Update UI
     this.updateChatHistory();
     this.state.saveToStorage();
-    
-    console.log('Loaded chat session:', sessionId);
+
+    console.log("Loaded chat session:", sessionId);
   }
 
   // Delete a chat session
+    // Delete a chat session
+    // Delete a chat session
   deleteChatSession(sessionId) {
-    if (confirm('Are you sure you want to delete this chat?')) {
+    if (confirm("Opravdu chcete smazat tento chat? Tuto akci nelze vrátit zpět.")) {
+      // Smažeme konverzaci ze stavu
       this.state.conversations.delete(sessionId);
-      
-      // If deleting current conversation, create new one
+
+      // Pokud mažeme současnou konverzaci
       if (sessionId === this.state.currentConversationId) {
-        this.createNewConversation();
+        this.state.currentConversationId = null;
+        
+        // Zkontrolujeme, jestli existují jiné konverzace
+        if (this.state.conversations.size > 0) {
+          // Najdeme nejnovější konverzaci
+          const conversations = Array.from(this.state.conversations.values());
+          const latestConversation = conversations.sort((a, b) => b.updated - a.updated)[0];
+          
+          // Přepneme na nejnovější konverzaci
+          this.loadChatSession(latestConversation.id);
+        } else {
+          // Pokud neexistují žádné konverzace, vytvoříme novou
+          this.createNewConversation();
+        }
       } else {
+        // Jinak jen aktualizujeme historii
         this.updateChatHistory();
       }
-      
+
+      // Uložíme stav
       this.state.saveToStorage();
-      console.log('Deleted chat session:', sessionId);
+      
+      console.log("Chat session deleted:", sessionId);
+
+      // Zobrazíme notifikaci
+      if (this.showNotification) {
+        this.showNotification("Chat byl úspěšně smazán", "success");
+      }
     }
   }
 
+  // Show notification (simple implementation)
+  showNotification(message, type = "info") {
+    const notification = document.createElement("div");
+    notification.className = `fixed top-20 right-4 z-50 px-4 py-2 rounded-lg ${
+      type === "success"
+        ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
+        : "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.textContent = message;
+
+    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);
+  }
+
   // Load current conversation
   loadCurrentConversation() {
     const conversation = this.state.getCurrentConversation();
@@ -937,13 +1124,13 @@ class ChatApp {
 
     // Clear existing messages
     if (this.elements.messages) {
-      this.elements.messages.innerHTML = '';
+      this.elements.messages.innerHTML = "";
     }
 
     if (conversation.messages.length === 0) {
       this.renderWelcomeScreen();
     } else {
-      conversation.messages.forEach(message => {
+      conversation.messages.forEach((message) => {
         this.renderMessage(message);
       });
     }
@@ -952,7 +1139,7 @@ class ChatApp {
   // Render welcome screen
   renderWelcomeScreen() {
     if (!this.elements.messages) return;
-    
+
     // Use the existing welcome message structure from HTML
     this.elements.messages.innerHTML = `
       <div class="relative flex items-start gap-3 px-4 py-5 sm:px-6">
@@ -960,7 +1147,9 @@ class ChatApp {
         <div class="min-w-0 flex-1">
           <div class="mb-1 flex items-baseline gap-2">
             <div class="text-sm font-medium">Ava</div>
-            <div class="text-xs text-zinc-500">${new Date().toLocaleTimeString().slice(0, 5)}</div>
+            <div class="text-xs text-zinc-500">${new Date()
+              .toLocaleTimeString()
+              .slice(0, 5)}</div>
           </div>
           <div class="prose prose-sm max-w-none rounded-2xl border border-zinc-200 bg-zinc-50 p-4 dark:prose-invert dark:border-zinc-800 dark:bg-zinc-800/60">
             <p>Ahoj! 👋 Jsem tvůj AI asistent. Jaký úkol dnes řešíš?</p>
@@ -979,38 +1168,54 @@ class ChatApp {
   // Auto-resize composer textarea
   autoResizeComposer() {
     if (!this.elements.composer) return;
-    
-    this.elements.composer.style.height = 'auto';
+
+    this.elements.composer.style.height = "auto";
     const maxHeight = 160; // max-h-40 from Tailwind (160px)
-    this.elements.composer.style.height = Math.min(this.elements.composer.scrollHeight, maxHeight) + 'px';
+    this.elements.composer.style.height =
+      Math.min(this.elements.composer.scrollHeight, maxHeight) + "px";
   }
 
   // Update send button state
   updateSendButtonState() {
     if (!this.elements.sendButton || !this.elements.composer) return;
-    
+
     const hasText = this.elements.composer.value.trim().length > 0;
     const isEnabled = hasText && !this.isProcessingMessage;
-    
+
     this.elements.sendButton.disabled = !isEnabled;
-    
+
     if (isEnabled) {
-      this.elements.sendButton.classList.remove('disabled:cursor-not-allowed', 'disabled:opacity-50');
+      this.elements.sendButton.classList.remove(
+        "disabled:cursor-not-allowed",
+        "disabled:opacity-50"
+      );
     } else {
-      this.elements.sendButton.classList.add('disabled:cursor-not-allowed', 'disabled:opacity-50');
+      this.elements.sendButton.classList.add(
+        "disabled:cursor-not-allowed",
+        "disabled:opacity-50"
+      );
+    }
+
+    // Show/hide stop button based on processing state
+    if (this.elements.stopButton) {
+      if (this.isProcessingMessage) {
+        this.elements.stopButton.classList.remove("hidden");
+      } else {
+        this.elements.stopButton.classList.add("hidden");
+      }
     }
   }
 
   // Handle connection status changes
   handleConnectionStatusChange(status) {
     this.state.connectionStatus = status;
-    console.log('Connection status changed to:', status);
-    
+    console.log("Connection status changed to:", status);
+
     // Update UI to show connection status
     this.updateConnectionIndicator(status);
-    
+
     // Retry queued messages when connection is restored
-    if (status === 'connected' && this.state.messageQueue.length > 0) {
+    if (status === "connected" && this.state.messageQueue.length > 0) {
       this.processMessageQueue();
     }
   }
@@ -1018,43 +1223,47 @@ class ChatApp {
   // Update connection indicator in UI
   updateConnectionIndicator(status) {
     // Find or create connection indicator
-    let indicator = document.getElementById('connection-indicator');
+    let indicator = document.getElementById("connection-indicator");
     if (!indicator) {
-      indicator = document.createElement('div');
-      indicator.id = 'connection-indicator';
-      indicator.className = 'fixed top-4 right-4 z-50 px-3 py-1 rounded-full text-xs font-medium transition-all duration-300';
+      indicator = document.createElement("div");
+      indicator.id = "connection-indicator";
+      indicator.className =
+        "fixed bottom-4 right-4 z-50 px-3 py-1 rounded-full text-xs font-medium transition-all duration-300";
       document.body.appendChild(indicator);
     }
 
     // Update indicator based on status
     switch (status) {
-      case 'connected':
-        indicator.className = 'fixed top-4 right-4 z-50 px-3 py-1 rounded-full text-xs font-medium transition-all duration-300 bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
-        indicator.textContent = '🟢 Connected';
+      case "connected":
+        indicator.className =
+          "fixed bottom-4 right-4 z-50 px-3 py-1 rounded-full text-xs font-medium transition-all duration-300 bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200";
+        indicator.textContent = "🟢 Connected";
         // Hide after 2 seconds
         setTimeout(() => {
-          indicator.style.opacity = '0';
-          indicator.style.transform = 'translateY(-20px)';
+          indicator.style.opacity = "0";
+          indicator.style.transform = "translateY(20px)";
         }, 2000);
         break;
-      
-      case 'disconnected':
-        indicator.className = 'fixed top-4 right-4 z-50 px-3 py-1 rounded-full text-xs font-medium transition-all duration-300 bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
-        indicator.textContent = '🔴 Disconnected';
-        indicator.style.opacity = '1';
-        indicator.style.transform = 'translateY(0)';
+
+      case "disconnected":
+        indicator.className =
+          "fixed bottom-4 right-4 z-50 px-3 py-1 rounded-full text-xs font-medium transition-all duration-300 bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200";
+        indicator.textContent = "🔴 Disconnected";
+        indicator.style.opacity = "1";
+        indicator.style.transform = "translateY(0)";
         break;
-      
-      case 'offline':
-        indicator.className = 'fixed top-4 right-4 z-50 px-3 py-1 rounded-full text-xs font-medium transition-all duration-300 bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
-        indicator.textContent = '⚠️ Offline';
-        indicator.style.opacity = '1';
-        indicator.style.transform = 'translateY(0)';
+
+      case "offline":
+        indicator.className =
+          "fixed top-4 right-4 z-50 px-3 py-1 rounded-full text-xs font-medium transition-all duration-300 bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200";
+        indicator.textContent = "⚠️ Offline";
+        indicator.style.opacity = "1";
+        indicator.style.transform = "translateY(0)";
         break;
-      
+
       default:
-        indicator.style.opacity = '0';
-        indicator.style.transform = 'translateY(-20px)';
+        indicator.style.opacity = "0";
+        indicator.style.transform = "translateY(-20px)";
     }
   }
 
@@ -1065,7 +1274,7 @@ class ChatApp {
       try {
         await this.handleSendMessage(queuedMessage);
       } catch (error) {
-        console.error('Failed to process queued message:', error);
+        console.error("Failed to process queued message:", error);
         // Re-queue if failed
         this.state.messageQueue.unshift(queuedMessage);
         break;
@@ -1086,23 +1295,29 @@ class ChatApp {
 const chatApp = new ChatApp();
 
 // Start the application when DOM is ready and make it globally available
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', () => {
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", () => {
     chatApp.init().then(() => {
       window.chatApp = chatApp; // Make globally available
-      console.log('ChatApp is now globally available');
+      console.log("ChatApp is now globally available");
     });
   });
 } else {
   chatApp.init().then(() => {
     window.chatApp = chatApp; // Make globally available
-    console.log('ChatApp is now globally available');
+    console.log("ChatApp is now globally available");
   });
 }
 
 // Export for potential module usage
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = { ChatApp, ChatState, APIManager, MessageRenderer, ConnectionMonitor };
+if (typeof module !== "undefined" && module.exports) {
+  module.exports = {
+    ChatApp,
+    ChatState,
+    APIManager,
+    MessageRenderer,
+    ConnectionMonitor,
+  };
 }
 
 // Utility functions for backward compatibility and additional features
@@ -1114,7 +1329,7 @@ async function initializeI18n() {
     isI18nReady = true;
     return true;
   } catch (error) {
-    console.error('Failed to initialize i18n:', error);
+    console.error("Failed to initialize i18n:", error);
     isI18nReady = false;
     return false;
   }
@@ -1159,7 +1374,7 @@ class PerformanceMonitor {
       return {
         used: Math.round(performance.memory.usedJSHeapSize / 1048576),
         total: Math.round(performance.memory.totalJSHeapSize / 1048576),
-        limit: Math.round(performance.memory.jsHeapSizeLimit / 1048576)
+        limit: Math.round(performance.memory.jsHeapSizeLimit / 1048576),
       };
     }
     return null;
@@ -1167,25 +1382,25 @@ class PerformanceMonitor {
 
   // Monitor network timing
   observeNetworkTiming() {
-    if ('PerformanceObserver' in window) {
+    if ("PerformanceObserver" in window) {
       const observer = new PerformanceObserver((list) => {
         list.getEntries().forEach((entry) => {
-          if (entry.entryType === 'navigation') {
-            console.log('Navigation timing:', {
+          if (entry.entryType === "navigation") {
+            console.log("Navigation timing:", {
               dns: entry.domainLookupEnd - entry.domainLookupStart,
               connection: entry.connectEnd - entry.connectStart,
               request: entry.responseStart - entry.requestStart,
-              response: entry.responseEnd - entry.responseStart
+              response: entry.responseEnd - entry.responseStart,
             });
           }
         });
       });
 
       try {
-        observer.observe({ entryTypes: ['navigation', 'resource'] });
-        this.observers.set('network', observer);
+        observer.observe({ entryTypes: ["navigation", "resource"] });
+        this.observers.set("network", observer);
       } catch (error) {
-        console.warn('Performance observer not supported:', error);
+        console.warn("Performance observer not supported:", error);
       }
     }
   }
@@ -1210,7 +1425,7 @@ class WebSocketManager {
       this.socket = new WebSocket(this.url);
       this.setupEventListeners();
     } catch (error) {
-      console.error('WebSocket connection failed:', error);
+      console.error("WebSocket connection failed:", error);
       this.handleReconnect();
     }
   }
@@ -1220,32 +1435,32 @@ class WebSocketManager {
     if (!this.socket) return;
 
     this.socket.onopen = () => {
-      console.log('WebSocket connected');
+      console.log("WebSocket connected");
       this.reconnectAttempts = 0;
       this.startHeartbeat();
       this.processMessageQueue();
-      this.emit('connected');
+      this.emit("connected");
     };
 
     this.socket.onmessage = (event) => {
       try {
         const data = JSON.parse(event.data);
-        this.emit('message', data);
+        this.emit("message", data);
       } catch (error) {
-        console.error('Failed to parse WebSocket message:', error);
+        console.error("Failed to parse WebSocket message:", error);
       }
     };
 
     this.socket.onclose = () => {
-      console.log('WebSocket disconnected');
+      console.log("WebSocket disconnected");
       this.stopHeartbeat();
-      this.emit('disconnected');
+      this.emit("disconnected");
       this.handleReconnect();
     };
 
     this.socket.onerror = (error) => {
-      console.error('WebSocket error:', error);
-      this.emit('error', error);
+      console.error("WebSocket error:", error);
+      this.emit("error", error);
     };
   }
 
@@ -1263,16 +1478,19 @@ class WebSocketManager {
   handleReconnect() {
     if (this.reconnectAttempts < this.maxReconnectAttempts) {
       this.reconnectAttempts++;
-      const delay = this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1);
-      
-      console.log(`Attempting to reconnect in ${delay}ms (attempt ${this.reconnectAttempts})`);
-      
+      const delay =
+        this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1);
+
+      console.log(
+        `Attempting to reconnect in ${delay}ms (attempt ${this.reconnectAttempts})`
+      );
+
       setTimeout(() => {
         this.connect();
       }, delay);
     } else {
-      console.error('Max reconnection attempts reached');
-      this.emit('maxReconnectReached');
+      console.error("Max reconnection attempts reached");
+      this.emit("maxReconnectReached");
     }
   }
 
@@ -1280,7 +1498,7 @@ class WebSocketManager {
   startHeartbeat() {
     this.heartbeatInterval = setInterval(() => {
       if (this.socket && this.socket.readyState === WebSocket.OPEN) {
-        this.send({ type: 'ping' });
+        this.send({ type: "ping" });
       }
     }, 30000); // Send heartbeat every 30 seconds
   }
@@ -1322,7 +1540,7 @@ class WebSocketManager {
   emit(event, data) {
     const eventListeners = this.listeners.get(event);
     if (eventListeners) {
-      eventListeners.forEach(callback => callback(data));
+      eventListeners.forEach((callback) => callback(data));
     }
   }
 
@@ -1340,14 +1558,14 @@ class WebSocketManager {
 class SecurityUtils {
   // Sanitize HTML content
   static sanitizeHTML(html) {
-    const div = document.createElement('div');
+    const div = document.createElement("div");
     div.textContent = html;
     return div.innerHTML;
   }
 
   // Validate message content
   static validateMessage(content) {
-    if (typeof content !== 'string') return false;
+    if (typeof content !== "string") return false;
     if (content.length === 0 || content.length > 10000) return false;
     return true;
   }
@@ -1355,25 +1573,28 @@ class SecurityUtils {
   // Rate limiting
   static createRateLimiter(limit, window) {
     const requests = new Map();
-    
-    return function(identifier) {
+
+    return function (identifier) {
       const now = Date.now();
       const windowStart = now - window;
-      
+
       // Clean old requests
       for (const [key, timestamps] of requests.entries()) {
-        requests.set(key, timestamps.filter(time => time > windowStart));
+        requests.set(
+          key,
+          timestamps.filter((time) => time > windowStart)
+        );
         if (requests.get(key).length === 0) {
           requests.delete(key);
         }
       }
-      
+
       // Check current requests
       const userRequests = requests.get(identifier) || [];
       if (userRequests.length >= limit) {
         return false; // Rate limited
       }
-      
+
       // Add current request
       userRequests.push(now);
       requests.set(identifier, userRequests);
@@ -1399,34 +1620,34 @@ class ErrorReporter {
 
   setupGlobalErrorHandling() {
     // Catch unhandled errors
-    window.addEventListener('error', (event) => {
+    window.addEventListener("error", (event) => {
       this.reportError({
-        type: 'javascript',
+        type: "javascript",
         message: event.message,
         filename: event.filename,
         line: event.lineno,
         column: event.colno,
         stack: event.error?.stack,
-        timestamp: Date.now()
+        timestamp: Date.now(),
       });
     });
 
     // Catch unhandled promise rejections
-    window.addEventListener('unhandledrejection', (event) => {
+    window.addEventListener("unhandledrejection", (event) => {
       this.reportError({
-        type: 'promise',
-        message: event.reason?.message || 'Unhandled promise rejection',
+        type: "promise",
+        message: event.reason?.message || "Unhandled promise rejection",
         stack: event.reason?.stack,
-        timestamp: Date.now()
+        timestamp: Date.now(),
       });
     });
   }
 
   reportError(error) {
-    console.error('Error reported:', error);
-    
+    console.error("Error reported:", error);
+
     this.errors.push(error);
-    
+
     // Keep only recent errors
     if (this.errors.length > this.maxErrors) {
       this.errors.shift();
@@ -1440,9 +1661,9 @@ class ErrorReporter {
     // Placeholder for analytics integration
     // In production, you might send to services like Sentry, LogRocket, etc.
     if (window.gtag) {
-      window.gtag('event', 'exception', {
+      window.gtag("event", "exception", {
         description: error.message,
-        fatal: false
+        fatal: false,
       });
     }
   }
@@ -1463,15 +1684,15 @@ class AccessibilityManager {
   }
 
   setupKeyboardNavigation() {
-    document.addEventListener('keydown', (event) => {
+    document.addEventListener("keydown", (event) => {
       // Handle global keyboard shortcuts
       if (event.ctrlKey || event.metaKey) {
         switch (event.key) {
-          case 'n':
+          case "n":
             event.preventDefault();
             chatApp.createNewConversation();
             break;
-          case '/':
+          case "/":
             event.preventDefault();
             chatApp.elements.composer?.focus();
             break;
@@ -1479,7 +1700,7 @@ class AccessibilityManager {
       }
 
       // Escape key to cancel current operation
-      if (event.key === 'Escape') {
+      if (event.key === "Escape") {
         chatApp.cancelCurrentMessage();
       }
     });
@@ -1487,10 +1708,10 @@ class AccessibilityManager {
 
   setupScreenReaderSupport() {
     // Announce new messages to screen readers
-    const announcer = document.createElement('div');
-    announcer.setAttribute('aria-live', 'polite');
-    announcer.setAttribute('aria-atomic', 'true');
-    announcer.className = 'sr-only';
+    const announcer = document.createElement("div");
+    announcer.setAttribute("aria-live", "polite");
+    announcer.setAttribute("aria-atomic", "true");
+    announcer.className = "sr-only";
     document.body.appendChild(announcer);
 
     this.announcer = announcer;
@@ -1498,7 +1719,9 @@ class AccessibilityManager {
 
   announceMessage(message) {
     if (this.announcer) {
-      this.announcer.textContent = `${message.role === 'user' ? 'You' : 'Assistant'}: ${message.content}`;
+      this.announcer.textContent = `${
+        message.role === "user" ? "You" : "Assistant"
+      }: ${message.content}`;
     }
   }
 }
@@ -1515,5 +1738,5 @@ window.chatDebug = {
   performanceMonitor,
   errorReporter,
   accessibilityManager,
-  SecurityUtils
-};
+  SecurityUtils,
+};

public/index.html

@@ -49,15 +49,22 @@
             <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">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">GPT-4.1</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">Claude 3.5 Sonnet</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">Qwen 3 Coder</button>
-            <div class="my-1 h-px bg-zinc-200 dark:bg-zinc-800"></div>
+            <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
+            </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">
-              <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="M10 13v-2"/><path d="M14 13v-2"/><path d="M7 22v-4a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v4"/><circle cx="12" cy="7" r="4"/></svg>
-              Manage keys
+              <span class="w-2 h-2 bg-green-500 rounded-full"></span>
+              Qwen 3 Coder (Default)
             </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
+              </div>
+            </div>
           </div>
         </div>
         <!-- Theme toggle -->
@@ -150,11 +157,11 @@
             <svg class="h-5 w-5" 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>
           <div class="min-w-0">
-            <div class="truncate text-sm font-semibold">Design prompt library</div>
-            <div class="truncate text-xs text-zinc-500 dark:text-zinc-400">Using Qwen 3 Coder • Web + Files enabled</div>
+            <div class="truncate text-sm font-semibold" id="chat-title">New Chat</div>
+            <div class="truncate text-xs text-zinc-500 dark:text-zinc-400">Using Qwen 3 Coder • Ready to help</div>
           </div>
           <div class="ml-auto flex items-center gap-2">
-            <span class="hidden rounded-md border border-zinc-200 px-2 py-1 text-xs sm:inline-flex dark:border-zinc-800">/public</span>
+            <span class="hidden rounded-md border border-zinc-200 px-2 py-1 text-xs sm:inline-flex dark:border-zinc-800">/chat</span>
             <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"><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="M4 12v7a1 1 0 0 0 1 1h7"/><path d="m21 3-9 9"/><path d="M15 3h6v6"/></svg>Share</button>
             <div class="relative" id="chat-more">
               <button class="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800" data-dd-trigger aria-label="More"><svg class="h-5 w-5" 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>
@@ -185,51 +192,9 @@
                 </div>
               </div>
             </div>
-            <!-- user message -->
-            <div class="relative flex items-start gap-3 px-4 py-5 sm:px-6">
-              <div class="mt-1 h-8 w-8 shrink-0 overflow-hidden rounded-full bg-zinc-300 grid place-items-center text-[10px] font-medium">YOU</div>
-              <div class="min-w-0 flex-1">
-                <div class="mb-1 flex items-baseline gap-2"><div class="text-sm font-medium">You</div><div class="text-xs text-zinc-500">19:05</div></div>
-                <div class="prose prose-sm max-w-none rounded-2xl border border-zinc-200 bg-white p-4 dark:prose-invert dark:border-zinc-800 dark:bg-zinc-900">Potřebuji minimalistické UI pro chat (jako ChatGPT), prosím v Tailwindu.</div>
-              </div>
-            </div>
+            
 
-            <!-- assistant message 2 (card demo) -->
-            <div class="relative flex items-start gap-3 px-4 py-5 sm:px-6">
-              <div class="mt-1 h-8 w-8 shrink-0 overflow-hidden rounded-full bg-zinc-200"></div>
-              <div class="min-w-0 flex-1">
-                <div class="mb-1 flex items-baseline gap-2"><div class="text-sm font-medium">Ava</div><div class="text-xs text-zinc-500">19:05</div></div>
-                <div class="prose prose-sm max-w-none rounded-2xl border border-zinc-200 bg-zinc-50 p-4 dark:prose-invert dark:border-zinc-800 dark:bg-zinc-800/60">
-                  <p>Jasně! Níže je kostra komponenty. Zahrnuje hlavičku, seznam zpráv a composer.</p>
-                  <div class="mt-3 overflow-hidden rounded-lg border border-zinc-200 dark:border-zinc-800">
-                    <div class="border-b border-zinc-200 px-4 py-2 text-xs text-zinc-500 dark:border-zinc-800">Example component</div>
-                    <pre class="max-h-80 overflow-auto p-4 text-xs scrollbar-thin"><code>export default function Chat(){/* ... */}</code></pre>
-                    <div class="flex items-center justify-between gap-2 border-t border-zinc-200 px-4 py-2 text-xs text-zinc-500 dark:border-zinc-800">
-                      <div class="flex items-center gap-2"><span class="rounded border px-1.5 py-0.5">TypeScript</span><span>•</span><span>Copy &amp; adapt</span></div>
-                      <button class="inline-flex items-center gap-2 rounded-md border border-zinc-200 px-2 py-1 text-xs hover:bg-zinc-50 dark:border-zinc-800 dark:hover:bg-zinc-800"><svg class="h-3.5 w-3.5" 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"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>Copy</button>
-                    </div>
-                  </div>
-                  <div class="mt-3 flex gap-2 text-xs text-zinc-500"><span class="rounded border px-1.5 py-0.5">#ui</span><span class="rounded border px-1.5 py-0.5">#tailwind</span><span class="rounded border px-1.5 py-0.5">#shadcn</span></div>
-                </div>
-              </div>
-            </div>
-
-            <!-- assistant message 3 (quick actions) -->
-            <div class="relative flex items-start gap-3 px-4 py-5 sm:px-6">
-              <div class="mt-1 h-8 w-8 shrink-0 overflow-hidden rounded-full bg-zinc-200"></div>
-              <div class="min-w-0 flex-1">
-                <div class="mb-1 flex items-baseline gap-2"><div class="text-sm font-medium">Ava</div><div class="text-xs text-zinc-500">19:06</div></div>
-                <div class="rounded-2xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-800/60">
-                  <p class="text-sm">Mohu také vytvořit sadu rychlých příkazů. Vyber jeden z nich:</p>
-                  <div class="mt-3 grid gap-2 sm:grid-cols-2">
-                    <button class="inline-flex items-center rounded-md bg-zinc-100 px-3 py-2 text-sm hover:bg-zinc-200 dark:bg-zinc-700 dark:hover:bg-zinc-600"><svg class="mr-2 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20"/><path d="M5 7h14"/></svg>Summarize this page</button>
-                    <button class="inline-flex items-center rounded-md bg-zinc-100 px-3 py-2 text-sm hover:bg-zinc-200 dark:bg-zinc-700 dark:hover:bg-zinc-600"><svg class="mr-2 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v4H4z"/><path d="M4 12h16v8H4z"/></svg>Draft an email</button>
-                    <button class="inline-flex items-center rounded-md bg-zinc-100 px-3 py-2 text-sm hover:bg-zinc-200 dark:bg-zinc-700 dark:hover:bg-zinc-600"><svg class="mr-2 h-4 w-4" 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>Explain like I'm 5</button>
-                    <button class="inline-flex items-center rounded-md bg-zinc-100 px-3 py-2 text-sm hover:bg-zinc-200 dark:bg-zinc-700 dark:hover:bg-zinc-600"><svg class="mr-2 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M3 12h18"/><path d="M3 18h18"/></svg>Create tasks</button>
-                  </div>
-                </div>
-              </div>
-            </div>
+         
           </div>
         </div>
 
@@ -251,7 +216,7 @@
               <div class="mt-2 flex items-center justify-between">
                 <div class="text-xs text-zinc-500">Shift+Enter = new line</div>
                 <div class="flex items-center gap-2">
-                  <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"><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="2" y="2" width="20" height="20" rx="2"/><path d="M12 8v8"/><path d="M8 12h8"/></svg>Stop</button>
+                  <button id="btn-stop" 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 hidden"><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="2" y="2" width="20" height="20" rx="2"/><path d="M12 8v8"/><path d="M8 12h8"/></svg>Stop</button>
                   <button id="btn-send" class="inline-flex items-center gap-2 rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"><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="M22 2 11 13"/><path d="M22 2 15 22 11 13 2 9 22 2z"/></svg>Send</button>
                 </div>
               </div>
@@ -355,13 +320,24 @@
     // Composer enable/disable and send
     const ta = document.getElementById('composer');
     const send = document.getElementById('btn-send');
+    const stop = document.getElementById('btn-stop');
     const messages = document.getElementById('messages');
     const scroller = document.getElementById('msg-scroll');
     function autoResize(){ ta.style.height='auto'; ta.style.height=Math.min(ta.scrollHeight,160)+'px'; }
-    function sync(){ send.disabled = ta.value.trim().length===0; }
+    function sync(){ 
+      send.disabled = ta.value.trim().length===0; 
+      // Don't show stop button here - let ChatApp handle it
+    }
     ta.addEventListener('input', ()=>{ autoResize(); sync(); });
     ta.addEventListener('keydown', (e)=>{ if(e.key==='Enter' && !e.shiftKey){ e.preventDefault(); if(!send.disabled) doSend(); }});
     send.addEventListener('click', doSend);
+    
+    // Stop button handler
+    stop.addEventListener('click', ()=>{
+      if (window.chatApp && window.chatApp.cancelCurrentMessage) {
+        window.chatApp.cancelCurrentMessage();
+      }
+    });
     function bubble(role, text){
       const wrap = document.createElement('div');
       wrap.className = 'relative flex items-start gap-3 px-4 py-5 sm:px-6';