@lobehub/chat 0.95.0 → 0.95.1

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.95.1](https://github.com/lobehub/lobe-chat/compare/v0.95.0...v0.95.1)
+
+<sup>Released on **2023-10-25**</sup>
+
+#### 💄 Styles
+
+- **misc**: Improve plugin message ui.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Improve plugin message ui ([6edd25b](https://github.com/lobehub/lobe-chat/commit/6edd25b))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.95.0](https://github.com/lobehub/lobe-chat/compare/v0.94.5...v0.95.0)
 
 <sup>Released on **2023-10-24**</sup>

package/README.md

@@ -131,10 +131,10 @@ Utilize the Progressive Web Application ([PWA](https://support.google.com/chrome
 > **Note**\
 > If you are unfamiliar with the installation process of PWA, you can add LobeChat as your desktop application (also applicable to mobile devices) by following these steps:
 >
-> - Launch the Chrome or Edge browser on your computer
-> - Visit the LobeChat webpage
-> - In the upper right corner of the address bar, click on the <kbd>Install</kbd> icon
-> - Follow the instructions on the screen to complete the PWA installation
+> - Launch the Chrome or Edge browser on your computer.
+> - Visit the LobeChat webpage.
+> - In the upper right corner of the address bar, click on the <kbd>Install</kbd> icon.
+> - Follow the instructions on the screen to complete the PWA installation.
 
 <br/>
 

package/docs/Lighthouse.md

@@ -48,18 +48,18 @@
 | [⚡️ Lighthouse Report][settings-desktop-report] | [⚡️ Lighthouse Report][settings-mobile-report] |
 
 [chat-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/desktop/pagespeed.svg
-[chat-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/desktop/chat_lobehub_com_chat.html
+[chat-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/desktop/chat_preivew_lobehub_com_chat.html
 [chat-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/mobile/pagespeed.svg
-[chat-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/mobile/chat_lobehub_com_chat.html
+[chat-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/mobile/chat_preivew_lobehub_com_chat.html
 [market-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/market/desktop/pagespeed.svg
-[market-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/market/desktop/chat_lobehub_com_market.html
+[market-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/market/desktop/chat_preivew_lobehub_com_market.html
 [market-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/market/mobile/pagespeed.svg
-[market-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/market/mobile/chat_lobehub_com_market.html
+[market-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/market/mobile/chat_preivew_lobehub_com_market.html
 [settings-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/settings/desktop/pagespeed.svg
-[settings-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/settings/desktop/chat_lobehub_com_settings.html
+[settings-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/settings/desktop/chat_preivew_lobehub_com_settings.html
 [settings-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/settings/mobile/pagespeed.svg
-[settings-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/settings/mobile/chat_lobehub_com_settings.html
+[settings-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/settings/mobile/chat_preivew_lobehub_com_settings.html
 [welcome-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/welcome/desktop/pagespeed.svg
-[welcome-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/welcome/desktop/chat_lobehub_com_welcome.html
+[welcome-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/welcome/desktop/chat_preivew_lobehub_com_welcome.html
 [welcome-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/welcome/mobile/pagespeed.svg
-[welcome-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/welcome/mobile/chat_lobehub_com_welcome.html
+[welcome-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/welcome/mobile/chat_preivew_lobehub_com_welcome.html

package/docs/Lighthouse.zh-CN.md

@@ -48,18 +48,18 @@
 | [⚡️ Lighthouse Report][settings-desktop-report] | [⚡️ Lighthouse Report][settings-mobile-report] |
 
 [chat-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/desktop/pagespeed.svg
-[chat-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/desktop/chat_lobehub_com_chat.html
+[chat-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/desktop/chat_preview_lobehub_com_chat.html
 [chat-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/mobile/pagespeed.svg
-[chat-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/mobile/chat_lobehub_com_chat.html
+[chat-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/chat/mobile/chat_preview_lobehub_com_chat.html
 [market-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/market/desktop/pagespeed.svg
-[market-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/market/desktop/chat_lobehub_com_market.html
+[market-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/market/desktop/chat_preview_lobehub_com_market.html
 [market-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/market/mobile/pagespeed.svg
-[market-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/market/mobile/chat_lobehub_com_market.html
+[market-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/market/mobile/chat_preview_lobehub_com_market.html
 [settings-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/settings/desktop/pagespeed.svg
-[settings-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/settings/desktop/chat_lobehub_com_settings.html
+[settings-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/settings/desktop/chat_preview_lobehub_com_settings.html
 [settings-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/settings/mobile/pagespeed.svg
-[settings-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/settings/mobile/chat_lobehub_com_settings.html
+[settings-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/settings/mobile/chat_preview_lobehub_com_settings.html
 [welcome-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/welcome/desktop/pagespeed.svg
-[welcome-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/welcome/desktop/chat_lobehub_com_welcome.html
+[welcome-desktop-report]: https://lobehub.github.io/lobe-chat/lighthouse/welcome/desktop/chat_preview_lobehub_com_welcome.html
 [welcome-mobile]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/welcome/mobile/pagespeed.svg
-[welcome-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/welcome/mobile/chat_lobehub_com_welcome.html
+[welcome-mobile-report]: https://lobehub.github.io/lobe-chat/lighthouse/welcome/mobile/chat_preview_lobehub_com_welcome.html

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.95.0",
+  "version": "0.95.1",
   "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/chat/features/Conversation/ChatList/Plugins/Inspector/index.tsx

@@ -1,8 +1,15 @@
-import { LoadingOutlined } from '@ant-design/icons';
+import { Loading3QuartersOutlined } from '@ant-design/icons';
 import { LobePluginType } from '@lobehub/chat-plugin-sdk';
 import { ActionIcon, Avatar, Highlighter, Icon } from '@lobehub/ui';
 import { Tabs } from 'antd';
-import { LucideChevronDown, LucideChevronUp, LucideOrbit, LucideToyBrick } from 'lucide-react';
+import isEqual from 'fast-deep-equal';
+import {
+  LucideBug,
+  LucideBugOff,
+  LucideChevronDown,
+  LucideChevronUp,
+  LucideToyBrick,
+} from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -33,14 +40,14 @@ const Inspector = memo<InspectorProps>(
     setShow,
     content,
     id = 'unknown',
-    type,
+    // type,
   }) => {
     const { t } = useTranslation('plugin');
     const { styles } = useStyles();
     const [open, setOpen] = useState(false);
 
-    const item = usePluginStore(pluginSelectors.getPluginMetaById(id));
-
+    const item = usePluginStore(pluginSelectors.getPluginMetaById(id), isEqual);
+    const showRightAction = usePluginStore(pluginSelectors.hasPluginUI(id));
     const pluginAvatar = pluginHelpers.getPluginAvatar(item?.meta);
     const pluginTitle = pluginHelpers.getPluginTitle(item?.meta);
 
@@ -62,31 +69,32 @@ const Inspector = memo<InspectorProps>(
             gap={8}
             horizontal
             onClick={() => {
-              setOpen(!open);
+              setShow?.(!showRender);
             }}
           >
             {loading ? (
               <div>
-                <LoadingOutlined />
+                <Loading3QuartersOutlined spin />
               </div>
             ) : (
               avatar
             )}
             {pluginTitle ?? t('plugins.unknown')}
-            <Icon icon={open ? LucideChevronUp : LucideChevronDown} />
+            {showRightAction && <Icon icon={showRender ? LucideChevronUp : LucideChevronDown} />}
           </Flexbox>
-          <Flexbox horizontal>
-            {type === 'standalone' && <ActionIcon icon={LucideOrbit} />}
-            <Settings id={id} />
-            {setShow && (
+          {
+            <Flexbox horizontal>
+              {/*{type === 'standalone' && <ActionIcon icon={LucideOrbit} />}*/}
               <ActionIcon
-                icon={showRender ? LucideChevronUp : LucideChevronDown}
+                icon={open ? LucideBugOff : LucideBug}
                 onClick={() => {
-                  setShow(!showRender);
+                  setOpen(!open);
                 }}
+                title={t(open ? 'debug.off' : 'debug.on')}
               />
-            )}
-          </Flexbox>
+              <Settings id={id} />
+            </Flexbox>
+          }
         </Flexbox>
         {open && (
           <Tabs

package/src/app/chat/features/Conversation/ChatList/Plugins/Inspector/style.ts

@@ -6,6 +6,7 @@ export const useStyles = createStyles(({ css, token }) => ({
 
     width: fit-content;
     padding: 6px 8px;
+    padding-inline-end: 12px;
 
     color: ${token.colorText};
 

package/src/app/chat/features/Conversation/ChatList/Plugins/Render/DefaultType/index.tsx

@@ -1,5 +1,5 @@
-import { Loading3QuartersOutlined } from '@ant-design/icons';
 import { Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
 import dynamic from 'next/dynamic';
 import { Suspense, memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,6 +11,60 @@ import IFrameRender from './IFrameRender';
 
 const SystemJsRender = dynamic(() => import('./SystemJsRender'), { ssr: false });
 
+const useStyles = createStyles(
+  ({ css, token }) => css`
+    position: relative;
+
+    overflow: hidden;
+    display: block;
+
+    width: 300px;
+    height: 12px;
+
+    border: 1px solid ${token.colorBorder};
+    border-radius: 10px;
+
+    &::after {
+      content: '';
+
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      box-sizing: border-box;
+      width: 40%;
+      height: 100%;
+
+      background: ${token.colorPrimary};
+
+      animation: animloader 2s linear infinite;
+    }
+
+    @keyframes animloader {
+      0% {
+        left: 0;
+        transform: translateX(-100%);
+      }
+
+      100% {
+        left: 100%;
+        transform: translateX(0%);
+      }
+    }
+  `,
+);
+const Loading = () => {
+  const { t } = useTranslation('plugin');
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox align={'center'} gap={8} padding={16}>
+      <span className={styles} />
+      {t('loading.content')}
+    </Flexbox>
+  );
+};
+
 export interface PluginDefaultTypeProps {
   content: string;
   loading?: boolean;
@@ -18,8 +72,6 @@ export interface PluginDefaultTypeProps {
 }
 
 const PluginDefaultType = memo<PluginDefaultTypeProps>(({ content, name }) => {
-  const { t } = useTranslation('plugin');
-
   const manifest = usePluginStore((s) => s.pluginManifestMap[name || '']);
   let isJSON = true;
   try {
@@ -28,15 +80,12 @@ const PluginDefaultType = memo<PluginDefaultTypeProps>(({ content, name }) => {
     isJSON = false;
   }
 
-  const contentObj = useMemo(() => (isJSON ? JSON.parse(content) : content), [content]);
+  const contentObj = useMemo<object>(() => (isJSON ? JSON.parse(content) : content), [content]);
 
   if (!isJSON) {
     return (
-      <Flexbox gap={8} horizontal>
-        <div>
-          <Loading3QuartersOutlined spin />
-        </div>
-        {t('loading.content')}
+      <Flexbox gap={8}>
+        <Loading />
       </Flexbox>
     );
   }
@@ -49,7 +98,7 @@ const PluginDefaultType = memo<PluginDefaultTypeProps>(({ content, name }) => {
 
   if (ui.mode === 'module')
     return (
-      <Suspense fallback={<Skeleton active style={{ width: 300 }} />}>
+      <Suspense fallback={<Skeleton active style={{ width: 400 }} />}>
         <SystemJsRender content={contentObj} name={name || 'unknown'} url={ui.url} />
       </Suspense>
     );

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

@@ -70,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,
@@ -78,6 +84,7 @@ export const pluginSelectors = {
   getPluginManifestLoadingStatus,
   getPluginMetaById,
   getPluginSettingsById,
+  hasPluginUI,
   isCustomPlugin,
   pluginList,
 };