@lobehub/chat 1.43.6 → 1.44.0

package/src/store/aiInfra/slices/aiModel/action.ts

@@ -0,0 +1,146 @@
+import isEqual from 'fast-deep-equal';
+import { SWRResponse, mutate } from 'swr';
+import { StateCreator } from 'zustand/vanilla';
+
+import { useClientDataSWR } from '@/libs/swr';
+import { aiModelService } from '@/services/aiModel';
+import { AiInfraStore } from '@/store/aiInfra/store';
+import {
+  AiModelSortMap,
+  AiProviderModelListItem,
+  CreateAiModelParams,
+  ToggleAiModelEnableParams,
+} from '@/types/aiModel';
+
+const FETCH_AI_PROVIDER_MODEL_LIST_KEY = 'FETCH_AI_PROVIDER_MODELS';
+
+export interface AiModelAction {
+  batchToggleAiModels: (ids: string[], enabled: boolean) => Promise<void>;
+  batchUpdateAiModels: (models: AiProviderModelListItem[]) => Promise<void>;
+  clearRemoteModels: (provider: string) => Promise<void>;
+  createNewAiModel: (params: CreateAiModelParams) => Promise<void>;
+  fetchRemoteModelList: (providerId: string) => Promise<void>;
+  internal_toggleAiModelLoading: (id: string, loading: boolean) => void;
+
+  refreshAiModelList: () => Promise<void>;
+  removeAiModel: (id: string, providerId: string) => Promise<void>;
+  toggleModelEnabled: (params: Omit<ToggleAiModelEnableParams, 'providerId'>) => Promise<void>;
+  updateAiModelsConfig: (
+    id: string,
+    providerId: string,
+    data: Partial<AiProviderModelListItem>,
+  ) => Promise<void>;
+  updateAiModelsSort: (providerId: string, items: AiModelSortMap[]) => Promise<void>;
+
+  useFetchAiProviderModels: (id: string) => SWRResponse<AiProviderModelListItem[]>;
+}
+
+export const createAiModelSlice: StateCreator<
+  AiInfraStore,
+  [['zustand/devtools', never]],
+  [],
+  AiModelAction
+> = (set, get) => ({
+  batchToggleAiModels: async (ids, enabled) => {
+    const { activeAiProvider } = get();
+    if (!activeAiProvider) return;
+
+    await aiModelService.batchToggleAiModels(activeAiProvider, ids, enabled);
+    await get().refreshAiModelList();
+  },
+  batchUpdateAiModels: async (models) => {
+    const { activeAiProvider: id } = get();
+    if (!id) return;
+
+    await aiModelService.batchUpdateAiModels(id, models);
+    await get().refreshAiModelList();
+  },
+  clearRemoteModels: async (provider) => {
+    await aiModelService.clearRemoteModels(provider);
+    await get().refreshAiModelList();
+  },
+  createNewAiModel: async (data) => {
+    await aiModelService.createAiModel(data);
+    await get().refreshAiModelList();
+  },
+  fetchRemoteModelList: async (providerId) => {
+    const { modelsService } = await import('@/services/models');
+
+    const data = await modelsService.getChatModels(providerId);
+    if (data) {
+      await get().batchUpdateAiModels(
+        data.map((model) => ({
+          ...model,
+          abilities: {
+            files: model.files,
+            functionCall: model.functionCall,
+            vision: model.vision,
+          },
+          enabled: model.enabled || false,
+          source: 'remote',
+          type: 'chat',
+        })),
+      );
+
+      await get().refreshAiModelList();
+    }
+  },
+  internal_toggleAiModelLoading: (id, loading) => {
+    set(
+      (state) => {
+        if (loading) return { aiModelLoadingIds: [...state.aiModelLoadingIds, id] };
+
+        return { aiModelLoadingIds: state.aiModelLoadingIds.filter((i) => i !== id) };
+      },
+      false,
+      'toggleAiModelLoading',
+    );
+  },
+  refreshAiModelList: async () => {
+    await mutate([FETCH_AI_PROVIDER_MODEL_LIST_KEY, get().activeAiProvider]);
+    // make refresh provide runtime state async, not block
+    get().refreshAiProviderRuntimeState();
+  },
+  removeAiModel: async (id, providerId) => {
+    await aiModelService.deleteAiModel({ id, providerId });
+    await get().refreshAiModelList();
+  },
+  toggleModelEnabled: async (params) => {
+    const { activeAiProvider } = get();
+    if (!activeAiProvider) return;
+
+    get().internal_toggleAiModelLoading(params.id, true);
+
+    await aiModelService.toggleModelEnabled({ ...params, providerId: activeAiProvider });
+    await get().refreshAiModelList();
+
+    get().internal_toggleAiModelLoading(params.id, false);
+  },
+
+  updateAiModelsConfig: async (id, providerId, data) => {
+    await aiModelService.updateAiModel(id, providerId, data);
+    await get().refreshAiModelList();
+  },
+  updateAiModelsSort: async (id, items) => {
+    await aiModelService.updateAiModelOrder(id, items);
+    await get().refreshAiModelList();
+  },
+
+  useFetchAiProviderModels: (id) =>
+    useClientDataSWR<AiProviderModelListItem[]>(
+      [FETCH_AI_PROVIDER_MODEL_LIST_KEY, id],
+      ([, id]) => aiModelService.getAiProviderModelList(id as string),
+      {
+        onSuccess: (data) => {
+          // no need to update list if the list have been init and data is the same
+          if (get().isAiModelListInit && isEqual(data, get().aiProviderModelList)) return;
+
+          set(
+            { aiProviderModelList: data, isAiModelListInit: true },
+            false,
+            `useFetchAiProviderModels/${id}`,
+          );
+        },
+      },
+    ),
+});

