@lobehub/chat 0.107.16 → 0.109.0

package/src/app/chat/features/ChatInput/ActionBar/Tools/ToolItem.tsx

@@ -0,0 +1,37 @@
+import { Checkbox } from 'antd';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
+
+const ToolItem = memo<{ identifier: string; label: string }>(({ identifier, label }) => {
+  const [checked, togglePlugin] = useSessionStore((s) => [
+    agentSelectors.currentAgentPlugins(s).includes(identifier),
+    s.togglePlugin,
+  ]);
+
+  return (
+    <Flexbox
+      gap={40}
+      horizontal
+      justify={'space-between'}
+      onClick={(e) => {
+        e.stopPropagation();
+        togglePlugin(identifier);
+      }}
+      padding={'8px 12px'}
+    >
+      {label}
+      <Checkbox
+        checked={checked}
+        onClick={(e) => {
+          e.stopPropagation();
+          togglePlugin(identifier);
+        }}
+      />
+    </Flexbox>
+  );
+});
+
+export default ToolItem;

package/src/app/chat/features/ChatInput/ActionBar/Tools/index.tsx

@@ -0,0 +1,116 @@
+import { ActionIcon, Avatar, Icon } from '@lobehub/ui';
+import { Dropdown } from 'antd';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { ArrowRight, PocketKnife, Store, ToyBrick } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import PluginStore from '@/features/PluginStore';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+
+import ToolItem from './ToolItem';
+
+const useStyles = createStyles(({ css, prefixCls }) => ({
+  menu: css`
+    &.${prefixCls}-dropdown-menu {
+      padding-block: 8px;
+    }
+
+    .${prefixCls}-dropdown-menu-item-group-list .${prefixCls}-dropdown-menu-item {
+      padding: 0;
+      border-radius: 4px;
+    }
+  `,
+}));
+
+const Tools = memo(() => {
+  const { t } = useTranslation('setting');
+  const list = useToolStore(pluginSelectors.installedPlugins, isEqual);
+  const enablePluginCount = useSessionStore((s) => agentSelectors.currentAgentPlugins(s).length);
+  const [open, setOpen] = useState(false);
+  const { styles } = useStyles();
+
+  return (
+    <>
+      <Dropdown
+        arrow={false}
+        menu={{
+          className: styles.menu,
+          items: [
+            // {
+            //   children: [
+            //     {
+            //       icon: <Icon icon={PaletteIcon} size={{ fontSize: 16 }} style={{ padding: 4 }} />,
+            //       key: 'dalle3',
+            //       label: <ToolItem identifier={'dalle3'} label={'DALL·E 3'} />,
+            //     },
+            //   ],
+            //   key: 'builtins',
+            //   label: t('tools.builtins.groupName'),
+            //   type: 'group',
+            // },
+            {
+              children: [
+                ...list.map((item) => ({
+                  icon: item.meta?.avatar ? (
+                    <Avatar avatar={item.meta?.avatar} size={24} />
+                  ) : (
+                    <Icon icon={ToyBrick} size={{ fontSize: 16 }} style={{ padding: 4 }} />
+                  ),
+                  key: item.identifier,
+                  label: (
+                    <ToolItem
+                      identifier={item.identifier}
+                      label={item.meta?.title || item.identifier}
+                    />
+                  ),
+                })),
+                {
+                  icon: <Icon icon={Store} size={{ fontSize: 16 }} style={{ padding: 4 }} />,
+
+                  key: 'plugin-store',
+                  label: (
+                    <Flexbox gap={40} horizontal justify={'space-between'} padding={'8px 12px'}>
+                      {t('tools.plugins.store')} <Icon icon={ArrowRight} />
+                    </Flexbox>
+                  ),
+                  onClick: (e) => {
+                    e.domEvent.stopPropagation();
+                    setOpen(true);
+                  },
+                },
+              ],
+              key: 'plugins',
+              label: (
+                <Flexbox align={'center'} gap={40} horizontal justify={'space-between'}>
+                  {t('tools.plugins.groupName')}
+                  {enablePluginCount === 0 ? null : (
+                    <div style={{ fontSize: 12, marginInlineEnd: 4 }}>
+                      {t('tools.plugins.enabled', { num: enablePluginCount })}
+                    </div>
+                  )}
+                </Flexbox>
+              ),
+              type: 'group',
+            },
+          ],
+          onClick: (e) => {
+            e.domEvent.preventDefault();
+          },
+        }}
+        placement={'topLeft'}
+        trigger={['click']}
+      >
+        <ActionIcon icon={PocketKnife} placement={'bottom'} title={t('tools.title')} />
+      </Dropdown>
+      <PluginStore open={open} setOpen={setOpen} />
+    </>
+  );
+});
+
+export default Tools;

