@electerm/electerm-react 5.5.35 → 5.5.66

package/client/components/ai/ai-auto-compress.js

@@ -0,0 +1,119 @@
+// Automatic context compression, shared by agent mode and ask mode.
+//
+// A request is not just the conversation: agent runs append the assistant's
+// tool calls and their results on every iteration, ask turns append the answer
+// of every turn. Either way the request that leaves the machine grows past what
+// the session transcript suggests, and once it approaches the model's window
+// the provider starts rejecting it outright, which kills the run mid-way. The
+// fix is the same one the manual Compress button performs -- replace the
+// history with a summary -- except it has to happen before the request that
+// would overflow.
+//
+// Pure module (no window / store access) so the decision and the rewrite can
+// be unit tested, and so the manual and the automatic path share one summary
+// prompt and one message shape. The request that asks for a summary lives in
+// ai-compress.js.
+
+import { CONTEXT_DANGER_PERCENT } from './ai-context.js'
+
+// Sent as the closing user turn when asking for a summary. Shared with the
+// manual path (store.compressChatSession) so both produce the same thing.
+export const COMPRESS_SUMMARY_PROMPT = 'Please summarize the above conversation concisely. Include key information, decisions, context, and any important details that would be needed to continue this conversation effectively.'
+
+// `info` is the object summarizeContext returns. Percent is null/absent when
+// the window size is unknown, which must not read as "0, no compression
+// needed" -- there is simply nothing to decide on.
+//
+// The threshold is the danger level from ai-context.js, read here rather than
+// copied into a constant of this module: the same value is what turns the
+// context indicator red, and a live read cannot be left behind in a stale copy
+// of this file when that value is edited (which is how "I set it to 5 and it
+// still did not compress" happens).
+export function shouldAutoCompress (info, percent = CONTEXT_DANGER_PERCENT) {
+  if (!info) {
+    return false
+  }
+  const p = info.percent
+  if (p === null || p === undefined || !isFinite(p)) {
+    return false
+  }
+  return p >= percent
+}
+
+// There has to be something a summary can replace. A fresh request is just the
+// system prompt plus the prompt being sent; compacting that would only re-word
+// the question, so a model whose tool schemas alone fill the window is left
+// alone rather than sent a summary request on every turn.
+export function canCompact (messages) {
+  return Array.isArray(messages) && messages.length > 2
+}
+
+// An ask-mode request ends with the prompt being answered, because
+// buildSessionMessages appends each turn's prompt after the earlier ones.
+// Compaction must keep that last message out of the summary: it is the live
+// question, and folding it into "here is a summary of our previous
+// conversation" would ask the model to answer a question it only sees quoted
+// back at it.
+export function splitPendingTurn (messages) {
+  if (!Array.isArray(messages)) {
+    return { context: [], pending: null }
+  }
+  const last = messages[messages.length - 1]
+  if (last && last.role === 'user') {
+    return { context: messages.slice(0, -1), pending: last }
+  }
+  return { context: messages, pending: null }
+}
+
+// How a summary re-enters the conversation. Deliberately the same pair
+// buildSessionMessages emits for a compressed session entry, so a live loop
+// that compacted itself and a session compressed between turns read
+// identically to the model.
+export function summaryMessages (summary) {
+  return [
+    {
+      role: 'user',
+      content: `Here is a summary of our previous conversation for context:\n\n${summary}`
+    },
+    {
+      role: 'assistant',
+      content: 'Understood. I will use this context as we continue.'
+    }
+  ]
+}
+
+// Compact `messages` in place: the system prompt stays (it carries the agent
+// instructions and guardrails), everything the summary covers is dropped.
+// In place because the agent loop holds this exact array for its next request.
+export function applySummary (messages, summary) {
+  if (!Array.isArray(messages) || !summary) {
+    return messages
+  }
+  const system = messages.find(m => m && m.role === 'system')
+  messages.length = 0
+  if (system) {
+    messages.push(system)
+  }
+  messages.push(...summaryMessages(summary))
+  return messages
+}
+
+// The ask-mode counterpart, returning a new list: the memoized session messages
+// this turn was built from must not be modified, and the live prompt has to be
+// re-attached after the summary.
+export function compactAskMessages (messages, summary) {
+  if (!Array.isArray(messages) || !summary) {
+    return messages
+  }
+  const { pending } = splitPendingTurn(messages)
+  const system = messages.find(m => m && m.role === 'system')
+  const next = []
+  if (system) {
+    next.push(system)
+  }
+  next.push(...summaryMessages(summary))
+  if (pending) {
+    next.push(pending)
+  }
+  return next
+}

