@lobehub/lobehub 2.0.0-next.135 → 2.0.0-next.137

package/src/app/[variants]/(main)/settings/provider/ProviderMenu/List.tsx

@@ -1,10 +1,12 @@
 'use client';
 
-import { ActionIcon, Dropdown, Icon, ScrollShadow, Text } from '@lobehub/ui';
+import { ActionIcon, Dropdown, Icon, ScrollShadow } from '@lobehub/ui';
+import { Collapse } from 'antd';
+import { createStyles } from 'antd-style';
 import type { ItemType } from 'antd/es/menu/interface';
 import isEqual from 'fast-deep-equal';
-import { ArrowDownUpIcon, LucideCheck } from 'lucide-react';
-import { useCallback, useMemo, useState } from 'react';
+import { ArrowDownUpIcon, ChevronDownIcon, LucideCheck } from 'lucide-react';
+import { type ReactNode, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -24,14 +26,68 @@ enum SortType {
   Default = 'default',
 }
 
+const useStyles = createStyles(({ css, token }) => ({
+  collapse: css`
+    &.ant-collapse {
+      border: none;
+      border-radius: 0;
+      background: transparent;
+    }
+
+    .ant-collapse-item {
+      border: none !important;
+    }
+
+    .ant-collapse-header {
+      padding: 0 !important;
+      padding-block: 8px !important;
+
+      font-size: 12px !important;
+      color: ${token.colorTextSecondary} !important;
+
+      background: transparent !important;
+    }
+
+    .ant-collapse-content {
+      border: none !important;
+      background: transparent !important;
+    }
+
+    .ant-collapse-content-box {
+      padding: 0 !important;
+    }
+
+    .ant-collapse-expand-icon {
+      padding-inline-end: 4px !important;
+    }
+  `,
+  sectionHeader: css`
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    margin-block-start: 8px;
+    padding-block: 4px;
+
+    font-size: 12px;
+    color: ${token.colorTextSecondary};
+  `,
+}));
+
 const ProviderList = (props: {
   mobile?: boolean;
   onProviderSelect: (providerKey: string) => void;
 }) => {
   const { onProviderSelect, mobile } = props;
   const { t } = useTranslation('modelProvider');
+  const { styles } = useStyles();
   const [open, setOpen] = useState(false);
 
+  // Collapse states - using array of active keys
+  const [activeKeys, setActiveKeys] = useState<string[]>(['enabled', 'custom', 'disabled']);
+
   const [sortType, updateSystemStatus] = useGlobalStore((s) => [
     systemStatusSelectors.disabledModelProvidersSortType(s),
     s.updateSystemStatus,
@@ -54,6 +110,11 @@ const ProviderList = (props: {
     isEqual,
   );
 
+  const disabledCustomProviderList = useAiInfraStore(
+    aiProviderSelectors.disabledCustomAiProviderList,
+    isEqual,
+  );
+
   // Sort model providers based on sort type
   const sortedDisabledProviders = useMemo(() => {
     const providers = [...disabledModelProviderList];
@@ -81,84 +142,150 @@ const ProviderList = (props: {
     }
   }, [disabledModelProviderList, sortType]);
 
+  const collapseItems = useMemo(() => {
+    const items: {
+      children: ReactNode;
+      extra?: ReactNode;
+      key: string;
+      label: string;
+    }[] = [
+      {
+        children: (
+          <Flexbox gap={0}>
+            {enabledModelProviderList.map((item) => (
+              <ProviderItem {...item} key={item.id} onClick={onProviderSelect} />
+            ))}
+          </Flexbox>
+        ),
+        extra: (
+          <div onClick={(e) => e.stopPropagation()}>
+            <ActionIcon
+              icon={ArrowDownUpIcon}
+              onClick={() => setOpen(true)}
+              size={'small'}
+              title={t('menu.sort')}
+            />
+          </div>
+        ),
+        key: 'enabled',
+        label: t('menu.list.enabled'),
+      },
+    ];
+
+    // Add custom providers section if there are any
+    if (disabledCustomProviderList.length > 0) {
+      items.push({
+        children: (
+          <Flexbox gap={0}>
+            {disabledCustomProviderList.map((item) => (
+              <ProviderItem {...item} key={item.id} onClick={onProviderSelect} />
+            ))}
+          </Flexbox>
+        ),
+        key: 'custom',
+        label: t('menu.list.custom'),
+      });
+    }
+
+    // Add disabled providers section
+    items.push({
+      children: (
+        <Flexbox gap={0}>
+          {sortedDisabledProviders.map((item) => (
+            <ProviderItem {...item} key={item.id} onClick={onProviderSelect} />
+          ))}
+        </Flexbox>
+      ),
+      extra:
+        disabledModelProviderList.length > 1 ? (
+          <div onClick={(e) => e.stopPropagation()}>
+            <Dropdown
+              menu={{
+                items: [
+                  {
+                    icon: sortType === SortType.Default ? <Icon icon={LucideCheck} /> : <div />,
+                    key: 'default',
+                    label: t('menu.list.disabledActions.sortDefault'),
+                    onClick: () => updateSortType(SortType.Default),
+                  },
+                  {
+                    type: 'divider',
+                  },
+                  {
+                    icon:
+                      sortType === SortType.Alphabetical ? <Icon icon={LucideCheck} /> : <div />,
+                    key: 'alphabetical',
+                    label: t('menu.list.disabledActions.sortAlphabetical'),
+                    onClick: () => updateSortType(SortType.Alphabetical),
+                  },
+                  {
+                    icon:
+                      sortType === SortType.AlphabeticalDesc ? (
+                        <Icon icon={LucideCheck} />
+                      ) : (
+                        <div />
+                      ),
+                    key: 'alphabeticalDesc',
+                    label: t('menu.list.disabledActions.sortAlphabeticalDesc'),
+                    onClick: () => updateSortType(SortType.AlphabeticalDesc),
+                  },
+                ] as ItemType[],
+              }}
+              trigger={['click']}
+            >
+              <ActionIcon
+                icon={ArrowDownUpIcon}
+                size={'small'}
+                title={t('menu.list.disabledActions.sort')}
+              />
+            </Dropdown>
+          </div>
+        ) : undefined,
+      key: 'disabled',
+      label: t('menu.list.disabled'),
+    });
+
+    return items;
+  }, [
+    enabledModelProviderList,
+    disabledCustomProviderList,
+    sortedDisabledProviders,
+    disabledModelProviderList.length,
+    sortType,
+    t,
+    onProviderSelect,
+    updateSortType,
+  ]);
+
   return (
     <ScrollShadow gap={4} height={'100%'} paddingInline={12} size={4} style={{ paddingBottom: 32 }}>
       {!mobile && <All onClick={onProviderSelect} />}
-      <Flexbox
-        align={'center'}
-        horizontal
-        justify={'space-between'}
-        style={{ fontSize: 12, marginTop: 8 }}
-      >
-        <Text style={{ fontSize: 12 }} type={'secondary'}>
-          {t('menu.list.enabled')}
-        </Text>
-        <ActionIcon
-          icon={ArrowDownUpIcon}
-          onClick={() => {
-            setOpen(true);
+      {open && (
+        <SortProviderModal
+          defaultItems={enabledModelProviderList}
+          onCancel={() => {
+            setOpen(false);
           }}
-          size={'small'}
-          title={t('menu.sort')}
+          open={open}
         />
-        {open && (
-          <SortProviderModal
-            defaultItems={enabledModelProviderList}
-            onCancel={() => {
-              setOpen(false);
+      )}
+      <Collapse
+        activeKey={activeKeys}
+        className={styles.collapse}
+        expandIcon={({ isActive }) => (
+          <Icon
+            icon={ChevronDownIcon}
+            size={'small'}
+            style={{
+              transform: isActive ? 'rotate(0deg)' : 'rotate(-90deg)',
+              transition: 'transform 0.2s ease',
             }}
-            open={open}
           />
         )}
-      </Flexbox>
-      {enabledModelProviderList.map((item) => (
-        <ProviderItem {...item} key={item.id} onClick={onProviderSelect} />
-      ))}
-      <Flexbox align={'center'} horizontal justify={'space-between'}>
-        <Text style={{ fontSize: 12, marginTop: 8 }} type={'secondary'}>
-          {t('menu.list.disabled')}
-        </Text>
-        {disabledModelProviderList.length > 1 && (
-          <Dropdown
-            menu={{
-              items: [
-                {
-                  icon: sortType === SortType.Default ? <Icon icon={LucideCheck} /> : <div />,
-                  key: 'default',
-                  label: t('menu.list.disabledActions.sortDefault'),
-                  onClick: () => updateSortType(SortType.Default),
-                },
-                {
-                  type: 'divider',
-                },
-                {
-                  icon: sortType === SortType.Alphabetical ? <Icon icon={LucideCheck} /> : <div />,
-                  key: 'alphabetical',
-                  label: t('menu.list.disabledActions.sortAlphabetical'),
-                  onClick: () => updateSortType(SortType.Alphabetical),
-                },
-                {
-                  icon:
-                    sortType === SortType.AlphabeticalDesc ? <Icon icon={LucideCheck} /> : <div />,
-                  key: 'alphabeticalDesc',
-                  label: t('menu.list.disabledActions.sortAlphabeticalDesc'),
-                  onClick: () => updateSortType(SortType.AlphabeticalDesc),
-                },
-              ] as ItemType[],
-            }}
-            trigger={['click']}
-          >
-            <ActionIcon
-              icon={ArrowDownUpIcon}
-              size={'small'}
-              title={t('menu.list.disabledActions.sort')}
-            />
-          </Dropdown>
-        )}
-      </Flexbox>
-      {sortedDisabledProviders.map((item) => (
-        <ProviderItem {...item} key={item.id} onClick={onProviderSelect} />
-      ))}
+        ghost
+        items={collapseItems}
+        onChange={(keys) => setActiveKeys(keys as string[])}
+      />
     </ScrollShadow>
   );
 };

package/src/app/[variants]/(main)/settings/provider/detail/default/ClientMode.tsx

@@ -15,7 +15,7 @@ const ClientMode = memo<{ id: string }>(({ id }) => {
   const useFetchAiProviderItem = useAiInfraStore((s) => s.useFetchAiProviderItem);
   useFetchAiProviderItem(id);
 
-  const { data, isLoading } = useClientDataSWR('get-client-provider', () =>
+  const { data, isLoading } = useClientDataSWR(`get-client-provider-${id}`, () =>
     aiProviderService.getAiProviderById(id),
   );
 

package/src/locales/default/modelProvider.ts

@@ -193,6 +193,7 @@ export default {
   },
   list: {
     title: {
+      custom: '未启用自定义服务商',
       disabled: '未启用服务商',
       enabled: '已启用服务商',
     },
@@ -201,6 +202,7 @@ export default {
     addCustomProvider: '添加自定义服务商',
     all: '全部',
     list: {
+      custom: '自定义未启用',
       disabled: '未启用',
       disabledActions: {
         sort: '排序方式',

package/src/services/chat/chat.test.ts

@@ -1062,7 +1062,7 @@ describe('ChatService', () => {
       );
     });
 
-    it('should make a POST request without response in non-openai provider payload', async () => {
+    it('should make a POST request with chatCompletion apiMode in non-openai provider payload', async () => {
       const params: Partial<ChatStreamPayload> = {
         model: 'deepseek-reasoner',
         provider: 'deepseek',
@@ -1076,6 +1076,7 @@ describe('ChatService', () => {
         stream: true,
         ...DEFAULT_AGENT_CONFIG.params,
         messages: [],
+        apiMode: 'chatCompletion',
         provider: undefined,
       };
 

package/src/services/chat/index.ts

@@ -267,11 +267,14 @@ class ChatService {
       model = findDeploymentName(model, provider);
     }
 
-    const apiMode = aiProviderSelectors.isProviderEnableResponseApi(provider)(
-      getAiInfraStoreState(),
-    )
+    // When user explicitly disables Responses API, set apiMode to 'chatCompletion'
+    // This ensures the user's preference takes priority over provider's useResponseModels config
+    // When user enables Responses API, set to 'responses' to force use Responses API
+    const apiMode: 'responses' | 'chatCompletion' = aiProviderSelectors.isProviderEnableResponseApi(
+      provider,
+    )(getAiInfraStoreState())
       ? 'responses'
-      : undefined;
+      : 'chatCompletion';
 
     // Get the chat config to check streaming preference
     const chatConfig = agentChatConfigSelectors.currentChatConfig(getAgentStoreState());

package/src/store/aiInfra/slices/aiProvider/__tests__/selectors.test.ts

@@ -5,9 +5,10 @@ import { aiProviderSelectors } from '../selectors';
 describe('aiProviderSelectors', () => {
   const mockState: any = {
     aiProviderList: [
-      { id: 'provider1', enabled: true, sort: 1 },
-      { id: 'provider2', enabled: false, sort: 2 },
-      { id: 'provider3', enabled: true, sort: 0 },
+      { id: 'provider1', enabled: true, sort: 1, source: 'builtin' },
+      { id: 'provider2', enabled: false, sort: 2, source: 'builtin' },
+      { id: 'provider3', enabled: true, sort: 0, source: 'builtin' },
+      { id: 'custom1', enabled: false, sort: 3, source: 'custom' },
     ],
     aiProviderDetail: {
       id: 'provider1',
@@ -56,16 +57,23 @@ describe('aiProviderSelectors', () => {
     it('should return enabled providers sorted by sort', () => {
       const result = aiProviderSelectors.enabledAiProviderList(mockState);
       expect(result).toEqual([
-        { id: 'provider3', enabled: true, sort: 0 },
-        { id: 'provider1', enabled: true, sort: 1 },
+        { id: 'provider3', enabled: true, sort: 0, source: 'builtin' },
+        { id: 'provider1', enabled: true, sort: 1, source: 'builtin' },
       ]);
     });
   });
 
   describe('disabledAiProviderList', () => {
-    it('should return disabled providers', () => {
+    it('should return disabled builtin providers', () => {
       const result = aiProviderSelectors.disabledAiProviderList(mockState);
-      expect(result).toEqual([{ id: 'provider2', enabled: false, sort: 2 }]);
+      expect(result).toEqual([{ id: 'provider2', enabled: false, sort: 2, source: 'builtin' }]);
+    });
+  });
+
+  describe('disabledCustomAiProviderList', () => {
+    it('should return disabled custom providers', () => {
+      const result = aiProviderSelectors.disabledCustomAiProviderList(mockState);
+      expect(result).toEqual([{ id: 'custom1', enabled: false, sort: 3, source: 'custom' }]);
     });
   });
 

package/src/store/aiInfra/slices/aiProvider/selectors.ts

@@ -1,6 +1,6 @@
 import { isProviderDisableBrowserRequest } from '@/config/modelProviders';
 import { AIProviderStoreState } from '@/store/aiInfra/initialState';
-import { AiProviderRuntimeConfig } from '@/types/aiProvider';
+import { AiProviderRuntimeConfig, AiProviderSourceEnum } from '@/types/aiProvider';
 import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 // List
@@ -8,7 +8,10 @@ const enabledAiProviderList = (s: AIProviderStoreState) =>
   s.aiProviderList.filter((item) => item.enabled).sort((a, b) => a.sort! - b.sort!);
 
 const disabledAiProviderList = (s: AIProviderStoreState) =>
-  s.aiProviderList.filter((item) => !item.enabled);
+  s.aiProviderList.filter((item) => !item.enabled && item.source !== AiProviderSourceEnum.Custom);
+
+const disabledCustomAiProviderList = (s: AIProviderStoreState) =>
+  s.aiProviderList.filter((item) => !item.enabled && item.source === AiProviderSourceEnum.Custom);
 
 const enabledImageModelList = (s: AIProviderStoreState) => s.enabledImageModelList || [];
 
@@ -116,6 +119,7 @@ const isInitAiProviderRuntimeState = (s: AIProviderStoreState) => !!s.isInitAiPr
 export const aiProviderSelectors = {
   activeProviderConfig,
   disabledAiProviderList,
+  disabledCustomAiProviderList,
   enabledAiProviderList,
   enabledImageModelList,
   isActiveProviderApiKeyNotEmpty,