@lobehub/chat 0.94.4 → 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,66 @@
 
 # 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>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fallback agent market index to en when not find correct locale.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fallback agent market index to en when not find correct locale, closes [#355](https://github.com/lobehub/lobe-chat/issues/355) ([7a45ab4](https://github.com/lobehub/lobe-chat/commit/7a45ab4))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.94.4](https://github.com/lobehub/lobe-chat/compare/v0.94.3...v0.94.4)
 
 <sup>Released on **2023-10-21**</sup>

package/CONTRIBUTING.md

@@ -0,0 +1,88 @@
+# Lobe Chat - Contributing Guide 🌟
+
+We're thrilled that you want to contribute to Lobe Chat, the future of communication! 😄
+
+Lobe Chat is an open-source project, and we welcome your collaboration. Before you jump in, let's make sure you're all set to contribute effectively and have loads of fun along the way!
+
+## Table of Contents
+
+- [Fork the Repository](#fork-the-repository)
+- [Clone Your Fork](#clone-your-fork)
+- [Create a New Branch](#create-a-new-branch)
+- [Code Like a Wizard](#code-like-a-wizard)
+- [Committing Your Work](#committing-your-work)
+- [Sync with Upstream](#sync-with-upstream)
+- [Open a Pull Request](#open-a-pull-request)
+- [Review and Collaboration](#review-and-collaboration)
+- [Celebrate 🎉](#celebrate-)
+
+## Fork the Repository
+
+🍴 Fork this repository to your GitHub account by clicking the "Fork" button at the top right. This creates a personal copy of the project you can work on.
+
+## Clone Your Fork
+
+📦 Clone your forked repository to your local machine using the `git clone` command:
+
+```bash
+git clone https://github.com/YourUsername/lobe-chat.git
+```
+
+## Create a New Branch
+
+🌿 Create a new branch for your contribution. This helps keep your work organized and separate from the main codebase.
+
+```bash
+git checkout -b your-branch-name
+```
+
+Choose a meaningful branch name related to your work. It makes collaboration easier!
+
+## Code Like a Wizard
+
+🧙‍♀️ Time to work your magic! Write your code, fix bugs, or add new features. Be sure to follow our project's coding style. You can check if your code adheres to our style using:
+
+```bash
+yarn lint
+```
+
+This adds a bit of enchantment to your coding experience! ✨
+
+## Committing Your Work
+
+📝 Ready to save your progress? Commit your changes to your branch.
+
+```bash
+git add .
+git commit -m "Your meaningful commit message"
+```
+
+Please keep your commits focused and clear. And remember to be kind to your fellow contributors; keep your commits concise.
+
+## Sync with Upstream
+
+⚙️ Periodically, sync your forked repository with the original (upstream) repository to stay up-to-date with the latest changes.
+
+```bash
+git remote add upstream https://github.com/lobehub/lobe-chat.git
+git fetch upstream
+git merge upstream/main
+```
+
+This ensures you're working on the most current version of Lobe Chat. Stay fresh! 💨
+
+## Open a Pull Request
+
+🚀 Time to share your contribution! Head over to the original Lobe Chat repository and open a Pull Request (PR). Our maintainers will review your work.
+
+## Review and Collaboration
+
+👓 Your PR will undergo thorough review and testing. The maintainers will provide feedback, and you can collaborate to make your contribution even better. We value teamwork!
+
+## Celebrate 🎉
+
+🎈 Congratulations! Your contribution is now part of Lobe Chat. 🥳
+
+Thank you for making Lobe Chat even more magical. We can't wait to see what you create! 🌠
+
+Happy Coding! 🚀🦄

package/package.json

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