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

2026-03-27 19:39:50 +01:00
parent d596113e72
commit a6765fbcd9
172 changed files with 13793 additions and 2054 deletions
@@ -2,6 +2,46 @@ import React, { useEffect, useState } from 'react';
 import { Card } from '../../ui/card';
 import { Button } from '../../ui/button';
 import { GooseMode, ModeSelectionItem } from './ModeSelectionItem';
+import { defineMessages, useIntl } from '../../../i18n';
+
+const i18n = defineMessages({
+  title: {
+    id: 'configureApproveMode.title',
+    defaultMessage: 'Configure approve mode',
+  },
+  description: {
+    id: 'configureApproveMode.description',
+    defaultMessage: 'Approve requests can either be given to all tool requests or determine which actions may need integration',
+  },
+  manualApproval: {
+    id: 'configureApproveMode.manualApproval',
+    defaultMessage: 'Manual approval',
+  },
+  manualApprovalDescription: {
+    id: 'configureApproveMode.manualApprovalDescription',
+    defaultMessage: 'All tools, extensions and file modifications will require human approval',
+  },
+  smartApproval: {
+    id: 'configureApproveMode.smartApproval',
+    defaultMessage: 'Smart approval',
+  },
+  smartApprovalDescription: {
+    id: 'configureApproveMode.smartApprovalDescription',
+    defaultMessage: 'Intelligently determine which actions need approval based on risk level',
+  },
+  saving: {
+    id: 'configureApproveMode.saving',
+    defaultMessage: 'Saving...',
+  },
+  save: {
+    id: 'configureApproveMode.save',
+    defaultMessage: 'Save',
+  },
+  cancel: {
+    id: 'configureApproveMode.cancel',
+    defaultMessage: 'Cancel',
+  },
+});

 interface ConfigureApproveModeProps {
  onClose: () => void;
@@ -14,16 +54,17 @@ export function ConfigureApproveMode({
  handleModeChange,
  currentMode,
 }: ConfigureApproveModeProps) {
+  const intl = useIntl();
  const approveModes: GooseMode[] = [
    {
      key: 'approve',
-      label: 'Manual approval',
-      description: 'All tools, extensions and file modifications will require human approval',
+      labelDescriptor: i18n.manualApproval,
+      descriptionDescriptor: i18n.manualApprovalDescription,
    },
    {
      key: 'smart_approve',
-      label: 'Smart approval',
-      description: 'Intelligently determine which actions need approval based on risk level ',
+      labelDescriptor: i18n.smartApproval,
+      descriptionDescriptor: i18n.smartApprovalDescription,
    },
  ];

@@ -54,13 +95,12 @@ export function ConfigureApproveMode({
        <div className="px-4 pb-0 space-y-6">
          {/* Header */}
          <div className="flex">
-            <h2 className="text-2xl font-regular text-text-primary">Configure approve mode</h2>
+            <h2 className="text-2xl font-regular text-text-primary">{intl.formatMessage(i18n.title)}</h2>
          </div>

          <div className="mt-[24px]">
            <p className="text-sm text-text-secondary mb-6">
-              Approve requests can either be given to all tool requests or determine which actions
-              may need integration
+              {intl.formatMessage(i18n.description)}
            </p>
            <div className="space-y-4">
              {approveModes.map((mode) => (
@@ -87,7 +127,7 @@ export function ConfigureApproveMode({
              onClick={handleModeSubmit}
              className="w-full h-[60px] rounded-none border-t border-border-primary hover:bg-background-secondary text-text-primary dark:border-gray-600 text-base font-regular"
            >
-              {isSubmitting ? 'Saving...' : 'Save'}
+              {isSubmitting ? intl.formatMessage(i18n.saving) : intl.formatMessage(i18n.save)}
            </Button>
            <Button
              type="button"
@@ -96,7 +136,7 @@ export function ConfigureApproveMode({
              onClick={onClose}
              className="w-full h-[60px] rounded-none border-t border-border-primary text-text-secondary hover:bg-background-secondary dark:border-gray-600 text-base font-regular"
            >
-              Cancel
+              {intl.formatMessage(i18n.cancel)}
            </Button>
          </div>
        </div>
@@ -1,6 +1,22 @@
 import { useState } from 'react';
 import { ChevronDown } from 'lucide-react';
 import { Input } from '../../ui/input';
+import { defineMessages, useIntl } from '../../../i18n';
+
+const i18n = defineMessages({
+  conversationLimits: {
+    id: 'conversationLimitsDropdown.conversationLimits',
+    defaultMessage: 'Conversation Limits',
+  },
+  maxTurns: {
+    id: 'conversationLimitsDropdown.maxTurns',
+    defaultMessage: 'Max Turns',
+  },
+  maxTurnsDescription: {
+    id: 'conversationLimitsDropdown.maxTurnsDescription',
+    defaultMessage: 'Maximum agent turns before Goose asks for user input',
+  },
+});

 interface ConversationLimitsDropdownProps {
  maxTurns: number;
@@ -11,6 +27,7 @@ export const ConversationLimitsDropdown = ({
  maxTurns,
  onMaxTurnsChange,
 }: ConversationLimitsDropdownProps) => {
+  const intl = useIntl();
  const [isExpanded, setIsExpanded] = useState(false);

  const toggleExpanded = () => {
@@ -23,7 +40,7 @@ export const ConversationLimitsDropdown = ({
        onClick={toggleExpanded}
        className="w-full flex items-center justify-between py-2 px-2 hover:bg-background-secondary rounded-lg transition-all group"
      >
-        <h3 className="text-text-primary">Conversation Limits</h3>
+        <h3 className="text-text-primary">{intl.formatMessage(i18n.conversationLimits)}</h3>

        <ChevronDown
          className={`w-4 h-4 text-text-secondary transition-transform duration-200 ease-in-out ${
@@ -40,9 +57,9 @@ export const ConversationLimitsDropdown = ({
        <div className="space-y-3 pb-2">
          <div className="flex items-center justify-between py-2 px-2 bg-background-secondary rounded-lg transform transition-all duration-200 ease-in-out">
            <div>
-              <h4 className="text-text-primary text-sm">Max Turns</h4>
+              <h4 className="text-text-primary text-sm">{intl.formatMessage(i18n.maxTurns)}</h4>
              <p className="text-xs text-text-secondary mt-[2px]">
-                Maximum agent turns before Goose asks for user input
+                {intl.formatMessage(i18n.maxTurnsDescription)}
              </p>
            </div>
            <Input
@@ -2,33 +2,69 @@ import { useEffect, useState, forwardRef } from 'react';
 import { Gear } from '../../icons';
 import { ConfigureApproveMode } from './ConfigureApproveMode';
 import PermissionRulesModal from '../permission/PermissionRulesModal';
+import { defineMessages, useIntl } from '../../../i18n';
+
+const i18n = defineMessages({
+  autonomousLabel: {
+    id: 'modeSelectionItem.autonomousLabel',
+    defaultMessage: 'Autonomous',
+  },
+  autonomousDescription: {
+    id: 'modeSelectionItem.autonomousDescription',
+    defaultMessage: 'Full file modification capabilities, edit, create, and delete files freely.',
+  },
+  manualLabel: {
+    id: 'modeSelectionItem.manualLabel',
+    defaultMessage: 'Manual',
+  },
+  manualDescription: {
+    id: 'modeSelectionItem.manualDescription',
+    defaultMessage: 'All tools, extensions and file modifications will require human approval',
+  },
+  smartLabel: {
+    id: 'modeSelectionItem.smartLabel',
+    defaultMessage: 'Smart',
+  },
+  smartDescription: {
+    id: 'modeSelectionItem.smartDescription',
+    defaultMessage: 'Intelligently determine which actions need approval based on risk level',
+  },
+  chatOnlyLabel: {
+    id: 'modeSelectionItem.chatOnlyLabel',
+    defaultMessage: 'Chat only',
+  },
+  chatOnlyDescription: {
+    id: 'modeSelectionItem.chatOnlyDescription',
+    defaultMessage: 'Engage with the selected provider without using tools or extensions.',
+  },
+});

 export interface GooseMode {
  key: string;
-  label: string;
-  description: string;
+  labelDescriptor: { id: string; defaultMessage: string };
+  descriptionDescriptor: { id: string; defaultMessage: string };
 }

 export const all_goose_modes: GooseMode[] = [
  {
    key: 'auto',
-    label: 'Autonomous',
-    description: 'Full file modification capabilities, edit, create, and delete files freely.',
+    labelDescriptor: i18n.autonomousLabel,
+    descriptionDescriptor: i18n.autonomousDescription,
  },
  {
    key: 'approve',
-    label: 'Manual',
-    description: 'All tools, extensions and file modifications will require human approval',
+    labelDescriptor: i18n.manualLabel,
+    descriptionDescriptor: i18n.manualDescription,
  },
  {
    key: 'smart_approve',
-    label: 'Smart',
-    description: 'Intelligently determine which actions need approval based on risk level ',
+    labelDescriptor: i18n.smartLabel,
+    descriptionDescriptor: i18n.smartDescription,
  },
  {
    key: 'chat',
-    label: 'Chat only',
-    description: 'Engage with the selected provider without using tools or extensions.',
+    labelDescriptor: i18n.chatOnlyLabel,
+    descriptionDescriptor: i18n.chatOnlyDescription,
  },
 ];

@@ -42,6 +78,7 @@ interface ModeSelectionItemProps {

 export const ModeSelectionItem = forwardRef<HTMLDivElement, ModeSelectionItemProps>(
  ({ currentMode, mode, showDescription, isApproveModeConfigure, handleModeChange }, ref) => {
+    const intl = useIntl();
    const [checked, setChecked] = useState(currentMode == mode.key);
    const [isDialogOpen, setIsDialogOpen] = useState(false);
    const [isPermissionModalOpen, setIsPermissionModalOpen] = useState(false);
@@ -58,9 +95,9 @@ export const ModeSelectionItem = forwardRef<HTMLDivElement, ModeSelectionItemPro
        >
          <div className="flex">
            <div>
-              <h3 className="text-text-primary">{mode.label}</h3>
+              <h3 className="text-text-primary">{intl.formatMessage(mode.labelDescriptor)}</h3>
              {showDescription && (
-                <p className="text-text-secondary mt-[2px]">{mode.description}</p>
+                <p className="text-text-secondary mt-[2px]">{intl.formatMessage(mode.descriptionDescriptor)}</p>
              )}
            </div>
          </div>