@lobehub/chat 0.94.5 → 0.95.0

package/.github/workflows/pr-welcome.yml

@@ -1,7 +1,7 @@
 name: PR Welcome
 
 on:
-  pull_request:
+  pull_request_target:
     types:
       - closed
 

package/CHANGELOG.md

@@ -2,6 +2,41 @@
 
 # Changelog
 
+## [Version 0.95.0](https://github.com/lobehub/lobe-chat/compare/v0.94.5...v0.95.0)
+
+<sup>Released on **2023-10-24**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: 优化 plugin 文件夹命名以支持 standalone 类型的插件.
+
+#### ✨ Features
+
+- **misc**: Support function call at message end, support plugin settings modal, support plugin state and settings.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: 优化 plugin 文件夹命名以支持 standalone 类型的插件 ([98860a8](https://github.com/lobehub/lobe-chat/commit/98860a8))
+
+#### What's improved
+
+- **misc**: Support function call at message end, closes [#357](https://github.com/lobehub/lobe-chat/issues/357) ([e195fdb](https://github.com/lobehub/lobe-chat/commit/e195fdb))
+- **misc**: Support plugin settings modal ([f47b6fa](https://github.com/lobehub/lobe-chat/commit/f47b6fa))
+- **misc**: Support plugin state and settings ([10829a4](https://github.com/lobehub/lobe-chat/commit/10829a4))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.94.5](https://github.com/lobehub/lobe-chat/compare/v0.94.4...v0.94.5)
 
 <sup>Released on **2023-10-22**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.94.5",
+  "version": "0.95.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",
@@ -76,7 +76,7 @@
     "ahooks": "^3",
     "ai": "^2",
     "antd": "^5",
-    "antd-style": "^3.5",
+    "antd-style": "^3",
     "brotli-wasm": "^1",
     "chroma-js": "^2",
     "copy-to-clipboard": "^3",
@@ -122,7 +122,7 @@
     "zustand-utils": "^1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17",
+    "@commitlint/cli": "^18",
     "@lobehub/i18n-cli": "latest",
     "@lobehub/lint": "latest",
     "@next/bundle-analyzer": "^13",
@@ -141,7 +141,7 @@
     "@types/uuid": "^9",
     "@umijs/lint": "^4",
     "@vitest/coverage-v8": "latest",
-    "commitlint": "^17",
+    "commitlint": "^18",
     "consola": "^3",
     "dpdm": "^3",
     "eslint": "^8",

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

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

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

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

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

package/src/app/chat/features/Conversation/ChatList/Plugins/{FunctionCall.tsx → 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;

package/src/app/chat/features/Conversation/ChatList/Plugins/{IFrameRender → 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);
     }

package/src/app/chat/features/Conversation/ChatList/Plugins/{PluginMessage.tsx → 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;

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