From 73895b5f4bcf57cc66eea4a20c1b0c483c3a7e34 Mon Sep 17 00:00:00 2001
From: icarus <eurfelux@gmail.com>
Date: Tue, 23 Sep 2025 10:30:53 +0800
Subject: [PATCH] feat(agents): enhance model handling with filters and styling

- Add filter support to useApiModel hook for provider-specific models
- Improve ApiModelLabel with customizable classNames for styling
- Update ChatNavbar to use filtered models for agents
---
 src/renderer/src/components/ApiModelLabel.tsx | 19 +++++++++++++------
 src/renderer/src/hooks/agents/useModel.ts     |  9 ++++++---
 src/renderer/src/pages/home/ChatNavbar.tsx    |  7 +++++--
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/renderer/src/components/ApiModelLabel.tsx b/src/renderer/src/components/ApiModelLabel.tsx
index e9c78deb48..4e6d318ebd 100644
--- a/src/renderer/src/components/ApiModelLabel.tsx
+++ b/src/renderer/src/components/ApiModelLabel.tsx
@@ -5,15 +5,22 @@ import React from 'react'
 
 export interface ModelLabelProps extends Omit<React.ComponentPropsWithRef<'div'>, 'children'> {
   model?: ApiModel
+  classNames?: {
+    container?: string
+    avatar?: string
+    modelName?: string
+    divider?: string
+    providerName?: string
+  }
 }
 
-export const ApiModelLabel: React.FC<ModelLabelProps> = ({ model, className, ...props }) => {
+export const ApiModelLabel: React.FC<ModelLabelProps> = ({ model, className, classNames, ...props }) => {
   return (
-    <div className={cn('flex items-center gap-1', className)} {...props}>
-      <Avatar src={model ? getModelLogo(model.id) : undefined} className="h-4 w-4" />
-      <span>
-        {model?.name} | {model?.provider_name}
-      </span>
+    <div className={cn('flex items-center gap-1', className, classNames?.container)} {...props}>
+      <Avatar src={model ? getModelLogo(model.id) : undefined} className={cn('h-4 w-4', classNames?.avatar)} />
+      <span className={classNames?.modelName}>{model?.name}</span>
+      <span className={classNames?.divider}> | </span>
+      <span className={classNames?.providerName}>{model?.provider_name}</span>
     </div>
   )
 }
diff --git a/src/renderer/src/hooks/agents/useModel.ts b/src/renderer/src/hooks/agents/useModel.ts
index dd7f9cc1d6..17c1b02147 100644
--- a/src/renderer/src/hooks/agents/useModel.ts
+++ b/src/renderer/src/hooks/agents/useModel.ts
@@ -1,10 +1,13 @@
+import { ApiModelsFilter } from '@renderer/types'
+
 import { useApiModels } from './useModels'
 
 export type UseModelProps = {
-  id: string
+  id?: string
+  filter?: ApiModelsFilter
 }
 
-export const useApiModel = (id?: string) => {
-  const { models } = useApiModels()
+export const useApiModel = ({ id, filter }: UseModelProps) => {
+  const { models } = useApiModels(filter)
   return models.find((model) => model.id === id)
 }
diff --git a/src/renderer/src/pages/home/ChatNavbar.tsx b/src/renderer/src/pages/home/ChatNavbar.tsx
index f437f0bb49..01522a6833 100644
--- a/src/renderer/src/pages/home/ChatNavbar.tsx
+++ b/src/renderer/src/pages/home/ChatNavbar.tsx
@@ -41,7 +41,8 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, activeTo
   const { chat } = useRuntime()
   const { activeTopicOrSession, activeAgentId } = chat
   const { agent } = useAgent(activeAgentId)
-  const agentModel = useApiModel(agent?.model)
+  // TODO: filter is temporally for agent since it cannot get all models once
+  const agentModel = useApiModel({ id: agent?.model, filter: { providerType: 'anthropic' } })
 
   useShortcut('toggle_show_assistants', toggleShowAssistants)
 
@@ -104,7 +105,9 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, activeTo
         {activeTopicOrSession === 'topic' && <SelectModelButton assistant={assistant} />}
         {/* TODO: Show a select model button for agent. */}
         {/* FIXME: models endpoint doesn't return all models, so cannot found. */}
-        {activeTopicOrSession === 'session' && <ApiModelLabel model={agentModel} />}
+        {activeTopicOrSession === 'session' && (
+          <ApiModelLabel classNames={{ container: 'text-xs' }} model={agentModel} />
+        )}
       </HStack>
       <HStack alignItems="center" gap={8}>
         <UpdateAppButton />