@lobehub/lobehub 2.0.0-next.243 → 2.0.0-next.245

package/.github/workflows/test.yml

@@ -61,26 +61,41 @@ jobs:
 
       - name: Upload coverage to Codecov
         if: always()
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
         run: |
           curl -Os https://cli.codecov.io/latest/linux/codecov
           chmod +x codecov
-          TOKEN="${{ secrets.CODECOV_TOKEN }}"
+
+          # Build common args
+          COMMON_ARGS="--git-service github"
+
+          # PR args setup
+          if [ "${{ github.event_name }}" == "pull_request" ]; then
+            COMMON_ARGS="$COMMON_ARGS --pr ${{ github.event.pull_request.number }}"
+            COMMON_ARGS="$COMMON_ARGS --sha ${{ github.event.pull_request.head.sha }}"
+            # Fork PR needs username:branch format for tokenless upload
+            if [ "${{ github.event.pull_request.head.repo.full_name }}" != "${{ github.repository }}" ]; then
+              COMMON_ARGS="$COMMON_ARGS --branch ${{ github.event.pull_request.head.label }}"
+            else
+              COMMON_ARGS="$COMMON_ARGS --branch ${{ github.event.pull_request.head.ref }}"
+            fi
+          fi
+
+          # Token (if available)
+          if [ -n "$CODECOV_TOKEN" ]; then
+            COMMON_ARGS="$COMMON_ARGS -t $CODECOV_TOKEN"
+          fi
+
           for package in $PACKAGES; do
             dir="${package#@lobechat/}"
             if [ -f "./packages/$dir/coverage/lcov.info" ]; then
               echo "Uploading coverage for $dir..."
-              if [ -n "$TOKEN" ]; then
-                ./codecov upload-process \
-                  -t "$TOKEN" \
-                  -f ./packages/$dir/coverage/lcov.info \
-                  -F packages/$dir \
-                  --disable-search
-              else
-                ./codecov upload-process \
-                  -f ./packages/$dir/coverage/lcov.info \
-                  -F packages/$dir \
-                  --disable-search
-              fi
+              ./codecov upload-coverage \
+                $COMMON_ARGS \
+                --file ./packages/$dir/coverage/lcov.info \
+                --flag packages/$dir \
+                --disable-search
             fi
           done
 
@@ -111,7 +126,7 @@ jobs:
         run: bun i
 
       - name: Run tests
