From 92e92faa7fd983b93ab1a04de68f9022336a86df Mon Sep 17 00:00:00 2001
From: "yukun.wyk" <yukun.wyk@antgroup.com>
Date: Sun, 15 Sep 2024 22:30:57 +0800
Subject: [PATCH] feat(ui): allow model providers selected in agent to use the
 default model_name

---
 web-apps/ui/src/modules/model/llm-manager.ts  |  11 +-
 web-apps/ui/src/modules/model/llm-model.ts    |  15 +-
 .../src/modules/model/llm-provider-manager.ts |  12 +-
 .../modules/model/model-selector/index.tsx    | 152 ++++++++----------
 web-apps/ui/src/modules/model/protocol.ts     |   2 +-
 5 files changed, 93 insertions(+), 99 deletions(-)

diff --git a/web-apps/ui/src/modules/model/llm-manager.ts b/web-apps/ui/src/modules/model/llm-manager.ts
index 6beae27..1f52cd8 100644
--- a/web-apps/ui/src/modules/model/llm-manager.ts
+++ b/web-apps/ui/src/modules/model/llm-manager.ts
@@ -11,16 +11,15 @@ export class LLMManager {
   @inject(LLMProviderManager) protected providerManager: LLMProviderManager;
 
   get default(): LLMModel | undefined {
-    const llm = this.providerManager.models.find((item) => item.models.length > 0);
-    if (!llm) {
+    const defaultProvider = this.providerManager.models[0];
+    if (!defaultProvider) {
       return undefined;
     }
-    const name = llm.models[0];
-    const meta = llm.toSingleMeta(name);
-    if (!meta) {
+    const llm = defaultProvider.toSingleMeta(defaultProvider.model_name[0]);
+    if (!llm) {
       return undefined;
     }
-    return this.factory(meta);
+    return this.factory(llm);
   }
 
   updateFromProvider = () => {
diff --git a/web-apps/ui/src/modules/model/llm-model.ts b/web-apps/ui/src/modules/model/llm-model.ts
index c90f2fc..c9d5093 100644
--- a/web-apps/ui/src/modules/model/llm-model.ts
+++ b/web-apps/ui/src/modules/model/llm-model.ts
@@ -37,9 +37,17 @@ export class LLMProvider implements LLMProviderMeta {
     this.id = meta.id;
     this.nickname = meta.nickname;
     this.model_name = meta.model_name;
+    this.temperature = meta.temperature;
   }
 
-  toSingleMeta = (name: string): LLMMeta | undefined => {
+  toSingleMeta = (name?: string): LLMMeta | undefined => {
+    if (!name) {
+      if (this.models.length === 0) {
+        const meta = this.toMeta();
+        return { ...meta, model_name: [] };
+      }
+      return undefined;
+    }
     if (!this.models.includes(name)) {
       return undefined;
     }
@@ -58,6 +66,9 @@ export class LLMProvider implements LLMProviderMeta {
   };
 
   toSingleMetas = () => {
+    if (this.models.length === 0) {
+      return [this.toSingleMeta()];
+    }
     return this.models.map(this.toSingleMeta);
   };
 }
@@ -70,7 +81,7 @@ export class LLMModel implements LLMMeta {
   nickname: string;
 
   @prop()
-  model_name: [string];
+  model_name: [string] | [];
 
   get name(): string {
     return this.nickname;
diff --git a/web-apps/ui/src/modules/model/llm-provider-manager.ts b/web-apps/ui/src/modules/model/llm-provider-manager.ts
index c993b8a..5957460 100644
--- a/web-apps/ui/src/modules/model/llm-provider-manager.ts
+++ b/web-apps/ui/src/modules/model/llm-provider-manager.ts
@@ -26,7 +26,17 @@ export class LLMProviderManager {
 
   updateProviders = async () => {
     const metas = await this.getProviderssMeta();
-    this.models = metas.map((item) => this.getOrCreate(item));
+    this.models = metas
+      .map((item) => this.getOrCreate(item))
+      .sort((a, b) => {
+        if (b.model_name.length === 0) {
+          return 1;
+        }
+        if (a.model_name.length === 0) {
+          return -1;
+        }
+        return 0;
+      });
   };
 
   getOrCreate = (option: LLMProviderMeta): LLMProvider => {
diff --git a/web-apps/ui/src/modules/model/model-selector/index.tsx b/web-apps/ui/src/modules/model/model-selector/index.tsx
index eaa2d1b..cf7f287 100644
--- a/web-apps/ui/src/modules/model/model-selector/index.tsx
+++ b/web-apps/ui/src/modules/model/model-selector/index.tsx
@@ -26,7 +26,9 @@ const ModelSelectorOption = (props: { model: LLMMeta; flat?: boolean }) => {
         src={<LLMIcon data={model} />}
       />
       {flat && <span className={`${clsPrefix}-option-series`}>{model.nickname}</span>}
-      <span className={`${clsPrefix}-option-label`}>{model.model_name[0]}</span>
+      <span className={`${clsPrefix}-option-label`}>
+        {model.model_name[0] || model.nickname}
+      </span>
     </div>
   );
 };
@@ -102,51 +104,66 @@ export const ModelSelector = forwardRef<HTMLDivElement, ModelSelectorProps>(
       modelProvider.updateProviders();
     }, [modelProvider]);
 
-    if (!popoverMode) {
-      return (
-        <Select
-          onSelect={(v) => {
-            const meta = llms.find((i) => toKey(i) === v);
-            if (!meta) {
-              setStateValue(meta);
-              props.onChange?.(meta);
-              return;
-            }
-            let value = meta;
-            if (currentModel instanceof LLMModel) {
-              currentModel.updateMeta(meta);
-              value = currentModel;
-            } else {
-              value = {
-                ...currentModel,
-                temperature:
-                  currentModel?.temperature === undefined
-                    ? meta.temperature
-                    : currentModel.temperature,
-                id: meta.id,
-                nickname: meta.nickname,
-                model_name: meta.model_name,
-              };
+    const select = (
+      <Select
+        onSelect={(v) => {
+          const meta = llms.find((i) => toKey(i) === v);
+          if (!meta) {
+            setStateValue(meta);
+            props.onChange?.(meta);
+            return;
+          }
+          let value = meta;
+          if (currentModel instanceof LLMModel) {
+            currentModel.updateMeta(meta);
+            value = currentModel;
+          } else {
+            value = {
+              ...currentModel,
+              temperature:
+                currentModel?.temperature === undefined
+                  ? meta.temperature
+                  : currentModel.temperature,
+              id: meta.id,
+              nickname: meta.nickname,
+              model_name: meta.model_name,
+            };
+          }
+          setStateValue(value);
+          props.onChange?.(value);
+        }}
+        value={toKey(currentModel)}
+      >
+        {models.map((model) => {
+          const metas = model.toSingleMetas().filter((item): item is LLMMeta => !!item);
+          if (model.models.length > 0) {
+            return (
+              <Select.OptGroup key={model.id} label={model.name}>
+                {metas
+                  .filter((i) => !!i)
+                  .map((item) => (
+                    <Select.Option key={toKey(item)} value={toKey(item)}>
+                      <ModelSelectorOption model={item!} />
+                    </Select.Option>
+                  ))}
+              </Select.OptGroup>
+            );
+          } else {
+            const item = metas[0];
+            if (!item) {
+              return null;
             }
-            setStateValue(value);
-            props.onChange?.(value);
-          }}
-          value={toKey(currentModel)}
-        >
-          {models.map((model) => (
-            <Select.OptGroup key={model.id} label={model.name}>
-              {model
-                .toSingleMetas()
-                .filter((i) => !!i)
-                .map((item) => (
-                  <Select.Option key={toKey(item)} value={toKey(item)}>
-                    <ModelSelectorOption model={item!} />
-                  </Select.Option>
-                ))}
-            </Select.OptGroup>
-          ))}
-        </Select>
-      );
+            return (
+              <Select.Option key={item.id} value={toKey(item)}>
+                <ModelSelectorOption model={item!} />
+              </Select.Option>
+            );
+          }
+        })}
+      </Select>
+    );
+    if (!popoverMode) {
+      return select;
     }
 
     return (
@@ -160,50 +177,7 @@ export const ModelSelector = forwardRef<HTMLDivElement, ModelSelectorProps>(
           content={
             <div className={`${clsPrefix}-popover-content`}>
               <Form layout="vertical">
-                <Form.Item label="模型">
-                  <Select
-                    onSelect={(v) => {
-                      const meta = llms.find((i) => toKey(i) === v);
-                      if (!meta) {
-                        setStateValue(meta);
-                        props.onChange?.(meta);
-                        return;
-                      }
-                      let value = meta;
-                      if (currentModel instanceof LLMModel) {
-                        currentModel.updateMeta(meta);
-                        value = currentModel;
-                      } else {
-                        value = {
-                          ...currentModel,
-                          temperature:
-                            currentModel?.temperature === undefined
-                              ? meta.temperature
-                              : currentModel.temperature,
-                          id: meta.id,
-                          nickname: meta.nickname,
-                          model_name: meta.model_name,
-                        };
-                      }
-                      setStateValue(value);
-                      props.onChange?.(value);
-                    }}
-                    value={toKey(currentModel)}
-                  >
-                    {models.map((model) => (
-                      <Select.OptGroup key={model.id} label={model.name}>
-                        {model
-                          .toSingleMetas()
-                          .filter((i) => !!i)
-                          .map((item) => (
-                            <Select.Option key={toKey(item)} value={toKey(item)}>
-                              <ModelSelectorOption model={item!} />
-                            </Select.Option>
-                          ))}
-                      </Select.OptGroup>
-                    ))}
-                  </Select>
-                </Form.Item>
+                <Form.Item label="模型">{select}</Form.Item>
                 {shouldShowConfig && (
                   <Form.Item label="temperature">
                     <TemperatureSlider
diff --git a/web-apps/ui/src/modules/model/protocol.ts b/web-apps/ui/src/modules/model/protocol.ts
index c25e145..2508079 100644
--- a/web-apps/ui/src/modules/model/protocol.ts
+++ b/web-apps/ui/src/modules/model/protocol.ts
@@ -6,7 +6,7 @@ export interface LLMMeta {
   id: string;
   nickname: string;
   temperature: number;
-  model_name: [string];
+  model_name: [string] | [];
 }
 
 export type LLMModelFactory = (option: LLMMeta) => LLMModel;