@lobehub/chat 0.108.0 → 0.109.0

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

@@ -1,232 +0,0 @@
-import { Avatar, Form, Icon, Tooltip } from '@lobehub/ui';
-import { Button, Skeleton, Space, Switch, Tag } from 'antd';
-import { createStyles } from 'antd-style';
-import isEqual from 'fast-deep-equal';
-import { LucideBlocks, LucideSettings, LucideStore, LucideTrash2 } from 'lucide-react';
-import { memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { FORM_STYLE } from '@/const/layoutTokens';
-import DevModal from '@/features/PluginDevModal';
-import { pluginHelpers, usePluginStore } from '@/store/plugin';
-import { pluginSelectors } from '@/store/plugin/selectors';
-
-import { useStore } from '../store';
-import LocalPluginItem from './LocalPluginItem';
-import MarketSettingModal from './MarketSettingModal';
-
-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 MarketList = memo(() => {
-  const { t } = useTranslation('setting');
-  const { styles } = useStyles();
-
-  const [showModal, setModal] = useState(false);
-  const [showSettings, setShowSettings] = useState(false);
-
-  const [userEnabledPlugins, hasPlugin, toggleAgentPlugin] = useStore((s) => [
-    s.config.plugins || [],
-    !!s.config.plugins,
-    s.toggleAgentPlugin,
-  ]);
-
-  const [useFetchPluginList, fetchPluginManifest, saveToDevList, updateNewDevPlugin] =
-    usePluginStore((s) => [
-      s.useFetchPluginStore,
-      s.installPlugin,
-      s.saveToCustomPluginList,
-      s.updateNewCustomPlugin,
-    ]);
-  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();
-
-  const togglePlugin = async (pluginId: string, fetchManifest?: boolean) => {
-    toggleAgentPlugin(pluginId);
-    if (fetchManifest) {
-      await fetchPluginManifest(pluginId);
-    }
-  };
-
-  //  =========== Skeleton Loading =========== //
-  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}
-      />
-    ),
-  };
-  const loadingList = [loadingItem, loadingItem, loadingItem];
-
-  const isEmpty = pluginList.length === 0;
-
-  //  =========== Plugin List =========== //
-
-  const list = pluginList.map(({ identifier, meta }) => ({
-    avatar: <Avatar avatar={meta.avatar} />,
-    children: (
-      <Switch
-        checked={
-          // 如果在加载中，说明激活了
-          pluginManifestLoading[identifier] || !hasPlugin
-            ? false
-            : userEnabledPlugins.includes(identifier)
-        }
-        loading={pluginManifestLoading[identifier]}
-        onChange={(checked) => {
-          togglePlugin(identifier, checked);
-        }}
-      />
-    ),
-    desc: pluginHelpers.getPluginDesc(meta),
-    label: pluginHelpers.getPluginTitle(meta),
-    minWidth: undefined,
-    tag: identifier,
-  }));
-
-  //  =========== Custom Plugin List =========== //
-
-  const customList = customPluginList.map(({ identifier, meta }) => ({
-    avatar: <Avatar avatar={pluginHelpers.getPluginAvatar(meta) || '🧩'} />,
-    children: <LocalPluginItem id={identifier} />,
-    desc: pluginHelpers.getPluginDesc(meta),
-    label: (
-      <Flexbox align={'center'} gap={8} horizontal>
-        {pluginHelpers.getPluginTitle(meta)}
-        <Tag bordered={false} color={'gold'}>
-          {t('list.item.local.title', { ns: 'plugin' })}
-        </Tag>
-      </Flexbox>
-    ),
-    minWidth: undefined,
-    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
-        onOpenChange={setModal}
-        onSave={async (devPlugin) => {
-          // 先保存
-          saveToDevList(devPlugin);
-          // 再开启插件
-          await togglePlugin(devPlugin.identifier, true);
-        }}
-        onValueChange={updateNewDevPlugin}
-        open={showModal}
-      />
-      <MarketSettingModal onOpenChange={setShowSettings} open={showSettings} />
-      <Form
-        items={[
-          {
-            children: isEmpty ? loadingList : [...deprecatedList, ...customList, ...list],
-            extra: (
-              <Space.Compact style={{ width: 'auto' }}>
-                <Button
-                  icon={<Icon icon={LucideBlocks} />}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setModal(true);
-                  }}
-                  size={'small'}
-                >
-                  {t('settingPlugin.addTooltip')}
-                </Button>
-                {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'}
-                    />
-                  </Tooltip>
-                ) : null}
-                <Tooltip title={t('settingPlugin.settings')}>
-                  <Button
-                    icon={<Icon icon={LucideSettings} />}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setShowSettings(true);
-                    }}
-                    size={'small'}
-                  />
-                </Tooltip>
-              </Space.Compact>
-            ),
-            icon: LucideStore,
-            title: t('settingPlugin.title'),
-          },
-        ]}
-        {...FORM_STYLE}
-      />
-    </>
-  );
-});
-
-export default MarketList;

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

