@electerm/electerm-react 1.51.20 → 1.60.6

package/client/common/constants.js

@@ -412,3 +412,4 @@ export const terminalTypes = [
 export const sshConfigLoadKey = 'ssh-config-loaded'
 export const sshConfigKey = 'ignore-ssh-config'
 export const connectionHoppingWarnKey = 'connectionHoppingWarnned'
+export const aiChatHistoryKey = 'ai-chat-history'

package/client/common/default-setting.js

@@ -58,5 +58,16 @@ export default {
     'modifyTime'
   ],
   hideIP: false,
-  dataSyncSelected: 'all'
+  dataSyncSelected: 'all',
+  baseURLAI: 'https://api.deepseek.com',
+  modelAI: 'deepseek-chat',
+  roleAI: `You are a terminal command expert.
+- Provide clear, safe, and efficient shell commands
+- Always explain what each command does
+- Warn about potentially dangerous operations
+- Format command output with markdown code blocks
+- If multiple steps are needed, number them
+- Mention any prerequisites or dependencies
+- Include common flags and options
+- Specify which OS (Linux/Mac/Windows) the command is for`
 }

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

@@ -0,0 +1,69 @@
+// ai-chat-history-item.jsx
+import AIOutput from './ai-output'
+import {
+  Alert,
+  Tooltip
+} from 'antd'
+import {
+  UserOutlined,
+  CopyOutlined,
+  CloseOutlined
+} from '@ant-design/icons'
+import { copy } from '../../common/clipboard'
+
+export default function AIChatHistoryItem ({ item }) {
+  const {
+    prompt
+  } = item
+  const alertProps = {
+    message: (
+      <div><UserOutlined />: {prompt}</div>
+    ),
+    type: 'info'
+  }
+  function handleDel (e) {
+    e.stopPropagation()
+    window.store.removeAiHistory(item.id)
+  }
+  function handleCopy () {
+    copy(prompt)
+  }
+  function renderTitle () {
+    return (
+      <div>
+        <p>
+          <b>Model:</b> {item.modelAI}
+        </p>
+        <p>
+          <b>Role:</b> {item.roleAI}
+        </p>
+        <p>
+          <b>Base URL:</b> {item.baseURLAI}
+        </p>
+        <p>
+          <b>Time:</b> {new Date(item.timestamp).toLocaleString()}
+        </p>
+        <p>
+          <CopyOutlined
+            className='pointer'
+            onClick={handleCopy}
+          />
+          <CloseOutlined
+            className='pointer mg1l'
+            onClick={handleDel}
+          />
+        </p>
+      </div>
+    )
+  }
+  return (
+    <div className='chat-history-item'>
+      <div className='mg1y'>
+        <Tooltip title={renderTitle()}>
+          <Alert {...alertProps} />
+        </Tooltip>
+      </div>
+      <AIOutput item={item} />
+    </div>
+  )
+}

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

@@ -0,0 +1,31 @@
+// ai-chat-history.jsx
+import { useLayoutEffect, useRef } from 'react'
+import { auto } from 'manate/react'
+import AIChatHistoryItem from './ai-chat-history-item'
+
+export default auto(function AIChatHistory ({ history }) {
+  const historyRef = useRef(null)
+
+  useLayoutEffect(() => {
+    if (historyRef.current) {
+      historyRef.current.scrollTop = historyRef.current.scrollHeight
+    }
+  }, [history.length])
+  if (!history.length) {
+    return <div />
+  }
+  return (
+    <div ref={historyRef} className='ai-history-wrap'>
+      {
+        history.map((item) => {
+          return (
+            <AIChatHistoryItem
+              key={item.id}
+              item={item}
+            />
+          )
+        })
+      }
+    </div>
+  )
+})

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

