feat: add character counter to AI and project description fields

bdshadow · bdshadow · commit 914df1db54e1 · 2026-08-06T11:28:40.000+02:00
Users had no way to see how many characters they had entered or what the limit was in AI language notes, AI project description, and the project settings description. Reuse the counter from key creation: - move CharacterCounter to tg.component/common, since it is no longer owned by the translations view - drop the "description is too long" helper text in the AI dialogs, as the counter already renders the over-limit warning - pass the over-limit count as a number instead of a string, so ICU plural selection actually applies Closes #3833
diff --git a/e2e/cypress/e2e/languages/aiCustomization.cy.ts b/e2e/cypress/e2e/languages/aiCustomization.cy.ts
@@ -25,6 +25,7 @@ describe('Machine translation settings', () => {
     const description = 'Tolgee is software localization platform';
     cy.gcy('ai-customization-project-description-add').click();
     cy.gcy('project-ai-prompt-dialog-description-input').type(description);
+    cy.gcy('character-counter').should('contain', `${description.length}/2000`);
     cy.gcy('project-ai-prompt-dialog-save').click();
     waitForGlobalLoading();
     cy.gcy('ai-customization-project-description')
@@ -39,6 +40,7 @@ describe('Machine translation settings', () => {
       language: 'cs',
     }).click();
     cy.gcy('language-ai-prompt-dialog-description-input').type(description);
+    cy.gcy('character-counter').should('contain', `${description.length}/2000`);
     cy.gcy('language-ai-prompt-dialog-save').click();
     waitForGlobalLoading();
     gcyAdvanced({
diff --git a/e2e/cypress/e2e/projects/settings.cy.ts b/e2e/cypress/e2e/projects/settings.cy.ts
@@ -28,6 +28,11 @@ describe('Projects Basics', () => {
       .first()
       .type('Test description');
 
+    cy.gcy('character-counter').should(
+      'contain',
+      `${'Test description'.length}/2000`
+    );
+
     cy.gcy('default-namespace-select').should('not.exist');
 
     cy.gcy('global-form-save-button').click();
diff --git a/e2e/cypress/support/dataCyType.d.ts b/e2e/cypress/support/dataCyType.d.ts
@@ -136,6 +136,7 @@ declare namespace DataCy {
         "branch-selector": true;
         "cell-key-screenshot-dropzone": true;
         "cell-key-screenshot-file-input": true;
+        "character-counter": true;
         "checkbox-group-multiselect": true;
         "color-palette-field": true;
         "color-palette-popover": true;
diff --git a/webapp/src/component/common/CharacterCounter.tsx b/webapp/src/component/common/CharacterCounter.tsx
@@ -37,11 +37,11 @@ export const CharacterCounter: React.FC<React.PropsWithChildren<Props>> = ({
   const overLimit = currentCount > maxLimit;
 
   return (
-    <StyledContainer>
+    <StyledContainer data-cy="character-counter">
       {overLimit && (
         <StyledWarning role="alert" aria-atomic="true">
           {t('translation_char_counter_over_limit', {
-            count: String(currentCount - maxLimit),
+            count: currentCount - maxLimit,
           })}
         </StyledWarning>
       )}
diff --git a/webapp/src/constants/GlobalValidationSchema.tsx b/webapp/src/constants/GlobalValidationSchema.tsx
@@ -16,6 +16,8 @@ export type TranslateFunction = TFnType<
 type AccountType =
   components['schemas']['PrivateUserAccountModel']['accountType'];
 
+export const PROJECT_DESCRIPTION_MAX_LENGTH = 2000;
+
 Yup.setLocale({
   // use constant translation keys for messages without values
   mixed: {
@@ -258,7 +260,10 @@ export class Validation {
 
   static readonly PROJECT_SETTINGS = Yup.object().shape({
     name: Yup.string().trim().required().min(3).max(100),
-    description: Yup.string().nullable().min(3).max(2000),
+    description: Yup.string()
+      .nullable()
+      .min(3)
+      .max(PROJECT_DESCRIPTION_MAX_LENGTH),
   });
 
   static readonly TRANSLATION_MEMORY_CREATE_EDIT = Yup.object().shape({
diff --git a/webapp/src/ee/llm/AiContextData/AiLanguageDescriptionDialog.tsx b/webapp/src/ee/llm/AiContextData/AiLanguageDescriptionDialog.tsx
@@ -15,7 +15,9 @@ import { useProject } from 'tg.hooks/useProject';
 import { components } from 'tg.service/apiSchema.generated';
 import { useApiMutation } from 'tg.service/http/useQueryApi';
 import { LanguageItem } from 'tg.component/languages/LanguageItem';
+import { CharacterCounter } from 'tg.component/common/CharacterCounter';
 import { AiTips } from './AiTips';
+import { AI_DESCRIPTION_MAX_LENGTH } from './constants';
 
 type LanguageModel = components['schemas']['LanguageModel'];
 
@@ -70,7 +72,8 @@ export const AiLanguageDescriptionDialog = ({
     );
   }
 
-  const isTooLong = Boolean(inputValue && inputValue.length > 2000);
+  const currentCount = inputValue?.length ?? 0;
+  const isTooLong = currentCount > AI_DESCRIPTION_MAX_LENGTH;
 
   return (
     <Dialog open fullWidth maxWidth="sm" onClose={handleClose}>
@@ -82,23 +85,22 @@ export const AiLanguageDescriptionDialog = ({
       </Box>
       <DialogContent>
         <Box sx={{ display: 'grid', gap: '16px' }}>
-          <TextField
-            multiline
-            sx={{ width: '100%', mt: '2px' }}
-            placeholder={placeholder}
-            minRows={2}
-            value={inputValue}
-            onChange={(e) => setInputValue(e.currentTarget.value)}
-            error={isTooLong}
-            helperText={
-              isTooLong &&
-              t(
-                'language_ai_prompt_dialog_description_too_long',
-                'Description is too long (max 2000 characters)'
-              )
-            }
-            data-cy="language-ai-prompt-dialog-description-input"
-          />
+          <Box display="grid" gap={0.5}>
+            <TextField
+              multiline
+              sx={{ width: '100%', mt: '2px' }}
+              placeholder={placeholder}
+              minRows={2}
+              value={inputValue}
+              onChange={(e) => setInputValue(e.currentTarget.value)}
+              error={isTooLong}
+              data-cy="language-ai-prompt-dialog-description-input"
+            />
+            <CharacterCounter
+              currentCount={currentCount}
+              maxLimit={AI_DESCRIPTION_MAX_LENGTH}
+            />
+          </Box>
           <AiTips
             tips={[
               t('language_ai_prompt_tip_usage'),
diff --git a/webapp/src/ee/llm/AiContextData/AiProjectDescriptionDialog.tsx b/webapp/src/ee/llm/AiContextData/AiProjectDescriptionDialog.tsx
@@ -1,4 +1,5 @@
 import {
+  Box,
   Button,
   Dialog,
   DialogActions,
@@ -9,10 +10,12 @@ import {
 import { useTranslate } from '@tolgee/react';
 import { useState } from 'react';
 import LoadingButton from 'tg.component/common/form/LoadingButton';
+import { CharacterCounter } from 'tg.component/common/CharacterCounter';
 import { confirmDiscardUnsaved } from 'tg.hooks/confirmation';
 import { useProject } from 'tg.hooks/useProject';
 import { useApiMutation } from 'tg.service/http/useQueryApi';
 import { AiTips } from './AiTips';
+import { AI_DESCRIPTION_MAX_LENGTH } from './constants';
 
 export const EXAMPLE = 'App for teaching children about the world.';
 
@@ -64,25 +67,29 @@ export const AiProjectDescriptionDialog = ({
     );
   }
 
-  const isTooLong = Boolean(inputValue && inputValue?.length > 2000);
+  const currentCount = inputValue?.length ?? 0;
+  const isTooLong = currentCount > AI_DESCRIPTION_MAX_LENGTH;
 
   return (
     <Dialog open fullWidth maxWidth="sm" onClose={handleClose}>
       <DialogTitle>{t('project_ai_prompt_dialog_title')}</DialogTitle>
       <DialogContent sx={{ display: 'grid', gap: '16px' }}>
-        <TextField
-          multiline
-          sx={{ width: '100%', mt: '2px' }}
-          placeholder={placeholder}
-          minRows={2}
-          value={inputValue}
-          onChange={(e) => setInputValue(e.currentTarget.value)}
-          error={isTooLong}
-          helperText={
-            isTooLong && t('project_ai_prompt_dialog_description_too_long')
-          }
-          data-cy="project-ai-prompt-dialog-description-input"
-        />
+        <Box display="grid" gap={0.5}>
+          <TextField
+            multiline
+            sx={{ width: '100%', mt: '2px' }}
+            placeholder={placeholder}
+            minRows={2}
+            value={inputValue}
+            onChange={(e) => setInputValue(e.currentTarget.value)}
+            error={isTooLong}
+            data-cy="project-ai-prompt-dialog-description-input"
+          />
+          <CharacterCounter
+            currentCount={currentCount}
+            maxLimit={AI_DESCRIPTION_MAX_LENGTH}
+          />
+        </Box>
         <AiTips
           tips={[
             t('project_ai_prompt_dialog_tip_topic'),
diff --git a/webapp/src/ee/llm/AiContextData/constants.ts b/webapp/src/ee/llm/AiContextData/constants.ts
@@ -0,0 +1 @@
+export const AI_DESCRIPTION_MAX_LENGTH = 2000;
diff --git a/webapp/src/views/projects/project/ProjectSettingsGeneral.tsx b/webapp/src/views/projects/project/ProjectSettingsGeneral.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useField } from 'formik';
 import { useProjectLanguages } from 'tg.hooks/useProjectLanguages';
 import { ProjectProfileAvatar } from './ProjectProfileAvatar';
 import { BaseLanguageSelect } from 'tg.views/projects/project/components/BaseLanguageSelect';
@@ -7,7 +8,11 @@ import { StandardForm } from 'tg.component/common/form/StandardForm';
 import { useApiMutation } from 'tg.service/http/useQueryApi';
 import { useProject } from 'tg.hooks/useProject';
 import { messageService } from 'tg.service/MessageService';
-import { Validation } from 'tg.constants/GlobalValidationSchema';
+import {
+  PROJECT_DESCRIPTION_MAX_LENGTH,
+  Validation,
+} from 'tg.constants/GlobalValidationSchema';
+import { CharacterCounter } from 'tg.component/common/CharacterCounter';
 import LoadingButton from 'tg.component/common/form/LoadingButton';
 import { useLeaveProject } from '../useLeaveProject';
 import { TextField } from 'tg.component/common/form/fields/TextField';
@@ -59,6 +64,16 @@ const LanguageSelect = () => {
   );
 };
 
+const DescriptionCharacterCounter = () => {
+  const [field] = useField<string | undefined>('description');
+  return (
+    <CharacterCounter
+      currentCount={field.value?.length ?? 0}
+      maxLimit={PROJECT_DESCRIPTION_MAX_LENGTH}
+    />
+  );
+};
+
 export const ProjectSettingsGeneral = () => {
   const project = useProject();
   const { t } = useTranslate();
@@ -201,6 +216,7 @@ export const ProjectSettingsGeneral = () => {
                 data-cy="project-settings-description"
                 sx={{ mt: 0 }}
               />
+              <DescriptionCharacterCounter />
             </Box>
             <ProjectLanguagesProvider>
               <LanguageSelect />
diff --git a/webapp/src/views/projects/translations/translationVisual/PluralEditor.tsx b/webapp/src/views/projects/translations/translationVisual/PluralEditor.tsx
@@ -6,7 +6,7 @@ import { getLanguageDirection } from 'tg.fixtures/getLanguageDirection';
 import { RefObject } from 'react';
 import { EditorView } from 'codemirror';
 import { useProject } from 'tg.hooks/useProject';
-import { CharacterCounter } from '../cell/CharacterCounter';
+import { CharacterCounter } from 'tg.component/common/CharacterCounter';
 import { getVisibleCharCount } from '../cell/getVisibleCharCount';
 
 type Props = {

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export const AI_DESCRIPTION_MAX_LENGTH = 2000;`