package/src/app/chat/features/ChatInput/ActionBar/config.ts

@@ -5,6 +5,7 @@ import History from './History';
 import ModelSwitch from './ModelSwitch';
 import Temperature from './Temperature';
 import Token from './Token';
+import Tools from './Tools';
 
 export const actionMap = {
   clear: Clear,
@@ -14,6 +15,7 @@ export const actionMap = {
   stt: STT,
   temperature: Temperature,
   token: Token,
+  tools: Tools,
 } as const;
 
 type ActionMap = typeof actionMap;
@@ -24,7 +26,7 @@ type getActionList = (mobile?: boolean) => ActionKeys[];
 
 // we can make these action lists configurable in the future
 export const getLeftActionList: getActionList = (mobile) =>
-  ['model', 'fileUpload', 'temperature', 'history', !mobile && 'stt', 'token'].filter(
+  ['model', 'fileUpload', 'temperature', 'history', !mobile && 'stt', 'tools', 'token'].filter(
     Boolean,
   ) as ActionKeys[];
 

package/src/app/chat/features/Conversation/ChatList/Error/Plugin/PluginSettings.tsx

@@ -8,8 +8,8 @@ import { Center, Flexbox } from 'react-layout-kit';
 
 import PluginSettingsConfig from '@/features/PluginSettings';
 import { useChatStore } from '@/store/chat';
-import { pluginHelpers, usePluginStore } from '@/store/plugin';
-import { pluginSelectors } from '@/store/plugin/selectors';
+import { pluginHelpers, useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
 
 import { ErrorActionContainer, useStyles } from '../style';
 
@@ -19,8 +19,8 @@ const PluginSettings: RenderErrorMessage['Render'] = memo(({ id, plugin }) => {
   const theme = useTheme();
   const [resend, deleteMessage] = useChatStore((s) => [s.resendMessage, s.deleteMessage]);
   const pluginIdentifier = plugin?.identifier as string;
-  const pluginMeta = usePluginStore(pluginSelectors.getPluginMetaById(pluginIdentifier), isEqual);
-  const manifest = usePluginStore(pluginSelectors.getPluginManifestById(pluginIdentifier), isEqual);
+  const pluginMeta = useToolStore(pluginSelectors.getPluginMetaById(pluginIdentifier), isEqual);
+  const manifest = useToolStore(pluginSelectors.getPluginManifestById(pluginIdentifier), isEqual);
 
   return (
     <ErrorActionContainer>

package/src/app/chat/features/Conversation/ChatList/Plugins/Inspector/Settings.tsx

@@ -4,11 +4,11 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import PluginSettingsModal from '@/features/PluginSettingsModal';
-import { usePluginStore } from '@/store/plugin';
-import { pluginSelectors } from '@/store/plugin/selectors';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
 
 const Settings = memo<{ id: string }>(({ id }) => {
-  const item = usePluginStore(pluginSelectors.getPluginManifestById(id));
+  const item = useToolStore(pluginSelectors.getPluginManifestById(id));
   const [open, setOpen] = useState(false);
   const { t } = useTranslation('plugin');
   return (

package/src/app/chat/features/Conversation/ChatList/Plugins/Inspector/index.tsx

@@ -14,8 +14,8 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { pluginHelpers, usePluginStore } from '@/store/plugin';
-import { pluginSelectors } from '@/store/plugin/selectors';
+import { pluginHelpers, useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
 
 import PluginResult from './PluginResultJSON';
 import Settings from './Settings';
@@ -47,8 +47,8 @@ const Inspector = memo<InspectorProps>(
     const { styles } = useStyles();
     const [open, setOpen] = useState(false);
 
-    const item = usePluginStore(pluginSelectors.getPluginMetaById(id), isEqual);
-    const showRightAction = usePluginStore(pluginSelectors.hasPluginUI(id));
+    const item = useToolStore(pluginSelectors.getPluginMetaById(id), isEqual);
+    const showRightAction = useToolStore(pluginSelectors.hasPluginUI(id));
     const pluginAvatar = pluginHelpers.getPluginAvatar(item?.meta);
     const pluginTitle = pluginHelpers.getPluginTitle(item?.meta);
 

package/src/app/chat/features/Conversation/ChatList/Plugins/Render/DefaultType/index.tsx

@@ -5,7 +5,7 @@ import { Suspense, memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { usePluginStore } from '@/store/plugin';
+import { useToolStore } from '@/store/tool';
 
 import IFrameRender from './IFrameRender';
 
@@ -72,7 +72,7 @@ export interface PluginDefaultTypeProps {
 }
 
 const PluginDefaultType = memo<PluginDefaultTypeProps>(({ content, name }) => {
-  const manifest = usePluginStore((s) => s.pluginManifestMap[name || '']);
+  const manifest = useToolStore((s) => s.pluginManifestMap[name || '']);
   let isJSON = true;
   try {
     JSON.parse(content);

package/src/app/chat/features/Conversation/ChatList/Plugins/Render/StandaloneType/Iframe.tsx

@@ -4,8 +4,8 @@ import { memo, useRef, useState } from 'react';
 
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
-import { usePluginStore } from '@/store/plugin';
-import { pluginSelectors } from '@/store/plugin/selectors';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
 
 import { useOnPluginReadyForInteraction } from '../utils/iframeOnReady';
 import {
@@ -25,7 +25,7 @@ import {
 
 // just to simplify code a little, don't use this pattern everywhere
 const getSettings = (identifier: string) =>
-  pluginSelectors.getPluginSettingsById(identifier)(usePluginStore.getState());
+  pluginSelectors.getPluginSettingsById(identifier)(useToolStore.getState());
 const getMessage = (id: string) => chatSelectors.getMessageById(id)(useChatStore.getState());
 
 interface IFrameRenderProps {
@@ -111,7 +111,7 @@ const IFrameRender = memo<IFrameRenderProps>(({ url, id, payload, width = 600, h
   });
 
   // when plugin update settings, we should update it to the plugin settings
-  const updatePluginSettings = usePluginStore((s) => s.updatePluginSettings);
+  const updatePluginSettings = useToolStore((s) => s.updatePluginSettings);
   useOnPluginSettingsUpdate((value) => {
     if (!payload?.identifier) return;
 

package/src/app/chat/features/Conversation/ChatList/Plugins/Render/StandaloneType/index.tsx

@@ -1,7 +1,7 @@
 import { PluginRequestPayload } from '@lobehub/chat-plugin-sdk';
 import { memo } from 'react';
 
-import { usePluginStore } from '@/store/plugin';
+import { useToolStore } from '@/store/tool';
 
 import IFrameRender from './Iframe';
 
@@ -12,7 +12,7 @@ export interface PluginStandaloneTypeProps {
 }
 
 const PluginDefaultType = memo<PluginStandaloneTypeProps>(({ payload, id, name = 'unknown' }) => {
-  const manifest = usePluginStore((s) => s.pluginManifestMap[name]);
+  const manifest = useToolStore((s) => s.pluginManifestMap[name]);
 
   if (!manifest?.ui) return;
 

package/src/app/chat/features/Conversation/useInitConversation.ts

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
 
 import { useChatStore } from '@/store/chat';
-import { usePluginStore } from '@/store/plugin';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
+import { useToolStore } from '@/store/tool';
 
 export const useInitConversation = () => {
   const [sessionId] = useSessionStore((s) => [s.activeId]);
@@ -18,7 +18,7 @@ export const useInitConversation = () => {
   useFetchMessages(sessionId, activeTopicId);
   useFetchTopics(sessionId);
 
-  const [useFetchPluginStore, checkPluginsIsInstalled] = usePluginStore((s) => [
+  const [useFetchPluginStore, checkPluginsIsInstalled] = useToolStore((s) => [
     s.useFetchPluginStore,
     s.useCheckPluginsIsInstalled,
   ]);

package/src/app/settings/(desktop)/index.tsx

@@ -6,14 +6,15 @@ import { FC, memo } from 'react';
 import ResponsiveIndex from '@/components/ResponsiveIndex';
 
 import Common from '../common';
+import { SettingsCommonProps } from '../common/Common';
 import Layout from './layout.desktop';
 
 const Mobile: FC = dynamic(() => import('../(mobile)'), { ssr: false }) as FC;
 
-export default memo(() => (
+export default memo<SettingsCommonProps>((props) => (
   <ResponsiveIndex Mobile={Mobile}>
     <Layout>
-      <Common />
+      <Common {...props} />
     </Layout>
   </ResponsiveIndex>
 ));

package/src/app/settings/common/Common.tsx

@@ -13,15 +13,19 @@ import { localeOptions } from '@/locales/options';
 import { useChatStore } from '@/store/chat';
 import { useFileStore } from '@/store/file';
 import { settingsSelectors, useGlobalStore } from '@/store/global';
-import { usePluginStore } from '@/store/plugin';
 import { useSessionStore } from '@/store/session';
+import { useToolStore } from '@/store/tool';
 import { switchLang } from '@/utils/switchLang';
 
 import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from '../features/ThemeSwatches';
 
 type SettingItemGroup = ItemGroup;
 
-const Common = memo(() => {
+export interface SettingsCommonProps {
+  showAccessCodeConfig: boolean;
+}
+
+const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig }) => {
   const { t } = useTranslation('setting');
   const [form] = AntForm.useForm();
 
@@ -31,7 +35,7 @@ const Common = memo(() => {
     s.clearAllMessages,
   ]);
   const [removeAllFiles] = useFileStore((s) => [s.removeAllFiles]);
-  const resetPluginSettings = usePluginStore((s) => s.resetPluginSettings);
+  const resetPluginSettings = useToolStore((s) => s.resetPluginSettings);
 
   const settings = useGlobalStore(settingsSelectors.currentSettings, isEqual);
   const [setThemeMode, setSettings, resetSettings] = useGlobalStore((s) => [
@@ -154,6 +158,7 @@ const Common = memo(() => {
       {
         children: <Input.Password placeholder={t('settingSystem.accessCode.placeholder')} />,
         desc: t('settingSystem.accessCode.desc'),
+        hidden: !showAccessCodeConfig,
         label: t('settingSystem.accessCode.title'),
         name: 'password',
       },

package/src/app/settings/common/index.tsx

@@ -9,16 +9,16 @@ import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOn
 import { SettingsTabs } from '@/store/global/initialState';
 
 import Footer from '../features/Footer';
-import Common from './Common';
+import Common, { SettingsCommonProps } from './Common';
 
-export default memo(() => {
+export default memo<SettingsCommonProps>((props) => {
   useSwitchSideBarOnInit(SettingsTabs.Common);
   const { t } = useTranslation('setting');
 
   return (
     <>
       <PageTitle title={t('tab.common')} />
-      <Common />
+      <Common {...props} />
       <Footer>LobeChat v{CURRENT_VERSION}</Footer>
     </>
   );

package/src/app/settings/common/page.tsx

@@ -1,3 +1,9 @@
+import { getServerConfig } from '@/config/server';
+
 import Index from './index';
 
-export default () => <Index />;
+export default () => {
+  const { SHOW_ACCESS_CODE_CONFIG } = getServerConfig();
+
+  return <Index showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG} />;
+};

package/src/app/settings/page.tsx

@@ -1,3 +1,4 @@
+import { getServerConfig } from '@/config/server';
 import { isMobileDevice } from '@/utils/responsive';
 
 import DesktopPage from './(desktop)';
@@ -8,7 +9,9 @@ const Page = () => {
 
   const Page = mobile ? MobilePage : DesktopPage;
 
-  return <Page />;
+  const { SHOW_ACCESS_CODE_CONFIG } = getServerConfig();
+
+  return <Page showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG} />;
 };
 
 export default Page;

package/src/config/server.ts

@@ -33,8 +33,12 @@ export const getServerConfig = () => {
     regions = process.env.OPENAI_FUNCTION_REGIONS.split(',');
   }
 
+  const ACCESS_CODE = process.env.ACCESS_CODE;
+
   return {
-    ACCESS_CODE: process.env.ACCESS_CODE,
+    ACCESS_CODE,
+
+    SHOW_ACCESS_CODE_CONFIG: !!ACCESS_CODE,
 
     OPENAI_API_KEY: process.env.OPENAI_API_KEY,
     OPENAI_PROXY_URL: process.env.OPENAI_PROXY_URL,

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

@@ -0,0 +1,56 @@
+import { Icon } from '@lobehub/ui';
+import { Button } from 'antd';
+import { LucideBlocks } from 'lucide-react';
+import { forwardRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useStore } from '@/features/AgentSetting/store';
+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 [toggleAgentPlugin] = useStore((s) => [s.toggleAgentPlugin]);
+  const [installPlugin, saveToDevList, updateNewDevPlugin] = useToolStore((s) => [
+    s.installPlugin,
+    s.saveToCustomPluginList,
+    s.updateNewCustomPlugin,
+  ]);
+
+  const togglePlugin = async (pluginId: string, fetchManifest?: boolean) => {
+    toggleAgentPlugin(pluginId);
+    if (fetchManifest) {
+      await installPlugin(pluginId);
+    }
+  };
+
+  return (
+    <>
+      <DevModal
+        onOpenChange={setModal}
+        onSave={async (devPlugin) => {
+          // 先保存
+          saveToDevList(devPlugin);
+          // 再开启插件
+          await togglePlugin(devPlugin.identifier, true);
+        }}
+        onValueChange={updateNewDevPlugin}
+        open={showModal}
+      />
+      <Button
+        icon={<Icon icon={LucideBlocks} />}
+        onClick={(e) => {
+          e.stopPropagation();
+          setModal(true);
+        }}
+        ref={ref}
+        size={'small'}
+      >
+        {t('plugin.addTooltip')}
+      </Button>
+    </>
+  );
+});
+
+export default AddPluginButton;

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

@@ -0,0 +1,48 @@
+import { Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ css, prefixCls }) => ({
+  avatar: css`
+    .${prefixCls}-skeleton-header {
+      padding-right: 0;
+    }
+  `,
+  label: css`
+    li {
+      height: 14px !important;
+    }
+
+    li + li {
+      margin-block-start: 12px !important;
+    }
+  `,
+}));
+
+const LoadingList = () => {
+  const { styles } = useStyles();
+
+  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}
+      />
+    ),
+  };
+
+  return [loadingItem, loadingItem, loadingItem];
+};
+
+export default LoadingList;

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

@@ -5,8 +5,8 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import DevModal from '@/features/PluginDevModal';
-import { usePluginStore } from '@/store/plugin';
-import { pluginSelectors } from '@/store/plugin/selectors';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
 
 import { useStore } from '../store';
 
@@ -19,15 +19,15 @@ const MarketList = memo<{ id: string }>(({ id }) => {
   const plugins = useStore((s) => s.config.plugins || []);
 
   const [useFetchPluginList, fetchPluginManifest, deleteCustomPlugin, updateCustomPlugin] =
-    usePluginStore((s) => [
+    useToolStore((s) => [
       s.useFetchPluginStore,
       s.installPlugin,
       s.deleteCustomPlugin,
       s.updateCustomPlugin,
     ]);
 
-  const pluginManifestLoading = usePluginStore((s) => s.pluginManifestLoading, isEqual);
-  const devPlugin = usePluginStore(pluginSelectors.getDevPluginById(id), isEqual);
+  const pluginManifestLoading = useToolStore((s) => s.pluginInstallLoading, isEqual);
+  const devPlugin = useToolStore(pluginSelectors.getDevPluginById(id), isEqual);
 
   useFetchPluginList();
 

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

@@ -0,0 +1,36 @@
+import { Switch } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useToolStore } from '@/store/tool';
+
+import { useStore } from '../../store';
+
+const PluginSwitch = memo<{ identifier: string }>(({ identifier }) => {
+  const pluginManifestLoading = useToolStore((s) => s.pluginInstallLoading, isEqual);
+  const [userEnabledPlugins, hasPlugin, toggleAgentPlugin] = useStore((s) => [
+    s.config.plugins || [],
+    !!s.config.plugins,
+    s.toggleAgentPlugin,
+  ]);
+
+  return (
+    <Flexbox align={'center'} gap={8} horizontal>
+      <Switch
+        checked={
+          // 如果在加载中，说明激活了
+          pluginManifestLoading[identifier] || !hasPlugin
+            ? false
+            : userEnabledPlugins.includes(identifier)
+        }
+        loading={pluginManifestLoading[identifier]}
+        onChange={() => {
+          toggleAgentPlugin(identifier);
+        }}
+      />
+    </Flexbox>
+  );
+});
+
+export default PluginSwitch;