From a0603a923ed83ac62b2c373b6d69a6efbac8fb1f Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Sat, 9 Sep 2023 20:57:24 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20plugin=20market=20Set?=
 =?UTF-8?q?ting=20Modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AgentSetting/AgentPlugin/MarketList.tsx   | 46 +++++++----
 .../AgentPlugin/MarketSettingModal.tsx        | 76 +++++++++++++++++++
 src/features/AgentSetting/test.json           | 40 ----------
 src/locales/default/plugin.ts                 | 10 ++-
 src/locales/default/setting.ts                |  1 +
 5 files changed, 116 insertions(+), 57 deletions(-)
 create mode 100644 src/features/AgentSetting/AgentPlugin/MarketSettingModal.tsx
 delete mode 100644 src/features/AgentSetting/test.json

diff --git a/src/features/AgentSetting/AgentPlugin/MarketList.tsx b/src/features/AgentSetting/AgentPlugin/MarketList.tsx
index 4a3ac0fe..11ae4006 100644
--- a/src/features/AgentSetting/AgentPlugin/MarketList.tsx
+++ b/src/features/AgentSetting/AgentPlugin/MarketList.tsx
@@ -1,8 +1,8 @@
 import { Avatar, Form, Icon, Tooltip } from '@lobehub/ui';
