Merge remote-tracking branch 'origin/feat/agents-new' into feat/agents-new

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}>
+    <div className={cn('flex items-center gap-1', className, classNames?.container)} {...props}>
-      <Avatar src={model ? getModelLogo(model.id) : undefined} className="h-4 w-4" />
+      <Avatar src={model ? getModelLogo(model.id) : undefined} className={cn('h-4 w-4', classNames?.avatar)} />
-      <span>
+      <span className={classNames?.modelName}>{model?.name}</span>
-        {model?.name} | {model?.provider_name}
+      <span className={classNames?.divider}> | </span>
-      </span>
+      <span className={classNames?.providerName}>{model?.provider_name}</span>
     </div>
   )
 }

src/renderer/src/components/Popups/agent/SessionModal.tsx

@@ -1,6 +1,5 @@
 import {
   Button,
-  Chip,
   cn,
   Form,
   Input,
@@ -18,6 +17,7 @@ import {
 } from '@heroui/react'
 import { loggerService } from '@logger'
 import type { Selection } from '@react-types/shared'
+import { AllowedToolsSelect } from '@renderer/components/agent'
 import { getModelLogo } from '@renderer/config/models'
 import { useAgent } from '@renderer/hooks/agents/useAgent'
 import { useApiModels } from '@renderer/hooks/agents/useModels'
@@ -198,21 +198,6 @@ export const SessionModal: React.FC<Props> = ({
     [availableTools]
   )
 
-  const renderSelectedTools = useCallback((items: SelectedItems<Tool>) => {
-    if (!items.length) {
-      return null
-    }
-    return (
-      <div className="flex flex-wrap gap-2">
-        {items.map((item) => (
-          <Chip key={item.key} size="sm" variant="flat" className="max-w-[160px] truncate">
-            {item.data?.name ?? item.textValue ?? item.key}
-          </Chip>
-        ))}
-      </div>
-    )
-  }, [])
-
   const modelOptions = useMemo(() => {
     // mocked data. not final version
     return (models ?? []).map((model) => ({
@@ -363,32 +348,11 @@ export const SessionModal: React.FC<Props> = ({
                     value={form.description ?? ''}
                     onValueChange={onDescChange}
                   />
-                  <Select
+                  <AllowedToolsSelect
-                    selectionMode="multiple"
+                    items={availableTools}
-                    isMultiline
                     selectedKeys={selectedToolKeys}
                     onSelectionChange={onAllowedToolsChange}
-                    label={t('agent.session.allowed_tools.label')}
+                  />
-                    placeholder={t('agent.session.allowed_tools.placeholder')}
-                    description={
-                      availableTools.length
-                        ? t('agent.session.allowed_tools.helper')
-                        : t('agent.session.allowed_tools.empty')
-                    }
-                    isDisabled={!availableTools.length}
-                    items={availableTools}
-                    renderValue={renderSelectedTools}>
-                    {(tool) => (
-                      <SelectItem key={tool.id} textValue={tool.name}>
-                        <div className="flex flex-col">
-                          <span className="font-medium text-sm">{tool.name}</span>
-                          {tool.description ? (
-                            <span className="text-foreground-500 text-xs">{tool.description}</span>
-                          ) : null}
-                        </div>
-                      </SelectItem>
-                    )}
-                  </Select>
                   <Textarea label={t('common.prompt')} value={form.instructions ?? ''} onValueChange={onInstChange} />
                 </ModalBody>
                 <ModalFooter className="w-full">

src/renderer/src/components/agent/AllowedToolsSelect.tsx

@@ -0,0 +1,54 @@
+import { Chip, cn, Select, SelectedItems, SelectItem, SelectProps } from '@heroui/react'
+import { Tool } from '@renderer/types'
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export interface AllowedToolsSelectProps extends Omit<SelectProps, 'children'> {
+  items: Tool[]
+}
+
+export const AllowedToolsSelect: React.FC<AllowedToolsSelectProps> = (props) => {
+  const { t } = useTranslation()
+  const { items: availableTools, className, ...rest } = props
+
+  const renderSelectedTools = useCallback((items: SelectedItems<Tool>) => {
+    if (!items.length) {
+      return null
+    }
+    return (
+      <div className="flex flex-wrap gap-2">
+        {items.map((item) => (
+          <Chip key={item.key} size="sm" variant="flat" className="max-w-[160px] truncate">
+            {item.data?.name ?? item.textValue ?? item.key}
+          </Chip>
+        ))}
+      </div>
+    )
+  }, [])
+
+  return (
+    <Select
+      aria-label={t('agent.session.allowed_tools.label')}
+      selectionMode="multiple"
+      isMultiline
+      label={t('agent.session.allowed_tools.label')}
+      placeholder={t('agent.session.allowed_tools.placeholder')}
+      description={
+        availableTools.length ? t('agent.session.allowed_tools.helper') : t('agent.session.allowed_tools.empty')
+      }
+      isDisabled={!availableTools.length}
+      items={availableTools}
+      renderValue={renderSelectedTools}
+      className={cn('max-w-xl', className)}
+      {...rest}>
+      {(tool) => (
+        <SelectItem key={tool.id} textValue={tool.name}>
+          <div className="flex flex-col">
+            <span className="font-medium text-sm">{tool.name}</span>
+            {tool.description ? <span className="text-foreground-500 text-xs">{tool.description}</span> : null}
+          </div>
+        </SelectItem>
+      )}
+    </Select>
+  )
+}

src/renderer/src/components/agent/index.tsx

@@ -0,0 +1 @@
+export { AllowedToolsSelect } from './AllowedToolsSelect'

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) => {
+export const useApiModel = ({ id, filter }: UseModelProps) => {
-  const { models } = useApiModels()
+  const { models } = useApiModels(filter)
   return models.find((model) => model.id === id)
 }

src/renderer/src/i18n/translate/el-gr.json

@@ -100,6 +100,7 @@
         "title": "[to be translated]:高级设置"
       },
       "essential": "Βασικές Ρυθμίσεις",
+      "mcps": "Διακομιστής MCP",
       "prompt": "Ρυθμίσεις Προτροπής",
       "tooling": {
         "mcp": {
@@ -172,12 +173,12 @@
         "tab": "[to be translated]:Tooling & permissions"
       },
       "tools": {
-    "approved": "[to be translated]:approved",
+        "approved": "εγκεκριμένο",
-    "caution": "[to be translated]:Pre-approved tools bypass human review. Enable only trusted tools.",
+        "caution": "Εργαλεία προεγκεκριμένα παρακάμπτουν την ανθρώπινη αξιολόγηση. Ενεργοποιήστε μόνο έμπιστα εργαλεία.",
-        "description": "[to be translated]:Choose which tools can run without manual approval.",
+        "description": "Επιλέξτε ποια εργαλεία μπορούν να εκτελούνται χωρίς χειροκίνητη έγκριση.",
-        "requiresPermission": "[to be translated]:Requires permission when not pre-approved.",
+        "requiresPermission": "Απαιτείται άδεια όταν δεν έχει προεγκριθεί.",
-        "tab": "[to be translated]:Pre-approved tools",
+        "tab": "Προεγκεκριμένα εργαλεία",
-        "title": "[to be translated]:Pre-approved tools",
+        "title": "Προεγκεκριμένα εργαλεία",
         "toggle": "{{defaultValue}}"
       }
     },

src/renderer/src/i18n/translate/es-es.json

@@ -100,6 +100,7 @@
         "title": "[to be translated]:高级设置"
       },
       "essential": "Configuraciones esenciales",
+      "mcps": "Servidor MCP",
       "prompt": "Configuración de indicaciones",
       "tooling": {
         "mcp": {
@@ -172,12 +173,12 @@
         "tab": "[to be translated]:Tooling & permissions"
       },
       "tools": {
-    "approved": "[to be translated]:approved",
+        "approved": "aprobado",
-    "caution": "[to be translated]:Pre-approved tools bypass human review. Enable only trusted tools.",
+        "caution": "Herramientas preaprobadas omiten la revisión humana. Habilita solo herramientas de confianza.",
-        "description": "[to be translated]:Choose which tools can run without manual approval.",
+        "description": "Elige qué herramientas pueden ejecutarse sin aprobación manual.",
-        "requiresPermission": "[to be translated]:Requires permission when not pre-approved.",
+        "requiresPermission": "Requiere permiso cuando no está preaprobado.",
-        "tab": "[to be translated]:Pre-approved tools",
+        "tab": "Herramientas preaprobadas",
-        "title": "[to be translated]:Pre-approved tools",
+        "title": "Herramientas preaprobadas",
         "toggle": "{{defaultValue}}"
       }
     },

src/renderer/src/i18n/translate/fr-fr.json

@@ -100,6 +100,7 @@
         "title": "[to be translated]:高级设置"
       },
       "essential": "Paramètres essentiels",
+      "mcps": "Serveur MCP",
       "prompt": "Paramètres de l'invite",
       "tooling": {
         "mcp": {
@@ -172,12 +173,12 @@
         "tab": "[to be translated]:Tooling & permissions"
       },
       "tools": {
-    "approved": "[to be translated]:approved",
+        "approved": "approuvé",
-    "caution": "[to be translated]:Pre-approved tools bypass human review. Enable only trusted tools.",
+        "caution": "Outils pré-approuvés contournent la révision humaine. Activez uniquement les outils de confiance.",
-        "description": "[to be translated]:Choose which tools can run without manual approval.",
+        "description": "Choisissez quels outils peuvent s'exécuter sans approbation manuelle.",
-        "requiresPermission": "[to be translated]:Requires permission when not pre-approved.",
+        "requiresPermission": "Nécessite une autorisation lorsqu'elle n'est pas préapprouvée.",
-        "tab": "[to be translated]:Pre-approved tools",
+        "tab": "Outils pré-approuvés",
-        "title": "[to be translated]:Pre-approved tools",
+        "title": "Outils pré-approuvés",
         "toggle": "{{defaultValue}}"
       }
     },

src/renderer/src/i18n/translate/ja-jp.json

@@ -100,6 +100,7 @@
         "title": "[to be translated]:高级设置"
       },
       "essential": "必須設定",
+      "mcps": "MCPサーバー",
       "prompt": "プロンプト設定",
       "tooling": {
         "mcp": {

src/renderer/src/i18n/translate/pt-pt.json

@@ -100,6 +100,7 @@
         "title": "[to be translated]:高级设置"
       },
       "essential": "Configurações Essenciais",
+      "mcps": "Servidor MCP",
       "prompt": "Configurações de Prompt",
       "tooling": {
         "mcp": {
@@ -172,12 +173,12 @@
         "tab": "[to be translated]:Tooling & permissions"
       },
       "tools": {
-    "approved": "[to be translated]:approved",
+        "approved": "aprovado",
-    "caution": "[to be translated]:Pre-approved tools bypass human review. Enable only trusted tools.",
+        "caution": "Ferramentas pré-aprovadas ignoram a revisão humana. Ative apenas ferramentas confiáveis.",
-        "description": "[to be translated]:Choose which tools can run without manual approval.",
+        "description": "Escolha quais ferramentas podem ser executadas sem aprovação manual.",
-        "requiresPermission": "[to be translated]:Requires permission when not pre-approved.",
+        "requiresPermission": "Requer permissão quando não pré-aprovado.",
-        "tab": "[to be translated]:Pre-approved tools",
+        "tab": "Ferramentas pré-aprovadas",
-        "title": "[to be translated]:Pre-approved tools",
+        "title": "Ferramentas pré-aprovadas",
         "toggle": "{{defaultValue}}"
       }
     },

src/renderer/src/i18n/translate/ru-ru.json

@@ -100,6 +100,7 @@
         "title": "[to be translated]:高级设置"
       },
       "essential": "Основные настройки",
+      "mcps": "MCP сервер",
       "prompt": "Настройки подсказки",
       "tooling": {
         "mcp": {
@@ -172,12 +173,12 @@
         "tab": "[to be translated]:Tooling & permissions"
       },
       "tools": {
-    "approved": "[to be translated]:approved",
+        "approved": "одобрено",
-    "caution": "[to be translated]:Pre-approved tools bypass human review. Enable only trusted tools.",
+        "caution": "Предварительно одобренные инструменты обходят проверку человеком. Включайте только доверенные инструменты.",
-        "description": "[to be translated]:Choose which tools can run without manual approval.",
+        "description": "Выберите, какие инструменты могут запускаться без ручного подтверждения.",
-        "requiresPermission": "[to be translated]:Requires permission when not pre-approved.",
+        "requiresPermission": "Требуется разрешение, если не предварительно одобрено.",
-        "tab": "[to be translated]:Pre-approved tools",
+        "tab": "Предварительно одобренные инструменты",
-        "title": "[to be translated]:Pre-approved tools",
+        "title": "Предварительно одобренные инструменты",
         "toggle": "{{defaultValue}}"
       }
     },

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

src/renderer/src/pages/settings/AgentSettings/AgentEssentialSettings.tsx

@@ -1,13 +1,11 @@
-import { Button, Tooltip } from '@heroui/react'
+import { Button, Input, Select, SelectedItems, SelectItem, Tooltip } from '@heroui/react'
 import { loggerService } from '@logger'
 import { ApiModelLabel } from '@renderer/components/ApiModelLabel'
 import { useApiModels } from '@renderer/hooks/agents/useModels'
 import { useUpdateAgent } from '@renderer/hooks/agents/useUpdateAgent'
-import { GetAgentResponse, UpdateAgentForm } from '@renderer/types'
+import { ApiModel, GetAgentResponse, UpdateAgentForm } from '@renderer/types'
-import { Input, Select } from 'antd'
-import { DefaultOptionType } from 'antd/es/select'
 import { Plus } from 'lucide-react'
-import { FC, useCallback, useMemo, useState } from 'react'
+import { FC, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { AgentLabel, SettingsContainer, SettingsItem, SettingsTitle } from './shared'
@@ -42,13 +40,6 @@ const AgentEssentialSettings: FC<AgentEssentialSettingsProps> = ({ agent, update
     [agent, update]
   )
 
-  const modelOptions = useMemo(() => {
-    return models.map((model) => ({
-      value: model.id,
-      label: <ApiModelLabel model={model} />
-    })) satisfies DefaultOptionType[]
-  }, [models])
-
   const addAccessiblePath = useCallback(async () => {
     if (!agent) return
 
@@ -83,6 +74,12 @@ const AgentEssentialSettings: FC<AgentEssentialSettingsProps> = ({ agent, update
     [agent, t, updateAccessiblePaths]
   )
 
+  const renderModels = useCallback((items: SelectedItems<ApiModel>) => {
+    return items.map((item) => {
+      const model = item.data ?? undefined
+      return <ApiModelLabel key={model?.id} model={model} />
+    })
+  }, [])
 
   if (!agent) return null
 
@@ -97,7 +94,7 @@ const AgentEssentialSettings: FC<AgentEssentialSettingsProps> = ({ agent, update
         <Input
           placeholder={t('common.agent_one') + t('common.name')}
           value={name}
-          onChange={(e) => setName(e.target.value)}
+          onValueChange={(value) => setName(value)}
           onBlur={() => {
             if (name !== agent.name) {
               updateName(name)
@@ -107,16 +104,24 @@ const AgentEssentialSettings: FC<AgentEssentialSettingsProps> = ({ agent, update
         />
       </SettingsItem>
       <SettingsItem inline className="gap-8">
-        <SettingsTitle>{t('common.model')}</SettingsTitle>
+        <SettingsTitle id="model">{t('common.model')}</SettingsTitle>
         <Select
-          options={modelOptions}
+          selectionMode="single"
-          value={agent.model}
+          aria-labelledby="model"
-          onChange={(value) => {
+          items={models}
-            updateModel(value)
+          selectedKeys={[agent.model]}
+          onSelectionChange={(keys) => {
+            updateModel(keys.currentKey)
           }}
           className="max-w-80 flex-1"
           placeholder={t('common.placeholders.select.model')}
-        />
+          renderValue={renderModels}>
+          {(model) => (
+            <SelectItem textValue={model.id}>
+              <ApiModelLabel model={model} />
+            </SelectItem>
+          )}
+        </Select>
       </SettingsItem>
       <SettingsItem>
         <SettingsTitle