@electerm/electerm-react 3.11.12 → 3.12.0

package/client/common/bookmark-schemas.js

@@ -96,7 +96,8 @@ export const serialBookmarkSchema = {
   xon: z.boolean().optional().describe('XON flow control'),
   xoff: z.boolean().optional().describe('XOFF flow control'),
   xany: z.boolean().optional().describe('XANY flow control'),
-  lineEnding: z.enum(['', '\r', '\n', '\r\n']).optional().describe('Line ending for Enter key: "" (none), "\\r" (CR), "\\n" (LF), "\\r\\n" (CR+LF)'),
+  txLineEnding: z.enum(['\r', '\n', '\r\n']).optional().describe('TX line ending appended on Enter: "\\r" (CR, default), "\\n" (LF), "\\r\\n" (CR+LF)'),
+  rxLineEnding: z.enum(['none', 'lf_to_crlf', 'cr_to_crlf']).optional().describe('RX line ending conversion: "none" (pass-through, default), "lf_to_crlf" (LF→CRLF for LF-only devices), "cr_to_crlf" (CR→CRLF for CR-only devices)'),
   description: z.string().optional().describe('Bookmark description')
 }
 

package/client/common/constants.js

@@ -180,13 +180,21 @@ export const commonParities = [
   'none', 'even', 'mark', 'odd', 'space'
 ]
 
