Merge pull request #166 from lobehub/dx/plugin

插件二期遗留优化事项
lobehub · Sep 9, 2023 · 6e50e84 · 6e50e84
2 parents e4b0c68 + 5bd2eb0
commit 6e50e84
Show file tree

Hide file tree

Showing 18 changed files with 339 additions and 144 deletions.
diff --git a/src/components/ManifestPreviewer.tsx b/src/components/ManifestPreviewer.tsx
@@ -0,0 +1,30 @@
+import { Highlighter } from '@lobehub/ui';
+import { Popover } from 'antd';
+import { ReactNode, memo } from 'react';
+
+interface PluginManifestPreviewerProps {
+  children?: ReactNode;
+  manifest: object;
+  trigger?: 'click' | 'hover';
+}
+
+const ManifestPreviewer = memo<PluginManifestPreviewerProps>(
+  ({ manifest, children, trigger = 'click' }) => (
+    <Popover
+      arrow={false}
+      content={
+        <Highlighter language={'json'} style={{ maxHeight: 600, maxWidth: 400 }}>
+          {JSON.stringify(manifest, null, 2)}
+        </Highlighter>
+      }
+      placement={'right'}
+      style={{ width: 400 }}
+      title={'Manifest JSON'}
+      trigger={trigger}
+    >
+      {children}
+    </Popover>
+  ),
+);
+
+export default ManifestPreviewer;
diff --git a/src/const/url.ts b/src/const/url.ts
@@ -1,3 +1,5 @@
+import { Locales } from '@/locales/resources';
+
 import pkg from '../../package.json';
 import { INBOX_SESSION_ID } from './session';
 
@@ -8,7 +10,13 @@ export const FEEDBACK = pkg.bugs.url;
 export const DISCORD = 'https://discord.gg/AYFPHvv2jT';
 
 export const PLUGINS_INDEX_URL =
-  process.env.PLUGINS_INDEX_URL ?? 'https://chat-plugins.lobehub.com';
+  process.env.PLUGINS_INDEX_URL ?? 'https://chat-plugins.lobehub.com/index';
+
+export const getPluginIndexJSON = (lang: Locales = 'en-US', baseUrl = PLUGINS_INDEX_URL) => {
+  if (lang === 'en-US') return baseUrl;
+
+  return `${baseUrl}.${lang}.json`;
+};
 
 export const AGENTS_INDEX_URL = process.env.AGENTS_INDEX_URL ?? 'https://chat-agents.lobehub.com';
 

diff --git a/src/features/AgentSetting/AgentPlugin/LocalPluginItem.tsx b/src/features/AgentSetting/AgentPlugin/LocalPluginItem.tsx
@@ -3,8 +3,8 @@ import isEqual from 'fast-deep-equal';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
-import DevModal from 'src/features/PluginDevModal';
 
+import DevModal from '@/features/PluginDevModal';
 import { pluginSelectors, usePluginStore } from '@/store/plugin';
 
 import { useStore } from '../store';
@@ -36,7 +36,7 @@ const MarketList = memo<{ id: string }>(({ id }) => {
         mode={'edit'}
         onDelete={() => {
           deleteCustomPlugin(id);
-          toggleAgentPlugin(id);
+          toggleAgentPlugin(id, false);
         }}
         onOpenChange={setModal}
         onSave={(value) => {

diff --git 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
@@ -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/store/action.ts b/src/features/AgentSetting/store/action.ts
@@ -48,7 +48,7 @@ export interface Action {
 
   setAgentMeta: (meta: Partial<MetaData>) => void;
   streamUpdateMeta: (key: keyof MetaData) => any;
-  toggleAgentPlugin: (pluginId: string) => void;
+  toggleAgentPlugin: (pluginId: string, state?: boolean) => void;
   /**
    * 更新加载状态
    * @param key - SessionLoadingState 的键
@@ -198,8 +198,8 @@ export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
     };
   },
 
-  toggleAgentPlugin: (id) => {
-    get().dispatchConfig({ pluginId: id, type: 'togglePlugin' });
+  toggleAgentPlugin: (id, state) => {
+    get().dispatchConfig({ pluginId: id, state, type: 'togglePlugin' });
   },
 
   updateLoadingState: (key, value) => {

diff --git a/src/features/AgentSetting/store/reducers/config.ts b/src/features/AgentSetting/store/reducers/config.ts
@@ -6,7 +6,7 @@ import { merge } from '@/utils/merge';
 
 export type ConfigDispatch =
   | { config: Partial<any>; type: 'update' }
-  | { pluginId: string; type: 'togglePlugin' }
+  | { pluginId: string; state?: boolean; type: 'togglePlugin' }
   | { type: 'reset' };
 
 export const configReducer = (state: LobeAgentConfig, payload: ConfigDispatch): LobeAgentConfig => {
@@ -19,15 +19,26 @@ export const configReducer = (state: LobeAgentConfig, payload: ConfigDispatch):
 
     case 'togglePlugin': {
       return produce(state, (config) => {
-        const { pluginId: id } = payload;
+        const { pluginId: id, state } = payload;
         if (config.plugins === undefined) {
-          config.plugins = [id];
-        } else {
+          config.plugins = [];
+        }
+
+        if (typeof state === 'undefined') {
           if (config.plugins.includes(id)) {
             config.plugins.splice(config.plugins.indexOf(id), 1);
-          } else {
-            config.plugins.push(id);
+
+            return;
           }
+
+          config.plugins.push(id);
+          return;
+        }
+
+        if (!state) {
+          config.plugins = config.plugins.filter((pluginId) => pluginId !== id);
+        } else {
+          config.plugins.push(id);
         }
       });
     }

diff --git a/src/features/AgentSetting/test.json b/src/features/AgentSetting/test.json