@arqel-dev/ai 0.15.0 → 0.16.0

package/dist/index.js

@@ -1,3 +1,4 @@
+import { useArqelTranslations, useArqelLocale } from '@arqel-dev/react/utils';
 import { Label, Button, Card, CardContent, Badge, Alert, AlertDescription, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Textarea } from '@arqel-dev/ui';
 import { useId, useState, useCallback, useMemo } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -82,9 +83,11 @@ function AiExtractInput(props) {
     csrfToken,
     onPopulateField
   } = props;
+  const t = useArqelTranslations();
   const sourceField = fieldProps?.sourceField ?? "";
   const targetFields = fieldProps?.targetFields ?? [];
-  const buttonLabel = fieldProps?.buttonLabel ?? "Extract with AI";
+  const serverLabel = fieldProps?.buttonLabel;
+  const buttonLabel = serverLabel !== void 0 && serverLabel !== "" ? serverLabel : t("arqel.ai.extract", "Extract with AI");
   const reactId = useId();
   const previewId = `arqel-ai-extract-${reactId}`;
   const [extracted, setExtracted] = useState(value);
@@ -115,7 +118,12 @@ function AiExtractInput(props) {
   const handleExtract = useCallback(async () => {
     const url = buildExtractUrl(extractUrl, resource, field);
     if (url === null) {
-      setError("Missing extract URL: provide `extractUrl` or both `resource` and `field`.");
+      setError(
+        t(
+          "arqel.ai.missing_extract_url",
+          "Missing extract URL: provide `extractUrl` or both `resource` and `field`."
+        )
+      );
       return;
     }
     const sourceText = coerceSourceText(
@@ -144,27 +152,28 @@ function AiExtractInput(props) {
         } catch {
           message = null;
         }
-        setError(message ?? `Extraction failed (HTTP ${String(response.status)}).`);
+        setError(
+          message ?? t("arqel.ai.extract_error_http", "Extraction failed (HTTP :status).", {
+            status: String(response.status)
+          })
+        );
         return;
       }
       const body = await response.json();
       if (!isPlainRecord(body.extracted)) {
-        setError("Extraction failed: invalid response body.");
+        setError(t("arqel.ai.extract_error_invalid", "Extraction failed: invalid response body."));
         return;
       }
       setExtracted(body.extracted);
     } catch {
-      setError("Extraction failed: network error.");
+      setError(t("arqel.ai.extract_error_network", "Extraction failed: network error."));
     } finally {
       setIsLoading(false);
     }
-  }, [csrfToken, extractUrl, field, formData, resource, sourceField]);
+  }, [csrfToken, extractUrl, field, formData, resource, sourceField, t]);
   const hasExtraction = extracted !== null && Object.keys(extracted).length > 0;
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", "data-arqel-field": "aiExtract", "data-field-name": name, children: [
-    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Label, { className: "text-muted-foreground", children: [
-      "Source: ",
-      sourceField
-    ] }) }),
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Label, { className: "text-muted-foreground", children: t("arqel.ai.source", "Source: :field", { field: sourceField }) }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsxs(
         Button,
@@ -177,7 +186,7 @@ function AiExtractInput(props) {
           disabled: isLoading,
           "aria-label": buttonLabel,
           children: [
-            isLoading ? /* @__PURE__ */ jsx("span", { role: "status", "aria-label": "Extracting", children: /* @__PURE__ */ jsx(Spinner, {}) }) : null,
+            isLoading ? /* @__PURE__ */ jsx("span", { role: "status", "aria-label": t("arqel.ai.status_extracting", "Extracting"), children: /* @__PURE__ */ jsx(Spinner, {}) }) : null,
             /* @__PURE__ */ jsx("span", { children: buttonLabel })
           ]
         }
@@ -190,7 +199,7 @@ function AiExtractInput(props) {
           onClick: () => {
             applyAll(extracted);
           },
-          children: "Apply all"
+          children: t("arqel.ai.apply_all", "Apply all")
         }
       ) : null
     ] }),
@@ -219,8 +228,8 @@ function AiExtractInput(props) {
                   onClick: () => {
                     applyOne(target, val);
                   },
-                  "aria-label": `Apply ${target}`,
-                  children: "Apply"
+                  "aria-label": t("arqel.ai.apply_field", "Apply :field", { field: target }),
+                  children: t("arqel.ai.apply", "Apply")
                 }
               )
             ] })
