Message versions

public/css/chat.css

@@ -99,13 +99,20 @@
 
 /* Version navigator */
 .msg-version-nav {
+  position: absolute;
+  bottom: -4px;
+  right: 0;
   display: flex;
   align-items: center;
   gap: 4px;
   font-size: 12px;
   color: var(--text-muted);
+  opacity: 0;
+  transition: opacity var(--transition);
 }
 
+.msg-group:hover .msg-version-nav { opacity: 1; }
+
 .msg-version-nav button {
   display: flex; align-items: center; justify-content: center;
   width: 20px; height: 20px; border-radius: 50%;
@@ -118,34 +125,22 @@
 .msg-actions {
   display: flex;
   gap: 3px;
-}
-
-.msg-actions.msg-actions-right {
-  justify-content: flex-end;
-}
-
-.msg-actions.msg-actions-left {
-  justify-content: flex-start;
-}
-
-.msg-controls {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
   opacity: 0;
   transition: opacity var(--transition);
   pointer-events: none;
+  /* Default: left-aligned (assistant messages) */
+  position: absolute;
+  bottom: 4px;
+  left: 0;
 }
 
-.msg-controls.msg-controls-right {
-  align-items: flex-end;
-}
-
-.msg-controls.msg-controls-left {
-  align-items: flex-start;
+/* Right-aligned (user messages) */
+.msg-actions.msg-actions-right {
+  left: auto;
+  right: 0;
 }
 
-.msg-group:hover .msg-controls {
+.msg-group:hover .msg-actions {
   opacity: 1;
   pointer-events: auto;
 }

public/css/input.css

@@ -71,6 +71,22 @@
 }
 .attach-btn:hover { color: var(--text); background: var(--bg-hover); }
 
+/* Back button */
+.back-row {
+  text-align: center;
+  margin-bottom: 8px;
+}
+.back-btn {
+  padding: 4px 8px;
+  font-size: 12px;
+  color: var(--text-muted);
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color var(--transition);
+}
+.back-btn:hover { color: var(--text); }
+
 /* ── Bottom input bar ────────────────────────────────────────────────────── */
 .bottom-input-bar {
   flex-shrink: 0;
@@ -112,16 +128,6 @@
 }
 .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

@@ -122,10 +122,10 @@
 
       <!-- Bottom input (active during chat) -->
       <div id="bottom-input-bar" class="bottom-input-bar hidden">
+        <div id="back-row" class="back-row hidden">
+          <button id="back-btn" class="back-btn" title="Back to conversation">← Back</button>
+        </div>
         <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/app.js

@@ -5,7 +5,7 @@ import {
   createNewSession, showWelcomeScreen,
   switchSession, currentSessionId, onSessionChange,
 } from './sessions.js';
-import { submitMessage, renderSession, setActiveSession, getIsStreaming } from './chat.js';
+import { submitMessage, renderSession, setActiveSession, getIsStreaming, getReEditingIndex } from './chat.js';
 import { openAuthModal, closeModal, openPasteEditor } from './modals.js';
 import { openSettings, applyTheme } from './settings.js';
 import { showNotification, autoResize, escHtml } from './ui.js';
@@ -128,7 +128,8 @@ function triggerBottomSend() {
   if (!text && attachments.length === 0) return;
   if (bottomInput) { bottomInput.value = ''; autoResize(bottomInput, 6); }
   clearFilePreviewRow();
-  doSend(text || '', attachments);
+  const editIndex = getReEditingIndex();
+  doSend(text || '', attachments, editIndex);
 }
 
 document.querySelectorAll('.tool-btn-sm').forEach(btn =>
@@ -136,8 +137,8 @@ document.querySelectorAll('.tool-btn-sm').forEach(btn =>
 
 // ── Core send ─────────────────────────────────────────────────────────────
 
-function doSend(text, attachments = []) {
-  submitMessage(text, attachments);
+function doSend(text, attachments = [], editIndex = undefined) {
+  submitMessage(text, attachments, false, editIndex);
 }
 
 // ── Attachments ───────────────────────────────────────────────────────────

public/js/chat.js

@@ -1,6 +1,6 @@
 // chat.js — Chat rendering, streaming, versioning, editing
 import { send, on, off } from './ws.js';
-import { sessions, currentSessionId } from './sessions.js';
+import { currentSessionId, getCurrentSession } from './sessions.js';
 import {
   renderMarkdown, attachCodeCopyListeners, attachSvgPanelListeners,
   escHtml, showNotification, autoResize,
@@ -12,9 +12,9 @@ let streamingBubble  = null;
 let streamingText    = '';
 let autoScroll       = true;
 let pendingAssets    = [];
+let reEditingIndex   = null;
 
-let editingMessageIndex = null;
-let originalHistory = null;
+export function getReEditingIndex() { return reEditingIndex; }
 
 export function setActiveSession(id) { activeSessionId = id; }
 export function getIsStreaming()     { return isStreaming; }
@@ -35,6 +35,11 @@ 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); });
@@ -46,42 +51,7 @@ on('ws:connected', () => {
   }
 });
 
-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');
-}
+// ── Views ─────────────────────────────────────────────────────────────────
 
 export function renderSession(session) {
   if (!session || !session.history?.length) { showWelcome(); return; }
@@ -170,9 +140,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: () => enterEditMode(index) },
+    { icon: '✏️', title: 'Edit', fn: () => startUserReEdit(wrap, index, msg, text) },
   ], 'right'));
