🐛 fix: fix ai model abilities issue (#6060)

Author: arvinxx

src/database/repositories/aiInfra/index.ts

@@ -1,3 +1,4 @@
+import { isEmpty } from 'lodash-es';
 import pMap from 'p-map';
 
 import { DEFAULT_MODEL_PROVIDER_LIST } from '@/config/modelProviders';
@@ -88,15 +89,25 @@ export class AiInfraRepos {
           .map<EnabledAiModel & { enabled?: boolean | null }>((item) => {
             const user = allModels.find((m) => m.id === item.id && m.providerId === provider.id);
 
+            if (!user)
+              return {
+                ...item,
+                abilities: item.abilities || {},
+                providerId: provider.id,
+              };
+
             return {
-              abilities: !!user ? user.abilities : item.abilities || {},
-              config: !!user ? user.config : item.config,
-              contextWindowTokens: !!user ? user.contextWindowTokens : item.contextWindowTokens,
+              abilities: !isEmpty(user.abilities) ? user.abilities : item.abilities || {},
+              config: !isEmpty(user.config) ? user.config : item.config,
+              contextWindowTokens:
+                typeof user.contextWindowTokens === 'number'
+                  ? user.contextWindowTokens
+                  : item.contextWindowTokens,
               displayName: user?.displayName || item.displayName,
-              enabled: !!user ? user.enabled : item.enabled,
+              enabled: user.enabled || item.enabled,
               id: item.id,
               providerId: provider.id,
-              sort: !!user ? user.sort : undefined,
+              sort: user.sort || undefined,
               type: item.type,
             };
           })

src/features/DevPanel/SystemInspector/AiProviderRuntimeConfig.tsx

@@ -0,0 +1,11 @@
+import { useAiInfraStore } from '@/store/aiInfra';
+
+import JsonViewer from './JsonViewer';
+
+const AiProviderRuntimeConfig = () => {
+  const aiProviderRuntimeConfig = useAiInfraStore((s) => s.aiProviderRuntimeConfig);
+
+  return <JsonViewer data={aiProviderRuntimeConfig} />;
+};
+
+export default AiProviderRuntimeConfig;

src/features/DevPanel/SystemInspector/JsonViewer.tsx

@@ -0,0 +1,17 @@
+import { Highlighter } from '@lobehub/ui';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+interface JsonViewerProps {
+  data: object;
+}
+
+const JsonViewer = memo<JsonViewerProps>(({ data }) => {
+  return (
+    <Flexbox style={{ overflow: 'scroll' }}>
+      <Highlighter language={'json'}>{JSON.stringify(data, null, 2)}</Highlighter>
+    </Flexbox>
+  );
+});
+
+export default JsonViewer;

src/features/DevPanel/SystemInspector/ServerConfig.tsx

@@ -0,0 +1,11 @@
+import { useServerConfigStore } from '@/store/serverConfig';
+
+import JsonViewer from './JsonViewer';
+
+const ServerConfig = () => {
+  const serverConfig = useServerConfigStore((s) => s.serverConfig);
+
+  return <JsonViewer data={serverConfig} />;
+};
+
+export default ServerConfig;

src/features/DevPanel/SystemInspector/index.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { TabsNav } from '@lobehub/ui';
+import { useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import AiProviderRuntimeConfig from './AiProviderRuntimeConfig';
+import ServerConfig from './ServerConfig';
+
+enum TabKey {
+  AiProviderRuntimeConfig = 'aiProviderRuntimeConfig',
+  ServerConfig = 'serverConfig',
+}
+
+const SystemInspector = () => {
+  const [activeTab, setActiveTab] = useState<TabKey>(TabKey.ServerConfig);
+
+  return (
+    <Flexbox gap={4} height={'100%'}>
+      <TabsNav
+        activeKey={activeTab}
+        items={[
+          {
+            key: TabKey.ServerConfig,
+            label: 'Server Config',
+          },
+          {
+            key: TabKey.AiProviderRuntimeConfig,
+            label: 'Ai Provider Runtime Config',
+          },
+        ]}
+        onChange={(activeTab) => setActiveTab(activeTab as TabKey)}
+        variant={'compact'}
+      />
+
+      {activeTab === TabKey.ServerConfig && <ServerConfig />}
+      {activeTab === TabKey.AiProviderRuntimeConfig && <AiProviderRuntimeConfig />}
+    </Flexbox>
+  );
+};
+
+export default SystemInspector;

src/features/DevPanel/features/FloatPanel.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { ActionIcon, FluentEmoji, Icon, SideNav } from '@lobehub/ui';
-import { Dropdown, FloatButton } from 'antd';
+import { FloatButton } from 'antd';
 import { createStyles } from 'antd-style';
 import { BugIcon, BugOff, XIcon } from 'lucide-react';
 import { ReactNode, memo, useEffect, useState } from 'react';
@@ -81,7 +81,7 @@ interface CollapsibleFloatPanelProps {
 const CollapsibleFloatPanel = memo<CollapsibleFloatPanelProps>(({ items }) => {
   const { styles, theme } = useStyles();
   const [tab, setTab] = useState<string>(items[0].key);
-  const [isHide, setIsHide] = useState(false);
+
   const [isExpanded, setIsExpanded] = useState(false);
   const [position, setPosition] = useState({ x: 100, y: 100 });
   const [size, setSize] = useState({ height: minHeight, width: minWidth });
@@ -108,29 +108,11 @@ const CollapsibleFloatPanel = memo<CollapsibleFloatPanelProps>(({ items }) => {
 
   return (
     <>
-      {!isHide && (
-        <Dropdown
-          menu={{
-            items: [
-              {
-                icon: (
-                  <Icon color={theme.colorTextSecondary} icon={BugOff} size={{ fontSize: 16 }} />
-                ),
-                key: 'hide',
-                label: 'Hide Toolbar',
-                onClick: () => setIsHide(true),
-              },
-            ],
-          }}
-          trigger={['hover']}
-        >
-          <FloatButton
-            className={styles.floatButton}
-            icon={<Icon icon={isExpanded ? BugOff : BugIcon} />}
-            onClick={() => setIsExpanded(!isExpanded)}
-          />
-        </Dropdown>
-      )}
+      <FloatButton
+        className={styles.floatButton}
+        icon={<Icon icon={isExpanded ? BugOff : BugIcon} />}
+        onClick={() => setIsExpanded(!isExpanded)}
+      />
       {isExpanded && (
         <Rnd
           bounds="window"

src/features/DevPanel/index.tsx

@@ -1,9 +1,10 @@
-import { BookText, DatabaseIcon, FlagIcon, GlobeLockIcon } from 'lucide-react';
+import { BookText, Cog, DatabaseIcon, FlagIcon, GlobeLockIcon } from 'lucide-react';
 
 import CacheViewer from './CacheViewer';
 import FeatureFlagViewer from './FeatureFlagViewer';
 import MetadataViewer from './MetadataViewer';
 import PostgresViewer from './PostgresViewer';
+import SystemInspector from './SystemInspector';
 import FloatPanel from './features/FloatPanel';
 
 const DevPanel = () => (
@@ -29,6 +30,11 @@ const DevPanel = () => (
         icon: <FlagIcon size={16} />,
         key: 'Feature Flags',
       },
+      {
+        children: <SystemInspector />,
+        icon: <Cog size={16} />,
+        key: 'System Status',
+      },
     ]}
   />
 );