-        run: bunx vitest --coverage --silent='passed-only' --shard=${{ matrix.shard }}/2
+        run: bunx vitest --coverage --silent='passed-only' --reporter=default --reporter=blob --shard=${{ matrix.shard }}/2
 
       - name: Upload blob report
         if: ${{ !cancelled() }}

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+## [Version 2.0.0-next.245](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.244...v2.0.0-next.245)
+
+<sup>Released on **2026-01-09**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Improve Tools popover component structure and fix UI consistency.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Improve Tools popover component structure and fix UI consistency, closes [#11356](https://github.com/lobehub/lobe-chat/issues/11356) ([f46837a](https://github.com/lobehub/lobe-chat/commit/f46837a))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 2.0.0-next.244](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.243...v2.0.0-next.244)
+
+<sup>Released on **2026-01-08**</sup>
+
+#### 🐛 Bug Fixes
+
+- **api**: Fix the issue where custom AI Providers cannot use custom APIs.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **api**: Fix the issue where custom AI Providers cannot use custom APIs, closes [#11335](https://github.com/lobehub/lobe-chat/issues/11335) ([2c666b8](https://github.com/lobehub/lobe-chat/commit/2c666b8))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.243](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.242...v2.0.0-next.243)
 
 <sup>Released on **2026-01-08**</sup>

package/changelog/v1.json

@@ -1,4 +1,18 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "Improve Tools popover component structure and fix UI consistency."
+      ]
+    },
+    "date": "2026-01-09",
+    "version": "2.0.0-next.245"
+  },
+  {
+    "children": {},
+    "date": "2026-01-08",
+    "version": "2.0.0-next.244"
+  },
   {
     "children": {},
     "date": "2026-01-08",

package/locales/en-US/subscription.json

@@ -245,7 +245,7 @@
   "qa.list.embeddings.q": "How is vector storage calculated?",
   "qa.list.free.a": "{{name}} has always adhered to open source principles. For professional developers, you can use all open source capabilities through self-deployment of the community version. In {{cloud}}, we provide all registered users with {{credit}} free computing credits per month, ready to use without complex configuration. If you need more usage, you can subscribe to {{starter}}, {{premium}} or {{ultimate}}.",
   "qa.list.free.q": "Can {{name}} be used for free?",
-  "qa.list.limit.a": "{{cloud}} subscription plans are divided into {{starter}}, {{premium}} and {{ultimate}}, each providing different computing credits. If your current plan credits are insufficient, we recommend upgrading. Alternatively, you can set up a custom model API key to use API credits purchased from other sources.",
+  "qa.list.limit.a": "{{cloud}} subscription plans are divided into {{starter}}, {{premium}} and {{ultimate}}, each providing different computing credits. If your current plan credits are insufficient, we recommend upgrading. You can also purchase credit packages on the <fundsLink>\"{{funds}}\"</fundsLink> page for pay-as-you-go usage. Alternatively, you can set up a custom model API key to use API credits purchased from other sources.",
   "qa.list.limit.q": "What if I run out of computing credits?",
   "qa.list.management.a": "On the {{subscribe}} page, you can \"Upgrade / Downgrade\" your current subscription plan, or switch between yearly and monthly billing. Through \"{{usage}}-{{management}}\" you can go to Stripe for subscription management, and you can cancel your subscription at any time. After cancellation, you will be automatically downgraded to the free version when your current plan expires.",
   "qa.list.management.q": "How do I change or cancel my subscription?",

package/locales/zh-CN/subscription.json

@@ -245,7 +245,7 @@
   "qa.list.embeddings.q": "向量存储是如何计算的？",
   "qa.list.free.a": "{{name}} 始终坚持开源原则。专业开发者可通过部署社区版使用全部开源功能。在 {{cloud}} 中，我们为所有注册用户每月提供 {{credit}} 点免费算力，无需复杂配置即可使用。如需更多使用量，可订阅 {{starter}}、{{premium}} 或 {{ultimate}}。",
   "qa.list.free.q": "{{name}} 可以免费使用吗？",
-  "qa.list.limit.a": "{{cloud}} 的订阅计划分为 {{starter}}、{{premium}} 和 {{ultimate}}，每个计划提供不同的算力点数。如当前计划点数不足，建议升级计划。您也可以配置自定义模型 API 密钥，使用其他来源购买的 API 点数。",
+  "qa.list.limit.a": "{{cloud}} 的订阅计划分为 {{starter}}、{{premium}} 和 {{ultimate}}，每个计划提供不同的算力点数。如当前计划点数不足，建议升级计划。您也可以在<fundsLink>「{{funds}}」</fundsLink>页面购买积分包进行按量付费充值。此外，您也可以配置自定义模型 API 密钥，使用其他来源购买的 API 点数。",
   "qa.list.limit.q": "算力点数用完怎么办？",
   "qa.list.management.a": "在 {{subscribe}} 页面，您可以“升级 / 降级”当前订阅计划，或切换年付与月付。在“{{usage}}-{{management}}”中可跳转至 Stripe 进行订阅管理，您可随时取消订阅。取消后，当前计划到期时将自动降级为免费版。",
   "qa.list.management.q": "如何更改或取消订阅？",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.243",
+  "version": "2.0.0-next.245",
   "description": "LobeHub - an open-source,comprehensive AI Agent framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/[variants]/(main)/chat/_layout/Sidebar/Header/Agent/SwitchPanel.tsx

@@ -42,6 +42,7 @@ const SwitchPanel = memo<PropsWithChildren>(({ children }) => {
     <Popover
       classNames={{ trigger: styles.trigger }}
       content={content}
+      nativeButton={false}
       placement="bottomLeft"
       styles={{
         content: {

package/src/app/[variants]/(main)/chat/features/Conversation/Header/HeaderActions/index.tsx

@@ -12,7 +12,7 @@ const HeaderActions = memo(() => {
   const { menuItems } = useMenu();
 
   return (
-    <DropdownMenu items={menuItems}>
+    <DropdownMenu items={menuItems} nativeButton={false}>
       <ActionIcon icon={MoreHorizontal} size={DESKTOP_HEADER_ICON_SIZE} />
     </DropdownMenu>
   );

package/src/features/ChatInput/ActionBar/Knowledge/useControls.tsx

@@ -9,7 +9,7 @@ import { useAgentStore } from '@/store/agent';
 import { agentByIdSelectors } from '@/store/agent/selectors';
 
 import { useAgentId } from '../../hooks/useAgentId';
-import CheckboxItem from '../components/CheckbokWithLoading';
+import CheckboxItem from '../components/CheckboxWithLoading';
 
 export const useControls = ({
   setModalOpen,

package/src/features/ChatInput/ActionBar/Tools/PopoverContent.tsx

@@ -0,0 +1,92 @@
+import { Flexbox, Icon, type ItemType, Segmented, usePopoverContext } from '@lobehub/ui';
+import { createStaticStyles, cssVar } from 'antd-style';
+import { ChevronRight, Store } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ToolsList, { toolsListStyles } from './ToolsList';
+
+const styles = createStaticStyles(({ css }) => ({
+  footer: css`
+    padding: 4px;
+    border-block-start: 1px solid ${cssVar.colorBorderSecondary};
+  `,
+  header: css`
+    padding: 8px;
+    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+  `,
+  trailingIcon: css`
+    opacity: 0.5;
+  `,
+}));
+
+type TabType = 'all' | 'installed';
+
+interface PopoverContentProps {
+  activeTab: TabType;
+  currentItems: ItemType[];
+  enableKlavis: boolean;
+  onOpenStore: () => void;
+  onTabChange: (tab: TabType) => void;
+}
+
+const PopoverContent = memo<PopoverContentProps>(
+  ({ activeTab, currentItems, enableKlavis, onTabChange, onOpenStore }) => {
+    const { t } = useTranslation('setting');
+
+    const { close: closePopover } = usePopoverContext();
+
+    return (
+      <Flexbox gap={0}>
+        <div className={styles.header}>
+          <Segmented
+            block
+            onChange={(v) => onTabChange(v as TabType)}
+            options={[
+              {
+                label: t('tools.tabs.all', { defaultValue: 'all' }),
+                value: 'all',
+              },
+              {
+                label: t('tools.tabs.installed', { defaultValue: 'Installed' }),
+                value: 'installed',
+              },
+            ]}
+            size="small"
+            value={activeTab}
+          />
+        </div>
+        <div
+          style={{
+            maxHeight: 500,
+            minHeight: enableKlavis ? 500 : undefined,
+            overflowY: 'auto',
+          }}
+        >
+          <ToolsList items={currentItems} />
+        </div>
+        <div className={styles.footer}>
+          <div
+            className={toolsListStyles.item}
+            onClick={() => {
+              closePopover();
+              onOpenStore();
+            }}
+            role="button"
+            tabIndex={0}
+          >
+            <div className={toolsListStyles.itemIcon}>
+              <Icon icon={Store} size={20} />
+            </div>
+            <div className={toolsListStyles.itemContent}>{t('tools.plugins.store')}</div>
+            <Icon className={styles.trailingIcon} icon={ChevronRight} size={16} />
+          </div>
+        </div>
+      </Flexbox>
+    );
+  },
+);
+
+PopoverContent.displayName = 'PopoverContent';
+
+export default PopoverContent;

package/src/features/ChatInput/ActionBar/Tools/ToolItem.tsx

@@ -5,7 +5,7 @@ import PluginTag from '@/components/Plugins/PluginTag';
 import { useToolStore } from '@/store/tool';
 import { customPluginSelectors } from '@/store/tool/selectors';
 
-import CheckboxItem, { type CheckboxItemProps } from '../components/CheckbokWithLoading';
+import CheckboxItem, { type CheckboxItemProps } from '../components/CheckboxWithLoading';
 
 const ToolItem = memo<CheckboxItemProps>(({ id, onUpdate, label, checked }) => {
   const isCustom = useToolStore((s) => customPluginSelectors.isCustomPlugin(id)(s));
@@ -13,6 +13,7 @@ const ToolItem = memo<CheckboxItemProps>(({ id, onUpdate, label, checked }) => {
   return (
     <CheckboxItem
       checked={checked}
+      hasPadding={false}
       id={id}
       label={
         <Flexbox align={'center'} gap={8} horizontal>

package/src/features/ChatInput/ActionBar/Tools/ToolsList.tsx

@@ -0,0 +1,107 @@
+import { Flexbox, Icon, type ItemType, Text } from '@lobehub/ui';
+import { Divider } from 'antd';
+import { createStaticStyles, cssVar } from 'antd-style';
+import type { ReactNode } from 'react';
+import { Fragment, isValidElement, memo } from 'react';
+
+export const toolsListStyles = createStaticStyles(({ css }) => ({
+  groupLabel: css`
+    padding-block: 4px;
+    padding-inline: 12px;
+  `,
+  item: css`
+    cursor: pointer;
+
+    display: flex;
+    gap: 12px;
+    align-items: center;
+
+    padding-block: 8px;
+    padding-inline: 12px;
+    border-radius: 6px;
+
+    transition: background-color 0.2s;
+
+    &:hover {
+      background: ${cssVar.colorFillTertiary};
+    }
+  `,
+  itemContent: css`
+    flex: 1;
+    min-width: 0;
+  `,
+  itemIcon: css`
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    width: 24px;
+    height: 24px;
+  `,
+}));
+
+interface ToolItemData {
+  children?: ToolItemData[];
+  extra?: ReactNode;
+  icon?: ReactNode;
+  key?: string;
+  label?: ReactNode;
+  onClick?: () => void;
+  type?: 'group' | 'divider';
+}
+
+interface ToolsListProps {
+  items: ItemType[];
+}
+
+const ToolsList = memo<ToolsListProps>(({ items }) => {
+  const renderItem = (item: ToolItemData, index: number) => {
+    if (item.type === 'divider') {
+      return <Divider key={`divider-${index}`} style={{ margin: '4px 0' }} />;
+    }
+
+    if (item.type === 'group') {
+      return (
+        <Fragment key={item.key || `group-${index}`}>
+          <Text className={toolsListStyles.groupLabel} fontSize={12} type="secondary">
+            {item.label}
+          </Text>
+          {item.children?.map((child, childIndex) => renderItem(child, childIndex))}
+        </Fragment>
+      );
+    }
+
+    // Regular item
+    // icon can be: ReactNode (already rendered), LucideIcon/ForwardRef (needs Icon wrapper), or undefined
+    const iconNode = item.icon ? (
+      isValidElement(item.icon) ? (
+        item.icon
+      ) : (
+        <Icon icon={item.icon as any} size={20} />
+      )
+    ) : null;
+
+    return (
+      <div
+        className={toolsListStyles.item}
+        key={item.key || `item-${index}`}
+        onClick={item.onClick}
+        role="button"
+        tabIndex={0}
+      >
+        {iconNode && <div className={toolsListStyles.itemIcon}>{iconNode}</div>}
+        <div className={toolsListStyles.itemContent}>{item.label}</div>
+        {item.extra}
+      </div>
+    );
+  };
+
+  return (
+    <Flexbox gap={0} padding={4}>
+      {items.map((item, index) => renderItem(item as ToolItemData, index))}
+    </Flexbox>
+  );
+});
+
+export default ToolsList;

package/src/features/ChatInput/ActionBar/Tools/index.tsx

@@ -1,5 +1,3 @@
-import { Segmented } from '@lobehub/ui';
-import { createStaticStyles, cssVar } from 'antd-style';
 import { Blocks } from 'lucide-react';
 import { Suspense, memo, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,46 +10,17 @@ import { serverConfigSelectors, useServerConfigStore } from '@/store/serverConfi
 
 import { useAgentId } from '../../hooks/useAgentId';
 import Action from '../components/Action';
+import PopoverContent from './PopoverContent';
 import { useControls } from './useControls';
 
 type TabType = 'all' | 'installed';
 
-const prefixCls = 'ant';
-
-const styles = createStaticStyles(({ css }) => ({
-  dropdown: css`
-    overflow: hidden;
-
-    width: 100%;
-    border: 1px solid ${cssVar.colorBorderSecondary};
-    border-radius: ${cssVar.borderRadiusLG};
-
-    background: ${cssVar.colorBgElevated};
-    box-shadow: ${cssVar.boxShadowSecondary};
-
-    .${prefixCls}-dropdown-menu {
-      border-radius: 0 !important;
-      background: transparent !important;
-      box-shadow: none !important;
-    }
-  `,
-  header: css`
-    padding: ${cssVar.paddingXS};
-    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
-    background: transparent;
-  `,
-  scroller: css`
-    overflow: hidden auto;
-  `,
-}));
-
 const Tools = memo(() => {
   const { t } = useTranslation('setting');
   const [modalOpen, setModalOpen] = useState(false);
   const [updating, setUpdating] = useState(false);
   const [activeTab, setActiveTab] = useState<TabType | null>(null);
   const { marketItems, installedPluginItems } = useControls({
-    setModalOpen,
     setUpdating,
   });
 
@@ -82,52 +51,26 @@ const Tools = memo(() => {
   return (
     <Suspense fallback={<Action disabled icon={Blocks} title={t('tools.title')} />}>
       <Action
-        dropdown={{
+        icon={Blocks}
+        loading={updating}
+        popover={{
+          content: (
+            <PopoverContent
+              activeTab={effectiveTab}
+              currentItems={currentItems}
+              enableKlavis={enableKlavis}
+              onOpenStore={() => setModalOpen(true)}
+              onTabChange={setActiveTab}
+            />
+          ),
           maxWidth: 320,
-          menu: {
-            items: [...currentItems],
-            style: {
-              // let only the custom scroller scroll
-              maxHeight: 'unset',
-              overflowY: 'visible',
+          minWidth: 320,
+          styles: {
+            content: {
+              padding: 0,
             },
           },
-          minHeight: enableKlavis ? 500 : undefined,
-          minWidth: 320,
-          popupRender: (menu) => (
-            <div className={styles.dropdown}>
-              <div className={styles.header}>
-                <Segmented
-                  block
-                  onChange={(v) => setActiveTab(v as TabType)}
-                  options={[
-                    {
-                      label: t('tools.tabs.all', { defaultValue: 'all' }),
-                      value: 'all',
-                    },
-                    {
-                      label: t('tools.tabs.installed', { defaultValue: 'Installed' }),
-                      value: 'installed',
-                    },
-                  ]}
-                  size="small"
-                  value={effectiveTab}
-                />
-              </div>
-              <div
-                className={styles.scroller}
-                style={{
-                  maxHeight: 500,
-                  minHeight: enableKlavis ? 500 : undefined,
-                }}
-              >
-                {menu}
-              </div>
-            </div>
-          ),
         }}
-        icon={Blocks}
-        loading={updating}
         showTooltip={false}
         title={t('tools.title')}
       />

package/src/features/ChatInput/ActionBar/Tools/useControls.tsx

@@ -7,7 +7,7 @@ import {
 import { Avatar, Flexbox, Icon, Image, type ItemType } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { ArrowRight, Store, ToyBrick } from 'lucide-react';
+import { ToyBrick } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -61,13 +61,7 @@ const LobehubSkillIcon = memo<Pick<LobehubSkillProviderType, 'icon' | 'label'>>(
 
 LobehubSkillIcon.displayName = 'LobehubSkillIcon';
 
-export const useControls = ({
-  setModalOpen,
-  setUpdating,
-}: {
-  setModalOpen: (open: boolean) => void;
-  setUpdating: (updating: boolean) => void;
-}) => {
+export const useControls = ({ setUpdating }: { setUpdating: (updating: boolean) => void }) => {
   const { t } = useTranslation('setting');
   const agentId = useAgentId();
   const list = useToolStore(pluginSelectors.installedPluginMetaList, isEqual);
@@ -234,18 +228,6 @@ export const useControls = ({
       ),
       type: 'group',
     },
-    {
-      type: 'divider',
-    },
-    {
-      extra: <Icon icon={ArrowRight} />,
-      icon: Store,
-      key: 'plugin-store',
-      label: t('tools.plugins.store'),
-      onClick: () => {
-        setModalOpen(true);
-      },
-    },
   ];
 
   // 已安装 tab 的 items - 只显示已安装的插件

package/src/features/ChatInput/ActionBar/Upload/ServerMode.tsx

@@ -21,7 +21,7 @@ import { preferenceSelectors } from '@/store/user/selectors';
 
 import { useAgentId } from '../../hooks/useAgentId';
 import Action from '../components/Action';
-import CheckboxItem from '../components/CheckbokWithLoading';
+import CheckboxItem from '../components/CheckboxWithLoading';
 
 const hotArea = css`
   &::before {

package/src/features/ChatInput/ActionBar/components/ActionPopover.tsx

@@ -84,6 +84,7 @@ const ActionPopover = memo<ActionPopoverProps>(
           content: contentClassName,
         }}
         content={popoverContent}
+        nativeButton={false}
         placement={isMobile ? 'top' : placement}
         styles={{
           ...(typeof resolvedStyles === 'object' ? resolvedStyles : {}),

package/src/features/ChatInput/ActionBar/components/CheckboxWithLoading.tsx

@@ -0,0 +1,60 @@
+import { Center, Checkbox, Flexbox, Icon } from '@lobehub/ui';
+import { Loader2 } from 'lucide-react';
+import { type ReactNode, memo, useState } from 'react';
+
+export interface CheckboxItemProps {
+  checked?: boolean;
+  hasPadding?: boolean;
+  id: string;
+  label?: ReactNode;
+  onUpdate: (id: string, enabled: boolean) => Promise<void>;
+}
+
+const CheckboxItem = memo<CheckboxItemProps>(
+  ({ id, onUpdate, label, checked, hasPadding = true }) => {
+    const [loading, setLoading] = useState(false);
+
+    const updateState = async () => {
+      setLoading(true);
+      await onUpdate(id, !checked);
+      setLoading(false);
+    };
+
+    return (
+      <Flexbox
+        align={'center'}
+        gap={24}
+        horizontal
+        justify={'space-between'}
+        onClick={async (e) => {
+          e.stopPropagation();
+          updateState();
+        }}
+        style={
+          hasPadding
+            ? {
+                paddingLeft: 8,
+              }
+            : void 0
+        }
+      >
+        {label || id}
+        {loading ? (
+          <Center width={18}>
+            <Icon icon={Loader2} spin />
+          </Center>
+        ) : (
+          <Checkbox
+            checked={checked}
+            onClick={async (e) => {
+              e.stopPropagation();
+              await updateState();
+            }}
+          />
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+export default CheckboxItem;

package/src/features/ModelSwitchPanel/index.tsx

@@ -43,6 +43,7 @@ const ModelSwitchPanel = memo<ModelSwitchPanelProps>(
               provider={providerProp}
             />
           }
+          nativeButton={false}
           onOpenChange={handleOpenChange}
           open={isOpen}
           placement={placement}

package/src/locales/default/subscription.ts

@@ -278,7 +278,7 @@ export default {
     '{{name}} has always adhered to open source principles. For professional developers, you can use all open source capabilities through self-deployment of the community version. In {{cloud}}, we provide all registered users with {{credit}} free computing credits per month, ready to use without complex configuration. If you need more usage, you can subscribe to {{starter}}, {{premium}} or {{ultimate}}.',
   'qa.list.free.q': 'Can {{name}} be used for free?',
   'qa.list.limit.a':
-    '{{cloud}} subscription plans are divided into {{starter}}, {{premium}} and {{ultimate}}, each providing different computing credits. If your current plan credits are insufficient, we recommend upgrading. Alternatively, you can set up a custom model API key to use API credits purchased from other sources.',
+    '{{cloud}} subscription plans are divided into {{starter}}, {{premium}} and {{ultimate}}, each providing different computing credits. If your current plan credits are insufficient, we recommend upgrading. You can also purchase credit packages on the <fundsLink>"{{funds}}"</fundsLink> page for pay-as-you-go usage. Alternatively, you can set up a custom model API key to use API credits purchased from other sources.',
   'qa.list.limit.q': 'What if I run out of computing credits?',
   'qa.list.management.a':
     'On the {{subscribe}} page, you can "Upgrade / Downgrade" your current subscription plan, or switch between yearly and monthly billing. Through "{{usage}}-{{management}}" you can go to Stripe for subscription management, and you can cancel your subscription at any time. After cancellation, you will be automatically downgraded to the free version when your current plan expires.',

package/src/services/__tests__/models.test.ts

@@ -82,7 +82,8 @@ describe('ModelsService', () => {
       await modelsService.getModels('custom-provider');
 
       expect(mockedResolveRuntimeProvider).toHaveBeenCalledWith('custom-provider');
-      expect(fetch).toHaveBeenCalledWith('/webapi/models/openai', { headers: {} });
+      // API endpoint uses original provider, allowing server to query correct config
+      expect(fetch).toHaveBeenCalledWith('/webapi/models/custom-provider', { headers: {} });
       expect(mockedInitializeWithClientStore).not.toHaveBeenCalled();
     });
 

package/src/services/chat/index.ts

@@ -402,7 +402,7 @@ class ChatService {
       responseAnimation,
     ].reduce((acc, cur) => merge(acc, standardizeAnimationStyle(cur)), {});
 
-    return fetchSSE(API_ENDPOINTS.chat(sdkType), {
+    return fetchSSE(API_ENDPOINTS.chat(provider), {
       body: JSON.stringify(payload),
       fetcher: fetcher,
       headers,

package/src/services/models.ts

@@ -49,7 +49,7 @@ export class ModelsService {
         return agentRuntime.models();
       }
 
-      const res = await fetch(API_ENDPOINTS.models(runtimeProvider), { headers });
+      const res = await fetch(API_ENDPOINTS.models(provider), { headers });
       if (!res.ok) return;
 
       return res.json();
@@ -87,7 +87,7 @@ export class ModelsService {
         });
         res = (await agentRuntime.pullModel({ model }, { signal }))!;
       } else {
-        res = await fetch(API_ENDPOINTS.modelPull(runtimeProvider), {
+        res = await fetch(API_ENDPOINTS.modelPull(provider), {
           body: JSON.stringify({ model }),
           headers,
           method: 'POST',

package/vitest.config.mts

@@ -92,7 +92,6 @@ export default defineConfig({
       '**/e2e/**',
     ],
     globals: true,
-    reporters: ['default', 'blob'],
     server: {
       deps: {
         inline: ['vitest-canvas-mock', '@lobehub/ui', '@lobehub/fluent-emoji'],

package/src/features/ChatInput/ActionBar/components/CheckbokWithLoading.tsx

@@ -1,53 +0,0 @@
-import { Center, Flexbox, Icon , Checkbox } from '@lobehub/ui';
-import { Loader2 } from 'lucide-react';
-import { type ReactNode, memo, useState } from 'react';
-
-export interface CheckboxItemProps {
-  checked?: boolean;
-  id: string;
-  label?: ReactNode;
-  onUpdate: (id: string, enabled: boolean) => Promise<void>;
-}
-
-const CheckboxItem = memo<CheckboxItemProps>(({ id, onUpdate, label, checked }) => {
-  const [loading, setLoading] = useState(false);
-
-  const updateState = async () => {
-    setLoading(true);
-    await onUpdate(id, !checked);
-    setLoading(false);
-  };
-
-  return (
-    <Flexbox
-      align={'center'}
-      gap={24}
-      horizontal
-      justify={'space-between'}
-      onClick={async (e) => {
-        e.stopPropagation();
-        updateState();
-      }}
-      style={{
-        paddingLeft: 8,
-      }}
-    >
-      {label || id}
-      {loading ? (
-        <Center width={18}>
-          <Icon icon={Loader2} spin />
-        </Center>
-      ) : (
-        <Checkbox
-          checked={checked}
-          onClick={async (e) => {
-            e.stopPropagation();
-            await updateState();
-          }}
-        />
-      )}
-    </Flexbox>
-  );
-});
-
-export default CheckboxItem;