-  // No versions for user messages
+  if (msg.versions?.length > 1) controls.appendChild(buildVersionNav(msg, index));
   wrap.appendChild(controls);
 
   box.appendChild(wrap);
@@ -384,6 +354,27 @@ function startAssistantEdit(wrap, index, msg) {
   ta.setSelectionRange(ta.value.length, ta.value.length);
 }
 
+function startUserReEdit(wrap, index, msg, text) {
+  reEditingIndex = index;
+  // Truncate the displayed history to this message
+  const session = getCurrentSession();
+  if (session) {
+    const truncated = session.history.slice(0, index + 1);
+    renderHistory(truncated);
+  }
+  // Put the text in bottom input
+  const bottomInput = document.getElementById('bottom-input');
+  if (bottomInput) {
+    bottomInput.value = text;
+    autoResize(bottomInput);
+    bottomInput.focus();
+  }
+  // Show back button
+  document.getElementById('back-row')?.classList.remove('hidden');
+  // Clear attachments
+  clearFilePreviewRow();
+}
+
 function makeUserEditTextarea(value) {
   const ta = document.createElement('textarea');
   ta.value = value;
@@ -495,7 +486,6 @@ function onChatDone(msg) {
       pendingAssets = [];
     }
   }
-  if (editingMessageIndex !== null) exitEditMode();
 }
 
 function onChatAborted(msg) {
@@ -560,11 +550,19 @@ function appendAsset(asset) {
 
 // ── Submit ────────────────────────────────────────────────────────────────
 
-export function submitMessage(text, attachments = [], regenerate = false) {
+export function submitMessage(text, attachments = [], regenerate = false, editIndex = undefined) {
   if (!text.trim() && attachments.length === 0 && !regenerate) return;
   if (isStreaming) { send({ type: 'chat:stop' }); return; }
   if (!activeSessionId) return;
 
+  if (editIndex !== undefined) {
+    // Send edit
+    send({ type: 'chat:editMessage', sessionId: activeSessionId, messageIndex: editIndex, newContent: text });
+    reEditingIndex = null;
+    document.getElementById('back-row')?.classList.add('hidden');
+    return;
+  }
+
   const images   = attachments.filter(a => a.type === 'image');
   const textFiles= attachments.filter(a => a.type === 'text');
 
@@ -664,10 +662,21 @@ function openImageModal(src) {
   import('./modals.js').then(m => m.openImageModal(src));
 }
 
+// Back button for re-editing
+document.getElementById('back-btn')?.addEventListener('click', () => {
+  reEditingIndex = null;
+  // Restore full history
+  const session = getCurrentSession();
+  if (session) renderHistory(session.history);
+  // Clear input
+  const bottomInput = document.getElementById('bottom-input');
+  if (bottomInput) bottomInput.value = '';
+  // Hide back
+  document.getElementById('back-row')?.classList.add('hidden');
+});
+
 // Scroll tracking
 document.getElementById('chat-view')?.addEventListener('scroll', e => {
   const el = e.target;
   autoScroll = el.scrollHeight - el.scrollTop - el.clientHeight < 60;
-}, true);
-
-document.getElementById('bottom-back-btn')?.addEventListener('click', exitEditMode);
+}, true);

server/wsHandler.js

@@ -218,10 +218,7 @@ const handlers = {
     m.versions.unshift({ content: newContent, tail: history.slice(messageIndex + 1), timestamp: Date.now() });
     m.currentVersionIdx = 0;
     m.content = newContent;
-    let newHistory = history;
-    if (m.role === 'user') {
-      newHistory = history.slice(0, messageIndex + 1);
-    }
+    const 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 });