# i18n & Translations

ContractGuard supports **English (en)** and **Bahasa Indonesia (id)** throughout the UI. The language can be toggled in the navbar.

***

## How It Works

1. `LanguageProvider` (`app/components/LanguageProvider.tsx`) holds the current language in React context
2. The `useLanguage()` hook returns `{ lang, setLang, t }` to any component
3. `t("key")` looks up the translation in `app/i18n/translations.ts`

***

## Using Translations in a Component

```tsx
import { useLanguage } from "@/app/components/LanguageProvider";

export default function MyPage() {
  const { t, lang, setLang } = useLanguage();

  return (
    <div>
      <h1>{t("audit.headline")}</h1>
      <button onClick={() => setLang(lang === "en" ? "id" : "en")}>
        {lang === "en" ? "ID" : "EN"}
      </button>
    </div>
  );
}
```

***

## Adding a New Translation Key

**File:** `app/i18n/translations.ts`

```typescript
const translations: Record<string, { en: string; id: string }> = {
  // existing keys...

  // Add your key here:
  "myPage.title": {
    en: "My Page Title",
    id: "Judul Halaman Saya"
  },
}
```

**Rules:**

* Key format: `section.camelCase` (e.g., `audit.headline`, `nav.features`)
* Always provide both `en` and `id` values
* Keep keys descriptive and scoped to the page/section they belong to

***

## Key Naming Conventions

| Prefix     | Section                     |
| ---------- | --------------------------- |
| `nav.*`    | Navbar links                |
| `hero.*`   | Landing page hero           |
| `audit.*`  | Audit page                  |
| `create.*` | Create contract page        |
| `dash.*`   | Dashboard                   |
| `price.*`  | Pricing page                |
| `common.*` | Shared UI (buttons, states) |

***

## Current Translation Coverage

The dictionary covers 200+ keys including:

* All page headings and body text
* Form labels and placeholders
* Button labels
* Error and success messages
* Empty state messages
* Tooltip and helper text

***

## Language Persistence

The selected language is stored in `localStorage` by `LanguageProvider`. It persists across page refreshes and browser sessions.

***

## AI Response Language

The AI analysis endpoints (`/api/audit`, `/api/audit-stream`, `/api/chat-contract`, `/api/review/checkpoint-with-contract`) accept a `lang` parameter (`"en"` or `"id"`) that controls the language of the AI-generated content. This is separate from the UI language — you can show an English UI while getting Indonesian AI analysis, or vice versa.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://contractguard-ai.gitbook.io/contractguard-ai-docs/development/i18n.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.