refactor(AssistantPresetsPage): added assistants subscribe settings to AssistantPresetsPage (#11184)

refactor(DataSettings, MCPSettings, AssistantPresetsPage): clean up imports and enhance UI components - Removed unused imports and components from DataSettings for better clarity. - Updated MCPSettings layout by introducing a new Container styled with Scrollbar for improved scrolling. - Added AssistantsSubscribeUrlSettings component to manage subscription URLs in AssistantPresetsPage, enhancing user interaction. - Adjusted button styles and layout in AssistantPresetsPage for a more cohesive design.
2025-11-10 20:10:38 +08:00
parent 2d8555c326
commit 2f66f5b511
4 changed files with 89 additions and 64 deletions
--- a/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx
@@ -23,7 +23,7 @@ import type { AppInfo } from '@renderer/types'
 import { formatFileSize } from '@renderer/utils'
 import { occupiedDirs } from '@shared/config/constant'
 import { Button, Progress, Switch, Typography } from 'antd'
-import { FileText, FolderCog, FolderInput, FolderOpen, SaveIcon, Sparkle } from 'lucide-react'
+import { FileText, FolderCog, FolderInput, FolderOpen, SaveIcon } from 'lucide-react'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -38,7 +38,6 @@ import {
  SettingRowTitle,
  SettingTitle
 } from '..'
-import AgentsSubscribeUrlSettings from './AgentsSubscribeUrlSettings'
 import ExportMenuOptions from './ExportMenuSettings'
 import JoplinSettings from './JoplinSettings'
 import LocalBackupSettings from './LocalBackupSettings'
@@ -129,11 +128,6 @@ const DataSettings: FC = () => {
      key: 'siyuan',
      title: t('settings.data.siyuan.title'),
      icon: <SiyuanIcon />
-    },
-    {
-      key: 'agentssubscribe_url',
-      title: t('assistants.presets.settings.title'),
-      icon: <Sparkle size={16} className="icon" />
    }
  ]

@@ -704,7 +698,6 @@ const DataSettings: FC = () => {
        {menu === 'joplin' && <JoplinSettings />}
        {menu === 'obsidian' && <ObsidianSettings />}
        {menu === 'siyuan' && <SiyuanSettings />}
-        {menu === 'agentssubscribe_url' && <AgentsSubscribeUrlSettings />}
        {menu === 'local_backup' && <LocalBackupSettings />}
      </SettingContainer>
    </Container>
--- a/src/renderer/src/pages/settings/MCPSettings/McpSettings.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpSettings.tsx
@@ -1,6 +1,7 @@
 import { loggerService } from '@logger'
 import type { McpError } from '@modelcontextprotocol/sdk/types.js'
 import { DeleteIcon } from '@renderer/components/Icons'
+import Scrollbar from '@renderer/components/Scrollbar'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useMCPServer, useMCPServers } from '@renderer/hooks/useMCPServers'
 import { useMCPServerTrust } from '@renderer/hooks/useMCPServerTrust'
