@lobehub/chat 0.63.3 → 0.64.0

package/CHANGELOG.md

@@ -2,6 +2,43 @@
 
 # Changelog
 
+## [Version 0.64.0](https://github.com/lobehub/lobe-chat/compare/v0.63.3...v0.64.0)
+
+<sup>Released on **2023-08-29**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Remove no need i18n.
+
+#### ✨ Features
+
+- **misc**: 增加自定义插件的增删改配置功能, 完善自定义插件表单的校验逻辑, 支持本地插件侧的请求与错误呈现, 新增插件配置 Dev 弹窗, 绑定本地插件的增删改逻辑.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Remove no need i18n ([808a86a](https://github.com/lobehub/lobe-chat/commit/808a86a))
+
+#### What's improved
+
+- **misc**: 增加自定义插件的增删改配置功能 ([faba081](https://github.com/lobehub/lobe-chat/commit/faba081))
+- **misc**: 完善自定义插件表单的校验逻辑 ([4e1fd28](https://github.com/lobehub/lobe-chat/commit/4e1fd28))
+- **misc**: 支持本地插件侧的请求与错误呈现 ([7e2b39a](https://github.com/lobehub/lobe-chat/commit/7e2b39a))
+- **misc**: 新增插件配置 Dev 弹窗 ([20269b7](https://github.com/lobehub/lobe-chat/commit/20269b7))
+- **misc**: 绑定本地插件的增删改逻辑 ([902e7ed](https://github.com/lobehub/lobe-chat/commit/902e7ed))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.63.3](https://github.com/lobehub/lobe-chat/compare/v0.63.2...v0.63.3)
 
 <sup>Released on **2023-08-28**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.63.3",
+  "version": "0.64.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",

package/src/components/EmojiPicker/index.tsx

@@ -4,21 +4,29 @@ import Picker from '@emoji-mart/react';
 import { Avatar } from '@lobehub/ui';
 import { Popover } from 'antd';
 import { memo } from 'react';
+import useMergeState from 'use-merge-value';
 
 import { DEFAULT_AVATAR, DEFAULT_BACKGROUND_COLOR } from '@/const/meta';
 
 import { useStyles } from './style';
 
 export interface EmojiPickerProps {
-  avatar?: string;
   backgroundColor?: string;
-  onChange: (emoji: string) => void;
+  defaultAvatar?: string;
+  onChange?: (emoji: string) => void;
+  value?: string;
 }
 
 const EmojiPicker = memo<EmojiPickerProps>(
-  ({ avatar = DEFAULT_AVATAR, backgroundColor = DEFAULT_BACKGROUND_COLOR, onChange }) => {
+  ({ value, defaultAvatar, backgroundColor = DEFAULT_BACKGROUND_COLOR, onChange }) => {
     const { styles } = useStyles();
 
+    const [ava, setAva] = useMergeState(DEFAULT_AVATAR, {
+      defaultValue: defaultAvatar,
+      onChange,
+      value,
+    });
+
     return (
       <Popover
         content={
@@ -27,7 +35,7 @@ const EmojiPicker = memo<EmojiPickerProps>(
               data={data}
               i18n={i18n}
               locale={'zh'}
-              onEmojiSelect={(e: any) => onChange(e.native)}
+              onEmojiSelect={(e: any) => setAva(e.native)}
               skinTonePosition={'none'}
               theme={'auto'}
             />
@@ -38,7 +46,7 @@ const EmojiPicker = memo<EmojiPickerProps>(
         trigger={'click'}
       >
         <div className={styles.avatar} style={{ width: 'fit-content' }}>
-          <Avatar avatar={avatar} background={backgroundColor} size={44} />
+          <Avatar avatar={ava} background={backgroundColor} size={44} />
         </div>
       </Popover>
     );

package/src/features/AgentSetting/AgentMeta/index.tsx

@@ -63,9 +63,9 @@ const AgentMeta = memo(() => {
         {
           children: (
             <EmojiPicker
-              avatar={meta.avatar}
               backgroundColor={meta.backgroundColor}
               onChange={(avatar) => updateMeta({ avatar })}
+              value={meta.avatar}
             />
           ),
           label: t('settingAgent.avatar.title'),

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

@@ -0,0 +1,72 @@
+import { Button, Switch } from 'antd';
+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 { pluginSelectors, usePluginStore } from '@/store/plugin';
+
+import { useStore } from '../store';
+
+const MarketList = memo<{ id: string }>(({ id }) => {
+  const { t } = useTranslation('plugin');
+
+  const [showModal, setModal] = useState(false);
+
+  const updateConfig = useStore((s) => s.toggleAgentPlugin);
+  const [plugins, hasPlugin] = useStore((s) => [s.config.plugins || [], !!s.config.plugins]);
+
+  const [useFetchPluginList, fetchPluginManifest, dispatchDevPluginList] = usePluginStore((s) => [
+    s.useFetchPluginList,
+    s.fetchPluginManifest,
+    s.dispatchDevPluginList,
+  ]);
+
+  const pluginManifestLoading = usePluginStore((s) => s.pluginManifestLoading, isEqual);
+  const devPlugin = usePluginStore(pluginSelectors.getDevPluginById(id), isEqual);
+
+  useFetchPluginList();
+
+  return (
+    <>
+      <DevModal
+        onDelete={() => {
+          dispatchDevPluginList({ id, type: 'deleteItem' });
+        }}
+        onOpenChange={setModal}
+        onSave={(value) => {
+          dispatchDevPluginList({ id, plugin: value, type: 'updateItem' });
+        }}
+        open={showModal}
+        showDelete
+        value={devPlugin}
+      />
+
+      <Flexbox align={'center'} gap={8} horizontal>
+        <Switch
+          checked={
+            // 如果在加载中，说明激活了
+            pluginManifestLoading[id] || !hasPlugin ? false : plugins.includes(id)
+          }
+          loading={pluginManifestLoading[id]}
+          onChange={(checked) => {
+            updateConfig(id);
+            if (checked) {
+              fetchPluginManifest(id);
+            }
+          }}
+        />
+        <Button
+          onClick={() => {
+            setModal(true);
+          }}
+        >
+          {t('list.item.local.config')}
+        </Button>
+      </Flexbox>
+    </>
+  );
+});
+
+export default MarketList;

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

@@ -0,0 +1,160 @@
+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 { 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 { useStore } from '../store';
+import LocalPluginItem from './LocalPluginItem';
+
+const useStyles = createStyles(({ css }) => ({
+  avatar: css`
+    .ant-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);
+
+  // useEffect(() => {
+  //   setModal(true);
+  // }, []);
+
+  const updateConfig = useStore((s) => s.toggleAgentPlugin);
+  const [plugins, hasPlugin] = useStore((s) => [s.config.plugins || [], !!s.config.plugins]);
+
+  const [useFetchPluginList, fetchPluginManifest, saveToDevList, updateNewDevPlugin] =
+    usePluginStore((s) => [
+      s.useFetchPluginList,
+      s.fetchPluginManifest,
+      s.saveToDevList,
+      s.updateNewDevPlugin,
+    ]);
+  const pluginManifestLoading = usePluginStore((s) => s.pluginManifestLoading, isEqual);
+  const pluginList = usePluginStore((s) => s.pluginList, isEqual);
+  const devPluginList = usePluginStore((s) => s.devPluginList, isEqual);
+
+  useFetchPluginList();
+
+  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;
+
+  const list = pluginList.map(({ identifier, meta }) => ({
+    avatar: <Avatar avatar={meta.avatar} />,
+    children: (
+      <Switch
+        checked={
+          // 如果在加载中，说明激活了
+          pluginManifestLoading[identifier] || !hasPlugin ? false : plugins.includes(identifier)
+        }
+        loading={pluginManifestLoading[identifier]}
+        onChange={(checked) => {
+          updateConfig(identifier);
+          if (checked) {
+            fetchPluginManifest(identifier);
+          }
+        }}
+      />
+    ),
+    desc: pluginHelpers.getPluginDesc(meta),
+    label: pluginHelpers.getPluginTitle(meta),
+    minWidth: undefined,
+    tag: identifier,
+  }));
+
+  const devList = devPluginList.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,
+  }));
+
+  return (
+    <>
+      <DevModal
+        onOpenChange={setModal}
+        onSave={saveToDevList}
+        onValueChange={updateNewDevPlugin}
+        open={showModal}
+      />
+      <Form
+        items={[
+          {
+            children: isEmpty ? loadingList : [...devList, ...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>
+            ),
+            icon: LucideStore,
+            title: t('settingPlugin.title'),
+          },
+        ]}
+        {...FORM_STYLE}
+      />{' '}
+    </>
+  );
+});
+
+export default MarketList;

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

@@ -0,0 +1,76 @@
+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, pluginSelectors, usePluginStore } from '@/store/plugin';
+
+import { useStore } from '../store';
+
+const useStyles = createStyles(({ css, token }) => ({
+  md: 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.useFetchPluginList,
+    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.md}>{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/features/AgentSetting/AgentPlugin/index.tsx

@@ -1,148 +1,13 @@
-import { Avatar, Form, ItemGroup, Markdown } from '@lobehub/ui';
-import { Skeleton, Switch } from 'antd';
-import { createStyles } from 'antd-style';
-import isEqual from 'fast-deep-equal';
-import { LucideStore, 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 MarketList from './MarketList';
+import PluginSettings from './PluginSettings';
 
-import { useStore } from '../store';
-
-const useStyles = createStyles(({ css, token }) => ({
-  avatar: css`
-    .ant-skeleton-header {
-      padding-right: 0;
-    }
-  `,
-  label: css`
-    li {
-      height: 14px !important;
-    }
-
-    li + li {
-      margin-block-start: 12px !important;
-    }
-  `,
-  md: css`
-    p {
-      color: ${token.colorTextDescription};
-    }
-  `,
-}));
-
-const AgentPlugin = memo(() => {
-  const { t } = useTranslation('setting');
-  const { styles } = useStyles();
-
-  const updateConfig = useStore((s) => s.toggleAgentPlugin);
-  const [plugins, hasPlugin] = useStore((s) => [s.config.plugins || [], !!s.config.plugins]);
-
-  const [useFetchPluginList, fetchPluginManifest, updatePluginSettings] = usePluginStore((s) => [
-    s.useFetchPluginList,
-    s.fetchPluginManifest,
-    s.updatePluginSettings,
-  ]);
-  const pluginManifestLoading = usePluginStore((s) => s.pluginManifestLoading, isEqual);
-  const pluginManifestMap = usePluginStore((s) => s.pluginManifestMap, isEqual);
-  const pluginsSettings = usePluginStore((s) => s.pluginsSettings, isEqual);
-  const { data } = useFetchPluginList();
-
-  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 children = !data
-    ? [loadingItem, loadingItem, loadingItem]
-    : data.plugins.map(({ identifier, meta }) => ({
-        avatar: <Avatar avatar={meta.avatar} />,
-        children: (
-          <Switch
-            checked={
-              // 如果在加载中，说明激活了
-              pluginManifestLoading[identifier] || !hasPlugin ? false : plugins.includes(identifier)
-            }
-            loading={pluginManifestLoading[identifier]}
-            onChange={(checked) => {
-              updateConfig(identifier);
-              if (checked) {
-                fetchPluginManifest(identifier);
-              }
-            }}
-          />
-        ),
-        desc: pluginHelpers.getPluginDesc(meta),
-        label: pluginHelpers.getPluginTitle(meta),
-        minWidth: undefined,
-        tag: identifier,
-      }));
-
-  const pluginsConfig = !data
-    ? []
-    : (plugins
-        .map((identifier) => {
-          const item = data.plugins.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.md}>{item.desc}</Markdown>,
-            })),
-            icon: ToyBrick,
-            title: t('settingPlugin.config', { id: pluginHelpers.getPluginTitle(item.meta) }),
-          };
-        })
-        .filter(Boolean) as unknown as ItemGroup[]);
-
-  return (
-    <Form
-      items={[
-        {
-          children,
-          icon: LucideStore,
-          title: t('settingPlugin.title'),
-        },
-        ...pluginsConfig,
-      ]}
-      {...FORM_STYLE}
-    />
-  );
-});
+const AgentPlugin = memo(() => (
+  <>
+    <MarketList />
+    <PluginSettings />
+  </>
+));
 
 export default AgentPlugin;

package/src/features/PluginDevModal/ManifestForm.tsx

@@ -0,0 +1,96 @@
+import { pluginManifestSchema } from '@lobehub/chat-plugin-sdk';
+import { Form, FormItemProps, Input, Tooltip } from '@lobehub/ui';
+import { FormInstance, Radio } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const ManifestForm = memo<{ form: FormInstance; mode: 'url' | 'local' }>(({ form, mode }) => {
+  const { t } = useTranslation('plugin');
+
+  const isUrl = mode === 'url';
+
+  const configItem: FormItemProps[] = isUrl
+    ? [
+        {
+          children: <Input placeholder={'http://localhost/manifest.json'} />,
+          desc: t('dev.meta.manifest.desc'),
+          hasFeedback: true,
+          label: t('dev.meta.manifest.label'),
+          name: 'manifest',
+          required: true,
+          rules: [
+            { required: true },
+            {
+              message: t('dev.meta.manifest.urlError'),
+              pattern: /^https?:\/\/.*/,
+            },
+            {
+              message: t('dev.meta.manifest.invalid'),
+              validator: async (_, value) => {
+                const res = await fetch(value);
+                if (!res.ok) return true;
+
+                const json = await res.json();
+                pluginManifestSchema.parse(json);
+              },
+            },
+          ],
+        },
+      ]
+    : // TODO: 后续做成本地配置模式
+      [
+        {
+          children: <Input placeholder={'searchEngine'} />,
+          desc: t('dev.meta.identifier.desc'),
+          label: t('dev.meta.identifier.label'),
+          name: 'name',
+          required: true,
+        },
+
+        {
+          children: <Input placeholder={t('dev.meta.description.placeholder')} />,
+          desc: t('dev.meta.description.desc'),
+          label: t('dev.meta.description.label'),
+          name: 'description',
+          required: true,
+        },
+        {
+          children: <Input placeholder={'searchEngine'} />,
+          desc: t('dev.meta.identifier.desc'),
+          label: t('dev.meta.identifier.label'),
+          name: 'identifier',
+          required: true,
+        },
+      ];
+
+  return (
+    <Form
+      form={form}
+      items={[
+        {
+          children: configItem,
+          extra: (
+            <Radio.Group
+              onChange={(v) => {
+                form.setFieldValue('manifestMode', v.target.value);
+              }}
+              size={'small'}
+              value={mode}
+            >
+              <Radio.Button value={'url'}>{t('dev.manifest.mode.url')}</Radio.Button>
+              <Tooltip title={t('dev.manifest.mode.local-tooltip')}>
+                <Radio.Button disabled value={'local'}>
+                  {t('dev.manifest.mode.local')}
+                </Radio.Button>
+              </Tooltip>
+            </Radio.Group>
+          ),
+          title: t('dev.tabs.manifest'),
+        },
+      ]}
+      layout={isUrl ? 'vertical' : undefined}
+    />
+  );
+});
+
+export default ManifestForm;