package/src/store/aiInfra/slices/aiModel/index.ts

@@ -0,0 +1,3 @@
+export * from './action';
+export * from './initialState';
+export * from './selectors';

package/src/store/aiInfra/slices/aiModel/initialState.ts

@@ -0,0 +1,14 @@
+import { AiProviderModelListItem } from '@/types/aiModel';
+
+export interface AIModelsState {
+  aiModelLoadingIds: string[];
+  aiProviderModelList: AiProviderModelListItem[];
+  isAiModelListInit?: boolean;
+  modelSearchKeyword: string;
+}
+
+export const initialAIModelState: AIModelsState = {
+  aiModelLoadingIds: [],
+  aiProviderModelList: [],
+  modelSearchKeyword: '',
+};

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

@@ -0,0 +1,63 @@
+import { AIProviderStoreState } from '@/store/aiInfra/initialState';
+import { AiModelSourceEnum } from '@/types/aiModel';
+
+// List
+const enabledAiProviderModelList = (s: AIProviderStoreState) =>
+  s.aiProviderModelList.filter((item) => item.enabled);
+
+const disabledAiProviderModelList = (s: AIProviderStoreState) =>
+  s.aiProviderModelList.filter((item) => !item.enabled);
+
+const filteredAiProviderModelList = (s: AIProviderStoreState) => {
+  const keyword = s.modelSearchKeyword.toLowerCase().trim();
+
+  return s.aiProviderModelList.filter(
+    (model) =>
+      model.id.toLowerCase().includes(keyword) ||
+      model.displayName?.toLowerCase().includes(keyword),
+  );
+};
+
+const totalAiProviderModelList = (s: AIProviderStoreState) => s.aiProviderModelList.length;
+const isEmptyAiProviderModelList = (s: AIProviderStoreState) => totalAiProviderModelList(s) === 0;
+
+const hasRemoteModels = (s: AIProviderStoreState) =>
+  s.aiProviderModelList.some((m) => m.source === AiModelSourceEnum.Remote);
+
+const isModelEnabled = (id: string) => (s: AIProviderStoreState) =>
+  enabledAiProviderModelList(s).some((i) => i.id === id);
+
+const isModelLoading = (id: string) => (s: AIProviderStoreState) =>
+  s.aiModelLoadingIds.includes(id);
+
+const getAiModelById = (id: string) => (s: AIProviderStoreState) =>
+  s.aiProviderModelList.find((i) => i.id === id);
+
+const getEnabledModelById = (id: string) => (s: AIProviderStoreState) =>
+  s.enabledAiModels?.find((i) => i.id === id);
+
+const isModelSupportToolUse = (id: string) => (s: AIProviderStoreState) => {
+  const model = getEnabledModelById(id)(s);
+
+  return model?.abilities?.functionCall;
+};
+
+const isModelSupportVision = (id: string) => (s: AIProviderStoreState) => {
+  const model = getEnabledModelById(id)(s);
+
+  return model?.abilities?.vision;
+};
+
+export const aiModelSelectors = {
+  disabledAiProviderModelList,
+  enabledAiProviderModelList,
+  filteredAiProviderModelList,
+  getAiModelById,
+  hasRemoteModels,
+  isEmptyAiProviderModelList,
+  isModelEnabled,
+  isModelLoading,
+  isModelSupportToolUse,
+  isModelSupportVision,
+  totalAiProviderModelList,
+};

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

