in chat list, show model display name if it exists

app/components/chat.tsx

@@ -1868,7 +1868,7 @@ function _Chat() {
                             </div>
                             {!isUser && (
                               <div className={styles["chat-model-name"]}>
-                                {message.model}
+                                {message.modelDisplayName ?? message.model}
                               </div>
                             )}
 

app/store/chat.ts

@@ -60,6 +60,7 @@ export type ChatMessage = RequestMessage & {
   isError?: boolean;
   id: string;
   model?: ModelType;
+  modelDisplayName?: string;
   tools?: ChatMessageTool[];
   audio_url?: string;
   isMcpResponse?: boolean;
@@ -151,6 +152,24 @@ function getSummarizeModel(
   return [currentModel, providerName];
 }
 
+function getModelDisplayName(
+  model: ModelType,
+  providerName: ServiceProvider,
+): string | undefined {
+  const configStore = useAppConfig.getState();
+  const accessStore = useAccessStore.getState();
+  const allModel = collectModelsWithDefaultModel(
+    configStore.models,
+    [configStore.customModels, accessStore.customModels].join(","),
+    accessStore.defaultModel,
+  );
+
+  const matchedModel = allModel.find(
+    (m) => m.name === model && m.provider?.providerName === providerName,
+  );
+  return matchedModel ? matchedModel.displayName : undefined;
+}
+
 function countMessages(msgs: ChatMessage[]) {
   return msgs.reduce(
     (pre, cur) => pre + estimateTokenLength(getMessageTextContent(cur)),
@@ -437,6 +456,10 @@ export const useChatStore = createPersistStore(
           role: "assistant",
           streaming: true,
           model: modelConfig.model,
+          modelDisplayName: getModelDisplayName(
+            modelConfig.model,
+            modelConfig.providerName,
+          ),
         });
 
         // get recent messages