(feat:toolConfig) i18n

frontend/src/locale/en.json

@@ -125,7 +125,31 @@
       "deleteWarning": "Are you sure you want to delete the tool \"{{toolName}}\" ?",
       "unsavedChanges": "You have unsaved changes that will be lost if you leave without saving.",
       "leaveWithoutSaving": "Leave without Saving",
-      "saveAndLeave": "Save and Leave"
+      "saveAndLeave": "Save and Leave",
+      "customName": "Custom Name",
+      "customNamePlaceholder": "Enter a custom name (optional)",
+      "authentication": "Authentication",
+      "actions": "Actions",
+      "addAction": "Add action",
+      "noActionsFound": "No actions found",
+      "url": "URL",
+      "urlPlaceholder": "Enter url",
+      "method": "Method",
+      "description": "Description",
+      "descriptionPlaceholder": "Enter description",
+      "headers": "Headers",
+      "queryParameters": "Query Parameters",
+      "body": "Body",
+      "deleteActionWarning": "Are you sure you want to delete the action \"{{name}}\"?",
+      "backToTools": "Back to Tools",
+      "save": "Save",
+      "name": "Name",
+      "type": "Type",
+      "filledByLLM": "Filled by LLM",
+      "value": "Value",
+      "addProperty": "Add property",
+      "propertyName": "Property name",
+      "noProperties": "No properties"
     }
   },
   "modals": {

frontend/src/locale/es.json

@@ -116,8 +116,39 @@
       "noToolsFound": "No se encontraron herramientas",
       "selectToolSetup": "Seleccione una herramienta para configurar",
       "settingsIconAlt": "Icono de configuración",
-      "configureToolAria": "Configurar {toolName}",
-      "toggleToolAria": "Alternar {toolName}"
+      "configureToolAria": "Configurar {{toolName}}",
+      "toggleToolAria": "Alternar {{toolName}}",
+      "manageTools": "Ir a Herramientas",
+      "edit": "Editar",
+      "delete": "Eliminar",
+      "deleteWarning": "¿Estás seguro de que deseas eliminar la herramienta \"{{toolName}}\"?",
+      "unsavedChanges": "Tienes cambios sin guardar que se perderán si sales sin guardar.",
+      "leaveWithoutSaving": "Salir sin Guardar",
+      "saveAndLeave": "Guardar y Salir",
+      "customName": "Nombre Personalizado",
+      "customNamePlaceholder": "Ingresa un nombre personalizado (opcional)",
+      "authentication": "Autenticación",
+      "actions": "Acciones",
+      "addAction": "Agregar acción",
+      "noActionsFound": "No se encontraron acciones",
+      "url": "URL",
+      "urlPlaceholder": "Ingresa url",
+      "method": "Método",
+      "description": "Descripción",
+      "descriptionPlaceholder": "Ingresa descripción",
+      "headers": "Encabezados",
+      "queryParameters": "Parámetros de Consulta",
+      "body": "Cuerpo",
+      "deleteActionWarning": "¿Estás seguro de que deseas eliminar la acción \"{{name}}\"?",
+      "backToTools": "Volver a Herramientas",
+      "save": "Guardar",
+      "name": "Nombre",
+      "type": "Tipo",
+      "filledByLLM": "Completado por LLM",
+      "value": "Valor",
+      "addProperty": "Agregar propiedad",
+      "propertyName": "Nombre de propiedad",
+      "noProperties": "Sin propiedades"
     }
   },
   "modals": {

frontend/src/locale/jp.json

@@ -117,8 +117,39 @@
       "noToolsFound": "ツールが見つかりません",
       "selectToolSetup": "設定するツールを選択してください",
       "settingsIconAlt": "設定アイコン",
-      "configureToolAria": "{toolName} を設定",
-      "toggleToolAria": "{toolName} を切り替え"
+      "configureToolAria": "{{toolName}}を設定",
+      "toggleToolAria": "{{toolName}}を切り替え",
+      "manageTools": "ツールへ移動",
+      "edit": "編集",
+      "delete": "削除",
+      "deleteWarning": "ツール \"{{toolName}}\" を削除してもよろしいですか？",
+      "unsavedChanges": "保存されていない変更があります。保存せずに離れると失われます。",
+      "leaveWithoutSaving": "保存せずに離れる",
+      "saveAndLeave": "保存して離れる",
+      "customName": "カスタム名",
+      "customNamePlaceholder": "カスタム名を入力（任意）",
+      "authentication": "認証",
+      "actions": "アクション",
+      "addAction": "アクションを追加",
+      "noActionsFound": "アクションが見つかりません",
+      "url": "URL",
+      "urlPlaceholder": "URLを入力",
+      "method": "メソッド",
+      "description": "説明",
+      "descriptionPlaceholder": "説明を入力",
+      "headers": "ヘッダー",
+      "queryParameters": "クエリパラメータ",
+      "body": "ボディ",
+      "deleteActionWarning": "アクション \"{{name}}\" を削除してもよろしいですか？",
+      "backToTools": "ツールに戻る",
+      "save": "保存",
+      "name": "名前",
+      "type": "タイプ",
+      "filledByLLM": "LLMによる入力",
+      "value": "値",
+      "addProperty": "プロパティを追加",
+      "propertyName": "プロパティ名",
+      "noProperties": "プロパティなし"
     }
   },
   "modals": {

frontend/src/locale/ru.json

@@ -116,9 +116,40 @@
       "addTool": "Добавить инструмент",
       "noToolsFound": "Инструменты не найдены",
       "selectToolSetup": "Выберите инструмент для настройки",
-      "settingsIconAlt": "Иконка настроек",
-      "configureToolAria": "Настроить {toolName}",
-      "toggleToolAria": "Переключить {toolName}"
+      "settingsIconAlt": "Значок настроек",
+      "configureToolAria": "Настроить {{toolName}}",
+      "toggleToolAria": "Переключить {{toolName}}",
+      "manageTools": "Перейти к инструментам",
+      "edit": "Редактировать",
+      "delete": "Удалить",
+      "deleteWarning": "Вы уверены, что хотите удалить инструмент \"{{toolName}}\"?",
+      "unsavedChanges": "У вас есть несохраненные изменения, которые будут потеряны, если вы уйдете без сохранения.",
+      "leaveWithoutSaving": "Уйти без сохранения",
+      "saveAndLeave": "Сохранить и уйти",
+      "customName": "Пользовательское имя",
+      "customNamePlaceholder": "Введите пользовательское имя (необязательно)",
+      "authentication": "Аутентификация",
+      "actions": "Действия",
+      "addAction": "Добавить действие",
+      "noActionsFound": "Действия не найдены",
+      "url": "URL",
+      "urlPlaceholder": "Введите url",
+      "method": "Метод",
+      "description": "Описание",
+      "descriptionPlaceholder": "Введите описание",
+      "headers": "Заголовки",
+      "queryParameters": "Параметры запроса",
+      "body": "Тело",
+      "deleteActionWarning": "Вы уверены, что хотите удалить действие \"{{name}}\"?",
+      "backToTools": "Вернуться к инструментам",
+      "save": "Сохранить",
+      "name": "Имя",
+      "type": "Тип",
+      "filledByLLM": "Заполнено LLM",
+      "value": "Значение",
+      "addProperty": "Добавить свойство",
+      "propertyName": "Имя свойства",
+      "noProperties": "Нет свойств"
     }
   },
   "modals": {

frontend/src/locale/zh-TW.json

@@ -112,13 +112,44 @@
     },
     "tools": {
       "label": "工具",
-      "searchPlaceholder": "搜尋...",
+      "searchPlaceholder": "搜尋工具...",
       "addTool": "新增工具",
       "noToolsFound": "找不到工具",
       "selectToolSetup": "選擇要設定的工具",
-      "settingsIconAlt": "設定圖標",
-      "configureToolAria": "配置 {toolName}",
-      "toggleToolAria": "切換 {toolName}"
+      "settingsIconAlt": "設定圖示",
+      "configureToolAria": "設定 {{toolName}}",
+      "toggleToolAria": "切換 {{toolName}}",
+      "manageTools": "前往工具",
+      "edit": "編輯",
+      "delete": "刪除",
+      "deleteWarning": "您確定要刪除工具 \"{{toolName}}\" 嗎？",
+      "unsavedChanges": "您有未儲存的變更，如果不儲存就離開將會遺失。",
+      "leaveWithoutSaving": "不儲存離開",
+      "saveAndLeave": "儲存並離開",
+      "customName": "自訂名稱",
+      "customNamePlaceholder": "輸入自訂名稱（選填）",
+      "authentication": "認證",
+      "actions": "操作",
+      "addAction": "新增操作",
+      "noActionsFound": "找不到操作",
+      "url": "URL",
+      "urlPlaceholder": "輸入url",
+      "method": "方法",
+      "description": "描述",
+      "descriptionPlaceholder": "輸入描述",
+      "headers": "標頭",
+      "queryParameters": "查詢參數",
+      "body": "主體",
+      "deleteActionWarning": "您確定要刪除操作 \"{{name}}\" 嗎？",
+      "backToTools": "返回工具",
+      "save": "儲存",
+      "name": "名稱",
+      "type": "類型",
+      "filledByLLM": "由LLM填寫",
+      "value": "值",
+      "addProperty": "新增屬性",
+      "propertyName": "屬性名稱",
+      "noProperties": "無屬性"
     }
   },
   "modals": {

frontend/src/locale/zh.json

@@ -112,13 +112,44 @@
     },
     "tools": {
       "label": "工具",
-      "searchPlaceholder": "搜索...",
+      "searchPlaceholder": "搜索工具...",
       "addTool": "添加工具",
       "noToolsFound": "未找到工具",
       "selectToolSetup": "选择要设置的工具",
       "settingsIconAlt": "设置图标",
-      "configureToolAria": "配置 {toolName}",
-      "toggleToolAria": "切换 {toolName}"
+      "configureToolAria": "配置 {{toolName}}",
+      "toggleToolAria": "切换 {{toolName}}",
+      "manageTools": "前往工具",
+      "edit": "编辑",
+      "delete": "删除",
+      "deleteWarning": "您确定要删除工具 \"{{toolName}}\" 吗？",
+      "unsavedChanges": "您有未保存的更改，如果不保存就离开将会丢失。",
+      "leaveWithoutSaving": "不保存离开",
+      "saveAndLeave": "保存并离开",
+      "customName": "自定义名称",
+      "customNamePlaceholder": "输入自定义名称（可选）",
+      "authentication": "认证",
+      "actions": "操作",
+      "addAction": "添加操作",
+      "noActionsFound": "未找到操作",
+      "url": "URL",
+      "urlPlaceholder": "输入url",
+      "method": "方法",
+      "description": "描述",
+      "descriptionPlaceholder": "输入描述",
+      "headers": "请求头",
+      "queryParameters": "查询参数",
+      "body": "请求体",
+      "deleteActionWarning": "您确定要删除操作 \"{{name}}\" 吗？",
+      "backToTools": "返回工具",
+      "save": "保存",
+      "name": "名称",
+      "type": "类型",
+      "filledByLLM": "由LLM填充",
+      "value": "值",
+      "addProperty": "添加属性",
+      "propertyName": "属性名称",
+      "noProperties": "无属性"
     }
   },
   "modals": {

frontend/src/settings/ToolConfig.tsx

@@ -181,7 +181,7 @@ export default function ToolConfig({
       {/* Custom name section */}
       <div className="mt-1">
         <p className="text-sm font-semibold text-eerie-black dark:text-bright-gray">
-          Custom Name
+          {t('settings.tools.customName')}
         </p>
         <div className="relative mt-4 w-full max-w-96">
           <Input
@@ -189,14 +189,14 @@ export default function ToolConfig({
             value={customName}
             onChange={(e) => setCustomName(e.target.value)}
             borderVariant="thin"
-            placeholder="Enter a custom name (optional)"
+            placeholder={t('settings.tools.customNamePlaceholder')}
           />
         </div>
       </div>
       <div className="mt-1">
         {Object.keys(tool?.config).length !== 0 && tool.name !== 'api_tool' && (
           <p className="text-sm font-semibold text-eerie-black dark:text-bright-gray">
-            Authentication
+            {t('settings.tools.authentication')}
           </p>
         )}
         <div className="mt-4 flex flex-col items-start gap-2 sm:flex-row sm:items-center">
@@ -218,7 +218,7 @@ export default function ToolConfig({
         <div className="mx-0 my-2 h-[0.8px] w-full rounded-full bg-[#C4C4C4]/40"></div>
         <div className="flex w-full flex-row items-center justify-between gap-2">
           <p className="text-base font-semibold text-eerie-black dark:text-bright-gray">
-            Actions
+            {t('settings.tools.actions')}
           </p>
           {tool.name === 'api_tool' &&
             (!tool.config.actions ||
@@ -227,7 +227,7 @@ export default function ToolConfig({
                 onClick={() => setActionModalState('ACTIVE')}
                 className="rounded-full border border-solid border-violets-are-blue px-5 py-1 text-sm text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white"
               >
-                Add action
+                {t('settings.tools.addAction')}
               </button>
             )}
         </div>
@@ -244,7 +244,7 @@ export default function ToolConfig({
                   className="mx-auto mb-4 h-24 w-24"
                 />
                 <p className="text-center text-gray-500 dark:text-gray-400">
-                  No actions found
+                  {t('settings.tools.noActionsFound')}
                 </p>
               </div>
             )}
@@ -432,7 +432,7 @@ export default function ToolConfig({
                   className="mx-auto mb-4 h-24 w-24"
                 />
                 <p className="text-center text-gray-500 dark:text-gray-400">
-                  No actions found
+                  {t('settings.tools.noActionsFound')}
                 </p>
               </div>
             )}
@@ -445,15 +445,10 @@ export default function ToolConfig({
         />
         {showUnsavedModal && (
           <ConfirmationModal
-            message={t('settings.tools.unsavedChanges', {
-              defaultValue:
-                'You have unsaved changes that will be lost if you leave without saving.',
-            })}
+            message={t('settings.tools.unsavedChanges')}
             modalState="ACTIVE"
             setModalState={(state) => setShowUnsavedModal(state === 'ACTIVE')}
-            submitLabel={t('settings.tools.saveAndLeave', {
-              defaultValue: 'Save and Leave',
-            })}
+            submitLabel={t('settings.tools.saveAndLeave')}
             handleSubmit={() => {
               userService
                 .updateTool(
@@ -477,9 +472,7 @@ export default function ToolConfig({
                   handleGoBack();
                 });
             }}
-            cancelLabel={t('settings.tools.leaveWithoutSaving', {
-              defaultValue: 'Leave without Saving',
-            })}
+            cancelLabel={t('settings.tools.leaveWithoutSaving')}
             handleCancel={() => {
               setShowUnsavedModal(false);
               handleGoBack();
@@ -597,10 +590,6 @@ function APIToolConfig({
                 </div>
               </div>
               <div className="mt-8 px-5">
-                <div className="relative w-full">
-                  <span className="absolute -top-2 left-5 z-10 bg-white px-2 text-xs text-gray-4000 dark:bg-raisin-black dark:text-silver">
-                    URL
-                  </span>
                 <Input
                   type="text"
                   value={action.url}
@@ -624,9 +613,8 @@ function APIToolConfig({
                     });
                   }}
                   borderVariant="thin"
-                    placeholder="Enter url"
-                  ></Input>
-                </div>
+                  placeholder={t('settings.tools.urlPlaceholder')}
+                />
               </div>
               <div className="mt-4 px-5 py-2">
                 <div className="relative w-full">
@@ -666,10 +654,6 @@ function APIToolConfig({
                 </div>
               </div>
               <div className="mt-4 px-5 py-2">
-                <div className="relative w-full">
-                  <span className="absolute -top-2 left-5 z-10 bg-white px-2 text-xs text-gray-4000 dark:bg-raisin-black dark:text-silver">
-                    Description
-                  </span>
                 <Input
                   type="text"
                   value={action.description}
@@ -693,9 +677,8 @@ function APIToolConfig({
                     });
                   }}
                   borderVariant="thin"
-                    placeholder="Enter description"
-                  ></Input>
-                </div>
+                  placeholder={t('settings.tools.descriptionPlaceholder')}
+                />
               </div>
               <div className="mt-4 px-5 py-2">
                 <APIActionTable
@@ -712,7 +695,6 @@ function APIToolConfig({
         <ConfirmationModal
           message={t('settings.tools.deleteActionWarning', {
             name: actionToDelete,
-            defaultValue: `Are you sure you want to delete the action "${actionToDelete}"?`,
           })}
           modalState={deleteModalState}
           setModalState={setDeleteModalState}
@@ -739,6 +721,8 @@ function APIActionTable({
     updatedAction: APIActionType,
   ) => void;
 }) {
+  const { t } = useTranslation();
+
   const [action, setAction] = React.useState<APIActionType>(apiAction);
   const [newPropertyKey, setNewPropertyKey] = React.useState('');
   const [addingPropertySection, setAddingPropertySection] = React.useState<
@@ -1056,16 +1040,26 @@ function APIActionTable({
     <div className="scrollbar-thin flex flex-col gap-6">
       <div>
         <h3 className="mb-1 text-base font-normal text-eerie-black dark:text-bright-gray">
-          Headers
+          {t('settings.tools.headers')}
         </h3>
         <table className="table-default">
           <thead>
             <tr>
-              <th>Name</th>
-              <th>Type</th>
-              <th>Filled by LLM</th>
-              <th>Description</th>
-              <th>Value</th>
+              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+                {t('settings.tools.name')}
+              </th>
+              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+                {t('settings.tools.type')}
+              </th>
+              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+                {t('settings.tools.filledByLLM')}
+              </th>
+              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+                {t('settings.tools.description')}
+              </th>
+              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+                {t('settings.tools.value')}
+              </th>
               <th
                 style={{
                   width: '50px',
@@ -1081,16 +1075,26 @@ function APIActionTable({
       </div>
       <div>
         <h3 className="mb-1 text-base font-normal text-eerie-black dark:text-bright-gray">
-          Query Parameters
+          {t('settings.tools.queryParameters')}
         </h3>
         <table className="table-default">
           <thead>
             <tr>
-              <th>Name</th>
-              <th>Type</th>
-              <th>Filled by LLM</th>
-              <th>Description</th>
-              <th>Value</th>
+              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+                {t('settings.tools.name')}
+              </th>
+              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+                {t('settings.tools.type')}
+              </th>
+              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+                {t('settings.tools.filledByLLM')}
+              </th>
+              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+                {t('settings.tools.description')}
+              </th>
+              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+                {t('settings.tools.value')}
+              </th>
               <th
                 style={{
                   width: '50px',
@@ -1106,16 +1110,26 @@ function APIActionTable({
       </div>
       <div className="mb-6">
         <h3 className="mb-1 text-base font-normal text-eerie-black dark:text-bright-gray">
-          Body
+          {t('settings.tools.body')}
         </h3>
         <table className="table-default">
           <thead>
             <tr>
-              <th>Name</th>
-              <th>Type</th>
-              <th>Filled by LLM</th>
-              <th>Description</th>
-              <th>Value</th>
+              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+                {t('settings.tools.name')}
+              </th>
+              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+                {t('settings.tools.type')}
+              </th>
+              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+                {t('settings.tools.filledByLLM')}
+              </th>
+              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+                {t('settings.tools.description')}
+              </th>
+              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+                {t('settings.tools.value')}
+              </th>
               <th
                 style={{
                   width: '50px',