@@ -0,0 +1,208 @@
+import { uniqBy } from 'lodash-es';
+import { SWRResponse, mutate } from 'swr';
+import { StateCreator } from 'zustand/vanilla';
+
+import { DEFAULT_MODEL_PROVIDER_LIST } from '@/config/modelProviders';
+import { isServerMode } from '@/const/version';
+import { useClientDataSWR } from '@/libs/swr';
+import { aiProviderService } from '@/services/aiProvider';
+import { AiInfraStore } from '@/store/aiInfra/store';
+import { ModelAbilities } from '@/types/aiModel';
+import {
+  AiProviderDetailItem,
+  AiProviderListItem,
+  AiProviderRuntimeState,
+  AiProviderSortMap,
+  AiProviderSourceEnum,
+  CreateAiProviderParams,
+  UpdateAiProviderConfigParams,
+  UpdateAiProviderParams,
+} from '@/types/aiProvider';
+
+enum AiProviderSwrKey {
+  fetchAiProviderItem = 'FETCH_AI_PROVIDER_ITEM',
+  fetchAiProviderList = 'FETCH_AI_PROVIDER',
+  fetchAiProviderRuntimeState = 'FETCH_AI_PROVIDER_RUNTIME_STATE',
+}
+
+export interface AiProviderAction {
+  createNewAiProvider: (params: CreateAiProviderParams) => Promise<void>;
+  deleteAiProvider: (id: string) => Promise<void>;
+  internal_toggleAiProviderLoading: (id: string, loading: boolean) => void;
+  refreshAiProviderDetail: () => Promise<void>;
+  refreshAiProviderList: () => Promise<void>;
+  refreshAiProviderRuntimeState: () => Promise<void>;
+  removeAiProvider: (id: string) => Promise<void>;
+  toggleProviderEnabled: (id: string, enabled: boolean) => Promise<void>;
+  updateAiProvider: (id: string, value: UpdateAiProviderParams) => Promise<void>;
+  updateAiProviderConfig: (id: string, value: UpdateAiProviderConfigParams) => Promise<void>;
+  updateAiProviderSort: (items: AiProviderSortMap[]) => Promise<void>;
+
+  useFetchAiProviderItem: (id: string) => SWRResponse<AiProviderDetailItem | undefined>;
+  useFetchAiProviderList: (params?: { suspense?: boolean }) => SWRResponse<AiProviderListItem[]>;
+  /**
+   * fetch provider keyVaults and user enabled model list
+   * @param isLoginOnInit
+   */
+  useFetchAiProviderRuntimeState: (
+    isLoginOnInit: boolean | undefined,
+  ) => SWRResponse<AiProviderRuntimeState | undefined>;
+}
+
+export const createAiProviderSlice: StateCreator<
+  AiInfraStore,
+  [['zustand/devtools', never]],
+  [],
+  AiProviderAction
+> = (set, get) => ({
+  createNewAiProvider: async (params) => {
+    await aiProviderService.createAiProvider({ ...params, source: AiProviderSourceEnum.Custom });
+    await get().refreshAiProviderList();
+  },
+  deleteAiProvider: async (id: string) => {
+    await aiProviderService.deleteAiProvider(id);
+
+    await get().refreshAiProviderList();
+  },
+  internal_toggleAiProviderLoading: (id, loading) => {
+    set(
+      (state) => {
+        if (loading) return { aiProviderLoadingIds: [...state.aiProviderLoadingIds, id] };
+
+        return { aiProviderLoadingIds: state.aiProviderLoadingIds.filter((i) => i !== id) };
+      },
+      false,
+      'toggleAiProviderLoading',
+    );
+  },
+  refreshAiProviderDetail: async () => {
+    await mutate([AiProviderSwrKey.fetchAiProviderItem, get().activeAiProvider]);
+    await get().refreshAiProviderRuntimeState();
+  },
+  refreshAiProviderList: async () => {
+    await mutate(AiProviderSwrKey.fetchAiProviderList);
+    await get().refreshAiProviderRuntimeState();
+  },
+  refreshAiProviderRuntimeState: async () => {
+    await mutate(AiProviderSwrKey.fetchAiProviderRuntimeState);
+  },
+  removeAiProvider: async (id) => {
+    await aiProviderService.deleteAiProvider(id);
+    await get().refreshAiProviderList();
+  },
+
+  toggleProviderEnabled: async (id: string, enabled: boolean) => {
+    get().internal_toggleAiProviderLoading(id, true);
+    await aiProviderService.toggleProviderEnabled(id, enabled);
+    await get().refreshAiProviderList();
+
+    get().internal_toggleAiProviderLoading(id, false);
+  },
+
+  updateAiProvider: async (id, value) => {
+    get().internal_toggleAiProviderLoading(id, true);
+    await aiProviderService.updateAiProvider(id, value);
+    await get().refreshAiProviderList();
+    await get().refreshAiProviderDetail();
+
+    get().internal_toggleAiProviderLoading(id, false);
+  },
+
+  updateAiProviderConfig: async (id, value) => {
+    get().internal_toggleAiProviderLoading(id, true);
+    await aiProviderService.updateAiProviderConfig(id, value);
+    await get().refreshAiProviderDetail();
+
+    get().internal_toggleAiProviderLoading(id, false);
+  },
+
+  updateAiProviderSort: async (items) => {
+    await aiProviderService.updateAiProviderOrder(items);
+    await get().refreshAiProviderList();
+  },
+  useFetchAiProviderItem: (id) =>
+    useClientDataSWR<AiProviderDetailItem | undefined>(
+      [AiProviderSwrKey.fetchAiProviderItem, id],
+      () => aiProviderService.getAiProviderById(id),
+      {
+        onSuccess: (data) => {
+          if (!data) return;
+
+          set({ activeAiProvider: id, aiProviderDetail: data }, false, 'useFetchAiProviderItem');
+        },
+      },
+    ),
+  useFetchAiProviderList: () =>
+    useClientDataSWR<AiProviderListItem[]>(
+      AiProviderSwrKey.fetchAiProviderList,
+      () => aiProviderService.getAiProviderList(),
+      {
+        fallbackData: [],
+        onSuccess: (data) => {
+          if (!get().initAiProviderList) {
+            set(
+              { aiProviderList: data, initAiProviderList: true },
+              false,
+              'useFetchAiProviderList/init',
+            );
+            return;
+          }
+
+          set({ aiProviderList: data }, false, 'useFetchAiProviderList/refresh');
+        },
+      },
+    ),
+
+  useFetchAiProviderRuntimeState: (isLogin) =>
+    useClientDataSWR<AiProviderRuntimeState | undefined>(
+      isServerMode ? [AiProviderSwrKey.fetchAiProviderRuntimeState, isLogin] : null,
+      async ([, isLogin]) => {
+        if (isLogin) return aiProviderService.getAiProviderRuntimeState();
+
+        const { LOBE_DEFAULT_MODEL_LIST } = await import('@/config/aiModels');
+        return {
+          enabledAiModels: LOBE_DEFAULT_MODEL_LIST.filter((m) => m.enabled),
+          enabledAiProviders: DEFAULT_MODEL_PROVIDER_LIST.filter(
+            (provider) => provider.enabled,
+          ).map((item) => ({ id: item.id, name: item.name, source: 'builtin' })),
+          runtimeConfig: {},
+        };
+      },
+      {
+        onSuccess: (data) => {
+          if (!data) return;
+
+          const getModelListByType = (providerId: string, type: string) => {
+            const models = data.enabledAiModels
+              .filter((model) => model.providerId === providerId && model.type === type)
+              .map((model) => ({
+                abilities: (model.abilities || {}) as ModelAbilities,
+                contextWindowTokens: model.contextWindowTokens,
+                displayName: model.displayName ?? '',
+                id: model.id,
+              }));
+
+            return uniqBy(models, 'id');
+          };
+
+          // 3. 组装最终数据结构
+          const enabledChatModelList = data.enabledAiProviders.map((provider) => ({
+            children: getModelListByType(provider.id, 'chat'),
+            id: provider.id,
+            name: provider.name || provider.id,
+          }));
+
+          set(
+            {
+              aiProviderRuntimeConfig: data.runtimeConfig,
+              enabledAiModels: data.enabledAiModels,
+              enabledAiProviders: data.enabledAiProviders,
+              enabledChatModelList,
+            },
+            false,
+            'useInitAiProviderKeyVaults',
+          );
+        },
+      },
+    ),
+});

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

