feat: Add Agents feature with corresponding UI and translations

Translate "No agents created" messages to multiple languages for improved user experience

Refactor SVG files for improved structure and readability, removing unnecessary metadata and optimizing paths.

Refactor AgentsPage component to use constants for layout dimensions, improving maintainability and readability.

Update illustrations.chunk.ts to include TvScreenRobot SVG, enhancing the icon library.

feat: Add OPEN_AGENTS_PAGE command and integrate it into AgentsPage component

Refactor AgentsPage component to simplify empty state handling by removing unused constants and updating styles for better maintainability.

Refactor Agent actions to use named imports for better clarity and consistency in the AgentsPage component. Update unit tests to reflect these changes.

Author: NicolasBonet

assets/images/bot.svg

@@ -9132,6 +9132,7 @@ const CONST = {
         ACCOUNT: {
             PROFILE: 'Account-Profile',
             WALLET: 'Account-Wallet',
+            AGENTS: 'Account-Agents',
             RULES: 'Account-Rules',
             PREFERENCES: 'Account-Preferences',
             SECURITY: 'Account-Security',

assets/images/product-illustrations/tv-screen-robot.svg

@@ -834,6 +834,7 @@ const ROUTES = {
     },
     SETTINGS_WALLET_TRAVEL_CVV: 'settings/wallet/travel-cvv',
     SETTINGS_WALLET_TRAVEL_CVV_VERIFY_ACCOUNT: `settings/wallet/travel-cvv/${VERIFY_ACCOUNT}`,
+    SETTINGS_AGENTS: 'settings/agents',
     SETTINGS_RULES: 'settings/rules',
     SETTINGS_RULES_ADD: {
         route: 'settings/rules/new/:field?/:index?',

assets/images/simple-illustrations/simple-illustration__ai-bot.svg

@@ -170,6 +170,10 @@ const SCREENS = {
             PAYMENT_CURRENCY: 'Settings_Payment_Currency',
         },
 
+        AGENTS: {
+            ROOT: 'Settings_Agents',
+        },
+
         RULES: {
             ROOT: 'Settings_Rules',
             ADD: 'Settings_Rules_Add',

src/CONST/index.ts

@@ -29,6 +29,7 @@ import Binoculars from '@assets/images/binoculars.svg';
 import boltSlash from '@assets/images/bolt-slash.svg';
 import Bolt from '@assets/images/bolt.svg';
 import Bookmark from '@assets/images/bookmark.svg';
+import Bot from '@assets/images/bot.svg';
 import Box from '@assets/images/box.svg';
 import Bug from '@assets/images/bug.svg';
 import Building from '@assets/images/building.svg';
@@ -284,6 +285,7 @@ const Expensicons = {
     Bell,
     Binoculars,
     Bolt,
+    Bot,
     Box,
     Bug,
     Building,

src/ROUTES.ts

@@ -89,6 +89,7 @@ import ToddBehindCloud from '@assets/images/product-illustrations/todd-behind-cl
 import ToddInCar from '@assets/images/product-illustrations/todd-in-car.svg';
 import ToddWithPhones from '@assets/images/product-illustrations/todd-with-phones.svg';
 import TopiaryDollarSign from '@assets/images/product-illustrations/topiary-dollar-sign.svg';
+import TvScreenRobot from '@assets/images/product-illustrations/tv-screen-robot.svg';
 import UpgradeRocket from '@assets/images/product-illustrations/upgrade-rocket.svg';
 import WorkspaceScene from '@assets/images/product-illustrations/workspace-scene.svg';
 import ReceiptStack from '@assets/images/receipt-upload.svg';
@@ -99,6 +100,7 @@ import Puzzle from '@assets/images/simple-illustrations/emptystate__puzzlepieces
 import Abacus from '@assets/images/simple-illustrations/simple-illustration__abacus.svg';
 // Simple Illustrations - Original core ones
 import Accounting from '@assets/images/simple-illustrations/simple-illustration__accounting.svg';
+import AiBot from '@assets/images/simple-illustrations/simple-illustration__ai-bot.svg';
 import Alert from '@assets/images/simple-illustrations/simple-illustration__alert.svg';
 import Members from '@assets/images/simple-illustrations/simple-illustration__approval-members.svg';
 import Approval from '@assets/images/simple-illustrations/simple-illustration__approval.svg';
@@ -285,6 +287,7 @@ const Illustrations = {
     ToddInCar,
     ToddWithPhones,
     TopiaryDollarSign,
+    TvScreenRobot,
     WorkspaceScene,
     UpgradeRocket,
 
@@ -302,6 +305,7 @@ const Illustrations = {
 
     // Simple Illustrations
     Accounting,
+    AiBot,
     Building,
     BankCoin,
     Coins,

src/SCREENS.ts

@@ -2720,6 +2720,15 @@ ${amount} für ${merchant} – ${date}`,
         defaultPaymentMethod: 'Standard',
         bankAccountLastFour: (lastFour: string) => `Bankkonto • ${lastFour}`,
     },
+    agentsPage: {
+        title: 'Agenten',
+        subtitle: 'Automatisiere Aufgaben mit benutzerdefinierten Agenten.',
+        newAgent: 'Neuer Agent',
+        emptyAgents: {
+            title: 'Noch keine Agenten erstellt',
+            subtitle: 'Höre auf, selbst zu arbeiten. Gebe stattdessen einen Agenten befehle und spare dir viel Zeit.',
+        },
+    },
     expenseRulesPage: {
         title: 'Ausgabenregeln',
         findRule: 'Regel finden',

src/components/Icon/chunks/expensify-icons.chunk.ts

@@ -2773,6 +2773,15 @@ const translations = {
         defaultPaymentMethod: 'Default',
         bankAccountLastFour: (lastFour: string) => `Bank Account • ${lastFour}`,
     },
+    agentsPage: {
+        title: 'Agents',
+        subtitle: 'Automate tasks with custom agents.',
+        newAgent: 'New agent',
+        emptyAgents: {
+            title: 'No agents created',
+            subtitle: 'Stop manually doing stuff. Instruct an agent instead and save yourself lots of time.',
+        },
+    },
     expenseRulesPage: {
         title: 'Expense rules',
         subtitle: 'These rules will apply to your expenses.',