@electerm/electerm-react 3.15.159 → 3.15.161

package/client/components/ai/agent.js

@@ -1,11 +1,12 @@
 import { agentTools, executeToolCall } from './agent-tools'
+import { appendMandatoryGuardrails } from './ai-guardrails'
 
 const MAX_ITERATIONS = 150
 
 function buildAgentSystemPrompt (config) {
   const lang = config.languageAI || window.store.getLangName()
   const baseRole = config.roleAI || 'You are a helpful assistant.'
-  return `${baseRole}
+  return appendMandatoryGuardrails(`${baseRole}
 
 You are operating inside electerm, a terminal/SSH client. You have access to tools that let you:
 - Run commands in terminal tabs and read their output
@@ -21,7 +22,7 @@ Prefer using the active terminal unless the user specifies otherwise.
 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.`
+Reply in ${lang} language.`)
 }
 
 function updateChatEntry (chatEntry, updates) {

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

@@ -3,6 +3,7 @@ import AIOutput from './ai-output'
 import AIStopIcon from './ai-stop-icon'
 import AgentToolCallCard from './agent-tool-call-card'
 import { runAgentLoop } from './agent'
+import { appendMandatoryGuardrails } from './ai-guardrails'
 import {
   Alert,
   Tooltip
@@ -42,7 +43,7 @@ export default function AIChatHistoryItem ({ item }) {
 
   function buildRole () {
     const lang = languageAI || window.store.getLangName()
-    return roleAI + `;用[${lang}]回复`
+    return appendMandatoryGuardrails(roleAI + `;用[${lang}]回复`)
   }
 
   const conversationMessages = useMemo(() => {

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

@@ -253,6 +253,9 @@ export default function AIChat (props) {
           {renderSendIcon()}
         </Flex>
       </Flex>
+      {window.et.AIDisclamer && (
+        <div className='ai-disclamer mg1t'>{window.et.AIDisclamer}</div>
+      )}
     </Flex>
   )
 }

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

@@ -18,6 +18,7 @@ import Password from '../common/password'
 import AiHistory, { addHistoryItem } from './ai-history'
 import message from '../common/message'
 import { getAIPresets } from './ai-config-props'
+import { appendMandatoryGuardrails } from './ai-guardrails'
 
 const STORAGE_KEY_CONFIG = 'ai_config_history'
 const EVENT_NAME_CONFIG = 'ai-config-history-update'
@@ -74,7 +75,7 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
         'AIchat',
         'Hi',
         values.modelAI,
-        values.roleAI,
+        appendMandatoryGuardrails(values.roleAI),
         values.baseURLAI,
         values.apiPathAI,
         values.apiKeyAI,
@@ -164,7 +165,14 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
           <Link to={aiConfigWikiLink}>WIKI: {aiConfigWikiLink}</Link>
         }
         type='info'
-        className='mg2y'
+        className='mg2t mg1b'
+      />
+      <Alert
+        title={
+          window.translate('aiWarn')
+        }
+        type='warning'
+        className='mg2b'
       />
       <div className='mg1b alignright'>
         {renderPresetMenu()}

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

@@ -0,0 +1,10 @@
+// Append mandatory guardrails (if configured via window.et.mandatoryGuardrails)
+// to the AI system role as an extra layer of protection. This is typically set
+// by enterprise deployments to enforce policies on every AI request.
+export function appendMandatoryGuardrails (systemContent) {
+  const guardrails = window.et && window.et.mandatoryGuardrails
+  if (!guardrails) {
+    return systemContent
+  }
+  return `${systemContent}\n\n${guardrails}`
+}

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

@@ -2,12 +2,19 @@ import { useRef, useEffect } from 'react'
 import ReactMarkdown from 'react-markdown'
 import { copy } from '../../common/clipboard'
 import Link from '../common/external-link'
-import { Tag } from 'antd'
-import { CopyOutlined, PlayCircleOutlined } from '@ant-design/icons'
+import { Tag, Popconfirm, Button, Alert } from 'antd'
+import {
+  CopyOutlined,
+  PlayCircleOutlined,
+  FlagOutlined,
+  FlagFilled
+} from '@ant-design/icons'
 import getBrand from './get-brand'
 
 const e = window.translate
 
+const enableAIFlag = !!(window.et && window.et.enableAIFlag)
+
 export default function AIOutput ({ item }) {
   const outputRef = useRef(null)
   const {
@@ -23,7 +30,7 @@ export default function AIOutput ({ item }) {
     }
   }, [response])
 
-  if (!response) {
+  if (!response && !(item.flagged && enableAIFlag)) {
     return null
   }
 
@@ -89,6 +96,38 @@ export default function AIOutput ({ item }) {
     )
   }
 
+  function handleToggleFlag () {
+    const index = window.store.aiChatHistory.findIndex(i => i.id === item.id)
+    if (index === -1) {
+      return
+    }
+    window.store.aiChatHistory[index].flagged = !window.store.aiChatHistory[index].flagged
+    window.store.aiChatHistory = [...window.store.aiChatHistory]
+  }
+
+  function renderFlag () {
+    if (!enableAIFlag) {
+      return null
+    }
+    return (
+      <div className={'ai-stream-output-flag' + (item.flagged ? ' is-flagged' : '')}>
+        <Popconfirm
+          title={item.flagged ? 'Remove the harmful-info flag?' : 'Flag this as harmful info?'}
+          okText='Confirm'
+          cancelText='Cancel'
+          onConfirm={handleToggleFlag}
+        >
+          <Button
+            size='small'
+            type='text'
+            icon={item.flagged ? <FlagFilled /> : <FlagOutlined />}
+            onClick={(evt) => evt.stopPropagation()}
+          />
+        </Popconfirm>
+      </div>
+    )
+  }
+
   function renderBrand () {
     if (!brand) {
       return null
@@ -113,9 +152,16 @@ export default function AIOutput ({ item }) {
 
   return (
     <div className='ai-stream-output' ref={outputRef}>
+      {renderFlag()}
       <div className='pd1'>
-        {renderBrand()}
-        <ReactMarkdown {...mdProps} />
+        {item.flagged && enableAIFlag
+          ? <Alert type='warning' message='user flagged as harmful info' />
+          : (
+            <>
+              {renderBrand()}
+              <ReactMarkdown {...mdProps} />
+            </>
+            )}
       </div>
     </div>
   )

package/client/components/ai/ai.styl

@@ -33,8 +33,17 @@
     //     display block
 
 .ai-stream-output
+  position relative
   max-height 400px
   overflow-y auto
+  &::-webkit-scrollbar-thumb
+    background var(--main-dark)
+.ai-stream-output-flag
+  position absolute
+  top 13px
+  right 10px
+  z-index 10
+
 
 .ai-chat-input
   position relative
@@ -52,6 +61,9 @@
     z-index 1
     font-size 16px
 
+.ai-disclamer
+  font-size 12px
+
 .code-block
   width 100%
   pre
@@ -69,6 +81,7 @@
 
 .ai-chat-sessions-wrap
   width 100%
+  height 100%
   overflow-y auto
   overflow-x hidden
   padding 4px 0

package/client/components/bookmark-form/ai-bookmark-form.jsx

@@ -18,6 +18,7 @@ import {
 import SimpleEditor from '../text-editor/simple-editor'
 import { copy } from '../../common/clipboard'
 import download from '../../common/download'
+import { appendMandatoryGuardrails } from '../ai/ai-guardrails'
 import AICategorySelect from './common/ai-category-select.jsx'
 import HelpIcon from '../common/help-icon'
 import Modal from '../common/modal.jsx'
@@ -77,7 +78,7 @@ export default function AIBookmarkForm (props) {
         'AIchat',
         prompt,
         config.modelAI,
-        'You are a helpful assistant that generates bookmark configurations in JSON format.',
+        appendMandatoryGuardrails('You are a helpful assistant that generates bookmark configurations in JSON format.'),
         config.baseURLAI,
         config.apiPathAI,
         config.apiKeyAI,

package/client/components/sftp/address-bar.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react'
+import React, { useRef, useEffect, useState } from 'react'
 import {
   ArrowUpOutlined,
   EyeInvisibleFilled,
@@ -7,11 +7,13 @@ import {
   ArrowRightOutlined,
   LoadingOutlined,
   HomeOutlined,
-  PlusOutlined
+  PlusOutlined,
+  MenuOutlined
 } from '@ant-design/icons'
 import {
   Input,
-  Tooltip
+  Tooltip,
+  Popover
 } from 'antd'
 import {
   typeMap
@@ -22,10 +24,11 @@ import KeywordFilter from './keyword-filter'
 
 const e = window.translate
 
-function renderAddonBefore (props, realPath) {
+function AddressPrefixIcons (props) {
   const {
     type,
-    host
+    host,
+    realPath
   } = props
   const isShow = props[`${type}ShowHiddenFile`]
   const title = `${isShow ? e('hide') : e('show')} ${e('hfd')}`
@@ -75,6 +78,37 @@ function renderAddonBefore (props, realPath) {
   )
 }
 
+function MobileAddressPrefix (props) {
+  const [open, setOpen] = useState(false)
+  const content = (
+    <div className='sftp-addr-menu-content'>
+      <AddressPrefixIcons {...props} />
+    </div>
+  )
+  return (
+    <Popover
+      content={content}
+      trigger='click'
+      placement='bottomLeft'
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <MenuOutlined className='sftp-addr-menu-icon' />
+    </Popover>
+  )
+}
+
+function renderAddonBefore (props, realPath) {
+  if (window.store.isMobile) {
+    return (
+      <MobileAddressPrefix {...props} realPath={realPath} />
+    )
+  }
+  return (
+    <AddressPrefixIcons {...props} realPath={realPath} />
+  )
+}
+
 function renderAddonAfter (isLoadingRemote, onGoto, GoIcon, type, handleUploadFromBrowser) {
   const handleClick = (e) => {
     e.stopPropagation()

package/client/components/sftp/list-table-ui.jsx

@@ -137,6 +137,23 @@ export default class FileListTable extends Component {
     ]
   }
 
+  /**
+   * In mobile mode, only show the file name to save horizontal space.
+   * Returns the effective properties used for rendering both the
+   * table header and individual file items.
+   */
+  getRenderProperties = () => {
+    if (window.store.isMobile) {
+      return [{
+        id: 'name',
+        max: 98,
+        min: 2,
+        size: 100
+      }]
+    }
+    return this.state.properties
+  }
+
   getPropsAll = () => {
     return [
       'name',
@@ -179,7 +196,7 @@ export default class FileListTable extends Component {
       onContextMenu: this.onContextMenu,
       onClickName: this.onClickName,
       onResize: this.onResize,
-      properties: this.state.properties,
+      properties: this.getRenderProperties(),
       sortDirection: this.props.sortDirection,
       sortProp: this.props.sortProp,
       maxWidth: this.props.width
@@ -274,7 +291,7 @@ export default class FileListTable extends Component {
     const fileProps = {
       ...this.props.getFileProps(item, type),
       cls,
-      properties: this.state.properties,
+      properties: this.getRenderProperties(),
       setClickFileId: this.setClickFileId
     }
     return (

package/client/components/sftp/sftp-entry.jsx

@@ -1211,7 +1211,7 @@ export default class Sftp extends Component {
   renderSftpPanelTitle (type, username, host) {
     if (type === typeMap.remote) {
       return (
-        <div className='sftp-panel-title pd1t pd1b pd1x alignright'>
+        <div className='sftp-panel-title pd1t pd1b pd1x alignright elli'>
           <ReloadOutlined
             className='mg1r pointer'
             onClick={this.handleReloadRemoteSftp}

package/client/components/sftp/sftp.styl

@@ -185,3 +185,17 @@
   &:hover
   &.active
     color var(--success)
+
+.sftp-addr-menu-icon
+  cursor pointer
+  font-size 14px
+  color var(--text)
+  &:hover
+    color var(--text-light)
+
+.sftp-addr-menu-content
+  display flex
+  align-items center
+  padding 4px 0
+  flex-wrap wrap
+  gap 4px

package/client/components/terminal/terminal-command-dropdown.jsx

@@ -2,6 +2,7 @@ import { Component } from 'manate/react/class-components'
 import { refsStatic, refs } from '../common/ref'
 import SuggestionItem from './cmd-item'
 import { aiSuggestionsCache } from '../../common/cache'
+import { appendMandatoryGuardrails } from '../ai/ai-guardrails'
 import classnames from 'classnames'
 import {
   LoadingOutlined
@@ -67,7 +68,7 @@ export default class TerminalCmdSuggestions extends Component {
       'AIchat',
       prompt,
       config.modelAI,
-      config.roleAI,
+      appendMandatoryGuardrails(config.roleAI),
       config.baseURLAI,
       config.apiPathAI,
       config.apiKeyAI,

package/client/css/mobile.styl

@@ -132,3 +132,22 @@
       margin-inline-end 0
       &::before
         display none
+
+  // ---- 7. Terminal info panel button group: on narrow screens the connected
+  //        button row in terminal info panel wraps, but antd styles it as a
+  //        single horizontal strip. When the row wraps, the UI looks broken.
+  //        Convert each button to a standalone pill so wrapping stays tidy.
+  .terminal-info-base
+    .ant-space-compact
+      display flex
+      flex-wrap wrap
+      gap 6px
+      .ant-btn
+        border-radius 3px
+        margin-right 0
+
+  // ---- 8. Upgrade panel: fixed 440px width overflows narrow mobile screens.
+  //        Constrain it to the viewport minus the right offset (10px) and a
+  //        matching left gap so it never extends past the screen edge.
+  .upgrade-panel
+    max-width calc(100vw - 20px)

package/client/store/common.js

@@ -4,6 +4,7 @@
 
 import handleError from '../common/error-handler'
 import Modal from '../components/common/modal'
+import { appendMandatoryGuardrails } from '../components/ai/ai-guardrails'
 import { debounce, some, get, pickBy } from 'lodash-es'
 import {
   leftSidebarWidthKey,
@@ -106,7 +107,7 @@ export default Store => {
 
   Store.prototype.setLeftSidePanelWidth = function (v) {
     ls.setItem(leftSidebarWidthKey, v)
-    window.store.leftSidebarWidth = v
+    window.store._leftSidebarWidth = v
   }
 
   Store.prototype.setAddPanelWidth = function (v) {
@@ -116,7 +117,7 @@ export default Store => {
 
   Store.prototype.setRightSidePanelWidth = function (v) {
     ls.setItem(rightSidebarWidthKey, v)
-    window.store.rightPanelWidth = v
+    window.store._rightPanelWidth = v
   }
   Store.prototype.dismissDelKeyTip = function (v) {
     ls.setItem(dismissDelKeyTipLsKey, 'y')
@@ -322,7 +323,7 @@ export default Store => {
     const firstEntry = sessionEntries[0]
     const lang = firstEntry.languageAI || store.getLangName()
     const messages = [
-      { role: 'system', content: firstEntry.roleAI + `;用[${lang}]回复` }
+      { role: 'system', content: appendMandatoryGuardrails(firstEntry.roleAI + `;用[${lang}]回复`) }
     ]
 
     // Start from the last compress entry to include its summary as context

package/client/store/init-state.js

@@ -123,7 +123,7 @@ export default () => {
     rightPanelVisible: false,
     rightPanelTab: 'info',
     rightPanelPinned: false,
-    rightPanelWidth: parseInt(ls.getItem(rightSidebarWidthKey), 10) || 500,
+    _rightPanelWidth: parseInt(ls.getItem(rightSidebarWidthKey), 10) || 500,
     showAIConfigModal: false,
 
     // for settings related
@@ -164,7 +164,7 @@ export default () => {
 
     // sidebar
     openedSideBar: ls.getItem(openedSidebarKey) || '',
-    leftSidebarWidth: parseInt(ls.getItem(leftSidebarWidthKey), 10) || 300,
+    _leftSidebarWidth: parseInt(ls.getItem(leftSidebarWidthKey), 10) || 300,
     addPanelWidth: parseInt(ls.getItem(addPanelWidthLsKey), 10) || 300,
     menuOpened: false,
     pinned: ls.getItem(sidebarPinnedKey) === 'true',

package/client/store/store.js

@@ -37,7 +37,8 @@ import {
   terminalSshConfigType,
   paneMap,
   staticNewItemTabs,
-  isWin
+  isWin,
+  sidebarWidth
 } from '../common/constants'
 import getInitItem from '../common/init-setting-item'
 import createTitle from '../common/create-title'
@@ -58,6 +59,22 @@ class Store {
     return window.store.innerWidth
   }
 
+  get leftSidebarWidth () {
+    const { store } = window
+    if (store.isMobile) {
+      return Math.min(store.innerWidth - sidebarWidth, 500)
+    }
+    return store._leftSidebarWidth
+  }
+
+  get rightPanelWidth () {
+    const { store } = window
+    if (store.isMobile) {
+      return Math.min(store.innerWidth, 500)
+    }
+    return store._rightPanelWidth
+  }
+
   get config () {
     return deepCopy(window.store._config)
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "3.15.159",
+  "version": "3.15.161",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",