@@ -0,0 +1,3 @@
+export * from './action';
+export * from './initialState';
+export * from './selectors';

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

@@ -0,0 +1,32 @@
+import { EnabledProviderWithModels } from '@/types/aiModel';
+import {
+  AiProviderDetailItem,
+  AiProviderListItem,
+  AiProviderRuntimeConfig,
+  EnabledAiModel,
+  EnabledProvider,
+} from '@/types/aiProvider';
+
+export interface AIProviderState {
+  activeAiProvider?: string;
+  activeProviderModelList: any[];
+  aiProviderDetail?: AiProviderDetailItem | null;
+  aiProviderList: AiProviderListItem[];
+  aiProviderLoadingIds: string[];
+  aiProviderRuntimeConfig: Record<string, AiProviderRuntimeConfig>;
+  enabledAiModels?: EnabledAiModel[];
+  enabledAiProviders?: EnabledProvider[];
+  // used for select
+  enabledChatModelList?: EnabledProviderWithModels[];
+  initAiProviderList: boolean;
+  providerSearchKeyword: string;
+}
+
+export const initialAIProviderState: AIProviderState = {
+  activeProviderModelList: [],
+  aiProviderList: [],
+  aiProviderLoadingIds: [],
+  aiProviderRuntimeConfig: {},
+  initAiProviderList: false,
+  providerSearchKeyword: '',
+};

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

