feat(desktop): add i18n infrastructure with react-intl (#8105)

ui/desktop/src/components/context_management/CreditsExhaustedNotification.tsx

@@ -2,6 +2,18 @@ import React from 'react';
 import { AlertTriangle, ExternalLink } from 'lucide-react';
 import { Message, SystemNotificationContent } from '../../api';
 import { WEB_PROTOCOLS } from '../../utils/urlSecurity';
+import { defineMessages, useIntl } from '../../i18n';
+
+const i18n = defineMessages({
+  insufficientCredits: {
+    id: 'creditsExhaustedNotification.insufficientCredits',
+    defaultMessage: 'Insufficient Credits',
+  },
+  addCredits: {
+    id: 'creditsExhaustedNotification.addCredits',
+    defaultMessage: 'Add credits',
+  },
+});
 
 interface CreditsExhaustedNotificationProps {
   notification: SystemNotificationContent;
@@ -36,6 +48,7 @@ function getValidatedTopUpUrl(data: unknown): string | null {
 export const CreditsExhaustedNotification: React.FC<CreditsExhaustedNotificationProps> = ({
   notification,
 }) => {
+  const intl = useIntl();
   const topUpUrl = getValidatedTopUpUrl(notification.data);
 
   const handleTopUp = () => {
@@ -50,7 +63,7 @@ export const CreditsExhaustedNotification: React.FC<CreditsExhaustedNotification
         <AlertTriangle className="h-4 w-4 text-yellow-600 dark:text-yellow-400 mt-0.5 shrink-0" />
         <div className="flex-1">
           <div className="text-sm font-semibold text-yellow-800 dark:text-yellow-200">
-            Insufficient Credits
+            {intl.formatMessage(i18n.insufficientCredits)}
           </div>
           <div className="text-sm text-yellow-800/80 dark:text-yellow-200/80 mt-1">
             {notification.msg}
@@ -60,7 +73,7 @@ export const CreditsExhaustedNotification: React.FC<CreditsExhaustedNotification
               onClick={handleTopUp}
               className="mt-3 inline-flex items-center gap-2 rounded-md bg-yellow-600 hover:bg-yellow-500 dark:bg-yellow-700 dark:hover:bg-yellow-600 text-white text-sm font-medium px-4 py-2 transition-colors"
             >
-              Add credits
+              {intl.formatMessage(i18n.addCredits)}
               <ExternalLink className="h-3.5 w-3.5" />
             </button>
           )}