@electerm/electerm-react 5.5.25 → 5.5.35

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

@@ -1,8 +1,11 @@
-import { useState, useCallback, useEffect, useRef } from 'react'
+import { useState, useCallback, useEffect, useMemo, useRef } from 'react'
 import { Flex, Input, Segmented, Button, Tag, message } 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 { appendMandatoryGuardrails } from './ai-guardrails'
 import uid from '../../common/uid'
 import { pick } from 'lodash-es'
 import {
@@ -53,6 +56,48 @@ export default function AIChat (props) {
     h => h.chatSessionId === 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)
   }
@@ -179,6 +224,13 @@ 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 handleShowHistory () {
     window.store.toggleChatSessions()
   }
@@ -259,34 +311,39 @@ 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={<PlusOutlined />}
+              onClick={handleNewChat}
+              className='new-chat-btn'
+            >
+              {e('new')}
+            </Button>
+            {sessionHistory.length >= 2 && (
+              <Button
+                size='small'
+                icon={<CompressOutlined />}
+                onClick={handleCompressSession}
+                loading={compressing}
+                type={contextLevel === 'warn' ? 'primary' : 'default'}
+                danger={contextLevel === 'danger'}
+                title={renderCompressTitle()}
+              >
+                {e('compress')}
+              </Button>
+            )}
             <Button
               size='small'
-              icon={<CompressOutlined />}
-              onClick={handleCompressSession}
-              loading={compressing}
-              className='mg1r'
+              icon={<HistoryOutlined />}
+              onClick={handleShowHistory}
+              type={props.showChatSessions ? 'primary' : 'default'}
             >
-              {e('compress')}
+              {e('history')}
             </Button>