@@ -0,0 +1,99 @@
+import { isProviderDisableBroswerRequest } from '@/config/modelProviders';
+import { AIProviderStoreState } from '@/store/aiInfra/initialState';
+import { AiProviderRuntimeConfig } from '@/types/aiProvider';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
+
+// List
+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);
+
+const isProviderEnabled = (id: string) => (s: AIProviderStoreState) =>
+  enabledAiProviderList(s).some((i) => i.id === id);
+
+const isProviderLoading = (id: string) => (s: AIProviderStoreState) =>
+  s.aiProviderLoadingIds.includes(id);
+
+const activeProviderConfig = (s: AIProviderStoreState) => s.aiProviderDetail;
+
+// Detail
+
+const isAiProviderConfigLoading = (id: string) => (s: AIProviderStoreState) =>
+  s.activeAiProvider !== id;
+
+const providerWhitelist = new Set(['ollama']);
+
+const activeProviderKeyVaults = (s: AIProviderStoreState) => activeProviderConfig(s)?.keyVaults;
+
+const isActiveProviderEndpointNotEmpty = (s: AIProviderStoreState) => {
+  const vault = activeProviderKeyVaults(s);
+  return !!vault?.baseURL || !!vault?.endpoint;
+};
+
+const isActiveProviderApiKeyNotEmpty = (s: AIProviderStoreState) => {
+  const vault = activeProviderKeyVaults(s);
+  return !!vault?.apiKey || !!vault?.accessKeyId || !!vault?.secretAccessKey;
+};
+
+/**
+ * @description The conditions to enable client fetch
+ * 1. If no baseUrl and apikey input, force on Server.
+ * 2. If only contains baseUrl, force on Client
+ * 3. Follow the user settings.
+ * 4. On Server, by default.
+ */
+const isProviderFetchOnClient =
+  (provider: GlobalLLMProviderKey | string) => (s: AIProviderStoreState) => {
+    const config = activeProviderConfig(s);
+
+    // If the provider already disable broswer request in model config, force on Server.
+    if (isProviderDisableBroswerRequest(provider)) return false;
+
+    // If the provider in the whitelist, follow the user settings
+    if (providerWhitelist.has(provider) && typeof config?.fetchOnClient !== 'undefined')
+      return config?.fetchOnClient;
+
+    // 1. If no baseUrl and apikey input, force on Server.
+    const isProviderEndpointNotEmpty = isActiveProviderEndpointNotEmpty(s);
+    const isProviderApiKeyNotEmpty = isActiveProviderApiKeyNotEmpty(s);
+    if (!isProviderEndpointNotEmpty && !isProviderApiKeyNotEmpty) return false;
+
+    // 2. If only contains baseUrl, force on Client
+    if (isProviderEndpointNotEmpty && !isProviderApiKeyNotEmpty) return true;
+
+    // 3. Follow the user settings.
+    if (typeof config?.fetchOnClient !== 'undefined') return config?.fetchOnClient;
+
+    // 4. On Server, by default.
+    return false;
+  };
+
+const providerKeyVaults = (provider: string | undefined) => (s: AIProviderStoreState) => {
+  if (!provider) return undefined;
+
+  return s.aiProviderRuntimeConfig?.[provider]?.keyVaults;
+};
+
+const providerConfigById =
+  (id: string) =>
+  (s: AIProviderStoreState): AiProviderRuntimeConfig | undefined => {
+    if (!id) return undefined;
+
+    return s.aiProviderRuntimeConfig?.[id];
+  };
+
+export const aiProviderSelectors = {
+  activeProviderConfig,
+  disabledAiProviderList,
+  enabledAiProviderList,
+  isActiveProviderApiKeyNotEmpty,
+  isActiveProviderEndpointNotEmpty,
+  isAiProviderConfigLoading,
+  isProviderEnabled,
+  isProviderFetchOnClient,
+  isProviderLoading,
+  providerConfigById,
+  providerKeyVaults,
+};

