@lobehub/chat 0.111.6 → 0.112.0

package/src/features/PluginDevModal/PluginPreview.tsx

@@ -1,9 +1,10 @@
 import { Avatar, Form } from '@lobehub/ui';
-import { Form as AForm, Card, FormInstance, Switch, Tag } from 'antd';
+import { Form as AForm, Card, FormInstance } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import PluginTag from '@/features/PluginStore/PluginItem/PluginTag';
 import { pluginHelpers } from '@/store/tool';
 import { LobeToolCustomPlugin } from '@/types/tool/plugin';
 
@@ -11,26 +12,23 @@ const PluginPreview = memo<{ form: FormInstance }>(({ form }) => {
   const { t } = useTranslation('plugin');
 
   const plugin: LobeToolCustomPlugin = AForm.useWatch([], form);
+  const meta = plugin?.manifest?.meta;
 
   const items = {
-    avatar: <Avatar avatar={pluginHelpers.getPluginAvatar(plugin?.manifest?.meta)} />,
-    children: <Switch disabled />,
-    desc: pluginHelpers.getPluginDesc(plugin?.manifest?.meta),
+    avatar: <Avatar avatar={pluginHelpers.getPluginAvatar(meta)} style={{ flex: 'none' }} />,
+    desc: pluginHelpers.getPluginDesc(meta) || 'Plugin Description',
     label: (
       <Flexbox align={'center'} gap={8} horizontal>
-        {pluginHelpers.getPluginTitle(plugin?.manifest?.meta) ?? t('dev.preview.title')}
-        <Tag bordered={false} color={'gold'}>
-          {t('list.item.local.title', { ns: 'plugin' })}
-        </Tag>
+        {pluginHelpers.getPluginTitle(meta) || 'Plugin Title'}
+        <PluginTag type={'customPlugin'} />
       </Flexbox>
     ),
     minWidth: undefined,
-    tag: !!plugin?.identifier ? plugin?.identifier : 'id',
   };
 
   return (
     <Card size={'small'} title={t('dev.preview.card')}>
-      <Form.Item {...items} colon={false} style={{ marginBottom: 0 }} />
+      <Form.Item {...items} colon={false} style={{ alignItems: 'center', marginBottom: 0 }} />
     </Card>
   );
 });

package/src/features/PluginDevModal/UrlManifestForm.tsx

