@truedat/ai 6.11.1 → 6.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/ai",
-  "version": "6.11.1",
+  "version": "6.12.0",
   "description": "Truedat Web Artificial Intelligence package",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -84,7 +84,7 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "6.11.1",
+    "@truedat/core": "6.12.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": "a684646f8503335b666ea82b85a6c0aa8fbd2336"
+  "gitHead": "a182d4660919ab242d3150ef4a51641815913a39"
 }

package/src/api.js

@@ -1,3 +1,7 @@
+const API_ACTION = "/api/actions/:id";
+const API_ACTIONS = "/api/actions";
+const API_ACTIONS_SEARCH = "/api/actions/search";
+const API_ACTION_SET_ACTIVE = "/api/actions/:id/set_active";
 const API_RESOURCE_MAPPINGS = "/api/resource_mappings";
 const API_RESOURCE_MAPPING = "/api/resource_mappings/:id";
 const API_PROMPTS = "/api/prompts";
@@ -11,6 +15,10 @@ const API_SUGGESTIONS_AVAILABILITY_CHECK =
 const API_SUGGESTIONS_REQUEST = "/api/suggestions/request";
 
 export {
+  API_ACTION,
+  API_ACTIONS,
+  API_ACTIONS_SEARCH,
+  API_ACTION_SET_ACTIVE,
   API_RESOURCE_MAPPINGS,
   API_RESOURCE_MAPPING,
   API_PROMPTS,

package/src/components/AiRoutes.js

@@ -4,6 +4,10 @@ import { Unauthorized } from "@truedat/core/components";
 import { useAuthorized } from "@truedat/core/hooks";
 import {
   AI_SANDBOX,
+  ACTIONS,
+  ACTION,
+  ACTION_EDIT,
+  ACTION_NEW,
   RESOURCE_MAPPINGS,
   PROMPTS,
   PROVIDERS,
@@ -12,6 +16,10 @@ import ResourceMappings from "./resourceMappings/ResourceMappings";
 import Prompts from "./prompts/Prompts";
 import Providers from "./providers/Providers";
 import AiSandbox from "./aiSandbox/AiSandbox";
+import Actions from "./actions/Actions";
+import Action from "./actions/Action";
+import ActionEdit from "./actions/ActionEdit";
+import ActionNew from "./actions/ActionNew";
 
 export default function AiRoutes() {
   const authorized = useAuthorized("manage_ai");
@@ -34,6 +42,24 @@ export default function AiRoutes() {
         path={AI_SANDBOX}
         render={() => (authorized ? <AiSandbox /> : <Unauthorized />)}
       />
+      <Route
+        path={ACTIONS}
+        exact
+        render={() => (authorized ? <Actions /> : <Unauthorized />)}
+      />
+      <Route
+        path={ACTION_NEW}
+        exact
+        render={() => (authorized ? <ActionNew /> : <Unauthorized />)}
+      />
+      <Route
+        path={ACTION_EDIT}
+        render={() => (authorized ? <ActionEdit /> : <Unauthorized />)}
+      />
+      <Route
+        path={ACTION}
+        render={() => (authorized ? <Action /> : <Unauthorized />)}
+      />
     </Switch>
   );
 }

package/src/components/actions/Action.js

@@ -0,0 +1,90 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { useParams } from "react-router-dom";
+import { Loading } from "@truedat/core/components";
+import { Header, Icon, Grid, Segment } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { useAction } from "../../hooks/useActions";
+import ActionBreadcrumbs from "./ActionBreadcrumbs";
+import ActionActions from "./ActionActions";
+import ActionDetail from "./ActionDetail";
+
+export const ActionHeader = ({ action, actionMutate }) => {
+  const { formatMessage } = useIntl();
+  const buildStatusMessage = (status, icon, color) => (
+    <p>
+      <Icon name={icon} color={color} fitted />{" "}
+      {formatMessage({ id: `ai.actions.is_enabled.${status}` })}
+    </p>
+  );
+
+  const statusMessage = _.cond([
+    [
+      ({ _is_enabled, is_deleted }) => is_deleted,
+      () => buildStatusMessage("deleted", "trash", "grey"),
+    ],
+    [
+      ({ is_enabled, _is_deleted }) => is_enabled,
+      () => buildStatusMessage("true", "play", "green"),
+    ],
+    [
+      ({ is_enabled, _is_deleted }) => !is_enabled,
+      () => buildStatusMessage("false", "pause", "orange"),
+    ],
+  ])({
+    is_enabled: action?.is_enabled,
+    is_deleted: action?.deleted_at,
+  });
+
+  return _.isEmpty(action) ? null : (
+    <Grid>
+      <Grid.Column width={8}>
+        <Header as="h2">
+          <Icon name="caret square right" circular />
+          <Header.Content>
+            {action.name}
+            <Header.Subheader>{statusMessage}</Header.Subheader>
+          </Header.Content>
+        </Header>
+      </Grid.Column>
+      <Grid.Column width={8} textAlign="right">
+        {!action?.deleted_at ? (
+          <ActionActions action={action} actionMutate={actionMutate} />
+        ) : null}
+      </Grid.Column>
+    </Grid>
+  );
+};
+
+ActionHeader.propTypes = {
+  action: PropTypes.object.isRequired,
+};
+
+export const ActionView = ({ action, actionMutate }) => {
+  return action ? (
+    <>
+      <ActionBreadcrumbs text={action.name} />
+      <Segment>
+        <ActionHeader action={action} actionMutate={actionMutate} />
+        <ActionDetail action={action} />
+      </Segment>
+    </>
+  ) : null;
+};
+
+ActionView.propTypes = {
+  action: PropTypes.object.isRequired,
+  loading: PropTypes.bool,
+};
+
+const Action = () => {
+  const { id } = useParams();
+  const { action, loading, mutate } = useAction(id);
+  if (loading) return <Loading />;
+  return _.isEmpty(action) ? null : (
+    <ActionView action={action} actionMutate={mutate} />
+  );
+};
+
+export default Action;

package/src/components/actions/ActionActions.js

@@ -0,0 +1,134 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { Link } from "react-router-dom";
+import { linkTo, ACTIONS } from "@truedat/core/routes";
+import { useHistory } from "react-router-dom";
+import { Button } from "semantic-ui-react";
+import { ConfirmModal, GroupActions } from "@truedat/core/components";
+import { useActionDelete, useActionSetActive } from "../../hooks/useActions";
+
+export const ConfirmToggleModal = ({ onConfirm, action: actionData }) => {
+  const { formatMessage } = useIntl();
+  const { is_enabled: active, name } = actionData || {};
+  const action = active ? "disable" : "enable";
+  const icon = active ? "pause" : "play";
+  return (
+    <ConfirmModal
+      icon={icon}
+      trigger={
+        <Button
+          icon={icon}
+          content={formatMessage({ id: `ai.actions.actions.${action}` })}
+        />
+      }
+      header={formatMessage({
+        id: `ai.actions.actions.${action}.confirmation.header`,
+      })}
+      size="small"
+      content={formatMessage(
+        { id: `ai.actions.actions.${action}.confirmation.content` },
+        { name: <i>{name}</i> }
+      )}
+      onConfirm={() => onConfirm()}
+    />
+  );
+};
+
+ConfirmToggleModal.propTypes = {
+  action: PropTypes.object,
+  onConfirm: PropTypes.func,
+};
+
+export const ConfirmDeleteModal = ({ handleDelete, name, id }) => {
+  const { formatMessage } = useIntl();
+  return (
+    <ConfirmModal
+      icon="trash"
+      trigger={
+        <Button
+          icon="trash"
+          content={formatMessage({ id: "ai.actions.actions.delete" })}
+        />
+      }
+      header={formatMessage({
+        id: "ai.actions.actions.delete.confirmation.header",
+      })}
+      size="small"
+      content={formatMessage(
+        { id: "ai.actions.actions.delete.confirmation.content" },
+        { name: <i>{name}</i> }
+      )}
+      onConfirm={() => handleDelete({ id })}
+    />
+  );
+};
+
+ConfirmDeleteModal.propTypes = {
+  handleDelete: PropTypes.func,
+  name: PropTypes.string,
+  id: PropTypes.number,
+};
+
+export const ActionActions = ({ action, actionMutate }) => {
+  const { formatMessage } = useIntl();
+  const history = useHistory();
+  const { is_enabled: active, id, name } = action || {};
+
+  const { trigger: handleDelete } = useActionDelete({ id: id });
+  const { trigger: enableAction } = useActionSetActive({
+    id: id,
+    active: true,
+  });
+  const { trigger: disableAction } = useActionSetActive({
+    id: id,
+    active: false,
+  });
+
+  const handleSetActive = active ? disableAction : enableAction;
+
+  const onConfirmDelete = async () => {
+    await handleDelete();
+    history.push(ACTIONS);
+  };
+
+  const onConfirmToggle = async () => {
+    await handleSetActive();
+    actionMutate();
+  };
+
+  const edit = {
+    key: "edit",
+    icon: "edit",
+    text: formatMessage({ id: "ai.actions.actions.edit" }),
+    value: "edit",
+    as: Link,
+    to: linkTo.ACTION_EDIT({ id }),
+  };
+  const toggle = {
+    key: "toggle",
+    value: "toggle",
+    as: ConfirmToggleModal,
+    onConfirm: onConfirmToggle,
+    action,
+  };
+  const remove = {
+    key: "delete",
+    icon: "trash",
+    value: "delete",
+    as: ConfirmDeleteModal,
+    handleDelete: onConfirmDelete,
+    name,
+    id,
+  };
+
+  const actions = [edit, toggle, remove];
+  return <GroupActions key={action?.is_enabled} availableActions={actions} />;
+};
+
+ActionActions.propTypes = {
+  action: PropTypes.object.isRequired,
+  mutate: PropTypes.func,
+};
+
+export default ActionActions;

package/src/components/actions/ActionBreadcrumbs.js

@@ -0,0 +1,22 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Breadcrumb } from "semantic-ui-react";
+import { Link } from "react-router-dom";
+import { FormattedMessage } from "react-intl";
+import { ACTIONS } from "@truedat/core/routes";
+
+export const ActionBreadcrumbs = ({ text }) => (
+  <Breadcrumb>
+    <Breadcrumb.Section as={Link} to={ACTIONS} active={false}>
+      <FormattedMessage id="navigation.admin.actions" />
+    </Breadcrumb.Section>
+    <Breadcrumb.Divider icon="right angle" />
+    <Breadcrumb.Section active>{text}</Breadcrumb.Section>
+  </Breadcrumb>
+);
+
+ActionBreadcrumbs.propTypes = {
+  text: PropTypes.string,
+};
+
+export default ActionBreadcrumbs;

package/src/components/actions/ActionDetail.js

@@ -0,0 +1,41 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import { Segment, List, Divider } from "semantic-ui-react";
+
+const DynamicFormViewer = React.lazy(() =>
+  import("@truedat/df/components/DynamicFormViewer")
+);
+
+export const ActionDetail = ({ action }) => {
+  const user = _.path("user.full_name")(action);
+  return (
+    <Segment attached="bottom">
+      <List size="big" relaxed>
+        <List.Item>
+          <List.Header className="dynamic-field-header">
+            <FormattedMessage id="ai.actions.actions.form.user" />
+          </List.Header>
+          <List.Content>{user}</List.Content>
+        </List.Item>
+        <List.Item>
+          <List.Header className="dynamic-field-header">
+            <FormattedMessage id="ai.actions.form.type" />
+          </List.Header>
+          <List.Content>{action.type}</List.Content>
+        </List.Item>
+      </List>
+      <DynamicFormViewer
+        template={action.type}
+        content={action.dynamic_content}
+      />
+    </Segment>
+  );
+};
+
+ActionDetail.propTypes = {
+  action: PropTypes.object.isRequired,
+};
+
+export default ActionDetail;

package/src/components/actions/ActionEdit.js

@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import {
+  Checkbox,
+  Container,
+  FormField,
+  Header,
+  Icon,
+  Segment,
+} from "semantic-ui-react";
+import { linkTo } from "@truedat/core/routes";
+import { FormattedMessage, useIntl } from "react-intl";
+import { useTemplate } from "@truedat/core/hooks";
+import { useAction, useActionUpdate } from "../../hooks/useActions";
+import ActionBreadcrumbs from "./ActionBreadcrumbs";
+import ActionForm from "./ActionForm";
+
+const ActionEdit = () => {
+  const { formatMessage } = useIntl();
+  const { id } = useParams();
+  const { action } = useAction(id);
+  const { data: template } = useTemplate({
+    name: action?.type,
+    domainIds: [],
+  });
+
+  const { trigger: triggerUpdate } = useActionUpdate(id);
+  const [isEnabled, setIsEnabled] = useState(true);
+
+  useEffect(() => {
+    if (action?.deleted_at) history.push(linkTo.ACTION({ id: action?.id }));
+    setIsEnabled(action?.is_enabled);
+  }, [action]);
+
+  return (
+    <>
+      <ActionBreadcrumbs
+        text={formatMessage({ id: "ai.actions.actions.edit" })}
+      />
+      <Container as={Segment} text className="ai-action-edit ai-action-new">
+        <div className="ai-action-edit-header">
+          <Header as="h2">
+            <Icon name="caret square right" />
+            <Header.Content>
+              {formatMessage({ id: "ai.actions.actions.edit" })}
+            </Header.Content>
+          </Header>
+          <FormField className="ai-action-edit-header-active">
+            <label>
+              <FormattedMessage id="ai.actions.actions.form.active" />
+            </label>
+            <Checkbox
+              toggle
+              checked={isEnabled}
+              onChange={(_e, { checked }) => setIsEnabled(checked)}
+            />
+          </FormField>
+        </div>
+        <ActionForm
+          action={action}
+          template={template?.template}
+          isEnabled={isEnabled}
+          onSubmit={triggerUpdate}
+        />
+      </Container>
+    </>
+  );
+};
+
+export default ActionEdit;

package/src/components/actions/ActionForm.js

@@ -0,0 +1,168 @@
+import _ from "lodash/fp";
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { useHistory } from "react-router-dom";
+import { HistoryBackButton } from "@truedat/core/components";
+import { Form, Header, Label, Button } from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { linkTo } from "@truedat/core/routes";
+import { useAgents } from "@truedat/auth/hooks/useUsers";
+
+const SelectableDynamicForm = React.lazy(() =>
+  import("@truedat/df/components/SelectableDynamicForm")
+);
+
+const ActionForm = ({
+  action: actionData,
+  template: templateData,
+  isEnabled,
+  onSubmit,
+}) => {
+  const { formatMessage } = useIntl();
+  const history = useHistory();
+  const { agents } = useAgents();
+
+  const [action, setAction] = useState();
+  const [template, setTemplate] = useState();
+  const [dynamicContent, setDynamicContent] = useState();
+  const [isValid, setIsValid] = useState(false);
+
+  useEffect(() => {
+    if (_.size(agents) === 1) {
+      handleActionChange(null, { name: "user_id", value: agents[0].id });
+    }
+  }, [agents]);
+
+  useEffect(() => {
+    setAction(actionData);
+    setDynamicContent(actionData?.dynamic_content);
+  }, [actionData]);
+
+  useEffect(() => {
+    setTemplate(templateData);
+  }, [templateData]);
+
+  useEffect(() => {
+    validateAction(isValid);
+  }, [action]);
+
+  const handleTemplateChange = (template) => {
+    if (template) setTemplate(template);
+  };
+
+  const isEditing = _.prop("id")(actionData) ? true : false;
+
+  const agentOptions = _.map(({ id, full_name }) => ({
+    text: full_name,
+    value: id,
+  }))(agents);
+
+  // Validation
+  const validateAction = (valid) => {
+    setIsValid(_.isEmpty(valid) && !!action?.name && !!action?.user_id);
+  };
+
+  const handleActionChange = (_e, { name, value }) => {
+    setAction({ ...action, [name]: value });
+  };
+
+  const handleDynamicContentChange = ({ content, valid }) => {
+    setDynamicContent(content);
+    validateAction(valid);
+  };
+
+  // Submit
+  const handleSubmit = () => {
+    const payload = {
+      ...action,
+      dynamic_content: dynamicContent,
+      type: template?.name,
+      is_enabled: isEnabled,
+    };
+
+    onSubmit(payload).then((response) => {
+      history.push(linkTo.ACTION({ id: response?.data?.data?.id }));
+    });
+  };
+
+  return (
+    <>
+      <Form role="form">
+        <Form.Field required>
+          <label>
+            <FormattedMessage id="ai.actions.actions.form.name" />
+            {_.isEmpty(_.prop("name")(action)) ? (
+              <Label pointing="left">
+                <FormattedMessage id="template.form.validation.empty_required" />
+              </Label>
+            ) : null}
+          </label>
+          <Form.Input
+            name="name"
+            value={_.prop("name")(action) || ""}
+            onChange={handleActionChange}
+          />
+        </Form.Field>
+        <Form.Field required>
+          <label>
+            <FormattedMessage id="ai.actions.actions.form.user" />
+            {!_.isInteger(_.prop("user_id")(action)) ? (
+              <Label pointing="left">
+                <FormattedMessage id="template.form.validation.empty_required" />
+              </Label>
+            ) : null}
+          </label>
+          <Form.Dropdown
+            name="user_id"
+            placeholder={formatMessage({ id: "fields.dropdown.placeholder" })}
+            value={_.prop("user_id")(action)}
+            options={agentOptions}
+            onChange={handleActionChange}
+            fluid
+            selection
+          />
+        </Form.Field>
+        <SelectableDynamicForm
+          disableSelector={isEditing}
+          disabled={false}
+          scope="actions"
+          domainIds={null}
+          required
+          content={dynamicContent}
+          name={template?.name}
+          onChange={handleDynamicContentChange}
+          label={formatMessage({
+            id: "ai.actions.form.type",
+            defaultMessage: formatMessage({ id: "template.selector.label" }),
+          })}
+          onNameChange={(_a) => null}
+          onTemplateChange={isEditing ? () => null : handleTemplateChange}
+          selectedTemplate={template}
+        />
+      </Form>
+      <div className="ai-action-edit-form-actions actions">
+        <HistoryBackButton content={formatMessage({ id: "actions.cancel" })} />
+        <Button
+          role="button"
+          primary
+          disabled={!isValid}
+          onClick={handleSubmit}
+          content={
+            isEditing
+              ? formatMessage({ id: `actions.update` })
+              : formatMessage({ id: `actions.create` })
+          }
+        />
+      </div>
+    </>
+  );
+};
+
+ActionForm.propTypes = {
+  action: PropTypes.object,
+  template: PropTypes.object,
+  isEnabled: PropTypes.bool,
+  onSubmit: PropTypes.func,
+};
+
+export default ActionForm;

package/src/components/actions/ActionNew.js

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import {
+  Checkbox,
+  Container,
+  FormField,
+  Header,
+  Icon,
+  Segment,
+} from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { useActionCreate } from "../../hooks/useActions";
+import ActionBreadcrumbs from "./ActionBreadcrumbs";
+import ActionForm from "./ActionForm";
+
+const ActionNew = () => {
+  const { formatMessage } = useIntl();
+  const { trigger: triggerCreate } = useActionCreate();
+  const [isEnabled, setIsEnabled] = useState(true);
+
+  return (
+    <>
+      <ActionBreadcrumbs
+        text={formatMessage({ id: "ai.actions.actions.create" })}
+      />
+      <Container as={Segment} text className="ai-action-edit ai-action-new">
+        <div className="ai-action-edit-header">
+          <Header as="h2">
+            <Icon name="caret square right" />
+            <Header.Content>
+              {formatMessage({ id: "ai.actions.actions.create" })}
+            </Header.Content>
+          </Header>
+          <FormField className="ai-action-edit-header-active">
+            <label>
+              <FormattedMessage id="ai.actions.actions.form.active" />
+            </label>
+            <Checkbox
+              toggle
+              checked={isEnabled}
+              onChange={(_e, { checked }) => setIsEnabled(checked)}
+            />
+          </FormField>
+        </div>
+        <ActionForm isEnabled={isEnabled} onSubmit={triggerCreate} />
+      </Container>
+    </>
+  );
+};
+
+export default ActionNew;