-          )}
-          <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-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 {

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

@@ -1,6 +1,7 @@
 import {
   Form,
   Input,
+  InputNumber,
   Button,
   AutoComplete,
   Alert,
@@ -356,6 +357,19 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
           {renderModelInput()}
         </Form.Item>
 
+        <Form.Item
+          label='Context length'
+          name='contextLengthAI'
+          tooltip='How many tokens this model can hold in one request. Leave empty to guess from the model name; the chat panel uses it to show how full the context is.'
+        >
+          <InputNumber
+            placeholder='auto (detect from model name)'
+            min={1000}
+            step={1000}
+            style={{ width: '100%' }}
+          />
+        </Form.Item>
+
         <Form.Item
           label={renderApiKeyLabel()}
           name='apiKeyAI'

package/client/components/ai/ai-context-indicator.jsx

@@ -0,0 +1,83 @@
+import { Tooltip } from 'antd'
+import {
+  formatTokens,
+  formatPercent,
+  getUsageLevel,
+  CONTEXT_WARN_PERCENT
+} from './ai-context'
+
+// How full the context window is, as a small bar + count, with the breakdown
+// in the tooltip. The number is what the next request will carry, so it is
+// the one to watch before pressing Compress.
+export default function AiContextIndicator ({ info }) {
+  if (!info || !info.tokens) {
+    return null
+  }
+  const {
+    tokens,
+    messagesTokens,
+    toolsTokens,
+    windowSize,
+    windowSource,
+    percent,
+    measuredTokens
+  } = info
+  const level = getUsageLevel(percent)
+  const width = Math.min(100, Math.max(2, percent || 0))
+
+  function renderWindowSource () {
+    if (windowSource === 'config') {
+      return `window ${formatTokens(windowSize)}, set in AI config`
+    }
+    if (windowSource === 'model') {
+      return `window ${formatTokens(windowSize)}, from the model name`
+    }
+    return `window assumed to be ${formatTokens(windowSize)} — set "Context length" in AI config if your model differs`
+  }
+
+  const tip = (
+    <div className='ai-context-tip'>
+      <div className='ai-context-tip-title'>Context of the next message</div>
+      <div className='ai-context-tip-row'>
+        <span>system + history</span>
+        <span>~{formatTokens(messagesTokens)}</span>
+      </div>
+      {toolsTokens > 0 && (
+        <div className='ai-context-tip-row'>
+          <span>agent tools</span>
+          <span>~{formatTokens(toolsTokens)}</span>
+        </div>
+      )}
+      <div className='ai-context-tip-row ai-context-tip-total'>
+        <span>total</span>
+        <span>~{formatTokens(tokens)} ({formatPercent(percent)})</span>
+      </div>
+      {measuredTokens > 0 && (
+        <div className='ai-context-tip-row'>
+          <span>last request, measured</span>
+          <span>{measuredTokens.toLocaleString()}</span>
+        </div>
+      )}
+      <div className='ai-context-tip-note'>{renderWindowSource()}</div>
+      {(level === 'warn' || level === 'danger') && (
+        <div className='ai-context-tip-warn'>
+          Over {CONTEXT_WARN_PERCENT}% — use Compress to summarize the session.
+        </div>
+      )}
+    </div>
+  )
+
+  return (
+    <Tooltip title={tip}>
+      <span className={`ai-context-indicator ai-context-${level}`}>
+        <span className='ai-context-bar'>
+          <span className='ai-context-bar-fill' style={{ width: width + '%' }} />
+        </span>
+        <span className='ai-context-count'>
+          {formatTokens(tokens)}/{formatTokens(windowSize)}
+        </span>
+        <span className='ai-context-percent'>{formatPercent(percent)}</span>
+      </span>
+    </Tooltip>
+  )
+}

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

@@ -0,0 +1,272 @@
+// Context accounting for the AI panel: how big is the conversation we are
+// about to send, and how much of the model's context window does it fill.
+//
+// There is deliberately no tokenizer here. A real one needs the model's
+// vocabulary (tiktoken & friends) and would pull a dependency into the
+// renderer for a number that only has to be good enough to answer "should I
+// compress?". The heuristic below is CJK aware and deliberately pessimistic,
+// so the warning arrives a little early rather than too late. Where the
+// provider reports real usage we show that number alongside the estimate.
+//
+// Pure module -- no window / store access -- so it can be unit tested and so
+// the sender and the indicator cannot drift apart.
+
+// Latin text and code average ~4 chars per token; 3.5 is the safe side.
+const CHARS_PER_TOKEN = 3.5
+// CJK is roughly one token per character (a little under for Chinese).
+const TOKENS_PER_CJK_CHAR = 0.8
+// Per message role/delimiter overhead, as counted by the OpenAI tokenizer.
+const PER_MESSAGE_OVERHEAD = 4
+
+// BMP ranges that tokenize densely: CJK ideographs, kana, full width forms.
+const CJK_RE = /[\u2e80-\u2eff\u3000-\u303f\u3040-\u30ff\u3400-\u4dbf\u4e00-\u9fff\uf900-\ufaff\uff00-\uffef]/g
+
+export const DEFAULT_CONTEXT_WINDOW = 128000
+export const CONTEXT_WARN_PERCENT = 70
+export const CONTEXT_DANGER_PERCENT = 90
+
+// Rough token count of a string. Never exact, never wildly wrong. Called on
+// the whole conversation every time it changes, so it stays a single pass
+// with one regex sweep rather than a per character test.
+export function estimateTokens (text) {
+  if (!text) {
+    return 0
+  }
+  const str = typeof text === 'string' ? text : String(text)
+  const cjkChars = str.match(CJK_RE)
+  const cjk = cjkChars ? cjkChars.length : 0
+  const other = str.length - cjk
+  return Math.ceil(cjk * TOKENS_PER_CJK_CHAR + other / CHARS_PER_TOKEN)
+}
+
+// Tokens for a message array in the OpenAI chat shape (which is also what the
+// anthropic / responses builders are fed before they re-shape it).
+export function estimateMessagesTokens (messages) {
+  if (!Array.isArray(messages)) {
+    return 0
+  }
+  let total = 0
+  for (const m of messages) {
+    if (!m) {
+      continue
+    }
+    total += PER_MESSAGE_OVERHEAD
+    total += estimateTokens(m.content)
+    if (m.role) {
+      total += estimateTokens(m.role)
+    }
+    if (Array.isArray(m.tool_calls)) {
+      for (const tc of m.tool_calls) {
+        total += estimateTokens(tc && tc.id)
+        total += estimateTokens(tc && tc.function && tc.function.name)
+        total += estimateTokens(tc && tc.function && tc.function.arguments)
+      }
+    }
+  }
+  return total
+}
+
+// Tool schemas are re-sent with every agent request and are far from free --
+// ignoring them would understate agent mode by a few thousand tokens.
+export function estimateToolsTokens (tools) {
+  if (!Array.isArray(tools) || !tools.length) {
+    return 0
+  }
+  try {
+    return estimateTokens(JSON.stringify(tools))
+  } catch (e) {
+    return 0
+  }
+}
+
+// Best effort hints, checked 2026-09. No provider publishes the window over
+// the API, and relays rename models freely, so this is only a starting point:
+// the "Context length" field in the AI config always wins over it.
+// Longest / most specific pattern first -- the list is scanned in order.
+const MODEL_CONTEXT_WINDOWS = [
+  [/qwen-?long/, 10000000],
+
+  // 1M class
+  [/gpt-6|gpt-5\.6|gpt-5-6/, 1050000],
+  [/gemini/, 1048576],
+  [/claude-(opus|sonnet|fable)-5/, 1000000],
+  [/deepseek-v4/, 1000000],
+  [/qwen3\.(7|8)|qwen3-max|qwen3\.5-max/, 1000000],
+  [/kimi-?k3/, 1048576],
+
+  // 500k / 400k / 256k class
+  [/grok-4\.6/, 500000],
+  [/gpt-5/, 400000],
+  [/kimi-?k2\.7/, 262144],
+  [/grok-4/, 256000],
+
+  // 200k class
+  [/claude/, 200000],
+  [/\bo[134]\b/, 200000],
+
+  // 128k class
+  [/gpt-4\.1|gpt-4o|gpt-4-turbo|gpt-4-1106|gpt-4-0125/, 128000],
+  [/llama-?[34]/, 131072],
+  [/qwen/, 131072],
+  [/kimi|moonshot/, 131072],
+  [/glm|zhipu|chatglm/, 131072],
+  [/ernie|wenxin/, 131072],
+  [/grok/, 131072],
+  [/mistral-large/, 131072],
+
+  // older / smaller
+  [/deepseek/, 65536],
+  [/gpt-4-32k/, 32768],
+  [/mixtral|mistral/, 32768],
+  [/gpt-3\.5/, 16385],
+  [/gpt-4/, 8192],
+  [/llama-?2/, 4096]
+]
+
+// Returns { size, source } where source is 'config' | 'model' | 'default'.
+export function getContextWindow (model, override) {
+  const declared = Number(override)
+  if (declared > 0) {
+    return { size: declared, source: 'config' }
+  }
+  const id = String(model || '').toLowerCase()
+  for (const [re, size] of MODEL_CONTEXT_WINDOWS) {
+    if (re.test(id)) {
+      return { size, source: 'model' }
+    }
+  }
+  return { size: DEFAULT_CONTEXT_WINDOW, source: 'default' }
+}
+
+// The single source of truth for "what gets sent": both the request in
+// ai-chat-history-item.jsx and the indicator in ai-chat.jsx go through here,
+// so the number on screen is the number that leaves the machine.
+//
+// Returns null when there is no session to build from -- the sender reads
+// that as "no history", and the main process then falls back to a plain
+// prompt + role request.
+//
+// `upto` limits the window to entries at or before a timestamp (the entry
+// being sent); `excludeId` drops one entry's response, which is what the
+// sender does for its own turn. The indicator omits both to describe the
+// *next* request, which will include every response so far.
+export function buildSessionMessages ({
+  history,
+  chatSessionId,
+  upto = Infinity,
+  role = '',
+  excludeId = null
+}) {
+  if (!chatSessionId) {
+    return null
+  }
+  const entries = (history || [])
+    .filter(h => h.chatSessionId === chatSessionId && h.timestamp <= upto)
+    .sort((a, b) => a.timestamp - b.timestamp)
+
+  // A compressed entry replaces everything before it.
+  let lastCompressIndex = -1
+  for (let i = entries.length - 1; i >= 0; i--) {
+    if (entries[i].compressed) {
+      lastCompressIndex = i
+      break
+    }
+  }
+
+  const messages = [
+    { role: 'system', content: role }
+  ]
+
+  const startIndex = lastCompressIndex >= 0 ? lastCompressIndex : 0
+  for (let i = startIndex; i < entries.length; i++) {
+    const entry = entries[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 !== excludeId) {
+        messages.push({ role: 'assistant', content: entry.response })
+      }
+    }
+  }
+  return messages
+}
+
+// Agent mode keeps the session history but swaps in its own system prompt.
+export function buildAgentMessages ({ systemPrompt, conversationMessages, prompt }) {
+  if (conversationMessages && conversationMessages.length > 1) {
+    return [
+      { role: 'system', content: systemPrompt },
+      ...conversationMessages.filter(m => m.role !== 'system')
+    ]
+  }
+  return [
+    { role: 'system', content: systemPrompt },
+    { role: 'user', content: prompt }
+  ]
+}
+
+// Everything the indicator needs, from the messages that will be sent.
+export function summarizeContext (messages, { model, contextLength, tools } = {}) {
+  const messagesTokens = estimateMessagesTokens(messages)
+  const toolsTokens = estimateToolsTokens(tools)
+  const tokens = messagesTokens + toolsTokens
+  const win = getContextWindow(model, contextLength)
+  return {
+    tokens,
+    messagesTokens,
+    toolsTokens,
+    windowSize: win.size,
+    windowSource: win.source,
+    percent: win.size ? (tokens / win.size) * 100 : null,
+    model: model || '',
+    measuredTokens: null
+  }
+}
+
+export function formatTokens (n) {
+  const v = Number(n) || 0
+  if (v < 1000) {
+    return String(Math.round(v))
+  }
+  if (v < 10000) {
+    return (v / 1000).toFixed(1) + 'k'
+  }
+  if (v < 1000000) {
+    return Math.round(v / 1000) + 'k'
+  }
+  return (v / 1000000).toFixed(1) + 'M'
+}
+
+export function formatPercent (p) {
+  if (p === null || p === undefined || !isFinite(p)) {
+    return ''
+  }
+  // below 10% a whole number would just read as 0%
+  return (p > 0 && p < 10 ? p.toFixed(1) : String(Math.round(p))) + '%'
+}
+
+export function getUsageLevel (percent) {
+  if (percent === null || percent === undefined || !isFinite(percent)) {
+    return 'unknown'
+  }
+  if (percent >= CONTEXT_DANGER_PERCENT) {
+    return 'danger'
+  }
+  if (percent >= CONTEXT_WARN_PERCENT) {
+    return 'warn'
+  }
+  return 'ok'
+}

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

@@ -10,6 +10,7 @@ import {
   FlagFilled
 } from '@ant-design/icons'
 import getBrand from './get-brand'
+import CopyIcon from './copy-icon'
 
 const e = window.translate
 
@@ -160,6 +161,9 @@ export default function AIOutput ({ item }) {
             <>
               {renderBrand()}
               <ReactMarkdown {...mdProps} />
+              <div className='ai-output-actions'>
+                <CopyIcon text={response} />
+              </div>
             </>
             )}
       </div>

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

@@ -6,7 +6,7 @@ export const defaultAIPresets = [
     apiPathAI: '/chat/completions',
     modelAI: 'deepseek-v4-flash-0731',
     authHeaderNameAI: 'Authorization: Bearer',
-    siteUrl: 'https://fluxionai.world/register?aff=7H7DERHU3GFF&utm_source=github&utm_medium=link&utm_campaign=electerm'
+    siteUrl: 'https://fluxionai.world/register?source=github&campaign=electerm-20260923&promo=ELECTERM&aff=7H7DERHU3GFF'
   },
   {
     id: 'atlascloud',