@lobehub/chat 0.108.0 → 0.109.0

package/src/features/PluginDevModal/MetaForm.tsx

@@ -5,8 +5,8 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { settingsSelectors, useGlobalStore } from '@/store/global';
-import { usePluginStore } from '@/store/plugin';
-import { pluginSelectors } from '@/store/plugin/selectors';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
 
 const EmojiPicker = dynamic(() => import('@lobehub/ui/es/EmojiPicker'), { ssr: false });
 
@@ -14,7 +14,7 @@ const MetaForm = memo<{ form: FormInstance; mode?: 'edit' | 'create' }>(({ form,
   const isEditMode = mode === 'edit';
   const locale = useGlobalStore(settingsSelectors.currentLanguage);
   const { t } = useTranslation('plugin');
-  const [plugins] = usePluginStore((s) => [pluginSelectors.pluginList(s).map((i) => i.identifier)]);
+  const [plugins] = useToolStore((s) => [pluginSelectors.pluginList(s).map((i) => i.identifier)]);
 
   const configItem: FormItemProps[] = [
     {

package/src/features/PluginDevModal/PluginPreview.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { pluginHelpers } from '@/store/plugin';
+import { pluginHelpers } from '@/store/tool';
 import { CustomPlugin } from '@/types/plugin';
 
 const PluginPreview = memo<{ form: FormInstance }>(({ form }) => {

package/src/features/PluginDevModal/index.tsx

@@ -96,7 +96,10 @@ const DevModal = memo<DevModalProps>(
           cancelText={t('cancel', { ns: 'common' })}
           footer={footer}
           okText={t('dev.save')}
-          onCancel={() => onOpenChange(false)}
+          onCancel={(e) => {
+            e.stopPropagation();
+            onOpenChange(false);
+          }}
           onOk={() => form.submit()}
           open={open}
           title={t('dev.title')}

package/src/features/PluginSettings/index.tsx

@@ -4,7 +4,7 @@ import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 
-import { usePluginStore } from '@/store/plugin';
+import { useToolStore } from '@/store/tool';
 
 import PluginSettingRender from './PluginSettingRender';
 
@@ -41,8 +41,8 @@ const PluginSettingsConfig = memo<PluginSettingsConfigProps>(({ schema, id }) =>
   const items = transformPluginSettings(schema);
 
   const { styles } = useStyles();
-  const [updatePluginSettings] = usePluginStore((s) => [s.updatePluginSettings]);
-  const pluginSetting = usePluginStore((s) => s.pluginsSettings[id] || {}, isEqual);
+  const [updatePluginSettings] = useToolStore((s) => [s.updatePluginSettings]);
+  const pluginSetting = useToolStore((s) => s.pluginsSettings[id] || {}, isEqual);
 
   return (
     <Form layout={'vertical'}>

package/src/features/PluginSettingsModal/index.tsx

@@ -6,9 +6,10 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
+import MobilePadding from '@/components/MobilePadding';
 import PluginSettingsConfig from '@/features/PluginSettings';
-import { pluginHelpers, usePluginStore } from '@/store/plugin';
-import { pluginSelectors } from '@/store/plugin/selectors';
+import { pluginHelpers, useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
 
 interface PluginSettingsModalProps {
   id: string;
@@ -18,27 +19,31 @@ interface PluginSettingsModalProps {
 }
 
 const PluginSettingsModal = memo<PluginSettingsModalProps>(({ schema, onClose, id, open }) => {
-  const pluginMeta = usePluginStore(pluginSelectors.getPluginMetaById(id), isEqual);
+  const pluginMeta = useToolStore(pluginSelectors.getPluginMetaById(id), isEqual);
 
   const { t } = useTranslation('plugin');
   const theme = useTheme();
   return (
     <Modal onCancel={onClose} open={open} title={t('setting')} width={600}>
-      <Center gap={16}>
-        <Avatar
-          avatar={pluginHelpers.getPluginAvatar(pluginMeta?.meta) || '⚙️'}
-          background={theme.colorFillContent}
-          gap={12}
-          size={64}
-        />
+      <MobilePadding>
+        <Center gap={16}>
+          <Avatar
+            avatar={pluginHelpers.getPluginAvatar(pluginMeta?.meta) || '⚙️'}
+            background={theme.colorFillContent}
+            gap={12}
+            size={64}
+          />
 
-        <Flexbox style={{ fontSize: 20 }}>{pluginHelpers.getPluginTitle(pluginMeta?.meta)}</Flexbox>
-        <Typography.Text type={'secondary'}>
-          {pluginHelpers.getPluginDesc(pluginMeta?.meta)}
-        </Typography.Text>
-        <Divider style={{ marginBottom: 0, marginTop: 8 }} />
-        {schema && <PluginSettingsConfig id={id} schema={schema} />}
-      </Center>
+          <Flexbox style={{ fontSize: 20 }}>
+            {pluginHelpers.getPluginTitle(pluginMeta?.meta)}
+          </Flexbox>
+          <Typography.Text type={'secondary'}>
+            {pluginHelpers.getPluginDesc(pluginMeta?.meta)}
+          </Typography.Text>
+          <Divider style={{ marginBottom: 0, marginTop: 8 }} />
+          {schema && <PluginSettingsConfig id={id} schema={schema} />}
+        </Center>
+      </MobilePadding>
     </Modal>
   );
 });

package/src/features/PluginStore/Loading.tsx

@@ -0,0 +1,13 @@
+import { Skeleton } from 'antd';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const Loading = memo(() => {
+  return (
+    <Flexbox>
+      <Skeleton paragraph={{ rows: 8 }} />
+    </Flexbox>
+  );
+});
+
+export default Loading;

package/src/features/PluginStore/PluginItem.tsx

@@ -0,0 +1,81 @@
+import { LobeChatPluginMeta } from '@lobehub/chat-plugin-sdk';
+import { Avatar, Tag } from '@lobehub/ui';
+import { Button } from 'antd';
+import { createStyles } from 'antd-style';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useToolStore } from '@/store/tool';
+import { pluginStoreSelectors } from '@/store/tool/selectors';
+
+import PluginSettings from './PluginSettings';
+
+const useStyles = createStyles(({ css, token }) => ({
+  desc: css`
+    color: ${token.colorTextSecondary};
+  `,
+  link: css`
+    color: ${token.colorTextDescription};
+  `,
+  tag: css`
+    font-weight: normal;
+  `,
+  title: css`
+    font-size: ${token.fontSizeLG}px;
+    font-weight: bold;
+    line-height: 2;
+  `,
+}));
+const PluginItem = memo<LobeChatPluginMeta>(({ identifier, createdAt, homepage, author, meta }) => {
+  const [installed, installing, installPlugin, unInstallPlugin] = useToolStore((s) => [
+    pluginStoreSelectors.isPluginInstalled(identifier)(s),
+    pluginStoreSelectors.isPluginInstallLoading(identifier)(s),
+    s.installPlugin,
+    s.unInstallPlugin,
+  ]);
+  const { styles } = useStyles();
+
+  const { t } = useTranslation('plugin');
+  return (
+    <Flexbox gap={8} padding={16}>
+      <Flexbox horizontal justify={'space-between'}>
+        <Avatar avatar={meta.avatar} size={56} style={{ flex: 'none' }} />
+
+        <Flexbox gap={8} horizontal>
+          <PluginSettings identifier={identifier} />
+          <Button
+            loading={installing}
+            onClick={() => {
+              if (installed) {
+                unInstallPlugin(identifier);
+              } else installPlugin(identifier);
+            }}
+            type={installed ? 'default' : 'primary'}
+          >
+            {t(installed ? 'store.uninstall' : 'store.install')}
+          </Button>
+        </Flexbox>
+      </Flexbox>
+
+      <Flexbox gap={4}>
+        <Flexbox align={'center'} gap={8} horizontal>
+          <div className={styles.title}>{meta.title}</div>
+          <Tag className={styles.tag}> {identifier}</Tag>
+        </Flexbox>
+        <div className={styles.desc}>{meta.description}</div>
+        <Flexbox className={styles.link} gap={8} horizontal>
+          {author && (
+            <Link className={styles.link} href={homepage} target={'_blank'}>
+              @{author}
+            </Link>
+          )}
+          {t('store.releasedAt', { createdAt })}
+        </Flexbox>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default PluginItem;

package/src/features/PluginStore/PluginSettings.tsx

@@ -0,0 +1,40 @@
+import { ActionIcon } from '@lobehub/ui';
+import { SettingsIcon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PluginSettingsModal from '@/features/PluginSettingsModal';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+
+const PluginSettings = memo<{ identifier: string }>(({ identifier }) => {
+  const { t } = useTranslation('setting');
+
+  const [open, setOpen] = useState(false);
+
+  const plugin = useToolStore(pluginSelectors.getPluginManifestById(identifier));
+
+  if (!plugin?.settings) return null;
+
+  return (
+    <>
+      <ActionIcon
+        icon={SettingsIcon}
+        onClick={() => {
+          setOpen(true);
+        }}
+        title={t('plugin.settings.tooltip')}
+      />
+      <PluginSettingsModal
+        id={identifier}
+        onClose={() => {
+          setOpen(false);
+        }}
+        open={open}
+        schema={plugin.settings}
+      />
+    </>
+  );
+});
+
+export default PluginSettings;

package/src/features/{AgentSetting/AgentPlugin/MarketSettingModal.tsx → PluginStore/StoreSetting.tsx}

@@ -11,7 +11,7 @@ interface MarketSettingModalProps {
   open?: boolean;
 }
 
-const MarketSettingModal = memo<MarketSettingModalProps>(({ open, onOpenChange }) => {
+const StoreSetting = memo<MarketSettingModalProps>(({ open, onOpenChange }) => {
   const { t } = useTranslation('plugin');
 
   return (
@@ -53,4 +53,4 @@ const MarketSettingModal = memo<MarketSettingModalProps>(({ open, onOpenChange }
   );
 });
 
-export default MarketSettingModal;
+export default StoreSetting;

package/src/features/PluginStore/index.tsx

@@ -0,0 +1,95 @@
+import { Icon, Modal, SpotlightCard, TabsNav } from '@lobehub/ui';
+import { Button, Empty } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { ServerCrash } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import MobilePadding from '@/components/MobilePadding';
+import { useToolStore } from '@/store/tool';
+import { pluginStoreSelectors } from '@/store/tool/selectors';
+
+import Loading from './Loading';
+import PluginItem from './PluginItem';
+
+interface PluginStoreProps {
+  open?: boolean;
+  setOpen: (open: boolean) => void;
+}
+export const PluginStore = memo<PluginStoreProps>(({ setOpen, open }) => {
+  const { t } = useTranslation('plugin');
+
+  const [listType, useFetchPluginList, installPlugins] = useToolStore((s) => [
+    s.listType,
+    s.useFetchPluginStore,
+    s.installPlugins,
+  ]);
+
+  const pluginStoreList = useToolStore(pluginStoreSelectors.onlinePluginStore, isEqual);
+  const { isLoading, error } = useFetchPluginList();
+  const isEmpty = pluginStoreList.length === 0;
+
+  return (
+    <Modal
+      footer={null}
+      onCancel={() => {
+        setOpen(false);
+      }}
+      open={open}
+      title={t('store.title')}
+      width={800}
+    >
+      <MobilePadding>
+        <Center>
+          <Flexbox gap={24} width={'100%'}>
+            <Flexbox align={'center'} horizontal justify={'space-between'}>
+              <TabsNav
+                activeKey={listType}
+                items={[
+                  { key: 'all', label: t('store.tabs.all') },
+                  { key: 'installed', label: t('store.tabs.installed') },
+                ]}
+                onChange={(v) => {
+                  useToolStore.setState({ listType: v as any });
+                }}
+              />
+              <Flexbox gap={8} horizontal>
+                {listType === 'all' && (
+                  <Button
+                    onClick={() => {
+                      installPlugins(pluginStoreList.map((item) => item.identifier));
+                    }}
+                  >
+                    {t('store.installAllPlugins')}
+                  </Button>
+                )}
+              </Flexbox>
+            </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}
+                  ></Empty>
+                )}
+              </Center>
+            ) : (
+              <SpotlightCard columns={2} gap={16} items={pluginStoreList} renderItem={PluginItem} />
+            )}
+          </Flexbox>
+        </Center>
+      </MobilePadding>
+    </Modal>
+  );
+});
+
+export default PluginStore;

package/src/layout/GlobalLayout/StoreHydration.tsx

@@ -3,12 +3,12 @@ import { useRouter } from 'next/navigation';
 import { memo, useEffect } from 'react';
 
 import { useGlobalStore } from '@/store/global';
-import { usePluginStore } from '@/store/plugin';
 import {
   useEffectAfterSessionHydrated,
   useOnFinishHydrationSession,
   useSessionStore,
 } from '@/store/session';
+import { useToolStore } from '@/store/tool';
 
 const StoreHydration = memo(() => {
   const router = useRouter();
@@ -17,11 +17,11 @@ const StoreHydration = memo(() => {
     // refs: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#hashydrated
     useSessionStore.persist.rehydrate();
     useGlobalStore.persist.rehydrate();
-    usePluginStore.persist.rehydrate();
+    useToolStore.persist.rehydrate();
   }, []);
 
   useOnFinishHydrationSession((s, store) => {
-    usePluginStore.getState().checkLocalEnabledPlugins(s.sessions);
+    useToolStore.getState().checkLocalEnabledPlugins(s.sessions);
 
     // add router instance to store
     store.setState({ router });

package/src/locales/default/plugin.ts

@@ -82,6 +82,12 @@ export default {
     update: '更新',
     updateSuccess: '插件设置更新成功',
   },
+  error: {
+    fetchError: '请求失败',
+    installError: '插件 {{name}} 安装失败',
+    manifestInvalid: '描述文件格式不正确',
+    noManifest: '描述文件不存在',
+  },
   list: {
     item: {
       'deprecated.title': '已删除',
@@ -106,4 +112,17 @@ export default {
     modalDesc: '配置插件市场的地址后，可以使用自定义的插件市场',
     title: '设置插件市场',
   },
+  store: {
+    empty: '暂无已安装插件',
+    install: '安装',
+    installAllPlugins: '安装全部',
+    networkError: '获取插件商店失败，请检测网络连接后重试',
+    releasedAt: '发布于 {{createdAt}}',
+    tabs: {
+      all: '全部',
+      installed: '已安装',
+    },
+    title: '插件商店',
+    uninstall: '卸载',
+  },
 };

package/src/locales/default/setting.ts

@@ -84,6 +84,20 @@ export default {
     },
     waitingForMore: '更多模型正在 <1>计划接入</1> 中，敬请期待 ✨',
   },
+  plugin: {
+    addTooltip: '添加自定义插件',
+    clearDeprecated: '移除无效插件',
+    empty: '暂无已安装插件，欢迎前往 <1>插件商店</1> 探索',
+    installStatus: {
+      deprecated: '已卸载',
+    },
+    settings: {
+      hint: '请根据描述填写以下配置',
+      title: '{{id}} 插件配置',
+      tooltip: '插件配置',
+    },
+    store: '插件商店',
+  },
   settingAgent: {
     avatar: {
       title: '头像',
@@ -187,11 +201,6 @@ export default {
     },
   },
   settingPlugin: {
-    add: '添加',
-    addTooltip: '添加自定义插件',
-    clearDeprecated: '移除无效插件',
-    config: '{{id}} 插件配置',
-    settings: '配置插件市场',
     title: '插件列表',
   },
   settingSystem: {
@@ -277,4 +286,16 @@ export default {
     llm: '语言模型',
     tts: '语音服务',
   },
+  tools: {
+    builtins: {
+      groupName: '内置',
+    },
+    plugins: {
+      enabled: '已启用 {{num}}',
+      groupName: '插件',
+      noEnabled: '暂无启用插件',
+      store: '插件商店',
+    },
+    title: '扩展工具',
+  },
 };