From b36dddd2d28c4860384a694ed1b84170af9d5450 Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Sat, 5 Oct 2024 07:21:29 +0100
Subject: [PATCH] fix(frontend): NLU Training I18n translation issue

---
 .../src/components/nlp/components/NlpTrainForm.tsx    |  2 +-
 frontend/src/hooks/useTranslate.tsx                   | 11 +++++++----
 frontend/src/i18n/i18n.types.ts                       |  7 ++++++-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/nlp/components/NlpTrainForm.tsx b/frontend/src/components/nlp/components/NlpTrainForm.tsx
index e157f71c..cb9d595f 100644
--- a/frontend/src/components/nlp/components/NlpTrainForm.tsx
+++ b/frontend/src/components/nlp/components/NlpTrainForm.tsx
@@ -435,7 +435,7 @@ const NlpDatasetSample: FC<NlpDatasetSampleProps> = ({
           >
             {!selection?.value
               ? t("button.select_some_text")
-              : t("button.add_nlp_entity", { defaultValue: selection.value })}
+              : t("button.add_nlp_entity", { 0: selection.value })}
           </Button>
 
           <Button
diff --git a/frontend/src/hooks/useTranslate.tsx b/frontend/src/hooks/useTranslate.tsx
index bd622a02..3859d48d 100644
--- a/frontend/src/hooks/useTranslate.tsx
+++ b/frontend/src/hooks/useTranslate.tsx
@@ -6,10 +6,13 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
-import { TOptionsBase } from "i18next";
 import { useTranslation } from "react-i18next";
 
-import { TTranslateProps, TTranslationKeys } from "@/i18n/i18n.types";
+import {
+  TTranslateProps,
+  TTranslationKeys,
+  TOptionsBaseExtended,
+} from "@/i18n/i18n.types";
 
 export const useTranslate = () => {
   const { t, i18n } = useTranslation();
@@ -21,13 +24,13 @@ export const useTranslate = () => {
     // full key. For example: prop1 = label.buttons
     if (typeof prop1 === "string" && prop1.includes(".")) {
       const key = prop1 as TTranslationKeys;
-      const options = (prop2 || {}) as TOptionsBase;
+      const options = (prop2 || {}) as TOptionsBaseExtended;
 
       return t(key, { defaultValue: "", ...options });
     }
 
     // key with nested key. For example: prop1=label prop2=buttons
-    const options = (prop3 || {}) as TOptionsBase;
+    const options = (prop3 || {}) as TOptionsBaseExtended;
 
     return t([prop1, prop2].join(".") as TTranslationKeys, {
       defaultValue: "",
diff --git a/frontend/src/i18n/i18n.types.ts b/frontend/src/i18n/i18n.types.ts
index ad504175..f0e054b0 100644
--- a/frontend/src/i18n/i18n.types.ts
+++ b/frontend/src/i18n/i18n.types.ts
@@ -22,8 +22,13 @@ export type TTranslationKeys = TFilterNestedKeysOfType<TEnTranslation> &
 export type TNestedTranslation<T extends keyof TTranslation> =
   TFilterNestedKeysOfType<TTranslation[T]>;
 
+export type TOptionsBaseExtended = TOptionsBase & { 0?: string };
+
 export type TTranslateProps = {
-  <K extends TTranslationKeys>(prop1: K, prop2?: TOptionsBase & object): string;
+  <K extends TTranslationKeys>(
+    prop1: K,
+    prop2?: TOptionsBaseExtended & object,
+  ): string;
   <K extends keyof TTranslation, N = TNestedTranslation<K>>(
     prop1: K,
     prop2: N & TNestedTranslation<K>,