Upload 2 files

index.html

@@ -542,6 +542,140 @@
             50%, 100% { opacity: 0; }
         }
 
+        /* --- SIDEBAR (istorija razgovora) --- */
+        .sidebar-overlay {
+            position: fixed;
+            inset: 0;
+            background: rgba(0, 0, 0, 0.5);
+            z-index: 40;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.25s ease;
+        }
+
+        .sidebar-overlay.open {
+            opacity: 1;
+            pointer-events: auto;
+        }
+
+        .sidebar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            height: 100%;
+            height: 100dvh;
+            width: min(300px, 82vw);
+            background-color: var(--surface-color);
+            border-right: 1px solid var(--border-color);
+            z-index: 50;
+            display: flex;
+            flex-direction: column;
+            transform: translateX(-100%);
+            transition: transform 0.25s ease;
+            box-shadow: var(--shadow-md);
+        }
+
+        .sidebar.open {
+            transform: translateX(0);
+        }
+
+        .sidebar-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 1rem;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+
+        .sidebar-new-chat {
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+            margin: 0.8rem;
+            padding: 0.7rem 0.9rem;
+            background-color: var(--input-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-main);
+            font-family: inherit;
+            font-size: 0.9rem;
+            cursor: pointer;
+            transition: border-color 0.2s, color 0.2s;
+            flex-shrink: 0;
+        }
+
+        .sidebar-new-chat:hover {
+            border-color: var(--primary-color);
+            color: var(--primary-color);
+        }
+
+        .sidebar-section-label {
+            padding: 0 1rem;
+            font-size: 0.72rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: var(--text-secondary);
+            margin-bottom: 0.3rem;
+            flex-shrink: 0;
+        }
+
+        .sidebar-chat-list {
+            flex: 1;
+            overflow-y: auto;
+            padding: 0 0.5rem 0.5rem;
+            display: flex;
+            flex-direction: column;
+            gap: 0.15rem;
+        }
+
+        .sidebar-chat-item {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.6rem 0.7rem;
+            border-radius: 8px;
+            cursor: pointer;
+            color: var(--text-main);
+            font-size: 0.85rem;
+        }
+
+        .sidebar-chat-item span {
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .sidebar-chat-item:hover {
+            background-color: var(--surface-hover);
+        }
+
+        .sidebar-chat-item.active {
+            background-color: var(--surface-hover);
+            color: var(--primary-color);
+        }
+
+        .sidebar-chat-delete {
+            background: none;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            font-size: 0.8rem;
+            padding: 0.25rem 0.4rem;
+            border-radius: 4px;
+            opacity: 0;
+            transition: opacity 0.15s, color 0.15s;
+            flex-shrink: 0;
+        }
+
+        .sidebar-chat-item:hover .sidebar-chat-delete {
+            opacity: 1;
+        }
+
+        .sidebar-chat-delete:hover {
+            color: #ef4444;
+        }
         /* --- EXECUTE_CODE REZULTAT (formatiran prikaz umjesto sirovog JSON-a) --- */
         .exec-result {
             align-self: stretch;
@@ -627,9 +761,14 @@
 
     <!-- Header -->
     <header>
-        <div class="app-title">
-            <i class="fa-solid fa-robot" style="color: var(--primary-color);"></i>
-            AgentScope AI
+        <div style="display:flex; align-items:center; gap:0.4rem;">
+            <button class="settings-btn" id="open-sidebar" aria-label="Meni" title="Meni">
+                <i class="fa-solid fa-bars"></i>
+            </button>
+            <div class="app-title">
+                <i class="fa-solid fa-robot" style="color: var(--primary-color);"></i>
+                AgentScope AI
+            </div>
         </div>
         <div style="display:flex; align-items:center; gap:0.2rem;">
             <button class="settings-btn" id="open-mcp" aria-label="MCP Serveri" title="MCP Serveri">
@@ -641,6 +780,25 @@
         </div>
     </header>
 
+    <!-- Sidebar (istorija razgovora) -->
+    <div class="sidebar-overlay" id="sidebar-overlay"></div>
+    <aside class="sidebar" id="sidebar">
+        <div class="sidebar-header">
+            <div class="app-title">
+                <i class="fa-solid fa-robot" style="color: var(--primary-color);"></i>
+                AgentScope AI
+            </div>
+            <button class="settings-btn" id="close-sidebar" aria-label="Zatvori meni">
+                <i class="fa-solid fa-xmark"></i>
+            </button>
+        </div>
+        <button class="sidebar-new-chat" id="sidebar-new-chat" type="button">
+            <i class="fa-solid fa-plus"></i> Novi razgovor
+        </button>
+        <div class="sidebar-section-label">Razgovori</div>
+        <div class="sidebar-chat-list" id="sidebar-chat-list"></div>
+    </aside>
+
     <!-- Main Chat Area -->
     <main id="chat-container">
         <div class="message system">Dobrodošao. Odaberi model i unesi API Ključ u postavkama za početak.</div>
@@ -883,7 +1041,15 @@
             mcpNewUrl: document.getElementById('mcp-new-url'),
             mcpNewHeaderName: document.getElementById('mcp-new-header-name'),
             mcpNewHeaderValue: document.getElementById('mcp-new-header-value'),
-            mcpAddBtn: document.getElementById('mcp-add-btn')
+            mcpAddBtn: document.getElementById('mcp-add-btn'),
+
+            // Sidebar (istorija razgovora)
+            sidebar: document.getElementById('sidebar'),
+            sidebarOverlay: document.getElementById('sidebar-overlay'),
+            openSidebarBtn: document.getElementById('open-sidebar'),
+            closeSidebarBtn: document.getElementById('close-sidebar'),
+            sidebarNewChatBtn: document.getElementById('sidebar-new-chat'),
+            sidebarChatList: document.getElementById('sidebar-chat-list')
         };
 
         // --- MCP SERVERI (podrazumijevana lista) ---
@@ -913,8 +1079,13 @@
             // Historija razgovora (bez system poruke) - koristi se kao kontekst za API pozive.
             // NAPOMENA: nema više hardkodiranog limita na broj poruka - historija raste
             // prirodno sa razgovorom (provider/model API sam prijavi grešku ako se pređe kontekst).
+            // Popunjava se u loadChats() pri pokretanju (iz sačuvanog chata ili novog).
             messages: [],
 
+            // Svi sačuvani razgovori (sidebar istorija) - { id, title, messages, updatedAt }[]
+            chats: [],
+            currentChatId: null,
+
             // MCP serveri (runtime lista, sa statusom konekcije i keširanim tools/list po serveru)
             mcpServers: [],
 
@@ -1079,6 +1250,7 @@
 
             init() {
                 this.loadSettings();
+                this.loadChats();
                 this.mcpInit();
                 this.loadModelsIntoSelect(this.config.provider, this.config.apiKey);
                 this.bindEvents();
@@ -1436,6 +1608,192 @@
                 }
             },
 
