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

@@ -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>
   )
 }

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)
 }

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 />