@@ -228,7 +237,7 @@ function AiExtractInput(props) {
         },
         target
       );
-    }) }) }) }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground italic", children: "No extraction yet \u2014 click button to start." }),
+    }) }) }) }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground italic", children: t("arqel.ai.extract_empty", "No extraction yet \u2014 click button to start.") }),
     error !== null ? /* @__PURE__ */ jsx(Alert, { variant: "destructive", children: /* @__PURE__ */ jsx(AlertDescription, { children: error }) }) : null
   ] });
 }
@@ -269,14 +278,15 @@ function readFileAsDataUrl(file) {
     reader.readAsDataURL(file);
   });
 }
-function formatBytes(bytes) {
+function formatBytes(bytes, locale) {
+  const round1 = (value) => new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }).format(value);
   if (bytes >= 1048576) {
-    return `${(bytes / 1048576).toFixed(1)} MB`;
+    return `${round1(bytes / 1048576)} MB`;
   }
   if (bytes >= 1024) {
-    return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${round1(bytes / 1024)} KB`;
   }
-  return `${String(bytes)} B`;
+  return `${round1(bytes)} B`;
 }
 function Spinner2() {
   return /* @__PURE__ */ jsxs(
@@ -320,7 +330,10 @@ function AiImageInput(props) {
   const populateFields = fieldProps?.populateFields ?? {};
   const acceptedMimes = fieldProps?.acceptedMimes ?? [];
   const maxFileSize = fieldProps?.maxFileSize ?? 0;
-  const buttonLabel = fieldProps?.buttonLabel ?? "Analyze with AI";
+  const t = useArqelTranslations();
+  const locale = useArqelLocale();
+  const serverLabel = fieldProps?.buttonLabel;
+  const buttonLabel = serverLabel !== void 0 && serverLabel !== "" ? serverLabel : t("arqel.ai.analyze", "Analyze with AI");
   const reactId = useId();
   const inputId = `arqel-ai-image-${reactId}`;
   const [file, setFile] = useState(null);
@@ -340,7 +353,12 @@ function AiImageInput(props) {
         return;
       }
       if (maxFileSize > 0 && next.size > maxFileSize) {
-        setError(`File too large: ${formatBytes(next.size)} (max ${formatBytes(maxFileSize)}).`);
+        setError(
+          t("arqel.ai.file_too_large", "File too large: :size (max :max).", {
+            size: formatBytes(next.size, locale),
+            max: formatBytes(maxFileSize, locale)
+          })
+        );
         setFile(null);
         setPreviewUrl(null);
         return;
@@ -352,7 +370,7 @@ function AiImageInput(props) {
         setPreviewUrl(null);
       }
     },
-    [maxFileSize]
+    [locale, maxFileSize, t]
   );
   const handleAnalyze = useCallback(async () => {
     if (file === null) {
@@ -360,7 +378,12 @@ function AiImageInput(props) {
     }
     const url = buildAnalyzeUrl(analyzeUrl, resource, field);
     if (url === null) {
-      setError("Missing analyze URL: provide `analyzeUrl` or both `resource` and `field`.");
+      setError(
+        t(
+          "arqel.ai.missing_analyze_url",
+          "Missing analyze URL: provide `analyzeUrl` or both `resource` and `field`."
+        )
+      );
       return;
     }
     setIsLoading(true);
@@ -387,12 +410,16 @@ function AiImageInput(props) {
         } catch {
           message = null;
         }
-        setError(message ?? `Analysis failed (HTTP ${String(response.status)}).`);
+        setError(
+          message ?? t("arqel.ai.analyze_error_http", "Analysis failed (HTTP :status).", {
+            status: String(response.status)
+          })
+        );
         return;
       }
       const body = await response.json();
       if (!isStringRecord(body.analyses)) {
-        setError("Analysis failed: invalid response body.");
+        setError(t("arqel.ai.analyze_error_invalid", "Analysis failed: invalid response body."));
         return;
       }
       setResults(body.analyses);
@@ -403,11 +430,11 @@ function AiImageInput(props) {
         onChange(imageBase64);
       }
     } catch {
-      setError("Analysis failed: network error.");
+      setError(t("arqel.ai.analyze_error_network", "Analysis failed: network error."));
     } finally {
       setIsLoading(false);
     }
-  }, [analyzeUrl, csrfToken, field, file, onChange, resource]);
+  }, [analyzeUrl, csrfToken, field, file, onChange, resource, t]);
   const applyOne = useCallback(
     (analysisKey, val) => {
       const target = populateMapping[analysisKey];
@@ -448,7 +475,9 @@ function AiImageInput(props) {
             htmlFor: inputId,
             className: "flex items-center justify-center w-full min-h-[6rem] rounded-sm border-2 border-dashed border-border bg-muted/40 px-4 py-6 text-sm text-muted-foreground hover:bg-muted cursor-pointer transition-colors",
             children: [
-              /* @__PURE__ */ jsx("span", { children: file !== null ? file.name : `Click or drop image (${accept !== "" ? accept : "any"})` }),
+              /* @__PURE__ */ jsx("span", { children: file !== null ? file.name : t("arqel.ai.image_dropzone", "Click or drop image (:accept)", {
+                accept: accept !== "" ? accept : t("arqel.ai.image_accept_any", "any")
+              }) }),
               /* @__PURE__ */ jsx(
                 "input",
                 {
@@ -457,7 +486,7 @@ function AiImageInput(props) {
                   accept,
                   onChange: handleFileChange,
                   className: "sr-only",
-                  "aria-label": "Image file"
+                  "aria-label": t("arqel.ai.image_file", "Image file")
                 }
               )
             ]
@@ -467,7 +496,7 @@ function AiImageInput(props) {
           "img",
           {
             src: previewUrl,
-            alt: "Selected preview",
+            alt: t("arqel.ai.selected_preview_alt", "Selected preview"),
             "data-testid": "image-preview",
             className: "max-h-64 max-w-full rounded-sm"
           }
@@ -484,7 +513,7 @@ function AiImageInput(props) {
               disabled: !canAnalyze,
               "aria-label": buttonLabel,
               children: [
-                isLoading ? /* @__PURE__ */ jsx("span", { role: "status", "aria-label": "Analyzing", children: /* @__PURE__ */ jsx(Spinner2, {}) }) : null,
+                isLoading ? /* @__PURE__ */ jsx("span", { role: "status", "aria-label": t("arqel.ai.status_analyzing", "Analyzing"), children: /* @__PURE__ */ jsx(Spinner2, {}) }) : null,
                 /* @__PURE__ */ jsx("span", { children: buttonLabel })
               ]
             }
@@ -497,7 +526,7 @@ function AiImageInput(props) {
               onClick: () => {
                 applyAll(results);
               },
-              children: "Apply all"
+              children: t("arqel.ai.apply_all", "Apply all")
             }
           ) : null
         ] }),
@@ -531,8 +560,8 @@ function AiImageInput(props) {
                       onClick: () => {
                         applyOne(key, val);
                       },
-                      "aria-label": `Apply ${key}`,
-                      children: "Apply"
+                      "aria-label": t("arqel.ai.apply_field", "Apply :field", { field: key }),
+                      children: t("arqel.ai.apply", "Apply")
                     }
                   ) : null
                 ] })
@@ -547,7 +576,7 @@ function AiImageInput(props) {
   );
 }
 var DEFAULT_BUTTON_LABEL = "Classify with AI";
-var NO_CONTEXT_TOOLTIP = "No context fields configured. Add `classifyFromFields` to enable AI classification.";
+var NO_CONTEXT_TOOLTIP_FALLBACK = "No context fields configured. Add `classifyFromFields` to enable AI classification.";
 function buildClassifyUrl(override, resource, field) {
   if (override !== void 0 && override !== "") {
     return override;
@@ -595,9 +624,11 @@ function AiSelectInput(props) {
     classifyUrl,
     csrfToken
   } = props;
+  const t = useArqelTranslations();
   const options = fieldProps?.options ?? {};
   const fallbackOption = fieldProps?.fallbackOption ?? null;
   const hasContextFields = fieldProps?.hasContextFields ?? false;
+  const buttonLabel = t("arqel.ai.classify", DEFAULT_BUTTON_LABEL);
   const reactId = useId();
   const selectId = `arqel-ai-select-${reactId}`;
   const [internalValue, setInternalValue] = useState(value);
@@ -626,7 +657,12 @@ function AiSelectInput(props) {
   const handleClassify = useCallback(async () => {
     const url = buildClassifyUrl(classifyUrl, resource, field);
     if (url === null) {
-      setError("Missing classify URL: provide `classifyUrl` or both `resource` and `field`.");
+      setError(
+        t(
+          "arqel.ai.missing_classify_url",
+          "Missing classify URL: provide `classifyUrl` or both `resource` and `field`."
+        )
+      );
       return;
     }
     setIsLoading(true);
@@ -644,7 +680,11 @@ function AiSelectInput(props) {
         body: JSON.stringify({ formData: formData ?? {} })
       });
       if (!response.ok) {
-        setError(`Classification failed (HTTP ${String(response.status)}).`);
+        setError(
+          t("arqel.ai.classify_error_http", "Classification failed (HTTP :status).", {
+            status: String(response.status)
+          })
+        );
         return;
       }
       const body = await response.json();
@@ -659,19 +699,19 @@ function AiSelectInput(props) {
         setSuggestion("fallback");
         return;
       }
-      setError("Could not classify.");
+      setError(t("arqel.ai.classify_error_none", "Could not classify."));
     } catch {
-      setError("Classification failed: network error.");
+      setError(t("arqel.ai.classify_error_network", "Classification failed: network error."));
     } finally {
       setIsLoading(false);
     }
-  }, [applyValue, classifyUrl, csrfToken, fallbackOption, field, formData, resource]);
+  }, [applyValue, classifyUrl, csrfToken, fallbackOption, field, formData, resource, t]);
   const buttonDisabled = isLoading || !hasContextFields;
-  const buttonTitle = !hasContextFields ? NO_CONTEXT_TOOLTIP : void 0;
+  const buttonTitle = !hasContextFields ? t("arqel.ai.classify_no_context_tooltip", NO_CONTEXT_TOOLTIP_FALLBACK) : void 0;
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", "data-arqel-field": "aiSelect", "data-field-name": name, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsxs(Select, { value: currentValue ?? "", onValueChange: handleSelectChange, name, children: [
-        /* @__PURE__ */ jsx(SelectTrigger, { id: selectId, className: "flex-1", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select..." }) }),
+        /* @__PURE__ */ jsx(SelectTrigger, { id: selectId, className: "flex-1", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("arqel.ai.select_placeholder", "Select...") }) }),
         /* @__PURE__ */ jsx(SelectContent, { children: Object.entries(options).map(([key, label]) => /* @__PURE__ */ jsx(SelectItem, { value: key, children: label }, key)) })
       ] }),
       /* @__PURE__ */ jsxs(
@@ -683,11 +723,11 @@ function AiSelectInput(props) {
             void handleClassify();
           },
           disabled: buttonDisabled,
-          "aria-label": DEFAULT_BUTTON_LABEL,
+          "aria-label": buttonLabel,
           ...buttonTitle !== void 0 ? { title: buttonTitle } : {},
           children: [
-            isLoading ? /* @__PURE__ */ jsx("span", { role: "status", "aria-label": "Classifying", children: /* @__PURE__ */ jsx(Spinner3, {}) }) : null,
-            /* @__PURE__ */ jsx("span", { children: DEFAULT_BUTTON_LABEL })
+            isLoading ? /* @__PURE__ */ jsx("span", { role: "status", "aria-label": t("arqel.ai.status_classifying", "Classifying"), children: /* @__PURE__ */ jsx(Spinner3, {}) }) : null,
+            /* @__PURE__ */ jsx("span", { children: buttonLabel })
           ]
         }
       )
@@ -698,7 +738,7 @@ function AiSelectInput(props) {
         {
           variant: "secondary",
           className: suggestion === "ai" ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300" : "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300",
-          children: suggestion === "ai" ? "Suggested by AI" : "Used fallback"
+          children: suggestion === "ai" ? t("arqel.ai.suggestion_ai", "Suggested by AI") : t("arqel.ai.suggestion_fallback", "Used fallback")
         }
       ),
       /* @__PURE__ */ jsx(
@@ -709,7 +749,7 @@ function AiSelectInput(props) {
           onClick: () => {
             setSuggestion(null);
           },
-          children: "Accept"
+          children: t("arqel.ai.suggestion_accept", "Accept")
         }
       ),
       /* @__PURE__ */ jsx(
@@ -720,7 +760,7 @@ function AiSelectInput(props) {
           onClick: () => {
             setSuggestion(null);
           },
-          children: "Pick another"
+          children: t("arqel.ai.suggestion_pick_another", "Pick another")
         }
       )
     ] }) : null,
@@ -776,7 +816,11 @@ function AiTextInput(props) {
     generateUrl,
     csrfToken
   } = props;
-  const buttonLabel = fieldProps?.buttonLabel ?? DEFAULT_BUTTON_LABEL2;
+  const t = useArqelTranslations();
+  const locale = useArqelLocale();
+  const numberFormatter = useMemo(() => new Intl.NumberFormat(locale), [locale]);
+  const serverLabel = fieldProps?.buttonLabel;
+  const buttonLabel = serverLabel !== void 0 && serverLabel !== "" ? serverLabel : t("arqel.ai.generate", DEFAULT_BUTTON_LABEL2);
   const maxLength = fieldProps?.maxLength ?? null;
   const reactId = useId();
   const textareaId = `arqel-ai-text-${reactId}`;
@@ -810,7 +854,12 @@ function AiTextInput(props) {
   const handleGenerate = useCallback(async () => {
     const url = buildGenerateUrl(generateUrl, resource, field);
     if (url === null) {
-      setError("Missing generate URL: provide `generateUrl` or both `resource` and `field`.");
+      setError(
+        t(
+          "arqel.ai.missing_generate_url",
+          "Missing generate URL: provide `generateUrl` or both `resource` and `field`."
+        )
+      );
       return;
     }
     setIsLoading(true);
@@ -827,7 +876,11 @@ function AiTextInput(props) {
         body: JSON.stringify({ formData: formData ?? {} })
       });
       if (!response.ok) {
-        setError(`Generation failed (HTTP ${String(response.status)}).`);
+        setError(
+          t("arqel.ai.error_http", "Generation failed (HTTP :status).", {
+            status: String(response.status)
+          })
+        );
         return;
       }
       const body = await response.json();
@@ -835,12 +888,12 @@ function AiTextInput(props) {
       applyGeneratedText(text);
       setHasGenerated(true);
     } catch {
-      setError("Generation failed: network error.");
+      setError(t("arqel.ai.error_network", "Generation failed: network error."));
     } finally {
       setIsLoading(false);
     }
-  }, [applyGeneratedText, csrfToken, field, formData, generateUrl, resource]);
-  const triggerLabel = hasGenerated ? REGENERATE_LABEL : buttonLabel;
+  }, [applyGeneratedText, csrfToken, field, formData, generateUrl, resource, t]);
+  const triggerLabel = hasGenerated ? t("arqel.ai.regenerate", REGENERATE_LABEL) : buttonLabel;
   const charCount = currentValue.length;
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", "data-arqel-field": "aiText", "data-field-name": name, children: [
     /* @__PURE__ */ jsx(
@@ -855,9 +908,9 @@ function AiTextInput(props) {
       }
     ),
     maxLength !== null ? /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground self-end", "aria-live": "polite", children: [
-      charCount,
+      numberFormatter.format(charCount),
       " / ",
-      maxLength
+      numberFormatter.format(maxLength)
     ] }) : null,
     /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs(
       Button,
@@ -870,7 +923,7 @@ function AiTextInput(props) {
         disabled: isLoading,
         "aria-label": triggerLabel,
         children: [
-          isLoading ? /* @__PURE__ */ jsx("span", { role: "status", "aria-label": "Generating", children: /* @__PURE__ */ jsx(Spinner4, {}) }) : null,
+          isLoading ? /* @__PURE__ */ jsx("span", { role: "status", "aria-label": t("arqel.ai.status_generating", "Generating"), children: /* @__PURE__ */ jsx(Spinner4, {}) }) : null,
           /* @__PURE__ */ jsx("span", { children: triggerLabel })
         ]
       }
@@ -940,6 +993,7 @@ function AiTranslateInput(props) {
     translateUrl,
     csrfToken
   } = props;
+  const t = useArqelTranslations();
   const languages = useMemo(() => fieldProps?.languages ?? [], [fieldProps?.languages]);
   const defaultLanguage = fieldProps?.defaultLanguage ?? languages[0] ?? "";
   const reactId = useId();
@@ -988,7 +1042,12 @@ function AiTranslateInput(props) {
       }
       const url = buildTranslateUrl(translateUrl, resource, field);
       if (url === null) {
-        setError("Missing translate URL: provide `translateUrl` or both `resource` and `field`.");
+        setError(
+          t(
+            "arqel.ai.missing_translate_url",
+            "Missing translate URL: provide `translateUrl` or both `resource` and `field`."
+          )
+        );
         return;
       }
       setError(null);
@@ -1009,19 +1068,25 @@ function AiTranslateInput(props) {
           })
         });
         if (!response.ok) {
-          setError(`Translation failed (HTTP ${String(response.status)}).`);
+          setError(
+            t("arqel.ai.translate_error_http", "Translation failed (HTTP :status).", {
+              status: String(response.status)
+            })
+          );
           return;
         }
         const body = await response.json();
         const incoming = body.translations;
         if (!isStringRecord2(incoming)) {
-          setError("Translation failed: invalid response body.");
+          setError(
+            t("arqel.ai.translate_error_invalid", "Translation failed: invalid response body.")
+          );
           return;
         }
         const merged = { ...currentValue, ...incoming };
         applyValue(merged);
       } catch {
-        setError("Translation failed: network error.");
+        setError(t("arqel.ai.translate_error_network", "Translation failed: network error."));
       } finally {
         setLoadingFor(targetLanguages, false);
       }
@@ -1034,6 +1099,7 @@ function AiTranslateInput(props) {
       field,
       resource,
       setLoadingFor,
+      t,
       translateUrl
     ]
   );
@@ -1062,7 +1128,7 @@ function AiTranslateInput(props) {
         size: "sm",
         onClick: handleTranslateAllMissing,
         disabled: missingCount === 0 || loadingLangs.size > 0,
-        children: "Translate all missing"
+        children: t("arqel.ai.translate_all_missing", "Translate all missing")
       }
     ) }),
     /* @__PURE__ */ jsx("div", { role: "tablist", id: tablistId, className: "flex items-center gap-1 border-b border-border", children: languages.map((lang) => {
@@ -1085,7 +1151,7 @@ function AiTranslateInput(props) {
               {
                 variant: "secondary",
                 role: "img",
-                "aria-label": "Missing translation",
+                "aria-label": t("arqel.ai.missing_translation", "Missing translation"),
                 "data-testid": `missing-dot-${lang}`,
                 className: "px-1 py-0",
                 children: "\u2022"
@@ -1104,7 +1170,9 @@ function AiTranslateInput(props) {
           value: activeText,
           onChange: handleTextareaChange,
           rows: 6,
-          "aria-label": `Translation in ${activeLang}`
+          "aria-label": t("arqel.ai.translate_textarea_aria", "Translation in :language", {
+            language: activeLang
+          })
         }
       ),
       activeLang !== defaultLanguage ? /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxs(
@@ -1115,11 +1183,10 @@ function AiTranslateInput(props) {
           onClick: () => handleTranslateOne(activeLang),
           disabled: activeIsLoading,
           children: [
-            activeIsLoading ? /* @__PURE__ */ jsx("span", { role: "status", "aria-label": "Translating", children: /* @__PURE__ */ jsx(Spinner5, {}) }) : null,
-            /* @__PURE__ */ jsxs("span", { children: [
-              "Translate from ",
-              defaultLanguage
-            ] })
+            activeIsLoading ? /* @__PURE__ */ jsx("span", { role: "status", "aria-label": t("arqel.ai.status_translating", "Translating"), children: /* @__PURE__ */ jsx(Spinner5, {}) }) : null,
+            /* @__PURE__ */ jsx("span", { children: t("arqel.ai.translate_from", "Translate from :language", {
+              language: defaultLanguage
+            }) })
           ]
         }
       ) }) : null