@lobehub/chat 0.63.3 → 0.64.1

package/src/features/AgentSetting/AgentPlugin/MarketList.tsx

@@ -0,0 +1,160 @@
+import { Avatar, Form, Icon, Tooltip } from '@lobehub/ui';
+import { Button, Skeleton, Switch, Tag } from 'antd';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { LucideBlocks, LucideStore } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import DevModal from 'src/features/PluginDevModal';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { pluginHelpers, usePluginStore } from '@/store/plugin';
+
+import { useStore } from '../store';
+import LocalPluginItem from './LocalPluginItem';
+
+const useStyles = createStyles(({ css }) => ({
+  avatar: css`
+    .ant-skeleton-header {
+      padding-right: 0;
+    }
+  `,
+  label: css`
+    li {
+      height: 14px !important;
+    }
+
+    li + li {
+      margin-block-start: 12px !important;
+    }
+  `,
+}));
+
+const MarketList = memo(() => {
+  const { t } = useTranslation('setting');
+  const { styles } = useStyles();
+
+  const [showModal, setModal] = useState(false);
+
+  // useEffect(() => {
+  //   setModal(true);
+  // }, []);
+
+  const updateConfig = useStore((s) => s.toggleAgentPlugin);
+  const [plugins, hasPlugin] = useStore((s) => [s.config.plugins || [], !!s.config.plugins]);
+
+  const [useFetchPluginList, fetchPluginManifest, saveToDevList, updateNewDevPlugin] =
+    usePluginStore((s) => [
+      s.useFetchPluginList,
+      s.fetchPluginManifest,
+      s.saveToDevList,
+      s.updateNewDevPlugin,
+    ]);
+  const pluginManifestLoading = usePluginStore((s) => s.pluginManifestLoading, isEqual);
+  const pluginList = usePluginStore((s) => s.pluginList, isEqual);
+  const devPluginList = usePluginStore((s) => s.devPluginList, isEqual);
+
+  useFetchPluginList();
+
+  const loadingItem = {
+    avatar: (
+      <Skeleton
+        active
+        avatar={{ size: 40 }}
+        className={styles.avatar}
+        paragraph={false}
+        title={false}
+      />
+    ),
+    label: (
+      <Skeleton
+        active
+        avatar={false}
+        paragraph={{ className: styles.label, style: { marginBottom: 0 } }}
+        style={{ width: 300 }}
+        title={false}
+      />
+    ),
+  };
+
+  const loadingList = [loadingItem, loadingItem, loadingItem];
+
+  const isEmpty = pluginList.length === 0;
+
+  const list = pluginList.map(({ identifier, meta }) => ({
+    avatar: <Avatar avatar={meta.avatar} />,
+    children: (
+      <Switch
+        checked={
+          // 如果在加载中，说明激活了
+          pluginManifestLoading[identifier] || !hasPlugin ? false : plugins.includes(identifier)
+        }
+        loading={pluginManifestLoading[identifier]}
+        onChange={(checked) => {
+          updateConfig(identifier);
+          if (checked) {
+            fetchPluginManifest(identifier);
+          }
+        }}
+      />
+    ),
+    desc: pluginHelpers.getPluginDesc(meta),
+    label: pluginHelpers.getPluginTitle(meta),
+    minWidth: undefined,
+    tag: identifier,
+  }));
+
+  const devList = devPluginList.map(({ identifier, meta }) => ({
+    avatar: <Avatar avatar={pluginHelpers.getPluginAvatar(meta) || '🧩'} />,
+    children: <LocalPluginItem id={identifier} />,
+    desc: pluginHelpers.getPluginDesc(meta),
+    label: (
+      <Flexbox align={'center'} gap={8} horizontal>
+        {pluginHelpers.getPluginTitle(meta)}
+        <Tag bordered={false} color={'gold'}>
+          {t('list.item.local.title', { ns: 'plugin' })}
+        </Tag>
+      </Flexbox>
+    ),
+    minWidth: undefined,
+    tag: identifier,
+  }));
+
+  return (
+    <>
+      <DevModal
+        onOpenChange={setModal}
+        onSave={saveToDevList}
+        onValueChange={updateNewDevPlugin}
+        open={showModal}
+      />
+      <Form
+        items={[
+          {
+            children: isEmpty ? loadingList : [...devList, ...list],
+            extra: (
+              <Tooltip title={t('settingPlugin.addTooltip')}>
+                <Button
+                  icon={<Icon icon={LucideBlocks} />}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setModal(true);
+                  }}
+                  size={'small'}
+                >
+                  {t('settingPlugin.add')}
+                </Button>
+              </Tooltip>
+            ),
+            icon: LucideStore,
+            title: t('settingPlugin.title'),
+          },
+        ]}
+        {...FORM_STYLE}
+      />{' '}
+    </>
+  );
+});
+
+export default MarketList;

