Message Versions - NEW

Uses regular input bar for prompt editing for simplified tool/attachment management

public/css/input.css

@@ -112,6 +112,16 @@
 }
 .attach-btn-bottom:hover { color: var(--text); background: var(--bg-hover); }
 
+.back-btn-bottom {
+  flex-shrink: 0;
+  display: flex; align-items: center; justify-content: center;
+  width: 30px; height: 30px; border-radius: 50%;
+  color: var(--text-muted);
+  margin-bottom: 4px;
+  transition: color var(--transition), background var(--transition);
+}
+.back-btn-bottom:hover { color: var(--text); background: var(--bg-hover); }
+
 .bottom-textarea-wrap {
   flex: 1; min-width: 0;
   display: flex; flex-direction: column; gap: 6px;

public/index.html

@@ -123,6 +123,9 @@
       <!-- Bottom input (active during chat) -->
       <div id="bottom-input-bar" class="bottom-input-bar hidden">
         <div class="bottom-input-wrap">
+          <button id="bottom-back-btn" class="back-btn-bottom hidden" title="Back to conversation">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
+          </button>
           <button id="bottom-attach-btn" class="attach-btn-bottom" title="Attach">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
           </button>

public/js/chat.js

@@ -1,6 +1,6 @@
 // chat.js — Chat rendering, streaming, versioning, editing
 import { send, on, off } from './ws.js';
-import { currentSessionId } from './sessions.js';
+import { sessions, currentSessionId } from './sessions.js';
 import {
   renderMarkdown, attachCodeCopyListeners, attachSvgPanelListeners,
   escHtml, showNotification, autoResize,
@@ -13,6 +13,9 @@ let streamingText    = '';
 let autoScroll       = true;
 let pendingAssets    = [];
 
+let editingMessageIndex = null;
+let originalHistory = null;
+
 export function setActiveSession(id) { activeSessionId = id; }
 export function getIsStreaming()     { return isStreaming; }
 
@@ -32,11 +35,6 @@ on('chat:messageEdited',    (msg) => {
     // Update the session history
     const s = sessions.find(s => s.id === msg.sessionId);
     if (s) s.history = msg.history;
-    // If edited message is user, regenerate the response
-    const editedMsg = msg.history[msg.messageIndex];
-    if (editedMsg && editedMsg.role === 'user') {
-      submitMessage('', [], true);
-    }
   }
 });
 on('chat:versionSelected',  (msg) => { if (msg.sessionId === activeSessionId) renderHistory(msg.history); });
@@ -48,7 +46,42 @@ on('ws:connected', () => {
   }
 });
 
-// ── Views ─────────────────────────────────────────────────────────────────
+function enterEditMode(messageIndex) {
+  const session = sessions.find(s => s.id === activeSessionId);
+  if (!session) return;
+  editingMessageIndex = messageIndex;
+  originalHistory = [...session.history];
+  const truncatedHistory = session.history.slice(0, messageIndex + 1);
+  session.history = truncatedHistory;
+  renderHistory(truncatedHistory);
+  // Move content to bottom input
+  const msg = truncatedHistory[messageIndex];
+  const bottomInput = document.getElementById('bottom-input');
+  if (bottomInput) {
+    bottomInput.value = msg.content;
+    autoResize(bottomInput);
+    bottomInput.focus();
+  }
+  // Show back button
+  document.getElementById('bottom-back-btn')?.classList.remove('hidden');
+  // Clear attachments
+  clearFilePreviewRow();
+}
+
+function exitEditMode() {
+  if (originalHistory) {
+    const session = sessions.find(s => s.id === activeSessionId);
+    if (session) session.history = originalHistory;
+    renderHistory(originalHistory);
+  }
+  editingMessageIndex = null;
+  originalHistory = null;
+  // Clear input
+  const bottomInput = document.getElementById('bottom-input');
+  if (bottomInput) bottomInput.value = '';
+  // Hide back button
+  document.getElementById('bottom-back-btn')?.classList.add('hidden');
+}
 
 export function renderSession(session) {
   if (!session || !session.history?.length) { showWelcome(); return; }
@@ -137,9 +170,9 @@ function appendUserMsg(box, msg, index) {
   controls.className = 'msg-controls msg-controls-right';
   controls.appendChild(buildActions([
     { icon: '📋', title: 'Copy', fn: () => copyText(text) },
-    { icon: '✏️', title: 'Edit', fn: () => startUserEdit(wrap, index, msg, text) },
+    { icon: '✏️', title: 'Edit', fn: () => enterEditMode(index) },
   ], 'right'));
-  if (msg.versions?.length > 1) controls.appendChild(buildVersionNav(msg, index));
+  // No versions for user messages
   wrap.appendChild(controls);
 
   box.appendChild(wrap);
@@ -462,6 +495,7 @@ function onChatDone(msg) {
       pendingAssets = [];
     }
   }
+  if (editingMessageIndex !== null) exitEditMode();
 }
 
 function onChatAborted(msg) {
@@ -634,4 +668,6 @@ function openImageModal(src) {
 document.getElementById('chat-view')?.addEventListener('scroll', e => {
   const el = e.target;
   autoScroll = el.scrollHeight - el.scrollTop - el.clientHeight < 60;
-}, true);
+}, true);
+
+document.getElementById('bottom-back-btn')?.addEventListener('click', exitEditMode);

server/wsHandler.js

@@ -215,10 +215,13 @@ const handlers = {
     const history = session.history || [];
     const m = history[messageIndex]; if (!m) return;
     if (!m.versions) m.versions = [{ content: m.content, tail: history.slice(messageIndex + 1), timestamp: m.timestamp || Date.now() }];
-    m.versions.push({ content: newContent, tail: history.slice(messageIndex + 1), timestamp: Date.now() });
-    m.currentVersionIdx = m.versions.length - 1;
+    m.versions.unshift({ content: newContent, tail: history.slice(messageIndex + 1), timestamp: Date.now() });
+    m.currentVersionIdx = 0;
     m.content = newContent;
-    const newHistory = history.slice(0, messageIndex + 1);
+    let newHistory = history;
+    if (m.role === 'user') {
+      newHistory = history.slice(0, messageIndex + 1);
+    }
     if (client.userId) await sessionStore.updateUserSession(client.userId, client.accessToken, sessionId, { history: newHistory });
     else sessionStore.updateTempSession(client.tempId, sessionId, { history: newHistory });
     safeSend(ws, { type: 'chat:messageEdited', sessionId, messageIndex, message: m, history: newHistory });