-export const commonLineEndings = [
-  { value: '', label: 'none' },
+export const commonTxLineEndings = [
   { value: '\r', label: 'CR' },
   { value: '\n', label: 'LF' },
   { value: '\r\n', label: 'CR+LF' }
 ]
 
+export const commonRxLineEndings = [
+  { value: 'none', label: 'None' },
+  { value: 'lf_to_crlf', label: 'LF→CRLF' },
+  { value: 'cr_to_crlf', label: 'CR→CRLF' }
+]
+
+// backward compat alias
+export const commonLineEndings = commonTxLineEndings
+
 export const maxBatchInput = 30
 export const windowControlWidth = 94
 export const baseUpdateCheckUrls = [
@@ -248,6 +256,7 @@ export const proxyHelpLink = 'https://github.com/electerm/electerm/wiki/proxy-fo
 export const regexHelpLink = 'https://github.com/electerm/electerm/wiki/Terminal-keywords-highlight-regular-expression-exmaples'
 export const connectionHoppingWikiLink = 'https://github.com/electerm/electerm/wiki/Connection-Hopping-Behavior-Change-in-electerm-since-v1.50.65'
 export const aiConfigWikiLink = 'https://github.com/electerm/electerm/wiki/AI-model-config-guide'
+export const aiChatModeLsKey = 'ai-chat-mode'
 export const modals = {
   hide: 0,
   setting: 1

package/client/components/ai/agent-tools.js

@@ -118,6 +118,23 @@ export const agentTools = [
       }
     }
   },
+  {
+    type: 'function',
+    function: {
+      name: 'close_tab',
+      description: 'Close a terminal tab by its ID. Use this to clean up tabs after a task is finished.',
+      parameters: {
+        type: 'object',
+        properties: {
+          tabId: {
+            type: 'string',
+            description: 'The tab ID to close.'
+          }
+        },
+        required: ['tabId']
+      }
+    }
+  },
   {
     type: 'function',
     function: {
@@ -153,6 +170,170 @@ export const agentTools = [
       description: 'Create a new bookmark. Specify the type and provide type-specific fields. Supported types: ' + Object.keys(bookmarkSchemas).join(', ') + '.',
       parameters: buildAddBookmarkParameters()
     }
+  },
+  {
+    type: 'function',
+    function: {
+      name: 'open_tab',
+      description: 'Open a terminal tab directly with connection parameters without creating a bookmark. Supported types: ' + Object.keys(bookmarkSchemas).join(', ') + '.',
+      parameters: buildAddBookmarkParameters()
+    }
+  },
+  {
+    type: 'function',
+    function: {
+      name: 'sftp_list',
+      description: 'List files and directories at a remote path via SFTP. Requires an SSH/FTP tab.',
+      parameters: {
+        type: 'object',
+        properties: {
+          remotePath: {
+            type: 'string',
+            description: 'Remote directory path to list.'
+          },
+          tabId: {
+            type: 'string',
+            description: 'SSH/FTP tab ID. Omit to use the active tab.'
+          }
+        },
+        required: ['remotePath']
+      }
+    }
+  },
+  {
+    type: 'function',
+    function: {
+      name: 'sftp_stat',
+      description: 'Get file/directory stats (size, permissions, etc.) at a remote path via SFTP.',
+      parameters: {
+        type: 'object',
+        properties: {
+          remotePath: {
+            type: 'string',
+            description: 'Remote path to stat.'
+          },
+          tabId: {
+            type: 'string',
+            description: 'SSH/FTP tab ID. Omit to use the active tab.'
+          }
+        },
+        required: ['remotePath']
+      }
+    }
+  },
+  {
+    type: 'function',
+    function: {
+      name: 'sftp_read_file',
+      description: 'Read the contents of a remote file via SFTP.',
+      parameters: {
+        type: 'object',
+        properties: {
+          remotePath: {
+            type: 'string',
+            description: 'Remote file path to read.'
+          },
+          tabId: {
+            type: 'string',
+            description: 'SSH/FTP tab ID. Omit to use the active tab.'
+          }
+        },
+        required: ['remotePath']
+      }
+    }
+  },
+  {
+    type: 'function',
+    function: {
+      name: 'sftp_del',
+      description: 'Delete a remote file or directory via SFTP.',
+      parameters: {
+        type: 'object',
+        properties: {
+          remotePath: {
+            type: 'string',
+            description: 'Remote file or directory path to delete.'
+          },
+          tabId: {
+            type: 'string',
+            description: 'SSH/FTP tab ID. Omit to use the active tab.'
+          }
+        },
+        required: ['remotePath']
+      }
+    }
+  },
+  {
+    type: 'function',
+    function: {
+      name: 'sftp_upload',
+      description: 'Upload a local file to a remote server via SFTP.',
+      parameters: {
+        type: 'object',
+        properties: {
+          localPath: {
+            type: 'string',
+            description: 'Local file path to upload.'
+          },
+          remotePath: {
+            type: 'string',
+            description: 'Remote destination path.'
+          },
+          tabId: {
+            type: 'string',
+            description: 'SSH/FTP tab ID. Omit to use the active tab.'
+          }
+        },
+        required: ['localPath', 'remotePath']
+      }
+    }
+  },
+  {
+    type: 'function',
+    function: {
+      name: 'sftp_download',
+      description: 'Download a remote file to a local path via SFTP.',
+      parameters: {
+        type: 'object',
+        properties: {
+          remotePath: {
+            type: 'string',
+            description: 'Remote file path to download.'
+          },
+          localPath: {
+            type: 'string',
+            description: 'Local destination path.'
+          },
+          tabId: {
+            type: 'string',
+            description: 'SSH/FTP tab ID. Omit to use the active tab.'
+          }
+        },
+        required: ['remotePath', 'localPath']
+      }
+    }
+  },
+  {
+    type: 'function',
+    function: {
+      name: 'sftp_transfer_list',
+      description: 'List current active SFTP file transfers.',
+      parameters: {
+        type: 'object',
+        properties: {}
+      }
+    }
+  },
+  {
+    type: 'function',
+    function: {
+      name: 'sftp_transfer_history',
+      description: 'List past SFTP file transfer history.',
+      parameters: {
+        type: 'object',
+        properties: {}
+      }
+    }
   }
 ]
 
@@ -178,6 +359,8 @@ export async function executeToolCall (toolName, args) {
       return JSON.stringify(store.mcpGetActiveTab())
     case 'switch_tab':
       return JSON.stringify(store.mcpSwitchTab(args))
+    case 'close_tab':
+      return JSON.stringify(store.mcpCloseTab(args))
     case 'list_bookmarks':
       return JSON.stringify(store.mcpListBookmarks())
     case 'open_bookmark':
@@ -187,6 +370,27 @@ export async function executeToolCall (toolName, args) {
       const typeFields = args[type] || {}
       return JSON.stringify(await store.mcpAddBookmark({ type, ...typeFields }))
     }
+    case 'open_tab': {
+      const { type } = args
+      const typeFields = args[type] || {}
+      return JSON.stringify(store.mcpOpenTab({ type, ...typeFields }))
+    }
+    case 'sftp_list':
+      return JSON.stringify(await store.mcpSftpList(args))
+    case 'sftp_stat':
+      return JSON.stringify(await store.mcpSftpStat(args))
+    case 'sftp_read_file':
+      return JSON.stringify(await store.mcpSftpReadFile(args))
+    case 'sftp_del':
+      return JSON.stringify(await store.mcpSftpDel(args))
+    case 'sftp_upload':
+      return JSON.stringify(await store.mcpSftpUpload(args))
+    case 'sftp_download':
+      return JSON.stringify(await store.mcpSftpDownload(args))
+    case 'sftp_transfer_list':
+      return JSON.stringify(store.mcpSftpTransferList())
+    case 'sftp_transfer_history':
+      return JSON.stringify(store.mcpSftpTransferHistory())
     default:
       throw new Error(`Unknown agent tool: ${toolName}`)
   }

package/client/components/ai/agent.js

@@ -1,6 +1,6 @@
 import { agentTools, executeToolCall } from './agent-tools'
 
-const MAX_ITERATIONS = 15
+const MAX_ITERATIONS = 150
 
 function buildAgentSystemPrompt (config) {
   const lang = config.languageAI || window.store.getLangName()
@@ -12,12 +12,14 @@ You are operating inside electerm, a terminal/SSH client. You have access to too
 - Open new terminal tabs (local or SSH)
 - Manage bookmarks (create, list, open connections)
 - Switch between tabs
+- Transfer files via SFTP (upload, download, list, read, delete remote files)
 
 When the user asks you to perform terminal operations, use the available tools.
 Always explain what you are doing before executing commands.
 If a command produces errors, analyze the output and try to fix the issue.
 Prefer using the active terminal unless the user specifies otherwise.
-For SSH connections, create a bookmark and open it rather than running ssh directly.
+For SSH connections, prefer using open_tab to connect directly, or create a bookmark with add_bookmark and open it with open_bookmark if the user wants to save the connection.
+For file transfers, use the sftp_upload and sftp_download tools. The tab must be an SSH/FTP connection with SFTP initialized.
 
 Reply in ${lang} language.`
 }
@@ -43,7 +45,7 @@ async function callBackendAIchatWithTools (messages, config) {
   )
 }
 
-export async function runAgentLoop (chatEntry, config, abortRef) {
+export async function runAgentLoop (chatEntry, config, abortRef, setIsStreaming) {
   const messages = [
     { role: 'system', content: buildAgentSystemPrompt(config) },
     { role: 'user', content: chatEntry.prompt }
@@ -51,16 +53,16 @@ export async function runAgentLoop (chatEntry, config, abortRef) {
   const toolCallsLog = []
   let accumulatedContent = ''
 
+  setIsStreaming(true)
   updateChatEntry(chatEntry, {
-    isStreaming: true,
     toolCalls: [],
     response: ''
   })
 
   for (let iteration = 0; iteration < MAX_ITERATIONS; iteration++) {
     if (abortRef && abortRef.current) {
+      setIsStreaming(false)
       updateChatEntry(chatEntry, {
-        isStreaming: false,
         response: accumulatedContent + '\n\n*(Agent stopped by user)*'
       })
       return
@@ -69,8 +71,8 @@ export async function runAgentLoop (chatEntry, config, abortRef) {
     const result = await callBackendAIchatWithTools(messages, config)
 
     if (result.error) {
+      setIsStreaming(false)
       updateChatEntry(chatEntry, {
-        isStreaming: false,
         response: accumulatedContent + `\n\n**Error:** ${result.error}`
       })
       return
@@ -78,8 +80,8 @@ export async function runAgentLoop (chatEntry, config, abortRef) {
 
     const assistantMessage = result.message
     if (!assistantMessage) {
+      setIsStreaming(false)
       updateChatEntry(chatEntry, {
-        isStreaming: false,
         response: accumulatedContent || 'No response from AI.'
       })
       return
@@ -95,8 +97,8 @@ export async function runAgentLoop (chatEntry, config, abortRef) {
     }
 
     if (!assistantMessage.tool_calls || assistantMessage.tool_calls.length === 0) {
+      setIsStreaming(false)
       updateChatEntry(chatEntry, {
-        isStreaming: false,
         response: accumulatedContent
       })
       return
@@ -104,8 +106,8 @@ export async function runAgentLoop (chatEntry, config, abortRef) {
 
     for (const toolCall of assistantMessage.tool_calls) {
       if (abortRef && abortRef.current) {
+        setIsStreaming(false)
         updateChatEntry(chatEntry, {
-          isStreaming: false,
           response: accumulatedContent + '\n\n*(Agent stopped by user)*'
         })
         return
@@ -152,8 +154,8 @@ export async function runAgentLoop (chatEntry, config, abortRef) {
     }
   }
 
+  setIsStreaming(false)
   updateChatEntry(chatEntry, {
-    isStreaming: false,
     response: accumulatedContent + '\n\n*(Agent reached maximum iterations)*'
   })
 }

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

@@ -18,13 +18,11 @@ import { copy } from '../../common/clipboard'
 
 export default function AIChatHistoryItem ({ item }) {
   const [showOutput, setShowOutput] = useState(true)
-  const startedRef = useRef(false)
+  const [isStreaming, setIsStreaming] = useState(false)
   const abortRef = useRef(false)
   const {
     prompt,
-    isStreaming,
     sessionId,
-    response,
     modelAI,
     roleAI,
     baseURLAI,
@@ -60,12 +58,11 @@ export default function AIChatHistoryItem ({ item }) {
       const index = window.store.aiChatHistory.findIndex(i => i.id === item.id)
       if (index !== -1) {
         window.store.aiChatHistory[index].response = streamResponse.content || ''
-        window.store.aiChatHistory[index].isStreaming = streamResponse.hasMore
         window.store.aiChatHistory = [...window.store.aiChatHistory]
-
-        if (streamResponse.hasMore) {
-          setTimeout(() => pollStreamContent(sid), 200)
-        }
+      }
+      setIsStreaming(streamResponse.hasMore)
+      if (streamResponse.hasMore) {
+        setTimeout(() => pollStreamContent(sid), 200)
       }
     } catch (error) {
       window.store.removeAiHistory(item.id)
@@ -93,9 +90,9 @@ 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].isStreaming = true
           window.store.aiChatHistory[index].sessionId = aiResponse.sessionId
           window.store.aiChatHistory[index].response = aiResponse.content || ''
         }
@@ -104,7 +101,6 @@ export default function AIChatHistoryItem ({ item }) {
         const index = window.store.aiChatHistory.findIndex(i => i.id === item.id)
         if (index !== -1) {
           window.store.aiChatHistory[index].response = aiResponse.response
-          window.store.aiChatHistory[index].isStreaming = false
         }
       }
     } catch (error) {
@@ -124,12 +120,15 @@ export default function AIChatHistoryItem ({ item }) {
       proxyAI,
       languageAI
     }
-    await runAgentLoop(item, config, abortRef)
+    await runAgentLoop(item, config, abortRef, setIsStreaming)
   }, [modelAI, roleAI, baseURLAI, apiPathAI, apiKeyAI, proxyAI, languageAI, item.id])
 
   useEffect(() => {
-    if (!response && !startedRef.current) {
-      startedRef.current = true
+    if (item.pending) {
+      const index = window.store.aiChatHistory.findIndex(i => i.id === item.id)
+      if (index !== -1) {
+        window.store.aiChatHistory[index].pending = false
+      }
       if (mode === 'agent') {
         startAgentRequest()
       } else {
@@ -142,22 +141,14 @@ export default function AIChatHistoryItem ({ item }) {
     e.stopPropagation()
     if (mode === 'agent') {
       abortRef.current = true
-      const index = window.store.aiChatHistory.findIndex(i => i.id === item.id)
-      if (index !== -1) {
-        window.store.aiChatHistory[index].isStreaming = false
-        window.store.aiChatHistory = [...window.store.aiChatHistory]
-      }
+      setIsStreaming(false)
       return
     }
     if (!sessionId) return
 
     try {
       await window.pre.runGlobalAsync('stopStream', sessionId)
-      const index = window.store.aiChatHistory.findIndex(i => i.id === item.id)
-      if (index !== -1) {
-        window.store.aiChatHistory[index].isStreaming = false
-        window.store.aiChatHistory = [...window.store.aiChatHistory]
-      }
+      setIsStreaming(false)
     } catch (error) {
       console.error('Error stopping stream:', error)
     }

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

@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect } from 'react'
-import { Flex, Input, Segmented } from 'antd'
+import { Flex, Input, Popconfirm, Segmented } from 'antd'
 import TabSelect from '../footer/tab-select'
 import AiChatHistory from './ai-chat-history'
 import uid from '../../common/uid'
@@ -10,8 +10,10 @@ import {
   UnorderedListOutlined
 } from '@ant-design/icons'
 import {
-  aiConfigWikiLink
+  aiConfigWikiLink,
+  aiChatModeLsKey
 } from '../../common/constants'
+import { getItem, setItem } from '../../common/safe-local-storage.js'
 import HelpIcon from '../common/help-icon'
 import { refsStatic } from '../common/ref'
 import './ai.styl'
@@ -21,13 +23,19 @@ const MAX_HISTORY = 100
 
 export default function AIChat (props) {
   const [prompt, setPrompt] = useState('')
-  const [mode, setMode] = useState('ask')
+  const [mode, setMode] = useState(() => getItem(aiChatModeLsKey) || 'ask')
   const isAgent = mode === 'agent'
 
   function handlePromptChange (e) {
     setPrompt(e.target.value)
   }
 
+  function handleModeChange (val) {
+    const m = val === 'Ask' ? 'ask' : 'agent'
+    setItem(aiChatModeLsKey, m)
+    setMode(m)
+  }
+
   const handleSubmit = useCallback(function () {
     if (window.store.aiConfigMissing()) {
       window.store.toggleAIConfig()
@@ -39,6 +47,7 @@ export default function AIChat (props) {
       prompt,
       response: '',
       isStreaming: false,
+      pending: true,
       sessionId: null,
       mode,
       toolCalls: [],
@@ -146,7 +155,7 @@ export default function AIChat (props) {
             <Segmented
               options={['Ask', 'Agent']}
               value={mode === 'ask' ? 'Ask' : 'Agent'}
-              onChange={(val) => setMode(val === 'Ask' ? 'ask' : 'agent')}
+              onChange={handleModeChange}
               size='small'
             />
             {renderTabSelect()}
@@ -154,11 +163,17 @@ export default function AIChat (props) {
               onClick={toggleConfig}
               className='mg1l pointer icon-hover toggle-ai-setting-icon'
             />
-            <UnorderedListOutlined
-              onClick={clearHistory}
-              className='mg2x pointer clear-ai-icon icon-hover'
-              title='Clear AI chat history'
-            />
+            <Popconfirm
+              title={window.translate('clear') + ' AI ' + window.translate('history') + '?'}
+              okText={window.translate('ok')}
+              cancelText={window.translate('cancel')}
+              onConfirm={clearHistory}
+            >
+              <UnorderedListOutlined
+                className='mg2x pointer clear-ai-icon icon-hover'
+                title='Clear AI chat history'
+              />
+            </Popconfirm>
             <HelpIcon
               link={aiConfigWikiLink}
             />

package/client/components/bookmark-form/bookmark-schema.js

@@ -81,7 +81,8 @@ const bookmarkSchema = {
     xon: 'boolean - enable XON flow control, default is false',
     xoff: 'boolean - enable XOFF flow control, default is false',
     xany: 'boolean - enable XANY flow control, default is false',
-    lineEnding: 'string - line ending for Enter key: "" (none), "\\r" (CR), "\\n" (LF), "\\r\\n" (CR+LF)',
+    txLineEnding: 'string - TX line ending on Enter: "\\r" (CR, default), "\\n" (LF), "\\r\\n" (CR+LF)',
+    rxLineEnding: 'string - RX line ending conversion: "none" (default), "lf_to_crlf" (for LF-only devices), "cr_to_crlf" (for CR-only devices)',
     runScripts: 'array - run scripts after connected ({delay,script})',
     description: 'string - bookmark description'
   },

package/client/components/bookmark-form/config/serial.js

@@ -1,5 +1,5 @@
 import { formItemLayout } from '../../../common/form-layout.js'
-import { terminalSerialType, commonBaudRates, commonDataBits, commonStopBits, commonParities, commonLineEndings } from '../../../common/constants.js'
+import { terminalSerialType, commonBaudRates, commonDataBits, commonStopBits, commonParities, commonTxLineEndings, commonRxLineEndings } from '../../../common/constants.js'
 import defaultSettings from '../../../common/default-setting.js'
 import { createBaseInitValues, getTerminalBackgroundDefaults } from '../common/init-values.js'
 import { commonFields } from './common-fields.js'
@@ -57,7 +57,8 @@ const serialConfig = {
         { type: 'switch', name: 'xon', label: 'xon', valuePropName: 'checked' },
         { type: 'switch', name: 'xoff', label: 'xoff', valuePropName: 'checked' },
         { type: 'switch', name: 'xany', label: 'xany', valuePropName: 'checked' },
-        { type: 'select', name: 'lineEnding', label: 'lineEnding', options: commonLineEndings.map(d => ({ value: d.value, label: d.label })) },
+        { type: 'select', name: 'txLineEnding', label: 'txLineEnding', options: commonTxLineEndings.map(d => ({ value: d.value, label: d.label })) },
+        { type: 'select', name: 'rxLineEnding', label: 'rxLineEnding', options: commonRxLineEndings.map(d => ({ value: d.value, label: d.label })) },
         commonFields.runScripts,
         commonFields.description,
         { type: 'input', name: 'type', label: 'type', hidden: true }

package/client/components/footer/cmd-history.jsx

@@ -105,17 +105,11 @@ export default auto(function CmdHistory (props) {
     ))
   }
 
-  const content = (
-    <div className='cmd-history-popover-content pd2'>
-      <div className='cmd-history-search pd2b'>
-        <InputAutoFocus
-          value={keyword}
-          onChange={handleChange}
-          placeholder={e('search')}
-          className='cmd-history-search-input'
-          allowClear
-        />
-      </div>
+  function renderHeader () {
+    if (!historyArray.length) {
+      return null
+    }
+    return (
       <div className='cmd-history-header pd2b'>
         <Switch
           checkedChildren={e('sortByFrequency')}
@@ -130,6 +124,21 @@ export default auto(function CmdHistory (props) {
           onClick={handleClearAll}
         />
       </div>
+    )
+  }
+
+  const content = (
+    <div className='cmd-history-popover-content pd2'>
+      <div className='cmd-history-search pd2b'>
+        <InputAutoFocus
+          value={keyword}
+          onChange={handleChange}
+          placeholder={e('search')}
+          className='cmd-history-search-input'
+          allowClear
+        />
+      </div>
+      {renderHeader()}
       <div className='cmd-history-list'>
         {renderList()}
       </div>

package/client/components/shortcuts/shortcut-handler.js

@@ -82,6 +82,7 @@ export function handleTerminalSelectionReplace (event, ctx) {
   }
 
   ctx.term.clearSelection()
+  ctx.term.scrollToBottom()
   return true
 }
 
@@ -167,6 +168,7 @@ export function shortcutExtend (Cls) {
       const altDelDelKey = delKey === 8 ? 127 : 8
       const char = String.fromCharCode(shiftKey ? delKey : altDelDelKey)
       this.socket.send(char)
+      this.term.scrollToBottom()
       return false
     } else if (
       this.term &&
@@ -193,6 +195,11 @@ export function shortcutExtend (Cls) {
         this.trzszClient.cancel()
         return false
       }
+      // Cancel xmodem transfer if active
+      if (this.xmodemClient && this.xmodemClient.isActive) {
+        this.xmodemClient.cancel()
+        return false
+      }
     }
 
     let codeName

package/client/components/sidebar/history.jsx

@@ -38,6 +38,21 @@ export default auto(function HistoryPanel (props) {
     store.clearHistory()
   }
   const e = window.translate
+  function renderHeader () {
+    if (!arr.length) {
+      return null
+    }
+    return (
+      <div className='history-header pd2x pd2b'>
+        <Switch
+          {...switchProps}
+        />
+        <UnorderedListOutlined
+          {...clearIconProps}
+        />
+      </div>
+    )
+  }
   const switchProps = {
     checkedChildren: e('sortByFrequency'),
     unCheckedChildren: e('sortByFrequency'),
@@ -54,14 +69,7 @@ export default auto(function HistoryPanel (props) {
     <div
       className='sidebar-panel-history'
     >
-      <div className='history-header pd2x pd2b'>
-        <Switch
-          {...switchProps}
-        />
-        <UnorderedListOutlined
-          {...clearIconProps}
-        />
-      </div>
+      {renderHeader()}
       <div className='history-body'>
         {
           arr.map((item, i) => {