feat: add message actions toolbar

cypher-chat-app/public/app.js

@@ -262,18 +262,8 @@ function loadConversation(id) {
     attachedFiles = [];
     localStorage.setItem("cypher_current_id", currentConversationId);
     
-    messagesContainer.innerHTML = "";
-    if (currentMessages.length === 0) {
-        messagesContainer.appendChild(welcomeView);
-        welcomeView.style.display = "flex";
-    } else {
-        welcomeView.style.display = "none";
-        currentMessages.forEach(msg => {
-            renderMessage(msg.role, msg.content);
-        });
-    }
+    redrawCurrentConversation();
     renderAttachmentChips();
-    scrollToBottom();
     renderConversationsList();
 }
 
@@ -302,22 +292,178 @@ function renderMessage(role, content) {
     bubble.classList.add("message-bubble");
     
     // Check if message content has file markers to display them nicely
-    // Format: [Fichier attaché : name]\n```\ncontent\n```
     let displayContent = content;
-    const fileHeaderRegex = /\[Fichier attaché : ([^\]]+)\]\n```[\s\S]*?```\n\n/g;
-    
-    // We clean the display text slightly if we want, or just let marked parse it.
-    // Standard markdown code blocks parsed by marked look excellent, so we just let it run.
     bubble.innerHTML = parseMarkdown(displayContent);
     
     wrapper.appendChild(label);
     wrapper.appendChild(bubble);
+    
+    // Create Toolbar Actions Row
+    const actionsRow = document.createElement("div");
+    actionsRow.className = "message-actions";
+    
+    if (role === "assistant") {
+        actionsRow.innerHTML = `
+            <button class="action-btn copy-btn" title="Copier la réponse">
+                <i data-lucide="copy" size="14"></i>
+            </button>
+            <button class="action-btn like-btn" title="Aimer la réponse">
+                <i data-lucide="thumbs-up" size="14"></i>
+            </button>
+            <button class="action-btn dislike-btn" title="Détester la réponse">
+                <i data-lucide="thumbs-down" size="14"></i>
+            </button>
+            <button class="action-btn share-btn" title="Partager la discussion">
+                <i data-lucide="share-2" size="14"></i>
+            </button>
+        `;
+        
+        // Copy action
+        const copyBtn = actionsRow.querySelector(".copy-btn");
+        copyBtn.addEventListener("click", () => {
+            navigator.clipboard.writeText(content).then(() => {
+                const icon = copyBtn.querySelector("i");
+                icon.setAttribute("data-lucide", "check");
+                lucide.createIcons({ scope: copyBtn });
+                setTimeout(() => {
+                    icon.setAttribute("data-lucide", "copy");
+                    lucide.createIcons({ scope: copyBtn });
+                }, 2000);
+            });
+        });
+        
+        // Like action
+        const likeBtn = actionsRow.querySelector(".like-btn");
+        const dislikeBtn = actionsRow.querySelector(".dislike-btn");
+        likeBtn.addEventListener("click", () => {
+            likeBtn.classList.toggle("active");
+            dislikeBtn.classList.remove("active");
+        });
+        
+        // Dislike action
+        dislikeBtn.addEventListener("click", () => {
+            dislikeBtn.classList.toggle("active");
+            likeBtn.classList.remove("active");
+        });
+        
+        // Share action
+        const shareBtn = actionsRow.querySelector(".share-btn");
+        shareBtn.addEventListener("click", () => {
+            let shareText = `--- Discussion Cypher AI ---\n\n`;
+            currentMessages.forEach(m => {
+                shareText += `${m.role === 'user' ? 'Utilisateur' : 'Cypher AI'}:\n${m.content}\n\n`;
+            });
+            navigator.clipboard.writeText(shareText).then(() => {
+                alert("Discussion copiée dans le presse-papiers pour partage !");
+            });
+        });
+        
+    } else { // user
+        actionsRow.innerHTML = `
+            <button class="action-btn copy-btn" title="Copier le message">
+                <i data-lucide="copy" size="14"></i>
+            </button>
+            <button class="action-btn edit-btn" title="Modifier le message">
+                <i data-lucide="edit-3" size="14"></i>
+            </button>
+            <button class="action-btn retry-btn" title="Réessayer l'envoi">
+                <i data-lucide="refresh-cw" size="14"></i>
+            </button>
+        `;
+        
+        // Copy action
+        const copyBtn = actionsRow.querySelector(".copy-btn");
+        copyBtn.addEventListener("click", () => {
+            navigator.clipboard.writeText(content).then(() => {
+                const icon = copyBtn.querySelector("i");
+                icon.setAttribute("data-lucide", "check");
+                lucide.createIcons({ scope: copyBtn });
+                setTimeout(() => {
+                    icon.setAttribute("data-lucide", "copy");
+                    lucide.createIcons({ scope: copyBtn });
+                }, 2000);
+            });
+        });
+        
+        // Edit Action
+        const editBtn = actionsRow.querySelector(".edit-btn");
+        editBtn.addEventListener("click", () => {
+            if (bubble.querySelector(".edit-textarea")) return;
+            
+            const originalText = content;
+            bubble.innerHTML = `
+                <textarea class="edit-textarea">${originalText}</textarea>
+                <div class="edit-actions">
+                    <button class="edit-save-btn">Enregistrer & Renvoyer</button>
+                    <button class="edit-cancel-btn">Annuler</button>
+                </div>
+            `;
+            
+            const textarea = bubble.querySelector(".edit-textarea");
+            textarea.focus();
+            textarea.style.height = "auto";
+            textarea.style.height = textarea.scrollHeight + "px";
+            textarea.addEventListener("input", () => {
+                textarea.style.height = "auto";
+                textarea.style.height = textarea.scrollHeight + "px";
+            });
+            
+            bubble.querySelector(".edit-cancel-btn").addEventListener("click", (e) => {
+                e.stopPropagation();
+                bubble.innerHTML = parseMarkdown(originalText);
+                addCopyCodeButtons(bubble);
+            });
+            
+            bubble.querySelector(".edit-save-btn").addEventListener("click", async (e) => {
+                e.stopPropagation();
+                const newText = textarea.value.trim();
+                if (!newText) return;
+                
+                const msgIndex = currentMessages.findIndex(m => m.role === "user" && m.content === originalText);
+                if (msgIndex > -1) {
+                    currentMessages[msgIndex].content = newText;
+                    currentMessages = currentMessages.slice(0, msgIndex + 1);
+                    redrawCurrentConversation();
+                    await streamAIResponse();
+                }
+            });
+        });
+        
+        // Retry Action
+        const retryBtn = actionsRow.querySelector(".retry-btn");
+        retryBtn.addEventListener("click", async () => {
+            const msgIndex = currentMessages.findIndex(m => m.role === "user" && m.content === content);
+            if (msgIndex > -1) {
+                currentMessages = currentMessages.slice(0, msgIndex + 1);
+                redrawCurrentConversation();
+                await streamAIResponse();
+            }
+        });
+    }
+    
+    wrapper.appendChild(actionsRow);
     messagesContainer.appendChild(wrapper);
     
