@electerm/electerm-react 1.60.6 → 1.60.18

package/client/common/constants.js

@@ -307,6 +307,7 @@ export const batchOpHelpLink = 'https://github.com/electerm/electerm/wiki/batch-
 export const proxyHelpLink = 'https://github.com/electerm/electerm/wiki/proxy-format'
 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 modals = {
   hide: 0,
   setting: 1,

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

@@ -11,6 +11,10 @@ import {
   SendOutlined,
   UnorderedListOutlined
 } from '@ant-design/icons'
+import {
+  aiConfigWikiLink
+} from '../../common/constants'
+import HelpIcon from '../common/help-icon'
 import './ai.styl'
 
 const { TextArea } = Input
@@ -152,7 +156,11 @@ export default function AIChat (props) {
             />
             <UnorderedListOutlined
               onClick={clearHistory}
-              className='mg2l pointer clear-ai-icon icon-hover'
+              className='mg2x pointer clear-ai-icon icon-hover'
+              title='Clear AI chat history'
+            />
+            <HelpIcon
+              link={aiConfigWikiLink}
             />
             {renderConfig()}
           </Flex>

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

@@ -3,9 +3,14 @@ import {
   Input,
   Button,
   AutoComplete,
-  Modal
+  Modal,
+  Alert
 } from 'antd'
 import { useEffect, useState } from 'react'
+import Link from '../common/external-link'
+import {
+  aiConfigWikiLink
+} from '../../common/constants'
 
 // Comprehensive API provider configurations
 import providers from './providers'
@@ -70,6 +75,13 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
       onCancel={handleCancel}
       footer={null}
     >
+      <Alert
+        message={
+          <Link to={aiConfigWikiLink}>WIKI: {aiConfigWikiLink}</Link>
+        }
+        type='info'
+        className='mg2y'
+      />
       <Form
         form={form}
         onFinish={handleSubmit}

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

@@ -1,47 +1,15 @@
-import React from 'react'
+import { useState, useMemo } 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 providers from './providers'
-
-function getBrand (baseURLAI) {
-  // First, try to match with providers
-  const provider = providers.find(p => p.baseURL === baseURLAI)
-  if (provider) {
-    return {
-      brand: provider.label,
-      brandUrl: provider.homepage
-    }
-  }
-
-  // If no match, extract brand from URL
-  try {
-    const url = new URL(baseURLAI)
-    const hostname = url.hostname
-    const parts = hostname.split('.')
-    let brand = parts[parts.length - 2] // Usually the brand name is the second-to-last part
-
-    // Capitalize the first letter
-    brand = brand.charAt(0).toUpperCase() + brand.slice(1)
-
-    return {
-      brand,
-      brandUrl: `https://${parts[parts.length - 2]}.${parts[parts.length - 1]}`
-    }
-  } catch (error) {
-    // If URL parsing fails, return null
-    return {
-      brand: null,
-      brandUrl: null
-    }
-  }
-}
+import { CopyOutlined, PlayCircleOutlined, DownCircleOutlined } from '@ant-design/icons'
+import getBrand from './get-brand'
 
 const e = window.translate
 
 export default function AIOutput ({ item }) {
+  const [showFull, setShowFull] = useState(false)
   const {
     response,
     baseURLAI
@@ -52,6 +20,18 @@ export default function AIOutput ({ item }) {
 
   const { brand, brandUrl } = getBrand(baseURLAI)
 
+  const truncatedResponse = useMemo(() => {
+    if (!response) return ''
+    const codeBlockRegex = /```[\s\S]*?```/
+    const match = response.match(codeBlockRegex)
+    if (match) {
+      const index = match.index + match[0].length
+      return response.slice(0, index) + '\n\n... ...'
+    }
+    // If no code block found, show first 5 lines
+    return response.split('\n').slice(0, 5).join('\n') + '\n\n... ...'
+  }, [response])
+
   const renderCode = (props) => {
     const { node, className = '', children, ...rest } = props
     const code = String(children).replace(/\n$/, '')
@@ -107,8 +87,22 @@ export default function AIOutput ({ item }) {
     )
   }
 
+  function renderShowMore () {
+    if (showFull) {
+      return null
+    }
+    return (
+      <span
+        onClick={() => setShowFull(true)}
+        className='mg1t pointer'
+      >
+        <DownCircleOutlined /> {e('fullContent')}
+      </span>
+    )
+  }
+
   const mdProps = {
-    children: response,
+    children: showFull ? response : truncatedResponse,
     components: {
       code: renderCode
     }
@@ -118,6 +112,7 @@ export default function AIOutput ({ item }) {
     <div className='pd1'>
       {renderBrand()}
       <ReactMarkdown {...mdProps} />
+      {renderShowMore()}
     </div>
   )
 }

package/client/components/ai/ai.styl

@@ -7,6 +7,7 @@
 
 .ai-chat-history
   flex-grow 1
+  min-height 0
   &::-webkit-scrollbar
     width 0
 .ai-history-wrap

package/client/components/ai/get-brand.js

@@ -0,0 +1,34 @@
+import providers from './providers'
+
+export default function getBrand (baseURLAI) {
+  // First, try to match with providers
+  const provider = providers.find(p => p.baseURL === baseURLAI)
+  if (provider) {
+    return {
+      brand: provider.label,
+      brandUrl: provider.homepage
+    }
+  }
+
+  // If no match, extract brand from URL
+  try {
+    const url = new URL(baseURLAI)
+    const hostname = url.hostname
+    const parts = hostname.split('.')
+    let brand = parts[parts.length - 2] // Usually the brand name is the second-to-last part
+
+    // Capitalize the first letter
+    brand = brand.charAt(0).toUpperCase() + brand.slice(1)
+
+    return {
+      brand,
+      brandUrl: `https://${parts[parts.length - 2]}.${parts[parts.length - 1]}`
+    }
+  } catch (error) {
+    // If URL parsing fails, return null
+    return {
+      brand: null,
+      brandUrl: null
+    }
+  }
+}

package/client/components/bookmark-form/rdp-form-ui.jsx

@@ -105,7 +105,7 @@ export default function RdpFormUi (props) {
         />
         <FormItem
           {...formItemLayout}
-          label={e('userName')}
+          label={e('username')}
           hasFeedback
           name='userName'
           required

package/client/components/main/main.jsx

@@ -99,7 +99,9 @@ export default auto(function Index (props) {
     uiThemeConfig,
     transferHistory,
     transferToConfirm,
-    openResolutionEdit
+    openResolutionEdit,
+    rightPanelTitle,
+    rightPanelTab
   } = store
   const upgradeInfo = deepCopy(store.upgradeInfo)
   const cls = classnames({
@@ -191,7 +193,9 @@ export default auto(function Index (props) {
   const rightPanelProps = {
     rightPanelVisible: store.rightPanelVisible,
     rightPanelPinned: store.rightPanelPinned,
-    rightPanelWidth: store.rightPanelWidth
+    rightPanelWidth: store.rightPanelWidth,
+    title: rightPanelTitle,
+    rightPanelTab
   }
   const terminalInfoProps = {
     ...deepCopy(store.terminalInfoProps),
@@ -222,7 +226,7 @@ export default auto(function Index (props) {
     activeTabId: store.activeTabId,
     showAIConfig: store.showAIConfig
   }
-  const rightPanelContent = store.rightPanelTab === 'ai'
+  const rightPanelContent = rightPanelTab === 'ai'
     ? <AIChat {...aiChatProps} />
     : <TerminalInfo {...terminalInfoProps} />
   return (

package/client/components/side-panel-r/right-side-panel.styl

@@ -3,29 +3,28 @@
 .right-side-panel
   position absolute
   right 0
-  top 0
+  top 36px
   bottom 0
   z-index 200
   background main
   color text-light
   border-left 1px solid darken(main, 30%)
+  &.right-side-panel-pinned
+    top 0
 
   .drag-handle
     left 0
     right auto
     display block
-
+.right-panel-title
+  border-bottom 1px solid darken(main, 30%)
 .right-side-panel-controls
-  position absolute
-  left 10px
-  top 10px
   color text-dark
   font-size 16px
   &:hover
     color text
     cursor pointer
   &.right-side-panel-pin
-    left 30px
     &.pinned
       color success
 .right-side-panel-content
@@ -33,7 +32,7 @@
   overflow-y scroll
   position absolute
   left 0
-  top 30px
+  top 55px
   right 0
   bottom 0
 .animate-fast

package/client/components/side-panel-r/side-panel-r.jsx

@@ -3,20 +3,31 @@ import DragHandle from '../common/drag-handle'
 import './right-side-panel.styl'
 import {
   CloseCircleOutlined,
-  PushpinOutlined
+  PushpinOutlined,
+  InfoCircleOutlined
 } from '@ant-design/icons'
+import {
+  Typography,
+  Flex,
+  Tag
+} from 'antd'
 
 export default memo(function RightSidePanel (
   {
     rightPanelVisible,
     rightPanelPinned,
     rightPanelWidth,
-    children
+    children,
+    title,
+    rightPanelTab
   }
 ) {
   if (!rightPanelVisible) {
     return null
   }
+  const tag = rightPanelTab === 'ai'
+    ? <Tag className='mg1r'>AI</Tag>
+    : <InfoCircleOutlined className='mg1r' />
 
   function onDragEnd (nw) {
     window.store.setRightSidePanelWidth(nw)
@@ -36,7 +47,7 @@ export default memo(function RightSidePanel (
   }
 
   const panelProps = {
-    className: 'right-side-panel animate-fast',
+    className: 'right-side-panel animate-fast' + (rightPanelPinned ? ' right-side-panel-pinned' : ''),
     id: 'right-side-panel',
     style: {
       width: `${rightPanelWidth}px`
@@ -60,13 +71,24 @@ export default memo(function RightSidePanel (
       {...panelProps}
     >
       <DragHandle {...dragProps} />
-      <CloseCircleOutlined
-        className='right-side-panel-close right-side-panel-controls'
-        onClick={onClose}
-      />
-      <PushpinOutlined
-        {...pinProps}
-      />
+      <Flex
+        className='right-panel-title pd2'
+        justify='space-between'
+        align='center'
+      >
+        <Typography.Text level={4} ellipsis style={{ margin: 0, flex: 1 }}>
+          {tag} {title}
+        </Typography.Text>
+        <Flex>
+          <PushpinOutlined
+            {...pinProps}
+          />
+          <CloseCircleOutlined
+            className='right-side-panel-close right-side-panel-controls mg1l'
+            onClick={onClose}
+          />
+        </Flex>
+      </Flex>
       <div className='right-side-panel-content'>
         {children}
       </div>

package/client/components/sidebar/history-item.jsx

@@ -1,3 +1,4 @@
+import React, { useCallback, useEffect, useRef } from 'react'
 import createTitle, { createTitleWithTag } from '../../common/create-title'
 import { DeleteOutlined } from '@ant-design/icons'
 
@@ -7,9 +8,25 @@ export default function HistoryItem (props) {
     item,
     index
   } = props
-  function handleClick () {
-    store.onSelectHistory(item.tab)
-  }
+  const timeoutRef = useRef(null)
+
+  const handleClick = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+    }
+    timeoutRef.current = setTimeout(() => {
+      store.onSelectHistory(item.tab)
+    }, 10)
+  }, [item.tab])
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [])
+
   function handleDelete (e) {
     e.stopPropagation()
     store.history.splice(index, 1)

package/client/components/sidebar/history.jsx

@@ -10,13 +10,16 @@ export default auto(function HistoryPanel (props) {
   const {
     history
   } = store
+  const arr = props.sort
+    ? [...history].sort((a, b) => { return b.count - a.count })
+    : history
   return (
     <div
       className='sidebar-panel-history'
     >
       <div className='pd2x'>
         {
-          history.map((item, i) => {
+          arr.map((item, i) => {
             return (
               <HistoryItem
                 key={item.id}

package/client/components/tabs/index.jsx

@@ -24,9 +24,8 @@ import {
   TwoRowsRightIcon,
   TwoColumnsBottomIcon
 } from '../icons/split-icons'
-import { Dropdown, Popover, Button } from 'antd'
+import { Dropdown, Popover } from 'antd'
 import Tab from './tab'
-import LogoElem from '../common/logo-elem.jsx'
 import './tabs.styl'
 import {
   tabWidth,
@@ -41,6 +40,7 @@ import findParentBySel from '../../common/find-parent'
 import WindowControl from './window-control'
 import BookmarksList from '../sidebar/bookmark-select'
 import AppDrag from './app-drag'
+import NoSession from './no-session'
 import classNames from 'classnames'
 
 const e = window.translate
@@ -548,31 +548,13 @@ export default class Tabs extends React.Component {
   }
 
   renderNoSession = () => {
-    const props = {
-      style: {
-        height: this.props.height + 'px'
-      }
-    }
     return (
-      <div className='no-sessions electerm-logo-bg' {...props}>
-        <Button
-          onClick={this.handleNewTab}
-          size='large'
-          className='mg1r mg1b add-new-tab-btn'
-        >
-          {e('newTab')}
-        </Button>
-        <Button
-          onClick={this.handleNewSsh}
-          size='large'
-          className='mg1r mg1b'
-        >
-          {e('newBookmark')}
-        </Button>
-        <div className='pd3'>
-          <LogoElem />
-        </div>
-      </div>
+      <NoSession
+        height={this.props.height}
+        onNewTab={this.handleNewTab}
+        onNewSsh={this.handleNewSsh}
+        batch={this.props.batch}
+      />
     )
   }
 

package/client/components/tabs/no-session.jsx

@@ -0,0 +1,40 @@
+import { Button } from 'antd'
+import LogoElem from '../common/logo-elem.jsx'
+import HistoryPanel from '../sidebar/history'
+
+const e = window.translate
+
+export default function NoSessionPanel ({ height, onNewTab, onNewSsh, batch }) {
+  const props = {
+    style: {
+      height: height + 'px'
+    }
+  }
+  const handleClick = () => {
+    window.openTabBatch = batch
+  }
+  return (
+    <div className='no-sessions electerm-logo-bg' {...props}>
+      <Button
+        onClick={onNewTab}
+        size='large'
+        className='mg1r mg1b add-new-tab-btn'
+      >
+        {e('newTab')}
+      </Button>
+      <Button
+        onClick={onNewSsh}
+        size='large'
+        className='mg1r mg1b'
+      >
+        {e('newBookmark')}
+      </Button>
+      <div className='pd3'>
+        <LogoElem />
+      </div>
+      <div className='no-session-history' onClick={handleClick}>
+        <HistoryPanel sort />
+      </div>
+    </div>
+  )
+}

package/client/components/tabs/tabs.styl

@@ -229,3 +229,9 @@
   padding 0 4px
   height 20px
   line-height 21px
+.no-session-history
+  position absolute
+  top 280px
+  bottom 80px
+  left 0
+  right 0

package/client/components/terminal/index.jsx

@@ -1110,6 +1110,22 @@ clear\r`
     this.bufferMode = buf.type
   }
 
+  buildWsUrl = () => {
+    const { host, port, tokenElecterm } = this.props.config
+    const { id } = this.props.tab
+    if (window.et.buildWsUrl) {
+      return window.et.buildWsUrl(
+        host,
+        port,
+        tokenElecterm,
+        id,
+        this.props.sessionId
+      )
+    }
+    const wsUrl = `ws://${host}:${port}/terminals/${id}?sessionId=${this.props.sessionId}&token=${tokenElecterm}`
+    return wsUrl
+  }
+
   remoteInit = async (term = this.term) => {
     this.setState({
       loading: true
@@ -1117,11 +1133,7 @@ clear\r`
     const { cols, rows } = term
     const { config } = this.props
     const {
-      host,
-      port,
-      tokenElecterm,
-      keywords = [],
-      server = ''
+      keywords = []
     } = config
     const { sessionId, logName } = this.props
     const tab = window.store.applyProfileToTabs(deepCopy(this.props.tab || {}))
@@ -1189,11 +1201,7 @@ clear\r`
     this.setStatus(statusMap.success)
     term.pid = id
     this.pid = id
-    const hs = server
-      ? server.replace(/https?:\/\//, '')
-      : `${host}:${port}`
-    const pre = server.startsWith('https') ? 'wss' : 'ws'
-    const wsUrl = `${pre}://${hs}/terminals/${id}?sessionId=${sessionId}&token=${tokenElecterm}`
+    const wsUrl = this.buildWsUrl()
     const socket = new WebSocket(wsUrl)
     socket.onclose = this.oncloseSocket
     socket.onerror = this.onerrorSocket
@@ -1306,10 +1314,10 @@ clear\r`
   }
 
   handleShowInfo = () => {
-    const { id, sessionId, logName, tab } = this.props
+    const { sessionId, logName, tab } = this.props
     const infoProps = {
       logName,
-      id,
+      id: tab.id,
       pid: tab.id,
       sessionId,
       isRemote: this.isRemote(),

package/client/store/store.js

@@ -29,6 +29,7 @@ import isColorDark from '../common/is-color-dark'
 import { getReverseColor } from '../common/reverse-color'
 import { uniq } from 'lodash-es'
 import deepCopy from 'json-deep-copy'
+import getBrand from '../components/ai/get-brand'
 import {
   settingMap,
   paneMap,
@@ -38,6 +39,7 @@ import {
   terminalSshConfigType
 } from '../common/constants'
 import getInitItem from '../common/init-setting-item'
+import createTitle from '../common/create-title'
 import {
   theme
 } from 'antd'
@@ -93,6 +95,19 @@ class Store {
     return Array.from(window.store._batchInputSelectedTabIds)
   }
 
+  get rightPanelTitle () {
+    const {
+      rightPanelTab,
+      config: {
+        baseURLAI
+      }
+    } = window.store
+    if (rightPanelTab === 'ai') {
+      return getBrand(baseURLAI).brand || 'Custom AI Model'
+    }
+    return createTitle(window.store.currentTab)
+  }
+
   get inActiveTerminal () {
     const { store } = window
     if (store.showModal) {

package/client/store/sync.js

@@ -492,7 +492,10 @@ export default (Store) => {
       'language',
       'copyWhenSelect',
       'customCss',
-      'dataSyncSelected'
+      'dataSyncSelected',
+      'baseURLAI',
+      'modelAI',
+      'roleAI'
     ]
     return pick(store.config, configSyncKeys)
   }

package/client/store/tab.js

@@ -459,7 +459,8 @@ export default Store => {
       'srcId',
       'status',
       'pane',
-      'batch'
+      'batch',
+      'tabCount'
     ]
     const { history } = store
     const index = history.findIndex(d => {

package/package.json

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