@truedat/ai 7.3.3 → 7.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/ai",
-  "version": "7.3.3",
+  "version": "7.4.0",
   "description": "Truedat Web Artificial Intelligence package",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -35,7 +35,7 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "7.3.3",
+    "@truedat/test": "7.4.0",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -85,7 +85,7 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "7.3.3",
+    "@truedat/core": "7.4.0",
     "prop-types": "^15.8.1",
     "react-hook-form": "^7.45.4",
     "react-intl": "^5.20.10",
@@ -97,5 +97,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "23b3cc6b8c2749a173f779390866b715d653d377"
+  "gitHead": "65eb6322cc8478fd4c35f2268c8ac1a41e8f129d"
 }

package/src/api.js

@@ -13,6 +13,9 @@ const API_PROVIDER_CHAT = "/api/providers/:id/chat_completion";
 const API_SUGGESTIONS_AVAILABILITY_CHECK =
   "/api/suggestions/availability_check";
 const API_SUGGESTIONS_REQUEST = "/api/suggestions/request";
+const API_TRANSLATIONS_AVAILABILITY_CHECK =
+  "/api/translations/availability_check";
+const API_TRANSLATIONS_REQUEST = "/api/translations/request";
 
 export {
   API_ACTION,
@@ -29,4 +32,6 @@ export {
   API_PROVIDER_CHAT,
   API_SUGGESTIONS_AVAILABILITY_CHECK,
   API_SUGGESTIONS_REQUEST,
+  API_TRANSLATIONS_AVAILABILITY_CHECK,
+  API_TRANSLATIONS_REQUEST,
 };

package/src/components/TranslationModal.js

@@ -0,0 +1,613 @@
+import _ from "lodash/fp";
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import {
+  Button,
+  Checkbox,
+  Divider,
+  Form,
+  Grid,
+  Icon,
+  Modal,
+  Popup,
+  Segment,
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+} from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import FieldViewerValue from "@truedat/df/components/FieldViewerValue";
+import { splitTranslatableFields } from "@truedat/core/services/i18nContent";
+import { useRequestTranslation } from "../hooks/useTranslations";
+
+const TranslationModal = ({
+  open,
+  onClose,
+  i18nContent,
+  template,
+  resourceType,
+  domainId,
+  setTranslations,
+}) => {
+  const { formatMessage } = useIntl();
+  const [translateName, setTranslateName] = useState(true);
+  const [translateTemplate, settranslateTemplate] = useState();
+  const [translateContent, setTranslateContent] = useState();
+  const [translateResult, setTranslateResult] = useState();
+
+  const { trigger, isMutating } = useRequestTranslation();
+
+  const { translatable } = splitTranslatableFields(template);
+  const translatableFields = _.keysIn(translatable);
+
+  const defaultContent = _.find({ is_default: true })(i18nContent);
+
+  const initializeTemplate = () => {
+    const templateContent = _.flow(
+      _.map((group) => {
+        const newFields = _.flow(
+          _.map((field) =>
+            _.includes(field.name)(translatableFields) &&
+            (defaultContent.content[field.name] ||
+              (field.default?.origin === "default" &&
+                !_.isEmpty(field.default?.value)))
+              ? {
+                  ...field,
+                  checked: true,
+                }
+              : null
+          ),
+          _.filter(_.isObject)
+        )(group.fields);
+
+        return {
+          ...group,
+          fields: newFields,
+          checked: true,
+        };
+      }),
+      _.filter((group) => !_.isEmpty(group.fields))
+    )(template?.content);
+    settranslateTemplate(templateContent);
+  };
+
+  const initializeContent = () => {
+    const locales = _.flow(
+      _.map((locale) => ({
+        ...locale,
+        checked: !locale.is_default,
+      })),
+      _.keyBy("lang")
+    )(i18nContent);
+    setTranslateContent(locales);
+  };
+
+  const initializeTranslation = () => {
+    initializeTemplate();
+    initializeContent();
+    setTranslateName(true);
+    setTranslateResult(null);
+  };
+
+  useEffect(() => {
+    if (i18nContent && template?.content) {
+      initializeTemplate();
+      initializeContent();
+      setTranslateName(!_.isEmpty(defaultContent.name));
+    }
+  }, [i18nContent, template]);
+
+  const handleGroupChecked = (groupName) => {
+    const updatedObject = _.map((group) => {
+      if (group.name === groupName) {
+        const groupCheck =
+          group.checked === "indeterminate" ? true : !group.checked;
+        return {
+          ...group,
+          checked: groupCheck,
+          fields: _.map((field) => ({
+            ...field,
+            indeterminate: false,
+            checked: groupCheck,
+          }))(group.fields),
+        };
+      }
+      return group;
+    })(translateTemplate);
+    settranslateTemplate(updatedObject);
+  };
+
+  const handleFieldChecked = (groupName, fieldName) => {
+    const updatedObject = _.map((group) => {
+      if (group.name === groupName) {
+        const updatedFields = _.map((field) => {
+          if (field.name === fieldName) {
+            return {
+              ...field,
+              checked: !field.checked,
+            };
+          }
+          return field;
+        })(group.fields);
+        const groupCheck = _.cond([
+          [_.every(["checked", true]), _.stubTrue],
+          [_.every(["checked", false]), _.stubFalse],
+          [_.stubTrue, () => "indeterminate"],
+        ])(updatedFields);
+        return {
+          ...group,
+          checked: groupCheck,
+          fields: updatedFields,
+        };
+      }
+      return group;
+    })(translateTemplate);
+    settranslateTemplate(updatedObject);
+  };
+
+  const handleLocaleChecked = (lang, checked) => {
+    setTranslateContent({
+      ...translateContent,
+      [lang]: {
+        ...translateContent[lang],
+        checked,
+      },
+    });
+  };
+
+  const requestTranslation = () => {
+    const translation_body = _.flow(
+      _.flatMap(({ fields }) => fields),
+      _.filter("checked"),
+      _.keyBy("name"),
+      _.mapValues(
+        ({ name, default: defaultValue }) =>
+          defaultContent?.content[name]?.value || defaultValue?.value
+      ),
+      (values) =>
+        translateName
+          ? {
+              ...values,
+              name: defaultContent?.name,
+            }
+          : values
+    )(translateTemplate);
+
+    const payload = {
+      resource_type: resourceType,
+      locales: _.flow(_.filter("checked"), _.map("lang"))(translateContent),
+      domain_ids: [domainId],
+      translation_body,
+    };
+    trigger(payload)
+      .then(({ data: { data: data } }) => {
+        const translatedContent = _.flow(
+          _.map(({ lang }) => {
+            if (data[lang]) {
+              const { name, ...content } = data[lang];
+              return {
+                ...translateContent[lang],
+                name: name || "",
+                content: { ...translateContent[lang].content, ...content },
+              };
+            } else {
+              return translateContent[lang];
+            }
+          }),
+          _.keyBy("lang")
+        )(translateContent);
+        setTranslateContent(translatedContent);
+        setTranslateResult("success");
+      })
+      .catch(() => {
+        setTranslateResult("error");
+      });
+  };
+
+  const applyTranslation = () => {
+    const updatedI18nContent = _.mapValues((locale) => {
+      return translateContent[locale.lang].content
+        ? _.flow(
+            _.mapValues((value) =>
+              value.value && value.origin ? value : { value, origin: "ai" }
+            ),
+            (content) => ({
+              ...i18nContent[locale.lang],
+              name:
+                translateContent[locale.lang].name ||
+                i18nContent[locale.lang].name,
+              content: {
+                ...i18nContent[locale.lang].content,
+                ...content,
+              },
+            })
+          )(translateContent[locale.lang].content)
+        : locale;
+    })(i18nContent);
+
+    setTranslations(updatedI18nContent);
+    onClose();
+    initializeTranslation();
+  };
+
+  const renderRequest = () => (
+    <Grid>
+      <Grid.Row>
+        <Grid.Column
+          width={12}
+          style={{ display: "flex", flexDirection: "column" }}
+        >
+          <Segment style={{ flex: 1 }}>
+            <h2>
+              {formatMessage({
+                id: "ai.translation.fields_to_translate",
+                defaultMessage: "Fields to translate",
+              })}
+            </h2>
+            <h3>
+              {formatMessage({
+                id: "ai.translation.concept_name",
+                defaultMessage: "Concept name",
+              })}
+            </h3>
+            {!_.isEmpty(defaultContent.name) ? (
+              <dl>
+                <dt>
+                  <h4>
+                    <Checkbox
+                      label={formatMessage({
+                        id: "ai.translation.name",
+                        defaultMessage: "Name",
+                      })}
+                      checked={translateName}
+                      onChange={() => setTranslateName(!translateName)}
+                    />
+                  </h4>
+                </dt>
+                <dd>{defaultContent?.name}</dd>
+              </dl>
+            ) : null}
+            {_.map(({ name: groupName, fields, checked }) => (
+              <React.Fragment key={groupName}>
+                <Divider />
+                <h3>
+                  <Checkbox
+                    label={groupName}
+                    checked={!!checked}
+                    indeterminate={checked === "indeterminate"}
+                    onChange={() => handleGroupChecked(groupName, null)}
+                  />
+                </h3>
+                <dl>
+                  {_.map(
+                    ({
+                      name: fieldName,
+                      label,
+                      checked,
+                      default: defaultValue,
+                      type,
+                      widget,
+                    }) => (
+                      <React.Fragment key={fieldName}>
+                        <dt>
+                          <h4>
+                            <Checkbox
+                              label={label}
+                              checked={checked}
+                              onChange={() =>
+                                handleFieldChecked(groupName, fieldName)
+                              }
+                            />
+                            {!defaultContent?.content[fieldName] &&
+                            !_.isEmpty(defaultValue?.value) ? (
+                              <Popup
+                                content={formatMessage({
+                                  id: "ai.translation.default_value",
+                                  defaultMessage:
+                                    "This value is set by default",
+                                })}
+                                trigger={
+                                  <Icon
+                                    circular
+                                    inverted
+                                    color="orange"
+                                    name="exclamation"
+                                    size="tiny"
+                                  />
+                                }
+                              />
+                            ) : null}
+                            {defaultContent?.content[fieldName]?.origin ===
+                            "ai" ? (
+                              <Popup
+                                content={formatMessage({
+                                  id: "ai.translation.ai_value",
+                                  defaultMessage: "This value is set by AI",
+                                })}
+                                trigger={
+                                  <Icon
+                                    circular
+                                    inverted
+                                    color="teal"
+                                    name="idea"
+                                    size="tiny"
+                                  />
+                                }
+                              />
+                            ) : null}
+                          </h4>
+                        </dt>
+                        <dd>
+                          <FieldViewerValue
+                            type={type}
+                            value={
+                              defaultContent?.content[fieldName]?.value ||
+                              defaultValue.value
+                            }
+                            widget={widget}
+                          />
+                        </dd>
+                      </React.Fragment>
+                    )
+                  )(fields)}
+                </dl>
+              </React.Fragment>
+            ))(translateTemplate)}
+          </Segment>
+        </Grid.Column>
+        <Grid.Column
+          width={4}
+          style={{ display: "flex", flexDirection: "column" }}
+        >
+          <Segment style={{ flex: 1 }}>
+            <h2>
+              {formatMessage({
+                id: "ai.translation.available_languages",
+                defaultMessage: "Available languages",
+              })}
+            </h2>
+            <Form>
+              {_.map(({ lang, is_required, checked }) => (
+                <Form.Field key={lang}>
+                  <Checkbox
+                    key={lang}
+                    value={lang}
+                    label={`${formatMessage({
+                      id: `i18n.messages.locale.${lang}`,
+                      defaultMessage: lang,
+                    })} ${is_required ? "*" : ""}`}
+                    checked={checked}
+                    onChange={(_e, { checked }) =>
+                      handleLocaleChecked(lang, checked)
+                    }
+                  />
+                </Form.Field>
+              ))(_.omitBy("is_default")(translateContent))}
+            </Form>
+          </Segment>
+        </Grid.Column>
+      </Grid.Row>
+      <Grid.Row textAlign="right">
+        <Grid.Column>
+          <Button
+            disabled={isMutating}
+            secondary
+            onClick={() => {
+              initializeTranslation(), onClose();
+            }}
+          >
+            {formatMessage({ id: "actions.cancel", defaultMessage: "Cancel" })}
+          </Button>
+          <Button
+            disabled={
+              isMutating ||
+              (!_.some("checked")(translateTemplate) && !translateName) ||
+              !_.some("checked")(translateContent)
+            }
+            primary
+            onClick={() => requestTranslation()}
+          >
+            {formatMessage({
+              id: "actions.request_translation",
+              defaultMessage: "Request translation",
+            })}
+          </Button>
+        </Grid.Column>
+      </Grid.Row>
+    </Grid>
+  );
+
+  const renderResult = () => (
+    <Grid>
+      <Grid.Row>
+        <Grid.Column width={16}>
+          <h2>
+            {formatMessage({
+              id: "ai.translation.preview",
+              defaultMessage: "Translation preview",
+            })}
+          </h2>
+          <Table definition>
+            <TableHeader>
+              <TableRow>
+                <TableHeaderCell />
+                {_.map(({ lang, is_default, is_required, checked }) =>
+                  checked || is_default ? (
+                    <TableHeaderCell key={lang}>
+                      {`${formatMessage({
+                        id: `i18n.messages.locale.${lang}`,
+                        defaultMessage: lang,
+                      })} `}
+                      {is_default ? (
+                        <Icon name="star" color="yellow" />
+                      ) : is_required ? (
+                        "*"
+                      ) : null}
+                    </TableHeaderCell>
+                  ) : null
+                )(translateContent)}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {translateName ? (
+                <TableRow>
+                  <TableCell key={0}>
+                    {formatMessage({
+                      id: "ai.translation.concept_term_name",
+                      defaultMessage: "Concept term name",
+                    })}
+                  </TableCell>
+                  {_.map(({ lang, name, is_default, checked }) =>
+                    is_default || checked ? (
+                      <TableCell key={lang}>{name}</TableCell>
+                    ) : null
+                  )(translateContent)}
+                </TableRow>
+              ) : null}
+
+              {_.map(({ fields }) =>
+                _.map(
+                  ({
+                    name: fieldName,
+                    label,
+                    checked,
+                    default: defaultValue,
+                    type,
+                    widget,
+                  }) =>
+                    checked ? (
+                      <TableRow key={fieldName}>
+                        <TableCell>{label}</TableCell>
+                        {_.map(({ lang, content, is_default, checked }) =>
+                          is_default || checked ? (
+                            <TableCell key={lang}>
+                              <FieldViewerValue
+                                type={type}
+                                value={
+                                  content[fieldName]?.value ||
+                                  content[fieldName] ||
+                                  defaultValue?.value
+                                }
+                                widget={widget}
+                              />
+                            </TableCell>
+                          ) : null
+                        )(translateContent)}
+                      </TableRow>
+                    ) : null
+                )(fields)
+              )(translateTemplate)}
+            </TableBody>
+          </Table>
+        </Grid.Column>
+      </Grid.Row>
+      <Grid.Row>
+        <Grid.Column textAlign="left" width={8}>
+          <Button
+            secondary
+            onClick={() => {
+              setTranslateResult(null);
+            }}
+          >
+            {formatMessage({
+              id: "actions.go_back",
+              defaultMessage: "Go back",
+            })}
+          </Button>
+        </Grid.Column>
+        <Grid.Column textAlign="right" width={8}>
+          <Button
+            secondary
+            onClick={() => {
+              initializeTranslation();
+              onClose();
+            }}
+          >
+            {formatMessage({ id: "actions.cancel", defaultMessage: "Cancel" })}
+          </Button>
+          <Button primary onClick={applyTranslation}>
+            {formatMessage({ id: "actions.apply", defaultMessage: "Apply" })}
+          </Button>
+        </Grid.Column>
+      </Grid.Row>
+    </Grid>
+  );
+
+  const renderError = () => (
+    <Grid>
+      <Grid.Row>
+        <Grid.Column width={16}>
+          <h2>
+            {formatMessage({
+              id: "ai.translation.error",
+              defaultMessage: "Translation error",
+            })}
+          </h2>
+          <p>
+            {formatMessage({
+              id: "ai.translation.error_message",
+              defaultMessage:
+                "There was an error while translating the content",
+            })}
+          </p>
+        </Grid.Column>
+      </Grid.Row>
+      <Grid.Row>
+        <Grid.Column width={16} textAlign="right">
+          <Button
+            secondary
+            onClick={() => {
+              initializeTranslation();
+              onClose();
+            }}
+          >
+            {formatMessage({ id: "actions.cancel", defaultMessage: "Cancel" })}
+          </Button>
+        </Grid.Column>
+      </Grid.Row>
+    </Grid>
+  );
+
+  return (
+    <Modal
+      size="fullscreen"
+      open={open}
+      onClose={onClose}
+      closeIcon
+      className="translation-modal"
+    >
+      <Modal.Header>
+        <h1>
+          {formatMessage({
+            id: "ai.translation.header",
+            defaultMessage: "Concept translation",
+          })}
+        </h1>
+      </Modal.Header>
+      <Modal.Content>
+        <Modal.Description>
+          {translateResult === "success"
+            ? renderResult()
+            : translateResult === "error"
+            ? renderError()
+            : renderRequest()}
+        </Modal.Description>
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+TranslationModal.propTypes = {
+  open: PropTypes.bool,
+  onClose: PropTypes.func,
+  i18nContent: PropTypes.object,
+  template: PropTypes.object,
+  resourceType: PropTypes.string,
+  domainId: PropTypes.number,
+  setTranslations: PropTypes.func,
+};
+
+export default TranslationModal;