@lobehub/chat 0.94.5 → 0.95.1

package/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;

package/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;

package/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;

package/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]);
+};

package/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);
+    };
+  }, []);
+};

package/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);
+    };
+  }, []);
+};

package/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);
+    };
+  }, []);
+};

package/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 }, '*');
+};

package/src/const/plugin.ts

@@ -1 +1 @@
-export const PLUGIN_SCHEMA_SEPARATOR = '--__--';
+export const PLUGIN_SCHEMA_SEPARATOR = '____';

package/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]);

package/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;

package/src/locales/default/plugin.ts

@@ -2,6 +2,8 @@ export default {
   debug: {
     arguments: '调用参数',
     function_call: '函数调用',
+    off: '关闭调试',
+    on: '查看插件调用信息',
     response: '返回结果',
   },
   dev: {
@@ -88,10 +90,9 @@ export default {
     },
   },
   loading: {
-    content: '数据获取中...',
+    content: '调用插件中...',
     plugin: '插件运行中...',
   },
-
   pluginList: '插件列表',
   plugins: {
     unknown: '插件检测中...',

package/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');
@@ -64,6 +70,12 @@ const displayPluginList = (s: PluginStoreState) =>
     title: pluginHelpers.getPluginTitle(p.meta),
   }));
 
+const hasPluginUI = (id: string) => (s: PluginStoreState) => {
+  const manifest = getPluginManifestById(id)(s);
+
+  return !!manifest?.ui;
+};
+
 export const pluginSelectors = {
   displayPluginList,
   enabledSchema,
@@ -72,6 +84,7 @@ export const pluginSelectors = {
   getPluginManifestLoadingStatus,
   getPluginMetaById,
   getPluginSettingsById,
+  hasPluginUI,
   isCustomPlugin,
   pluginList,
 };

package/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),
 });