@truedat/ai 6.0.1

package/README.md

@@ -0,0 +1,13 @@
+# Truedat Web Artificial Intelligence
+
+Artificial Intelligence for Truedat Web.
+
+## How To...
+
+### Install depencencies
+
+`yarn`
+
+### Run the tests
+
+`yarn test`

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "@truedat/ai",
+  "version": "6.0.1",
+  "description": "Truedat Web Artificial Intelligence package",
+  "sideEffects": false,
+  "jsnext:main": "src/index.js",
+  "module": "src/index.js",
+  "files": [
+    "src"
+  ],
+  "author": "Bluetab Solutions",
+  "license": "GPL-3.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rimraf yarn-error.log",
+    "debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
+    "test": "TZ=UTC jest --coverage",
+    "test:watch": "TZ=UTC jest --watch",
+    "eslint": "eslint src/**",
+    "eslint:fix": "eslint --fix src/**"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.20.5",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.2",
+    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-modules-commonjs": "^7.19.6",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^13.2.1",
+    "@truedat/test": "5.12.2",
+    "babel-jest": "^28.1.0",
+    "babel-plugin-dynamic-import-node": "^2.3.3",
+    "babel-plugin-lodash": "^3.3.4",
+    "babel-plugin-react-intl": "^5.1.18",
+    "babel-plugin-transform-semantic-ui-react-imports": "^1.4.1",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.0.0",
+    "jest-environment-jsdom": "^29.0.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "rimraf": "^3.0.2",
+    "semantic-ui-react": "^2.1.4"
+  },
+  "jest": {
+    "maxWorkers": "50%",
+    "testTimeout": 10000,
+    "moduleDirectories": [
+      "<rootDir>/src",
+      "../../node_modules"
+    ],
+    "setupFilesAfterEnv": [
+      "@truedat/test/setup"
+    ],
+    "moduleNameMapper": {
+      "\\.(css|less)$": "identity-obj-proxy",
+      "^@truedat/([^/]+)$": "<rootDir>/../$1/src/index",
+      "^@truedat/([^/]+)/(.*)$": "<rootDir>/../$1/src/$2"
+    },
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ],
+    "testEnvironment": "jsdom",
+    "testPathIgnorePatterns": [
+      "<rootDir>/node_modules/"
+    ],
+    "transform": {
+      "\\.js$": [
+        "babel-jest",
+        {
+          "rootMode": "upward"
+        }
+      ]
+    },
+    "transformIgnorePatterns": [
+      "/node_modules/(?!@truedat).*"
+    ]
+  },
+  "dependencies": {
+    "@truedat/core": "6.0.1",
+    "prop-types": "^15.8.1",
+    "react-hook-form": "^7.45.4",
+    "react-intl": "^5.20.10",
+    "react-router-dom": "^5.2.0",
+    "semantic-ui-react": "^2.1.4",
+    "swr": "^2.0.0"
+  },
+  "peerDependencies": {
+    "react": ">= 16.8.6 < 17",
+    "react-dom": ">= 16.8.6 < 17",
+    "semantic-ui-react": ">= 2.0.3 < 2.2"
+  },
+  "gitHead": "2ce73d263401e0a7959f9111ba3370b6810b5420"
+}

package/src/api.js

@@ -0,0 +1,6 @@
+const API_RESOURCE_MAPPINGS = "/api/resource_mappings";
+const API_RESOURCE_MAPPING = "/api/resource_mappings/:id";
+const API_PROMPTS = "/api/prompts";
+const API_PROMPT = "/api/prompts/:id";
+
+export { API_RESOURCE_MAPPINGS, API_RESOURCE_MAPPING, API_PROMPTS, API_PROMPT };

package/src/components/AiRoutes.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { Route, Switch } from "react-router-dom";
+import { Unauthorized } from "@truedat/core/components";
+import { useAuthorized } from "@truedat/core/hooks";
+import { RESOURCE_MAPPINGS, PROMPTS } from "@truedat/core/routes";
+import ResourceMappings from "./resourceMappings/ResourceMappings";
+import Prompts from "./prompts/Prompts";
+
+export default function AiRoutes() {
+  const authorized = useAuthorized("manage_ai");
+
+  return (
+    <Switch>
+      <Route
+        path={RESOURCE_MAPPINGS}
+        render={() => (authorized ? <ResourceMappings /> : <Unauthorized />)}
+      />
+      <Route
+        path={PROMPTS}
+        render={() => (authorized ? <Prompts /> : <Unauthorized />)}
+      />
+    </Switch>
+  );
+}

package/src/components/constants.js

