builder-ui-i18n

name	builder-ui-i18n
description	Build or modify ChatbotX builder UI components, forms, tables, dialogs, shared UI usage, and translations. Use for user-facing React/Next.js UI in apps/builder, especially when labels, placeholders, menus, or validation messages are added or changed.

Builder UI and i18n

Use for apps/builder UI work. Pair with feature-scaffold for new feature modules and pages.

UI Stack

• React 19 + Next.js app router.
• Shared components come from @chatbotx.io/ui/*.
• Builder also has local components under apps/builder/src/components.
• Forms use React Hook Form, Zod, and next-safe-action adapter.
• URL state commonly uses nuqs.
• Icons should use the project icon library when available.

i18n Rule

All user-facing strings must use translations. Do not hardcode labels, placeholders, button text, empty states, tab names, toasts, or dialog copy in builder UI.

Primary files:

• apps/builder/messages/en.json
• apps/builder/messages/vi.json

Before adding keys, check existing fields.*, common actions, table labels, and feature namespaces. Add both English and Vietnamese values for new keys.

Typical component pattern:

"use client"

import { useTranslations } from "next-intl"

export const ExampleButton = () => {
  const t = ()
   
}