✨ feat: support standalone plugin

src/client/const.ts

@@ -1,5 +1,9 @@
 export enum PluginChannel {
   fetchPluginMessage = 'lobe-chat:fetch-plugin-message',
+  fetchPluginState = 'lobe-chat:fetch-plugin-state',
+  fillStandalonePluginContent = 'lobe-chat:fill-plugin-content',
+  initStandalonePlugin = 'lobe-chat:init-standalone-plugin',
   pluginReadyForRender = 'lobe-chat:plugin-ready-for-render',
   renderPlugin = 'lobe-chat:render-plugin',
+  updatePluginState = 'lobe-chat:update-plugin-state',
 }

src/client/fetch/index.ts

@@ -0,0 +1,2 @@
+export * from './message';
+export * from './pluginState';

src/client/message.ts → src/client/fetch/message.ts

@@ -1,5 +1,5 @@
-import { PluginChannel } from './const';
-import { onReceiveData } from './utils';
+import { PluginChannel } from '../const';
+import { onReceiveData } from '../utils';
 
 export const fetchPluginMessage = <T = any>() =>
   new Promise<T>((resolve) => {

src/client/fetch/pluginState.ts

@@ -0,0 +1,16 @@
+import { PluginChannel } from '../const';
+import { onReceiveData } from '../utils';
+
+export const fetchPluginState = <T = any>() =>
+  new Promise<T>((resolve) => {
+    const receiverData = (e: MessageEvent) => {
+      onReceiveData(e, (data) => {
+        resolve(data.content as T);
+        window.removeEventListener('message', receiverData);
+      });
+    };
+
+    window.addEventListener('message', receiverData);
+
+    top?.postMessage({ type: PluginChannel.fetchPluginState }, '*');
+  });

src/client/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useOnStandalonePluginInit';
+export * from './useWatchPluginMessage';

src/client/hooks/useOnStandalonePluginInit.ts

@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+
+import { PluginChannel } from '@/client';
+import { PluginRequestPayload } from '@/schema/market';
+
+interface PluginPayload<T = any> {
+  args?: T;
+  func: string;
+}
+
+export const useOnStandalonePluginInit = <T = any>(
+  callback: (payload: PluginPayload<T>) => void,
+) => {
+  const fn = (e: MessageEvent) => {
+    if (e.data.type === PluginChannel.initStandalonePlugin) {
+      const payload = e.data.props as PluginRequestPayload;
+      const func = payload.apiName;
+      const args = JSON.parse(payload.arguments || '{}');
+      callback({ args, func });
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('message', fn);
+
+    top?.postMessage({ type: PluginChannel.pluginReadyForRender }, '*');
+    return () => {
+      window.removeEventListener('message', fn);
+    };
+  }, []);
+};

src/client/useWatchPluginMessage.ts → src/client/hooks/useWatchPluginMessage.ts

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 
-import { PluginChannel } from './const';
-import { PluginRenderProps } from './type';
-import { onReceiveData } from './utils';
+import { PluginChannel } from '../const';
+import { PluginRenderProps } from '../type';
+import { onReceiveData } from '../utils';
 
 export const useWatchPluginMessage = <T = any>() => {
   const [result, setData] = useState<{ data: T; loading: boolean }>({

src/client/index.ts

@@ -1,4 +1,5 @@
 export * from './const';
-export { fetchPluginMessage } from './message';
+export * from './fetch';
+export * from './hooks';
+export * from './postMessage';
 export * from './type';
-export * from './useWatchPluginMessage';

src/client/postMessage.ts

@@ -0,0 +1,9 @@
+import { PluginChannel } from './const';
+
+export const postToFillPluginContent = (content: any) => {
+  top?.postMessage({ content, type: PluginChannel.fillStandalonePluginContent }, '*');
+};
+
+export const postToUpdatePluginState = (state: any) => {
+  top?.postMessage({ state, type: PluginChannel.updatePluginState }, '*');
+};

src/schema/market.ts

@@ -26,6 +26,7 @@ export const pluginRequestPayloadSchema = z.object({
   identifier: z.string(),
   indexUrl: z.string().optional(),
   manifest: pluginManifestSchema.optional(),
+  type: z.string().optional(),
 });
 
 export type PluginRequestPayload = z.infer<typeof pluginRequestPayloadSchema>;

src/types/manifest.ts

@@ -1,5 +1,6 @@
 import { JSONSchema7 } from 'json-schema';
 
+export type LobePluginType = 'default' | 'standalone';
 /**
  * Plugin Schema
  * @desc the schema of plugin, de´scribe the api input of the function
@@ -48,7 +49,7 @@ export interface LobeChatPluginManifest {
    * plugin runtime type
    * @default default
    */
-  type?: 'standalone' | 'default';
+  type?: LobePluginType;
   /**
    * plugin ui on user side
    * @desc The type of rendering for the plugin