@@ -0,0 +1,20 @@
+import _ from "lodash/fp";
+import { useIntl } from "react-intl";
+
+export const resourceTypes = ["data_structure"];
+
+export const providers = ["openai"];
+
+export const useResourceTypeOptions = () =>
+  useOptions(resourceTypes, "resourceMappings.resourceType");
+export const useProvidersOptions = () =>
+  useOptions(providers, "prompts.provider");
+
+const useOptions = (list, formatPrefix) => {
+  const { formatMessage } = useIntl();
+  return _.map((value) => ({
+    key: value,
+    text: formatMessage({ id: `${formatPrefix}.${value}` }),
+    value,
+  }))(list);
+};

package/src/components/index.js

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

package/src/components/prompts/PromptEditor.js

@@ -0,0 +1,365 @@
+import _ from "lodash/fp";
+import React, { Fragment, useEffect } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import {
+  Button,
+  Container,
+  Divider,
+  Header,
+  Form,
+  Dropdown,
+} from "semantic-ui-react";
+import { FormProvider, useForm, Controller } from "react-hook-form";
+import { ConfirmModal } from "@truedat/core/components";
+import { useLocales } from "@truedat/core/hooks";
+import { useResourceTypeOptions, useProvidersOptions } from "../constants";
+
+export default function PromptEditor({
+  selectedPrompt,
+  onSubmit,
+  onCancel,
+  onDelete,
+  isSubmitting,
+  setDirty,
+}) {
+  const { formatMessage } = useIntl();
+  const resourceTypeOptions = useResourceTypeOptions();
+  const providersOptions = useProvidersOptions();
+  const locales = useLocales();
+
+  const localeOptions = _.flow(
+    _.prop("locales"),
+    _.map("lang"),
+    _.map((key) => ({
+      key,
+      text: key,
+      value: key,
+    }))
+  )(locales);
+
+  const form = useForm({
+    mode: "onTouched",
+    defaultValues: selectedPrompt,
+  });
+  const { control, handleSubmit, watch, formState } = form;
+  const { isDirty, isValid } = formState;
+
+  useEffect(() => {
+    setDirty(isDirty);
+  }, [setDirty, isDirty]);
+
+  if (!selectedPrompt) return null;
+
+  const name =
+    watch("name") ||
+    formatMessage({
+      id: "prompts.form.name.new",
+    });
+
+  return (
+    <Fragment>
+      <FormProvider {...form}>
+        <Form>
+          <Header as="h3" dividing>
+            {name}
+          </Header>
+
+          <Controller
+            control={control}
+            name="name"
+            rules={{
+              required: formatMessage(
+                { id: "form.validation.required" },
+                {
+                  prop: formatMessage({
+                    id: "prompts.form.name",
+                  }),
+                }
+              ),
+            }}
+            render={({
+              field: { onBlur, onChange, value },
+              fieldState: { error },
+            }) => (
+              <Form.Input
+                autoComplete="off"
+                placeholder={formatMessage({
+                  id: "prompts.form.name",
+                })}
+                error={error?.message}
+                label={formatMessage({
+                  id: "prompts.form.name",
+                })}
+                onBlur={onBlur}
+                onChange={(_e, { value }) => onChange(value)}
+                value={value}
+                required
+              />
+            )}
+          />
+
+          <Controller
+            control={control}
+            name="resource_type"
+            rules={{
+              required: formatMessage(
+                { id: "form.validation.required" },
+                {
+                  prop: formatMessage({
+                    id: "prompts.form.resource_type",
+                  }),
+                }
+              ),
+            }}
+            render={({ field: { onBlur, onChange, value } }) => (
+              <Form.Field required>
+                <label>
+                  {formatMessage({
+                    id: "prompts.form.resource_type",
+                  })}
+                </label>
+                <Dropdown
+                  selection
+                  onBlur={onBlur}
+                  options={resourceTypeOptions}
+                  onChange={(_e, { value }) => onChange(value)}
+                  value={value}
+                />
+              </Form.Field>
+            )}
+          />
+
+          <Controller
+            control={control}
+            name="language"
+            rules={{
+              required: formatMessage(
+                { id: "form.validation.required" },
+                {
+                  prop: formatMessage({
+                    id: "prompts.form.language",
+                  }),
+                }
+              ),
+            }}
+            render={({ field: { onBlur, onChange, value } }) => (
+              <Form.Field required>
+                <label>
+                  {formatMessage({
+                    id: "prompts.form.language",
+                  })}
+                </label>
+                <Dropdown
+                  selection
+                  onBlur={onBlur}
+                  options={localeOptions}
+                  onChange={(_e, { value }) => onChange(value)}
+                  value={value}
+                />
+              </Form.Field>
+            )}
+          />
+
+          <Controller
+            control={control}
+            name="system_prompt"
+            rules={{
+              required: formatMessage(
+                { id: "form.validation.required" },
+                {
+                  prop: formatMessage({
+                    id: "prompts.form.system_prompt",
+                  }),
+                }
+              ),
+            }}
+            render={({
+              field: { onBlur, onChange, value },
+              fieldState: { error },
+            }) => (
+              <Form.TextArea
+                autoComplete="off"
+                placeholder={formatMessage({
+                  id: "prompts.form.system_prompt",
+                })}
+                error={error?.message}
+                label={formatMessage({
+                  id: "prompts.form.system_prompt",
+                })}
+                onBlur={onBlur}
+                onChange={(_e, { value }) => onChange(value)}
+                value={value}
+                required
+              />
+            )}
+          />
+
+          <Controller
+            control={control}
+            name="user_prompt_template"
+            rules={{
+              required: formatMessage(
+                { id: "form.validation.required" },
+                {
+                  prop: formatMessage({
+                    id: "prompts.form.user_prompt_template",
+                  }),
+                }
+              ),
+            }}
+            render={({
+              field: { onBlur, onChange, value },
+              fieldState: { error },
+            }) => (
+              <Form.TextArea
+                autoComplete="off"
+                placeholder={formatMessage({
+                  id: "prompts.form.user_prompt_template",
+                })}
+                error={error?.message}
+                label={formatMessage({
+                  id: "prompts.form.user_prompt_template",
+                })}
+                onBlur={onBlur}
+                onChange={(_e, { value }) => onChange(value)}
+                value={value}
+                required
+              />
+            )}
+          />
+
+          <Controller
+            control={control}
+            name="provider"
+            rules={{
+              required: formatMessage(
+                { id: "form.validation.required" },
+                {
+                  prop: formatMessage({
+                    id: "prompts.form.provider",
+                  }),
+                }
+              ),
+            }}
+            render={({ field: { onBlur, onChange, value } }) => (
+              <Form.Field required>
+                <label>
+                  {formatMessage({
+                    id: "prompts.form.provider",
+                  })}
+                </label>
+                <Dropdown
+                  selection
+                  onBlur={onBlur}
+                  options={providersOptions}
+                  onChange={(_e, { value }) => onChange(value)}
+                  value={value}
+                />
+              </Form.Field>
+            )}
+          />
+
+          <Controller
+            control={control}
+            name="model"
+            rules={{
+              required: formatMessage(
+                { id: "form.validation.required" },
+                {
+                  prop: formatMessage({
+                    id: "prompts.form.model",
+                  }),
+                }
+              ),
+            }}
+            render={({
+              field: { onBlur, onChange, value },
+              fieldState: { error },
+            }) => (
+              <Form.Input
+                autoComplete="off"
+                placeholder={formatMessage({
+                  id: "prompts.form.model",
+                })}
+                error={error?.message}
+                label={formatMessage({
+                  id: "prompts.form.model",
+                })}
+                onBlur={onBlur}
+                onChange={(_e, { value }) => onChange(value)}
+                value={value}
+                required
+              />
+            )}
+          />
+
+          <Divider hidden />
+          <Container textAlign="right">
+            <Button
+              onClick={handleSubmit(onSubmit)}
+              primary
+              loading={isSubmitting}
+              disabled={!isValid || !isDirty}
+              content={formatMessage({ id: "actions.save" })}
+            />
+            {isDirty ? (
+              <ConfirmModal
+                trigger={
+                  <Button
+                    content={formatMessage({ id: "actions.cancel" })}
+                    disabled={isSubmitting}
+                  />
+                }
+                header={formatMessage({
+                  id: "actions.discard.confirmation.header",
+                })}
+                content={formatMessage({
+                  id: "actions.discard.confirmation.content",
+                })}
+                onConfirm={onCancel}
+                onOpen={(e) => e.stopPropagation()}
+                onClose={(e) => e.stopPropagation()}
+              />
+            ) : (
+              <Button
+                content={formatMessage({ id: "actions.cancel" })}
+                disabled={isSubmitting}
+                onClick={onCancel}
+              />
+            )}
+            {onDelete ? (
+              <ConfirmModal
+                trigger={
+                  <Button
+                    color="red"
+                    content={formatMessage({ id: "actions.delete" })}
+                    disabled={isSubmitting}
+                  />
+                }
+                header={formatMessage({
+                  id: "functions.action.delete.header",
+                })}
+                content={formatMessage({
+                  id: "functions.action.delete.content",
+                })}
+                onConfirm={onDelete}
+                onOpen={(e) => e.stopPropagation()}
+                onClose={(e) => e.stopPropagation()}
+              />
+            ) : null}
+          </Container>
+        </Form>
+      </FormProvider>
+    </Fragment>
+  );
+}
+
+PromptEditor.propTypes = {
+  selectedPrompt: PropTypes.object,
+  onSubmit: PropTypes.func,
+  onCancel: PropTypes.func,
+  onDelete: PropTypes.func,
+  isSubmitting: PropTypes.bool,
+  setDirty: PropTypes.func,
+};

