@lobehub/chat 0.71.0 → 0.72.0

package/CHANGELOG.md

@@ -2,6 +2,74 @@
 
 # Changelog
 
+## [Version 0.72.0](https://github.com/lobehub/lobe-chat/compare/v0.71.1...v0.72.0)
+
+<sup>Released on **2023-09-09**</sup>
+
+#### ✨ Features
+
+- **misc**: Add plugin market Setting Modal, 支持快速刷新与预览 manifest, 适配插件 i18n 方案.
+
+#### 🐛 Bug Fixes
+
+- **misc**: 修正删除插件时错误开启的问题.
+
+#### 💄 Styles
+
+- **misc**: 优化 manifest 预览的尺寸.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Add plugin market Setting Modal ([a0603a9](https://github.com/lobehub/lobe-chat/commit/a0603a9))
+- **misc**: 支持快速刷新与预览 manifest, closes [#150](https://github.com/lobehub/lobe-chat/issues/150) ([5bd2eb0](https://github.com/lobehub/lobe-chat/commit/5bd2eb0))
+- **misc**: 适配插件 i18n 方案 ([8709ab3](https://github.com/lobehub/lobe-chat/commit/8709ab3))
+
+#### What's fixed
+
+- **misc**: 修正删除插件时错误开启的问题 ([0e35c18](https://github.com/lobehub/lobe-chat/commit/0e35c18))
+
+#### Styles
+
+- **misc**: 优化 manifest 预览的尺寸 ([27f8d6d](https://github.com/lobehub/lobe-chat/commit/27f8d6d))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.71.1](https://github.com/lobehub/lobe-chat/compare/v0.71.0...v0.71.1)
+
+<sup>Released on **2023-09-09**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix mobile route.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix mobile route, closes [#165](https://github.com/lobehub/lobe-chat/issues/165) ([d5e03b6](https://github.com/lobehub/lobe-chat/commit/d5e03b6))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.71.0](https://github.com/lobehub/lobe-chat/compare/v0.70.4...v0.71.0)
 
 <sup>Released on **2023-09-09**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.71.0",
+  "version": "0.72.0",
   "description": "Lobe Chat is an open-source chatbot client using Vercel AI SDK, Typescript and Next.js",
   "keywords": [
     "chatbot",

package/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;

package/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';
 

package/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) => {

package/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,

package/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;

package/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) => {

package/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);
         }
       });
     }

package/src/features/PluginDevModal/ManifestForm.tsx

@@ -1,11 +1,13 @@
 import { LobeChatPluginManifest, pluginManifestSchema } from '@lobehub/chat-plugin-sdk';
-import { ActionIcon, Form, FormItemProps, Highlighter, Input, Tooltip } from '@lobehub/ui';
-import { FormInstance, Popover, Radio } from 'antd';
+import { ActionIcon, Form, FormItemProps, Input, Tooltip } from '@lobehub/ui';
+import { FormInstance, Radio } 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';
+
 const ManifestForm = memo<{ form: FormInstance; mode?: 'url' | 'local' }>(
   ({ form, mode = 'url' }) => {
     const { t } = useTranslation('plugin');
@@ -21,17 +23,15 @@ const ManifestForm = memo<{ form: FormInstance; mode?: 'url' | 'local' }>(
               <Input
                 placeholder={'http://localhost:3400/manifest-dev.json'}
                 suffix={
-                  manifest && (
-                    <ActionIcon
-                      icon={RotateCwIcon}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        form.validateFields(['manifest']);
-                      }}
-                      size={'small'}
-                      title={t('dev.meta.manifest.refresh')}
-                    />
-                  )
+                  <ActionIcon
+                    icon={RotateCwIcon}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      form.validateFields(['manifest']);
+                    }}
+                    size={'small'}
+                    title={t('dev.meta.manifest.refresh')}
+                  />
                 }
               />
             ),
@@ -39,24 +39,13 @@ const ManifestForm = memo<{ form: FormInstance; mode?: 'url' | 'local' }>(
               <Flexbox horizontal justify={'space-between'} style={{ marginTop: 8 }}>
                 {t('dev.meta.manifest.desc')}
                 {manifest && (
-                  <Popover
-                    arrow={false}
-                    content={
-                      <Highlighter language={'json'}>
-                        {JSON.stringify(manifest, null, 2)}
-                      </Highlighter>
-                    }
-                    placement={'right'}
-                    style={{ width: 400 }}
-                    title={'Manifest JSON'}
-                    trigger={'click'}
-                  >
+                  <ManifestPreviewer manifest={manifest}>
                     <ActionIcon
                       icon={FileCode}
                       size={'small'}
                       title={t('dev.meta.manifest.preview')}
                     />
-                  </Popover>
+                  </ManifestPreviewer>
                 )}
               </Flexbox>
             ),

package/src/layout/AppMobileLayout.tsx

@@ -6,7 +6,6 @@ import { Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import MobileTabBar from '@/features/MobileTabBar';
-import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
 
 const useStyles = createStyles(({ css, cx, stylish }) => ({
   container: cx(
@@ -49,10 +48,6 @@ const AppMobileLayout = memo<AppMobileLayoutProps>(
   ({ children, showTabBar, navBar, style, className }) => {
     const { styles, cx } = useStyles();
 
-    useOnFinishHydrationSession(() => {
-      useSessionStore.setState({ isMobile: true });
-    }, []);
-
     return (
       <>
         <Head>

package/src/locales/default/common.ts

@@ -38,7 +38,7 @@ export default {
   inbox: {
     defaultMessage:
       '你好，我是你的智能助手，你可以问我任何问题，我会尽力回答你。如果需要获得更加专业或定制的助手，可以点击<kbd>+</kbd>创建自定义助手',
-    desc: '开启大脑集群，激发思维火花。你的智能助理，就在这里与你交流一切',
+    desc: '开启大脑集群，激发思维火花。你的智能助理，在这里与你交流一切',
     title: '随便聊聊',
   },
   message: {

package/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: '设置插件市场',
+  },
 };

package/src/locales/default/setting.ts

@@ -132,6 +132,7 @@ export default {
     addTooltip: '添加自定义插件',
     clearDeprecated: '移除无效插件',
     config: '{{id}} 插件配置',
+    settings: '配置插件市场',
     title: '插件列表',
   },
   settingSystem: {

package/src/pages/chat/features/Header/PluginTag/PluginStatus.tsx

@@ -0,0 +1,105 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Badge, Button, Tag } from 'antd';
+import { LucideRotateCw, LucideTrash2, RotateCwIcon } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import ManifestPreviewer from '@/components/ManifestPreviewer';
+import { pluginSelectors, usePluginStore } from '@/store/plugin';
+import { useSessionStore } from '@/store/session';
+
+interface PluginStatusProps {
+  deprecated?: boolean;
+  id: string;
+  title?: string;
+}
+const PluginStatus = memo<PluginStatusProps>(({ title, id, deprecated }) => {
+  const { t } = useTranslation('common');
+  const [status, isCustom, fetchPluginManifest] = usePluginStore((s) => [
+    pluginSelectors.getPluginManifestLoadingStatus(id)(s),
+    pluginSelectors.isCustomPlugin(id)(s),
+    s.fetchPluginManifest,
+  ]);
+
+  const manifest = usePluginStore(pluginSelectors.getPluginManifestById(id));
+
+  const removePlugin = useSessionStore((s) => s.removePlugin);
+
+  const renderStatus = useMemo(() => {
+    switch (status) {
+      case 'loading': {
+        return <Badge color={'blue'} status={'processing'} />;
+      }
+      case 'error': {
+        return (
+          <ActionIcon
+            icon={LucideRotateCw}
+            onClick={() => {
+              fetchPluginManifest(id);
+            }}
+            size={'small'}
+            title={t('retry')}
+          />
+        );
+      }
+      case 'success': {
+        return <Badge status={status} />;
+      }
+    }
+  }, [status]);
+
+  const tag =
+    // 废弃标签
+    deprecated ? (
+      <Tag bordered={false} color={'red'} style={{ marginRight: 0 }}>
+        {t('list.item.deprecated.title', { ns: 'plugin' })}
+      </Tag>
+    ) : // 自定义标签
+    isCustom ? (
+      <Tag bordered={false} color={'gold'}>
+        {t('list.item.local.title', { ns: 'plugin' })}
+      </Tag>
+    ) : null;
+
+  return (
+    <Flexbox gap={12} horizontal justify={'space-between'}>
+      <Flexbox align={'center'} gap={8} horizontal>
+        {title || id}
+        {tag}
+      </Flexbox>
+
+      {deprecated ? (
+        <ActionIcon
+          icon={LucideTrash2}
+          onClick={(e) => {
+            e.stopPropagation();
+            removePlugin(id);
+          }}
+          size={'small'}
+          title={t('settingPlugin.clearDeprecated', { ns: 'setting' })}
+        />
+      ) : (
+        <Flexbox align={'center'} horizontal>
+          {isCustom ? (
+            <ActionIcon
+              icon={RotateCwIcon}
+              onClick={(e) => {
+                e.stopPropagation();
+                fetchPluginManifest(id);
+                // form.validateFields(['manifest']);
+              }}
+              size={'small'}
+              title={t('dev.meta.manifest.refresh', { ns: 'plugin' })}
+            />
+          ) : null}
+          <ManifestPreviewer manifest={manifest || {}} trigger={'hover'}>
+            <Button icon={renderStatus} size={'small'} type={'text'} />
+          </ManifestPreviewer>
+        </Flexbox>
+      )}
+    </Flexbox>
+  );
+});
+
+export default PluginStatus;

package/src/pages/chat/features/Header/PluginTag/index.tsx

@@ -1,50 +1,13 @@
-import { ActionIcon, Avatar, Icon, Tag } from '@lobehub/ui';
+import { Avatar, Icon, Tag } from '@lobehub/ui';
 import type { MenuProps } from 'antd';
-import { Badge, Dropdown } from 'antd';
+import { Dropdown } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { LucideRotateCw, LucideToyBrick } from 'lucide-react';
-import { memo, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
+import { LucideToyBrick } from 'lucide-react';
+import { memo } from 'react';
 
 import { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
 
-const PluginStatus = memo<{ id: string; title?: string }>(({ title, id }) => {
-  const { t } = useTranslation('common');
-  const [status, fetchPluginManifest] = usePluginStore((s) => [
-    pluginSelectors.getPluginManifestLoadingStatus(id)(s),
-    s.fetchPluginManifest,
-  ]);
-
-  const renderStatus = useMemo(() => {
-    switch (status) {
-      case 'loading': {
-        return <Badge color={'blue'} status={'processing'} />;
-      }
-      case 'error': {
-        return (
-          <ActionIcon
-            icon={LucideRotateCw}
-            onClick={() => {
-              fetchPluginManifest(id);
-            }}
-            size={'small'}
-            title={t('retry')}
-          />
-        );
-      }
-      case 'success': {
-        return <Badge status={status} />;
-      }
-    }
-  }, [status]);
-
-  return (
-    <Flexbox gap={12} horizontal justify={'space-between'}>
-      {title} {renderStatus}
-    </Flexbox>
-  );
-});
+import PluginStatus from './PluginStatus';
 
 export interface PluginTagProps {
   plugins: string[];
@@ -58,11 +21,13 @@ const PluginTag = memo<PluginTagProps>(({ plugins }) => {
 
   const items: MenuProps['items'] = plugins.map((id) => {
     const item = list.find((i) => i.identifier === id);
+    const isDeprecated = !item?.title;
+    const avatar = isDeprecated ? '♻️' : item?.avatar || '🧩';
 
     return {
-      icon: <Avatar avatar={item?.avatar} size={24} style={{ marginLeft: -6, marginRight: 2 }} />,
+      icon: <Avatar avatar={avatar} size={24} style={{ marginLeft: -6, marginRight: 2 }} />,
       key: id,
-      label: <PluginStatus id={id} title={item?.title} />,
+      label: <PluginStatus deprecated={isDeprecated} id={id} title={item?.title} />,
     };
   });
 
@@ -73,7 +38,7 @@ const PluginTag = memo<PluginTagProps>(({ plugins }) => {
       <div>
         <Tag>
           {<Icon icon={LucideToyBrick} />}
-          {pluginHelpers.getPluginTitle(displayPlugin?.meta)}
+          {pluginHelpers.getPluginTitle(displayPlugin?.meta) || plugins[0]}
           {count > 1 && <div>({plugins.length - 1}+)</div>}
         </Tag>
       </div>

package/src/pages/chat/index.page.tsx

@@ -4,6 +4,7 @@ import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { useSessionStore } from '@/store/session';
+import { useEffectAfterSessionHydrated } from '@/store/session/hooks';
 import { agentSelectors } from '@/store/session/selectors';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
@@ -22,6 +23,13 @@ const Chat = memo(() => {
   const pageTitle = genSiteHeadTitle([avatar, title].filter(Boolean).join(' '));
   const RenderLayout = mobile ? MobileLayout : DesktopLayout;
 
+  useEffectAfterSessionHydrated(
+    (store) => {
+      store.setState({ isMobile: mobile });
+    },
+    [mobile],
+  );
+
   return (
     <>
       <Head>

package/src/services/pluginMarket.ts

@@ -1,10 +1,13 @@
-import { PLUGINS_INDEX_URL } from '@/const/url';
+import { getPluginIndexJSON } from '@/const/url';
+import { useGlobalStore } from '@/store/global';
 
 /**
  * 请求插件列表
  */
 export const getPluginList = async () => {
-  const res = await fetch(PLUGINS_INDEX_URL);
+  const url = getPluginIndexJSON(useGlobalStore.getState().settings.language);
+
+  const res = await fetch(url);
 
   return res.json();
 };

package/src/store/plugin/helpers.ts

@@ -1,6 +1,8 @@
 import { LobeChatPluginMeta } from '@lobehub/chat-plugin-sdk';
 import i18n from 'i18next';
 
+import { CustomPlugin } from '@/types/plugin';
+
 const getI18nValue = (value: string | Record<string, string> | undefined) => {
   if (!value) return;
 
@@ -18,9 +20,13 @@ const getPluginTitle = (meta?: LobeChatPluginMeta['meta']) => getI18nValue(meta?
 const getPluginDesc = (meta?: LobeChatPluginMeta['meta']) => getI18nValue(meta?.description);
 const getPluginAvatar = (meta?: LobeChatPluginMeta['meta']) => meta?.avatar;
 
+const isCustomPlugin = (id: string, pluginList: CustomPlugin[]) =>
+  pluginList.some((i) => i.identifier === id);
+
 export const pluginHelpers = {
   getPluginAvatar,
   getPluginDesc,
   getPluginFormList,
   getPluginTitle,
+  isCustomPlugin,
 };

package/src/store/plugin/selectors.ts

@@ -50,6 +50,9 @@ const getPluginManifestLoadingStatus = (id: string) => (s: PluginStoreState) =>
   if (!!manifest) return 'success';
 };
 
+const isCustomPlugin = (id: string) => (s: PluginStoreState) =>
+  pluginHelpers.isCustomPlugin(id, s.customPluginList);
+
 const displayPluginList = (s: PluginStoreState) =>
   pluginList(s).map((p) => ({
     author: p.author,
@@ -69,5 +72,6 @@ export const pluginSelectors = {
   getPluginManifestLoadingStatus,
   getPluginMetaById,
   getPluginSettingsById,
+  isCustomPlugin,
   pluginList,
 };

package/src/store/session/hooks/index.ts

@@ -1,3 +1,4 @@
+export * from './useEffectAfterHydrated';
 export * from './useOnFinishHydrationSession';
 export * from './useSessionChatInit';
 export * from './useSessionHydrated';

package/src/store/session/hooks/useEffectAfterHydrated.ts

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+
+import { useSessionStore } from '../store';
+
+export const useEffectAfterSessionHydrated = (
+  fn: (session: typeof useSessionStore) => void,
+  deps: any[] = [],
+) => {
+  useEffect(() => {
+    const hasRehydrated = useSessionStore.persist.hasHydrated();
+
+    if (hasRehydrated) {
+      // 等价 useEffect 多次触发
+      fn(useSessionStore);
+    } else {
+      // 等价于 useEffect 第一次触发
+      useSessionStore.persist.onFinishHydration(() => {
+        fn(useSessionStore);
+      });
+    }
+  }, deps);
+};

package/src/store/session/hooks/useOnFinishHydrationSession.ts

@@ -5,16 +5,12 @@ import { SessionStore, useSessionStore } from '../store';
 /**
  * 当 Session 水合完毕后才会执行的 useEffect
  * @param fn
- * @param deps
  */
-export const useOnFinishHydrationSession = (
-  fn: (state: SessionStore) => void,
-  deps: any[] = [],
-) => {
+export const useOnFinishHydrationSession = (fn: (state: SessionStore) => void) => {
   useEffect(() => {
     // 只有当水合完毕后再开始做操作
     useSessionStore.persist.onFinishHydration(() => {
       fn(useSessionStore.getState());
     });
-  }, deps);
+  }, []);
 };

package/src/store/session/hooks/useSessionHydrated.ts

@@ -1,6 +1,7 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { useSessionStore } from '../store';
+import { useOnFinishHydrationSession } from './useOnFinishHydrationSession';
 
 export const useSessionHydrated = () => {
   // 根据 sessions 是否有值来判断是否已经初始化
@@ -8,11 +9,9 @@ export const useSessionHydrated = () => {
 
   const [isInit, setInit] = useState(hasInited);
 
-  useEffect(() => {
-    useSessionStore.persist.onFinishHydration(() => {
-      if (!isInit) setInit(true);
-    });
-  }, []);
+  useOnFinishHydrationSession(() => {
+    if (!isInit) setInit(true);
+  });
 
   return isInit;
 };

package/src/store/session/slices/agentConfig/action.ts

@@ -1,3 +1,4 @@
+import { produce } from 'immer';
 import { StateCreator } from 'zustand/vanilla';
 
 import { MetaData } from '@/types/meta';
@@ -7,9 +8,10 @@ import { SessionStore } from '../../store';
 import { sessionSelectors } from '../session/selectors';
 
 /**
- * 代理行为接口
+ * 助手接口
  */
 export interface AgentAction {
+  removePlugin: (id: string) => void;
   /**
    * 更新代理配置
    * @param config - 部分 LobeAgentConfig 的配置
@@ -24,6 +26,18 @@ export const createAgentSlice: StateCreator<
   [],
   AgentAction
 > = (set, get) => ({
+  removePlugin: (id) => {
+    const { activeId } = get();
+    const session = sessionSelectors.currentSession(get());
+    if (!activeId || !session) return;
+
+    const config = produce(session.config, (draft) => {
+      draft.plugins = draft.plugins?.filter((i) => i !== id) || [];
+    });
+
+    get().dispatchSession({ config, id: activeId, type: 'updateSessionConfig' });
+  },
+
   updateAgentConfig: (config) => {
     const { activeId } = get();
     const session = sessionSelectors.currentSession(get());
@@ -31,6 +45,7 @@ export const createAgentSlice: StateCreator<
 
     get().dispatchSession({ config, id: activeId, type: 'updateSessionConfig' });
   },
+
   updateAgentMeta: (meta) => {
     const { activeId } = get();
     const session = sessionSelectors.currentSession(get());

package/src/features/AgentSetting/test.json

@@ -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
-}