package/src/store/aiInfra/store.ts

@@ -0,0 +1,25 @@
+import { shallow } from 'zustand/shallow';
+import { createWithEqualityFn } from 'zustand/traditional';
+import { StateCreator } from 'zustand/vanilla';
+
+import { createDevtools } from '../middleware/createDevtools';
+import { AIProviderStoreState, initialState } from './initialState';
+import { AiModelAction, createAiModelSlice } from './slices/aiModel';
+import { AiProviderAction, createAiProviderSlice } from './slices/aiProvider';
+
+//  ===============  聚合 createStoreFn ============ //
+
+export interface AiInfraStore extends AIProviderStoreState, AiProviderAction, AiModelAction {
+  /* empty */
+}
+
+const createStore: StateCreator<AiInfraStore, [['zustand/devtools', never]]> = (...parameters) => ({
+  ...initialState,
+  ...createAiModelSlice(...parameters),
+  ...createAiProviderSlice(...parameters),
+});
+
+//  ===============  实装 useStore ============ //
+const devtools = createDevtools('aiInfra');
+
+export const useAiInfraStore = createWithEqualityFn<AiInfraStore>()(devtools(createStore), shallow);

package/src/store/global/initialState.ts

@@ -26,6 +26,7 @@ export enum SettingsTabs {
   Agent = 'agent',
   Common = 'common',
   LLM = 'llm',
+  Provider = 'provider',
   Sync = 'sync',
   SystemAgent = 'system-agent',
   TTS = 'tts',

package/src/store/serverConfig/selectors.test.ts

@@ -34,6 +34,7 @@ describe('featureFlagsSelectors', () => {
       enableCheckUpdates: true,
       showWelcomeSuggest: true,
       enableClerkSignUp: true,
+      showProvider: true,
       showMarket: true,
       showPinList: false,
       enableSTT: true,

package/src/styles/global.ts

@@ -36,9 +36,9 @@ export default ({ token }: { prefixCls: string; token: Theme }) => css`
     }
 
     :hover::-webkit-scrollbar-thumb {
+      border: 3px solid transparent;
       background-color: ${token.colorText};
       background-clip: content-box;
-      border: 3px solid transparent;
     }
 
     ::-webkit-scrollbar-track {