+    lucide.createIcons({ scope: actionsRow });
     addCopyCodeButtons(bubble);
     return bubble;
 }
 
+// Redraw entire chat history in view
+function redrawCurrentConversation() {
+    messagesContainer.innerHTML = "";
+    if (currentMessages.length === 0) {
+        messagesContainer.appendChild(welcomeView);
+        welcomeView.style.display = "flex";
+    } else {
+        welcomeView.style.display = "none";
+        currentMessages.forEach(msg => {
+            renderMessage(msg.role, msg.content);
+        });
+    }
+    scrollToBottom();
+}
+
 // Parse markdown securely
 function parseMarkdown(text) {
     try {
@@ -399,11 +545,16 @@ async function sendMessage() {
     sendBtn.disabled = true;
     scrollToBottom();
     
-    // 2. Add empty bot bubble for streaming response
+    await streamAIResponse();
+}
+
+// Stream AI Response with logs and sources
+async function streamAIResponse() {
+    // Add empty bot bubble for streaming response
     const botBubble = renderMessage("assistant", "...");
     let botResponseText = "";
     
-    // 3. Search logs UI variables
+    // Search logs UI variables
     let searchLogsBox = null;
     let searchLogsList = null;
     let searchSourcesList = null;

cypher-chat-app/public/style.css

@@ -1100,3 +1100,113 @@ input:checked + .slider:before {
     to { opacity: 1; transform: translateY(0); }
 }
 
+/* -----------------------------------------------------
+   MESSAGE TOOLBAR ACTIONS & EDIT MODES
+   ----------------------------------------------------- */
+.message-actions {
+    display: flex;
+    gap: 8px;
+    margin-top: 6px;
+    opacity: 0.5;
+    transition: opacity 0.2s ease;
+    padding: 0 4px;
+}
+
+.message-wrapper:hover .message-actions {
+    opacity: 1;
+}
+
+.message-wrapper.user .message-actions {
+    justify-content: flex-end;
+}
+
+.message-wrapper.bot .message-actions {
+    justify-content: flex-start;
+}
+
+.action-btn {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 6px;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+}
+
+.action-btn:hover {
+    color: var(--accent-cyan);
+    background: rgba(0, 229, 255, 0.08);
+}
+
+.action-btn.like-btn.active {
+    color: var(--accent-green);
+    background: rgba(0, 255, 170, 0.08);
+}
+
+.action-btn.dislike-btn.active {
+    color: #EF4444;
+    background: rgba(239, 68, 68, 0.08);
+}
+
+/* Edit Form inside bubble */
+.edit-textarea {
+    width: 100%;
+    min-height: 80px;
+    background: rgba(8, 10, 18, 0.5);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: 14px;
+    padding: 10px;
+    outline: none;
+    resize: none;
+    margin-bottom: 8px;
+}
+
+.edit-textarea:focus {
+    border-color: var(--accent-cyan);
+}
+
+.edit-actions {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+}
+
+.edit-save-btn {
+    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-green));
+    border: none;
+    border-radius: 6px;
+    padding: 6px 12px;
+    color: #090A0F;
+    font-size: 12px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.edit-save-btn:hover {
+    transform: scale(1.02);
+}
+
+.edit-cancel-btn {
+    background: rgba(30, 34, 53, 0.6);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    padding: 6px 12px;
+    color: var(--text-secondary);
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.edit-cancel-btn:hover {
+    background: rgba(30, 34, 53, 0.8);
+}
+