@lobehub/chat 0.94.5 → 0.95.1

package/.github/workflows/pr-welcome.yml

@@ -1,7 +1,7 @@
 name: PR Welcome
 
 on:
-  pull_request:
+  pull_request_target:
     types:
       - closed
 

package/CHANGELOG.md

@@ -2,6 +2,66 @@
 
 # Changelog
 
+### [Version 0.95.1](https://github.com/lobehub/lobe-chat/compare/v0.95.0...v0.95.1)
+
+<sup>Released on **2023-10-25**</sup>
+
+#### 💄 Styles
+
+- **misc**: Improve plugin message ui.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Improve plugin message ui ([6edd25b](https://github.com/lobehub/lobe-chat/commit/6edd25b))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.95.0](https://github.com/lobehub/lobe-chat/compare/v0.94.5...v0.95.0)
+
+<sup>Released on **2023-10-24**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: 优化 plugin 文件夹命名以支持 standalone 类型的插件.
+
+#### ✨ Features
+
+- **misc**: Support function call at message end, support plugin settings modal, support plugin state and settings.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: 优化 plugin 文件夹命名以支持 standalone 类型的插件 ([98860a8](https://github.com/lobehub/lobe-chat/commit/98860a8))
+
+#### What's improved
+
+- **misc**: Support function call at message end, closes [#357](https://github.com/lobehub/lobe-chat/issues/357) ([e195fdb](https://github.com/lobehub/lobe-chat/commit/e195fdb))
+- **misc**: Support plugin settings modal ([f47b6fa](https://github.com/lobehub/lobe-chat/commit/f47b6fa))
+- **misc**: Support plugin state and settings ([10829a4](https://github.com/lobehub/lobe-chat/commit/10829a4))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.94.5](https://github.com/lobehub/lobe-chat/compare/v0.94.4...v0.94.5)
 
 <sup>Released on **2023-10-22**</sup>

package/README.md

@@ -131,10 +131,10 @@ Utilize the Progressive Web Application ([PWA](https://support.google.com/chrome
 > **Note**\
 > If you are unfamiliar with the installation process of PWA, you can add LobeChat as your desktop application (also applicable to mobile devices) by following these steps:
 >
-> - Launch the Chrome or Edge browser on your computer
-> - Visit the LobeChat webpage
-> - In the upper right corner of the address bar, click on the <kbd>Install</kbd> icon
-> - Follow the instructions on the screen to complete the PWA installation
+> - Launch the Chrome or Edge browser on your computer.
+> - Visit the LobeChat webpage.
+> - In the upper right corner of the address bar, click on the <kbd>Install</kbd> icon.
+> - Follow the instructions on the screen to complete the PWA installation.
 
 <br/>
 

package/docs/Lighthouse.md

@@ -48,18 +48,18 @@
 | [⚡️ Lighthouse Report][settings-desktop-report] | [⚡️ Lighthouse Report][settings-mobile-report] |
 
 [chat-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/desktop/pagespeed.svg
-[chat-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/desktop/chat_lobehub_com_chat.html
+[chat-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/desktop/chat_preivew_lobehub_com_chat.html
 [chat-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/mobile/pagespeed.svg
-[chat-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/mobile/chat_lobehub_com_chat.html
+[chat-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/mobile/chat_preivew_lobehub_com_chat.html
 [market-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/market/desktop/pagespeed.svg
-[market-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/market/desktop/chat_lobehub_com_market.html
+[market-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/market/desktop/chat_preivew_lobehub_com_market.html
 [market-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/market/mobile/pagespeed.svg
-[market-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/market/mobile/chat_lobehub_com_market.html
+[market-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/market/mobile/chat_preivew_lobehub_com_market.html
 [settings-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/settings/desktop/pagespeed.svg
-[settings-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/settings/desktop/chat_lobehub_com_settings.html
+[settings-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/settings/desktop/chat_preivew_lobehub_com_settings.html
 [settings-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/settings/mobile/pagespeed.svg
-[settings-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/settings/mobile/chat_lobehub_com_settings.html
+[settings-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/settings/mobile/chat_preivew_lobehub_com_settings.html
 [welcome-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/welcome/desktop/pagespeed.svg
-[welcome-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/welcome/desktop/chat_lobehub_com_welcome.html
+[welcome-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/welcome/desktop/chat_preivew_lobehub_com_welcome.html
 [welcome-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/welcome/mobile/pagespeed.svg
-[welcome-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/welcome/mobile/chat_lobehub_com_welcome.html
+[welcome-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/welcome/mobile/chat_preivew_lobehub_com_welcome.html

package/docs/Lighthouse.zh-CN.md

@@ -48,18 +48,18 @@
 | [⚡️ Lighthouse Report][settings-desktop-report] | [⚡️ Lighthouse Report][settings-mobile-report] |
 
 [chat-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/desktop/pagespeed.svg
-[chat-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/desktop/chat_lobehub_com_chat.html
+[chat-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/desktop/chat_preview_lobehub_com_chat.html
 [chat-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/mobile/pagespeed.svg
-[chat-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/mobile/chat_lobehub_com_chat.html
+[chat-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/mobile/chat_preview_lobehub_com_chat.html
 [market-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/market/desktop/pagespeed.svg
-[market-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/market/desktop/chat_lobehub_com_market.html
+[market-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/market/desktop/chat_preview_lobehub_com_market.html
 [market-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/market/mobile/pagespeed.svg
-[market-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/market/mobile/chat_lobehub_com_market.html
+[market-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/market/mobile/chat_preview_lobehub_com_market.html
 [settings-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/settings/desktop/pagespeed.svg
-[settings-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/settings/desktop/chat_lobehub_com_settings.html
+[settings-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/settings/desktop/chat_preview_lobehub_com_settings.html
 [settings-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/settings/mobile/pagespeed.svg
-[settings-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/settings/mobile/chat_lobehub_com_settings.html
+[settings-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/settings/mobile/chat_preview_lobehub_com_settings.html
 [welcome-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/welcome/desktop/pagespeed.svg
-[welcome-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/welcome/desktop/chat_lobehub_com_welcome.html
+[welcome-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/welcome/desktop/chat_preview_lobehub_com_welcome.html
 [welcome-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/welcome/mobile/pagespeed.svg
-[welcome-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/welcome/mobile/chat_lobehub_com_welcome.html
+[welcome-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/welcome/mobile/chat_preview_lobehub_com_welcome.html

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.94.5",
+  "version": "0.95.1",
   "description": "An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application",
   "keywords": [
     "chatbot",
@@ -76,7 +76,7 @@
     "ahooks": "^3",
     "ai": "^2",
     "antd": "^5",
-    "antd-style": "^3.5",
+    "antd-style": "^3",
     "brotli-wasm": "^1",
     "chroma-js": "^2",
     "copy-to-clipboard": "^3",
@@ -122,7 +122,7 @@
     "zustand-utils": "^1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17",
+    "@commitlint/cli": "^18",
     "@lobehub/i18n-cli": "latest",
     "@lobehub/lint": "latest",
     "@next/bundle-analyzer": "^13",
@@ -141,7 +141,7 @@
     "@types/uuid": "^9",
     "@umijs/lint": "^4",
     "@vitest/coverage-v8": "latest",
-    "commitlint": "^17",
+    "commitlint": "^18",
     "consola": "^3",
     "dpdm": "^3",
     "eslint": "^8",

package/src/app/chat/(desktop)/features/ChatInput.tsx

@@ -15,7 +15,6 @@ const ChatInputDesktopLayout = memo(() => {
 
   return (
     <DraggablePanel
-      expandable={false}
       fullscreen={expand}
       headerHeight={HEADER_HEIGHT}
       minHeight={CHAT_TEXTAREA_HEIGHT}

package/src/app/chat/features/Conversation/ChatList/Error/Plugin/PluginSettings.tsx

@@ -36,7 +36,7 @@ const PluginSettings: RenderErrorMessage = memo(({ id, plugin }) => {
         <Flexbox className={styles.desc}>{t('pluginSettings.desc')}</Flexbox>
         <Divider style={{ margin: '0 16px' }} />
         {manifest.settings && (
-          <PluginSettingsConfig id={manifest.identifier} settings={manifest.settings} />
+          <PluginSettingsConfig id={manifest.identifier} schema={manifest.settings} />
         )}
         <Button
           block

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

@@ -3,23 +3,20 @@ import { memo } from 'react';
 
 import { useSessionStore } from '@/store/session';
 import { chatSelectors } from '@/store/session/selectors';
-import { isFunctionMessage } from '@/utils/message';
+import { isFunctionMessageAtStart } from '@/utils/message';
 
-import FunctionCall from '../Plugins/FunctionCall';
+import Inspector from '../Plugins/Inspector';
 import { DefaultMessage } from './Default';
 
-export const AssistantMessage: RenderMessage = memo(
-  ({ id, plugin, function_call, content, ...props }) => {
-    const genFunctionCallProps = useSessionStore(chatSelectors.getFunctionMessageParams);
+export const AssistantMessage: RenderMessage = memo(({ id, plugin, content, ...props }) => {
+  const fcProps = useSessionStore(chatSelectors.getFunctionMessageProps({ content, id, plugin }));
 
-    if (!isFunctionMessage(content)) return <DefaultMessage content={content} id={id} {...props} />;
+  if (!isFunctionMessageAtStart(content))
+    return <DefaultMessage content={content} id={id} {...props} />;
 
-    const fcProps = genFunctionCallProps({ content, function_call, id, plugin });
-
-    return (
-      <div id={id}>
-        <FunctionCall {...fcProps} />
-      </div>
-    );
-  },
-);
+  return (
+    <div id={id}>
+      <Inspector {...fcProps} />
+    </div>
+  );
+});

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

@@ -1,23 +1,34 @@
 import { RenderMessage } from '@lobehub/ui';
-import { memo } from 'react';
+import isEqual from 'fast-deep-equal';
+import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { useSessionStore } from '@/store/session';
 import { chatSelectors } from '@/store/session/selectors';
 
-import FunctionCall from '../Plugins/FunctionCall';
-import PluginMessage from '../Plugins/PluginMessage';
+import Inspector from '../Plugins/Inspector';
+import PluginRender from '../Plugins/Render';
 
-export const FunctionMessage: RenderMessage = memo(
-  ({ id, content, plugin, function_call, name }) => {
-    const genFunctionCallProps = useSessionStore(chatSelectors.getFunctionMessageParams);
-    const fcProps = genFunctionCallProps({ content, function_call, id, plugin });
+export const FunctionMessage: RenderMessage = memo(({ id, content, plugin, name }) => {
+  const fcProps = useSessionStore(
+    chatSelectors.getFunctionMessageProps({ content, id, plugin }),
+    isEqual,
+  );
+  const [showRender, setShow] = useState(true);
 
-    return (
-      <Flexbox gap={12} id={id}>
-        <FunctionCall {...fcProps} />
-        <PluginMessage content={content} loading={fcProps.loading} name={name} />
-      </Flexbox>
-    );
-  },
-);
+  return (
+    <Flexbox gap={12} id={id}>
+      <Inspector showRender={showRender} {...fcProps} setShow={setShow} />
+      {showRender && (
+        <PluginRender
+          content={content}
+          id={id}
+          loading={fcProps.loading}
+          name={name}
+          payload={fcProps.command}
+          type={fcProps.type}
+        />
+      )}
+    </Flexbox>
+  );
+});

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

@@ -0,0 +1,36 @@
+import { ActionIcon } from '@lobehub/ui';
+import { LucideSettings } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PluginSettingsModal from '@/features/PluginSettingsModal';
+import { pluginSelectors, usePluginStore } from '@/store/plugin';
+
+const Settings = memo<{ id: string }>(({ id }) => {
+  const item = usePluginStore(pluginSelectors.getPluginManifestById(id));
+  const [open, setOpen] = useState(false);
+  const { t } = useTranslation('plugin');
+  return (
+    item?.settings && (
+      <>
+        <ActionIcon
+          icon={LucideSettings}
+          onClick={() => {
+            setOpen(true);
+          }}
+          title={t('setting')}
+        />
+        <PluginSettingsModal
+          id={id}
+          onClose={() => {
+            setOpen(false);
+          }}
+          open={open}
+          schema={item.settings}
+        />
+      </>
+    )
+  );
+});
+
+export default Settings;

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

@@ -0,0 +1,126 @@
+import { Loading3QuartersOutlined } from '@ant-design/icons';
+import { LobePluginType } from '@lobehub/chat-plugin-sdk';
+import { ActionIcon, Avatar, Highlighter, Icon } from '@lobehub/ui';
+import { Tabs } from 'antd';
+import isEqual from 'fast-deep-equal';
+import {
+  LucideBug,
+  LucideBugOff,
+  LucideChevronDown,
+  LucideChevronUp,
+  LucideToyBrick,
+} from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
+
+import PluginResult from './PluginResultJSON';
+import Settings from './Settings';
+import { useStyles } from './style';
+
+export interface InspectorProps {
+  arguments?: string;
+  command?: any;
+  content: string;
+  id?: string;
+  loading?: boolean;
+  setShow?: (showRender: boolean) => void;
+  showRender?: boolean;
+  type?: LobePluginType;
+}
+
+const Inspector = memo<InspectorProps>(
+  ({
+    arguments: requestArgs = '{}',
+    command,
+    showRender,
+    loading,
+    setShow,
+    content,
+    id = 'unknown',
+    // type,
+  }) => {
+    const { t } = useTranslation('plugin');
+    const { styles } = useStyles();
+    const [open, setOpen] = useState(false);
+
+    const item = usePluginStore(pluginSelectors.getPluginMetaById(id), isEqual);
+    const showRightAction = usePluginStore(pluginSelectors.hasPluginUI(id));
+    const pluginAvatar = pluginHelpers.getPluginAvatar(item?.meta);
+    const pluginTitle = pluginHelpers.getPluginTitle(item?.meta);
+
+    const avatar = pluginAvatar ? (
+      <Avatar avatar={pluginAvatar} size={32} />
+    ) : (
+      <Icon icon={LucideToyBrick} />
+    );
+
+    const args = JSON.stringify(command, null, 2);
+    const params = JSON.stringify(JSON.parse(requestArgs), null, 2);
+
+    return (
+      <Flexbox gap={8}>
+        <Flexbox align={'center'} distribution={'space-between'} gap={24} horizontal>
+          <Flexbox
+            align={'center'}
+            className={styles.container}
+            gap={8}
+            horizontal
+            onClick={() => {
+              setShow?.(!showRender);
+            }}
+          >
+            {loading ? (
+              <div>
+                <Loading3QuartersOutlined spin />
+              </div>
+            ) : (
+              avatar
+            )}
+            {pluginTitle ?? t('plugins.unknown')}
+            {showRightAction && <Icon icon={showRender ? LucideChevronUp : LucideChevronDown} />}
+          </Flexbox>
+          {
+            <Flexbox horizontal>
+              {/*{type === 'standalone' && <ActionIcon icon={LucideOrbit} />}*/}
+              <ActionIcon
+                icon={open ? LucideBugOff : LucideBug}
+                onClick={() => {
+                  setOpen(!open);
+                }}
+                title={t(open ? 'debug.off' : 'debug.on')}
+              />
+              <Settings id={id} />
+            </Flexbox>
+          }
+        </Flexbox>
+        {open && (
+          <Tabs
+            items={[
+              {
+                children: <Highlighter language={'json'}>{args}</Highlighter>,
+                key: 'function_call',
+                label: t('debug.function_call'),
+              },
+              {
+                children: <Highlighter language={'json'}>{params}</Highlighter>,
+                key: 'arguments',
+                label: t('debug.arguments'),
+              },
+              {
+                children: <PluginResult content={content} />,
+                key: 'response',
+                label: t('debug.response'),
+              },
+            ]}
+            style={{ maxWidth: 800 }}
+          />
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+export default Inspector;

package/src/app/chat/features/Conversation/ChatList/Plugins/{style.ts → Inspector/style.ts}

@@ -6,6 +6,7 @@ export const useStyles = createStyles(({ css, token }) => ({
 
     width: fit-content;
     padding: 6px 8px;
+    padding-inline-end: 12px;
 
     color: ${token.colorText};
 

package/src/app/chat/features/Conversation/ChatList/Plugins/{IFrameRender → Render/DefaultType/IFrameRender}/index.tsx

@@ -1,9 +1,9 @@
 import { PluginRenderProps } from '@lobehub/chat-plugin-sdk/client';
 import { Skeleton } from 'antd';
-import { memo, useEffect, useRef, useState } from 'react';
+import { memo, useRef, useState } from 'react';
 
-import { useOnPluginFetchMessage, useOnPluginReady } from './hooks';
-import { sendMessageToPlugin } from './utils';
+import { useOnPluginReadyForInteraction } from '../../utils/iframeOnReady';
+import { sendMessageToPlugin } from '../../utils/postMessage';
 
 interface IFrameRenderProps extends PluginRenderProps {
   height?: number;
@@ -12,24 +12,13 @@ interface IFrameRenderProps extends PluginRenderProps {
 }
 
 const IFrameRender = memo<IFrameRenderProps>(({ url, width = 800, height = 300, ...props }) => {
-  const [loading, setLoading] = useState(true);
-  const [readyForRender, setReady] = useState(false);
   const iframeRef = useRef<HTMLIFrameElement>(null);
-
-  useOnPluginReady(() => setReady(true));
+  const [loading, setLoading] = useState(true);
 
   // 当 props 发生变化时，主动向 iframe 发送数据
-  useEffect(() => {
+  useOnPluginReadyForInteraction(() => {
     const iframeWin = iframeRef.current?.contentWindow;
 
-    if (iframeWin && readyForRender) {
-      sendMessageToPlugin(iframeWin, props);
-    }
-  }, [readyForRender, props]);
-
-  // 当接收到来自 iframe 的请求时，触发发送数据
-  useOnPluginFetchMessage(() => {
-    const iframeWin = iframeRef.current?.contentWindow;
     if (iframeWin) {
       sendMessageToPlugin(iframeWin, props);
     }

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

@@ -0,0 +1,117 @@
+import { Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+import dynamic from 'next/dynamic';
+import { Suspense, memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { usePluginStore } from '@/store/plugin';
+
+import IFrameRender from './IFrameRender';
+
+const SystemJsRender = dynamic(() => import('./SystemJsRender'), { ssr: false });
+
+const useStyles = createStyles(
+  ({ css, token }) => css`
+    position: relative;
+
+    overflow: hidden;
+    display: block;
+
+    width: 300px;
+    height: 12px;
+
+    border: 1px solid ${token.colorBorder};
+    border-radius: 10px;
+
+    &::after {
+      content: '';
+
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      box-sizing: border-box;
+      width: 40%;
+      height: 100%;
+
+      background: ${token.colorPrimary};
+
+      animation: animloader 2s linear infinite;
+    }
+
+    @keyframes animloader {
+      0% {
+        left: 0;
+        transform: translateX(-100%);
+      }
+
+      100% {
+        left: 100%;
+        transform: translateX(0%);
+      }
+    }
+  `,
+);
+const Loading = () => {
+  const { t } = useTranslation('plugin');
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox align={'center'} gap={8} padding={16}>
+      <span className={styles} />
+      {t('loading.content')}
+    </Flexbox>
+  );
+};
+
+export interface PluginDefaultTypeProps {
+  content: string;
+  loading?: boolean;
+  name?: string;
+}
+
+const PluginDefaultType = memo<PluginDefaultTypeProps>(({ content, name }) => {
+  const manifest = usePluginStore((s) => s.pluginManifestMap[name || '']);
+  let isJSON = true;
+  try {
+    JSON.parse(content);
+  } catch {
+    isJSON = false;
+  }
+
+  const contentObj = useMemo<object>(() => (isJSON ? JSON.parse(content) : content), [content]);
+
+  if (!isJSON) {
+    return (
+      <Flexbox gap={8}>
+        <Loading />
+      </Flexbox>
+    );
+  }
+
+  if (!manifest?.ui) return;
+
+  const ui = manifest.ui;
+
+  if (!ui.url) return;
+
+  if (ui.mode === 'module')
+    return (
+      <Suspense fallback={<Skeleton active style={{ width: 400 }} />}>
+        <SystemJsRender content={contentObj} name={name || 'unknown'} url={ui.url} />
+      </Suspense>
+    );
+
+  return (
+    <IFrameRender
+      content={contentObj}
+      height={ui.height}
+      name={name || 'unknown'}
+      url={ui.url}
+      width={ui.width}
+    />
+  );
+});
+
+export default PluginDefaultType;