Patterns: Constants

Location, organization, naming, and extract-vs-inline rules for global constants. Load via the patterns-components context group.

Location and Organization

All global constants live in src/constants/, one file per domain:

File	Purpose
main.js	App-wide domain constants: permissions, platforms, node configs, storage keys, AI models
env.js	process.env.REACT_APP_* wrappers as named exports
api.js	RTK Query cache tag names (API_TAGS)
navigation.js	All route path strings (NAV_*) and sidebar menu items
liveChat.js	Screen tabs, participant types, socket events
flowGraph.js	Node types, categories, component registry
integrations.js	Integration type enums, plugin categories
knowledgeBases.js	KB constants, search types, character limits
errors.js	Error code maps
regex.js	Named RegExp constants
Others	deploymentFormPaths.js, notifications.js, markdown.js, testSets.js, translations.js, llmConfiguration.js

No barrel index.js. Import directly from the specific file.

Feature-specific message constants (*Messages.js) are co-located with their store slices.

Naming Rules

• Exported constants: UPPER_SNAKE_CASE always. No exceptions.
• Enum-like values: Plain objects with UPPER_SNAKE_CASE keys, exported as const:

  export const BROADCAST_STATUSES = { COMPLETE: 'COMPLETE', ERROR: 'ERROR' };

• Rich object constants: Entries carry metadata (key, label, icon, description):

  export const PLATFORMS = {
    WEBCHAT: { key: 'MICROSOFT_WEB_CHAT', icon: <GlobalOutlined /> },
  };

• Module-private constants appear below a // Constant declarations comment in component files (antd destructuring, local maps).

What to Extract vs Inline

Extract to src/constants/:

• Backend enum strings, API tag names, navigation paths
• Numeric limits, date formats, feature flags
• Any value referenced by 2+ files

Keep inline (file-scope const):

• Antd component destructuring (const { Text } = Typography)
• Tab/mode maps private to one screen
• Form field name arrays used only in one form

Rule of thumb: if the same string or number is repeated in 2+ files, it belongs in src/constants/. Magic numbers repeated across analytics or layout screens (chart heights, sidebar label widths, etc.) should be extracted either to a CSS class (see styling.md Category C) or to a domain constant, depending on whether the value is visual or semantic.