💄 style: improve settings display

lobehub · Dec 15, 2023 · df57cde · df57cde
1 parent 605b3bf
commit df57cde
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 19 deletions.
diff --git a/src/app/chat/features/Conversation/ChatList/Plugins/Inspector/Settings.tsx b/src/app/chat/features/Conversation/ChatList/Plugins/Inspector/Settings.tsx
@@ -2,17 +2,19 @@ import { ActionIcon } from '@lobehub/ui';
 import { LucideSettings } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-
 import PluginDetailModal from 'src/features/PluginDetailModal';
-import { useToolStore } from '@/store/tool';
+
+import { pluginHelpers, useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
 
 const Settings = memo<{ id: string }>(({ id }) => {
   const item = useToolStore(pluginSelectors.getPluginManifestById(id));
   const [open, setOpen] = useState(false);
   const { t } = useTranslation('plugin');
+  const hasSettings = pluginHelpers.isSettingSchemaNonEmpty(item?.settings);
+
   return (
-    item?.settings && (
+    hasSettings && (
       <>
         <ActionIcon
           icon={LucideSettings}
@@ -27,7 +29,7 @@ const Settings = memo<{ id: string }>(({ id }) => {
             setOpen(false);
           }}
           open={open}
-          schema={item.settings}
+          schema={item?.settings}
         />
       </>
     )

diff --git a/src/features/PluginDetailModal/index.tsx b/src/features/PluginDetailModal/index.tsx
@@ -1,12 +1,13 @@
 import { Modal, TabsNav } from '@lobehub/ui';
-import { Divider } from 'antd';
+import { Divider, TabsProps } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center } from 'react-layout-kit';
 import useMergeState from 'use-merge-value';
 
 import MobilePadding from '@/components/MobilePadding';
 import PluginSettingsConfig from '@/features/PluginSettings';
+import { pluginHelpers } from '@/store/tool';
 
 import APIs from './APIs';
 import Meta from './Meta';
@@ -28,6 +29,8 @@ const PluginDetailModal = memo<PluginDetailModalProps>(
     });
     const { t } = useTranslation('plugin');
 
+    const hasSettings = pluginHelpers.isSettingSchemaNonEmpty(schema);
+
     return (
       <Modal
         cancelText={t('cancel', { ns: 'common' })}
@@ -46,20 +49,22 @@ const PluginDetailModal = memo<PluginDetailModalProps>(
             <Divider style={{ marginBottom: 0, marginTop: 8 }} />
             <TabsNav
               activeKey={tabKey}
-              items={[
-                {
-                  key: 'info',
-                  label: t('detailModal.tabs.info'),
-                },
-                schema && {
-                  key: 'settings',
-                  label: t('detailModal.tabs.settings'),
-                },
-              ]}
+              items={
+                [
+                  {
+                    key: 'info',
+                    label: t('detailModal.tabs.info'),
+                  },
+                  hasSettings && {
+                    key: 'settings',
+                    label: t('detailModal.tabs.settings'),
+                  },
+                ].filter(Boolean) as TabsProps['items']
+              }
               onChange={setTabKey}
             />
             {tabKey === 'settings' ? (
-              schema && <PluginSettingsConfig id={id} schema={schema} />
+              hasSettings && <PluginSettingsConfig id={id} schema={schema} />
             ) : (
               <APIs id={id} />
             )}

diff --git a/src/features/PluginStore/PluginItem/Action.tsx b/src/features/PluginStore/PluginItem/Action.tsx
@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import PluginDetailModal from '@/features/PluginDetailModal';
-import { useToolStore } from '@/store/tool';
+import { pluginHelpers, useToolStore } from '@/store/tool';
 import { pluginSelectors, pluginStoreSelectors } from '@/store/tool/selectors';
 import { LobeToolType } from '@/types/tool/tool';
 
@@ -32,13 +32,15 @@ const Actions = memo<ActionsProps>(({ identifier, type }) => {
   const plugin = useToolStore(pluginSelectors.getPluginManifestById(identifier));
 
   const [tab, setTab] = useState('info');
+  const hasSettings = pluginHelpers.isSettingSchemaNonEmpty(plugin?.settings);
+
   return (
     <>
       <Flexbox align={'center'} horizontal>
         {installed ? (
           <>
             {isCustomPlugin && <EditCustomPlugin identifier={identifier} />}
-            {plugin?.settings && (
+            {hasSettings && (
               <ActionIcon
                 icon={Settings2}
                 onClick={() => {

diff --git a/src/store/tool/helpers.ts b/src/store/tool/helpers.ts
@@ -1,4 +1,4 @@
-import { LobeChatPluginManifest } from '@lobehub/chat-plugin-sdk';
+import { LobeChatPluginManifest, PluginSchema } from '@lobehub/chat-plugin-sdk';
 
 import { LobeTool } from '@/types/tool';
 
@@ -11,10 +11,14 @@ const getPluginAvatar = (meta?: LobeChatPluginManifest['meta']) => meta?.avatar
 const isCustomPlugin = (id: string, pluginList: LobeTool[]) =>
   pluginList.some((i) => i.identifier === id && i.type === 'customPlugin');
 
+const isSettingSchemaNonEmpty = (schema?: PluginSchema) =>
+  schema?.properties && Object.keys(schema.properties).length > 0;
+
 export const pluginHelpers = {
   getPluginAvatar,
   getPluginDesc,
   getPluginFormList,
   getPluginTitle,
   isCustomPlugin,
+  isSettingSchemaNonEmpty,
 };