fix: 添加 model select

src/app/role/RoleEdit/LangModel/ModelSelect/index.tsx

@@ -1,21 +1,71 @@
-import { memo } from 'react';
+import { Select, SelectProps } from 'antd';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { memo, useMemo } from 'react';
 
-import Select from '@/features/ModelSelect';
-import { agentSelectors, useAgentStore } from '@/store/agent';
+import { ModelItemRender, ProviderItemRender } from '@/components/ModelSelect';
+import { useSettingStore } from '@/store/setting';
+import { modelProviderSelectors } from '@/store/setting/selectors';
+import { ModelProviderCard } from '@/types/llm';
 
-const ModelSelect = memo(() => {
-  const [model, provider, updateAgentConfig] = useAgentStore((s) => [
-    agentSelectors.currentAgentItem(s)?.model,
-    agentSelectors.currentAgentItem(s)?.provider,
-    s.updateAgentConfig,
-  ]);
+const useStyles = createStyles(({ css, prefixCls }) => ({
+  select: css`
+    &.${prefixCls}-select-dropdown .${prefixCls}-select-item-option-grouped {
+      padding-inline-start: 12px;
+    }
+  `,
+}));
+
+interface ModelOption {
+  label: any;
+  provider: string;
+  value: string;
+}
+
+interface ModelSelectProps {
+  onChange?: (props: { model: string; provider: string }) => void;
+  showAbility?: boolean;
+  value?: { model: string; provider?: string };
+}
+
+const ModelSelect = memo<ModelSelectProps>(({ value, onChange, showAbility = true }) => {
+  const enabledList = useSettingStore(
+    modelProviderSelectors.modelProviderListForModelSelect,
+    isEqual,
+  );
+
+  const { styles } = useStyles();
+
+  const options = useMemo<SelectProps['options']>(() => {
+    const getChatModels = (provider: ModelProviderCard) =>
+      provider.chatModels.map((model) => ({
+        label: <ModelItemRender {...model} showInfoTag={showAbility} />,
+        provider: provider.id,
+        value: `${provider.id}/${model.id}`,
+      }));
+
+    if (enabledList.length === 1) {
+      const provider = enabledList[0];
+
+      return getChatModels(provider);
+    }
+
+    return enabledList.map((provider) => ({
+      label: <ProviderItemRender name={provider.name} provider={provider.id} />,
+      options: getChatModels(provider),
+    }));
+  }, [enabledList]);
 
   return (
     <Select
-      onChange={(props) => {
-        updateAgentConfig(props);
+      onChange={(value, option) => {
+        const model = value.split('/').slice(1).join('/');
+        onChange?.({ model, provider: (option as unknown as ModelOption).provider });
       }}
-      value={{ model, provider }}
+      options={options}
+      popupClassName={styles.select}
+      popupMatchSelectWidth={false}
+      value={`${value?.provider}/${value?.model}`}
     />
   );
 });

src/layout/StoreHydration.tsx

@@ -6,7 +6,7 @@ import { memo, useEffect } from 'react';
 import { AGENT_STORAGE_KEY, useAgentStore } from '@/store/agent';
 import { DANCE_STORAGE_KEY } from '@/store/dance';
 import { SESSION_STORAGE_KEY } from '@/store/session';
-import { SETTING_STORAGE_KEY } from '@/store/setting';
+import { SETTING_STORAGE_KEY, useSettingStore } from '@/store/setting';
 import { vidolStorage } from '@/utils/storage';
 
 const MIGRATION_KEY = 'MIGRATE_TO_INDEXED_DB';
@@ -30,6 +30,8 @@ const migrate = async () => {
 const StoreHydration = () => {
   const router = useRouter();
 
+  const refreshDefaultModelProviderList = useSettingStore((s) => s.refreshDefaultModelProviderList);
+
   useEffect(() => {
     // refs: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#hashydrated
     migrate().then(() => {
@@ -44,6 +46,9 @@ const StoreHydration = () => {
     router.prefetch('/market');
   }, [router]);
 
+  // 刷新默认模型提供者列表
+  refreshDefaultModelProviderList();
+
   return null;
 };