@electerm/electerm-react 5.5.25 → 5.5.56

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

@@ -1,9 +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, summarizeContext } from './ai-context'
+import {
+  shouldAutoCompress,
+  canCompact,
+  splitPendingTurn,
+  compactAskMessages
+} from './ai-auto-compress'
+import { summarizeMessages, autoCompressSession, autoCompressEnabled } from './ai-compress'
 import {
   Alert,
   Tooltip,
@@ -14,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,
@@ -37,7 +54,8 @@ export default function AIChatHistoryItem ({ item }) {
     authHeaderNameAI,
     languageAI,
     mode,
-    toolCalls
+    toolCalls,
+    autoCompressCount
   } = item
 
   function toggleOutput () {
@@ -49,54 +67,72 @@ export default function AIChatHistoryItem ({ item }) {
     return appendMandatoryGuardrails(roleAI + `;用[${lang}]回复`)
   }
 
-  const conversationMessages = useMemo(() => {
-    if (!chatSessionId) {
-      return null
-    }
-    const sessionEntries = window.store.aiChatHistory
-      .filter(h => h.chatSessionId === chatSessionId && h.timestamp <= item.timestamp)
-      .sort((a, b) => a.timestamp - b.timestamp)
-
-    // Find the last compress entry
-    let lastCompressIndex = -1
-    for (let i = sessionEntries.length - 1; i >= 0; i--) {
-      if (sessionEntries[i].compressed) {
-        lastCompressIndex = i
-        break
-      }
-    }
+  // The context this turn sends: the session history up to and including the
+  // previous turns, but not this turn's own (still streaming) response.
+  // Shared with the context size indicator in ai-chat.jsx so the number shown
+  // is built from the same message list that goes out.
+  const conversationMessages = useMemo(() => buildSessionMessages({
+    history: window.store.aiChatHistory,
+    chatSessionId,
+    upto: item.timestamp,
+    role: buildRole(),
+    excludeId: item.id
+  }), [chatSessionId, item.id, item.timestamp])
 
-    const messages = [
-      { role: 'system', content: buildRole() }
-    ]
+  // 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
+  ])
 
-    // Start from the last compress entry (if any), skip older history
-    const startIndex = lastCompressIndex >= 0 ? lastCompressIndex : 0
-    for (let i = startIndex; i < sessionEntries.length; i++) {
-      const entry = sessionEntries[i]
-      if (entry.compressed) {
-        messages.push({
-          role: 'user',
-          content: `Here is a summary of our previous conversation for context:\n\n${entry.response}`
-        })
-        messages.push({
-          role: 'assistant',
-          content: 'Understood. I will use this context as we continue.'
-        })
-      } else {
-        messages.push({
-          role: 'user',
-          // promptWithAttachments carries the inlined file blocks;
-          // falls back to the plain prompt for legacy entries
-          content: entry.promptWithAttachments || entry.prompt
-        })
-        if (entry.response && entry.id !== item.id) {
-          messages.push({ role: 'assistant', content: entry.response })
-        }
-      }
+  // 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
     }
-    return messages
-  }, [chatSessionId, item.id, item.timestamp])
+    // 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 {
@@ -110,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 {
@@ -138,7 +176,7 @@ export default function AIChatHistoryItem ({ item }) {
         proxyAI,
         true,
         authHeaderNameAI,
-        conversationMessages
+        await buildOutgoingMessages()
       )
 
       if (aiResponse && aiResponse.error) {
@@ -148,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 {
@@ -198,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
@@ -294,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
@@ -315,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,8 +1,12 @@
-import { useState, useCallback, useEffect, useRef } from 'react'
-import { Flex, Input, Segmented, Button, Tag, message } from 'antd'
+import { useState, useCallback, useEffect, useMemo, useRef } from 'react'
+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 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'
 import {
@@ -39,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 || ''
@@ -49,10 +54,61 @@ 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 || {}
+
+  // Size of the context the *next* message will carry: every entry of this
+  // session, from the last compression onwards, built by the same helper the
+  // sender uses. While an agent loop is running its own, much larger, figure
+  // is published to the store (tool schemas and tool results included) and
+  // takes precedence.
+  const sessionContextInfo = useMemo(() => {
+    if (!currentChatSessionId) {
+      return null
+    }
+    const lang = config.languageAI || window.store.getLangName()
+    const role = appendMandatoryGuardrails(
+      (config.roleAI || '') + `;用[${lang}]回复`
+    )
+    const messages = buildSessionMessages({
+      history: props.aiChatHistory,
+      chatSessionId: currentChatSessionId,
+      role
+    })
+    if (!messages || messages.length < 2) {
+      return null
+    }
+    return summarizeContext(messages, {
+      model: config.modelAI,
+      contextLength: config.contextLengthAI
+    })
+  }, [
+    props.aiChatHistory,
+    // length as well as identity: sending a message pushes onto the existing
+    // array, so the reference alone would not change
+    props.aiChatHistory.length,
+    currentChatSessionId,
+    config.roleAI,
+    config.languageAI,
+    config.modelAI,
+    config.contextLengthAI
+  ])
+
+  const contextInfo = props.aiContextInfo || sessionContextInfo
+  const contextLevel = getUsageLevel(contextInfo && contextInfo.percent)
+
   function handlePromptChange (e) {
     setPrompt(e.target.value)
   }
@@ -99,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()
@@ -134,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])
 
@@ -179,6 +243,41 @@ export default function AIChat (props) {
     }
   }
 
+  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 () {
     window.store.toggleChatSessions()
   }
@@ -259,34 +358,40 @@ export default function AIChat (props) {
       </Flex>
 
       <Flex vertical className='ai-chat-input'>
-        <Flex className='ai-chat-toolbar mg1b' align='left' gap={4}>
-          <Button
-            size='small'
-            icon={<PlusOutlined />}
-            onClick={handleNewChat}
-            className='mg1r new-chat-btn'
-          >
-            {e('new')}
-          </Button>
-          {sessionHistory.length >= 2 && (
+        <Flex className='ai-chat-toolbar mg1b' align='center' justify='space-between' gap={4}>
+          <Flex align='center' gap={4}>
             <Button
               size='small'
-              icon={<CompressOutlined />}
-              onClick={handleCompressSession}
-              loading={compressing}
-              className='mg1r'
+              icon={<PlusOutlined />}
+              onClick={handleNewChat}
+              className='new-chat-btn'
             >
-              {e('compress')}
+              {e('new')}
             </Button>
-          )}
-          <Button
-            size='small'
-            icon={<HistoryOutlined />}
-            onClick={handleShowHistory}
-            type={props.showChatSessions ? 'primary' : 'default'}
-          >
-            {e('history')}
-          </Button>
+            <Popover
+              content={renderAutoCompressPopover()}
+              trigger='click'
+              placement='topLeft'
+            >
+              <Button
+                size='small'
+                icon={<CompressOutlined />}
+                type={autoCompress ? 'primary' : 'default'}
+                danger={!autoCompress && contextLevel === 'danger'}
+              >
+                {e('autoCompress')}
+              </Button>
+            </Popover>
+            <Button
+              size='small'
+              icon={<HistoryOutlined />}
+              onClick={handleShowHistory}
+              type={props.showChatSessions ? 'primary' : 'default'}
+            >
+              {e('history')}
+            </Button>
+          </Flex>
+          <AiContextIndicator info={contextInfo} />
         </Flex>
         {attachments.length > 0 && (
           <Flex wrap='wrap' gap={4} className='ai-chat-attachments mg1b'>

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
+  }
+}

package/client/components/ai/ai-config-props.js

@@ -7,7 +7,18 @@ export const aiConfigsArr = [
   'authHeaderNameAI',
   'apiPathAI',
   'languageAI',
-  'proxyAI'
+  'proxyAI',
+  'contextLengthAI'
+]
+
+// Keys that may legitimately be empty. `aiConfigMissing` only forces the
+// config modal open when one of the *other* keys is unset, so anything
+// optional has to be listed here or the modal would pop up forever.
+export const optionalAIConfigsArr = [
+  'apiKeyAI',
+  'proxyAI',
+  'nameAI',
+  'contextLengthAI'
 ]
 
 export {