@lobehub/chat 0.63.3 → 0.64.1

package/src/features/PluginDevModal/index.tsx

@@ -0,0 +1,153 @@
+import { Icon } from '@lobehub/ui';
+import { App, Button, ConfigProvider, Form, Modal, Popconfirm } from 'antd';
+import { createStyles, useTheme } from 'antd-style';
+import { LucideBlocks } from 'lucide-react';
+import { lighten } from 'polished';
+import { memo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { DevPlugin } from '@/store/plugin/initialState';
+
+import ManifestForm from './ManifestForm';
+import MetaForm from './MetaForm';
+import PluginPreview from './PluginPreview';
+
+const useStyles = createStyles(({ css, token, prefixCls }) => ({
+  content: css`
+    .${prefixCls}-modal-content {
+      border: 1px solid ${token.colorSplit};
+      border-radius: 12px;
+    }
+  `,
+  root: css`
+    backdrop-filter: blur(5px);
+  `,
+}));
+
+interface DevModalProps {
+  onDelete?: () => void;
+  onOpenChange: (open: boolean) => void;
+  onSave?: (value: DevPlugin) => void;
+  onValueChange?: (value: Partial<DevPlugin>) => void;
+  open?: boolean;
+  showDelete?: boolean;
+  value?: DevPlugin;
+}
+
+const DevModal = memo<DevModalProps>(
+  ({ open, showDelete, value, onValueChange, onSave, onOpenChange, onDelete }) => {
+    const { t } = useTranslation('plugin');
+
+    const [form] = Form.useForm();
+    const theme = useTheme();
+
+    const { styles } = useStyles();
+
+    const { message } = App.useApp();
+
+    useEffect(() => {
+      form.setFieldsValue(value);
+    }, []);
+
+    const footer = (
+      <Flexbox horizontal justify={'space-between'} style={{ marginTop: 24 }}>
+        {showDelete ? (
+          <Popconfirm
+            okButtonProps={{
+              danger: true,
+              type: 'primary',
+            }}
+            onConfirm={() => {
+              onDelete?.();
+              message.success(t('dev.deleteSuccess'));
+            }}
+            placement={'topLeft'}
+            title={t('dev.confirmDeleteDevPlugin')}
+          >
+            <Button danger>{t('delete', { ns: 'common' })}</Button>
+          </Popconfirm>
+        ) : (
+          <div />
+        )}
+
+        <Flexbox horizontal>
+          <Button
+            onClick={() => {
+              onOpenChange(false);
+            }}
+          >
+            {t('cancel', { ns: 'common' })}
+          </Button>
+          <Button
+            onClick={() => {
+              form.submit();
+            }}
+            type={'primary'}
+          >
+            {t('dev.save')}
+          </Button>
+        </Flexbox>
+      </Flexbox>
+    );
+    return (
+      <Form.Provider
+        onFormChange={() => {
+          onValueChange?.(form.getFieldsValue());
+        }}
+        onFormFinish={(_, info) => {
+          onSave?.(info.values as DevPlugin);
+          message.success(t('dev.saveSuccess'));
+          onOpenChange(false);
+        }}
+      >
+        <ConfigProvider
+          theme={{
+            token: {
+              colorBgElevated: lighten(0.005, theme.colorBgContainer),
+            },
+          }}
+        >
+          <Modal
+            centered
+            closable
+            footer={footer}
+            maskClosable
+            okText={t('dev.save')}
+            onCancel={() => {
+              onOpenChange(false);
+            }}
+            onOk={() => {
+              form.submit();
+            }}
+            open={open}
+            style={{ height: 750 }}
+            title={
+              <Flexbox gap={8} horizontal>
+                <Icon icon={LucideBlocks} />
+                {t('dev.title')}
+              </Flexbox>
+            }
+            width={700}
+            wrapClassName={styles.root}
+          >
+            <Flexbox gap={12}>
+              {t('dev.modalDesc')}
+              {/*<Tabs*/}
+              {/*  items={[*/}
+              {/*    { children: <MetaForm />, key: 'meta', label: t('dev.tabs.meta') },*/}
+              {/*    { children: <ManifestForm />, key: 'manifest', label: t('dev.tabs.manifest') },*/}
+              {/*  ]}*/}
+              {/*/>*/}
+              <PluginPreview />
+              <ManifestForm form={form} mode={'url'} />
+              <MetaForm form={form} />
+            </Flexbox>
+          </Modal>
+        </ConfigProvider>
+      </Form.Provider>
+    );
+  },
+);
+
+export default DevModal;

package/src/locales/default/error.ts

@@ -1,7 +1,3 @@
-import { PluginErrorType } from '@lobehub/chat-plugin-sdk';
-
-import { ChatErrorType } from '@/types/fetch';
-
 export default {
   pluginSettings: {
     desc: '完成以下配置，即可开始使用该插件',
@@ -19,28 +15,24 @@ export default {
     503: '很抱歉，服务器当前无法处理您的请求，可能是由于过载或正在进行维护，请稍后再试',
     504: '很抱歉，服务器没有等到上游服务器的回应，请稍后再试',
 
-    [PluginErrorType.PluginMarketIndexNotFound]:
-      '很抱歉，服务器没有找到插件索引，请检查索引地址是否正确',
-    [PluginErrorType.PluginMarketIndexInvalid]:
-      '很抱歉，插件索引校验未通过，请检查索引文件格式是否规范',
-    [PluginErrorType.PluginMetaNotFound]:
-      '很抱歉，没有在索引中发现该插件，请插件在索引中的配置信息',
-    [PluginErrorType.PluginMetaInvalid]:
-      '很抱歉，该插件的元信息校验未通过，请检查插件元信息格式是否规范',
-    [PluginErrorType.PluginManifestNotFound]:
+    /* eslint-disable sort-keys-fix/sort-keys-fix */
+    PluginMarketIndexNotFound: '很抱歉，服务器没有找到插件索引，请检查索引地址是否正确',
+    PluginMarketIndexInvalid: '很抱歉，插件索引校验未通过，请检查索引文件格式是否规范',
+    PluginMetaNotFound: '很抱歉，没有在索引中发现该插件，请插件在索引中的配置信息',
+    PluginMetaInvalid: '很抱歉，该插件的元信息校验未通过，请检查插件元信息格式是否规范',
+    PluginManifestNotFound:
       '很抱歉，服务器没有找到该插件的描述清单 (manifest.json)，请检查插件描述文件地址是否正确',
-    [PluginErrorType.PluginManifestInvalid]:
-      '很抱歉，该插件的描述清单校验未通过，请检查描述清单格式是否规范',
-    [PluginErrorType.PluginApiNotFound]:
+    PluginManifestInvalid: '很抱歉，该插件的描述清单校验未通过，请检查描述清单格式是否规范',
+    PluginApiNotFound:
       '很抱歉，插件描述清单中不存在该 API ，请检查你的请求方法与插件清单 API 是否匹配',
-    [PluginErrorType.PluginApiParamsError]:
-      '很抱歉，该插件请求的入参校验未通过，请检查入参与 Api 描述信息是否匹配',
-    [PluginErrorType.PluginSettingsInvalid]:
-      '该插件需要正确配置后才可以使用，请检查你的配置是否正确',
+    PluginApiParamsError: '很抱歉，该插件请求的入参校验未通过，请检查入参与 Api 描述信息是否匹配',
+    PluginSettingsInvalid: '该插件需要正确配置后才可以使用，请检查你的配置是否正确',
+    PluginServerError:
+      '插件服务端请求返回出错，请检查根据下面的报错信息检查你的插件描述文件、插件配置或服务端实现',
 
-    [ChatErrorType.InvalidAccessCode]:
-      '密码不正确或为空，请输入正确的访问密码，或者添加自定义 OpenAI API Key',
-    [ChatErrorType.OpenAIBizError]: '请求 OpenAI 服务出错，请根据以下信息排查或重试',
+    InvalidAccessCode: '密码不正确或为空，请输入正确的访问密码，或者添加自定义 OpenAI API Key',
+    OpenAIBizError: '请求 OpenAI 服务出错，请根据以下信息排查或重试',
+    /* eslint-enable */
   },
   unlock: {
     apikey: {

package/src/locales/default/plugin.ts

@@ -4,15 +4,91 @@ export default {
     function_call: '函数调用',
     response: '返回结果',
   },
+  dev: {
+    confirmDeleteDevPlugin: '即将删除该本地插件，删除后将无法找回，是否删除该插件？',
+    deleteSuccess: '插件删除成功',
+    manifest: {
+      identifier: {
+        desc: '插件的唯一标识',
+        label: '标识符',
+      },
+      mode: {
+        'local': '可视化配置',
+        'local-tooltip': '暂时不支持可视化配置',
+        'url': '在线链接',
+      },
+      name: {
+        desc: '插件标题',
+        label: '标题',
+        placeholder: '搜索引擎',
+      },
+    },
+    meta: {
+      author: {
+        desc: '插件的作者',
+        label: '作者',
+      },
+      avatar: {
+        desc: '插件的图标，可以使用 Emoji，也可以使用 URL',
+        label: '图标',
+      },
+      description: {
+        desc: '插件描述',
+        label: '描述',
+        placeholder: '查询搜索引擎获取信息',
+      },
+      formFieldRequired: '该字段为必填项',
+      homepage: {
+        desc: '插件的首页',
+        label: '首页',
+      },
+      identifier: {
+        desc: '插件的唯一标识，仅支持英文字符、数字、破折号 - 、下划线 _',
+        errorDuplicate: '标识符和已有插件重复，请修改标识符',
+        label: '标识符',
+        pattenErrorMessage: '只能输入英文字符、数字 、- 和_ 这两个符号',
+      },
+      manifest: {
+        desc: 'LobeChat 将会通过该链接安装插件',
+        invalid: '输入的 manifest 链接无效，或 manifest 不符合规范',
+        label: '插件描述文件 Url 地址',
+        urlError: '请输入一个有效的网址',
+      },
+      title: {
+        desc: '插件标题',
+        label: '标题',
+        placeholder: '搜索引擎',
+      },
+    },
+    metaConfig: '插件元信息配置',
+    modalDesc: '添加自定义插件后，可用于插件开发验证，也可直接在会话中使用。插件开发文档请参考',
+    preview: {
+      card: '预览插件展示效果',
+      desc: '预览插件描述',
+      title: '插件名称预览',
+    },
+    save: '保存',
+    saveSuccess: '插件设置保存成功',
+    tabs: {
+      manifest: '功能描述清单 (Manifest)',
+      meta: '插件元信息',
+    },
+
+    title: '添加自定义插件',
+  },
+  list: {
+    item: {
+      'local.config': '配置',
+      'local.title': '本地',
+    },
+  },
+
   loading: {
     content: '数据获取中...',
     plugin: '插件运行中...',
   },
   pluginList: '插件列表',
   plugins: {
-    realtimeWeather: '实时天气预报',
-    searchEngine: '搜索引擎',
     unknown: '插件检测中...',
-    websiteCrawler: '网页内容提取',
   },
 };

package/src/locales/default/setting.ts

@@ -1,3 +1,4 @@
+
 export default {
   danger: {
     clear: {
@@ -128,6 +129,8 @@ export default {
     },
   },
   settingPlugin: {
+    add: '添加',
+    addTooltip: '添加自定义插件',
     config: '{{id}} 插件配置',
     title: '插件列表',
   },

package/src/locales/resources/en_US.ts

@@ -3,6 +3,7 @@ import empty from '../../../locales/en_US/empty.json';
 import error from '../../../locales/en_US/error.json';
 import plugin from '../../../locales/en_US/plugin.json';
 import setting from '../../../locales/en_US/setting.json';
+import welcome from '../../../locales/en_US/welcome.json';
 
 const resources = {
   common,
@@ -10,6 +11,7 @@ const resources = {
   error,
   plugin,
   setting,
+  welcome,
 } as const;
 
 export default resources;

package/src/pages/chat/features/Conversation/ChatList/Error/index.tsx

@@ -18,7 +18,8 @@ export const renderErrorMessage: RenderErrorMessage = (error, message: ChatMessa
     case PluginErrorType.PluginManifestInvalid:
     case PluginErrorType.PluginManifestNotFound:
     case PluginErrorType.PluginApiNotFound:
-    case PluginErrorType.PluginApiParamsError: {
+    case PluginErrorType.PluginApiParamsError:
+    case PluginErrorType.PluginServerError: {
       return <PluginError content={(error as any).body} id={message.id} />;
     }
     case PluginErrorType.PluginSettingsInvalid: {

package/src/pages/chat/features/Conversation/ChatList/Plugins/FunctionCall.tsx

@@ -6,7 +6,7 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { pluginSelectors, usePluginStore } from '@/store/plugin';
+import { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
 
 import PluginResult from './PluginResultRender';
 import { useStyles } from './style';
@@ -27,8 +27,11 @@ const FunctionCall = memo<FunctionCallProps>(
 
     const item = usePluginStore(pluginSelectors.getPluginMetaById(id));
 
-    const avatar = item?.meta.avatar ? (
-      <Avatar avatar={item?.meta.avatar} size={32} />
+    const pluginAvatar = pluginHelpers.getPluginAvatar(item?.meta);
+    const pluginTitle = pluginHelpers.getPluginTitle(item?.meta);
+
+    const avatar = pluginAvatar ? (
+      <Avatar avatar={pluginAvatar} size={32} />
     ) : (
       <Icon icon={LucideToyBrick} />
     );
@@ -54,7 +57,7 @@ const FunctionCall = memo<FunctionCallProps>(
           ) : (
             avatar
           )}
-          {t(`plugins.${id}` as any, { ns: 'plugin' })}
+          {pluginTitle ?? t('plugins.unknown')}
           <Icon icon={open ? LucideChevronUp : LucideChevronDown} />
         </Flexbox>
         {open && (

package/src/pages/chat/features/Conversation/ChatList/Plugins/PluginMessage.tsx

@@ -12,41 +12,35 @@ export interface FunctionMessageProps extends ChatMessage {
   loading?: boolean;
 }
 
-const PluginMessage = memo<FunctionMessageProps>(
-  ({
-    content,
-    // loading,
-    name,
-  }) => {
-    const { t } = useTranslation('plugin');
-
-    const manifest = usePluginStore((s) => s.pluginManifestMap[name || '']);
-    let isJSON = true;
-    try {
-      JSON.parse(content);
-    } catch {
-      isJSON = false;
-    }
-
-    // if (!loading)
-
-    if (!isJSON) {
-      return (
-        <Flexbox gap={8} horizontal>
-          <div>
-            <Loading3QuartersOutlined spin />
-          </div>
-          {t('loading.content')}
-        </Flexbox>
-      );
-    }
-
-    if (!manifest?.ui?.url) return;
+const PluginMessage = memo<FunctionMessageProps>(({ content, name }) => {
+  const { t } = useTranslation('plugin');
 
+  const manifest = usePluginStore((s) => s.pluginManifestMap[name || '']);
+  let isJSON = true;
+  try {
+    JSON.parse(content);
+  } catch {
+    isJSON = false;
+  }
+
+  // if (!loading)
+
+  if (!isJSON) {
     return (
-      <CustomRender content={JSON.parse(content)} name={name || 'unknown'} url={manifest.ui?.url} />
+      <Flexbox gap={8} horizontal>
+        <div>
+          <Loading3QuartersOutlined spin />
+        </div>
+        {t('loading.content')}
+      </Flexbox>
     );
-  },
-);
+  }
+
+  if (!manifest?.ui?.url) return;
+
+  return (
+    <CustomRender content={JSON.parse(content)} name={name || 'unknown'} url={manifest.ui?.url} />
+  );
+});
 
 export default PluginMessage;

package/src/services/plugin.ts

@@ -1,6 +1,6 @@
 import { PluginRequestPayload, createHeadersWithPluginSettings } from '@lobehub/chat-plugin-sdk';
 
-import { usePluginStore } from '@/store/plugin';
+import { pluginSelectors, usePluginStore } from '@/store/plugin';
 import { getMessageError } from '@/utils/fetch';
 
 import { URLS } from './url';
@@ -17,10 +17,13 @@ export const fetchPlugin = async (
   params: PluginRequestPayload,
   options?: FetchChatModelOptions,
 ) => {
-  const settings = usePluginStore.getState().pluginsSettings?.[params.identifier];
+  const s = usePluginStore.getState();
+
+  const settings = pluginSelectors.getPluginSettingsById(params.identifier)(s);
+  const manifest = pluginSelectors.getPluginManifestById(params.identifier)(s);
 
   const res = await fetch(URLS.plugins, {
-    body: JSON.stringify(params),
+    body: JSON.stringify({ ...params, manifest }),
     headers: createHeadersWithPluginSettings(settings),
     method: 'POST',
     signal: options?.signal,

package/src/store/plugin/action.ts

@@ -14,6 +14,8 @@ import { pluginSelectors } from '@/store/plugin/selectors';
 import { LobeSessions } from '@/types/session';
 import { setNamespace } from '@/utils/storeDebug';
 
+import { DevPlugin, defaultDevPlugin } from './initialState';
+import { DevListDispatch, devPluginListReducer } from './reducers/devPluginList';
 import { PluginDispatch, pluginManifestReducer } from './reducers/manifest';
 import { PluginStore } from './store';
 
@@ -24,9 +26,12 @@ const t = setNamespace('plugin');
  */
 export interface PluginAction {
   checkLocalEnabledPlugins: (sessions: LobeSessions) => void;
+  dispatchDevPluginList: (payload: DevListDispatch) => void;
   dispatchPluginManifest: (payload: PluginDispatch) => void;
   fetchPluginManifest: (name: string) => Promise<void>;
+  saveToDevList: (value: DevPlugin) => void;
   updateManifestLoadingState: (key: string, value: boolean | undefined) => void;
+  updateNewDevPlugin: (value: Partial<DevPlugin>) => void;
   updatePluginSettings: <T>(id: string, settings: Partial<T>) => void;
   useFetchPluginList: () => SWRResponse<LobeChatPluginsMarketIndex>;
 }
@@ -55,13 +60,18 @@ export const createPluginSlice: StateCreator<
 
     set({ manifestPrepared: true }, false, t('checkLocalEnabledPlugins'));
   },
+  dispatchDevPluginList: (payload) => {
+    const { devPluginList } = get();
+
+    const nextList = devPluginListReducer(devPluginList, payload);
+    set({ devPluginList: nextList }, false, t('dispatchDevList', payload));
+  },
   dispatchPluginManifest: (payload) => {
     const { pluginManifestMap } = get();
     const nextManifest = pluginManifestReducer(pluginManifestMap, payload);
 
     set({ pluginManifestMap: nextManifest }, false, t('dispatchPluginManifest', payload));
   },
-
   fetchPluginManifest: async (name) => {
     const plugin = pluginSelectors.getPluginMetaById(name)(get());
     // 1. 校验文件
@@ -103,6 +113,10 @@ export const createPluginSlice: StateCreator<
     // 4. 存储 manifest 信息
     get().dispatchPluginManifest({ id: plugin.identifier, plugin: data, type: 'addManifest' });
   },
+  saveToDevList: (value) => {
+    get().dispatchDevPluginList({ plugin: value, type: 'addItem' });
+    set({ newDevPlugin: defaultDevPlugin }, false, t('saveToDevList'));
+  },
 
   updateManifestLoadingState: (key, value) => {
     set(
@@ -113,7 +127,13 @@ export const createPluginSlice: StateCreator<
       t('updateManifestLoadingState'),
     );
   },
-
+  updateNewDevPlugin: (newDevPlugin) => {
+    set(
+      { newDevPlugin: merge({}, get().newDevPlugin, newDevPlugin) },
+      false,
+      t('updateNewDevPlugin'),
+    );
+  },
   updatePluginSettings: (id, settings) => {
     set(
       produce((draft) => {
@@ -123,6 +143,7 @@ export const createPluginSlice: StateCreator<
       t('updatePluginSettings'),
     );
   },
+
   useFetchPluginList: () =>
     useSWR<LobeChatPluginsMarketIndex>('fetchPluginList', getPluginList, {
       onSuccess: (pluginMarketIndex) => {

package/src/store/plugin/initialState.ts

@@ -1,20 +1,36 @@
-import { LobeChatPluginMeta } from '@lobehub/chat-plugin-sdk';
+import { LobeChatPluginManifest, LobeChatPluginMeta } from '@lobehub/chat-plugin-sdk';
 
 import { PluginManifestMap } from '@/types/plugin';
 
 export type PluginManifestLoadingState = Record<string, boolean>;
 export type PluginsSettings = Record<string, any>;
 
+export interface DevPlugin extends LobeChatPluginMeta {
+  apiMode: 'openapi' | 'simple';
+  enableSettings: boolean;
+  manifestConfig?: LobeChatPluginManifest;
+  manifestMode: 'local' | 'url';
+}
+
 export interface PluginStoreState {
+  devPluginList: DevPlugin[];
   manifestPrepared: boolean;
+  newDevPlugin: Partial<DevPlugin>;
   pluginList: LobeChatPluginMeta[];
   pluginManifestLoading: PluginManifestLoadingState;
   pluginManifestMap: PluginManifestMap;
   pluginsSettings: PluginsSettings;
 }
+export const defaultDevPlugin: Partial<DevPlugin> = {
+  apiMode: 'simple',
+  enableSettings: false,
+  manifestMode: 'url',
+};
 
 export const initialState: PluginStoreState = {
+  devPluginList: [],
   manifestPrepared: false,
+  newDevPlugin: defaultDevPlugin,
   pluginList: [],
   pluginManifestLoading: {},
   pluginManifestMap: {},

package/src/store/plugin/reducers/devPluginList.ts

@@ -0,0 +1,56 @@
+import { produce } from 'immer';
+
+import { DevPlugin } from '../initialState';
+
+export type DevListState = DevPlugin[];
+
+export type AddPluginAction = {
+  plugin: DevPlugin;
+  type: 'addItem';
+};
+
+export type DeletePluginAction = {
+  id: string;
+  type: 'deleteItem';
+};
+
+export type UpdatePluginAction = {
+  id: string;
+  plugin: DevPlugin;
+  type: 'updateItem';
+};
+
+export type DevListDispatch = AddPluginAction | DeletePluginAction | UpdatePluginAction;
+
+export const devPluginListReducer = (
+  state: DevListState,
+  payload: DevListDispatch,
+): DevListState => {
+  switch (payload.type) {
+    case 'addItem': {
+      return [...state, payload.plugin];
+    }
+
+    case 'deleteItem': {
+      return produce(state, (draftState) => {
+        const deleteIndex = state.findIndex((plugin) => plugin.identifier === payload.id);
+        if (deleteIndex !== -1) {
+          draftState.splice(deleteIndex, 1);
+        }
+      });
+    }
+
+    case 'updateItem': {
+      return produce(state, (draftState) => {
+        const updateIndex = state.findIndex((plugin) => plugin.identifier === payload.id);
+        if (updateIndex !== -1) {
+          draftState[updateIndex] = payload.plugin;
+        }
+      });
+    }
+
+    default: {
+      return state;
+    }
+  }
+};

package/src/store/plugin/selectors.ts

@@ -23,8 +23,13 @@ const enabledSchema =
       );
   };
 
+const pluginList = (s: PluginStoreState) => [...s.pluginList, ...s.devPluginList];
+
 const getPluginMetaById = (id: string) => (s: PluginStoreState) =>
-  pluginHelpers.getPluginFormList(s.pluginList, id);
+  pluginHelpers.getPluginFormList(pluginList(s), id);
+
+const getDevPluginById = (id: string) => (s: PluginStoreState) =>
+  s.devPluginList.find((i) => i.identifier === id);
 
 const getPluginManifestById = (id: string) => (s: PluginStoreState) => s.pluginManifestMap[id];
 const getPluginSettingsById = (id: string) => (s: PluginStoreState) => s.pluginsSettings[id];
@@ -41,7 +46,7 @@ const getPluginManifestLoadingStatus = (id: string) => (s: PluginStoreState) =>
 };
 
 const displayPluginList = (s: PluginStoreState) =>
-  s.pluginList.map((p) => ({
+  pluginList(s).map((p) => ({
     author: p.author,
     avatar: p.meta?.avatar,
     createAt: p.createAt,
@@ -54,8 +59,10 @@ const displayPluginList = (s: PluginStoreState) =>
 export const pluginSelectors = {
   displayPluginList,
   enabledSchema,
+  getDevPluginById,
   getPluginManifestById,
   getPluginManifestLoadingStatus,
   getPluginMetaById,
   getPluginSettingsById,
+  pluginList,
 };