fix: update model identification with provider-specific uniqueness

src/renderer/src/hooks/useModel.ts

@@ -1,7 +1,13 @@
 import { useProviders } from './useProvider'
 
-export function useModel(id?: string) {
+export function useModel(id?: string, providerId?: string) {
   const { providers } = useProviders()
   const allModels = providers.map((p) => p.models).flat()
-  return allModels.find((m) => m.id === id)
+  return allModels.find((m) => {
+    if (providerId) {
+      return m.id === id && m.provider === providerId
+    } else {
+      return m.id === id
+    }
+  })
 }

src/renderer/src/pages/home/Messages/Message.tsx

@@ -7,6 +7,7 @@ import { useTopic } from '@renderer/hooks/useTopic'
 import { fetchChatCompletion } from '@renderer/services/ApiService'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import { getContextCount, getMessageModelId } from '@renderer/services/MessagesService'
+import { getModelUniqId } from '@renderer/services/ModelService'
 import { estimateHistoryTokens, estimateMessageUsage } from '@renderer/services/TokenService'
 import { Message, Topic } from '@renderer/types'
 import { classNames, runAsyncFunction } from '@renderer/utils'
@@ -56,7 +57,7 @@ const MessageItem: FC<Props> = ({
   const [message, setMessage] = useState(_message)
   const { t } = useTranslation()
   const { assistant, setModel } = useAssistant(message.assistantId)
-  const model = useModel(getMessageModelId(message)) || message.model
+  const model = useModel(getMessageModelId(message), message.model?.provider) || message.model
   const { isBubbleStyle } = useMessageStyle()
   const { showMessageDivider, messageFont, fontSize } = useSettings()
   const messageContainerRef = useRef<HTMLDivElement>(null)
@@ -185,7 +186,7 @@ const MessageItem: FC<Props> = ({
       })}
       ref={messageContainerRef}
       style={{ ...style, alignItems: isBubbleStyle ? (isAssistantMessage ? 'start' : 'end') : undefined }}>
-      <MessageHeader message={message} assistant={assistant} model={model} key={getMessageModelId(message)} />
+      <MessageHeader message={message} assistant={assistant} model={model} key={getModelUniqId(model)} />
       <MessageContentContainer
         className="message-content-container"
         style={{ fontFamily, fontSize, background: messageBackground }}>

src/renderer/src/pages/home/Messages/MessageContent.tsx

@@ -1,4 +1,5 @@
 import { InfoCircleOutlined, SyncOutlined, TranslationOutlined } from '@ant-design/icons'
+import { getModelUniqId } from '@renderer/services/ModelService'
 import { Message, Model } from '@renderer/types'
 import { getBriefInfo } from '@renderer/utils'
 import { withMessageThought } from '@renderer/utils/formats'
@@ -77,7 +78,7 @@ const MessageContent: React.FC<Props> = ({ message: _message, model }) => {
   return (
     <Fragment>
       <Flex gap="8px" wrap style={{ marginBottom: 10 }}>
-        {message.mentions?.map((model) => <MentionTag key={model.id}>{'@' + model.name}</MentionTag>)}
+        {message.mentions?.map((model) => <MentionTag key={getModelUniqId(model)}>{'@' + model.name}</MentionTag>)}
       </Flex>
       <MessageThought message={message} />
       <Markdown message={{ ...message, content: processedContent }} />