@lobehub/chat 0.58.0 → 0.59.0

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 # Changelog
 
+## [Version 0.59.0](https://github.com/lobehub/lobe-chat/compare/v0.58.0...v0.59.0)
+
+<sup>Released on **2023-08-26**</sup>
+
+#### ✨ Features
+
+- **misc**: 支持展示插件插件状态, 支持插件 i18n 模式展示.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: 支持展示插件插件状态 ([7e916ac](https://github.com/lobehub/lobe-chat/commit/7e916ac))
+- **misc**: 支持插件 i18n 模式展示 ([8614734](https://github.com/lobehub/lobe-chat/commit/8614734))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.58.0](https://github.com/lobehub/lobe-chat/compare/v0.57.0...v0.58.0)
 
 <sup>Released on **2023-08-26**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.58.0",
+  "version": "0.59.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",

package/src/features/AgentSetting/AgentPlugin/index.tsx

@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { transformPluginSettings } from '@/features/PluginSettings';
 import PluginSettingRender from '@/features/PluginSettings/PluginSettingRender';
-import { usePluginStore } from '@/store/plugin';
+import { pluginHelpers, usePluginStore } from '@/store/plugin';
 import { useSessionStore } from '@/store/session';
 import { AgentAction, agentSelectors } from '@/store/session/slices/agentConfig';
 import { LobeAgentConfig } from '@/types/session';
@@ -98,8 +98,8 @@ const AgentPlugin = memo<AgentPluginProps>(({ config, updateConfig }) => {
             }}
           />
         ),
-        desc: meta?.description,
-        label: meta.title,
+        desc: pluginHelpers.getPluginDesc(meta),
+        label: pluginHelpers.getPluginTitle(meta),
         minWidth: undefined,
         tag: identifier,
       }));
@@ -131,7 +131,7 @@ const AgentPlugin = memo<AgentPluginProps>(({ config, updateConfig }) => {
               desc: item.desc && <Markdown className={styles.md}>{item.desc}</Markdown>,
             })),
             icon: ToyBrick,
-            title: t('settingPlugin.config', { id: item.meta.title || item.identifier }),
+            title: t('settingPlugin.config', { id: pluginHelpers.getPluginTitle(item.meta) }),
           };
         })
         .filter(Boolean) as unknown as ItemGroup[]);

package/src/locales/default/common.ts

