fix: resolves blank rendering on custom provider switch

app/components/agent-list.tsx

@@ -1,14 +1,15 @@
-import { useAgentStore } from "../store";
+import { useAgentStore, useModelStore } from "../store";
 import Image from "next/image";
 import { Theme } from "@/app/store";
 import { useMemo, useCallback } from "react";
 import { useTheme } from "../hooks/use-theme";
 import { ProviderIcon } from "./setting/provider-icon";
 import { useAppConfig } from "../store";
-import { Agent, AgentSource } from "../typing";
+import { Agent, AgentSource, ModelOption } from "../typing";
 import { Switch } from "./shadcn/switch";
 import { Button } from "./shadcn/button";
 import { useTranslation } from "react-i18next";
+import { getModelDisplayText } from "../utils/model";
 
 interface AgentItemProps {
   item: Agent;
@@ -49,6 +50,25 @@ function AgentItem({ item, onEdit }: AgentItemProps) {
     return modelList.find((model) => model.model === item.model.name);
   }, [modelList, item.model.name]);
 
+  const formattedModelListMap = useModelStore(
+    (state) => state.formattedModelList,
+  );
+
+  const getDisplayText = useCallback(
+    (modelItem: ModelOption | UserModel): string => {
+      return getModelDisplayText(
+        {
+          model: modelItem.model,
+          provider: modelItem.provider,
+          display: modelItem.display,
+          apiKey: "apiKey" in modelItem ? modelItem.apiKey : undefined,
+        },
+        formattedModelListMap,
+      );
+    },
+    [formattedModelListMap],
+  );
+
   const handleSwitch = async (checked: boolean) => {
     if (checked !== item.enabled) {
       updateAgent({
@@ -120,7 +140,9 @@ function AgentItem({ item, onEdit }: AgentItemProps) {
       <div className="flex justify-between items-center">
         <div className="flex items-center gap-1 pl-1.5">
           <div className="shrink-0">{renderProviderIcon()}</div>
-          <p className="text-sm">{currentModel?.display}</p>
+          <p className="text-sm">
+            {currentModel ? getDisplayText(currentModel) : ""}
+          </p>
         </div>
         <Button
           onClick={() => onEdit(item)}

app/components/agent-management.tsx

@@ -35,7 +35,7 @@ import { ProviderIcon } from "./setting/provider-icon";
 import { Input } from "./shadcn/input";
 import { Button } from "./shadcn/button";
 import { useTranslation } from "react-i18next";
-import { createAgent, useAgentStore } from "../store";
+import { createAgent, useAgentStore, useModelStore } from "../store";
 import {
   AgentTypeArr,
   Agent,
@@ -48,6 +48,7 @@ import { Theme } from "@/app/store";
 import { useTheme } from "../hooks/use-theme";
 import { useAppConfig } from "../store";
 import clsx from "clsx";
+import { getModelDisplayText } from "../utils/model";
 
 interface AgentItemProps {
   item: Agent;
@@ -124,6 +125,24 @@ function AgentEditDialog({
   const currentModel = useMemo(() => {
     return modelList.find((item) => item.model === newAgent.model.name);
   }, [newAgent.model, modelList]);
+  const formattedModelListMap = useModelStore(
+    (state) => state.formattedModelList,
+  );
+
+  const getDisplayText = useCallback(
+    (modelItem: ModelOption | UserModel): string => {
+      return getModelDisplayText(
+        {
+          model: modelItem.model,
+          provider: modelItem.provider,
+          display: modelItem.display,
+          apiKey: "apiKey" in modelItem ? modelItem.apiKey : undefined,
+        },
+        formattedModelListMap,
+      );
+    },
+    [formattedModelListMap],
+  );
 
   useEffect(() => {
     if (item) {
@@ -404,23 +423,24 @@ function AgentEditDialog({
                   {newAgent.type &&
                     currentModel &&
                     renderProviderIcon(currentModel)}
-                  {currentModel?.display}
+                  {currentModel && getDisplayText(currentModel)}
                 </SelectValue>
               </SelectTrigger>
               <SelectContent className="min-h-10 max-h-50 border-[#E8ECEF] dark:border-[#232627]">
                 <SelectGroup className="space-y-1">
                   {modelList.map((item) => {
-                    if (item.model)
+                    if (item.model) {
                       return (
                         <SelectItem
                           key={item.model}
                           value={item.model}
                           className="h-9 hover:bg-[#F3F5F7]/50 dark:hover:bg-[#232627]/50"
                         >
                           {renderProviderIcon(item)}
-                          {item.display}
+                          {getDisplayText(item)}
                         </SelectItem>
                       );
+                    }
                   })}
                 </SelectGroup>
               </SelectContent>

app/components/agent-tab.tsx

@@ -9,7 +9,7 @@ import {
   HoverCardContent,
 } from "./shadcn/hover-card";
 import { Tooltip, TooltipTrigger, TooltipContent } from "./shadcn/tooltip";
-import { useAppConfig, useAgentStore } from "../store";
+import { useAppConfig, useAgentStore, useModelStore } from "../store";
 import { Path } from "../constant";
 import { Agent } from "../typing";
 import { INNER_PROVIDER_NAME } from "@/app/constant";
@@ -22,6 +22,7 @@ import ArrowRightIcon from "@/app/icons/arrow-right.svg";
 import MoreIcon from "../icons/more.svg";
 import BlockIcon from "../icons/block.svg";
 import clsx from "clsx";
+import { getModelDisplayText } from "../utils/model";
 
 function AgentModel({ show, item }: { show: boolean; item: Agent }) {
   const navigate = useNavigate();
@@ -111,9 +112,7 @@ function AgentModel({ show, item }: { show: boolean; item: Agent }) {
     const newAgent = {
       ...item,
       model: {
-        name: res.apiKey
-          ? res.models.find((item) => item.value === model)!.label
-          : model,
+        name: res.apiKey ? model.split(":")[1] ?? model : model,
         provider: res.provider,
         endpoint: res.apiKey ? res.default_endpoint : res.endpoint,
         apiKey: res.apiKey ?? undefined,
@@ -228,6 +227,9 @@ export default function AgentTab() {
     s.getModelInfo,
     s.initModelList,
   ]);
+  const formattedModelListMap = useModelStore(
+    (state) => state.formattedModelList,
+  );
   const [showModel, setShowModel] = useState(false);
   const MAX_AGENT_COUNT = 10;
   const { t } = useTranslation("settings");
@@ -299,7 +301,18 @@ export default function AgentTab() {
                       onClick={() => setShowModel(!showModel)}
                       className="min-h-[18px] text-xs text-[#101213] dark:text-[#E8ECEF] min-w-0 max-w-50 flex items-center"
                     >
-                      {getModelInfo(item.model.name)?.display}
+                      {item.model.apiKey
+                        ? getModelDisplayText(
+                            {
+                              model: item.model.name,
+                              provider: item.model.provider,
+                              display: item.model.name,
+                              apiKey: item.model.apiKey,
+                            },
+                            formattedModelListMap,
+                          )
+                        : getModelInfo(item.model.name)?.display ??
+                          item.model.name}
                       {showModel ? (
                         <ArrowDownIcon className="size-4 shrink-0" />
                       ) : (