diff --git a/src/app/chat/(desktop)/features/ChatInput.tsx b/src/app/chat/(desktop)/features/ChatInput.tsx
index 6e46586e3189..6c1d21890afa 100644
--- a/src/app/chat/(desktop)/features/ChatInput.tsx
+++ b/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}
diff --git a/src/app/chat/features/Conversation/ChatList/Error/Plugin/PluginSettings.tsx b/src/app/chat/features/Conversation/ChatList/Error/Plugin/PluginSettings.tsx
index 7e026a6dbde7..dd78f3006cce 100644
--- a/src/app/chat/features/Conversation/ChatList/Error/Plugin/PluginSettings.tsx
+++ b/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
diff --git a/src/app/chat/features/Conversation/ChatList/Messages/Assistant.tsx b/src/app/chat/features/Conversation/ChatList/Messages/Assistant.tsx
index 943e2f91759e..21ccfd6aa9a6 100644
--- a/src/app/chat/features/Conversation/ChatList/Messages/Assistant.tsx
+++ b/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>
+  );
+});
diff --git a/src/app/chat/features/Conversation/ChatList/Messages/Function.tsx b/src/app/chat/features/Conversation/ChatList/Messages/Function.tsx
index 2274227000c5..b251ee64b43f 100644
--- a/src/app/chat/features/Conversation/ChatList/Messages/Function.tsx
+++ b/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>
+  );
+});
diff --git a/src/app/chat/features/Conversation/ChatList/Plugins/IFrameRender/hooks.ts b/src/app/chat/features/Conversation/ChatList/Plugins/IFrameRender/hooks.ts
deleted file mode 100644
index 7339f4773fb6..000000000000
--- a/src/app/chat/features/Conversation/ChatList/Plugins/IFrameRender/hooks.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useEffect } from 'react';
-
-import { onPluginFetchMessage, onPluginReady } from './utils';
-
-export const useOnPluginReady = (onReady: () => void) => {
-  useEffect(() => {
-    const fn = (e: MessageEvent) => {
-      onPluginReady(e, onReady);
-    };
-
-    window.addEventListener('message', fn);
-    return () => {
-      window.removeEventListener('message', fn);
-    };
-  }, []);
-};
-
-export const useOnPluginFetchMessage = (onRequest: (data: any) => void, deps: any[] = []) => {
-  useEffect(() => {
-    const fn = (e: MessageEvent) => {
-      onPluginFetchMessage(e, onRequest);
-    };
-
-    window.addEventListener('message', fn);
-    return () => {
-      window.removeEventListener('message', fn);
-    };
-  }, deps);
-};
diff --git a/src/app/chat/features/Conversation/ChatList/Plugins/IFrameRender/utils.ts b/src/app/chat/features/Conversation/ChatList/Plugins/IFrameRender/utils.ts
deleted file mode 100644
index fd74865e4eee..000000000000
--- a/src/app/chat/features/Conversation/ChatList/Plugins/IFrameRender/utils.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { PluginChannel } from '@lobehub/chat-plugin-sdk/client';
-
-export const onPluginReady = (e: MessageEvent, onReady: () => void) => {
-  if (e.data.type === PluginChannel.pluginReadyForRender) {
-    onReady();
-  }
-};
-
-export const onPluginFetchMessage = (e: MessageEvent, onRequest: (data: any) => void) => {
-  if (e.data.type === PluginChannel.fetchPluginMessage) {
-    onRequest(e.data);
-  }
-};
-
-export const sendMessageToPlugin = (window: Window, props: any) => {
-  window.postMessage({ props, type: PluginChannel.renderPlugin }, '*');
-};
diff --git a/src/app/chat/features/Conversation/ChatList/Plugins/PluginResultRender.tsx b/src/app/chat/features/Conversation/ChatList/Plugins/Inspector/PluginResultJSON.tsx
similarity index 100%
rename from src/app/chat/features/Conversation/ChatList/Plugins/PluginResultRender.tsx
rename to src/app/chat/features/Conversation/ChatList/Plugins/Inspector/PluginResultJSON.tsx
diff --git a/src/app/chat/features/Conversation/ChatList/Plugins/Inspector/Settings.tsx b/src/app/chat/features/Conversation/ChatList/Plugins/Inspector/Settings.tsx
new file mode 100644
index 000000000000..53fc7c948629
--- /dev/null
+++ b/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;
diff --git a/src/app/chat/features/Conversation/ChatList/Plugins/FunctionCall.tsx b/src/app/chat/features/Conversation/ChatList/Plugins/Inspector/index.tsx
similarity index 52%
rename from src/app/chat/features/Conversation/ChatList/Plugins/FunctionCall.tsx
rename to src/app/chat/features/Conversation/ChatList/Plugins/Inspector/index.tsx
index 77794295b740..03f57949e52c 100644
--- a/src/app/chat/features/Conversation/ChatList/Plugins/FunctionCall.tsx
+++ b/src/app/chat/features/Conversation/ChatList/Plugins/Inspector/index.tsx
@@ -1,26 +1,40 @@
 import { LoadingOutlined } from '@ant-design/icons';
-import { Avatar, Highlighter, Icon } from '@lobehub/ui';
+import { LobePluginType } from '@lobehub/chat-plugin-sdk';
+import { ActionIcon, Avatar, Highlighter, Icon } from '@lobehub/ui';
 import { Tabs } from 'antd';