@@ -53,6 +53,7 @@ export default {
   regenerate: '重新生成',
   rename: '重命名',
   reset: '重置',
+  retry: '重试',
   roleAndArchive: '角色与记录',
   searchAgentPlaceholder: '搜索助手和对话...',
   send: '发送',

package/src/pages/chat/features/Conversation/ChatList/Error/Plugin/PluginSettings.tsx

@@ -1,12 +1,13 @@
 import { Avatar } from '@lobehub/ui';
 import { Button, Divider } 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 { pluginSelectors, usePluginStore } from '@/store/plugin';
+import { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
 import { useSessionStore } from '@/store/session';
 
 import { ErrorActionContainer, useStyles } from '../style';
@@ -22,20 +23,21 @@ const PluginSettings = memo<PluginSettingsProps>(({ id, pluginIdentifier }) => {
   const { t } = useTranslation('error');
   const theme = useTheme();
   const [resend, deleteMessage] = useSessionStore((s) => [s.resendMessage, s.deleteMessage]);
-  const plugin = usePluginStore(pluginSelectors.getPluginMetaById(pluginIdentifier));
-  const manifest = usePluginStore(pluginSelectors.getPluginManifestSettingsById(pluginIdentifier));
+
+  const plugin = usePluginStore(pluginSelectors.getPluginMetaById(pluginIdentifier), isEqual);
+  const manifest = usePluginStore(pluginSelectors.getPluginManifestById(pluginIdentifier), isEqual);
 
   return (
     <ErrorActionContainer>
       <Center gap={16} style={{ maxWidth: 400 }}>
         <Avatar
-          avatar={plugin?.meta.avatar || '⚙️'}
+          avatar={pluginHelpers.getPluginAvatar(plugin?.meta) || '⚙️'}
           background={theme.colorFillContent}
           gap={12}
           size={80}
         />
         <Flexbox style={{ fontSize: 20 }}>
-          {t('pluginSettings.title', { name: plugin?.meta.title })}
+          {t('pluginSettings.title', { name: pluginHelpers.getPluginTitle(plugin?.meta) })}
         </Flexbox>
         <Flexbox className={styles.desc}>{t('pluginSettings.desc')}</Flexbox>
         <Divider style={{ margin: '0 16px' }} />

package/src/pages/chat/features/Conversation/ChatList/Plugins/CustomRender.tsx

@@ -1,6 +1,6 @@
 import { PluginRender, PluginRenderProps } from '@lobehub/chat-plugin-sdk';
 import { Skeleton } from 'antd';
-import { memo, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 
 import { system } from './dynamticLoader';
 
@@ -10,7 +10,7 @@ interface CustomRenderProps extends PluginRenderProps {
 const CustomRender = memo<CustomRenderProps>(({ url, ...props }) => {
   const [component, setComp] = useState<PluginRender | null>(null);
 
-  if (!component) {
+  useEffect(() => {
     system
       .import(url)
       .then((module1) => {
@@ -21,12 +21,14 @@ const CustomRender = memo<CustomRenderProps>(({ url, ...props }) => {
         setComp(null);
         console.error(error);
       });
+  }, [url]);
 
+  if (!component) {
     return <Skeleton active style={{ width: 300 }} />;
   }
 
-  const Comp = component;
+  const Render = component;
 
-  return <Comp {...props} />;
+  return <Render {...props} />;
 });
 export default CustomRender;

package/src/pages/chat/features/Header/PluginTag.tsx

@@ -1,33 +1,59 @@
-import { Avatar, Icon, Tag } from '@lobehub/ui';
+import { ActionIcon, Avatar, Icon, Tag } from '@lobehub/ui';
 import type { MenuProps } from 'antd';
-import { Dropdown } from 'antd';
-import { LucideToyBrick } from 'lucide-react';
-import { memo } from 'react';
+import { Badge, Dropdown } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { LucideRotateCw, LucideToyBrick } from 'lucide-react';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
-import { usePluginStore } from '@/store/plugin';
+import { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
+
+const PluginStatus = memo<{ id: string; title?: string }>(({ title, id }) => {
+  const { t } = useTranslation('common');
+  const status = usePluginStore(pluginSelectors.getPluginManifestLoadingStatus(id));
+
+  const renderStatus = useMemo(() => {
+    switch (status) {
+      case 'loading': {
+        return <Badge color={'blue'} status={'processing'} />;
+      }
+      case 'error': {
+        return <ActionIcon icon={LucideRotateCw} size={'small'} title={t('retry')} />;
+      }
+      case 'success': {
+        return <Badge status={status} />;
+      }
+    }
+  }, [status]);
+
+  return (
+    <Flexbox gap={12} horizontal justify={'space-between'}>
+      {title} {renderStatus}
+    </Flexbox>
+  );
+});
 
 export interface PluginTagProps {
   plugins: string[];
 }
 
 const PluginTag = memo<PluginTagProps>(({ plugins }) => {
-  const { t } = useTranslation('plugin');
-
-  const list = usePluginStore((s) => s.pluginList);
+  const list = usePluginStore(pluginSelectors.displayPluginList);
+  const displayPlugin = usePluginStore(pluginSelectors.getPluginMetaById(plugins[0]), isEqual);
 
   if (plugins.length === 0) return null;
 
   const items: MenuProps['items'] = plugins.map((id) => {
-    const item = list?.find((p) => p.identifier === id);
+    const item = list.find((i) => i.identifier === id);
+
     return {
-      icon: (
-        <Avatar avatar={item?.meta.avatar} size={24} style={{ marginLeft: -6, marginRight: 2 }} />
-      ),
+      icon: <Avatar avatar={item?.avatar} size={24} style={{ marginLeft: -6, marginRight: 2 }} />,
       key: id,
-      label: t(`plugins.${id}` as any),
+      label: <PluginStatus id={id} title={item?.title} />,
     };
   });
+
   const count = plugins.length;
 
   return (
@@ -35,7 +61,7 @@ const PluginTag = memo<PluginTagProps>(({ plugins }) => {
       <div>
         <Tag>
           {<Icon icon={LucideToyBrick} />}
-          {t(`plugins.${plugins[0]}` as any)}
+          {pluginHelpers.getPluginTitle(displayPlugin?.meta)}
           {count > 1 && <div>({plugins.length - 1}+)</div>}
         </Tag>
       </div>

package/src/store/plugin/helpers.ts

@@ -0,0 +1,26 @@
+import { LobeChatPluginMeta } from '@lobehub/chat-plugin-sdk';
+import i18n from 'i18next';
+
+const getI18nValue = (value: string | Record<string, string> | undefined) => {
+  if (!value) return;
+
+  if (typeof value === 'string') return value;
+
+  if (value[i18n.language]) return value[i18n.language];
+
+  return Object.values(value)[0];
+};
+
+const getPluginFormList = (pluginList: LobeChatPluginMeta[], id: string) =>
+  pluginList?.find((p) => p.identifier === id);
+
+const getPluginTitle = (meta?: LobeChatPluginMeta['meta']) => getI18nValue(meta?.title);
+const getPluginDesc = (meta?: LobeChatPluginMeta['meta']) => getI18nValue(meta?.description);
+const getPluginAvatar = (meta?: LobeChatPluginMeta['meta']) => meta?.avatar;
+
+export const pluginHelpers = {
+  getPluginAvatar,
+  getPluginDesc,
+  getPluginFormList,
+  getPluginTitle,
+};

package/src/store/plugin/index.ts

@@ -1,2 +1,3 @@
+export * from './helpers';
 export * from './selectors';
 export { usePluginStore } from './store';

package/src/store/plugin/selectors.ts

@@ -1,4 +1,5 @@
 import { PLUGIN_SCHEMA_SEPARATOR } from '@/const/plugin';
+import { pluginHelpers } from '@/store/plugin/helpers';
 
 import { PluginStoreState } from './initialState';
 
@@ -23,13 +24,38 @@ const enabledSchema =
   };
 
 const getPluginMetaById = (id: string) => (s: PluginStoreState) =>
-  s.pluginList?.find((p) => p.identifier === id);
+  pluginHelpers.getPluginFormList(s.pluginList, id);
 
-const getPluginManifestSettingsById = (id: string) => (s: PluginStoreState) =>
-  s.pluginManifestMap[id];
+const getPluginManifestById = (id: string) => (s: PluginStoreState) => s.pluginManifestMap[id];
+const getPluginSettingsById = (id: string) => (s: PluginStoreState) => s.pluginsSettings[id];
+
+// 获取插件 manifest 加载状态
+const getPluginManifestLoadingStatus = (id: string) => (s: PluginStoreState) => {
+  const manifest = getPluginManifestById(id);
+
+  if (s.pluginManifestLoading[id]) return 'loading';
+
+  if (!manifest) return 'error';
+
+  if (!!manifest) return 'success';
+};
+
+const displayPluginList = (s: PluginStoreState) =>
+  s.pluginList.map((p) => ({
+    author: p.author,
+    avatar: p.meta?.avatar,
+    createAt: p.createAt,
+    desc: pluginHelpers.getPluginDesc(p.meta),
+    homepage: p.homepage,
+    identifier: p.identifier,
+    title: pluginHelpers.getPluginTitle(p.meta),
+  }));
 
 export const pluginSelectors = {
+  displayPluginList,
   enabledSchema,
-  getPluginManifestSettingsById,
+  getPluginManifestById,
+  getPluginManifestLoadingStatus,
   getPluginMetaById,
+  getPluginSettingsById,
 };