@@ -0,0 +1,131 @@
+import { LobeChatPluginManifest } from '@lobehub/chat-plugin-sdk';
+import { ActionIcon, FormItem, Input } from '@lobehub/ui';
+import { Checkbox, Form, FormInstance } from 'antd';
+import { FileCode, RotateCwIcon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import ManifestPreviewer from '@/components/ManifestPreviewer';
+import { pluginService } from '@/services/plugin';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+import { PluginInstallError } from '@/types/tool/plugin';
+
+const ProxyChecker = memo<{ onChange?: (value: boolean) => void; value?: boolean }>(
+  ({ value, onChange }) => {
+    const { t } = useTranslation('plugin');
+
+    return (
+      <Flexbox
+        gap={8}
+        horizontal
+        onClick={() => {
+          onChange?.(!value);
+        }}
+        style={{ cursor: 'pointer' }}
+      >
+        <Checkbox checked={value} /> {t('dev.customParams.useProxy.label')}
+      </Flexbox>
+    );
+  },
+);
+
+const UrlManifestForm = memo<{ form: FormInstance; isEditMode: boolean }>(
+  ({ form, isEditMode }) => {
+    const { t } = useTranslation('plugin');
+
+    const [manifest, setManifest] = useState<LobeChatPluginManifest>();
+
+    const urlKey = ['customParams', 'manifestUrl'];
+    const proxyKey = ['customParams', 'useProxy'];
+    const pluginIds = useToolStore(pluginSelectors.storeAndInstallPluginsIdList);
+
+    return (
+      <Form form={form} layout={'vertical'}>
+        <FormItem
+          extra={
+            <Flexbox horizontal justify={'space-between'} style={{ marginTop: 8 }}>
+              {t('dev.meta.manifest.desc')}
+              {manifest && (
+                <ManifestPreviewer manifest={manifest}>
+                  <ActionIcon
+                    icon={FileCode}
+                    size={'small'}
+                    title={t('dev.meta.manifest.preview')}
+                  />
+                </ManifestPreviewer>
+              )}
+            </Flexbox>
+          }
+          hasFeedback
+          label={t('dev.meta.manifest.label')}
+          name={urlKey}
+          required
+          rules={[
+            { required: true },
+            {
+              message: t('error.urlError'),
+              pattern: /^https?:\/\/.*/,
+            },
+            {
+              validator: async (_, value) => {
+                if (!value) return true;
+
+                try {
+                  const useProxy = form.getFieldValue(proxyKey);
+                  const data = await pluginService.getPluginManifest(value, useProxy);
+                  setManifest(data);
+
+                  form.setFieldsValue({ identifier: data.identifier, manifest: data });
+                } catch (error) {
+                  const err = error as PluginInstallError;
+                  throw t(`error.${err.message}`, { error: err.cause! });
+                }
+              },
+            },
+            // 编辑模式下，不进行重复校验
+            isEditMode
+              ? {}
+              : {
+                  message: t('dev.meta.identifier.errorDuplicate'),
+                  validator: async () => {
+                    const id = form.getFieldValue('identifier');
+                    if (!id) return true;
+
+                    if (pluginIds.includes(id)) {
+                      throw new Error('Duplicate');
+                    }
+                  },
+                },
+          ]}
+          style={{ marginBottom: 0 }}
+        >
+          <Input
+            placeholder={'http://localhost:3400/manifest-dev.json'}
+            suffix={
+              <ActionIcon
+                icon={RotateCwIcon}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  form.validateFields([urlKey, 'identifier']);
+                }}
+                size={'small'}
+                title={t('dev.meta.manifest.refresh')}
+              />
+            }
+          />
+        </FormItem>
+
+        <FormItem name={proxyKey} noStyle>
+          <ProxyChecker />
+        </FormItem>
+
+        <FormItem name={'identifier'} noStyle />
+        <FormItem name={'manifest'} noStyle />
+      </Form>
+    );
+  },
+);
+
+export default UrlManifestForm;

package/src/features/PluginDevModal/index.tsx

@@ -1,5 +1,5 @@
 import { Alert, Icon, Modal, Tooltip } from '@lobehub/ui';
-import { App, Button, Form, Popconfirm, Segmented } from 'antd';
+import { App, Button, Divider, Form, Popconfirm, Segmented } from 'antd';
 import { useResponsive } from 'antd-style';
 import { MoveUpRight } from 'lucide-react';
 import { memo, useEffect, useState } from 'react';
@@ -10,9 +10,8 @@ import MobilePadding from '@/components/MobilePadding';
 import { WIKI_PLUGIN_GUIDE } from '@/const/url';
 import { LobeToolCustomPlugin } from '@/types/tool/plugin';
 
-import LocalForm from './LocalForm';
 import PluginPreview from './PluginPreview';
-import UrlModeForm from './UrlModeForm';
+import UrlManifestForm from './UrlManifestForm';
 
 interface DevModalProps {
   mode?: 'edit' | 'create';
@@ -108,7 +107,7 @@ const DevModal = memo<DevModalProps>(
             form.submit();
           }}
           open={open}
-          title={t('dev.title')}
+          title={t(isEditMode ? 'dev.title.edit' : 'dev.title.create')}
         >
           <Flexbox
             gap={mobile ? 0 : 16}