-import { LucideChevronDown, LucideChevronUp, LucideToyBrick } from 'lucide-react';
+import { LucideChevronDown, LucideChevronUp, LucideOrbit, 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 './PluginResultRender';
+import PluginResult from './PluginResultJSON';
+import Settings from './Settings';
 import { useStyles } from './style';
 
-export interface FunctionCallProps {
+export interface InspectorProps {
   arguments?: string;
   command?: any;
   content: string;
   id?: string;
   loading?: boolean;
+  setShow?: (showRender: boolean) => void;
+  showRender?: boolean;
+  type?: LobePluginType;
 }
 
-const FunctionCall = memo<FunctionCallProps>(
-  ({ arguments: requestArgs = '{}', command, loading, content, id = 'unknown' }) => {
+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);
@@ -41,24 +55,38 @@ const FunctionCall = memo<FunctionCallProps>(
 
     return (
       <Flexbox gap={8}>
-        <Flexbox
-          align={'center'}
-          className={styles.container}
-          gap={8}
-          horizontal
-          onClick={() => {
-            setOpen(!open);
-          }}
-        >
-          {loading ? (
-            <div>
-              <LoadingOutlined />
-            </div>
-          ) : (
-            avatar
-          )}
-          {pluginTitle ?? t('plugins.unknown')}
-          <Icon icon={open ? LucideChevronUp : LucideChevronDown} />
+        <Flexbox align={'center'} distribution={'space-between'} gap={24} horizontal>
+          <Flexbox
+            align={'center'}
+            className={styles.container}
+            gap={8}
+            horizontal
+            onClick={() => {
+              setOpen(!open);
+            }}
+          >
+            {loading ? (
+              <div>
+                <LoadingOutlined />
+              </div>
+            ) : (
+              avatar
+            )}
+            {pluginTitle ?? t('plugins.unknown')}
+            <Icon icon={open ? LucideChevronUp : LucideChevronDown} />
+          </Flexbox>
+          <Flexbox horizontal>
+            {type === 'standalone' && <ActionIcon icon={LucideOrbit} />}
+            <Settings id={id} />
+            {setShow && (
+              <ActionIcon
+                icon={showRender ? LucideChevronUp : LucideChevronDown}
+                onClick={() => {
+                  setShow(!showRender);
+                }}
+              />
+            )}
+          </Flexbox>
         </Flexbox>
         {open && (
           <Tabs
@@ -87,4 +115,4 @@ const FunctionCall = memo<FunctionCallProps>(
   },
 );
 
-export default FunctionCall;
+export default Inspector;
diff --git a/src/app/chat/features/Conversation/ChatList/Plugins/style.ts b/src/app/chat/features/Conversation/ChatList/Plugins/Inspector/style.ts
similarity index 100%
rename from src/app/chat/features/Conversation/ChatList/Plugins/style.ts
rename to src/app/chat/features/Conversation/ChatList/Plugins/Inspector/style.ts
diff --git a/src/app/chat/features/Conversation/ChatList/Plugins/IFrameRender/index.tsx b/src/app/chat/features/Conversation/ChatList/Plugins/Render/DefaultType/IFrameRender/index.tsx
similarity index 67%
rename from src/app/chat/features/Conversation/ChatList/Plugins/IFrameRender/index.tsx
rename to src/app/chat/features/Conversation/ChatList/Plugins/Render/DefaultType/IFrameRender/index.tsx
index 38ada8232ea4..2cbba9bc10df 100644
--- a/src/app/chat/features/Conversation/ChatList/Plugins/IFrameRender/index.tsx
+++ b/src/app/chat/features/Conversation/ChatList/Plugins/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);
     }
diff --git a/src/app/chat/features/Conversation/ChatList/Plugins/SystemJsRender/index.tsx b/src/app/chat/features/Conversation/ChatList/Plugins/Render/DefaultType/SystemJsRender/index.tsx
similarity index 100%
rename from src/app/chat/features/Conversation/ChatList/Plugins/SystemJsRender/index.tsx
rename to src/app/chat/features/Conversation/ChatList/Plugins/Render/DefaultType/SystemJsRender/index.tsx
diff --git a/src/app/chat/features/Conversation/ChatList/Plugins/SystemJsRender/utils.ts b/src/app/chat/features/Conversation/ChatList/Plugins/Render/DefaultType/SystemJsRender/utils.ts
similarity index 100%
rename from src/app/chat/features/Conversation/ChatList/Plugins/SystemJsRender/utils.ts
rename to src/app/chat/features/Conversation/ChatList/Plugins/Render/DefaultType/SystemJsRender/utils.ts
diff --git a/src/app/chat/features/Conversation/ChatList/Plugins/PluginMessage.tsx b/src/app/chat/features/Conversation/ChatList/Plugins/Render/DefaultType/index.tsx
similarity index 90%
rename from src/app/chat/features/Conversation/ChatList/Plugins/PluginMessage.tsx
rename to src/app/chat/features/Conversation/ChatList/Plugins/Render/DefaultType/index.tsx
index 7862983533d1..c2429661216f 100644
--- a/src/app/chat/features/Conversation/ChatList/Plugins/PluginMessage.tsx
+++ b/src/app/chat/features/Conversation/ChatList/Plugins/Render/DefaultType/index.tsx
@@ -11,13 +11,13 @@ import IFrameRender from './IFrameRender';
 
 const SystemJsRender = dynamic(() => import('./SystemJsRender'), { ssr: false });
 
-export interface FunctionMessageProps {
+export interface PluginDefaultTypeProps {
   content: string;
   loading?: boolean;
   name?: string;
 }
 
-const PluginMessage = memo<FunctionMessageProps>(({ content, name }) => {
+const PluginDefaultType = memo<PluginDefaultTypeProps>(({ content, name }) => {
   const { t } = useTranslation('plugin');
 
   const manifest = usePluginStore((s) => s.pluginManifestMap[name || '']);
@@ -65,4 +65,4 @@ const PluginMessage = memo<FunctionMessageProps>(({ content, name }) => {
   );
 });
 
-export default PluginMessage;
+export default PluginDefaultType;
diff --git a/src/app/chat/features/Conversation/ChatList/Plugins/Render/StandaloneType/Iframe.tsx b/src/app/chat/features/Conversation/ChatList/Plugins/Render/StandaloneType/Iframe.tsx
new file mode 100644
index 000000000000..96272a457533
--- /dev/null
+++ b/src/app/chat/features/Conversation/ChatList/Plugins/Render/StandaloneType/Iframe.tsx
@@ -0,0 +1,136 @@
+import { PluginRequestPayload } from '@lobehub/chat-plugin-sdk';
+import { Skeleton } from 'antd';
+import { memo, useRef, useState } from 'react';
+
+import { useOnPluginSettingsUpdate } from '@/app/chat/features/Conversation/ChatList/Plugins/Render/utils/pluginSettings';
+import { useOnPluginStateUpdate } from '@/app/chat/features/Conversation/ChatList/Plugins/Render/utils/pluginState';
+import { pluginSelectors, usePluginStore } from '@/store/plugin';
+import { useSessionStore } from '@/store/session';
+import { chatSelectors } from '@/store/session/selectors';
+
+import { useOnPluginReadyForInteraction } from '../utils/iframeOnReady';
+import {
+  useOnPluginFetchMessage,
+  useOnPluginFetchPluginSettings,
+  useOnPluginFetchPluginState,
+  useOnPluginFillContent,
+} from '../utils/listenToPlugin';
+import {
+  sendMessageToPlugin,
+  sendPayloadToPlugin,
+  sendPluginSettingsToPlugin,
+  sendPluginStateToPlugin,
+} from '../utils/postMessage';
+
+interface IFrameRenderProps {
+  height?: number;
+  id: string;
+  payload?: PluginRequestPayload;
+  url: string;
+  width?: number;
+}
+
+const IFrameRender = memo<IFrameRenderProps>(({ url, id, payload, width = 600, height = 300 }) => {
+  const [loading, setLoading] = useState(true);
+
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  // when payload change，send content to plugin
+  useOnPluginReadyForInteraction(() => {
+    const iframeWin = iframeRef.current?.contentWindow;
+    if (iframeWin && payload) {
+      sendPayloadToPlugin(iframeWin, payload);
+    }
+  }, [payload]);
+
+  // when plugin wants to get message content, send it to plugin
+  useOnPluginFetchMessage(() => {
+    const iframeWin = iframeRef.current?.contentWindow;
+
+    if (iframeWin) {
+      const message = chatSelectors.getMessageById(id)(useSessionStore.getState());
+      if (!message) return;
+      const props = { content: '' };
+
+      try {
+        props.content = JSON.parse(message.content || '{}');
+      } catch {
+        props.content = message.content || '';
+      }
+
+      sendMessageToPlugin(iframeWin, props);
+    }
+  }, []);
+
+  // when plugin try to send back message, we should fill it to the message content
+  const fillPluginContent = useSessionStore((s) => s.fillPluginMessageContent);
+  useOnPluginFillContent((content) => {
+    fillPluginContent(id, content);
+  });
+
+  // when plugin wants to get plugin state, send it to plugin
+  useOnPluginFetchPluginState((key) => {
+    const iframeWin = iframeRef.current?.contentWindow;
+
+    if (iframeWin) {
+      const message = chatSelectors.getMessageById(id)(useSessionStore.getState());
+      if (!message) return;
+
+      sendPluginStateToPlugin(iframeWin, key, message.pluginState?.[key]);
+    }
+  });
+
+  // when plugin update state, we should update it to the message pluginState key
+  const updatePluginState = useSessionStore((s) => s.updatePluginState);
+  useOnPluginStateUpdate((key, value) => {
+    updatePluginState(id, key, value);
+  });
+
+  // when plugin wants to get plugin settings, send it to plugin
+  useOnPluginFetchPluginSettings(() => {
+    const iframeWin = iframeRef.current?.contentWindow;
+
+    if (iframeWin) {
+      if (!payload?.identifier) return;
+
+      const settings = pluginSelectors.getPluginSettingsById(payload?.identifier)(
+        usePluginStore.getState(),
+      );
+
+      sendPluginSettingsToPlugin(iframeWin, settings);
+    }
+  });
+
+  // when plugin update settings, we should update it to the plugin settings
+  const updatePluginSettings = usePluginStore((s) => s.updatePluginSettings);
+  useOnPluginSettingsUpdate((value) => {
+    if (!payload?.identifier) return;
+
+    updatePluginSettings(payload?.identifier, value);
+  });
+
+  return (
+    <>
+      {loading && <Skeleton active style={{ width }} />}
+      <iframe
+        // @ts-ignore
+        allowtransparency="true"
+        height={height}
+        hidden={loading}
+        onLoad={() => {
+          setLoading(false);
+        }}
+        ref={iframeRef}
+        src={url}
+        style={{
+          border: 0,
+          // iframe 在 color-scheme:dark 模式下无法透明
+          // refs: https://www.jianshu.com/p/bc5a37bb6a7b
+          colorScheme: 'light',
+        }}
+        width={width}
+      />
+    </>
+  );
+});
+export default IFrameRender;
diff --git a/src/app/chat/features/Conversation/ChatList/Plugins/Render/StandaloneType/index.tsx b/src/app/chat/features/Conversation/ChatList/Plugins/Render/StandaloneType/index.tsx
new file mode 100644
index 000000000000..8a6e9d6586e1
--- /dev/null
+++ b/src/app/chat/features/Conversation/ChatList/Plugins/Render/StandaloneType/index.tsx
@@ -0,0 +1,28 @@
+import { PluginRequestPayload } from '@lobehub/chat-plugin-sdk';
+import { memo } from 'react';
+
+import { usePluginStore } from '@/store/plugin';
+
+import IFrameRender from './Iframe';
+
+export interface PluginStandaloneTypeProps {
+  id: string;
+  name?: string;
+  payload?: PluginRequestPayload;
+}
+
+const PluginDefaultType = memo<PluginStandaloneTypeProps>(({ payload, id, name = 'unknown' }) => {
+  const manifest = usePluginStore((s) => s.pluginManifestMap[name]);
+
+  if (!manifest?.ui) return;
+
+  const ui = manifest.ui;
+
+  if (!ui.url) return;
+
+  return (
+    <IFrameRender height={ui.height} id={id} payload={payload} url={ui.url} width={ui.width} />
+  );
+});
+
+export default PluginDefaultType;
diff --git a/src/app/chat/features/Conversation/ChatList/Plugins/Render/index.tsx b/src/app/chat/features/Conversation/ChatList/Plugins/Render/index.tsx
new file mode 100644
index 000000000000..af522f71e697
--- /dev/null
+++ b/src/app/chat/features/Conversation/ChatList/Plugins/Render/index.tsx
@@ -0,0 +1,28 @@
+import { LobePluginType, PluginRequestPayload } from '@lobehub/chat-plugin-sdk';
+import { memo } from 'react';
+
+import DefaultType from './DefaultType';
+import Standalone from './StandaloneType';
+
+export interface PluginRenderProps {
+  content: string;
+  id: string;
+  loading?: boolean;
+  name?: string;
+  payload?: PluginRequestPayload;
+  type?: LobePluginType;
+}
+
+const PluginRender = memo<PluginRenderProps>(({ content, id, payload, name, type }) => {
+  switch (type) {
+    case 'standalone': {
+      return <Standalone id={id} name={name} payload={payload} />;
+    }
+
+    default: {
+      return <DefaultType content={content} name={name} />;
+    }
+  }
+});
+
+export default PluginRender;
diff --git a/src/app/chat/features/Conversation/ChatList/Plugins/Render/utils/iframeOnReady.ts b/src/app/chat/features/Conversation/ChatList/Plugins/Render/utils/iframeOnReady.ts
new file mode 100644
index 000000000000..b3315f337730
--- /dev/null
+++ b/src/app/chat/features/Conversation/ChatList/Plugins/Render/utils/iframeOnReady.ts
@@ -0,0 +1,23 @@
+import { PluginChannel } from '@lobehub/chat-plugin-sdk/client';
+import { useEffect, useState } from 'react';
+
+export const useOnPluginReadyForInteraction = (onReady: () => void, deps: any[] = []) => {
+  const [readyForRender, setReady] = useState(false);
+  useEffect(() => {
+    const fn = (e: MessageEvent) => {
+      if (e.data.type === PluginChannel.pluginReadyForRender) {
+        setReady(true);
+      }
+    };
+
+    window.addEventListener('message', fn);
+    return () => {
+      window.removeEventListener('message', fn);
+    };
+  }, []);
+  useEffect(() => {
+    if (readyForRender) {
+      onReady();
+    }
+  }, [readyForRender, ...deps]);
+};
diff --git a/src/app/chat/features/Conversation/ChatList/Plugins/Render/utils/listenToPlugin.ts b/src/app/chat/features/Conversation/ChatList/Plugins/Render/utils/listenToPlugin.ts
new file mode 100644
index 000000000000..04782fcd7ce6
--- /dev/null
+++ b/src/app/chat/features/Conversation/ChatList/Plugins/Render/utils/listenToPlugin.ts
@@ -0,0 +1,65 @@
+import { PluginChannel } from '@lobehub/chat-plugin-sdk/client';
+import { useEffect } from 'react';
+
+export const useOnPluginFetchMessage = (onRequest: (data: any) => void, deps: any[] = []) => {
+  useEffect(() => {
+    const fn = (e: MessageEvent) => {
+      if (e.data.type === PluginChannel.fetchPluginMessage) {
+        onRequest(e.data);
+      }
+    };
+
+    window.addEventListener('message', fn);
+    return () => {
+      window.removeEventListener('message', fn);
+    };
+  }, deps);
+};
+
+export const useOnPluginFetchPluginState = (onRequest: (key: string) => void) => {
+  useEffect(() => {
+    const fn = (e: MessageEvent) => {
+      if (e.data.type === PluginChannel.fetchPluginState) {
+        onRequest(e.data.key);
+      }
+    };
+
+    window.addEventListener('message', fn);
+    return () => {
+      window.removeEventListener('message', fn);
+    };
+  }, []);
+};
+
+export const useOnPluginFillContent = (callback: (content: string) => void) => {
+  useEffect(() => {
+    const fn = (e: MessageEvent) => {
+      if (e.data.type === PluginChannel.fillStandalonePluginContent) {
+        const data = e.data.content;
+        const content = typeof data !== 'string' ? JSON.stringify(data) : data;
+
+        callback(content);
+      }
+    };
+
+    window.addEventListener('message', fn);
+    return () => {
+      window.removeEventListener('message', fn);
+    };
+  }, []);
+};
+
+export const useOnPluginFetchPluginSettings = (onRequest: () => void) => {
+  useEffect(() => {
+    const fn = (e: MessageEvent) => {
+      if (e.data.type === PluginChannel.fetchPluginSettings) {
+        onRequest();
+      }
+    };
+
+    window.addEventListener('message', fn);
+    return () => {
+      window.removeEventListener('message', fn);
+    };
+  }, []);
+};
diff --git a/src/app/chat/features/Conversation/ChatList/Plugins/Render/utils/pluginSettings.ts b/src/app/chat/features/Conversation/ChatList/Plugins/Render/utils/pluginSettings.ts
new file mode 100644
index 000000000000..78fb436c8cb6
--- /dev/null
+++ b/src/app/chat/features/Conversation/ChatList/Plugins/Render/utils/pluginSettings.ts
@@ -0,0 +1,17 @@
+import { PluginChannel } from '@lobehub/chat-plugin-sdk/client';
+import { useEffect } from 'react';
+
+export const useOnPluginSettingsUpdate = (callback: (settings: any) => void) => {
+  useEffect(() => {
+    const fn = (e: MessageEvent) => {
+      if (e.data.type === PluginChannel.updatePluginSettings) {
+        callback(e.data.value);
+      }
+    };
+
+    window.addEventListener('message', fn);
+    return () => {
+      window.removeEventListener('message', fn);
+    };
+  }, []);
+};
diff --git a/src/app/chat/features/Conversation/ChatList/Plugins/Render/utils/pluginState.ts b/src/app/chat/features/Conversation/ChatList/Plugins/Render/utils/pluginState.ts
new file mode 100644
index 000000000000..1a988736b878
--- /dev/null
+++ b/src/app/chat/features/Conversation/ChatList/Plugins/Render/utils/pluginState.ts
@@ -0,0 +1,20 @@
+import { PluginChannel } from '@lobehub/chat-plugin-sdk/client';
+import { useEffect } from 'react';
+
+export const useOnPluginStateUpdate = (callback: (key: string, value: any) => void) => {
+  useEffect(() => {
+    const fn = (e: MessageEvent) => {
+      if (e.data.type === PluginChannel.updatePluginState) {
+        const key = e.data.key;
+        const value = e.data.value;
+
+        callback(key, value);
+      }
+    };
+
+    window.addEventListener('message', fn);
+    return () => {
+      window.removeEventListener('message', fn);
+    };
+  }, []);
+};
diff --git a/src/app/chat/features/Conversation/ChatList/Plugins/Render/utils/postMessage.ts b/src/app/chat/features/Conversation/ChatList/Plugins/Render/utils/postMessage.ts
new file mode 100644
index 000000000000..c7162d5cb5eb
--- /dev/null
+++ b/src/app/chat/features/Conversation/ChatList/Plugins/Render/utils/postMessage.ts
@@ -0,0 +1,17 @@
+import { PluginChannel } from '@lobehub/chat-plugin-sdk/client';
+
+export const sendMessageToPlugin = (window: Window, props: any) => {
+  window.postMessage({ props, type: PluginChannel.renderPlugin }, '*');
+};
+
+export const sendPayloadToPlugin = (window: Window, props: any) => {
+  window.postMessage({ props, type: PluginChannel.initStandalonePlugin }, '*');
+};
+
+export const sendPluginStateToPlugin = (window: Window, key: string, value: any) => {
+  window.postMessage({ key, type: PluginChannel.renderPluginState, value }, '*');
+};
+
+export const sendPluginSettingsToPlugin = (window: Window, settings: any) => {
+  window.postMessage({ type: PluginChannel.renderPluginState, value: settings }, '*');
+};
diff --git a/src/const/plugin.ts b/src/const/plugin.ts
index 8627ecba9a8f..5194a6f12873 100644
--- a/src/const/plugin.ts
+++ b/src/const/plugin.ts
@@ -1 +1 @@
-export const PLUGIN_SCHEMA_SEPARATOR = '--__--';
+export const PLUGIN_SCHEMA_SEPARATOR = '____';
diff --git a/src/features/PluginSettings/index.tsx b/src/features/PluginSettings/index.tsx
index 8f29bbdf56a9..c5d847a2b4af 100644
--- a/src/features/PluginSettings/index.tsx
+++ b/src/features/PluginSettings/index.tsx
@@ -9,6 +9,8 @@ import { usePluginStore } from '@/store/plugin';
 import PluginSettingRender from './PluginSettingRender';
 
 export const transformPluginSettings = (pluginSettings: PluginSchema) => {
+  if (!pluginSettings?.properties) return [];
+
   return Object.entries(pluginSettings.properties).map(([name, i]) => ({
     desc: i.description,
     format: i.format,
@@ -21,7 +23,7 @@ export const transformPluginSettings = (pluginSettings: PluginSchema) => {
 
 interface PluginSettingsConfigProps {
   id: string;
-  settings: PluginSchema;
+  schema: PluginSchema;
 }
 
 const useStyles = createStyles(({ css, token }) => ({
@@ -32,8 +34,8 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const PluginSettingsConfig = memo<PluginSettingsConfigProps>(({ settings, id }) => {
-  const items = transformPluginSettings(settings);
+const PluginSettingsConfig = memo<PluginSettingsConfigProps>(({ schema, id }) => {
+  const items = transformPluginSettings(schema);
 
   const { styles } = useStyles();
   const [updatePluginSettings] = usePluginStore((s) => [s.updatePluginSettings]);
diff --git a/src/features/PluginSettingsModal/index.tsx b/src/features/PluginSettingsModal/index.tsx
new file mode 100644
index 000000000000..2e02095557b1
--- /dev/null
+++ b/src/features/PluginSettingsModal/index.tsx
@@ -0,0 +1,45 @@
+import { Avatar, Modal } from '@lobehub/ui';
+import { Divider, Typography } from 'antd';
+import { useTheme } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import PluginSettingsConfig from '@/features/PluginSettings';
+import { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
+
+interface PluginSettingsModalProps {
+  id: string;
+  onClose: () => void;
+  open?: boolean;
+  schema: any;
+}
+
+const PluginSettingsModal = memo<PluginSettingsModalProps>(({ schema, onClose, id, open }) => {
+  const pluginMeta = usePluginStore(pluginSelectors.getPluginMetaById(id), isEqual);
+
+  const { t } = useTranslation('plugin');
+  const theme = useTheme();
+  return (
+    <Modal onCancel={onClose} open={open} title={t('setting')} width={600}>
+      <Center gap={16}>
+        <Avatar
+          avatar={pluginHelpers.getPluginAvatar(pluginMeta?.meta) || '⚙️'}
+          background={theme.colorFillContent}
+          gap={12}
+          size={64}
+        />
+
+        <Flexbox style={{ fontSize: 20 }}>{pluginHelpers.getPluginTitle(pluginMeta?.meta)}</Flexbox>
+        <Typography.Text type={'secondary'}>
+          {pluginHelpers.getPluginDesc(pluginMeta?.meta)}
+        </Typography.Text>
+        <Divider style={{ marginBottom: 0, marginTop: 8 }} />
+        {schema && <PluginSettingsConfig id={id} schema={schema} />}
+      </Center>
+    </Modal>
+  );
+});
+
+export default PluginSettingsModal;
diff --git a/src/store/plugin/selectors.ts b/src/store/plugin/selectors.ts
index 663fafa701ac..0a4398d6398b 100644
--- a/src/store/plugin/selectors.ts
+++ b/src/store/plugin/selectors.ts
@@ -18,11 +18,17 @@ const enabledSchema =
         return enabledPlugins.includes(p.identifier);
       })
       .flatMap((manifest) =>
-        manifest.api.map((m) => ({
-          ...m,
+        manifest.api.map((m) => {
+          const pluginType = manifest.type ? `${PLUGIN_SCHEMA_SEPARATOR + manifest.type}` : '';
+
           // 将插件的 identifier 作为前缀，避免重复
-          name: manifest.identifier + PLUGIN_SCHEMA_SEPARATOR + m.name,
-        })),
+          const apiName = manifest.identifier + PLUGIN_SCHEMA_SEPARATOR + m.name + pluginType;
+
+          return {
+            ...m,
+            name: apiName,
+          };
+        }),
       );
 
     return uniqBy(list, 'name');
diff --git a/src/store/session/slices/chat/actions/index.ts b/src/store/session/slices/chat/actions/index.ts
index 9dfa9eacd652..47e1bb093f3b 100644
--- a/src/store/session/slices/chat/actions/index.ts
+++ b/src/store/session/slices/chat/actions/index.ts
@@ -3,6 +3,7 @@ import { StateCreator } from 'zustand/vanilla';
 import { SessionStore } from '@/store/session';
 
 import { ChatMessageAction, chatMessage } from './message';
+import { ChatPluginAction, chatPlugin } from './plugin';
 import { ShareAction, chatShare } from './share';
 import { ChatTopicAction, chatTopic } from './topic';
 import { ChatTranslateAction, chatTranslate } from './translate';
@@ -14,7 +15,8 @@ export interface ChatAction
   extends ChatTopicAction,
     ChatMessageAction,
     ShareAction,
-    ChatTranslateAction {}
+    ChatTranslateAction,
+    ChatPluginAction {}
 
 export const createChatSlice: StateCreator<
   SessionStore,
@@ -26,4 +28,5 @@ export const createChatSlice: StateCreator<
   ...chatMessage(...params),
   ...chatShare(...params),
   ...chatTranslate(...params),
+  ...chatPlugin(...params),
 });
diff --git a/src/store/session/slices/chat/actions/message.ts b/src/store/session/slices/chat/actions/message.ts
index 2e3a777dc355..72fbbf78fae2 100644
--- a/src/store/session/slices/chat/actions/message.ts
+++ b/src/store/session/slices/chat/actions/message.ts
@@ -1,15 +1,12 @@
-import { PluginRequestPayload } from '@lobehub/chat-plugin-sdk';
 import { template } from 'lodash-es';
 import { StateCreator } from 'zustand/vanilla';
 
 import { LOADING_FLAT } from '@/const/message';
-import { PLUGIN_SCHEMA_SEPARATOR } from '@/const/plugin';
 import { fetchChatModel } from '@/services/chatModel';
-import { fetchPlugin } from '@/services/plugin';
 import { SessionStore } from '@/store/session';
-import { ChatMessage, OpenAIFunctionCall } from '@/types/chatMessage';
+import { ChatMessage } from '@/types/chatMessage';
 import { fetchSSE } from '@/utils/fetch';
-import { isFunctionMessage } from '@/utils/message';
+import { isFunctionMessageAtStart, testFunctionMessageAtEnd } from '@/utils/message';
 import { setNamespace } from '@/utils/storeDebug';
 import { nanoid } from '@/utils/uuid';
 
@@ -29,6 +26,12 @@ export interface ChatMessageAction {
    * 清除消息
    */
   clearMessage: () => void;
+  /**
+   * 处理 ai 消息的核心逻辑（包含前处理与后处理）
+   * @param messages - 聊天消息数组
+   * @param parentId - 父消息 ID，可选
+   */
+  coreProcessMessage: (messages: ChatMessage[], parentId: string) => Promise<void>;
   /**
    * 删除消息
    * @param id - 消息 ID
@@ -40,21 +43,19 @@ export interface ChatMessageAction {
    */
   dispatchMessage: (payload: MessageDispatch) => void;
   /**
-   * 生成消息
+   * 实际获取 AI 响应
    * @param messages - 聊天消息数组
    * @param options - 获取 SSE 选项
    */
-  generateMessage: (
+  fetchAIChatMessage: (
     messages: ChatMessage[],
     assistantMessageId: string,
-  ) => Promise<{ isFunctionCall: boolean }>;
-  /**
-   * 实际获取 AI 响应
-   *
-   * @param messages - 聊天消息数组
-   * @param parentId - 父消息 ID，可选
-   */
-  realFetchAIResponse: (messages: ChatMessage[], parentId: string) => Promise<void>;
+  ) => Promise<{
+    content: string;
+    functionCallAtEnd: boolean;
+    functionCallContent: string;
+    isFunctionCall: boolean;
+  }>;
 
   /**
    * 重新发送消息
@@ -73,8 +74,6 @@ export interface ChatMessageAction {
     id?: string,
     action?: string,
   ) => AbortController | undefined;
-
-  triggerFunctionCall: (id: string) => Promise<void>;
 }
 
 export const chatMessage: StateCreator<
@@ -93,10 +92,74 @@ export const chatMessage: StateCreator<
     }
   },
 
+  coreProcessMessage: async (messages, userMessageId) => {
+    const { dispatchMessage, fetchAIChatMessage, triggerFunctionCall, activeTopicId } = get();
+
+    const { model } = agentSelectors.currentAgentConfig(get());
+
+    // 添加一个空的信息用于放置 ai 响应，注意顺序不能反
+    // 因为如果顺序反了，messages 中将包含新增的 ai message
+    const mid = nanoid();
+
+    dispatchMessage({
+      id: mid,
+      message: LOADING_FLAT,
+      parentId: userMessageId,
+      role: 'assistant',
+      type: 'addMessage',
+    });
+
+    // 如果有 activeTopicId，则添加 topicId
+    if (activeTopicId) {
+      dispatchMessage({ id: mid, key: 'topicId', type: 'updateMessage', value: activeTopicId });
+    }
+
+    // 为模型添加 fromModel 的额外信息
+    dispatchMessage({ id: mid, key: 'fromModel', type: 'updateMessageExtra', value: model });
+
+    // 生成 ai message
+    const { isFunctionCall, content, functionCallAtEnd, functionCallContent } =
+      await fetchAIChatMessage(messages, mid);
+
+    // 如果是 function，则发送函数调用方法
+    if (isFunctionCall) {
+      let functionId = mid;
+
+      if (functionCallAtEnd) {
+        // create a new separate message and remove the function call from the prev message
+        dispatchMessage({
+          id: mid,
+          key: 'content',
+          type: 'updateMessage',
+          value: content.replace(functionCallContent, ''),
+        });
+
+        functionId = nanoid();
+        dispatchMessage({
+          id: functionId,
+          message: functionCallContent,
+          parentId: userMessageId,
+          role: 'assistant',
+          type: 'addMessage',
+        });
+
+        // also add activeTopicId
+        if (activeTopicId)
+          dispatchMessage({
+            id: functionId,
+            key: 'topicId',
+            type: 'updateMessage',
+            value: activeTopicId,
+          });
+      }
+
+      triggerFunctionCall(functionId);
+    }
+  },
+
   deleteMessage: (id) => {
     get().dispatchMessage({ id, type: 'deleteMessage' });
   },
-
   dispatchMessage: (payload) => {
     const { activeId } = get();
     const session = sessionSelectors.currentSession(get());
@@ -106,7 +169,8 @@ export const chatMessage: StateCreator<
 
     get().dispatchSession({ chats, id: activeId, type: 'updateSessionChat' });
   },
-  generateMessage: async (messages, assistantId) => {
+
+  fetchAIChatMessage: async (messages, assistantId) => {
     const { dispatchMessage, toggleChatLoading } = get();
 
     const abortController = toggleChatLoading(
@@ -160,6 +224,8 @@ export const chatMessage: StateCreator<
 
     let output = '';
     let isFunctionCall = false;
+    let functionCallAtEnd = false;
+    let functionCallContent = '';
 
     await fetchSSE(fetcher, {
       onErrorHandle: (error) => {
@@ -168,15 +234,10 @@ export const chatMessage: StateCreator<
       onMessageHandle: (text) => {
         output += text;
 
-        dispatchMessage({
-          id: assistantId,
-          key: 'content',
-          type: 'updateMessage',
-          value: output,
-        });
+        dispatchMessage({ id: assistantId, key: 'content', type: 'updateMessage', value: output });
 
-        // 如果是 function call
-        if (isFunctionMessage(output)) {
+        // is this message is just a function call
+        if (isFunctionMessageAtStart(output)) {
           isFunctionCall = true;
         }
       },
@@ -184,41 +245,19 @@ export const chatMessage: StateCreator<
 
     toggleChatLoading(false, undefined, t('generateMessage(end)') as string);
 
-    return { isFunctionCall };
-  },
-
-  realFetchAIResponse: async (messages, userMessageId) => {
-    const { dispatchMessage, generateMessage, triggerFunctionCall, activeTopicId } = get();
-
-    const { model } = agentSelectors.currentAgentConfig(get());
+    // also exist message like this: 请稍等，我帮您查询一下。{"function_call": {"name": "plugin-identifier____recommendClothes____standalone", "arguments": "{\n "mood": "",\n "gender": "man"\n}"}}
+    if (!isFunctionCall) {
+      const { content, valid } = testFunctionMessageAtEnd(output);
 
-    // 添加一个空的信息用于放置 ai 响应，注意顺序不能反
-    // 因为如果顺序反了，messages 中将包含新增的 ai message
-    const mid = nanoid();
-
-    dispatchMessage({
-      id: mid,
-      message: LOADING_FLAT,
-      parentId: userMessageId,
-      role: 'assistant',
-      type: 'addMessage',
-    });
-
-    // 如果有 activeTopicId，则添加 topicId
-    if (activeTopicId) {
-      dispatchMessage({ id: mid, key: 'topicId', type: 'updateMessage', value: activeTopicId });
+      // if fc at end, replace the message
+      if (valid) {
+        isFunctionCall = true;
+        functionCallAtEnd = true;
+        functionCallContent = content;
+      }
     }
 
-    // 为模型添加 fromModel 的额外信息
-    dispatchMessage({ id: mid, key: 'fromModel', type: 'updateMessageExtra', value: model });
-
-    // 生成 ai message
-    const { isFunctionCall } = await generateMessage(messages, mid);
-
-    // 如果是 function，则发送函数调用方法
-    if (isFunctionCall) {
-      triggerFunctionCall(mid);
-    }
+    return { content: output, functionCallAtEnd, functionCallContent, isFunctionCall };
   },
 
   resendMessage: async (messageId) => {
@@ -254,17 +293,17 @@ export const chatMessage: StateCreator<
 
     if (contextMessages.length <= 0) return;
 
-    const { realFetchAIResponse } = get();
+    const { coreProcessMessage } = get();
 
     const latestMsg = contextMessages.filter((s) => s.role === 'user').at(-1);
 
     if (!latestMsg) return;
 
-    await realFetchAIResponse(contextMessages, latestMsg.id);
+    await coreProcessMessage(contextMessages, latestMsg.id);
   },
 
   sendMessage: async (message) => {
-    const { dispatchMessage, realFetchAIResponse, activeTopicId } = get();
+    const { dispatchMessage, coreProcessMessage, activeTopicId } = get();
     const session = sessionSelectors.currentSession(get());
     if (!session || !message) return;
 
@@ -279,7 +318,7 @@ export const chatMessage: StateCreator<
     // Get the current messages to generate AI response
     const messages = chatSelectors.currentChats(get());
 
-    await realFetchAIResponse(messages, userId);
+    await coreProcessMessage(messages, userId);
 
     // check activeTopic and then auto create topic
     const chats = chatSelectors.currentChats(get());
@@ -308,58 +347,4 @@ export const chatMessage: StateCreator<
       set({ abortController: undefined, chatLoadingId: undefined }, false, action);
     }
   },
-
-  triggerFunctionCall: async (id) => {
-    const { dispatchMessage, realFetchAIResponse, toggleChatLoading } = get();
-    const session = sessionSelectors.currentSession(get());
-
-    if (!session) return;
-
-    const message = session.chats[id];
-    if (!message) return;
-
-    let payload: PluginRequestPayload = { apiName: '', identifier: '' };
-    // 识别到内容是 function_call 的情况下
-    // 将 function_call 转换为 plugin request payload
-    if (message.content) {
-      const { function_call } = JSON.parse(message.content) as {
-        function_call: OpenAIFunctionCall;
-      };
-
-      const [identifier, apiName] = function_call.name.split(PLUGIN_SCHEMA_SEPARATOR);
-      payload = { apiName, arguments: function_call.arguments, identifier };
-
-      dispatchMessage({ id, key: 'plugin', type: 'updateMessage', value: payload });
-      dispatchMessage({ id, key: 'content', type: 'updateMessage', value: '' });
-    } else {
-      if (message.plugin) {
-        payload = message.plugin;
-      }
-    }
-
-    if (!payload.apiName) return;
-
-    dispatchMessage({ id, key: 'role', type: 'updateMessage', value: 'function' });
-    dispatchMessage({ id, key: 'name', type: 'updateMessage', value: payload.identifier });
-    dispatchMessage({ id, key: 'plugin', type: 'updateMessage', value: payload });
-
-    let data: string;
-    try {
-      const abortController = toggleChatLoading(true, id);
-      data = await fetchPlugin(payload, { signal: abortController?.signal });
-    } catch (error) {
-      dispatchMessage({ id, key: 'error', type: 'updateMessage', value: error });
-
-      data = '';
-    }
-    toggleChatLoading(false);
-    // 如果报错则结束了
-    if (!data) return;
-
-    dispatchMessage({ id, key: 'content', type: 'updateMessage', value: data });
-
-    const chats = chatSelectors.currentChats(get());
-
-    await realFetchAIResponse(chats, message.id);
-  },
 });
diff --git a/src/store/session/slices/chat/actions/plugin.ts b/src/store/session/slices/chat/actions/plugin.ts
new file mode 100644
index 000000000000..e694ff1a796a
--- /dev/null
+++ b/src/store/session/slices/chat/actions/plugin.ts
@@ -0,0 +1,109 @@
+import { PluginRequestPayload } from '@lobehub/chat-plugin-sdk';
+import { StateCreator } from 'zustand/vanilla';
+
+import { PLUGIN_SCHEMA_SEPARATOR } from '@/const/plugin';
+import { fetchPlugin } from '@/services/plugin';
+import { SessionStore } from '@/store/session';
+import { OpenAIFunctionCall } from '@/types/chatMessage';
+import { setNamespace } from '@/utils/storeDebug';
+
+import { sessionSelectors } from '../../session/selectors';
+import { chatSelectors } from '../selectors';
+
+const t = setNamespace('chat/plugin');
+
+/**
+ * 插件方法
+ */
+export interface ChatPluginAction {
+  fillPluginMessageContent: (id: string, content: string) => Promise<void>;
+  runPluginDefaultType: (id: string, payload: any) => Promise<void>;
+  triggerFunctionCall: (id: string) => Promise<void>;
+  updatePluginState: (id: string, key: string, value: any) => void;
+}
+
+export const chatPlugin: StateCreator<
+  SessionStore,
+  [['zustand/devtools', never]],
+  [],
+  ChatPluginAction
+> = (set, get) => ({
+  fillPluginMessageContent: async (id, content) => {
+    const { dispatchMessage, coreProcessMessage } = get();
+
+    dispatchMessage({ id, key: 'content', type: 'updateMessage', value: content });
+
+    const chats = chatSelectors.currentChats(get());
+    await coreProcessMessage(chats, id);
+  },
+  runPluginDefaultType: async (id, payload) => {
+    const { dispatchMessage, coreProcessMessage, toggleChatLoading } = get();
+    let data: string;
+    try {
+      const abortController = toggleChatLoading(true, id, t('fetchPlugin') as string);
+      data = await fetchPlugin(payload, { signal: abortController?.signal });
+    } catch (error) {
+      dispatchMessage({ id, key: 'error', type: 'updateMessage', value: error });
+
+      data = '';
+    }
+    toggleChatLoading(false);
+    // 如果报错则结束了
+    if (!data) return;
+
+    dispatchMessage({ id, key: 'content', type: 'updateMessage', value: data });
+
+    const chats = chatSelectors.currentChats(get());
+    await coreProcessMessage(chats, id);
+  },
+  triggerFunctionCall: async (id) => {
+    const { dispatchMessage, runPluginDefaultType } = get();
+    const session = sessionSelectors.currentSession(get());
+
+    if (!session) return;
+
+    const message = session.chats[id];
+    if (!message) return;
+
+    let payload: PluginRequestPayload = { apiName: '', identifier: '' };
+
+    // 识别到内容是 function_call 的情况下
+    // 将 function_call 转换为 plugin request payload
+    if (message.content) {
+      const { function_call } = JSON.parse(message.content) as {
+        function_call: OpenAIFunctionCall;
+      };
+
+      const [identifier, apiName, type] = function_call.name.split(PLUGIN_SCHEMA_SEPARATOR);
+
+      payload = {
+        apiName,
+        arguments: function_call.arguments,
+        identifier,
+        type: type ?? 'default',
+      };
+
+      dispatchMessage({ id, key: 'plugin', type: 'updateMessage', value: payload });
+      dispatchMessage({ id, key: 'content', type: 'updateMessage', value: '' });
+    } else {
+      if (message.plugin) {
+        payload = message.plugin;
+      }
+    }
+
+    if (!payload.apiName) return;
+
+    dispatchMessage({ id, key: 'role', type: 'updateMessage', value: 'function' });
+    dispatchMessage({ id, key: 'name', type: 'updateMessage', value: payload.identifier });
+    dispatchMessage({ id, key: 'plugin', type: 'updateMessage', value: payload });
+
+    if (payload.type === 'standalone') {
+      // nothing to do
+    } else runPluginDefaultType(id, payload);
+  },
+  updatePluginState: (id, key, value) => {
+    const { dispatchMessage } = get();
+
+    dispatchMessage({ id, key, type: 'updatePluginState', value });
+  },
+});
diff --git a/src/store/session/slices/chat/reducers/message.ts b/src/store/session/slices/chat/reducers/message.ts
index 1d7be2252f03..558e7140bd24 100644
--- a/src/store/session/slices/chat/reducers/message.ts
+++ b/src/store/session/slices/chat/reducers/message.ts
@@ -1,8 +1,10 @@
+import isEqual from 'fast-deep-equal';
 import { produce } from 'immer';
 
 import { ChatMessage, ChatMessageMap } from '@/types/chatMessage';
 import { LLMRoleType } from '@/types/llm';
 import { MetaData } from '@/types/meta';
+import { merge } from '@/utils/merge';
 import { nanoid } from '@/utils/uuid';
 
 interface AddMessage {
@@ -38,12 +40,20 @@ interface UpdateMessageExtra {
   value: any;
 }
 
+interface UpdatePluginState {
+  id: string;
+  key: string;
+  type: 'updatePluginState';
+  value: any;
+}
+
 export type MessageDispatch =
   | AddMessage
   | DeleteMessage
   | ResetMessages
   | UpdateMessage
-  | UpdateMessageExtra;
+  | UpdateMessageExtra
+  | UpdatePluginState;
 
 export const messagesReducer = (
   state: ChatMessageMap,
@@ -101,6 +111,26 @@ export const messagesReducer = (
       });
     }
 
+    case 'updatePluginState': {
+      return produce(state, (draftState) => {
+        const { id, key, value } = payload;
+        const message = draftState[id];
+        if (!message) return;
+
+        let newState;
+        if (!message.pluginState) {
+          newState = { [key]: value } as any;
+        } else {
+          newState = merge(message.pluginState, { [key]: value });
+        }
+
+        if (isEqual(message.pluginState, newState)) return;
+
+        message.pluginState = newState;
+        message.updateAt = Date.now();
+      });
+    }
+
     case 'resetMessages': {
       return produce(state, (draftState) => {
         const { topicId } = payload;
diff --git a/src/store/session/slices/chat/selectors/chat.ts b/src/store/session/slices/chat/selectors/chat.ts
index aef599b6ba7d..feed9c54ef83 100644
--- a/src/store/session/slices/chat/selectors/chat.ts
+++ b/src/store/session/slices/chat/selectors/chat.ts
@@ -1,6 +1,6 @@
+import { LobePluginType } from '@lobehub/chat-plugin-sdk';
 import { t } from 'i18next';
 
-import { FunctionCallProps } from '@/app/chat/features/Conversation/ChatList/Plugins/FunctionCall';
 import { DEFAULT_INBOX_AVATAR, DEFAULT_USER_AVATAR } from '@/const/meta';
 import { INBOX_SESSION_ID } from '@/const/session';
 import { useGlobalStore } from '@/store/global';
@@ -92,22 +92,19 @@ export const chatsMessageString = (s: SessionStore): string => {
   return chats.map((m) => m.content).join('');
 };
 
-export const getFunctionMessageParams =
-  (
-    s: SessionStore,
-  ): ((
-    props: Pick<ChatMessage, 'plugin' | 'function_call' | 'content' | 'id'>,
-  ) => FunctionCallProps) =>
-  ({ plugin, function_call, content, id }) => {
-    const itemId = plugin?.identifier || function_call?.name;
-    const command = plugin ?? function_call;
-    const args = command?.arguments;
-
-    return {
-      arguments: args,
-      command,
-      content,
-      id: itemId,
-      loading: id === s.chatLoadingId,
-    };
-  };
+export const getFunctionMessageProps =
+  ({ plugin, content, id }: Pick<ChatMessage, 'plugin' | 'content' | 'id'>) =>
+  (s: SessionStore) => ({
+    arguments: plugin?.arguments,
+    command: plugin,
+    content,
+    id: plugin?.identifier,
+    loading: id === s.chatLoadingId,
+    type: plugin?.type as LobePluginType,
+  });
+
+export const getMessageById = (id: string) => (s: SessionStore) => {
+  for (const e of Object.values(s.sessions)) {
+    if (e.chats[id]) return e.chats[id];
+  }
+};
diff --git a/src/store/session/slices/chat/selectors/index.ts b/src/store/session/slices/chat/selectors/index.ts
index 89260404d1bc..d55b3001ac57 100644
--- a/src/store/session/slices/chat/selectors/index.ts
+++ b/src/store/session/slices/chat/selectors/index.ts
@@ -4,7 +4,8 @@ import {
   currentChatsWithGuideMessage,
   currentChatsWithHistoryConfig,
   getChatsById,
-  getFunctionMessageParams,
+  getFunctionMessageProps,
+  getMessageById,
 } from './chat';
 import { currentTopics, getTopicMessages } from './topic';
 
@@ -14,7 +15,8 @@ export const chatSelectors = {
   currentChatsWithGuideMessage,
   currentChatsWithHistoryConfig,
   getChatsById,
-  getFunctionMessageParams,
+  getFunctionMessageProps,
+  getMessageById,
 };
 
 export const topicSelectors = {
diff --git a/src/types/chatMessage.ts b/src/types/chatMessage.ts
index b4ad09226923..6159df3fda75 100644
--- a/src/types/chatMessage.ts
+++ b/src/types/chatMessage.ts
@@ -46,6 +46,7 @@ export interface ChatMessage extends BaseDataModel {
   parentId?: string;
 
   plugin?: PluginRequestPayload;
+  pluginState?: any;
 
   // 引用
   quotaId?: string;
diff --git a/src/utils/message.ts b/src/utils/message.ts
index 8c338a6a582a..9295de007f66 100644
--- a/src/utils/message.ts
+++ b/src/utils/message.ts
@@ -1,9 +1,16 @@
 import { FUNCTION_MESSAGE_FLAG } from '@/const/message';
 
-export const isFunctionMessage = (content: string) => {
+export const isFunctionMessageAtStart = (content: string) => {
   return content.startsWith(FUNCTION_MESSAGE_FLAG);
 };
 
+export const testFunctionMessageAtEnd = (content: string) => {
+  const regExp = /{"function_call":.*?}}/;
+  const match = content.match(regExp);
+
+  return { content: match ? match[0] : '', valid: match };
+};
+
 // export const createFunctionCallMessage = () => {
 //   return [
 //     {