package/src/components/prompts/Prompts.js

@@ -0,0 +1,136 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import { useIntl, FormattedMessage } from "react-intl";
+import {
+  Button,
+  Grid,
+  GridColumn,
+  Header,
+  Icon,
+  List,
+  Segment,
+} from "semantic-ui-react";
+
+import {
+  usePrompts,
+  usePromptCreate,
+  usePromptDelete,
+  usePromptUpdate,
+} from "@truedat/ai/hooks/usePrompts";
+import PromptEditor from "./PromptEditor";
+
+const NEW_PROMPT = {
+  name: "",
+  resource_type: "data_structure",
+  language: "en",
+  system_prompt: "",
+  user_prompt_template: "",
+  provider: "openai",
+  model: "",
+};
+
+export default function Prompts() {
+  const { formatMessage } = useIntl();
+  const { data, loading, mutate } = usePrompts();
+  const [selectedPrompt, setSelectedPrompt] = useState();
+  const [isDirty, setDirty] = useState(false);
+
+  const prompts = data?.data;
+
+  const setStateNewPrompt = () => setSelectedPrompt(NEW_PROMPT);
+  const clearForm = () => {
+    setSelectedPrompt(null);
+    setDirty(false);
+  };
+
+  const { trigger: createPrompt, isMutating: isCreating } = usePromptCreate();
+
+  const { trigger: updatePrompt, isMutating: isUpdating } =
+    usePromptUpdate(selectedPrompt);
+
+  const { trigger: deletePrompt, isMutating: isDeleting } =
+    usePromptDelete(selectedPrompt);
+
+  const isSubmitting = isCreating || isUpdating || isDeleting;
+  const onPromptCreate = async (prompt) => {
+    const mutatePrompt = selectedPrompt?.id ? updatePrompt : createPrompt;
+    await mutatePrompt({ prompt });
+    clearForm();
+    mutate();
+  };
+  const onPromptDelete = async (prompt) => {
+    await deletePrompt({ prompt });
+    clearForm();
+    mutate();
+  };
+
+  return (
+    <Segment loading={loading}>
+      <Header as="h2">
+        <Icon circular name="map signs" />
+        <Header.Content>
+          <FormattedMessage id="prompts.header" />
+          <Header.Subheader>
+            <FormattedMessage id="prompts.subheader" />
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
+
+      <Grid>
+        <GridColumn width={4}>
+          <Button fluid onClick={setStateNewPrompt} disabled={isDirty}>
+            {formatMessage({ id: "prompts.action.new" })}
+          </Button>
+          <List divided selection={!isDirty}>
+            {!_.isEmpty(prompts) ? (
+              prompts.map((prompt, key) => (
+                <List.Item
+                  key={key}
+                  onClick={() => !isDirty && setSelectedPrompt(prompt)}
+                >
+                  <List.Content>
+                    <List.Header>
+                      {prompt.name ||
+                        formatMessage({
+                          id: "prompts.form.name.new",
+                        })}
+                    </List.Header>
+                  </List.Content>
+                </List.Item>
+              ))
+            ) : (
+              <List.Item>
+                <List.Content>
+                  <List.Header>
+                    {formatMessage({ id: "prompts.empty_list" })}
+                  </List.Header>
+                </List.Content>
+              </List.Item>
+            )}
+          </List>
+        </GridColumn>
+        <GridColumn width={11}>
+          {selectedPrompt ? (
+            <PromptEditor
+              key={selectedPrompt?.id || "new"}
+              selectedPrompt={selectedPrompt}
+              prompts={prompts}
+              onCancel={clearForm}
+              onSubmit={onPromptCreate}
+              onDelete={selectedPrompt?.id ? onPromptDelete : null}
+              isSubmitting={isSubmitting}
+              setDirty={setDirty}
+            />
+          ) : (
+            <Header as="h2" icon textAlign="center">
+              <Icon name="hand pointer outline" />
+              <Header.Subheader>
+                {formatMessage({ id: "prompts.no_selection" })}
+              </Header.Subheader>
+            </Header>
+          )}
+        </GridColumn>
+      </Grid>
+    </Segment>
+  );
+}