@@ -740,51 +741,57 @@ const McpSettings: React.FC = () => {
  }

  return (
-    <SettingContainer theme={theme} style={{ width: '100%', paddingTop: 55, backgroundColor: 'transparent' }}>
-      <SettingGroup style={{ marginBottom: 0, borderRadius: 'var(--list-item-border-radius)' }}>
-        <SettingTitle>
-          <Flex justify="space-between" align="center" gap={5} style={{ marginRight: 10 }}>
-            <Flex align="center" gap={8}>
-              <ServerName className="text-nowrap">{server?.name}</ServerName>
-              {serverVersion && <VersionBadge count={serverVersion} color="blue" />}
+    <Container>
+      <SettingContainer theme={theme} style={{ width: '100%', paddingTop: 55, backgroundColor: 'transparent' }}>
+        <SettingGroup style={{ marginBottom: 0, borderRadius: 'var(--list-item-border-radius)' }}>
+          <SettingTitle>
+            <Flex justify="space-between" align="center" gap={5} style={{ marginRight: 10 }}>
+              <Flex align="center" gap={8}>
+                <ServerName className="text-nowrap">{server?.name}</ServerName>
+                {serverVersion && <VersionBadge count={serverVersion} color="blue" />}
+              </Flex>
+              <Button
+                danger
+                icon={<DeleteIcon size={14} className="lucide-custom" />}
+                type="text"
+                onClick={() => onDeleteMcpServer(server)}
+              />
            </Flex>
-            <Button
-              danger
-              icon={<DeleteIcon size={14} className="lucide-custom" />}
-              type="text"
-              onClick={() => onDeleteMcpServer(server)}
-            />
-          </Flex>
-          <Flex align="center" gap={16}>
-            <Switch
-              value={server.isActive}
-              key={server.id}
-              loading={loadingServer === server.id}
-              onChange={onToggleActive}
-            />
-            <Button
-              type="primary"
-              icon={<SaveIcon size={14} />}
-              onClick={onSave}
-              loading={loading}
-              shape="round"
-              disabled={!isFormChanged || activeTab !== 'settings'}>
-              {t('common.save')}
-            </Button>
-          </Flex>
-        </SettingTitle>
-        <SettingDivider />
-        <Tabs
-          defaultActiveKey="settings"
-          items={tabs}
-          onChange={(key) => setActiveTab(key as TabKey)}
-          style={{ marginTop: 8, backgroundColor: 'transparent' }}
-        />
-      </SettingGroup>
-    </SettingContainer>
+            <Flex align="center" gap={16}>
+              <Switch
+                value={server.isActive}
+                key={server.id}
+                loading={loadingServer === server.id}
+                onChange={onToggleActive}
+              />
+              <Button
+                type="primary"
+                icon={<SaveIcon size={14} />}
+                onClick={onSave}
+                loading={loading}
+                shape="round"
+                disabled={!isFormChanged || activeTab !== 'settings'}>
+                {t('common.save')}
+              </Button>
+            </Flex>
+          </SettingTitle>
+          <SettingDivider />
+          <Tabs
+            defaultActiveKey="settings"
+            items={tabs}
+            onChange={(key) => setActiveTab(key as TabKey)}
+            style={{ marginTop: 8, backgroundColor: 'transparent' }}
+          />
+        </SettingGroup>
+      </SettingContainer>
+    </Container>
  )
 }