-import { Button, Skeleton, Switch, Tag } from 'antd';
+import { Button, Skeleton, Space, Switch, Tag } from 'antd';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { LucideBlocks, LucideStore, LucideTrash2 } from 'lucide-react';
+import { LucideBlocks, LucideSettings, LucideStore, LucideTrash2 } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -13,6 +13,7 @@ import { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
 
 import { useStore } from '../store';
 import LocalPluginItem from './LocalPluginItem';
+import MarketSettingModal from './MarketSettingModal';
 
 const useStyles = createStyles(({ css }) => ({
   avatar: css`
@@ -36,6 +37,7 @@ const MarketList = memo(() => {
   const { styles } = useStyles();
 
   const [showModal, setModal] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
 
   const [userEnabledPlugins, hasPlugin, toggleAgentPlugin] = useStore((s) => [
     s.config.plugins || [],
@@ -173,12 +175,13 @@ const MarketList = memo(() => {
         onValueChange={updateNewDevPlugin}
         open={showModal}
       />
+      <MarketSettingModal onOpenChange={setShowSettings} open={showSettings} />
       <Form
         items={[
           {
             children: isEmpty ? loadingList : [...deprecatedList, ...customList, ...list],
             extra: (
-              <Flexbox gap={8} horizontal>
+              <Flexbox align={'center'} gap={8} horizontal>
                 {hasDeprecated ? (
                   <Tooltip title={t('settingPlugin.clearDeprecated')}>
                     <Button
@@ -191,21 +194,32 @@ const MarketList = memo(() => {
                       }}
                       size={'small'}
                       type={'text'}
-                    ></Button>
+                    />
                   </Tooltip>
                 ) : null}
-                <Tooltip title={t('settingPlugin.addTooltip')}>
-                  <Button
-                    icon={<Icon icon={LucideBlocks} />}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setModal(true);
-                    }}
-                    size={'small'}
-                  >
-                    {t('settingPlugin.add')}
-                  </Button>
-                </Tooltip>
+
+                <Space.Compact style={{ width: 'auto' }}>
+                  <Tooltip title={t('settingPlugin.addTooltip')}>
+                    <Button
+                      icon={<Icon icon={LucideBlocks} />}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setModal(true);
+                      }}
+                      size={'small'}
+                    />
+                  </Tooltip>
+                  <Tooltip title={t('settingPlugin.settings')}>
+                    <Button
+                      icon={<Icon icon={LucideSettings} />}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setShowSettings(true);
+                      }}
+                      size={'small'}
+                    />
+                  </Tooltip>
+                </Space.Compact>
               </Flexbox>
             ),
             icon: LucideStore,
diff --git a/src/features/AgentSetting/AgentPlugin/MarketSettingModal.tsx b/src/features/AgentSetting/AgentPlugin/MarketSettingModal.tsx
new file mode 100644
index 00000000..e21f2600
--- /dev/null
+++ b/src/features/AgentSetting/AgentPlugin/MarketSettingModal.tsx
@@ -0,0 +1,76 @@
+import { Icon, Input, Tooltip } from '@lobehub/ui';
+import { ConfigProvider, Form, Modal } from 'antd';
+import { createStyles } from 'antd-style';
+import { LucideSettings } from 'lucide-react';
+import { lighten } from 'polished';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { PLUGINS_INDEX_URL } from '@/const/url';
+
+const useStyles = createStyles(({ css, token, prefixCls }) => ({
+  content: css`
+    .${prefixCls}-modal-content {
+      border: 1px solid ${token.colorSplit};
+      border-radius: 12px;
+    }
+  `,
+  root: css`
+    backdrop-filter: blur(2px);
+  `,
+}));
+
+interface MarketSettingModalProps {
+  onOpenChange: (open: boolean) => void;
+  open?: boolean;
+}
+
+const MarketSettingModal = memo<MarketSettingModalProps>(({ open, onOpenChange }) => {
+  const { t } = useTranslation('plugin');
+  const { styles, theme } = useStyles();
+
+  return (
+    <ConfigProvider
+      theme={{
+        token: {
+          colorBgElevated: lighten(0.005, theme.colorBgContainer),
+        },
+      }}
+    >
+      <Modal
+        centered
+        closable
+        maskClosable
+        onCancel={() => {
+          onOpenChange(false);
+        }}
+        open={open}
+        title={
+          <Flexbox gap={8} horizontal style={{ marginBottom: 24 }}>
+            <Icon icon={LucideSettings} />
+            {t('settings.title')}
+          </Flexbox>
+        }
+        width={700}
+        wrapClassName={styles.root}
+      >
+        <Flexbox gap={12}>
+          <Form layout={'vertical'}>
+            <Form.Item extra={t('settings.modalDesc')} label={t('settings.indexUrl.title')}>
+              <Tooltip title={t('settings.indexUrl.tooltip')}>
+                <Input
+                  defaultValue={PLUGINS_INDEX_URL}
+                  disabled
+                  placeholder={'https://xxxxx.com/index.json'}
+                />
+              </Tooltip>
+            </Form.Item>
+          </Form>
+        </Flexbox>
+      </Modal>
+    </ConfigProvider>
+  );
+});
+
+export default MarketSettingModal;
diff --git a/src/features/AgentSetting/test.json b/src/features/AgentSetting/test.json
deleted file mode 100644
index 4de6f753..00000000
--- a/src/features/AgentSetting/test.json
+++ /dev/null
@@ -1,40 +0,0 @@
-{
-  "exportType": "agents",
-  "state": {
-    "sessions": {
-      "9a2def55-ff50-4f7f-ad6c-b97dac817193": {
-        "chats": {},
-        "config": {
-          "model": "gpt-3.5-turbo",
-          "params": { "temperature": 0.6 },
-          "systemRole": "你是一名专业的前端。擅长书写 Typescript JSDoc 代码，代码的示例如下：\n\n```ts\ninterface Props {\n/**\n* 尺寸\n* */\nloading: boolean;\n/**\n* 头像形状\n* @default 'square'\n* @enum [\"square\",\"circle\"]\n* @enumNames [ \"方形\", \"圆形\"]\n*/\nshape?: 'square' | 'circle';\n/**\n* 返回事件\n* @ignore\n*/\nonBack: () => void;\n/**\n* 选择路由的回调函数\n* @param key - 选中的路由\n* @ignore\n*/\nonSelect?: (key: string) => any;\n/**\n* 点击事件回调函数\n* @ignore\n*/\nonClick?: () => void;\n/**\n* 引用\n* @ignore\n*/\nref: any;\n/**\n* Tooltip 提示框位置\n* @enum ['top', 'left', 'right', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom']\n* @enumNames ['上', '左', '右', '下', '左上', '右上', '左下', '右下', '左上', '左下', '右上', '右下']\n* @default 'top'\n*/\nplacement?: TooltipPlacement;\n}\n```\n\n\n接下来用户会输入一串 interface 代码，需要你补全 jsdoc。其中接口的类型不可改变"
-        },
-        "createAt": 1690184262713,
-        "id": "9a2def55-ff50-4f7f-ad6c-b97dac817193",
-        "meta": { "backgroundColor": "#ec5e41", "avatar": "🥲" },
-        "type": "agent",
-        "updateAt": 1690184262713,
-        "topics": {}
-      },
-      "744fe028-c8a2-410c-8b0a-66cfa00d647b": {
-        "chats": {},
-        "config": {
-          "model": "gpt-3.5-turbo",
-          "params": { "temperature": 0.6 },
-          "systemRole": "- dafdsafa\n- da- dafdsafa\n- da- dafdsafa\n- da- dafdsafa\n- da- dafdsafa\n- da"
-        },
-        "createAt": 1690184730185,
-        "id": "744fe028-c8a2-410c-8b0a-66cfa00d647b",
-        "meta": {
-          "backgroundColor": "#ffef5c",
-          "title": "dafaa",
-          "description": "safsafsafsafsafsafsfasfas"
-        },
-        "type": "agent",
-        "updateAt": 1690184730185,
-        "topics": {}
-      }
-    }
-  },
-  "version": 1
-}
diff --git a/src/locales/default/plugin.ts b/src/locales/default/plugin.ts
index ad9e8dc6..793ca80c 100644
--- a/src/locales/default/plugin.ts
+++ b/src/locales/default/plugin.ts
@@ -87,13 +87,21 @@ export default {
       'local.title': '自定义',
     },
   },
-
   loading: {
     content: '数据获取中...',
     plugin: '插件运行中...',
   },
+
   pluginList: '插件列表',
   plugins: {
     unknown: '插件检测中...',
   },
+  settings: {
+    indexUrl: {
+      title: '市场索引',
+      tooltip: '暂不支持编辑',
+    },
+    modalDesc: '配置插件市场的地址后，可以使用自定义的插件市场',
+    title: '设置插件市场',
+  },
 };
diff --git a/src/locales/default/setting.ts b/src/locales/default/setting.ts
index c78ddf47..feeb4db4 100644
--- a/src/locales/default/setting.ts
+++ b/src/locales/default/setting.ts
@@ -132,6 +132,7 @@ export default {
     addTooltip: '添加自定义插件',
     clearDeprecated: '移除无效插件',
     config: '{{id}} 插件配置',
+    settings: '配置插件市场',
     title: '插件列表',
   },
   settingSystem: {