@@ -135,35 +134,35 @@ const DevModal = memo<DevModalProps>(
                 showIcon
                 type={'info'}
               />
+              <Segmented
+                block
+                onChange={(e) => {
+                  setConfigMode(e as any);
+                }}
+                options={[
+                  {
+                    label: t('dev.manifest.mode.url'),
+                    value: 'url',
+                  },
+                  {
+                    disabled: true,
+                    label: (
+                      <Tooltip title={t('dev.manifest.mode.local-tooltip')}>
+                        {t('dev.manifest.mode.local')}
+                      </Tooltip>
+                    ),
+                    value: 'local',
+                  },
+                ]}
+              />
+              <Flexbox>
+                {configMode === 'url' ? (
+                  <UrlManifestForm form={form} isEditMode={mode === 'edit'} />
+                ) : null}
+                <Divider />
+                <PluginPreview form={form} />
+              </Flexbox>
             </MobilePadding>
-            <PluginPreview form={form} />
-            <Segmented
-              block
-              onChange={(e) => {
-                setConfigMode(e as any);
-              }}
-              options={[
-                {
-                  label: t('dev.manifest.mode.url'),
-                  value: 'url',
-                },
-                {
-                  disabled: true,
-                  label: (
-                    <Tooltip title={t('dev.manifest.mode.local-tooltip')}>
-                      {t('dev.manifest.mode.local')}
-                    </Tooltip>
-                  ),
-                  value: 'local',
-                },
-              ]}
-            />
-            {configMode === 'url' ? (
-              <UrlModeForm form={form} isEditMode={mode === 'edit'} />
-            ) : (
-              <LocalForm form={form} mode={mode} />
-            )}
-            {/*<MetaForm form={form} mode={mode} />*/}
           </Flexbox>
         </Modal>
       </Form.Provider>

package/src/features/PluginSettings/index.tsx

@@ -53,7 +53,7 @@ const PluginSettingsConfig = memo<PluginSettingsConfigProps>(({ schema, id }) =>
   const items = transformPluginSettings(schema);
 
   return (
-    <Form form={form} layout={'vertical'}>
+    <Form form={form} layout={'vertical'} style={{ width: '100%' }}>
       {items.map((item) => (
         <Form.Item
           desc={item.desc && <Markdown className={styles.markdown}>{item.desc as string}</Markdown>}

package/src/features/PluginStore/AddPluginButton.tsx

@@ -0,0 +1,47 @@
+import { Icon } from '@lobehub/ui';
+import { Button } from 'antd';
+import { PackagePlus } from 'lucide-react';
+import { forwardRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import DevModal from '@/features/PluginDevModal';
+import { useToolStore } from '@/store/tool';
+
+const AddPluginButton = forwardRef<HTMLButtonElement>((props, ref) => {
+  const { t } = useTranslation('setting');
+  const [showModal, setModal] = useState(false);
+
+  const [installCustomPlugin, updateNewDevPlugin] = useToolStore((s) => [
+    s.installCustomPlugin,
+    s.updateNewCustomPlugin,
+  ]);
+
+  return (
+    <div
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+    >
+      <DevModal
+        onOpenChange={setModal}
+        onSave={async (devPlugin) => {
+          await installCustomPlugin(devPlugin);
+          // toggleAgentPlugin(devPlugin.identifier);
+        }}
+        onValueChange={updateNewDevPlugin}
+        open={showModal}
+      />
+      <Button
+        icon={<Icon icon={PackagePlus} />}
+        onClick={() => {
+          setModal(true);
+        }}
+        ref={ref}
+      >
+        {t('plugin.addTooltip')}
+      </Button>
+    </div>
+  );
+});
+
+export default AddPluginButton;

package/src/features/PluginStore/InstalledPluginList.tsx

@@ -0,0 +1,54 @@
+import { SearchBar } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+
+import AddPluginButton from './AddPluginButton';
+import PluginItem from './PluginItem';
+
+export const InstalledPluginList = memo(() => {
+  const { t } = useTranslation('plugin');
+  const [keywords, setKeywords] = useState<string>();
+  const { mobile } = useResponsive();
+  const installedPlugins = useToolStore(pluginSelectors.installedPluginMetaList, isEqual);
+
+  return (
+    <Flexbox gap={16}>
+      <Flexbox align={'center'} gap={16} horizontal justify={'space-between'}>
+        <Flexbox flex={1}>
+          <SearchBar
+            allowClear
+            onChange={(e) => setKeywords(e.target.value)}
+            placeholder={t('store.placeholder')}
+            type={mobile ? 'block' : 'ghost'}
+            value={keywords}
+          />
+        </Flexbox>
+        <Flexbox gap={8} horizontal>
+          <AddPluginButton />
+        </Flexbox>
+      </Flexbox>
+
+      <Flexbox gap={24}>
+        {installedPlugins
+          .filter((item) =>
+            [item.meta?.title, item.meta?.description, item.author, ...(item.meta?.tags || [])]
+              .filter(Boolean)
+              .join('')
+              .toLowerCase()
+              .includes((keywords || '')?.toLowerCase()),
+          )
+          .map((i) => (
+            <PluginItem {...i} key={i.identifier} />
+          ))}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default InstalledPluginList;

package/src/features/PluginStore/OnlineList.tsx

@@ -0,0 +1,95 @@
+import { Icon, SearchBar } from '@lobehub/ui';
+import { Button, Empty } from 'antd';
+import { useResponsive } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { ServerCrash } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import AddPluginButton from '@/features/PluginStore/AddPluginButton';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors, pluginStoreSelectors } from '@/store/tool/selectors';
+
+import Loading from './Loading';
+import PluginItem from './PluginItem';
+
+export const OnlineList = memo(() => {
+  const { t } = useTranslation('plugin');
+  const [keywords, setKeywords] = useState<string>();
+  const { mobile } = useResponsive();
+  const pluginStoreList = useToolStore((s) => {
+    const custom = pluginSelectors.installedCustomPluginMetaList(s);
+    const store = pluginStoreSelectors.onlinePluginStore(s);
+
+    return [...custom, ...store];
+  }, isEqual);
+  const storePluginIds = useToolStore(
+    (s) => pluginStoreSelectors.onlinePluginStore(s).map((s) => s.identifier),
+    isEqual,
+  );
+
+  const [useFetchPluginList, installPlugins] = useToolStore((s) => [
+    s.useFetchPluginStore,
+    s.installPlugins,
+  ]);
+
+  const { isLoading, error } = useFetchPluginList();
+
+  const isEmpty = pluginStoreList.length === 0;
+
+  return (
+    <Flexbox gap={16}>
+      <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>
+        <Flexbox flex={1}>
+          <SearchBar
+            allowClear
+            onChange={(e) => setKeywords(e.target.value)}
+            placeholder={t('store.placeholder')}
+            type={mobile ? 'block' : 'ghost'}
+            value={keywords}
+          />
+        </Flexbox>
+        <AddPluginButton />
+        <Button
+          onClick={() => {
+            installPlugins(storePluginIds);
+          }}
+        >
+          {t('store.installAllPlugins')}
+        </Button>
+      </Flexbox>
+
+      {isLoading ? (
+        <Loading />
+      ) : isEmpty ? (
+        <Center gap={12} padding={40}>
+          {error ? (
+            <>
+              <Icon icon={ServerCrash} size={{ fontSize: 80 }} />
+              {t('store.networkError')}
+            </>
+          ) : (
+            <Empty description={t('store.empty')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
+          )}
+        </Center>
+      ) : (
+        <Flexbox gap={24}>
+          {pluginStoreList
+            .filter((item) =>
+              [item.meta?.title, item.meta?.description, item.author, ...(item.meta?.tags || [])]
+                .filter(Boolean)
+                .join('')
+                .toLowerCase()
+                .includes((keywords || '')?.toLowerCase()),
+            )
+            .map((item) => (
+              <PluginItem key={item.identifier} {...item} />
+            ))}
+        </Flexbox>
+      )}
+    </Flexbox>
+  );
+});
+
+export default OnlineList;

package/src/features/PluginStore/PluginItem/Action.tsx

@@ -0,0 +1,118 @@
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { Button, Dropdown, Popconfirm } from 'antd';
+import { useResponsive } from 'antd-style';
+import { InfoIcon, MoreVerticalIcon, Settings, Trash2 } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import PluginDetailModal from '@/features/PluginDetailModal';
+import { pluginHelpers, useToolStore } from '@/store/tool';
+import { pluginSelectors, pluginStoreSelectors } from '@/store/tool/selectors';
+import { LobeToolType } from '@/types/tool/tool';
+
+import EditCustomPlugin from './EditCustomPlugin';
+
+interface ActionsProps {
+  identifier: string;
+  type: LobeToolType;
+}
+
+const Actions = memo<ActionsProps>(({ identifier, type }) => {
+  const [installed, installing, installPlugin, unInstallPlugin] = useToolStore((s) => [
+    pluginSelectors.isPluginInstalled(identifier)(s),
+    pluginStoreSelectors.isPluginInstallLoading(identifier)(s),
+    s.installPlugin,
+    s.uninstallPlugin,
+  ]);
+  const { mobile } = useResponsive();
+  const isCustomPlugin = type === 'customPlugin';
+  const { t } = useTranslation('plugin');
+  const [open, setOpen] = useState(false);
+  const plugin = useToolStore(pluginSelectors.getPluginManifestById(identifier));
+
+  const [tab, setTab] = useState('info');
+  const hasSettings = pluginHelpers.isSettingSchemaNonEmpty(plugin?.settings);
+
+  return (
+    <>
+      <Flexbox align={'center'} horizontal>
+        {installed ? (
+          <>
+            {isCustomPlugin && <EditCustomPlugin identifier={identifier} />}
+            {hasSettings && (
+              <ActionIcon
+                icon={Settings}
+                onClick={() => {
+                  setOpen(true);
+                  setTab('settings');
+                }}
+                title={t('store.actions.settings')}
+              />
+            )}
+            <Dropdown
+              menu={{
+                items: [
+                  {
+                    icon: <Icon icon={InfoIcon} />,
+                    key: 'detail',
+                    label: t('store.actions.detail'),
+                    onClick: () => {
+                      setOpen(true);
+                      setTab('info');
+                    },
+                  },
+                  {
+                    danger: true,
+                    icon: <Icon icon={Trash2} />,
+                    key: 'uninstall',
+                    label: (
+                      <Popconfirm
+                        arrow={false}
+                        okButtonProps={{ danger: true }}
+                        onConfirm={() => {
+                          unInstallPlugin(identifier);
+                        }}
+                        placement={'topRight'}
+                        title={t('store.actions.confirmUninstall')}
+                      >
+                        {t('store.actions.uninstall')}
+                      </Popconfirm>
+                    ),
+                  },
+                ],
+              }}
+              placement="bottomRight"
+              trigger={['click']}
+            >
+              <ActionIcon icon={MoreVerticalIcon} loading={installing} />
+            </Dropdown>
+          </>
+        ) : (
+          <Button
+            loading={installing}
+            onClick={() => {
+              installPlugin(identifier);
+            }}
+            size={mobile ? 'small' : undefined}
+            type={'primary'}
+          >
+            {t('store.actions.install')}
+          </Button>
+        )}
+      </Flexbox>
+      <PluginDetailModal
+        id={identifier}
+        onClose={() => {
+          setOpen(false);
+        }}
+        onTabChange={setTab}
+        open={open}
+        schema={plugin?.settings}
+        tab={tab}
+      />
+    </>
+  );
+});
+
+export default Actions;

package/src/features/PluginStore/PluginItem/EditCustomPlugin.tsx

@@ -0,0 +1,50 @@
+import { ActionIcon } from '@lobehub/ui';
+import isEqual from 'fast-deep-equal';
+import { PackageSearch } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import DevModal from '@/features/PluginDevModal';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/slices/plugin/selectors';
+
+const EditCustomPlugin = memo<{ identifier: string }>(({ identifier }) => {
+  const { t } = useTranslation('plugin');
+  const [showModal, setModal] = useState(false);
+
+  const [installCustomPlugin, updateNewDevPlugin] = useToolStore((s) => [
+    s.installCustomPlugin,
+    s.updateNewCustomPlugin,
+  ]);
+
+  const customPlugin = useToolStore(pluginSelectors.getCustomPluginById(identifier), isEqual);
+
+  return (
+    <div
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+    >
+      <DevModal
+        mode={'edit'}
+        onOpenChange={setModal}
+        onSave={async (devPlugin) => {
+          await installCustomPlugin(devPlugin);
+          // toggleAgentPlugin(devPlugin.identifier);
+        }}
+        onValueChange={updateNewDevPlugin}
+        open={showModal}
+        value={customPlugin}
+      />
+      <ActionIcon
+        icon={PackageSearch}
+        onClick={() => {
+          setModal(true);
+        }}
+        title={t('store.actions.manifest')}
+      />
+    </div>
+  );
+});
+
+export default EditCustomPlugin;