+const Container = styled(Scrollbar)`
+  height: calc(100vh - var(--navbar-height));
+`
+
 const ServerName = styled.span`
  font-size: 14px;
  font-weight: 500;
--- a/src/renderer/src/pages/store/assistants/presets/AssistantPresetsPage.tsx
+++ b/src/renderer/src/pages/store/assistants/presets/AssistantPresetsPage.tsx
@@ -1,7 +1,7 @@
-import { ImportOutlined, PlusOutlined } from '@ant-design/icons'
 import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
 import { HStack } from '@renderer/components/Layout'
 import ListItem from '@renderer/components/ListItem'
+import GeneralPopup from '@renderer/components/Popups/GeneralPopup'
 import Scrollbar from '@renderer/components/Scrollbar'
 import CustomTag from '@renderer/components/Tags/CustomTag'
 import { useAssistantPresets } from '@renderer/hooks/useAssistantPresets'
@@ -11,7 +11,7 @@ import type { AssistantPreset } from '@renderer/types'
 import { uuid } from '@renderer/utils'
 import { Button, Empty, Flex, Input } from 'antd'
 import { omit } from 'lodash'
-import { Search } from 'lucide-react'
+import { Import, Plus, Rss, Search } from 'lucide-react'
 import type { FC } from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -23,6 +23,7 @@ import { groupTranslations } from './assistantPresetGroupTranslations'
 import AddAssistantPresetPopup from './components/AddAssistantPresetPopup'
 import AssistantPresetCard from './components/AssistantPresetCard'
 import { AssistantPresetGroupIcon } from './components/AssistantPresetGroupIcon'
+import AssistantsSubscribeUrlSettings from './components/AssistantsSubscribeUrlSettings'
 import ImportAssistantPresetPopup from './components/ImportAssistantPresetPopup'

 const AssistantPresetsPage: FC = () => {
@@ -175,6 +176,15 @@ const AssistantPresetsPage: FC = () => {
    }
  }

+  const handleSubscribeSettings = () => {
+    GeneralPopup.show({
+      title: t('assistants.presets.settings.title'),
+      content: <AssistantsSubscribeUrlSettings />,
+      footer: null,
+      width: 600
+    })
+  }
+
  return (
    <Container>
      <Navbar>
@@ -246,12 +256,12 @@ const AssistantPresetsPage: FC = () => {
                </CustomTag>
              }
            </AgentsListTitle>
-            <Flex gap={8}>
+            <Flex gap={2}>
              {isSearchExpanded ? (
                <Input
                  placeholder={t('common.search')}
                  className="nodrag"
-                  style={{ width: 300, height: 28, borderRadius: 15, paddingLeft: 12 }}
+                  style={{ width: 200, height: 28, borderRadius: 15, paddingLeft: 12 }}
                  size="small"
                  variant="filled"
                  allowClear
@@ -274,10 +284,13 @@ const AssistantPresetsPage: FC = () => {
                  </Button>
                )
              )}
-              <Button type="text" onClick={handleImportAgent} icon={<ImportOutlined />}>
+              <Button type="text" onClick={handleImportAgent} icon={<Import size={18} color="var(--color-icon)" />}>
                {t('assistants.presets.import.title')}
              </Button>
-              <Button type="text" onClick={handleAddAgent} icon={<PlusOutlined />}>
+              <Button type="text" onClick={handleSubscribeSettings} icon={<Rss size={18} color="var(--color-icon)" />}>
+                {t('assistants.presets.settings.title')}
+              </Button>
+              <Button type="text" onClick={handleAddAgent} icon={<Plus size={18} color="var(--color-icon)" />}>
                {t('assistants.presets.add.title')}
              </Button>
            </Flex>
--- a/src/renderer/src/pages/store/assistants/presets/components/AssistantsSubscribeUrlSettings.tsx
+++ b/src/renderer/src/pages/store/assistants/presets/components/AssistantsSubscribeUrlSettings.tsx
@@ -1,15 +1,15 @@
 import { HStack } from '@renderer/components/Layout'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useSettings } from '@renderer/hooks/useSettings'
+import { SettingDivider, SettingGroup, SettingRow, SettingRowTitle, SettingTitle } from '@renderer/pages/settings'
 import { useAppDispatch } from '@renderer/store'
 import { setAgentssubscribeUrl } from '@renderer/store/settings'
 import Input from 'antd/es/input/Input'
+import { HelpCircle } from 'lucide-react'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'

-import { SettingDivider, SettingGroup, SettingRow, SettingRowTitle, SettingTitle } from '..'
-
-const AgentsSubscribeUrlSettings: FC = () => {
+const AssistantsSubscribeUrlSettings: FC = () => {
  const { t } = useTranslation()
  const { theme } = useTheme()
  const dispatch = useAppDispatch()
@@ -20,12 +20,24 @@ const AgentsSubscribeUrlSettings: FC = () => {
    dispatch(setAgentssubscribeUrl(e.target.value))
  }

+  const handleHelpClick = () => {
+    window.open('https://docs.cherry-ai.com/data-settings/assistants-subscribe', '_blank')
+  }
+
  return (
    <SettingGroup theme={theme}>
-      <SettingTitle>
-        {t('assistants.presets.tag.agent')}
-        {t('settings.tool.websearch.subscribe_add')}
-      </SettingTitle>
+      <HStack alignItems="center" gap="8px">
+        <SettingTitle>
+          {t('assistants.presets.tag.agent')}
+          {t('settings.tool.websearch.subscribe_add')}
+        </SettingTitle>
+        <HelpCircle
+          size={16}
+          color="var(--color-icon)"
+          onClick={handleHelpClick}
+          className="hover:!text-[var(--color-primary)] cursor-pointer transition-colors"
+        />
+      </HStack>
      <SettingDivider />
      <SettingRow>
        <SettingRowTitle>{t('settings.tool.websearch.subscribe_url')}</SettingRowTitle>
@@ -35,7 +47,7 @@ const AgentsSubscribeUrlSettings: FC = () => {
            value={agentssubscribeUrl || ''}
            onChange={handleAgentChange}
            style={{ width: 315 }}
-            placeholder={t('settings.tool.websearch.subscribe_name.placeholder')}
+            placeholder={t('settings.tool.websearch.subscribe_url')}
          />
        </HStack>
      </SettingRow>
@@ -43,4 +55,4 @@ const AgentsSubscribeUrlSettings: FC = () => {
  )
 }

-export default AgentsSubscribeUrlSettings
+export default AssistantsSubscribeUrlSettings