Internationalization for SIM AI app with next-intl

.claude/rules/sim-translations.md

@@ -0,0 +1,90 @@
+---
+paths:
+  - "apps/sim/**/*.tsx"
+  - "apps/sim/**/*.ts"
+  - "apps/sim/**/*.json"
+description: Automatically refactor React/Next.js components to use next-intl without namespaces
+---
+
+# Next-Intl Auto I18n Refactoring
+
+## Overview
+
+You will receive a React or Next.js component.
+
+Your job is to:
+
+1. Convert the component to use next-intl
+2. Replace all user-visible and accessibility text with t() calls
+3. Use no namespaces
+
+Do not include explanations.
+
+---
+## Rules
+1. No duplicate keys in translation files
+2. Don't translate logger info or error messages that are not user-facing.
+3. Do not translate error messages or similars as keys to be rendered as translations later. For example, if there is an error message like "Invalid email address", do not create a key like "errors.invalid_email" with the value "Invalid email address". If possible, just create a new hook that calls useTranslation inside it and returns the same object or function with translated texts and keep the code in the same file.
+4. Detect Component Type (Client vs Server) and use the appropriate next-intl functions (useTranslations for Client, getTranslations for Server).
+5. No namespaces in keys
+6. You MUST replace every user-visible or accessibility string.
+7. If a component is rendering rich text like <strong> or <em>, you must use the rich text formatting capabilities of next-intl. 
+eg. 
+```
+{
+  "message": "Please refer to <guidelines>the guidelines</guidelines>."
+}
+// Returns `<>Please refer to <a href="/guidelines">the guidelines</a>.</>`
+t.rich('message', {
+  guidelines: (chunks) => <a href="/guidelines">{chunks}</a>
+});
+```
+8. All the translations must be applied in en.json, es.json and pt.json in the translations folder. Find the right place to change the translations file to reuse existing translations and avoid duplicates. If there is no right place, create a new key following the Key Naming Rules.
+
+## What Must NOT Be Translated
+
+Do NOT translate:
+
+- className
+- variable names
+- function names
+- API field names
+- route paths (/login, /workspace)
+- console logs (unless rendered in UI)
+- error codes
+- environment variable names
+- regex patterns
+- non-user-facing constants
+
+## Key Naming Rules
+
+All keys must be:
+
+- snake_case
+- descriptive
+- stable
+
+Keys must be grouped semantically:
+
+- title
+- subtitle
+- description
+- labels.*
+- placeholders.*
+- buttons.*
+- links.*
+- aria.*
+- errors.*
+- helper_text.*
+- loading.*
+
+Examples:
+
+t('title')
+t('labels.email')
+t('placeholders.password')
+t('buttons.create_account')
+t('buttons.loading')
+t('aria.show_password')
+t('errors.invalid_email')
+

apps/sim/.gitignore

@@ -45,4 +45,5 @@ next-env.d.ts
 # Uploads
 /uploads
 
-.trigger
+.trigger
+certificates

apps/sim/app/(auth)/components/social-login-buttons.tsx

@@ -5,6 +5,7 @@ import { GithubIcon, GoogleIcon } from '@/components/icons'
 import { Button } from '@/components/ui/button'
 import { client } from '@/lib/auth/auth-client'
 import { inter } from '@/app/_styles/fonts/inter/inter'
