✨ feat: support triggerAIMessage and createAssistantMessage

Author: arvinxx

src/client/const.ts

@@ -1,16 +1,21 @@
 export enum PluginChannel {
+  createAssistantMessage = 'lobe-chat:create-assistant-message',
+
   fetchPluginMessage = 'lobe-chat:fetch-plugin-message',
   fetchPluginSettings = 'lobe-chat:fetch-plugin-settings',
-  fetchPluginState = 'lobe-chat:fetch-plugin-state',
 
+  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',
   renderPluginSettings = 'lobe-chat:render-plugin-settings',
   renderPluginState = 'lobe-chat:render-plugin-state',
 
+  triggerAIMessage = 'lobe-chat:trigger-ai-message',
+
   updatePluginSettings = 'lobe-chat:update-plugin-settings',
   updatePluginState = 'lobe-chat:update-plugin-state',
 }

src/client/deprecatedOnV2.ts

@@ -0,0 +1,33 @@
+import { lobeChat } from './lobeChat';
+
+/**
+ * @deprecated
+ */
+export const postToFillPluginContent = lobeChat.setPluginMessage;
+
+/**
+ * @deprecated
+ */
+export const postToUpdatePluginState = lobeChat.setPluginState;
+
+/**
+ * @deprecated
+ */
+export const postToUpdatePluginSettings = lobeChat.setPluginSettings;
+
+/**
+ * @deprecated
+ */
+export const fetchPluginState = lobeChat.getPluginState;
+/**
+ * @deprecated
+ */
+export const fetchPluginMessage = lobeChat.getPluginMessage;
+/**
+ * @deprecated
+ */
+export const fetchPluginPayload = lobeChat.getPluginPayload;
+/**
+ * @deprecated
+ */
+export const fetchPluginSettings = lobeChat.getPluginSettings;

src/client/fetch/index.ts

