@truedat/ai 7.3.3 → 7.3.4

package/src/components/__tests__/TranslationModal.spec.js

@@ -0,0 +1,351 @@
+import React from "react";
+import { act, fireEvent, waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import TranslationModal from "../TranslationModal";
+
+jest.mock("@truedat/ai/hooks/useTranslations", () => ({
+  useRequestTranslation: jest.fn(() => ({
+    trigger: jest.fn(() =>
+      Promise.resolve({
+        data: {
+          data: {
+            de: {
+              "concept-field-1": "Ein Messer in der Dunkelheit",
+              "concept-field-2": "Das große Abenteuer von Heron dem Krieger",
+              "concept-field-default": "Dieser Wert muss bestätigt werden",
+              concept_term_name: "Konzeptentwurf",
+              "secondary-field-4":
+                "Eine große Macht bringt große Verantwortung mit sich",
+            },
+            es: {
+              "concept-field-1": "Un cuchillo en la oscuridad",
+              "concept-field-2": "La gran aventura de Heron El Guerrero",
+              "concept-field-default": "Este valor debe confirmarse",
+              concept_term_name: "borrador-de-concepto",
+              "secondary-field-4":
+                "Un gran poder conlleva una gran responsabilidad",
+            },
+            fr: {
+              "concept-field-1": "Un couteau dans le noir",
+              "concept-field-2": "La grande aventure d'Heron le Guerrier",
+              "concept-field-default": "Cette valeur doit être confirmée",
+              concept_term_name: "ébauche de concept",
+              "secondary-field-4":
+                "Un grand pouvoir implique une grande responsabilité",
+            },
+          },
+        },
+      })
+    ),
+  })),
+}));
+
+const props = {
+  open: true,
+  onClose: jest.fn(),
+  setTranslations: jest.fn(),
+  domainId: 1,
+  resourceType: "business_concept",
+  i18nContent: {
+    en: {
+      id: 1,
+      lang: "en",
+      is_default: true,
+      is_required: true,
+      name: "concept-draft",
+      content: {
+        "concept-field-1": {
+          origin: "user",
+          value: "Un cuchillo en la oscuridad",
+        },
+        "concept-field-2": {
+          origin: "ai",
+          value: "La gran aventura de Heron El Guerrero",
+        },
+        "secondary-field-2": {
+          origin: "user",
+          value: "B",
+        },
+        "secondary-field-4": {
+          origin: "user",
+          value: "Un gran poder conlleva una gran responsabilidad",
+        },
+      },
+    },
+    es: {
+      id: 2,
+      lang: "es",
+      is_default: false,
+      is_required: true,
+      name: "",
+      content: {},
+    },
+    de: {
+      id: 3,
+      lang: "de",
+      is_default: false,
+      is_required: false,
+      name: "",
+      content: {},
+    },
+    fr: {
+      id: 4,
+      lang: "fr",
+      is_default: false,
+      is_required: false,
+      name: "",
+      content: {},
+    },
+  },
+  template: {
+    id: "135",
+    name: "concept",
+    label: "concept",
+    scope: "bg",
+    content: [
+      {
+        fields: [
+          {
+            cardinality: "?",
+            default: {
+              origin: "default",
+              value: "",
+            },
+            label: "concept-field-1",
+            name: "concept-field-1",
+            type: "string",
+            values: null,
+            widget: "string",
+          },
+          {
+            cardinality: "?",
+            default: {
+              origin: "default",
+              value: "",
+            },
+            label: "concept-field-2",
+            name: "concept-field-2",
+            type: "string",
+            values: null,
+            widget: "string",
+          },
+          {
+            cardinality: "?",
+            default: {
+              origin: "default",
+              value: "This value is to be confirmed",
+            },
+            label: "concept-field-default",
+            name: "concept-field-default",
+            type: "string",
+            values: null,
+            widget: "string",
+          },
+        ],
+        name: "Primary Properties",
+      },
+      {
+        fields: [
+          {
+            cardinality: "?",
+            default: {
+              origin: "default",
+              value: "",
+            },
+            label: "secondary-field-1",
+            name: "secondary-field-1",
+            type: "string",
+            values: null,
+            widget: "string",
+          },
+          {
+            cardinality: "?",
+            default: {
+              origin: "default",
+              value: "",
+            },
+            label: "secondary-field-4",
+            name: "secondary-field-4",
+            type: "string",
+            values: null,
+            widget: "string",
+          },
+          {
+            cardinality: "?",
+            default: {
+              origin: "default",
+              value: "",
+            },
+            label: "secondary-field-2",
+            name: "secondary-field-2",
+            subscribable: false,
+            type: "string",
+            values: {
+              fixed: ["A", "B", "C"],
+            },
+            widget: "dropdown",
+          },
+          {
+            cardinality: "?",
+            default: {
+              origin: "default",
+              value: "",
+            },
+            label: "secondary-field-3",
+            name: "secondary-field-3",
+            subscribable: false,
+            type: "string",
+            values: {
+              fixed: ["a", "b", "c"],
+            },
+            widget: "dropdown",
+          },
+          {
+            cardinality: "?",
+            default: {
+              origin: "default",
+              value: "a",
+            },
+            label: "secondary-field-default",
+            name: "secondary-field-default",
+            subscribable: false,
+            type: "string",
+            values: {
+              fixed: ["a", "b", "c"],
+            },
+            widget: "dropdown",
+          },
+        ],
+        name: "Secondary Group",
+      },
+      {
+        fields: [
+          {
+            cardinality: "?",
+            default: {
+              origin: "default",
+              value: "",
+            },
+            label: "tertiary-field-1",
+            name: "tertiary-field-1",
+            type: "string",
+            values: null,
+            widget: "string",
+          },
+          {
+            cardinality: "?",
+            default: {
+              origin: "default",
+              value: "",
+            },
+            label: "tertiary-field-2",
+            name: "tertiary-field-2",
+            type: "string",
+            values: null,
+            widget: "string",
+          },
+        ],
+        name: "Tertiary Group",
+      },
+    ],
+  },
+};
+
+const renderOpts = {
+  messages: {},
+  fallback: "lazy",
+};
+
+describe("TranslationModal", () => {
+  it("renders without crashing", () => {
+    const { getByText } = render(<TranslationModal {...props} />, renderOpts);
+    expect(getByText("Concept translation")).toBeInTheDocument();
+  });
+
+  it("displays the correct default locale name", () => {
+    const { getByText } = render(<TranslationModal {...props} />, renderOpts);
+    expect(getByText("concept-draft")).toBeInTheDocument();
+  });
+
+  it("displays the fields to translate", () => {
+    const { getByText } = render(<TranslationModal {...props} />, renderOpts);
+    expect(getByText("Fields to translate")).toBeInTheDocument();
+    expect(getByText("concept-field-1")).toBeInTheDocument();
+    expect(getByText("concept-field-2")).toBeInTheDocument();
+  });
+
+  it("displays available languages", () => {
+    const { getByText } = render(<TranslationModal {...props} />, renderOpts);
+    expect(getByText("Available languages")).toBeInTheDocument();
+    expect(getByText("es *")).toBeInTheDocument();
+    expect(getByText("de")).toBeInTheDocument();
+    expect(getByText("fr")).toBeInTheDocument();
+  });
+
+  it("requests translation and displays results", async () => {
+    const { getByText, getAllByText, getByRole } = render(
+      <TranslationModal {...props} />,
+      renderOpts
+    );
+
+    await act(async () => {
+      fireEvent.click(getByRole("button", { name: /Request Translation/i }));
+    });
+
+    await waitFor(() => {
+      expect(getByText("Translation preview")).toBeInTheDocument();
+      expect(getByText("Ein Messer in der Dunkelheit")).toBeInTheDocument();
+      expect(
+        getAllByText("Un cuchillo en la oscuridad").length
+      ).toBeGreaterThan(0);
+      expect(getByText("Un couteau dans le noir")).toBeInTheDocument();
+    });
+  });
+
+  it.skip("handles translation error", async () => {
+    jest.resetAllMocks();
+    jest.mock("@truedat/ai/hooks/useTranslations", () => ({
+      useRequestTranslation: jest.fn(() => ({
+        trigger: jest.fn(() => Promise.reject(new Error("Translation error"))),
+      })),
+    }));
+
+    const { getByText, getByRole } = render(
+      <TranslationModal {...props} />,
+      renderOpts
+    );
+
+    await act(async () => {
+      fireEvent.click(getByRole("button", { name: /Request Translation/i }));
+    });
+
+    await waitFor(() => {
+      expect(getByText("Translation Error")).toBeInTheDocument();
+    });
+  });
+
+  it("applies translation and closes modal", async () => {
+    const { getByRole } = render(<TranslationModal {...props} />, renderOpts);
+
+    await act(async () => {
+      fireEvent.click(getByRole("button", { name: /Request Translation/i }));
+    });
+
+    await waitFor(() => {
+      fireEvent.click(getByRole("button", { name: /Apply/i }));
+    });
+
+    expect(props.setTranslations).toHaveBeenCalled();
+    expect(props.onClose).toHaveBeenCalled();
+  });
+
+  it("cancels translation and closes modal", async () => {
+    const { getByRole } = render(<TranslationModal {...props} />, renderOpts);
+
+    await act(async () => {
+      fireEvent.click(getByRole("button", { name: /Cancel/i }));
+    });
+
+    expect(props.onClose).toHaveBeenCalled();
+  });
+});

package/src/components/constants.js

@@ -3,6 +3,8 @@ import { useIntl } from "react-intl";
 
 export const resourceTypes = ["data_structure", "business_concept"];
 
+export const promptResourceTypes = [...resourceTypes, "translation"];
+
 export const providerTypes = [
   "openai",
   "azure_openai",
@@ -12,6 +14,8 @@ export const providerTypes = [
 
 export const useResourceTypeOptions = () =>
   useOptions(resourceTypes, "resourceMappings.resourceType");
+export const usePromptResourceTypeOptions = () =>
+  useOptions(promptResourceTypes, "resourceMappings.resourceType");
 export const useProviderTypeOptions = () =>
   useOptions(providerTypes, "providers.type");
 

package/src/components/index.js

@@ -1,2 +1,3 @@
 import AiRoutes from "./AiRoutes";
-export { AiRoutes };
+import TranslationModal from "./TranslationModal";
+export { AiRoutes, TranslationModal };

package/src/components/prompts/PromptEditor.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { Fragment, useEffect } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import {
@@ -13,7 +13,7 @@ import {
 import { FormProvider, useForm, Controller } from "react-hook-form";
 import { ConfirmModal } from "@truedat/core/components";
 import { useLanguage } from "@truedat/core/i18n";
-import { useResourceTypeOptions } from "../constants";
+import { usePromptResourceTypeOptions } from "../constants";
 
 export default function PromptEditor({
   selectedPrompt,
@@ -26,8 +26,11 @@ export default function PromptEditor({
   providersOptions,
 }) {
   const { formatMessage } = useIntl();
-  const resourceTypeOptions = useResourceTypeOptions();
-  const { enabledLangs } = useLanguage();
+  const resourceTypeOptions = usePromptResourceTypeOptions();
+  const { defaultLang, enabledLangs } = useLanguage();
+  const [isTranslationPrompt, setIsTranslationPrompt] = useState(
+    selectedPrompt?.resource_type === "translation"
+  );
 
   const localeOptions = _.map((key) => ({
     key,
@@ -48,14 +51,21 @@ export default function PromptEditor({
 
   if (!selectedPrompt) return null;
 
+  const handleResourceTypeChange = (value, onChange) => {
+    const isValueTranslation = value === "translation";
+    setIsTranslationPrompt(isValueTranslation);
+    onChange(value);
+    if (isValueTranslation) {
+      form.setValue("language", defaultLang);
+    }
+  };
+
   const name =
     watch("name") ||
     formatMessage({
       id: "prompts.form.name.new",
     });
 
-  const provider = watch("provider");
-
   return (
     <Fragment>
       <FormProvider {...form}>
@@ -122,7 +132,9 @@ export default function PromptEditor({
                   selection
                   onBlur={onBlur}
                   options={resourceTypeOptions}
-                  onChange={(_e, { value }) => onChange(value)}
+                  onChange={(_e, { value }) =>
+                    handleResourceTypeChange(value, onChange)
+                  }
                   value={value}
                 />
               </Form.Field>
@@ -143,13 +155,25 @@ export default function PromptEditor({
               ),
             }}
             render={({ field: { onBlur, onChange, value } }) => (
-              <Form.Field required>
+              <Form.Field
+                required
+                data-tooltip={
+                  isTranslationPrompt
+                    ? formatMessage({
+                        id: "prompts.form.language.tooltip.disabled",
+                        defaultMessage:
+                          "Language is disabled for translations type prompts",
+                      })
+                    : null
+                }
+              >
                 <label>
                   {formatMessage({
                     id: "prompts.form.language",
                   })}
                 </label>
                 <Dropdown
+                  disabled={isTranslationPrompt}
                   selection
                   onBlur={onBlur}
                   options={localeOptions}
@@ -332,6 +356,7 @@ export default function PromptEditor({
 PromptEditor.propTypes = {
   selectedPrompt: PropTypes.object,
   onSubmit: PropTypes.func,
+  onSetActive: PropTypes.func,
   onCancel: PropTypes.func,
   onDelete: PropTypes.func,
   isSubmitting: PropTypes.bool,

package/src/components/prompts/__tests__/PromptEditor.spec.js

@@ -1,3 +1,4 @@
+import _ from "lodash/fp";
 import React from "react";
 import { act } from "react-dom/test-utils";
 import { waitFor } from "@testing-library/react";
@@ -64,6 +65,17 @@ describe("<PromptEditor />", () => {
     expect(container).toMatchSnapshot();
   });
 
+  it("matches snapshot for translation resource type", async () => {
+    const translationProps = _.set(
+      "selectedPrompt.resource_type",
+      "translation"
+    )(props);
+    const { container, queryByText } = renderComponent(translationProps);
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    expect(container).toMatchSnapshot();
+  });
+
   it("matches snapshot without onDelete", async () => {
     const thisProps = {
       ...props,