@@ -1,80 +0,0 @@
-import { Form, ItemGroup, Markdown } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import isEqual from 'fast-deep-equal';
-import { ToyBrick } from 'lucide-react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { FORM_STYLE } from '@/const/layoutTokens';
-import { transformPluginSettings } from '@/features/PluginSettings';
-import PluginSettingRender from '@/features/PluginSettings/PluginSettingRender';
-import { pluginHelpers, usePluginStore } from '@/store/plugin';
-import { pluginSelectors } from '@/store/plugin/selectors';
-
-import { useStore } from '../store';
-
-const useStyles = createStyles(({ css, token, cx, stylish }) => ({
-  markdown: cx(
-    stylish.markdownInChat,
-    css`
-      p {
-        color: ${token.colorTextDescription};
-      }
-    `,
-  ),
-}));
-
-const PluginSettings = memo(() => {
-  const { t } = useTranslation('setting');
-  const { styles } = useStyles();
-
-  const [plugins] = useStore((s) => [s.config.plugins || [], !!s.config.plugins]);
-
-  const [useFetchPluginList, updatePluginSettings] = usePluginStore((s) => [
-    s.useFetchPluginStore,
-    s.updatePluginSettings,
-  ]);
-  const pluginList = usePluginStore(pluginSelectors.pluginList);
-
-  const pluginManifestMap = usePluginStore((s) => s.pluginManifestMap, isEqual);
-  const pluginsSettings = usePluginStore((s) => s.pluginsSettings, isEqual);
-  useFetchPluginList();
-
-  const isEmpty = pluginList.length === 0;
-
-  const pluginsConfig = isEmpty
-    ? []
-    : (plugins
-        .map((identifier) => {
-          const item = pluginList.find((i) => i.identifier === identifier);
-
-          if (!item) return null;
-          const manifest = pluginManifestMap[identifier];
-
-          if (!manifest?.settings) return null;
-
-          return {
-            children: transformPluginSettings(manifest.settings).map((item) => ({
-              ...item,
-              children: (
-                <PluginSettingRender
-                  defaultValue={pluginsSettings[identifier]?.[item.name]}
-                  format={item.format}
-                  onChange={(value) => {
-                    updatePluginSettings(identifier, { [item.name]: value });
-                  }}
-                  type={item.type as any}
-                />
-              ),
-              desc: item.desc && <Markdown className={styles.markdown}>{item.desc}</Markdown>,
-            })),
-            icon: ToyBrick,
-            title: t('settingPlugin.config', { id: pluginHelpers.getPluginTitle(item.meta) }),
-          };
-        })
-        .filter(Boolean) as unknown as ItemGroup[]);
-
-  return <Form items={pluginsConfig} {...FORM_STYLE} />;
-});
-
-export default PluginSettings;

package/src/store/chat/reducers/files.test.ts

@@ -1,38 +0,0 @@
-import { FileDispatch, FilesState, filesReducer } from './files';
-
-describe('filesReducer', () => {
-  it('should add a file to the state', () => {
-    const initialState: FilesState = ['file1', 'file2'];
-    const action: FileDispatch = { type: 'addFile', file: 'file3' };
-    const newState = filesReducer(initialState, action);
-    expect(newState).toEqual(['file1', 'file2', 'file3']);
-  });
-
-  it('should delete a file from the state by ID', () => {
-    const initialState: FilesState = ['file1', 'file2', 'file3'];
-    const action: FileDispatch = { type: 'deleteFile', id: 'file2' };
-    const newState = filesReducer(initialState, action);
-    expect(newState).toEqual(['file1', 'file3']);
-  });
-
-  it('should return the state unchanged if file ID does not exist for deletion', () => {
-    const initialState: FilesState = ['file1', 'file2', 'file3'];
-    const action: FileDispatch = { type: 'deleteFile', id: 'file4' };
-    const newState = filesReducer(initialState, action);
-    expect(newState).toEqual(['file1', 'file2', 'file3']);
-  });
-
-  it('should add multiple files to the state', () => {
-    const initialState: FilesState = ['file1', 'file2'];
-    const action: FileDispatch = { type: 'addFiles', files: ['file3', 'file4'] };
-    const newState = filesReducer(initialState, action);
-    expect(newState).toEqual(['file1', 'file2', 'file3', 'file4']);
-  });
-
-  it('should return the initial state if the action type is unknown', () => {
-    const initialState: FilesState = ['file1', 'file2'];
-    const action = { type: 'unknown', id: 'file1' };
-    const newState = filesReducer(initialState, action as FileDispatch);
-    expect(newState).toEqual(['file1', 'file2']);
-  });
-});