@@ -0,0 +1,164 @@
+import { useState, useCallback, useEffect } from 'react'
+import { Flex, Input, message } from 'antd'
+import AIConfigForm from './ai-config'
+import TabSelect from '../footer/tab-select'
+import AiChatHistory from './ai-chat-history'
+import uid from '../../common/uid'
+import { pick } from 'lodash-es'
+import {
+  SettingOutlined,
+  LoadingOutlined,
+  SendOutlined,
+  UnorderedListOutlined
+} from '@ant-design/icons'
+import './ai.styl'
+
+const { TextArea } = Input
+const MAX_HISTORY = 100
+const aiConfigsArr = [
+  'baseURLAI',
+  'modelAI',
+  'roleAI',
+  'apiKeyAI'
+]
+
+export default function AIChat (props) {
+  const [prompt, setPrompt] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+
+  function handlePromptChange (e) {
+    setPrompt(e.target.value)
+  }
+
+  async function handleSubmit () {
+    if (aiConfigMissing()) {
+      window.store.toggleAIConfig()
+    }
+    if (!prompt.trim() || isLoading) return
+    setIsLoading(true)
+    const aiResponse = await window.pre.runGlobalAsync(
+      'AIchat',
+      prompt,
+      props.config.modelAI,
+      props.config.roleAI,
+      props.config.baseURLAI,
+      props.config.apiKeyAI
+    ).catch(
+      window.store.onError
+    )
+    if (aiResponse && aiResponse.error) {
+      return window.store.onError(
+        new Error(aiResponse.error)
+      )
+    }
+    window.store.aiChatHistory.push({
+      prompt,
+      response: aiResponse.response,
+      ...pick(props.config, [
+        'modelAI',
+        'roleAI',
+        'baseURLAI'
+      ]),
+      timestamp: Date.now(),
+      id: uid()
+    })
+
+    if (window.store.aiChatHistory.length > MAX_HISTORY) {
+      window.store.aiChatHistory.splice(MAX_HISTORY)
+    }
+    setPrompt('')
+    setIsLoading(false)
+  }
+
+  function handleConfigSubmit (values) {
+    window.store.updateConfig(values)
+    message.success('Saved')
+  }
+
+  const renderConfig = useCallback(() => {
+    if (!props.showAIConfig) return null
+    const aiConfigs = pick(props.config, aiConfigsArr)
+    return (
+      <AIConfigForm
+        initialValues={aiConfigs}
+        onSubmit={handleConfigSubmit}
+        showAIConfig={props.showAIConfig}
+      />
+    )
+  }, [props.showAIConfig, props.config])
+
+  function renderHistory () {
+    return (
+      <AiChatHistory
+        history={props.aiChatHistory}
+      />
+    )
+  }
+
+  function toggleConfig () {
+    window.store.toggleAIConfig()
+  }
+
+  function clearHistory () {
+    window.store.aiChatHistory = []
+  }
+
+  function aiConfigMissing () {
+    return aiConfigsArr.some(k => !props.config[k])
+  }
+
+  function renderSendIcon () {
+    if (isLoading) {
+      return <LoadingOutlined />
+    }
+    return (
+      <SendOutlined
+        onClick={handleSubmit}
+        className='mg1l pointer icon-hover'
+      />
+    )
+  }
+
+  useEffect(() => {
+    if (aiConfigMissing()) {
+      window.store.toggleAIConfig()
+    }
+  }, [])
+
+  return (
+    <Flex vertical className='ai-chat-container'>
+      <Flex className='ai-chat-history' flex='auto'>
+        {renderHistory()}
+      </Flex>
+
+      <Flex className='ai-chat-input'>
+        <TextArea
+          value={prompt}
+          onChange={handlePromptChange}
+          placeholder='Enter your prompt here'
+          autoSize={{ minRows: 3, maxRows: 10 }}
+          disabled={isLoading}
+        />
+        <Flex className='ai-chat-terminals' justify='space-between' align='center'>
+          <Flex align='center'>
+            <TabSelect
+              selectedTabIds={props.selectedTabIds}
+              tabs={props.tabs}
+              activeTabId={props.activeTabId}
+            />
+            <SettingOutlined
+              onClick={toggleConfig}
+              className='mg1l pointer icon-hover toggle-ai-setting-icon'
+            />
+            <UnorderedListOutlined
+              onClick={clearHistory}
+              className='mg2l pointer clear-ai-icon icon-hover'
+            />
+            {renderConfig()}
+          </Flex>
+          {renderSendIcon()}
+        </Flex>
+      </Flex>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,133 @@
+import {
+  Form,
+  Input,
+  Button,
+  AutoComplete,
+  Modal
+} from 'antd'
+import { useEffect, useState } from 'react'
+
+// Comprehensive API provider configurations
+import providers from './providers'
+
+const e = window.translate
+
+export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig }) {
+  const [form] = Form.useForm()
+  const [modelOptions, setModelOptions] = useState([])
+
+  useEffect(() => {
+    if (initialValues) {
+      form.setFieldsValue(initialValues)
+    }
+  }, [initialValues])
+
+  function filter () {
+    return true
+  }
+
+  const getBaseURLOptions = () => {
+    return providers.map(provider => ({
+      value: provider.baseURL,
+      label: provider.label
+    }))
+  }
+
+  const getModelOptions = (baseURL) => {
+    const provider = providers.find(p => p.baseURL === baseURL)
+    if (!provider) return []
+
+    return provider.models.map(model => ({
+      value: model,
+      label: model
+    }))
+  }
+
+  const handleSubmit = async (values) => {
+    onSubmit(values)
+  }
+
+  function handleCancel () {
+    window.store.toggleAIConfig()
+  }
+
+  function handleChange (v) {
+    const options = getModelOptions(v)
+    setModelOptions(options)
+    form.setFieldsValue({
+      modelAI: options[0]?.value || ''
+    })
+  }
+
+  if (!showAIConfig) {
+    return null
+  }
+  const title = 'AI ' + e('setting')
+  return (
+    <Modal
+      title={title}
+      open
+      onCancel={handleCancel}
+      footer={null}
+    >
+      <Form
+        form={form}
+        onFinish={handleSubmit}
+        initialValues={initialValues}
+      >
+        <Form.Item
+          label='API URL'
+          name='baseURLAI'
+          rules={[
+            { required: true, message: 'Please input or select API provider URL!' },
+            { type: 'url', message: 'Please enter a valid URL!' }
+          ]}
+        >
+          <AutoComplete
+            options={getBaseURLOptions()}
+            placeholder='Enter or select API provider URL'
+            filterOption={filter}
+            onChange={handleChange}
+            allowClear
+          />
+        </Form.Item>
+
+        <Form.Item
+          label='Model'
+          name='modelAI'
+          rules={[{ required: true, message: 'Please input or select a model!' }]}
+        >
+          <AutoComplete
+            options={modelOptions}
+            placeholder='Enter or select AI model'
+            filterOption={filter}
+          />
+        </Form.Item>
+
+        <Form.Item
+          label='API Key'
+          name='apiKeyAI'
+        >
+          <Input.Password placeholder='Enter your API key' />
+        </Form.Item>
+
+        <Form.Item
+          label='System Role'
+          name='roleAI'
+          rules={[{ required: true, message: 'Please input the AI role!' }]}
+        >
+          <Input.TextArea
+            placeholder='Enter AI role/system prompt'
+            rows={4}
+          />
+        </Form.Item>
+
+        <Form.Item>
+          <Button type='primary' htmlType='submit'>
+            {e('save')}
+          </Button>
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+}

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

@@ -0,0 +1,123 @@
+import React 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
+    }
+  }
+}
+
+const e = window.translate
+
+export default function AIOutput ({ item }) {
+  const {
+    response,
+    baseURLAI
+  } = item
+  if (!response) {
+    return null
+  }
+
+  const { brand, brandUrl } = getBrand(baseURLAI)
+
+  const renderCode = (props) => {
+    const { node, className = '', children, ...rest } = props
+    const code = String(children).replace(/\n$/, '')
+    const inline = !className.includes('language-')
+    if (inline) {
+      return (
+        <code className={className} {...props}>
+          {children}
+        </code>
+      )
+    }
+
+    const copyToClipboard = () => {
+      copy(code)
+    }
+
+    const runInTerminal = () => {
+      window.store.runCommandInTerminal(code)
+    }
+
+    return (
+      <div className='code-block'>
+        <pre>
+          <code className={className} {...rest}>
+            {children}
+          </code>
+        </pre>
+        <div className='code-block-actions'>
+          <CopyOutlined
+            className='code-action-icon pointer'
+            onClick={copyToClipboard}
+            title={e('copy')}
+          />
+          <PlayCircleOutlined
+            className='code-action-icon pointer mg1l'
+            onClick={runInTerminal}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  function renderBrand () {
+    if (!brand) {
+      return null
+    }
+    return (
+      <div className='pd1y'>
+        <Link to={brandUrl}>
+          <Tag>{brand}</Tag>
+        </Link>
+      </div>
+    )
+  }
+
+  const mdProps = {
+    children: response,
+    components: {
+      code: renderCode
+    }
+  }
+
+  return (
+    <div className='pd1'>
+      {renderBrand()}
+      <ReactMarkdown {...mdProps} />
+    </div>
+  )
+}

package/client/components/ai/ai.styl

@@ -0,0 +1,69 @@
+@require '../../css/includes/theme-default'
+.ai-chat-container
+  height 100%
+  display flex
+  flex-direction column
+  color text
+
+.ai-chat-history
+  flex-grow 1
+  &::-webkit-scrollbar
+    width 0
+.ai-history-wrap
+  width 100%
+  overflow-y auto
+  overflow-x hidden
+
+.ai-config-form
+  height 200px
+  overflow-y auto
+
+.chat-history-item
+  .code-block
+    border 1px dashed text
+    padding 5px
+    border-radius 3px
+    pre
+      margin-bottom 0
+    .code-block-actions
+      display none
+    &:hover
+      .code-block-actions
+        display block
+
+.ai-chat-input
+  position relative
+  margin-top 10px
+
+  .ant-input
+    padding-bottom 40px
+
+  .ai-chat-terminals
+    position absolute
+    bottom 5px
+    left 5px
+    right 5px
+    background transparent
+    z-index 1
+    font-size 16px
+
+.code-block
+  width 100%
+  pre
+    white-space pre-wrap
+    word-wrap break-word
+    overflow-x auto
+    max-width 100%
+  code
+    white-space pre-wrap
+    word-break break-all
+
+.clear-ai-icon
+  position relative
+  &::after
+    content '×'
+    position absolute
+    font-size 12px
+    top 8px
+    right -4px
+    font-weight bold

package/client/components/ai/providers.js

@@ -0,0 +1,14 @@
+export default [
+  {
+    label: 'OpenAI',
+    baseURL: 'https://api.openai.com/v1',
+    homepage: 'https://openai.com',
+    models: ['gpt-4', 'gpt-3.5-turbo', 'gpt-3.5-turbo-16k']
+  },
+  {
+    label: 'DeepSeek',
+    baseURL: 'https://api.deepseek.com/v1',
+    homepage: 'https://deepseek.com',
+    models: ['deepseek-chat', 'deepseek-coder']
+  }
+]