+            // --- SIDEBAR / ISTORIJA RAZGOVORA ---
+            // Sve u localStorage: 'agentscope_chats' (niz razgovora) i
+            // 'agentscope_current_chat_id' (koji je trenutno otvoren).
+
+            loadChats() {
+                let saved = null;
+                try { saved = JSON.parse(localStorage.getItem('agentscope_chats') || 'null'); } catch (e) { /* ignoriši neispravan JSON */ }
+                this.chats = Array.isArray(saved) ? saved : [];
+
+                const savedCurrentId = localStorage.getItem('agentscope_current_chat_id');
+                const existing = this.chats.find(c => c.id === savedCurrentId);
+
+                if (existing) {
+                    this.currentChatId = existing.id;
+                    this.messages = existing.messages || [];
+                    this.renderChatMessages();
+                } else if (this.chats.length) {
+                    this.currentChatId = this.chats[0].id;
+                    this.messages = this.chats[0].messages || [];
+                    this.renderChatMessages();
+                } else {
+                    this.startNewChat(true);
+                }
+                this.renderSidebarChatList();
+            },
+
+            saveChats() {
+                localStorage.setItem('agentscope_chats', JSON.stringify(this.chats));
+                if (this.currentChatId) localStorage.setItem('agentscope_current_chat_id', this.currentChatId);
+            },
+
+            // Snima trenutni this.messages u odgovarajući unos u this.chats. Poziva se
+            // nakon svake razmjene poruka. Naslov razgovora se automatski izvodi iz
+            // prve korisničke poruke (dok god je naslov još uvijek podrazumijevan).
+            persistCurrentChat() {
+                if (!this.currentChatId) return;
+                let chat = this.chats.find(c => c.id === this.currentChatId);
+                if (!chat) {
+                    chat = { id: this.currentChatId, title: 'Novi razgovor', messages: [], updatedAt: Date.now() };
+                    this.chats.unshift(chat);
+                }
+                chat.messages = this.messages;
+                chat.updatedAt = Date.now();
+                if (!chat.title || chat.title === 'Novi razgovor') {
+                    const firstUserMsg = this.messages.find(m => m.role === 'user');
+                    if (firstUserMsg) {
+                        const text = (this.extractDisplayText(firstUserMsg.content) || '').trim();
+                        if (text) chat.title = text.slice(0, 45) + (text.length > 45 ? '…' : '');
+                    }
+                }
+                this.chats.sort((a, b) => b.updatedAt - a.updatedAt);
+                this.saveChats();
+                this.renderSidebarChatList();
+            },
+
+            // Kreira nov, prazan razgovor i prebacuje se na njega
+            startNewChat(skipUiReset) {
+                const id = 'chat_' + Date.now() + '_' + Math.random().toString(36).slice(2, 8);
+                const chat = { id, title: 'Novi razgovor', messages: [], updatedAt: Date.now() };
+                this.chats.unshift(chat);
+                this.currentChatId = id;
+                this.messages = [];
+                this.saveChats();
+                this.renderSidebarChatList();
+                if (!skipUiReset) {
+                    UI.chatContainer.innerHTML = '<div class="message system">Dobrodošao. Odaberi model i unesi API Ključ u postavkama za početak.</div>';
+                    this.closeSidebar();
+                }
+            },
+
+            // Prebacuje se na sačuvani razgovor i ponovo iscrtava poruke iz njegove historije
+            switchChat(id) {
+                if (id === this.currentChatId) { this.closeSidebar(); return; }
+                const chat = this.chats.find(c => c.id === id);
+                if (!chat) return;
+                this.currentChatId = id;
+                this.messages = chat.messages || [];
+                localStorage.setItem('agentscope_current_chat_id', id);
+                this.renderChatMessages();
+                this.renderSidebarChatList();
+                this.closeSidebar();
+            },
+
+            deleteChat(id, event) {
+                if (event) event.stopPropagation();
+                if (!confirm('Obrisati ovaj razgovor? Ovo se ne može poništiti.')) return;
+                this.chats = this.chats.filter(c => c.id !== id);
+                this.saveChats();
+                if (this.currentChatId === id) {
+                    if (this.chats.length) {
+                        this.switchChat(this.chats[0].id);
+                    } else {
+                        this.startNewChat();
+                    }
+                } else {
+                    this.renderSidebarChatList();
+                }
+            },
+
+            // Izvlači tekst za prikaz iz sadržaja poruke (može biti string ili
+            // multimodal niz [{type:'text',...}, {type:'image_url',...}])
+            extractDisplayText(content) {
+                if (typeof content === 'string') return content;
+                if (Array.isArray(content)) {
+                    const textPart = content.find(p => p.type === 'text');
+                    return textPart ? textPart.text : '[slika]';
+                }
+                return '';
+            },
+
+            // AI poruka renderovana odjednom (bez typewriter efekta) - koristi se pri
+            // ponovnom iscrtavanju sačuvane historije razgovora (nema potrebe za animacijom).
+            addAIMessageInstant(text) {
+                const div = document.createElement('div');
+                div.className = 'message ai';
+                const parts = this.parseMessageParts(text);
+                parts.forEach(part => {
+                    if (part.type === 'code') {
+                        div.appendChild(this.buildCodeBlockElement(part.lang, part.content));
+                    } else if (part.content) {
+                        const span = document.createElement('span');
+                        span.className = 'msg-text';
+                        span.textContent = part.content;
+                        div.appendChild(span);
+                    }
+                });
+                UI.chatContainer.appendChild(div);
+            },
+
+            // Ponovo iscrtava chat-container na osnovu this.messages. Interne
+            // "vodovodne" poruke (role: 'tool', ili assistant poruke sa tool_calls a
+            // bez sadržaja) se ne prikazuju ponovo - ostaju samo kao API kontekst.
+            renderChatMessages() {
+                UI.chatContainer.innerHTML = '';
+                if (!this.messages.length) {
+                    UI.chatContainer.innerHTML = '<div class="message system">Dobrodošao. Odaberi model i unesi API Ključ u postavkama za početak.</div>';
+                    return;
+                }
+                this.messages.forEach(msg => {
+                    if (msg.role === 'user') {
+                        const text = this.extractDisplayText(msg.content);
+                        const imagePart = Array.isArray(msg.content) ? msg.content.find(p => p.type === 'image_url') : null;
+                        this.addUserMessage(text, imagePart ? { type: 'image', dataUrl: imagePart.image_url.url } : null);
+                    } else if (msg.role === 'assistant' && msg.content && msg.content.trim()) {
+                        this.addAIMessageInstant(msg.content);
+                    }
+                });
+                this.scrollToBottom();
+            },
+
+            renderSidebarChatList() {
+                UI.sidebarChatList.innerHTML = '';
+                this.chats.forEach(chat => {
+                    const item = document.createElement('div');
+                    item.className = 'sidebar-chat-item' + (chat.id === this.currentChatId ? ' active' : '');
+
+                    const icon = document.createElement('i');
+                    icon.className = 'fa-regular fa-message';
+                    item.appendChild(icon);
+
+                    const label = document.createElement('span');
+                    label.textContent = chat.title || 'Novi razgovor';
+                    item.appendChild(label);
+
+                    const delBtn = document.createElement('button');
+                    delBtn.className = 'sidebar-chat-delete';
+                    delBtn.title = 'Obriši razgovor';
+                    delBtn.innerHTML = '<i class="fa-regular fa-trash-can"></i>';
+                    delBtn.addEventListener('click', (e) => this.deleteChat(chat.id, e));
+                    item.appendChild(delBtn);
+
+                    item.addEventListener('click', () => this.switchChat(chat.id));
+                    UI.sidebarChatList.appendChild(item);
+                });
+            },
+
+            openSidebar() {
+                UI.sidebar.classList.add('open');
+                UI.sidebarOverlay.classList.add('open');
+            },
+
+            closeSidebar() {
+                UI.sidebar.classList.remove('open');
+                UI.sidebarOverlay.classList.remove('open');
+            },
+
             bindEvents() {
                 // Textarea auto-resize
                 UI.userInput.addEventListener('input', function() {
@@ -1454,6 +1812,12 @@
 
                 UI.sendBtn.addEventListener('click', () => this.sendMessage());
 
+                // Sidebar (istorija razgovora)
+                UI.openSidebarBtn.addEventListener('click', () => this.openSidebar());
+                UI.closeSidebarBtn.addEventListener('click', () => this.closeSidebar());
+                UI.sidebarOverlay.addEventListener('click', () => this.closeSidebar());
+                UI.sidebarNewChatBtn.addEventListener('click', () => this.startNewChat());
+
                 // File upload (attach button otvara sistemski file picker)
                 UI.attachBtn.addEventListener('click', () => UI.fileInput.click());
                 UI.fileInput.addEventListener('change', (e) => this.handleFileSelect(e.target.files[0]));
@@ -1876,6 +2240,7 @@ ${code}
                     UI.loadingSpinner.style.display = 'none';
                     UI.sendIcon.style.display = 'block';
                     UI.sendBtn.disabled = UI.userInput.value.trim() === '' && !this.pendingAttachment;
+                    this.persistCurrentChat();
                 }
             },
 
@@ -2001,9 +2366,10 @@ ${code}
                     return JSON.stringify(execResult);
                 }
                 if (name === 'create_artifact') {
-                    this.showPreview(args.code || '', args.language || 'html');
-                    this.addAIMessage(`🎨 Artifact "${args.title || 'bez naziva'}" je kreiran i prikazan u pregledu.\n\n\`\`\`${args.language || 'html'}\n${args.code || ''}\n\`\`\``);
-                    return 'Artifact je uspješno kreiran i prikazan korisniku u live pregledu.';
+                    // Ne otvaramo preview automatski - samo dodajemo poruku sa code
+                    // blokom koji ima dugme "Prikaži" (korisnik sam bira kad da klikne).
+                    this.addAIMessage(`🎨 Artifact "${args.title || 'bez naziva'}" je kreiran.\n\n\`\`\`${args.language || 'html'}\n${args.code || ''}\n\`\`\``);
+                    return 'Artifact je uspješno kreiran. Korisnik može kliknuti dugme "Prikaži" da ga vidi u live pregledu.';
                 }
                 if (name.startsWith('mcp__')) {
                     const [, serverId, ...rest] = name.split('__');