+import { useTranslations } from 'next-intl'
 
 interface SocialLoginButtonsProps {
   githubAvailable: boolean
@@ -21,16 +22,16 @@ export function SocialLoginButtons({
   isProduction,
   children,
 }: SocialLoginButtonsProps) {
+  const t = useTranslations('social_login')
+
   const [isGithubLoading, setIsGithubLoading] = useState(false)
   const [isGoogleLoading, setIsGoogleLoading] = useState(false)
   const [mounted, setMounted] = useState(false)
 
-  // Set mounted state to true on client-side
   useEffect(() => {
     setMounted(true)
   }, [])
 
-  // Only render on the client side to avoid hydration errors
   if (!mounted) return null
 
   async function signInWithGithub() {
@@ -40,17 +41,19 @@ export function SocialLoginButtons({
     try {
       await client.signIn.social({ provider: 'github', callbackURL })
     } catch (err: any) {
-      let errorMessage = 'Failed to sign in with GitHub'
+      let errorMessage = t('errors.github.default')
 
       if (err.message?.includes('account exists')) {
-        errorMessage = 'An account with this email already exists. Please sign in instead.'
+        errorMessage = t('errors.account_exists')
       } else if (err.message?.includes('cancelled')) {
-        errorMessage = 'GitHub sign in was cancelled. Please try again.'
+        errorMessage = t('errors.github.cancelled')
       } else if (err.message?.includes('network')) {
-        errorMessage = 'Network error. Please check your connection and try again.'
+        errorMessage = t('errors.network')
       } else if (err.message?.includes('rate limit')) {
-        errorMessage = 'Too many attempts. Please try again later.'
+        errorMessage = t('errors.rate_limit')
       }
+
+      console.error(errorMessage)
     } finally {
       setIsGithubLoading(false)
     }
@@ -63,17 +66,19 @@ export function SocialLoginButtons({
     try {
       await client.signIn.social({ provider: 'google', callbackURL })
     } catch (err: any) {
-      let errorMessage = 'Failed to sign in with Google'
+      let errorMessage = t('errors.google.default')
 
       if (err.message?.includes('account exists')) {
-        errorMessage = 'An account with this email already exists. Please sign in instead.'
+        errorMessage = t('errors.account_exists')
       } else if (err.message?.includes('cancelled')) {
-        errorMessage = 'Google sign in was cancelled. Please try again.'
+        errorMessage = t('errors.google.cancelled')
       } else if (err.message?.includes('network')) {
-        errorMessage = 'Network error. Please check your connection and try again.'
+        errorMessage = t('errors.network')
       } else if (err.message?.includes('rate limit')) {
-        errorMessage = 'Too many attempts. Please try again later.'
+        errorMessage = t('errors.rate_limit')
       }
+
+      console.error(errorMessage)
     } finally {
       setIsGoogleLoading(false)
     }
@@ -87,7 +92,7 @@ export function SocialLoginButtons({
       onClick={signInWithGithub}
     >
       <GithubIcon className='!h-[18px] !w-[18px] mr-1' />
-      {isGithubLoading ? 'Connecting...' : 'GitHub'}
+      {isGithubLoading ? t('buttons.connecting') : t('buttons.github')}
     </Button>
   )
 
@@ -99,7 +104,7 @@ export function SocialLoginButtons({
       onClick={signInWithGoogle}
     >
       <GoogleIcon className='!h-[18px] !w-[18px] mr-1' />
-      {isGoogleLoading ? 'Connecting...' : 'Google'}
+      {isGoogleLoading ? t('buttons.connecting') : t('buttons.google')}
     </Button>
   )
 

apps/sim/app/(auth)/components/sso-login-button.tsx

@@ -4,6 +4,7 @@ import { useRouter } from 'next/navigation'
 import { Button } from '@/components/ui/button'
 import { getEnv, isTruthy } from '@/lib/core/config/env'
 import { cn } from '@/lib/core/utils/cn'
+import { useTranslations } from 'next-intl'
 
 interface SSOLoginButtonProps {
   callbackURL?: string
@@ -23,6 +24,7 @@ export function SSOLoginButton({
   primaryClassName,
 }: SSOLoginButtonProps) {
   const router = useRouter()
+  const t = useTranslations()
 
   if (!isTruthy(getEnv('NEXT_PUBLIC_SSO_ENABLED'))) {
     return null
@@ -47,7 +49,7 @@ export function SSOLoginButton({
       variant={variant === 'outline' ? 'outline' : undefined}
       className={cn(variant === 'outline' ? outlineBtnClasses : primaryBtnClasses, className)}
     >
-      Sign in with SSO
+      {t('sign_in_with_sso')}
     </Button>
   )
 }

apps/sim/app/(auth)/components/support-footer.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { useTranslations } from 'next-intl'
 import { inter } from '@/app/_styles/fonts/inter/inter'
 import { useBrandConfig } from '@/ee/whitelabeling'
 
@@ -23,17 +24,18 @@ export interface SupportFooterProps {
  */
 export function SupportFooter({ position = 'fixed' }: SupportFooterProps) {
   const brandConfig = useBrandConfig()
+  const t = useTranslations()
 
   return (
     <div
       className={`${inter.className} auth-text-muted right-0 bottom-0 left-0 z-50 pb-8 text-center font-[340] text-[13px] leading-relaxed ${position}`}
     >
-      Need help?{' '}
+      {t('helper_text.need_help')}{' '}
       <a
         href={`mailto:${brandConfig.supportEmail}`}
         className='auth-link underline-offset-4 transition hover:underline'
       >
-        Contact support
+        {t('links.contact_support')}
       </a>
     </div>
   )