@lobehub/chat 0.111.6 → 0.112.0

package/src/app/chat/features/ChatInput/ActionBar/Tools/ToolItem.tsx

@@ -1,15 +1,14 @@
-import { Checkbox, Tag } from 'antd';
+import { Checkbox } 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 { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { useToolStore } from '@/store/tool';
 import { customPluginSelectors } from '@/store/tool/selectors';
 
 const ToolItem = memo<{ identifier: string; label: string }>(({ identifier, label }) => {
-  const { t } = useTranslation('plugin');
   const [checked, togglePlugin] = useSessionStore((s) => [
     agentSelectors.currentAgentPlugins(s).includes(identifier),
     s.togglePlugin,
@@ -30,11 +29,7 @@ const ToolItem = memo<{ identifier: string; label: string }>(({ identifier, labe
     >
       <Flexbox align={'center'} gap={8} horizontal>
         {label}
-        {isCustom && (
-          <Tag bordered={false} color={'gold'}>
-            {t('list.item.local.title')}
-          </Tag>
-        )}
+        {isCustom && <PluginTag showText={false} type={'customPlugin'} />}
       </Flexbox>
       <Checkbox
         checked={checked}

package/src/app/chat/features/ChatInput/ActionBar/Tools/index.tsx

@@ -2,7 +2,7 @@ import { ActionIcon, Avatar, Icon } from '@lobehub/ui';
 import { Dropdown } from 'antd';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { ArrowRight, PencilRuler, Store, ToyBrick } from 'lucide-react';
+import { ArrowRight, Blocks, Store, ToyBrick } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -103,10 +103,10 @@ const Tools = memo(() => {
             e.domEvent.preventDefault();
           },
         }}
-        placement={'topLeft'}
+        placement={'top'}
         trigger={['click']}
       >
-        <ActionIcon icon={PencilRuler} placement={'bottom'} title={t('tools.title')} />
+        <ActionIcon icon={Blocks} placement={'bottom'} title={t('tools.title')} />
       </Dropdown>
       <PluginStore open={open} setOpen={setOpen} />
     </>

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

@@ -37,6 +37,12 @@ export const renderErrorMessages: ChatListProps['renderErrorMessages'] = {
   [PluginErrorType.PluginServerError]: {
     Render: PluginError,
   },
+  [PluginErrorType.PluginGatewayError]: {
+    Render: PluginError,
+  },
+  [PluginErrorType.PluginOpenApiInitError]: {
+    Render: PluginError,
+  },
   [PluginErrorType.PluginSettingsInvalid]: {
     Render: PluginSettings,
     config: {

package/src/app/chat/features/Conversation/ChatList/Messages/Function.tsx

@@ -18,7 +18,7 @@ export const FunctionMessage = memo<ChatMessage>(({ id, content, plugin }) => {
   const [showRender, setShow] = useState(true);
 
   return (
-    <Flexbox gap={12} id={id}>
+    <Flexbox gap={12} id={id} width={'100%'}>
       <Inspector showRender={showRender} {...fcProps} setShow={setShow} />
       {showRender && (
         <PluginRender

package/src/app/chat/features/Conversation/ChatList/Plugins/Inspector/Settings.tsx

@@ -2,17 +2,19 @@ import { ActionIcon } from '@lobehub/ui';
 import { LucideSettings } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import PluginDetailModal from 'src/features/PluginDetailModal';
 
-import PluginSettingsModal from '@/features/PluginSettingsModal';
-import { useToolStore } from '@/store/tool';
+import { pluginHelpers, useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
 
 const Settings = memo<{ id: string }>(({ id }) => {
   const item = useToolStore(pluginSelectors.getPluginManifestById(id));
   const [open, setOpen] = useState(false);
   const { t } = useTranslation('plugin');
+  const hasSettings = pluginHelpers.isSettingSchemaNonEmpty(item?.settings);
+
   return (
-    item?.settings && (
+    hasSettings && (
       <>
         <ActionIcon
           icon={LucideSettings}
@@ -21,13 +23,13 @@ const Settings = memo<{ id: string }>(({ id }) => {
           }}
           title={t('setting')}
         />
-        <PluginSettingsModal
+        <PluginDetailModal
           id={id}
           onClose={() => {
             setOpen(false);
           }}
           open={open}
-          schema={item.settings}
+          schema={item?.settings}
         />
       </>
     )

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

@@ -50,7 +50,7 @@ const Inspector = memo<InspectorProps>(
     const pluginMeta = useToolStore(pluginSelectors.getPluginMetaById(id), isEqual);
     const showRightAction = useToolStore(pluginSelectors.isPluginHasUI(id));
     const pluginAvatar = pluginHelpers.getPluginAvatar(pluginMeta);
-    const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('plugins.unknown');
+    const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('plugins.loading');
 
     const avatar = pluginAvatar ? (
       <Avatar avatar={pluginAvatar} size={32} />
@@ -80,7 +80,7 @@ const Inspector = memo<InspectorProps>(
             ) : (
               avatar
             )}
-            {loading ? t('plugins.loading') : pluginTitle}
+            {pluginTitle}
             {showRightAction && <Icon icon={showRender ? LucideChevronUp : LucideChevronDown} />}
           </Flexbox>
           {

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

@@ -72,7 +72,7 @@ export interface PluginDefaultTypeProps {
   name?: string;
 }
 
-const PluginDefaultType = memo<PluginDefaultTypeProps>(({ content, name }) => {
+const PluginDefaultType = memo<PluginDefaultTypeProps>(({ content, name, loading }) => {
   const manifest = useToolStore(pluginSelectors.getPluginManifestById(name || ''));
   let isJSON = true;
   try {
@@ -85,9 +85,11 @@ const PluginDefaultType = memo<PluginDefaultTypeProps>(({ content, name }) => {
 
   if (!isJSON) {
     return (
-      <Flexbox gap={8}>
-        <Loading />
-      </Flexbox>
+      loading && (
+        <Flexbox gap={8}>
+          <Loading />
+        </Flexbox>
+      )
     );
   }
 

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;