feat(ui): forking chat - retry any answer, copy, duplicate, branch (#10645) (#10654)

* feat(ui): clone a chat into a new conversation (#10645) Assisted-by: Claude:claude-opus-4-8 [Claude Code] Signed-off-by: Ettore Di Giacinto <mudler@localai.io> * feat(ui): retry any assistant answer, not just the last (#10645) Assisted-by: Claude:claude-opus-4-8 [Claude Code] Signed-off-by: Ettore Di Giacinto <mudler@localai.io> * feat(ui): copy an entire chat to the clipboard (#10645) Assisted-by: Claude:claude-opus-4-8 [Claude Code] Signed-off-by: Ettore Di Giacinto <mudler@localai.io> * feat(ui): branch a new chat from any assistant answer (#10645) Assisted-by: Claude:claude-opus-4-8 [Claude Code] Signed-off-by: Ettore Di Giacinto <mudler@localai.io> * fix(ui): send truncated history on mid-conversation retry (#10645) Mid-conversation retry regenerated an answer with the downstream turns still in the model's context. handleRegenerate truncated the DOM history via updateChatSettings (a scheduled state update), but the synchronous sendMessage that followed read the stale, pre-truncation history from its closure to build the outbound API payload. Thread the intended base history explicitly through sendMessage's options.baseHistory so the request body matches the truncated view. Backward compatible: the normal send path (no baseHistory) is unchanged. Also guard two minor issues in Chat.jsx: the "Branch from here" button now renders under !isStreaming to match the retry button, and the duplicate toast only fires when forkChat returns a chat (not on a null result). Assisted-by: Claude:claude-opus-4-8 [Claude Code] Signed-off-by: Ettore Di Giacinto <mudler@localai.io> --------- Signed-off-by: Ettore Di Giacinto <mudler@localai.io> Co-authored-by: Ettore Di Giacinto <mudler@localai.io>
2026-07-03 12:57:02 -04:00 · 2026-07-03 00:04:44 +02:00
parent a4e6e01e4d
commit 237bce48e8
5 changed files with 227 additions and 34 deletions
--- a/core/http/react-ui/e2e/forking-chat.spec.js
+++ b/core/http/react-ui/e2e/forking-chat.spec.js
@@ -0,0 +1,133 @@
+import { test, expect } from './coverage-fixtures.js'
+
+// Seeds two-message chat into localStorage so we don't need a live model.
+async function seedChat(page, history) {
+  await page.addInitScript((h) => {
+    const chat = {
+      id: 'seed1', name: 'Seeded Chat', model: 'test-model',
+      history: h, systemPrompt: '', mcpMode: false, mcpServers: [],
+      clientMCPServers: [], temperature: null, topP: null, topK: null,
+      tokenUsage: { prompt: 0, completion: 0, total: 0 },
+      contextSize: null, createdAt: Date.now(), updatedAt: Date.now(),
+    }
+    localStorage.setItem('localai_chats_data', JSON.stringify({
+      chats: [chat], activeChatId: 'seed1', lastSaved: Date.now(),
+    }))
+  }, history)
+}
+
+async function mockModels(page) {
+  await page.route('**/api/models/capabilities', (route) => route.fulfill({
+    contentType: 'application/json',
+    body: JSON.stringify({ data: [{ id: 'test-model', capabilities: ['FLAG_CHAT'] }] }),
+  }))
+  await page.route('**/api/operations', (route) => route.fulfill({
+    contentType: 'application/json', body: JSON.stringify({ operations: [] }),
+  }))
+}
+
+const TWO_TURNS = [
+  { role: 'user', content: 'first question' },
+  { role: 'assistant', content: 'first answer' },
+  { role: 'user', content: 'second question' },
+  { role: 'assistant', content: 'second answer' },
+]
+
+test('duplicate creates an independent copy and switches to it', async ({ page }) => {
+  await mockModels(page)
+  await seedChat(page, TWO_TURNS)
+  await page.goto('/app/chat')
+
+  // Open the chats menu (Ctrl/Cmd+K) and duplicate the seeded chat.
+  // Wait for the menu trigger to mount so its global keydown listener is armed
+  // before we dispatch the shortcut.
+  await page.getByTitle('Conversations (Ctrl/Cmd+K)').waitFor()
+  await page.keyboard.press('Control+k')
+  await page.getByTitle('Duplicate chat').first().click()
+
+  // A new active chat named "Seeded Chat (fork)" with the same 4 messages.
+  await expect(page.locator('.chat-header-title')).toHaveText('Seeded Chat (fork)')
+  await expect(page.locator('.chat-message-user')).toHaveCount(2)
+  await expect(page.locator('.chat-message-assistant')).toHaveCount(2)
+})
+
+async function mockCompletion(page, replyText) {
+  await page.route('**/v1/chat/completions', (route) => {
+    const sse =
+      `data: ${JSON.stringify({ choices: [{ delta: { content: replyText } }] })}\n\n` +
+      `data: ${JSON.stringify({ choices: [{ delta: {}, finish_reason: 'stop' }], usage: { prompt_tokens: 1, completion_tokens: 1, total_tokens: 2 } })}\n\n` +
+      `data: [DONE]\n\n`
+    route.fulfill({ status: 200, contentType: 'text/event-stream', body: sse })
+  })
+}
+
+test('retry regenerates the first answer and drops the later turn', async ({ page }) => {
+  await mockModels(page)
+  // Capture the outbound request body so we can assert the model receives the
+  // truncated history (not the stale downstream turns).
+  let sentMessages = null
+  await page.route('**/v1/chat/completions', (route) => {
+    sentMessages = route.request().postDataJSON()?.messages || []
+    const sse =
+      `data: ${JSON.stringify({ choices: [{ delta: { content: 'REGENERATED first answer' } }] })}\n\n` +
+      `data: ${JSON.stringify({ choices: [{ delta: {}, finish_reason: 'stop' }], usage: { prompt_tokens: 1, completion_tokens: 1, total_tokens: 2 } })}\n\n` +
+      `data: [DONE]\n\n`
+    route.fulfill({ status: 200, contentType: 'text/event-stream', body: sse })
+  })
+  await seedChat(page, TWO_TURNS)
+  await page.goto('/app/chat')
+
+  // Hover the FIRST assistant message and click its retry button.
+  const firstAssistant = page.locator('.chat-message-assistant').first()
+  await firstAssistant.hover()
+  await firstAssistant.getByTitle('Regenerate').click()
+
+  // History is truncated to the first user turn, then the new answer streams in;
+  // the second Q/A turn is gone.
+  await expect(page.locator('.chat-message-assistant')).toContainText(['REGENERATED first answer'])
+  await expect(page.locator('.chat-message-user')).toHaveCount(1)
+  await expect(page.locator('.chat-message-assistant')).toHaveCount(1)
+
+  // The OUTBOUND payload must also be truncated: the resent user turn is present,
+  // but the downstream turn and the stale first answer must be gone.
+  const contents = (sentMessages || []).map(m =>
+    typeof m.content === 'string' ? m.content : JSON.stringify(m.content)
+  )
+  expect(contents.join('\n')).toContain('first question')
+  expect(contents.join('\n')).not.toContain('second question')
+  expect(contents.join('\n')).not.toContain('first answer')
+})
+
+test('copy chat puts the whole conversation on the clipboard', async ({ page, context }) => {
+  await context.grantPermissions(['clipboard-read', 'clipboard-write'])
+  await mockModels(page)
+  await seedChat(page, TWO_TURNS)
+  await page.goto('/app/chat')
+
+  // Wait for the menu trigger to mount so its global keydown listener is armed
+  // before we dispatch the shortcut (same mount-race guard as the duplicate test).
+  await page.getByTitle('Conversations (Ctrl/Cmd+K)').waitFor()
+  await page.keyboard.press('Control+k')
+  await page.getByTitle('Copy chat').first().click()
+
+  const clip = await page.evaluate(() => navigator.clipboard.readText())
+  expect(clip).toContain('# Seeded Chat')
+  expect(clip).toContain('first answer')
+  expect(clip).toContain('second answer')
+})
+
+test('branch from the first answer forks history up to that point', async ({ page }) => {
+  await mockModels(page)
+  await seedChat(page, TWO_TURNS)
+  await page.goto('/app/chat')
+
+  const firstAssistant = page.locator('.chat-message-assistant').first()
+  await firstAssistant.hover()
+  await firstAssistant.getByTitle('Branch from here').click()
+
+  // New active chat "Seeded Chat (fork)" contains only the first Q/A turn.
+  await expect(page.locator('.chat-header-title')).toHaveText('Seeded Chat (fork)')
+  await expect(page.locator('.chat-message-user')).toHaveCount(1)
+  await expect(page.locator('.chat-message-assistant')).toHaveCount(1)
+  await expect(page.locator('.chat-message-assistant')).toContainText(['first answer'])
+})
--- a/core/http/react-ui/public/locales/en/chat.json
+++ b/core/http/react-ui/public/locales/en/chat.json
@@ -72,6 +72,7 @@
  "actions": {
    "copy": "Copy",
    "regenerate": "Regenerate",
+    "branch": "Branch from here",
    "jumpToLatest": "Jump to latest"
  },
  "streaming": {
@@ -100,7 +101,9 @@
  "toasts": {
    "selectModel": "Please select a model",
    "copied": "Copied to clipboard",
-    "copyFailed": "Could not copy to clipboard"
+    "copyFailed": "Could not copy to clipboard",
+    "chatCopied": "Chat copied to clipboard",
+    "forked": "Created a new chat"
  },
  "menu": {
    "trigger": "Chats",
@@ -110,6 +113,8 @@
    "noMatch": "No conversations match your search",
    "noConversations": "No conversations yet",
    "rename": "Rename",
+    "duplicate": "Duplicate chat",
+    "copyChat": "Copy chat",
    "exportMarkdown": "Export as Markdown",
    "deleteChat": "Delete chat",
    "newChat": "New chat",
--- a/core/http/react-ui/src/components/ChatsMenu.jsx
+++ b/core/http/react-ui/src/components/ChatsMenu.jsx
@@ -24,6 +24,8 @@ const ChatsMenu = forwardRef(function ChatsMenu({
  onDeleteAll,
  onRename,
  onExport,
+  onCopyChat,
+  onDuplicate,
 }, ref) {
  const { t } = useTranslation('chat')
  const [open, setOpen] = useState(false)
@@ -230,6 +232,24 @@ const ChatsMenu = forwardRef(function ChatsMenu({
                  >
                    <i className="fas fa-pen" />
                  </button>
+                  {onDuplicate && (
+                    <button
+                      type="button"
+                      onClick={(e) => { e.stopPropagation(); onDuplicate(chat); setOpen(false) }}
+                      title={t('menu.duplicate')}
+                    >
+                      <i className="fas fa-clone" />
+                    </button>
+                  )}
+                  {(chat.history?.length || 0) > 0 && onCopyChat && (
+                    <button
+                      type="button"
+                      onClick={(e) => { e.stopPropagation(); onCopyChat(chat) }}
+                      title={t('menu.copyChat')}
+                    >
+                      <i className="fas fa-clipboard" />
+                    </button>
+                  )}
                  {(chat.history?.length || 0) > 0 && onExport && (
                    <button
                      type="button"
--- a/core/http/react-ui/src/hooks/useChat.js
+++ b/core/http/react-ui/src/hooks/useChat.js
@@ -141,6 +141,24 @@ export function useChat(initialModel = '') {
    return chat
  }, [])

+  const forkChat = useCallback((chatId, uptoIndex) => {
+    const src = chats.find(c => c.id === chatId)
+    if (!src) return null
+    const end = typeof uptoIndex === 'number' ? uptoIndex : src.history.length
+    const forked = {
+      ...src,
+      id: generateId(),
+      name: `${src.name} (fork)`,
+      history: structuredClone(src.history.slice(0, end)),
+      tokenUsage: { prompt: 0, completion: 0, total: 0 },
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+    }
+    setChats(prev => [forked, ...prev])
+    setActiveChatId(forked.id)
+    return forked
+  }, [chats])
+
  const switchChat = useCallback((chatId) => {
    setActiveChatId(chatId)
    setStreamingContent('')
@@ -260,8 +278,12 @@ export function useChat(initialModel = '') {
    if (chat?.systemPrompt) {
      messages.push({ role: 'system', content: chat.systemPrompt })
    }
-    // Filter out thinking/reasoning/tool_call/tool_result messages
-    const historyForApi = (chat?.history || []).filter(m =>
+    // Filter out thinking/reasoning/tool_call/tool_result messages.
+    // options.baseHistory lets callers (e.g. mid-conversation retry) pass the
+    // intended truncated history synchronously; the closure `chat` still holds
+    // the stale pre-truncation state because setChats only schedules an update.
+    const baseHistory = options.baseHistory || chat?.history || []
+    const historyForApi = baseHistory.filter(m =>
      m.role !== 'thinking' && m.role !== 'reasoning' && m.role !== 'tool_call' && m.role !== 'tool_result'
    )
    messages.push(...historyForApi, { role: 'user', content: messageContent })
@@ -793,6 +815,7 @@ export function useChat(initialModel = '') {
    tokensPerSecond,
    maxTokensPerSecond,
    addChat,
+    forkChat,
    switchChat,
    deleteChat,
    deleteAllChats,
--- a/core/http/react-ui/src/pages/Chat.jsx
+++ b/core/http/react-ui/src/pages/Chat.jsx
@@ -33,7 +33,7 @@ function getLastMessagePreview(chat) {
  return ''
 }

-function exportChatAsMarkdown(chat) {
+function serializeChatAsMarkdown(chat) {
  let md = `# ${chat.name}\n\n`
  md += `Model: ${chat.model || 'Unknown'}\n`
  md += `Date: ${new Date(chat.createdAt).toLocaleString()}\n\n---\n\n`
@@ -47,7 +47,11 @@ function exportChatAsMarkdown(chat) {
      md += `<details><summary>Thinking</summary>\n\n${msg.content}\n\n</details>\n\n`
    }
  }
-  const blob = new Blob([md], { type: 'text/markdown' })
+  return md
+}
+
+function downloadChatAsMarkdown(chat) {
+  const blob = new Blob([serializeChatAsMarkdown(chat)], { type: 'text/markdown' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
@@ -294,7 +298,7 @@ export default function Chat() {
  const {
    chats, activeChat, activeChatId, isStreaming, streamingChatId, streamingContent,
    streamingReasoning, streamingToolCalls, tokensPerSecond, maxTokensPerSecond,
-    addChat, switchChat, deleteChat, deleteAllChats, renameChat, updateChatSettings,
+    addChat, forkChat, switchChat, deleteChat, deleteAllChats, renameChat, updateChatSettings,
    sendMessage, stopGeneration, clearHistory, getContextUsagePercent, addMessage,
  } = useChat(urlModel || '')

@@ -795,34 +799,27 @@ export default function Chat() {
    await sendMessage(msg, files, mcpOptions)
  }, [input, files, activeChat, sendMessage, addToast, getToolsForLLM, isClientTool, executeTool, hasAppUI, getAppResource, getToolDefinition])

-  const handleRegenerate = useCallback(async () => {
+  const handleRegenerate = useCallback(async (targetIndex) => {
    if (!activeChat || isStreaming) return
    const history = activeChat.history
-    let lastUserMsg = null
-    let lastUserFiles = null
-    for (let i = history.length - 1; i >= 0; i--) {
-      if (history[i].role === 'user') {
-        lastUserMsg = typeof history[i].content === 'string' ? history[i].content : history[i].content?.[0]?.text || ''
-        lastUserFiles = history[i].files || []
-        break
-      }
+    const end = typeof targetIndex === 'number' ? targetIndex : history.length
+    // Nearest user message at or before the target answer.
+    let userIdx = -1
+    for (let i = Math.min(end, history.length) - 1; i >= 0; i--) {
+      if (history[i].role === 'user') { userIdx = i; break }
    }
-    if (!lastUserMsg) return
-
-    // Remove everything after and including the last user message
-    const newHistory = []
-    let foundLastUser = false
-    for (let i = history.length - 1; i >= 0; i--) {
-      if (!foundLastUser && history[i].role === 'user') {
-        foundLastUser = true
-        continue
-      }
-      if (foundLastUser) {
-        newHistory.unshift(history[i])
-      }
-    }
-    updateChatSettings(activeChat.id, { history: newHistory })
-    await sendMessage(lastUserMsg, lastUserFiles)
+    if (userIdx === -1) return
+    const userMsg = typeof history[userIdx].content === 'string'
+      ? history[userIdx].content
+      : history[userIdx].content?.[0]?.text || ''
+    const userFiles = history[userIdx].files || []
+    // Drop the user turn and everything after it; sendMessage re-appends it.
+    // Thread the truncated history through explicitly: updateChatSettings only
+    // schedules a state update, so sendMessage's closure would otherwise read
+    // the stale pre-truncation history for the outbound API payload.
+    const baseHistory = history.slice(0, userIdx)
+    updateChatSettings(activeChat.id, { history: baseHistory })
+    await sendMessage(userMsg, userFiles, { baseHistory })
  }, [activeChat, isStreaming, sendMessage, updateChatSettings])

  const handleKeyDown = (e) => {
@@ -852,6 +849,11 @@ export default function Chat() {
    }
  }

+  const copyChatAsMarkdown = async (chat) => {
+    const ok = await copyToClipboard(serializeChatAsMarkdown(chat))
+    addToast(ok ? t('toasts.chatCopied') : t('toasts.copyFailed'), ok ? 'success' : 'error', ok ? 2000 : 3000)
+  }
+
  const contextPercent = getContextUsagePercent()

  // Recent chats for the empty state — exclude the current chat and any
@@ -892,7 +894,9 @@ export default function Chat() {
            onDelete={deleteChat}
            onDeleteAll={promptDeleteAll}
            onRename={renameChat}
-            onExport={(chat) => exportChatAsMarkdown(chat)}
+            onExport={(chat) => downloadChatAsMarkdown(chat)}
+            onCopyChat={(chat) => copyChatAsMarkdown(chat)}
+            onDuplicate={(chat) => { if (forkChat(chat.id)) addToast(t('toasts.forked'), 'success', 2000) }}
          />
          {activeChat.localaiAssistant && (
            <span
@@ -1184,11 +1188,19 @@ export default function Chat() {
                      <button onClick={() => copyMessage(msg.content)} title={t('actions.copy')}>
                        <i className="fas fa-copy" />
                      </button>
-                      {msg.role === 'assistant' && i === activeChat.history.length - 1 && !isStreaming && (
-                        <button onClick={handleRegenerate} title={t('actions.regenerate')}>
+                      {msg.role === 'assistant' && !isStreaming && (
+                        <button onClick={() => handleRegenerate(i)} title={t('actions.regenerate')}>
                          <i className="fas fa-rotate" />
                        </button>
                      )}
+                      {msg.role === 'assistant' && !isStreaming && (
+                        <button
+                          onClick={() => { forkChat(activeChat.id, i + 1); addToast(t('toasts.forked'), 'success', 2000) }}
+                          title={t('actions.branch')}
+                        >
+                          <i className="fas fa-code-branch" />
+                        </button>
+                      )}
                    </div>
                  </div>
                </div>