package/src/features/AgentSetting/AgentPlugin/PluginSettings.tsx

@@ -0,0 +1,76 @@
+import { Form, ItemGroup, Markdown } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { ToyBrick } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { transformPluginSettings } from '@/features/PluginSettings';
+import PluginSettingRender from '@/features/PluginSettings/PluginSettingRender';
+import { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
+
+import { useStore } from '../store';
+
+const useStyles = createStyles(({ css, token }) => ({
+  md: css`
+    p {
+      color: ${token.colorTextDescription};
+    }
+  `,
+}));
+
+const PluginSettings = memo(() => {
+  const { t } = useTranslation('setting');
+  const { styles } = useStyles();
+
+  const [plugins] = useStore((s) => [s.config.plugins || [], !!s.config.plugins]);
+
+  const [useFetchPluginList, updatePluginSettings] = usePluginStore((s) => [
+    s.useFetchPluginList,
+    s.updatePluginSettings,
+  ]);
+  const pluginList = usePluginStore(pluginSelectors.pluginList);
+
+  const pluginManifestMap = usePluginStore((s) => s.pluginManifestMap, isEqual);
+  const pluginsSettings = usePluginStore((s) => s.pluginsSettings, isEqual);
+  useFetchPluginList();
+
+  const isEmpty = pluginList.length === 0;
+
+  const pluginsConfig = isEmpty
+    ? []
+    : (plugins
+        .map((identifier) => {
+          const item = pluginList.find((i) => i.identifier === identifier);
+
+          if (!item) return null;
+          const manifest = pluginManifestMap[identifier];
+
+          if (!manifest?.settings) return null;
+
+          return {
+            children: transformPluginSettings(manifest.settings).map((item) => ({
+              ...item,
+              children: (
+                <PluginSettingRender
+                  defaultValue={pluginsSettings[identifier]?.[item.name]}
+                  format={item.format}
+                  onChange={(value) => {
+                    updatePluginSettings(identifier, { [item.name]: value });
+                  }}
+                  type={item.type as any}
+                />
+              ),
+              desc: item.desc && <Markdown className={styles.md}>{item.desc}</Markdown>,
+            })),
+            icon: ToyBrick,
+            title: t('settingPlugin.config', { id: pluginHelpers.getPluginTitle(item.meta) }),
+          };
+        })
+        .filter(Boolean) as unknown as ItemGroup[]);
+
+  return <Form items={pluginsConfig} {...FORM_STYLE} />;
+});
+
+export default PluginSettings;

package/src/features/AgentSetting/AgentPlugin/index.tsx

@@ -1,148 +1,13 @@
-import { Avatar, Form, ItemGroup, Markdown } from '@lobehub/ui';
-import { Skeleton, Switch } from 'antd';
-import { createStyles } from 'antd-style';
-import isEqual from 'fast-deep-equal';
-import { LucideStore, ToyBrick } from 'lucide-react';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 
-import { FORM_STYLE } from '@/const/layoutTokens';
-import { transformPluginSettings } from '@/features/PluginSettings';
-import PluginSettingRender from '@/features/PluginSettings/PluginSettingRender';
-import { pluginHelpers, usePluginStore } from '@/store/plugin';
+import MarketList from './MarketList';
+import PluginSettings from './PluginSettings';
 
-import { useStore } from '../store';
-
-const useStyles = createStyles(({ css, token }) => ({
-  avatar: css`
-    .ant-skeleton-header {
-      padding-right: 0;
-    }
-  `,
-  label: css`
-    li {
-      height: 14px !important;
-    }
-
-    li + li {
-      margin-block-start: 12px !important;
-    }
-  `,
-  md: css`
-    p {
-      color: ${token.colorTextDescription};
-    }
-  `,
-}));
-
-const AgentPlugin = memo(() => {
-  const { t } = useTranslation('setting');
-  const { styles } = useStyles();
-
-  const updateConfig = useStore((s) => s.toggleAgentPlugin);
-  const [plugins, hasPlugin] = useStore((s) => [s.config.plugins || [], !!s.config.plugins]);
-
-  const [useFetchPluginList, fetchPluginManifest, updatePluginSettings] = usePluginStore((s) => [
-    s.useFetchPluginList,
-    s.fetchPluginManifest,
-    s.updatePluginSettings,
-  ]);
-  const pluginManifestLoading = usePluginStore((s) => s.pluginManifestLoading, isEqual);
-  const pluginManifestMap = usePluginStore((s) => s.pluginManifestMap, isEqual);
-  const pluginsSettings = usePluginStore((s) => s.pluginsSettings, isEqual);
-  const { data } = useFetchPluginList();
-
-  const loadingItem = {
-    avatar: (
-      <Skeleton
-        active
-        avatar={{ size: 40 }}
-        className={styles.avatar}
-        paragraph={false}
-        title={false}
-      />
-    ),
-    label: (
-      <Skeleton
-        active
-        avatar={false}
-        paragraph={{ className: styles.label, style: { marginBottom: 0 } }}
-        style={{ width: 300 }}
-        title={false}
-      />
-    ),
-  };
-
-  const children = !data
-    ? [loadingItem, loadingItem, loadingItem]
-    : data.plugins.map(({ identifier, meta }) => ({
-        avatar: <Avatar avatar={meta.avatar} />,
-        children: (
-          <Switch
-            checked={
-              // 如果在加载中，说明激活了
-              pluginManifestLoading[identifier] || !hasPlugin ? false : plugins.includes(identifier)
-            }
-            loading={pluginManifestLoading[identifier]}
-            onChange={(checked) => {
-              updateConfig(identifier);
-              if (checked) {
-                fetchPluginManifest(identifier);
-              }
-            }}
-          />
-        ),
-        desc: pluginHelpers.getPluginDesc(meta),
-        label: pluginHelpers.getPluginTitle(meta),
-        minWidth: undefined,
-        tag: identifier,
-      }));
-
-  const pluginsConfig = !data
-    ? []
-    : (plugins
-        .map((identifier) => {
-          const item = data.plugins.find((i) => i.identifier === identifier);
-
-          if (!item) return null;
-          const manifest = pluginManifestMap[identifier];
-
-          if (!manifest?.settings) return null;
-
-          return {
-            children: transformPluginSettings(manifest.settings).map((item) => ({
-              ...item,
-              children: (
-                <PluginSettingRender
-                  defaultValue={pluginsSettings[identifier]?.[item.name]}
-                  format={item.format}
-                  onChange={(value) => {
-                    updatePluginSettings(identifier, { [item.name]: value });
-                  }}
-                  type={item.type as any}
-                />
-              ),
-              desc: item.desc && <Markdown className={styles.md}>{item.desc}</Markdown>,
-            })),
-            icon: ToyBrick,
-            title: t('settingPlugin.config', { id: pluginHelpers.getPluginTitle(item.meta) }),
-          };
-        })
-        .filter(Boolean) as unknown as ItemGroup[]);
-
-  return (
-    <Form
-      items={[
-        {
-          children,
-          icon: LucideStore,
-          title: t('settingPlugin.title'),
-        },
-        ...pluginsConfig,
-      ]}
-      {...FORM_STYLE}
-    />
-  );
-});
+const AgentPlugin = memo(() => (
+  <>
+    <MarketList />
+    <PluginSettings />
+  </>
+));
 
 export default AgentPlugin;

package/src/features/PluginDevModal/ManifestForm.tsx

@@ -0,0 +1,96 @@
+import { pluginManifestSchema } from '@lobehub/chat-plugin-sdk';
+import { Form, FormItemProps, Input, Tooltip } from '@lobehub/ui';
+import { FormInstance, Radio } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const ManifestForm = memo<{ form: FormInstance; mode: 'url' | 'local' }>(({ form, mode }) => {
+  const { t } = useTranslation('plugin');
+
+  const isUrl = mode === 'url';
+
+  const configItem: FormItemProps[] = isUrl
+    ? [
+        {
+          children: <Input placeholder={'http://localhost/manifest.json'} />,
+          desc: t('dev.meta.manifest.desc'),
+          hasFeedback: true,
+          label: t('dev.meta.manifest.label'),
+          name: 'manifest',
+          required: true,
+          rules: [
+            { required: true },
+            {
+              message: t('dev.meta.manifest.urlError'),
+              pattern: /^https?:\/\/.*/,
+            },
+            {
+              message: t('dev.meta.manifest.invalid'),
+              validator: async (_, value) => {
+                const res = await fetch(value);
+                if (!res.ok) return true;
+
+                const json = await res.json();
+                pluginManifestSchema.parse(json);
+              },
+            },
+          ],
+        },
+      ]
+    : // TODO: 后续做成本地配置模式
+      [
+        {
+          children: <Input placeholder={'searchEngine'} />,
+          desc: t('dev.meta.identifier.desc'),
+          label: t('dev.meta.identifier.label'),
+          name: 'name',
+          required: true,
+        },
+
+        {
+          children: <Input placeholder={t('dev.meta.description.placeholder')} />,
+          desc: t('dev.meta.description.desc'),
+          label: t('dev.meta.description.label'),
+          name: 'description',
+          required: true,
+        },
+        {
+          children: <Input placeholder={'searchEngine'} />,
+          desc: t('dev.meta.identifier.desc'),
+          label: t('dev.meta.identifier.label'),
+          name: 'identifier',
+          required: true,
+        },
+      ];
+
+  return (
+    <Form
+      form={form}
+      items={[
+        {
+          children: configItem,
+          extra: (
+            <Radio.Group
+              onChange={(v) => {
+                form.setFieldValue('manifestMode', v.target.value);
+              }}
+              size={'small'}
+              value={mode}
+            >
+              <Radio.Button value={'url'}>{t('dev.manifest.mode.url')}</Radio.Button>
+              <Tooltip title={t('dev.manifest.mode.local-tooltip')}>
+                <Radio.Button disabled value={'local'}>
+                  {t('dev.manifest.mode.local')}
+                </Radio.Button>
+              </Tooltip>
+            </Radio.Group>
+          ),
+          title: t('dev.tabs.manifest'),
+        },
+      ]}
+      layout={isUrl ? 'vertical' : undefined}
+    />
+  );
+});
+
+export default ManifestForm;

package/src/features/PluginDevModal/MetaForm.tsx

@@ -0,0 +1,90 @@
+import { Form, FormItemProps, Input } from '@lobehub/ui';
+import { FormInstance } from 'antd';
+import { memo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import EmojiPicker from '@/components/EmojiPicker';
+import { pluginSelectors, usePluginStore } from '@/store/plugin';
+
+const MetaForm = memo<{ form: FormInstance }>(({ form }) => {
+  const { t } = useTranslation('plugin');
+  const [plugins] = usePluginStore((s) => [pluginSelectors.pluginList(s).map((i) => i.identifier)]);
+
+  useEffect(() => {
+    if (usePluginStore.getState().newDevPlugin) {
+      form.setFieldsValue(usePluginStore.getState().newDevPlugin);
+    }
+  }, []);
+
+  const configItem: FormItemProps[] = [
+    {
+      children: <Input placeholder={'searchEngine'} />,
+      desc: t('dev.meta.identifier.desc'),
+      label: t('dev.meta.identifier.label'),
+      name: 'identifier',
+      rules: [
+        { required: true },
+        {
+          message: t('dev.meta.identifier.pattenErrorMessage'),
+          pattern: /^[\w-]+$/,
+        },
+        {
+          message: t('dev.meta.identifier.errorDuplicate'),
+          validator: async (_, value) => {
+            if (plugins.includes(value)) {
+              throw new Error('Duplicate');
+            }
+          },
+        },
+      ],
+    },
+    {
+      children: <Input placeholder={t('dev.meta.title.placeholder')} />,
+      desc: t('dev.meta.title.desc'),
+      label: t('dev.meta.title.label'),
+      name: ['meta', 'title'],
+      rules: [{ required: true }],
+    },
+    {
+      children: <Input placeholder={t('dev.meta.description.placeholder')} />,
+      desc: t('dev.meta.description.desc'),
+      label: t('dev.meta.description.label'),
+      name: ['meta', 'description'],
+    },
+    {
+      children: <Input placeholder={'LobeHub'} />,
+      desc: t('dev.meta.author.desc'),
+      label: t('dev.meta.author.label'),
+      name: 'author',
+    },
+    {
+      children: <Input placeholder={'https://www.lobehub.com'} />,
+      desc: t('dev.meta.homepage.desc'),
+      label: t('dev.meta.homepage.label'),
+      name: 'homepage',
+    },
+    {
+      children: <EmojiPicker defaultAvatar={'🧩'} />,
+      desc: t('dev.meta.avatar.desc'),
+      label: t('dev.meta.avatar.label'),
+      name: ['meta', 'avatar'],
+    },
+  ];
+
+  return (
+    <Form
+      form={form}
+      items={[
+        {
+          children: configItem,
+          title: t('dev.metaConfig'),
+        },
+      ]}
+      validateMessages={{
+        required: () => t('dev.meta.formFieldRequired'),
+      }}
+    />
+  );
+});
+
+export default MetaForm;

package/src/features/PluginDevModal/PluginPreview.tsx

@@ -0,0 +1,36 @@
+import { Avatar, Form } from '@lobehub/ui';
+import { Card, Switch, Tag } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { pluginHelpers, usePluginStore } from '@/store/plugin';
+
+const PluginPreview = memo(() => {
+  const { t } = useTranslation('plugin');
+  const meta = usePluginStore((s) => s.newDevPlugin);
+
+  const items = {
+    avatar: <Avatar avatar={pluginHelpers.getPluginAvatar(meta?.meta) || '🧩'} />,
+    children: <Switch disabled />,
+    desc: pluginHelpers.getPluginDesc(meta?.meta),
+    label: (
+      <Flexbox align={'center'} gap={8} horizontal>
+        {pluginHelpers.getPluginTitle(meta?.meta) ?? t('dev.preview.title')}
+        <Tag bordered={false} color={'gold'}>
+          {t('list.item.local.title', { ns: 'plugin' })}
+        </Tag>
+      </Flexbox>
+    ),
+    minWidth: undefined,
+    tag: !!meta?.identifier ? meta?.identifier : 'id',
+  };
+
+  return (
+    <Card size={'small'} title={t('dev.preview.card')}>
+      <Form.Item {...items} colon={false} style={{ marginBottom: 0 }} />
+    </Card>
+  );
+});
+
+export default PluginPreview;