@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 
-import { PluginPayload, fetchPluginPayload } from '../fetch/pluginPayload';
+import { PluginPayload, lobeChat } from '@/client';
 
 export const useOnStandalonePluginInit = <T = any>(
   callback: (payload: PluginPayload<T>) => void,
 ) => {
   useEffect(() => {
-    fetchPluginPayload().then((e) => {
+    lobeChat.getPluginPayload().then((e) => {
       if (!e) return;
 
       callback(e);

src/client/fetch/message.ts

@@ -1,13 +1,12 @@
 import { useCallback, useEffect, useState } from 'react';
 
-import { fetchPluginSettings } from '@/client/fetch';
-import { postToUpdatePluginSettings } from '@/client/postMessage';
+import { lobeChat } from '@/client';
 
 export const usePluginSettings = <T>(initialValue: T) => {
   const [value, setValue] = useState(initialValue);
 
   useEffect(() => {
-    fetchPluginSettings().then((e) => {
+    lobeChat.getPluginSettings().then((e) => {
       if (!e) return;
 
       setValue(e);
@@ -16,7 +15,7 @@ export const usePluginSettings = <T>(initialValue: T) => {
 
   const updateValue = useCallback((value: T) => {
     setValue(value);
-    postToUpdatePluginSettings(value);
+    lobeChat.setPluginSettings(value);
   }, []);
 
   return [value, updateValue] as const;

src/client/fetch/pluginPayload.ts

@@ -1,13 +1,12 @@
 import { useCallback, useEffect, useState } from 'react';
 
-import { fetchPluginState } from '@/client/fetch';
-import { postToUpdatePluginState } from '@/client/postMessage';
+import { lobeChat } from '@/client';
 
 export const usePluginState = <T>(key: string, initialValue: T) => {
   const [value, setValue] = useState(initialValue);
 
   useEffect(() => {
-    fetchPluginState(key).then((e) => {
+    lobeChat.getPluginState(key).then((e) => {
       if (!e) return;
 
       setValue(e);
@@ -17,7 +16,7 @@ export const usePluginState = <T>(key: string, initialValue: T) => {
   const updateValue = useCallback(
     (value: T) => {
       setValue(value);
-      postToUpdatePluginState(key, value);
+      lobeChat.setPluginState(key, value);
     },
     [key],
   );

src/client/fetch/pluginSettings.ts

@@ -1,6 +1,5 @@
 export * from './const';
-export * from './fetch';
+export * from './deprecatedOnV2';
 export * from './hooks';
 export * from './lobeChat';
-export * from './postMessage';
 export * from './type';

src/client/fetch/pluginState.ts

@@ -1,26 +1,130 @@
-import {
-  fetchPluginMessage,
-  fetchPluginPayload,
-  fetchPluginSettings,
-  fetchPluginState,
-} from './fetch';
-import {
-  postToFillPluginContent,
-  postToUpdatePluginSettings,
-  postToUpdatePluginState,
-} from './postMessage';
+import { PluginChannel } from '@/client/const';
+import { PluginRenderProps } from '@/client/type';
+import { PluginRequestPayload } from '@/schema/market';
+
+/**
+ * Represents a plugin payload.
+ *
+ * @template T - Type of the arguments.
+ * @property {T} [arguments] - The arguments for the plugin.
+ * @property {string} name - The name of the api payload
+ * @property {any} settings - The settings for the plugin.
+ * @property {any} [state] - The state of the current plugin message
+ */
+export interface PluginPayload<T = any> {
+  arguments?: T;
+  name: string;
+  settings?: any;
+  state?: any;
+}
 
 class LobeChat {
-  getPluginPayload = fetchPluginPayload;
+  getPluginPayload = <T = any>() =>
+    new Promise<PluginPayload<T>>((resolve) => {
+      if (typeof window === 'undefined') {
+        resolve(undefined as any);
+        return;
+      }
+      const receiverData = (e: MessageEvent) => {
+        if (e.data.type === PluginChannel.initStandalonePlugin) {
+          // TODO: drop e.data.props in v2
+          const payload: PluginRequestPayload = e.data.payload || e.data.props;
+          const func = payload.apiName;
+          const args = JSON.parse(payload.arguments || '{}');
+          resolve({
+            arguments: args,
+            name: func,
+            settings: e.data.settings,
+            state: e.data.state,
+          });
+
+          window.removeEventListener('message', receiverData);
+        }
+      };
+
+      window.addEventListener('message', receiverData);
+
+      top?.postMessage({ type: PluginChannel.pluginReadyForRender }, '*');
+    });
+
+  getPluginSettings = <T = any>() =>
+    new Promise<T>((resolve) => {
+      if (typeof window === 'undefined') {
+        resolve(undefined as any);
+        return;
+      }
+
+      const receiverData = (e: MessageEvent) => {
+        if (e.data.type === PluginChannel.renderPluginSettings) {
+          resolve(e.data.value);
+
+          window.removeEventListener('message', receiverData);
+        }
+      };
+
+      window.addEventListener('message', receiverData);
+
+      top?.postMessage({ type: PluginChannel.fetchPluginSettings }, '*');
+    });
+
+  setPluginSettings = (settings: any) => {
+    top?.postMessage({ type: PluginChannel.updatePluginSettings, value: settings }, '*');
+  };
+
+  getPluginMessage = <T = any>() =>
+    new Promise<T>((resolve) => {
+      if (typeof window === 'undefined') {
+        resolve(undefined as any);
+        return;
+      }
+      const receiverData = (e: MessageEvent) => {
+        if (e.data.type === PluginChannel.renderPlugin) {
+          const props = e.data.props as PluginRenderProps<T>;
+          resolve(props.content as T);
+
+          window.removeEventListener('message', receiverData);
+        }
+      };
+
+      window.addEventListener('message', receiverData);
+
+      top?.postMessage({ type: PluginChannel.fetchPluginMessage }, '*');
+    });
+
+  setPluginMessage = (content: any) => {
+    top?.postMessage({ content, type: PluginChannel.fillStandalonePluginContent }, '*');
+  };
+
+  getPluginState = <T = any>(key: string) =>
+    new Promise<T>((resolve) => {
+      if (typeof window === 'undefined') {
+        resolve(undefined as any);
+        return;
+      }
+
+      const receiverData = (e: MessageEvent) => {
+        if (e.data.type === PluginChannel.renderPluginState && e.data.key === key) {
+          resolve(e.data.value);
+
+          window.removeEventListener('message', receiverData);
+        }
+      };
+
+      window.addEventListener('message', receiverData);
 
-  getPluginSettings = fetchPluginSettings;
-  setPluginSettings = postToUpdatePluginSettings;
+      top?.postMessage({ key, type: PluginChannel.fetchPluginState }, '*');
+    });
+  setPluginState = (key: string, value: any) => {
+    top?.postMessage({ key, type: PluginChannel.updatePluginState, value }, '*');
+  };
 
-  getPluginMessage = fetchPluginMessage;
-  setPluginMessage = postToFillPluginContent;
+  triggerAIMessage = (id: string) => {
+    top?.postMessage({ id, type: PluginChannel.triggerAIMessage }, '*');
+  };
 
-  getPluginState = fetchPluginState;
-  setPluginState = postToUpdatePluginState;
+  createAssistantMessage = (content: string) => {
+    top?.postMessage({ content, type: PluginChannel.createAssistantMessage }, '*');
+  };
 }
 
 export const lobeChat = new LobeChat();