package/src/store/chat/reducers/files.ts

@@ -1,37 +0,0 @@
-import { produce } from 'immer';
-
-export type FilesState = string[];
-
-export type FileDispatch =
-  | { file: string; type: 'addFile' }
-  | { id: string; type: 'deleteFile' }
-  | { files: string[]; type: 'addFiles' };
-
-export const filesReducer = (state: FilesState, payload: FileDispatch): FilesState => {
-  switch (payload.type) {
-    case 'addFile': {
-      return produce(state, (draftState) => {
-        draftState.push(payload.file);
-      });
-    }
-
-    case 'deleteFile': {
-      return produce(state, (draftState) => {
-        const index = draftState.indexOf(payload.id);
-        if (index !== -1) {
-          draftState.splice(index, 1);
-        }
-      });
-    }
-
-    case 'addFiles': {
-      return produce(state, (draftState) => {
-        draftState.push(...payload.files);
-      });
-    }
-
-    default: {
-      return state;
-    }
-  }
-};

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

@@ -1,21 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { usePluginStore } from '../store';
-
-export const usePluginHydrated = () => {
-  // 根据 sessions 是否有值来判断是否已经初始化
-
-  // 并且插件的 manifest 也准备完毕
-  const manifestPrepared = usePluginStore((s) => s.manifestPrepared);
-  const [isInit, setInit] = useState(false);
-
-  useEffect(() => {
-    const hasRehydrated = usePluginStore.persist.hasHydrated();
-
-    if (hasRehydrated && !isInit) {
-      setInit(true);
-    }
-  }, []);
-
-  return isInit && manifestPrepared;
-};

package/src/store/plugin/index.ts

@@ -1,2 +0,0 @@
-export * from './helpers';
-export { usePluginStore } from './store';

package/src/store/plugin/initialState.ts

@@ -1,9 +0,0 @@
-import { CustomPluginState, initialCustomPluginState } from './slices/customPlugin';
-import { PluginState, initialPluginState } from './slices/plugin';
-
-export type PluginStoreState = PluginState & CustomPluginState;
-
-export const initialState: PluginStoreState = {
-  ...initialPluginState,
-  ...initialCustomPluginState,
-};

package/src/store/plugin/slices/plugin/action.ts

