@lobehub/chat 0.111.6 → 0.112.1

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

@@ -13,14 +13,14 @@ export interface PluginRenderProps {
   type?: LobePluginType;
 }
 
-const PluginRender = memo<PluginRenderProps>(({ content, id, payload, name, type }) => {
+const PluginRender = memo<PluginRenderProps>(({ content, id, payload, name, type, loading }) => {
   switch (type) {
     case 'standalone': {
       return <Standalone id={id} name={name} payload={payload} />;
     }
 
     default: {
-      return <DefaultType content={content} name={name} />;
+      return <DefaultType content={content} loading={loading} name={name} />;
     }
   }
 });

package/src/app/chat/features/Migration/ExportConfigButton.tsx

@@ -2,7 +2,7 @@ import { Button } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const ExportConfigButton = memo<{ primary?: boolean, state: any; }>(({ state, primary }) => {
+const ExportConfigButton = memo<{ primary?: boolean; state: any }>(({ state, primary }) => {
   const { t } = useTranslation('migration');
 
   const exportData = () => {

package/src/app/market/features/AgentDetailContent/AgentInfo/index.tsx

@@ -55,6 +55,7 @@ const AgentModalInner = memo(() => {
             },
           ]}
           onChange={setTab}
+          variant={'compact'}
         />
       </Flexbox>
       <Flexbox style={{ padding: 16 }}>

package/src/app/market/features/AgentDetailContent/AgentInfo/style.ts

@@ -29,15 +29,7 @@ export const useStyles = createStyles(({ css, token, prefixCls, stylish }) => ({
   `,
   markdown: stylish.markdownInChat,
   nav: css`
-    padding-top: 4px;
-
-    .${prefixCls}-tabs-tab {
-      margin: 4px !important;
-
-      + .${prefixCls}-tabs-tab {
-        margin: 4px !important;
-      }
-    }
+    padding-top: 8px;
   `,
   title: css`
     font-size: 20px;

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

@@ -69,13 +69,11 @@ const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig }) => {
       },
       okText: t('ok', { ns: 'common' }),
       onOk: async () => {
-        await Promise.all([
-          clearSessions,
-          removeAllPlugins,
-          clearTopics,
-          removeAllFiles,
-          clearAllMessages,
-        ]);
+        await clearSessions();
+        await removeAllPlugins();
+        await clearTopics();
+        await removeAllFiles();
+        await clearAllMessages();
 
         message.success(t('danger.clear.success'));
       },

package/src/components/FileList/FileItem.tsx

@@ -3,6 +3,7 @@ import { createStyles } from 'antd-style';
 import { Trash } from 'lucide-react';
 import { CSSProperties, memo, useCallback } from 'react';
 
+import { usePlatform } from '@/hooks/usePlatform';
 import { useFileStore } from '@/store/file';
 
 import { MIN_IMAGE_SIZE } from './style';
@@ -38,6 +39,7 @@ const FileItem = memo<FileItemProps>(({ editable, id, alwaysShowClose }) => {
   const IMAGE_SIZE = editable ? MIN_IMAGE_SIZE : '100%';
   const { data, isLoading } = useFetchFile(id);
   const { styles, cx } = useStyles();
+  const { isSafari } = usePlatform();
 
   const handleRemoveFile = useCallback(
     (e: any) => {
@@ -62,11 +64,11 @@ const FileItem = memo<FileItemProps>(({ editable, id, alwaysShowClose }) => {
       }
       alt={data?.name || id || ''}
       alwaysShowActions={alwaysShowClose}
-      height={'auto'}
+      height={isSafari ? 'auto' : '100%'}
       isLoading={isLoading}
       size={IMAGE_SIZE as any}
       src={data?.url}
-      style={{ height: 'auto' }}
+      style={{ height: isSafari ? 'auto' : '100%' }}
       wrapperClassName={cx(styles.image, editable && styles.editableImage)}
     />
   );

package/src/components/HotKeys/index.tsx

@@ -8,7 +8,7 @@ import { memo, useEffect, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { CLEAN_MESSAGE_KEY, META_KEY, PREFIX_KEY } from '@/const/hotkeys';
-import { isApplePlatform } from '@/utils/platform';
+import { usePlatform } from '@/hooks/usePlatform';
 
 const useStyles = createStyles(
   ({ css, token }) => css`
@@ -44,12 +44,13 @@ const HotKeys = memo<HotKeysProps>(({ keys, desc }) => {
   const { styles } = useStyles();
   const [keysGroup, setKeysGroup] = useState(keys.split('+'));
   const visibility = typeof window === 'undefined' ? 'hidden' : 'visible';
+  const { isApple } = usePlatform();
 
   useEffect(() => {
     const mapping: Record<string, any> = {
-      [CLEAN_MESSAGE_KEY]: isApplePlatform() ? <Icon icon={Delete} /> : 'backspace',
-      [META_KEY]: isApplePlatform() ? <Icon icon={Command} /> : 'ctrl',
-      [PREFIX_KEY]: isApplePlatform() ? <Icon icon={Option} /> : 'alt',
+      [CLEAN_MESSAGE_KEY]: isApple ? <Icon icon={Delete} /> : 'backspace',
+      [META_KEY]: isApple ? <Icon icon={Command} /> : 'ctrl',
+      [PREFIX_KEY]: isApple ? <Icon icon={Option} /> : 'alt',
     };
     const newValue = keys
       .split('+')

package/src/const/plugin.ts

@@ -1 +1,2 @@
 export const PLUGIN_SCHEMA_SEPARATOR = '____';
+export const PLUGIN_SCHEMA_API_MD5_PREFIX = 'MD5HASH_';

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

@@ -1,6 +1,6 @@
 import { Icon } from '@lobehub/ui';
 import { Button } from 'antd';
-import { LucideBlocks } from 'lucide-react';
+import { PackagePlus } from 'lucide-react';
 import { forwardRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -33,7 +33,7 @@ const AddPluginButton = forwardRef<HTMLButtonElement>((props, ref) => {
         open={showModal}
       />
       <Button
-        icon={<Icon icon={LucideBlocks} />}
+        icon={<Icon icon={PackagePlus} />}
         onClick={() => {
           setModal(true);
         }}

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

@@ -1,75 +1,41 @@
-import { Button, Switch } from 'antd';
+import { Switch } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import DevModal from '@/features/PluginDevModal';
 import { useToolStore } from '@/store/tool';
-import { pluginSelectors } from '@/store/tool/selectors';
 
 import { useStore } from '../store';
 
 const MarketList = memo<{ id: string }>(({ id }) => {
-  const { t } = useTranslation('plugin');
-
-  const [showModal, setModal] = useState(false);
-
   const [toggleAgentPlugin, hasPlugin] = useStore((s) => [s.toggleAgentPlugin, !!s.config.plugins]);
   const plugins = useStore((s) => s.config.plugins || []);
 
-  const [useFetchPluginList, fetchPluginManifest, deleteCustomPlugin, updateCustomPlugin] =
-    useToolStore((s) => [
-      s.useFetchPluginStore,
-      s.installPlugin,
-      s.uninstallCustomPlugin,
-      s.updateCustomPlugin,
-    ]);
+  const [useFetchPluginList, fetchPluginManifest] = useToolStore((s) => [
+    s.useFetchPluginStore,
+    s.installPlugin,
+  ]);
 
   const pluginManifestLoading = useToolStore((s) => s.pluginInstallLoading, isEqual);
-  const devPlugin = useToolStore(pluginSelectors.getCustomPluginById(id), isEqual);
 
   useFetchPluginList();
 
   return (
-    <>
-      <DevModal
-        mode={'edit'}
-        onDelete={() => {
-          deleteCustomPlugin(id);
-          toggleAgentPlugin(id, false);
-        }}
-        onOpenChange={setModal}
-        onSave={(value) => {
-          updateCustomPlugin(id, value);
+    <Flexbox align={'center'} gap={8} horizontal>
+      <Switch
+        checked={
+          // 如果在加载中，说明激活了
+          pluginManifestLoading[id] || !hasPlugin ? false : plugins.includes(id)
+        }
+        loading={pluginManifestLoading[id]}
+        onChange={(checked) => {
+          toggleAgentPlugin(id);
+          if (checked) {
+            fetchPluginManifest(id);
+          }
         }}
-        open={showModal}
-        value={devPlugin}
       />
-
-      <Flexbox align={'center'} gap={8} horizontal>
-        <Switch
-          checked={
-            // 如果在加载中，说明激活了
-            pluginManifestLoading[id] || !hasPlugin ? false : plugins.includes(id)
-          }
-          loading={pluginManifestLoading[id]}
-          onChange={(checked) => {
-            toggleAgentPlugin(id);
-            if (checked) {
-              fetchPluginManifest(id);
-            }
-          }}
-        />
-        <Button
-          onClick={() => {
-            setModal(true);
-          }}
-        >
-          {t('list.item.local.config')}
-        </Button>
-      </Flexbox>
-    </>
+    </Flexbox>
   );
 });
 

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

@@ -8,6 +8,7 @@ import { Center, Flexbox } from 'react-layout-kit';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import PluginStore from '@/features/PluginStore';
+import PluginTag from '@/features/PluginStore/PluginItem/PluginTag';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
 
@@ -36,31 +37,24 @@ const AgentPlugin = memo(() => {
 
   //  =========== Plugin List =========== //
 
-  const list = installedPlugins.map(({ identifier, type, meta }) => {
+  const list = installedPlugins.map(({ identifier, type, meta, author }) => {
     const isCustomPlugin = type === 'customPlugin';
 
     return {
-      avatar: <Avatar avatar={pluginHelpers.getPluginAvatar(meta)} />,
+      avatar: <Avatar avatar={pluginHelpers.getPluginAvatar(meta)} style={{ flex: 'none' }} />,
       children: isCustomPlugin ? (
         <LocalPluginItem id={identifier} />
       ) : (
         <PluginAction identifier={identifier} />
       ),
-
       desc: pluginHelpers.getPluginDesc(meta),
-
-      label: isCustomPlugin ? (
+      label: (
         <Flexbox align={'center'} gap={8} horizontal>
           {pluginHelpers.getPluginTitle(meta)}
-          <Tag bordered={false} color={'gold'}>
-            {t('list.item.local.title', { ns: 'plugin' })}
-          </Tag>
+          <PluginTag author={author} type={type} />
         </Flexbox>
-      ) : (
-        pluginHelpers.getPluginTitle(meta)
       ),
       minWidth: undefined,
-      tag: identifier,
     };
   });
 

package/src/features/AgentSetting/store/initialState.ts

@@ -1,7 +1,7 @@
 import { DEFAULT_AGENT_META } from '@/const/meta';
 import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
-import { MetaData } from '@/types/meta';
 import { LobeAgentConfig } from '@/types/agent';
+import { MetaData } from '@/types/meta';
 
 export interface State {
   autocompleteLoading: SessionLoadingState;

package/src/features/PluginDetailModal/APIs.tsx

@@ -0,0 +1,44 @@
+import { Empty, Table } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+
+const APIs = memo<{
+  id: string;
+}>(({ id }) => {
+  const { t } = useTranslation('plugin');
+  const pluginManifest = useToolStore(pluginSelectors.getPluginManifestById(id), isEqual);
+
+  if (!pluginManifest?.api) return <Empty />;
+
+  return (
+    <Flexbox paddingBlock={16} width={'100%'}>
+      <Table
+        bordered
+        columns={[
+          {
+            dataIndex: 'name',
+            ellipsis: true,
+            render: (name: string) => <code>{name}</code>,
+            title: t('detailModal.info.name'),
+          },
+          {
+            dataIndex: 'description',
+            ellipsis: true,
+            title: t('detailModal.info.description'),
+          },
+        ]}
+        dataSource={pluginManifest.api}
+        pagination={false}
+        rowKey={'name'}
+        size={'small'}
+      />
+    </Flexbox>
+  );
+});
+
+export default APIs;

package/src/features/PluginDetailModal/Meta.tsx

@@ -0,0 +1,59 @@
+import { Avatar, Tag } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { startCase } from 'lodash-es';
+import { memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+import { pluginHelpers, useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+
+const useStyles = createStyles(({ css, token, stylish }) => ({
+  avatar: css`
+    flex: none;
+  `,
+  desc: css`
+    color: ${token.colorTextDescription};
+    text-align: center;
+  `,
+  markdown: stylish.markdownInChat,
+
+  title: css`
+    font-size: 20px;
+    font-weight: 600;
+    text-align: center;
+  `,
+}));
+
+const Meta = memo<{
+  id: string;
+}>(({ id }) => {
+  const pluginMeta = useToolStore(pluginSelectors.getPluginMetaById(id), isEqual);
+  const { styles, theme } = useStyles();
+
+  return (
+    <Center gap={16}>
+      <Avatar
+        animation
+        avatar={pluginHelpers.getPluginAvatar(pluginMeta)}
+        background={theme.colorFillTertiary}
+        className={styles.avatar}
+        size={100}
+      />
+
+      <div className={styles.title}>{pluginHelpers.getPluginTitle(pluginMeta)}</div>
+      {(pluginMeta?.tags as string[])?.length > 0 && (
+        <Center gap={6} horizontal style={{ flexWrap: 'wrap' }}>
+          {(pluginHelpers.getPluginTags(pluginMeta) as string[]).map((tag: string, index) => (
+            <Tag key={index} style={{ margin: 0 }}>
+              {startCase(tag).trim()}
+            </Tag>
+          ))}
+        </Center>
+      )}
+      <div className={styles.desc}>{pluginHelpers.getPluginDesc(pluginMeta)}</div>
+    </Center>
+  );
+});
+
+export default Meta;

package/src/features/PluginDetailModal/index.tsx

@@ -0,0 +1,79 @@
+import { Modal, TabsNav } from '@lobehub/ui';
+import { Divider, TabsProps } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center } from 'react-layout-kit';
+import useMergeState from 'use-merge-value';
+
+import MobilePadding from '@/components/MobilePadding';
+import PluginSettingsConfig from '@/features/PluginSettings';
+import { pluginHelpers } from '@/store/tool';
+
+import APIs from './APIs';
+import Meta from './Meta';
+
+interface PluginDetailModalProps {
+  id: string;
+  onClose: () => void;
+  onTabChange?: (key: string) => void;
+  open?: boolean;
+  schema: any;
+  tab?: string;
+}
+
+const PluginDetailModal = memo<PluginDetailModalProps>(
+  ({ schema, onClose, id, onTabChange, open, tab }) => {
+    const [tabKey, setTabKey] = useMergeState('info', {
+      onChange: onTabChange,
+      value: tab,
+    });
+    const { t } = useTranslation('plugin');
+
+    const hasSettings = pluginHelpers.isSettingSchemaNonEmpty(schema);
+
+    return (
+      <Modal
+        cancelText={t('cancel', { ns: 'common' })}
+        okText={t('ok', { ns: 'common' })}
+        onCancel={onClose}
+        onOk={() => {
+          onClose();
+        }}
+        open={open}
+        title={t('detailModal.title')}
+        width={650}
+      >
+        <MobilePadding>
+          <Center gap={8}>
+            <Meta id={id} />
+            <Divider style={{ marginBottom: 0, marginTop: 8 }} />
+            <TabsNav
+              activeKey={tabKey}
+              items={
+                [
+                  {
+                    key: 'info',
+                    label: t('detailModal.tabs.info'),
+                  },
+                  hasSettings && {
+                    key: 'settings',
+                    label: t('detailModal.tabs.settings'),
+                  },
+                ].filter(Boolean) as TabsProps['items']
+              }
+              onChange={setTabKey}
+              variant={'compact'}
+            />
+            {tabKey === 'settings' ? (
+              hasSettings && <PluginSettingsConfig id={id} schema={schema} />
+            ) : (
+              <APIs id={id} />
+            )}
+          </Center>
+        </MobilePadding>
+      </Modal>
+    );
+  },
+);
+
+export default PluginDetailModal;

package/src/features/PluginDevModal/PluginPreview.tsx

@@ -1,9 +1,10 @@
 import { Avatar, Form } from '@lobehub/ui';
-import { Form as AForm, Card, FormInstance, Switch, Tag } from 'antd';
+import { Form as AForm, Card, FormInstance } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import PluginTag from '@/features/PluginStore/PluginItem/PluginTag';
 import { pluginHelpers } from '@/store/tool';
 import { LobeToolCustomPlugin } from '@/types/tool/plugin';
 
@@ -11,26 +12,23 @@ const PluginPreview = memo<{ form: FormInstance }>(({ form }) => {
   const { t } = useTranslation('plugin');
 
   const plugin: LobeToolCustomPlugin = AForm.useWatch([], form);
+  const meta = plugin?.manifest?.meta;
 
   const items = {
-    avatar: <Avatar avatar={pluginHelpers.getPluginAvatar(plugin?.manifest?.meta)} />,
-    children: <Switch disabled />,
-    desc: pluginHelpers.getPluginDesc(plugin?.manifest?.meta),
+    avatar: <Avatar avatar={pluginHelpers.getPluginAvatar(meta)} style={{ flex: 'none' }} />,
+    desc: pluginHelpers.getPluginDesc(meta) || 'Plugin Description',
     label: (
       <Flexbox align={'center'} gap={8} horizontal>
-        {pluginHelpers.getPluginTitle(plugin?.manifest?.meta) ?? t('dev.preview.title')}
-        <Tag bordered={false} color={'gold'}>
-          {t('list.item.local.title', { ns: 'plugin' })}
-        </Tag>
+        {pluginHelpers.getPluginTitle(meta) || 'Plugin Title'}
+        <PluginTag type={'customPlugin'} />
       </Flexbox>
     ),
     minWidth: undefined,
-    tag: !!plugin?.identifier ? plugin?.identifier : 'id',
   };
 
   return (
     <Card size={'small'} title={t('dev.preview.card')}>
-      <Form.Item {...items} colon={false} style={{ marginBottom: 0 }} />
+      <Form.Item {...items} colon={false} style={{ alignItems: 'center', marginBottom: 0 }} />
     </Card>
   );
 });

package/src/features/PluginDevModal/UrlManifestForm.tsx

@@ -0,0 +1,131 @@
+import { LobeChatPluginManifest } from '@lobehub/chat-plugin-sdk';
+import { ActionIcon, FormItem, Input } from '@lobehub/ui';
+import { Checkbox, Form, FormInstance } from 'antd';
+import { FileCode, RotateCwIcon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import ManifestPreviewer from '@/components/ManifestPreviewer';
+import { pluginService } from '@/services/plugin';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+import { PluginInstallError } from '@/types/tool/plugin';
+
+const ProxyChecker = memo<{ onChange?: (value: boolean) => void; value?: boolean }>(
+  ({ value, onChange }) => {
+    const { t } = useTranslation('plugin');
+
+    return (
+      <Flexbox
+        gap={8}
+        horizontal
+        onClick={() => {
+          onChange?.(!value);
+        }}
+        style={{ cursor: 'pointer' }}
+      >
+        <Checkbox checked={value} /> {t('dev.customParams.useProxy.label')}
+      </Flexbox>
+    );
+  },
+);
+
+const UrlManifestForm = memo<{ form: FormInstance; isEditMode: boolean }>(
+  ({ form, isEditMode }) => {
+    const { t } = useTranslation('plugin');
+
+    const [manifest, setManifest] = useState<LobeChatPluginManifest>();
+
+    const urlKey = ['customParams', 'manifestUrl'];
+    const proxyKey = ['customParams', 'useProxy'];
+    const pluginIds = useToolStore(pluginSelectors.storeAndInstallPluginsIdList);
+
+    return (
+      <Form form={form} layout={'vertical'}>
+        <FormItem
+          extra={
+            <Flexbox horizontal justify={'space-between'} style={{ marginTop: 8 }}>
+              {t('dev.meta.manifest.desc')}
+              {manifest && (
+                <ManifestPreviewer manifest={manifest}>
+                  <ActionIcon
+                    icon={FileCode}
+                    size={'small'}
+                    title={t('dev.meta.manifest.preview')}
+                  />
+                </ManifestPreviewer>
+              )}
+            </Flexbox>
+          }
+          hasFeedback
+          label={t('dev.meta.manifest.label')}
+          name={urlKey}
+          required
+          rules={[
+            { required: true },
+            {
+              message: t('error.urlError'),
+              pattern: /^https?:\/\/.*/,
+            },
+            {
+              validator: async (_, value) => {
+                if (!value) return true;
+
+                try {
+                  const useProxy = form.getFieldValue(proxyKey);
+                  const data = await pluginService.getPluginManifest(value, useProxy);
+                  setManifest(data);
+
+                  form.setFieldsValue({ identifier: data.identifier, manifest: data });
+                } catch (error) {
+                  const err = error as PluginInstallError;
+                  throw t(`error.${err.message}`, { error: err.cause! });
+                }
+              },
+            },
+            // 编辑模式下，不进行重复校验
+            isEditMode
+              ? {}
+              : {
+                  message: t('dev.meta.identifier.errorDuplicate'),
+                  validator: async () => {
+                    const id = form.getFieldValue('identifier');
+                    if (!id) return true;
+
+                    if (pluginIds.includes(id)) {
+                      throw new Error('Duplicate');
+                    }
+                  },
+                },
+          ]}
+          style={{ marginBottom: 0 }}
+        >
+          <Input
+            placeholder={'http://localhost:3400/manifest-dev.json'}
+            suffix={
+              <ActionIcon
+                icon={RotateCwIcon}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  form.validateFields([urlKey, 'identifier']);
+                }}
+                size={'small'}
+                title={t('dev.meta.manifest.refresh')}
+              />
+            }
+          />
+        </FormItem>
+
+        <FormItem name={proxyKey} noStyle>
+          <ProxyChecker />
+        </FormItem>
+
+        <FormItem name={'identifier'} noStyle />
+        <FormItem name={'manifest'} noStyle />
+      </Form>
+    );
+  },
+);
+
+export default UrlManifestForm;