package/client/components/ai/ai-chat-history-item.jsx

@@ -1,10 +1,17 @@
-import { useState, useEffect, useRef, useCallback, useMemo } from 'react'
+import { useState, useEffect, useRef, useCallback, useMemo, memo } from 'react'
 import AIOutput from './ai-output'
 import AIStopIcon from './ai-stop-icon'
 import AgentToolCallCard from './agent-tool-call-card'
-import { runAgentLoop } from './agent'
+import { runAgentLoop, stopAgentRun } from './agent'
 import { appendMandatoryGuardrails } from './ai-guardrails'
-import { buildSessionMessages } from './ai-context'
+import { buildSessionMessages, summarizeContext } from './ai-context'
+import {
+  shouldAutoCompress,
+  canCompact,
+  splitPendingTurn,
+  compactAskMessages
+} from './ai-auto-compress'
+import { summarizeMessages, autoCompressSession, autoCompressEnabled } from './ai-compress'
 import {
   Alert,
   Tooltip,
@@ -15,14 +22,23 @@ import {
   CloseOutlined,
   CaretDownOutlined,
   CaretRightOutlined,
+  CompressOutlined,
   PaperClipOutlined
 } from '@ant-design/icons'
 import { copy } from '../../common/clipboard'
 import { formatSize } from './ai-attachments'
 
-export default function AIChatHistoryItem ({ item }) {
+// memo()'d: the panel holds the draft prompt in its own state, so every
+// keystroke re-renders the whole transcript. Without this the keystroke also
+// re-rendered (and re-parsed the markdown of) every message in it -- 50ms+ per
+// character in a long agent session. Entries are updated immutably
+// (store.updateAiHistoryEntry), so the reference comparison is meaningful.
+export default memo(function AIChatHistoryItem ({ item }) {
   const [showOutput, setShowOutput] = useState(true)
   const [isStreaming, setIsStreaming] = useState(false)
+  // `current` is the stop flag; `requestId` is the HTTP request currently in
+  // flight (agent mode), so that stopping can cancel it rather than wait for it
+  // to come back.
   const abortRef = useRef(false)
   const {
     prompt,
@@ -38,7 +54,8 @@ export default function AIChatHistoryItem ({ item }) {
     authHeaderNameAI,
     languageAI,
     mode,
-    toolCalls
+    toolCalls,
+    autoCompressCount
   } = item
 
   function toggleOutput () {
@@ -62,6 +79,61 @@ export default function AIChatHistoryItem ({ item }) {
     excludeId: item.id
   }), [chatSessionId, item.id, item.timestamp])
 
+  // Everything a request needs beyond the message list; also what the
+  // compressor uses to reach the same provider (see ai-compress.js).
+  const requestConfig = useMemo(() => ({
+    modelAI,
+    roleAI,
+    baseURLAI,
+    apiPathAI,
+    apiKeyAI,
+    proxyAI,
+    languageAI,
+    authHeaderNameAI
+  }), [
+    modelAI,
+    roleAI,
+    baseURLAI,
+    apiPathAI,
+    apiKeyAI,
+    proxyAI,
+    languageAI,
+    authHeaderNameAI
+  ])
+
+  // The message list this turn actually sends. Normally the memoized session
+  // messages above, but when auto compress is on and the request would not fit
+  // the window, the earlier turns are replaced by a summary first. The live
+  // prompt survives untouched -- it is the question being answered, not
+  // history. The stored session is compacted separately once the answer is in
+  // (autoCompressSession below), so this is only about the request leaving now.
+  const buildOutgoingMessages = useCallback(async () => {
+    if (!autoCompressEnabled() || !conversationMessages) {
+      return conversationMessages
+    }
+    const info = summarizeContext(conversationMessages, {
+      model: modelAI,
+      contextLength: window.store.config.contextLengthAI
+    })
+    if (!shouldAutoCompress(info)) {
+      return conversationMessages
+    }
+    const { context } = splitPendingTurn(conversationMessages)
+    if (!canCompact(context)) {
+      return conversationMessages
+    }
+    // Marked before the request: summarizing a nearly full window takes a
+    // while, and the badge is the only sign that this turn is waiting on it.
+    // Cleared again if the summary comes back unusable.
+    window.store.updateAiHistoryEntry(item.id, { autoCompressCount: 1 })
+    const summary = await summarizeMessages(context, requestConfig)
+    if (!summary) {
+      window.store.updateAiHistoryEntry(item.id, { autoCompressCount: 0 })
+      return conversationMessages
+    }
+    return compactAskMessages(conversationMessages, summary)
+  }, [conversationMessages, modelAI, requestConfig, item.id])
+
   const pollStreamContent = useCallback(async (sid) => {
     try {
       const streamResponse = await window.pre.runGlobalAsync('getStreamContent', sid)
@@ -74,20 +146,22 @@ export default function AIChatHistoryItem ({ item }) {
         return window.store.onError(new Error(streamResponse.error))
       }
 
-      const index = window.store.aiChatHistory.findIndex(i => i.id === item.id)
-      if (index !== -1) {
-        window.store.aiChatHistory[index].response = streamResponse.content || ''
-        window.store.aiChatHistory = [...window.store.aiChatHistory]
-      }
+      window.store.updateAiHistoryEntry(item.id, {
+        response: streamResponse.content || ''
+      })
       setIsStreaming(streamResponse.hasMore)
       if (streamResponse.hasMore) {
         setTimeout(() => pollStreamContent(sid), 200)
+      } else {
+        // The answer is in the store now, so the session can be summarized for
+        // the turns that follow this one.
+        autoCompressSession(chatSessionId, requestConfig)
       }
     } catch (error) {
       window.store.removeAiHistory(item.id)
       window.store.onError(error)
     }
-  }, [item.id])
+  }, [item.id, chatSessionId, requestConfig])
 
   const startRequest = useCallback(async () => {
     try {
@@ -102,7 +176,7 @@ export default function AIChatHistoryItem ({ item }) {
         proxyAI,
         true,
         authHeaderNameAI,
-        conversationMessages
+        await buildOutgoingMessages()
       )
 
       if (aiResponse && aiResponse.error) {
@@ -112,45 +186,34 @@ export default function AIChatHistoryItem ({ item }) {
 
       if (aiResponse && aiResponse.isStream && aiResponse.sessionId) {
         setIsStreaming(true)
-        const index = window.store.aiChatHistory.findIndex(i => i.id === item.id)
-        if (index !== -1) {
-          window.store.aiChatHistory[index].sessionId = aiResponse.sessionId
-          window.store.aiChatHistory[index].response = aiResponse.content || ''
-        }
+        window.store.updateAiHistoryEntry(item.id, {
+          sessionId: aiResponse.sessionId,
+          response: aiResponse.content || ''
+        })
         pollStreamContent(aiResponse.sessionId)
       } else if (aiResponse && aiResponse.response) {
-        const index = window.store.aiChatHistory.findIndex(i => i.id === item.id)
-        if (index !== -1) {
-          window.store.aiChatHistory[index].response = aiResponse.response
-        }
+        window.store.updateAiHistoryEntry(item.id, {
+          response: aiResponse.response
+        })
+        // No stream to poll: the answer is in the store, so the session can be
+        // summarized for the turns that follow this one.
+        autoCompressSession(chatSessionId, requestConfig)
       }
     } catch (error) {
       window.store.removeAiHistory(item.id)
       window.store.onError(error)
     }
-  }, [prompt, modelAI, baseURLAI, apiPathAI, apiKeyAI, proxyAI, authHeaderNameAI, item.id, pollStreamContent, conversationMessages])
+  }, [prompt, modelAI, baseURLAI, apiPathAI, apiKeyAI, proxyAI, authHeaderNameAI, item.id, chatSessionId, requestConfig, pollStreamContent, buildOutgoingMessages])
 
   const startAgentRequest = useCallback(async () => {
     abortRef.current = false
-    const config = {
-      modelAI,
-      roleAI,
-      baseURLAI,
-      apiPathAI,
-      apiKeyAI,
-      proxyAI,
-      languageAI,
-      authHeaderNameAI
-    }
-    await runAgentLoop(item, config, abortRef, setIsStreaming, conversationMessages)
-  }, [modelAI, roleAI, baseURLAI, apiPathAI, apiKeyAI, proxyAI, languageAI, authHeaderNameAI, item.id, conversationMessages])
+    abortRef.requestId = null
+    await runAgentLoop(item, requestConfig, abortRef, setIsStreaming, conversationMessages)
+  }, [item, requestConfig, conversationMessages])
 
   useEffect(() => {
     if (item.pending) {
-      const index = window.store.aiChatHistory.findIndex(i => i.id === item.id)
-      if (index !== -1) {
-        window.store.aiChatHistory[index].pending = false
-      }
+      window.store.updateAiHistoryEntry(item.id, { pending: false })
       if (mode === 'agent') {
         startAgentRequest()
       } else {
@@ -162,8 +225,8 @@ export default function AIChatHistoryItem ({ item }) {
   async function handleStop (e) {
     e.stopPropagation()
     if (mode === 'agent') {
-      abortRef.current = true
       setIsStreaming(false)
+      await stopAgentRun(abortRef)
       return
     }
     if (!sessionId) return
@@ -258,6 +321,27 @@ export default function AIChatHistoryItem ({ item }) {
     )
   }
 
+  // Auto compress happens on its own, with no visible step of its own, so the
+  // turn says so: the conversation was summarized and the request continued
+  // from the summary instead of the full history. Ask mode summarizes before
+  // sending, agent mode in the middle of the run (possibly more than once).
+  function renderAutoCompressBadge () {
+    if (!autoCompressCount) {
+      return null
+    }
+    return (
+      <div className='ai-auto-compress-badge mg1b'>
+        <Tag
+          color='blue'
+          title='The context filled up and was summarized automatically, this turn continued from the summary'
+        >
+          <CompressOutlined /> {window.translate('autoCompress')}
+          {autoCompressCount > 1 ? ` x${autoCompressCount}` : ''}
+        </Tag>
+      </div>
+    )
+  }
+
   function renderToolCalls () {
     if (mode !== 'agent' || !toolCalls || !toolCalls.length) {
       return null
@@ -279,9 +363,10 @@ export default function AIChatHistoryItem ({ item }) {
         </Tooltip>
       </div>
       {renderAttachments()}
+      {renderAutoCompressBadge()}
       {renderToolCalls()}
       {showOutput && <AIOutput item={item} />}
       {renderStopButton()}
     </div>
   )
-}
+})

package/client/components/ai/ai-chat.jsx

@@ -1,10 +1,11 @@
 import { useState, useCallback, useEffect, useMemo, useRef } from 'react'
-import { Flex, Input, Segmented, Button, Tag, message } from 'antd'
+import { Flex, Input, Segmented, Button, Tag, message, Popover } from 'antd'
 import TabSelect from '../footer/tab-select'
 import AiChatHistory from './ai-chat-history'
 import AiChatSessions from './ai-chat-sessions'
 import AiContextIndicator from './ai-context-indicator'
-import { buildSessionMessages, summarizeContext, getUsageLevel, formatPercent } from './ai-context'
+import SwitchLabel from '../common/switch'
+import { buildSessionMessages, summarizeContext, getUsageLevel } from './ai-context'
 import { appendMandatoryGuardrails } from './ai-guardrails'
 import uid from '../../common/uid'
 import { pick } from 'lodash-es'
@@ -42,6 +43,7 @@ export default function AIChat (props) {
   const fileInputRef = useRef(null)
   const [mode, setMode] = useState(() => getItem(aiChatModeLsKey) || 'ask')
   const isAgent = mode === 'agent'
+  const autoCompress = !!props.aiAutoCompress
   const submitDisabled = isAgent && props.agentRunning
 
   const currentChatSessionId = props.currentChatSessionId || ''
@@ -52,8 +54,17 @@ export default function AIChat (props) {
     }
   }, [currentChatSessionId, props.rightPanelTab])
 
-  const sessionHistory = (props.aiChatHistory || []).filter(
-    h => h.chatSessionId === currentChatSessionId
+  // Memoized on purpose: `prompt` lives in this component's state, so every
+  // keystroke re-renders it. `AIChatHistory` is memo()'d, and a fresh array on
+  // each keystroke defeated that -- which also meant its scroll-to-bottom
+  // layout effect re-ran while typing, yanking the view down mid-scroll.
+  // Entries are updated immutably, so a new array identity really does mean
+  // the transcript changed.
+  const sessionHistory = useMemo(
+    () => (props.aiChatHistory || []).filter(
+      h => h.chatSessionId === currentChatSessionId
+    ),
+    [props.aiChatHistory, currentChatSessionId]
   )
 
   const config = props.config || {}
@@ -144,6 +155,12 @@ export default function AIChat (props) {
     if (window.store.aiConfigMissing()) {
       window.store.toggleAIConfig()
     }
+    // Read the live flag rather than the rendered one. `submitDisabled` can be
+    // stale: the loop sets `agentRunning` from the new turn's mount effect, and
+    // manate's `auto` re-subscribes its listener on every render, so a write
+    // landing in that window never reaches the panel -- leaving the icon looking
+    // enabled while a run is in flight, which let a second agent turn through.
+    if (isAgent && window.store.agentRunning) return
     if (!prompt.trim() && !attachments.length) return
 
     const chatId = uid()
@@ -179,12 +196,14 @@ export default function AIChat (props) {
       id: chatId
     }
 
-    window.store.aiChatHistory.push(chatEntry)
+    // Reassign rather than push: the store only notifies on a property write,
+    // and the transcript is keyed off the array identity.
+    window.store.aiChatHistory = [...window.store.aiChatHistory, chatEntry]
     setPrompt('')
     setAttachments([])
 
     if (window.store.aiChatHistory.length > MAX_HISTORY) {
-      window.store.aiChatHistory.splice(MAX_HISTORY)
+      window.store.aiChatHistory = window.store.aiChatHistory.slice(0, MAX_HISTORY)
     }
   }, [prompt, attachments, mode, currentChatSessionId])
 
@@ -224,11 +243,39 @@ export default function AIChat (props) {
     }
   }
 
-  function renderCompressTitle () {
-    if ((contextLevel === 'warn' || contextLevel === 'danger') && contextInfo) {
-      return `Context is ${formatPercent(contextInfo.percent)} full — compress to summarize the session`
-    }
-    return 'Summarize this session into a single message, dropping the older history'
+  function handleAutoCompressChange (val) {
+    window.store.setAiAutoCompress(val)
+  }
+
+  // The toolbar button is the auto compress button: the popover behind it holds
+  // the persistent toggle plus the manual compress action, so one button covers
+  // both "keep this session small for me" and "compact it right now".
+  function renderAutoCompressPopover () {
+    return (
+      <div className='ai-auto-compress-popover'>
+        <Flex align='center' justify='space-between' gap={12}>
+          <span className='ai-auto-compress-label'>{e('autoCompress')}</span>
+          <SwitchLabel
+            checked={autoCompress}
+            onChange={handleAutoCompressChange}
+            size='small'
+          />
+        </Flex>
+        <hr />
+        <Flex vertical gap={4} align='flex-start'>
+          <Button
+            size='small'
+            icon={<CompressOutlined />}
+            onClick={handleCompressSession}
+            loading={compressing}
+            disabled={sessionHistory.length < 2}
+            type={contextLevel === 'warn' || contextLevel === 'danger' ? 'primary' : 'default'}
+          >
+            {e('compress')}
+          </Button>
+        </Flex>
+      </div>
+    )
   }
 
   function handleShowHistory () {
@@ -321,19 +368,20 @@ export default function AIChat (props) {
             >
               {e('new')}
             </Button>
-            {sessionHistory.length >= 2 && (
+            <Popover
+              content={renderAutoCompressPopover()}
+              trigger='click'
+              placement='topLeft'
+            >
               <Button
                 size='small'
                 icon={<CompressOutlined />}
-                onClick={handleCompressSession}
-                loading={compressing}
-                type={contextLevel === 'warn' ? 'primary' : 'default'}
-                danger={contextLevel === 'danger'}
-                title={renderCompressTitle()}
+                type={autoCompress ? 'primary' : 'default'}
+                danger={!autoCompress && contextLevel === 'danger'}
               >
-                {e('compress')}
+                {e('autoCompress')}
               </Button>
-            )}
+            </Popover>
             <Button
               size='small'
               icon={<HistoryOutlined />}

package/client/components/ai/ai-compress.js

@@ -0,0 +1,95 @@
+/**
+ * Runtime side of AI context compression.
+ *
+ * The pure decisions and message rewrites live in ai-auto-compress.js; this
+ * module owns the parts that need the provider (the summary request) and the
+ * store (whether the toggle is on, how big a stored session is, compressing it).
+ * Both the agent loop and ask mode go through here so "too full" means the same
+ * number in both.
+ */
+
+import { buildSessionMessages, summarizeContext } from './ai-context'
+import { appendMandatoryGuardrails } from './ai-guardrails'
+import {
+  COMPRESS_SUMMARY_PROMPT,
+  shouldAutoCompress
+} from './ai-auto-compress'
+
+// Read at the moment of the decision, not captured: the toggle can be flipped
+// from the popover while a run is in flight.
+export function autoCompressEnabled () {
+  return !!(window.store && window.store.aiAutoCompress)
+}
+
+// Ask the model for the summary that replaces a conversation. Goes through the
+// plain chat path rather than the tool loop: this request only has to produce
+// text, and giving it tools would let the summarizer act on the terminal while
+// it is supposed to be reading. Returns '' when there is nothing usable, which
+// callers read as "leave the conversation alone".
+export async function summarizeMessages (messages, config = {}) {
+  try {
+    const result = await window.pre.runGlobalAsync(
+      'AIchat',
+      COMPRESS_SUMMARY_PROMPT,
+      config.modelAI,
+      config.roleAI,
+      config.baseURLAI,
+      config.apiPathAI,
+      config.apiKeyAI,
+      config.proxyAI,
+      false,
+      config.authHeaderNameAI,
+      [...messages, { role: 'user', content: COMPRESS_SUMMARY_PROMPT }]
+    )
+    if (!result || result.error || !result.response) {
+      return ''
+    }
+    return result.response
+  } catch (error) {
+    console.error('Error summarizing conversation:', error)
+    return ''
+  }
+}
+
+// How big the stored session is, i.e. what the next ask-mode turn would carry.
+// Same figure the panel's own indicator shows (components/ai/ai-chat.jsx), minus
+// agent tools, which only agent mode sends.
+export function sessionContextInfo (sessionId, config = {}) {
+  const store = window.store
+  if (!sessionId || !store) {
+    return null
+  }
+  const lang = config.languageAI || store.getLangName()
+  const role = appendMandatoryGuardrails((config.roleAI || '') + `;用[${lang}]回复`)
+  const messages = buildSessionMessages({
+    history: store.aiChatHistory,
+    chatSessionId: sessionId,
+    role
+  })
+  if (!messages || messages.length < 2) {
+    return null
+  }
+  return summarizeContext(messages, {
+    model: config.modelAI,
+    contextLength: store.config.contextLengthAI
+  })
+}
+
+// Compact a stored session when the toggle is on and it is over the line.
+// Called once a turn or a run is finished, so the *next* request starts from the
+// summary instead of the full history. Returns true when it compressed.
+export async function autoCompressSession (sessionId, config = {}) {
+  if (!autoCompressEnabled() || !sessionId) {
+    return false
+  }
+  if (!shouldAutoCompress(sessionContextInfo(sessionId, config))) {
+    return false
+  }
+  try {
+    await window.store.compressChatSession(sessionId)
+    return true
+  } catch (error) {
+    console.error('Error auto compressing session:', error)
+    return false
+  }
+}