@@ -1,173 +0,0 @@
-import {
-  LobeChatPluginManifest,
-  LobeChatPluginsMarketIndex,
-  pluginManifestSchema,
-} from '@lobehub/chat-plugin-sdk';
-import { message } from 'antd';
-import { produce } from 'immer';
-import { merge, uniq } from 'lodash-es';
-import useSWR, { SWRResponse } from 'swr';
-import { StateCreator } from 'zustand/vanilla';
-
-import { pluginService } from '@/services/plugin';
-import { pluginSelectors } from '@/store/plugin/selectors';
-import { LobeSessions } from '@/types/session';
-import { setNamespace } from '@/utils/storeDebug';
-
-import { PluginStore } from '../../store';
-import { PluginDispatch, pluginManifestReducer } from './reducers/manifest';
-
-const n = setNamespace('plugin');
-
-/**
- * 插件接口
- */
-export interface PluginAction {
-  checkLocalEnabledPlugins: (sessions: LobeSessions) => void;
-  checkPluginsIsInstalled: (plugins: string[]) => void;
-  deletePluginSettings: (id: string) => void;
-  dispatchPluginManifest: (payload: PluginDispatch) => void;
-  installPlugin: (identifier: string) => Promise<void>;
-  installPlugins: (plugins: string[]) => Promise<void>;
-  loadPluginStore: () => Promise<LobeChatPluginsMarketIndex>;
-  resetPluginSettings: () => void;
-  updateManifestLoadingState: (key: string, value: boolean | undefined) => void;
-  updatePluginSettings: <T>(id: string, settings: Partial<T>) => void;
-  useCheckPluginsIsInstalled: (plugins: string[]) => SWRResponse;
-  useFetchPluginStore: () => SWRResponse<LobeChatPluginsMarketIndex>;
-}
-
-export const createPluginSlice: StateCreator<
-  PluginStore,
-  [['zustand/devtools', never]],
-  [],
-  PluginAction
-> = (set, get) => ({
-  checkLocalEnabledPlugins: async (sessions) => {
-    const { checkPluginsIsInstalled } = get();
-
-    let enabledPlugins: string[] = [];
-
-    for (const session of sessions) {
-      const plugins = session.config.plugins;
-      if (!plugins || plugins.length === 0) continue;
-
-      enabledPlugins = [...enabledPlugins, ...plugins];
-    }
-
-    const plugins = uniq(enabledPlugins);
-
-    await checkPluginsIsInstalled(plugins);
-  },
-  checkPluginsIsInstalled: async (plugins) => {
-    // if there is no plugins, just skip.
-    if (plugins.length === 0) return;
-
-    const { loadPluginStore, installPlugins } = get();
-
-    // check if the store is empty
-    // if it is, we need to load the plugin store
-    if (pluginSelectors.onlinePluginStore(get()).length === 0) {
-      await loadPluginStore();
-    }
-
-    await installPlugins(plugins);
-
-    set({ manifestPrepared: true }, false, n('checkPluginsIsInstalled'));
-  },
-  deletePluginSettings: (id) => {
-    set(
-      produce((draft) => {
-        draft.pluginsSettings[id] = undefined;
-      }),
-      false,
-      n('deletePluginSettings'),
-    );
-  },
-  dispatchPluginManifest: (payload) => {
-    const { pluginManifestMap } = get();
-    const nextManifest = pluginManifestReducer(pluginManifestMap, payload);
-
-    set({ pluginManifestMap: nextManifest }, false, n('dispatchPluginManifest', payload));
-  },
-  installPlugin: async (name) => {
-    const plugin = pluginSelectors.getPluginMetaById(name)(get());
-
-    // 1. valid plugin
-
-    if (!plugin) return;
-
-    if (!plugin.manifest) {
-      message.error('插件未配置 描述文件');
-      return;
-    }
-
-    // 2. 发送请求
-    get().updateManifestLoadingState(name, true);
-    let data: LobeChatPluginManifest | null;
-
-    try {
-      const res = await fetch(plugin.manifest);
-
-      data = await res.json();
-    } catch (error) {
-      data = null;
-      console.error(error);
-    }
-
-    get().updateManifestLoadingState(name, undefined);
-    if (!data) {
-      message.error(`插件 ${plugin.meta.title} 描述文件请求失败`);
-      return;
-    }
-
-    // 3. 校验插件文件格式规范
-    const { success } = pluginManifestSchema.safeParse(data);
-
-    if (!success) {
-      message.error('插件描述文件格式错误');
-      return;
-    }
-
-    // 4. 存储 manifest 信息
-    get().dispatchPluginManifest({ id: plugin.identifier, plugin: data, type: 'addManifest' });
-  },
-  installPlugins: async (plugins) => {
-    const { installPlugin } = get();
-
-    await Promise.all(plugins.map((identifier) => installPlugin(identifier)));
-  },
-  loadPluginStore: async () => {
-    const pluginMarketIndex = await pluginService.getPluginList();
-
-    set({ pluginList: pluginMarketIndex.plugins }, false, n('loadPluginList'));
-
-    return pluginMarketIndex;
-  },
-  resetPluginSettings: () => {
-    set({ pluginsSettings: {} }, false, n('resetPluginSettings'));
-  },
-  updateManifestLoadingState: (key, value) => {
-    set(
-      produce((draft) => {
-        draft.pluginManifestLoading[key] = value;
-      }),
-      false,
-      n('updateManifestLoadingState'),
-    );
-  },
-  updatePluginSettings: (id, settings) => {
-    set(
-      produce((draft) => {
-        draft.pluginsSettings[id] = merge({}, draft.pluginsSettings[id], settings);
-      }),
-      false,
-      n('updatePluginSettings'),
-    );
-  },
-
-  useCheckPluginsIsInstalled: (plugins) => useSWR(plugins, get().checkPluginsIsInstalled),
-
-  useFetchPluginStore: () =>
-    useSWR<LobeChatPluginsMarketIndex>('loadPluginStore', get().loadPluginStore),
-});