@lobehub/chat 0.104.0 → 0.105.0

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+## [Version 0.105.0](https://github.com/lobehub/lobe-chat/compare/v0.104.0...v0.105.0)
+
+<sup>Released on **2023-11-22**</sup>
+
+#### ✨ Features
+
+- **misc**: Standalone pluginn can get more arguments on init.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Standalone pluginn can get more arguments on init, closes [#498](https://github.com/lobehub/lobe-chat/issues/498) ([a7624f5](https://github.com/lobehub/lobe-chat/commit/a7624f5))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.104.0](https://github.com/lobehub/lobe-chat/compare/v0.103.1...v0.104.0)
 
 <sup>Released on **2023-11-21**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.104.0",
+  "version": "0.105.0",
   "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",

package/src/app/api/config.test.ts

@@ -16,12 +16,16 @@ describe('getPreferredRegion', () => {
 
   it('returns default value when get config error', () => {
     const originalProcess = global.process;
+    const originalError = console.error;
     // @ts-ignore
     global.process = undefined;
+    console.error = () => {};
+
     const preferredRegion = getPreferredRegion();
     expect(preferredRegion).toBe('auto');
 
     global.process = originalProcess;
+    console.error = originalError;
   });
 
   it('return default value when preferredRegion is empty', () => {

package/src/app/chat/features/Conversation/ChatList/Plugins/Render/StandaloneType/Iframe.tsx

@@ -23,6 +23,11 @@ import {
   sendPluginStateToPlugin,
 } from '../utils/postMessage';
 
+// just to simplify code a little, don't use this pattern everywhere
+const getSettings = (identifier: string) =>
+  pluginSelectors.getPluginSettingsById(identifier)(usePluginStore.getState());
+const getMessage = (id: string) => chatSelectors.getMessageById(id)(useSessionStore.getState());
+
 interface IFrameRenderProps {
   height?: number;
   id: string;
@@ -39,8 +44,13 @@ const IFrameRender = memo<IFrameRenderProps>(({ url, id, payload, width = 600, h
   // when payload change，send content to plugin
   useOnPluginReadyForInteraction(() => {
     const iframeWin = iframeRef.current?.contentWindow;
+
     if (iframeWin && payload) {
-      sendPayloadToPlugin(iframeWin, payload);
+      const settings = getSettings(payload.identifier);
+      const message = getMessage(id);
+      const state = message?.pluginState;
+
+      sendPayloadToPlugin(iframeWin, { payload, settings, state });
     }
   }, [payload]);
 
@@ -74,7 +84,7 @@ const IFrameRender = memo<IFrameRenderProps>(({ url, id, payload, width = 600, h
     const iframeWin = iframeRef.current?.contentWindow;
 
     if (iframeWin) {
-      const message = chatSelectors.getMessageById(id)(useSessionStore.getState());
+      const message = getMessage(id);
       if (!message) return;
 
       sendPluginStateToPlugin(iframeWin, key, message.pluginState?.[key]);
@@ -94,9 +104,7 @@ const IFrameRender = memo<IFrameRenderProps>(({ url, id, payload, width = 600, h
     if (iframeWin) {
       if (!payload?.identifier) return;
 
-      const settings = pluginSelectors.getPluginSettingsById(payload?.identifier)(
-        usePluginStore.getState(),
-      );
+      const settings = getSettings(payload.identifier);
 
       sendPluginSettingsToPlugin(iframeWin, settings);
     }

package/src/app/chat/features/Conversation/ChatList/Plugins/Render/utils/iframeOnReady.test.ts

@@ -0,0 +1,75 @@
+import { PluginChannel } from '@lobehub/chat-plugin-sdk/client';
+import { act, renderHook } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { useOnPluginReadyForInteraction } from './iframeOnReady';
+
+describe('useOnPluginReadyForInteraction', () => {
+  const mockOnReady = vi.fn();
+
+  afterEach(() => {
+    mockOnReady.mockReset();
+    window.removeEventListener('message', expect.any(Function));
+  });
+
+  it('sets readyForRender to true when a PluginChannel.pluginReadyForRender message is received', async () => {
+    const { result } = renderHook(() => useOnPluginReadyForInteraction(mockOnReady));
+
+    expect(result.current).toBe(false); // Initially, readyForRender should be false
+
+    const event = new MessageEvent('message', {
+      data: { type: PluginChannel.pluginReadyForRender },
+    });
+
+    act(() => {
+      window.dispatchEvent(event);
+    });
+
+    expect(result.current).toBe(true); // After the event, readyForRender should be true
+  });
+
+  it('sets readyForRender to true when a PluginChannel.pluginReadyForRender message is received', async () => {
+    const { result } = renderHook(() => useOnPluginReadyForInteraction(mockOnReady));
+
+    expect(result.current).toBe(false); // Initially, readyForRender should be false
+
+    const event = new MessageEvent('message', {
+      data: { type: PluginChannel.pluginReadyForRender },
+    });
+
+    act(() => {
+      window.dispatchEvent(event);
+    });
+
+    expect(result.current).toBe(true); // After the event, readyForRender should be true
+    expect(mockOnReady).toHaveBeenCalledTimes(1); // onReady should have been called once
+  });
+
+  it('does not call onReady for non-pluginReadyForRender messages', async () => {
+    renderHook(() => useOnPluginReadyForInteraction(mockOnReady));
+
+    const event = new MessageEvent('message', {
+      data: { type: 'nonPluginReadyMessage' },
+    });
+
+    act(() => {
+      window.dispatchEvent(event);
+    });
+
+    expect(mockOnReady).not.toHaveBeenCalled();
+  });
+
+  it('cleans up message event listener on unmount', () => {
+    const { unmount } = renderHook(() => useOnPluginReadyForInteraction(mockOnReady));
+
+    unmount();
+
+    const event = new MessageEvent('message', {
+      data: { type: PluginChannel.pluginReadyForRender },
+    });
+
+    window.dispatchEvent(event);
+
+    expect(mockOnReady).not.toHaveBeenCalled();
+  });
+});

package/src/app/chat/features/Conversation/ChatList/Plugins/Render/utils/iframeOnReady.ts

@@ -20,4 +20,6 @@ export const useOnPluginReadyForInteraction = (onReady: () => void, deps: any[]
       onReady();
     }
   }, [readyForRender, ...deps]);
+
+  return readyForRender;
 };

package/src/app/chat/features/Conversation/ChatList/Plugins/Render/utils/listenToPlugin.test.ts

@@ -0,0 +1,104 @@
+import { PluginChannel } from '@lobehub/chat-plugin-sdk/client';
+import { renderHook } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import {
+  useOnPluginFetchMessage,
+  useOnPluginFetchPluginSettings,
+  useOnPluginFetchPluginState,
+  useOnPluginFillContent,
+} from './listenToPlugin';
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('useOnPluginFetchMessage', () => {
+  it('calls onRequest when a fetchPluginMessage is received', () => {
+    const mockOnRequest = vi.fn();
+    renderHook(() => useOnPluginFetchMessage(mockOnRequest));
+
+    const testData = { key: 'testData', type: PluginChannel.fetchPluginMessage };
+    const event = new MessageEvent('message', {
+      data: testData,
+    });
+
+    window.dispatchEvent(event);
+
+    expect(mockOnRequest).toHaveBeenCalledWith(testData);
+  });
+
+  it('does not call onRequest for other message types', () => {
+    const mockOnRequest = vi.fn();
+    renderHook(() => useOnPluginFetchMessage(mockOnRequest));
+
+    const event = new MessageEvent('message', {
+      data: { type: 'otherMessageType' },
+    });
+
+    window.dispatchEvent(event);
+
+    expect(mockOnRequest).not.toHaveBeenCalled();
+  });
+});
+
+describe('useOnPluginFetchPluginState', () => {
+  it('calls onRequest with the key when a fetchPluginState message is received', () => {
+    const mockOnRequest = vi.fn();
+    renderHook(() => useOnPluginFetchPluginState(mockOnRequest));
+
+    const testKey = 'testKey';
+    const event = new MessageEvent('message', {
+      data: { type: PluginChannel.fetchPluginState, key: testKey },
+    });
+
+    window.dispatchEvent(event);
+
+    expect(mockOnRequest).toHaveBeenCalledWith(testKey);
+  });
+});
+
+describe('useOnPluginFillContent', () => {
+  it('calls callback with content when a fillStandalonePluginContent message is received', () => {
+    const mockCallback = vi.fn();
+    renderHook(() => useOnPluginFillContent(mockCallback));
+
+    const testContent = 'testContent';
+    const event = new MessageEvent('message', {
+      data: { type: PluginChannel.fillStandalonePluginContent, content: testContent },
+    });
+
+    window.dispatchEvent(event);
+
+    expect(mockCallback).toHaveBeenCalledWith(testContent);
+  });
+
+  it('calls callback with JSON stringified content if content is not a string', () => {
+    const mockCallback = vi.fn();
+    renderHook(() => useOnPluginFillContent(mockCallback));
+
+    const testContent = { some: 'data' };
+    const event = new MessageEvent('message', {
+      data: { type: PluginChannel.fillStandalonePluginContent, content: testContent },
+    });
+
+    window.dispatchEvent(event);
+
+    expect(mockCallback).toHaveBeenCalledWith(JSON.stringify(testContent));
+  });
+});
+
+describe('useOnPluginFetchPluginSettings', () => {
+  it('calls onRequest when a fetchPluginSettings message is received', () => {
+    const mockOnRequest = vi.fn();
+    renderHook(() => useOnPluginFetchPluginSettings(mockOnRequest));
+
+    const event = new MessageEvent('message', {
+      data: { type: PluginChannel.fetchPluginSettings },
+    });
+
+    window.dispatchEvent(event);
+
+    expect(mockOnRequest).toHaveBeenCalled();
+  });
+});

package/src/app/chat/features/Conversation/ChatList/Plugins/Render/utils/pluginSettings.test.ts

@@ -0,0 +1,53 @@
+import { PluginChannel } from '@lobehub/chat-plugin-sdk/client';
+import { renderHook } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { useOnPluginSettingsUpdate } from './pluginSettings';
+
+describe('useOnPluginSettingsUpdate', () => {
+  const mockCallback = vi.fn();
+
+  afterEach(() => {
+    mockCallback.mockReset();
+    window.removeEventListener('message', expect.any(Function));
+  });
+
+  it('calls the callback when a PluginChannel updatePluginSettings message is received', () => {
+    renderHook(() => useOnPluginSettingsUpdate(mockCallback));
+
+    const testSettings = { theme: 'dark', notifications: true };
+    const event = new MessageEvent('message', {
+      data: { type: PluginChannel.updatePluginSettings, value: testSettings },
+    });
+
+    window.dispatchEvent(event);
+
+    expect(mockCallback).toHaveBeenCalledWith(testSettings);
+  });
+
+  it('does not call the callback for non-updatePluginSettings messages', () => {
+    renderHook(() => useOnPluginSettingsUpdate(mockCallback));
+
+    const event = new MessageEvent('message', {
+      data: { type: 'nonPluginSettingsUpdate', value: { irrelevant: true } },
+    });
+
+    window.dispatchEvent(event);
+
+    expect(mockCallback).not.toHaveBeenCalled();
+  });
+
+  it('cleans up message event listener on unmount', () => {
+    const { unmount } = renderHook(() => useOnPluginSettingsUpdate(mockCallback));
+
+    unmount();
+
+    const event = new MessageEvent('message', {
+      data: { type: PluginChannel.updatePluginSettings, value: {} },
+    });
+
+    window.dispatchEvent(event);
+
+    expect(mockCallback).not.toHaveBeenCalled();
+  });
+});

package/src/app/chat/features/Conversation/ChatList/Plugins/Render/utils/pluginState.test.ts

@@ -0,0 +1,43 @@
+import { PluginChannel } from '@lobehub/chat-plugin-sdk/client';
+import { renderHook } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { useOnPluginStateUpdate } from './pluginState';
+
+describe('useOnPluginStateUpdate', () => {
+  // Mock for the callback function to be used in tests
+  const mockCallback = vi.fn();
+
+  afterEach(() => {
+    // Reset the mock callback after each test
+    mockCallback.mockReset();
+    // Ensure no event listeners are left hanging after each test
+    window.removeEventListener('message', expect.any(Function));
+  });
+
+  it('calls the callback when a PluginChannel update message is received', () => {
+    renderHook(() => useOnPluginStateUpdate(mockCallback));
+
+    const testKey = 'testKey';
+    const testValue = 'testValue';
+    const event = new MessageEvent('message', {
+      data: { type: PluginChannel.updatePluginState, key: testKey, value: testValue },
+    });
+
+    window.dispatchEvent(event);
+
+    expect(mockCallback).toHaveBeenCalledWith(testKey, testValue);
+  });
+
+  it('does not call the callback for non-PluginChannel messages', () => {
+    renderHook(() => useOnPluginStateUpdate(mockCallback));
+
+    const event = new MessageEvent('message', {
+      data: { type: 'nonPluginMessage', key: 'key', value: 'value' },
+    });
+
+    window.dispatchEvent(event);
+
+    expect(mockCallback).not.toHaveBeenCalled();
+  });
+});

package/src/app/chat/features/Conversation/ChatList/Plugins/Render/utils/postMessage.test.ts

@@ -0,0 +1,64 @@
+import { PluginChannel } from '@lobehub/chat-plugin-sdk/client';
+import { describe, expect, it, vi } from 'vitest';
+
+import {
+  sendMessageContentToPlugin,
+  sendPayloadToPlugin,
+  sendPluginSettingsToPlugin,
+  sendPluginStateToPlugin,
+} from './postMessage';
+
+// Mock window object with a postMessage spy
+const mockWindow = {
+  postMessage: vi.fn(),
+};
+
+describe('plugin communication functions', () => {
+  it('sendMessageContentToPlugin should call window.postMessage with correct arguments', () => {
+    const props = { some: 'data' };
+    sendMessageContentToPlugin(mockWindow as unknown as Window, props);
+    expect(mockWindow.postMessage).toHaveBeenCalledWith(
+      { props, type: PluginChannel.renderPlugin },
+      '*',
+    );
+  });
+
+  it('sendPayloadToPlugin should call window.postMessage with correct arguments', () => {
+    const props = { payload: 'payload', settings: 'settings', state: 'state' };
+    sendPayloadToPlugin(mockWindow as unknown as Window, props);
+    expect(mockWindow.postMessage).toHaveBeenCalledWith(
+      {
+        type: PluginChannel.initStandalonePlugin,
+        payload: props.payload,
+        settings: props.settings,
+        state: props.state,
+        props: props.payload, // Note: This is due to the TODO in your code
+      },
+      '*',
+    );
+  });
+
+  it('sendPluginStateToPlugin should call window.postMessage with correct arguments', () => {
+    const key = 'key';
+    const value = 'value';
+    sendPluginStateToPlugin(mockWindow as unknown as Window, key, value);
+    expect(mockWindow.postMessage).toHaveBeenCalledWith(
+      { key, type: PluginChannel.renderPluginState, value },
+      '*',
+    );
+  });
+
+  it('sendPluginSettingsToPlugin should call window.postMessage with correct arguments', () => {
+    const settings = { setting1: 'value1' };
+    sendPluginSettingsToPlugin(mockWindow as unknown as Window, settings);
+    expect(mockWindow.postMessage).toHaveBeenCalledWith(
+      { type: PluginChannel.renderPluginSettings, value: settings },
+      '*',
+    );
+  });
+});
+
+// Reset the mock after each test
+afterEach(() => {
+  vi.resetAllMocks();
+});

package/src/app/chat/features/Conversation/ChatList/Plugins/Render/utils/postMessage.ts

@@ -4,8 +4,19 @@ export const sendMessageContentToPlugin = (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 sendPayloadToPlugin = (
+  window: Window,
+  props: { payload: any; settings: any; state?: any },
+) => {
+  window.postMessage(
+    {
+      type: PluginChannel.initStandalonePlugin,
+      ...props,
+      // TODO: props need to deprecated
+      props: props.payload,
+    },
+    '*',
+  );
 };
 
 export const sendPluginStateToPlugin = (window: Window, key: string, value: any) => {