@lobehub/chat 0.68.0 → 0.69.0

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

@@ -2,14 +2,14 @@ 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 { LucideBlocks, LucideStore, LucideTrash2 } 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 { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
 
 import { useStore } from '../store';
 import LocalPluginItem from './LocalPluginItem';
@@ -37,11 +37,7 @@ const MarketList = memo(() => {
 
   const [showModal, setModal] = useState(false);
 
-  // useEffect(() => {
-  //   setModal(true);
-  // }, []);
-
-  const [plugins, hasPlugin, toggleAgentPlugin] = useStore((s) => [
+  const [userEnabledPlugins, hasPlugin, toggleAgentPlugin] = useStore((s) => [
     s.config.plugins || [],
     !!s.config.plugins,
     s.toggleAgentPlugin,
@@ -57,6 +53,7 @@ const MarketList = memo(() => {
   const pluginManifestLoading = usePluginStore((s) => s.pluginManifestLoading, isEqual);
   const pluginList = usePluginStore((s) => s.pluginList, isEqual);
   const customPluginList = usePluginStore((s) => s.customPluginList, isEqual);
+  const totalList = usePluginStore(pluginSelectors.pluginList, isEqual);
 
   useFetchPluginList();
 
@@ -100,7 +97,9 @@ const MarketList = memo(() => {
       <Switch
         checked={
           // 如果在加载中，说明激活了
-          pluginManifestLoading[identifier] || !hasPlugin ? false : plugins.includes(identifier)
+          pluginManifestLoading[identifier] || !hasPlugin
+            ? false
+            : userEnabledPlugins.includes(identifier)
         }
         loading={pluginManifestLoading[identifier]}
         onChange={(checked) => {
@@ -132,6 +131,35 @@ const MarketList = memo(() => {
     tag: identifier,
   }));
 
+  //  =========== Deprecated Plugin List =========== //
+
+  // 基于 userEnabledPlugins 和完整的 totalList，检查出不在 totalList 中的插件
+  const deprecatedList = userEnabledPlugins
+    .filter((pluginId) => totalList.findIndex((p) => p.identifier === pluginId) < 0)
+    .map((id) => ({
+      avatar: <Avatar avatar={'♻️'} />,
+      children: (
+        <Switch
+          checked={true}
+          onChange={(checked) => {
+            togglePlugin(id, checked);
+          }}
+        />
+      ),
+      label: (
+        <Flexbox align={'center'} gap={8} horizontal>
+          {id}
+          <Tag bordered={false} color={'red'}>
+            {t('list.item.deprecated.title', { ns: 'plugin' })}
+          </Tag>
+        </Flexbox>
+      ),
+      minWidth: undefined,
+      tag: id,
+    }));
+
+  const hasDeprecated = deprecatedList.length > 0;
+
   return (
     <>
       <DevModal
@@ -148,27 +176,44 @@ const MarketList = memo(() => {
       <Form
         items={[
           {
-            children: isEmpty ? loadingList : [...customList, ...list],
+            children: isEmpty ? loadingList : [...deprecatedList, ...customList, ...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>
+              <Flexbox gap={8} horizontal>
+                {hasDeprecated ? (
+                  <Tooltip title={t('settingPlugin.clearDeprecated')}>
+                    <Button
+                      icon={<Icon icon={LucideTrash2} />}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        for (const i of deprecatedList) {
+                          togglePlugin(i.tag as string, false);
+                        }
+                      }}
+                      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>
+              </Flexbox>
             ),
             icon: LucideStore,
             title: t('settingPlugin.title'),
           },
         ]}
         {...FORM_STYLE}
-      />{' '}
+      />
     </>
   );
 });

package/src/features/AgentSetting/store/reducers/config.ts

@@ -1,8 +1,8 @@
 import { produce } from 'immer';
-import { merge } from 'lodash-es';
 
 import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
 import { LobeAgentConfig } from '@/types/session';
+import { merge } from '@/utils/merge';
 
 export type ConfigDispatch =
   | { config: Partial<any>; type: 'update' }
@@ -13,7 +13,7 @@ export const configReducer = (state: LobeAgentConfig, payload: ConfigDispatch):
   switch (payload.type) {
     case 'update': {
       return produce(state, (draftState) => {
-        return merge({}, draftState, payload.config);
+        return merge(draftState, payload.config);
       });
     }
 

package/src/features/AgentSetting/store/reducers/meta.ts

@@ -1,8 +1,8 @@
 import { produce } from 'immer';
-import { merge } from 'lodash-es';
 
 import { DEFAULT_AGENT_META } from '@/const/meta';
 import { MetaData } from '@/types/meta';
+import { merge } from '@/utils/merge';
 
 export type MetaDataDispatch = { type: 'update'; value: Partial<MetaData> } | { type: 'reset' };
 
@@ -10,7 +10,7 @@ export const metaDataReducer = (state: MetaData, payload: MetaDataDispatch): Met
   switch (payload.type) {
     case 'update': {
       return produce(state, (draftState) => {
-        return merge({}, draftState, payload.value);
+        return merge(draftState, payload.value);
       });
     }
 

package/src/features/AvatarWithUpload/index.tsx

@@ -10,7 +10,9 @@ const useStyle = createStyles(
   ({ css, token }) => css`
     cursor: pointer;
     border-radius: 50%;
-    transition: scale 400ms ${token.motionEaseOut}, box-shadow 100ms ${token.motionEaseOut};
+    transition:
+      scale 400ms ${token.motionEaseOut},
+      box-shadow 100ms ${token.motionEaseOut};
 
     &:hover {
       box-shadow: 0 0 0 3px ${token.colorText};

package/src/features/PluginDevModal/index.tsx

@@ -21,7 +21,7 @@ const useStyles = createStyles(({ css, token, prefixCls }) => ({
     }
   `,
   root: css`
-    backdrop-filter: blur(5px);
+    backdrop-filter: blur(2px);
   `,
 }));
 

package/src/locales/default/plugin.ts

@@ -82,6 +82,7 @@ export default {
   },
   list: {
     item: {
+      'deprecated.title': '已删除',
       'local.config': '配置',
       'local.title': '自定义',
     },

package/src/locales/default/setting.ts

@@ -1,4 +1,3 @@
-
 export default {
   danger: {
     clear: {
@@ -131,6 +130,7 @@ export default {
   settingPlugin: {
     add: '添加',
     addTooltip: '添加自定义插件',
+    clearDeprecated: '移除无效插件',
     config: '{{id}} 插件配置',
     title: '插件列表',
   },

package/src/pages/_document.page.tsx

@@ -5,12 +5,11 @@ import Document, { DocumentContext, Head, Html, Main, NextScript } from 'next/do
 class MyDocument extends Document {
   static async getInitialProps(ctx: DocumentContext) {
     const page = await ctx.renderPage({
-      enhanceApp: (App) => (props) =>
-        (
-          <StyleProvider cache={extractStaticStyle.cache}>
-            <App {...props} />
-          </StyleProvider>
-        ),
+      enhanceApp: (App) => (props) => (
+        <StyleProvider cache={extractStaticStyle.cache}>
+          <App {...props} />
+        </StyleProvider>
+      ),
     });
 
     const styles = extractStaticStyle(page.html).map((item) => item.style);

package/src/pages/chat/SessionList/Header.tsx

@@ -63,8 +63,10 @@ const Header = memo<{ mobile?: 'navbar' | 'search' }>(({ mobile }) => {
       </Flexbox>
       <SearchBar
         allowClear
+        enableShortKey
         onChange={(e) => useSessionStore.setState({ searchKeywords: e.target.value })}
         placeholder={t('searchAgentPlaceholder')}
+        shortKey={'k'}
         spotlight
         type={'ghost'}
         value={keywords}

package/src/pages/welcome/Footer/index.tsx

@@ -11,7 +11,9 @@ const Footer = memo(() => {
 
   return (
     <Flexbox align={'center'} horizontal justify={'space-between'} style={{ padding: 16 }}>
-      <span style={{ color: theme.colorTextDescription }}>©{new Date().getFullYear()} LobeHub</span>
+      <span style={{ color: theme.colorTextDescription }}>
+        ©{new Date().getFullYear()} LobeHub
+      </span>
       <Flexbox horizontal>
         <ActionIcon
           icon={DiscordIcon}

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

@@ -1,10 +1,10 @@
 import { t } from 'i18next';
-import { merge } from 'lodash-es';
 
 import { DEFAULT_AVATAR, DEFAULT_BACKGROUND_COLOR } from '@/const/meta';
 import { SessionStore } from '@/store/session';
 import { LanguageModel } from '@/types/llm';
 import { MetaData } from '@/types/meta';
+import { merge } from '@/utils/merge';
 
 import { sessionSelectors } from '../session/selectors';
 import { initialLobeAgentConfig } from './initialState';
@@ -19,7 +19,7 @@ const currentAgentTitle = (s: SessionStore) => currentAgentMeta(s)?.title || t('
 
 const currentAgentConfig = (s: SessionStore) => {
   const session = sessionSelectors.currentSession(s);
-  return merge({}, initialLobeAgentConfig, session?.config);
+  return merge(initialLobeAgentConfig, session?.config);
 };
 
 const currentAgentSystemRole = (s: SessionStore) => {

package/src/utils/merge.ts

@@ -0,0 +1,11 @@
+import { merge as _merge, mergeWith } from 'lodash-es';
+
+/**
+ * 用于合并对象，如果是数组则直接替换
+ * @param target
+ * @param source
+ */
+export const merge: typeof _merge = <T = object>(target: T, source: T) =>
+  mergeWith({}, target, source, (obj, src) => {
+    if (Array.isArray(obj)) return src;
+  });