@truedat/ai 7.5.7 → 7.5.10

package/src/components/actions/__tests__/__snapshots__/Actions.spec.js.snap

@@ -15,11 +15,11 @@ exports[`<Actions /> matches the latest snapshot 1`] = `
       <div
         class="content"
       >
-        AI actions
+        ai.actions.header
         <div
           class="sub header"
         >
-          AI actions
+          ai.actions.subheader
         </div>
       </div>
     </h2>
@@ -37,10 +37,11 @@ exports[`<Actions /> matches the latest snapshot 1`] = `
         >
           <a
             class="ui primary button"
+            data-discover="true"
             href="/tasks/new"
             role="button"
           >
-            Create
+            ai.actions.actions.create
           </a>
         </div>
       </div>
@@ -55,7 +56,7 @@ exports[`<Actions /> matches the latest snapshot 1`] = `
       <div
         class="content"
       >
-        Empty
+        ai.actions.search.results.empty
       </div>
     </h4>
   </div>

package/src/components/actions/__tests__/__snapshots__/ActionsTable.spec.js.snap

@@ -19,17 +19,17 @@ exports[`<ActionsTable /> matches the latest snapshot 1`] = `
         <th
           class=""
         >
-          Agent
+          user.full_name
         </th>
         <th
           class=""
         >
-          Type
+          type
         </th>
         <th
           class=""
         >
-          status
+          is_enabled
         </th>
         <th
           class="two wide descending sorted"
@@ -48,6 +48,7 @@ exports[`<ActionsTable /> matches the latest snapshot 1`] = `
           class=""
         >
           <a
+            data-discover="true"
             href="/tasks/1"
           >
             action_1
@@ -66,7 +67,7 @@ exports[`<ActionsTable /> matches the latest snapshot 1`] = `
         <td
           class=""
         >
-          enabled
+          ai.actions.is_enabled.true
         </td>
         <td
           class="center aligned"
@@ -85,6 +86,7 @@ exports[`<ActionsTable /> matches the latest snapshot 1`] = `
           class="warning"
         >
           <a
+            data-discover="true"
             href="/tasks/2"
           >
             action_2
@@ -103,7 +105,7 @@ exports[`<ActionsTable /> matches the latest snapshot 1`] = `
         <td
           class="warning"
         >
-          disabled
+          ai.actions.is_enabled.false
         </td>
         <td
           class="warning center aligned"

package/src/components/aiSandbox/AiSandbox.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
 import {
   Header,
@@ -12,7 +12,6 @@ import {
   Comment,
   CommentContent,
   CommentAuthor,
-  CommentMetadata,
   CommentText,
   CommentGroup,
 } from "semantic-ui-react";
@@ -70,17 +69,16 @@ export default function AiSandbox() {
           />
         </Form.Field>
       </Form>
-
       <CommentGroup style={{ marginTop: 20 }}>
         {messages.map(({ role, content }, key) =>
-          role == "system" ? (
+          role === "system" ? (
             <Message key={key} info>
               <MessageHeader>
                 {formatMessage({ id: "ai_sandbox.role.system" })}
               </MessageHeader>
               <p>{content}</p>
             </Message>
-          ) : role == "error" ? (
+          ) : role === "error" ? (
             <Message key={key} error>
               <MessageHeader>
                 {formatMessage({ id: "ai_sandbox.error" })}
@@ -99,7 +97,6 @@ export default function AiSandbox() {
           )
         )}
       </CommentGroup>
-
       {selectedProvider ? (
         <RequestForm
           provider={selectedProvider}

package/src/components/aiSandbox/RequestForm.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useIntl } from "react-intl";
 import { Button, Form, Dropdown, Input } from "semantic-ui-react";
 
@@ -25,7 +25,7 @@ export default function AiSandbox({ provider, messages, setMessages }) {
       ..._.reject({ role: "error" })(messages),
       { role: selectedRole, content },
     ];
-    if (selectedRole == "user")
+    if (selectedRole === "user") {
       chatCompletion({ messages: requestMessages })
         .then(({ data }) =>
           setMessages([
@@ -37,7 +37,9 @@ export default function AiSandbox({ provider, messages, setMessages }) {
           const content = _.propOr("Error", "response.data.error")(response);
           setMessages([{ role: "error", content }]);
         });
-    else setMessages(requestMessages);
+    } else {
+      setMessages(requestMessages);
+    }
     setContent("");
   };
 
@@ -62,7 +64,7 @@ export default function AiSandbox({ provider, messages, setMessages }) {
       />
       <Button
         size="small"
-        icon={selectedRole == "user" ? "send" : "write"}
+        icon={selectedRole === "user" ? "send" : "write"}
         disabled={isCompleting || !content}
       />
     </Form>

package/src/components/prompts/PromptEditor.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { Fragment, useEffect, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import {
@@ -73,7 +73,6 @@ export default function PromptEditor({
           <Header as="h3" dividing>
             {name}
           </Header>
-
           <Controller
             control={control}
             name="name"
@@ -107,7 +106,6 @@ export default function PromptEditor({
               />
             )}
           />
-
           <Controller
             control={control}
             name="resource_type"
@@ -140,7 +138,6 @@ export default function PromptEditor({
               </Form.Field>
             )}
           />
-
           <Controller
             control={control}
             name="language"
@@ -183,7 +180,6 @@ export default function PromptEditor({
               </Form.Field>
             )}
           />
-
           <Controller
             control={control}
             name="system_prompt"
@@ -217,7 +213,6 @@ export default function PromptEditor({
               />
             )}
           />
-
           <Controller
             control={control}
             name="user_prompt_template"
@@ -251,7 +246,6 @@ export default function PromptEditor({
               />
             )}
           />
-
           <Controller
             control={control}
             name="provider_id"
@@ -282,7 +276,6 @@ export default function PromptEditor({
               </Form.Field>
             )}
           />
-
           <Divider hidden />
           <Container textAlign="right">
             <Button

package/src/components/prompts/Prompts.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
 import {
   Button,
@@ -40,7 +40,6 @@ export default function Prompts() {
   const [isDirty, setDirty] = useState(false);
 
   const loading = loadingPrompts || loadingProviders;
-
   const prompts = data?.data;
 
   const providersOptions = _.flow(
@@ -55,18 +54,16 @@ export default function Prompts() {
   };
 
   const { trigger: createPrompt, isMutating: isCreating } = usePromptCreate();
-
   const { trigger: updatePrompt, isMutating: isUpdating } =
     usePromptUpdate(selectedPrompt);
-
   const { trigger: setPromptActive, isMutating: isSettingActive } =
     usePromptSetActive(selectedPrompt);
-
   const { trigger: deletePrompt, isMutating: isDeleting } =
     usePromptDelete(selectedPrompt);
 
   const isSubmitting =
     isCreating || isUpdating || isDeleting || isSettingActive;
+
   const onPromptCreate = async (prompt) => {
     const mutatePrompt = selectedPrompt?.id ? updatePrompt : createPrompt;
     await mutatePrompt({ prompt });
@@ -103,7 +100,6 @@ export default function Prompts() {
           </Header.Subheader>
         </Header.Content>
       </Header>
-
       <Grid>
         <GridColumn width={4}>
           <Button fluid onClick={setStateNewPrompt} disabled={isDirty}>

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

@@ -1,16 +1,15 @@
-import _ from "lodash/fp";
-import React from "react";
-import { act } from "react-dom/test-utils";
-import { waitFor } from "@testing-library/react";
-import { render } from "@truedat/test/render";
 import userEvent from "@testing-library/user-event";
-import { LangProviderWrapper } from "@truedat/core/i18n";
+import { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
+import _ from "lodash/fp";
 import PromptEditor from "../PromptEditor";
 
-const renderOpts = {
-  messages: {},
-  fallback: "lazy",
-};
+jest.mock("@truedat/core/hooks", () => ({
+  useLocales: jest.fn(() => ({
+    loading: false,
+    locales: [{ lang: "es", id: 1 }],
+  })),
+}));
 
 const props = {
   providersOptions: [{ key: 1, value: 1, text: "Provider1" }],
@@ -41,28 +40,20 @@ const props = {
   setDirty: jest.fn(),
 };
 
-const renderComponent = (props) =>
-  render(
-    <LangProviderWrapper langs={["es"]}>
-      <PromptEditor {...props} />
-    </LangProviderWrapper>,
-    renderOpts
-  );
-
 describe("<PromptEditor />", () => {
   it("matches the latest snapshot", async () => {
-    const { container } = renderComponent(props);
-    await act(async () => {
-      expect(container).toMatchSnapshot();
-    });
+    const rendered = render(<PromptEditor {...props} />);
+    await waitForLoad(rendered);
+
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("matches snapshot without selected resource mapping", async () => {
     const props = { setDirty: jest.fn() };
-    const { container, queryByText } = renderComponent(props);
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
-    expect(container).toMatchSnapshot();
+    const rendered = render(<PromptEditor {...props} />);
+    await waitForLoad(rendered);
+
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("matches snapshot for translation resource type", async () => {
@@ -70,10 +61,10 @@ describe("<PromptEditor />", () => {
       "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();
+    const rendered = render(<PromptEditor {...translationProps} />);
+    await waitForLoad(rendered);
+
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("matches snapshot without onDelete", async () => {
@@ -81,17 +72,20 @@ describe("<PromptEditor />", () => {
       ...props,
       onDelete: null,
     };
-    const { container } = renderComponent(thisProps);
+    const rendered = render(<PromptEditor {...thisProps} />);
+    await waitForLoad(rendered);
 
-    await waitFor(() => expect(container).toMatchSnapshot());
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("test cancel button", async () => {
     const onCancel = jest.fn();
     const thisProps = { ...props, onCancel };
-    const { getByRole } = renderComponent(thisProps);
+    const rendered = render(<PromptEditor {...thisProps} />);
+    await waitForLoad(rendered);
 
-    userEvent.click(getByRole("button", { name: /cancel/i }));
+    const user = userEvent.setup({ delay: null });
+    await user.click(rendered.getByRole("button", { name: /cancel/i }));
 
     await waitFor(() => expect(onCancel).toHaveBeenCalled());
   });
@@ -99,66 +93,80 @@ describe("<PromptEditor />", () => {
   it("test cancel button with confirm", async () => {
     const onCancel = jest.fn();
     const thisProps = { ...props, onCancel };
-    const { container, getByRole, getAllByRole } = renderComponent(thisProps);
+    const rendered = render(<PromptEditor {...thisProps} />);
+    await waitForLoad(rendered);
 
-    userEvent.type(getAllByRole("textbox")[0], "name");
+    const user = userEvent.setup({ delay: null });
+    await user.type(rendered.getAllByRole("textbox")[0], "name");
 
     await waitFor(() =>
-      expect(getByRole("button", { name: /save/i })).toBeEnabled()
+      expect(rendered.getByRole("button", { name: /save/i })).toBeEnabled()
     );
 
-    userEvent.click(getByRole("button", { name: /cancel/i }));
+    await user.click(rendered.getByRole("button", { name: /cancel/i }));
     expect(onCancel).toHaveBeenCalledTimes(0);
 
-    userEvent.click(getByRole("button", { name: /modal-negative-action/i }));
+    await user.click(
+      rendered.getByRole("button", { name: /modal-negative-action/i })
+    );
     expect(onCancel).toHaveBeenCalledTimes(0);
 
-    userEvent.click(getByRole("button", { name: /cancel/i }));
+    await user.click(rendered.getByRole("button", { name: /cancel/i }));
     expect(onCancel).toHaveBeenCalledTimes(0);
 
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
 
-    userEvent.click(getByRole("button", { name: /modal-affirmative-action/i }));
+    await user.click(
+      rendered.getByRole("button", { name: /modal-affirmative-action/i })
+    );
     expect(onCancel).toHaveBeenCalledTimes(1);
   });
 
   it("test delete button", async () => {
     const onDelete = jest.fn();
     const thisProps = { ...props, onDelete };
-    const { container, getByRole } = renderComponent(thisProps);
+    const rendered = render(<PromptEditor {...thisProps} />);
+    await waitForLoad(rendered);
 
-    userEvent.click(getByRole("button", { name: /delete/i }));
+    const user = userEvent.setup({ delay: null });
+    await user.click(rendered.getByRole("button", { name: /delete/i }));
     expect(onDelete).toHaveBeenCalledTimes(0);
 
-    userEvent.click(getByRole("button", { name: /modal-negative-action/i }));
+    await user.click(
+      rendered.getByRole("button", { name: /modal-negative-action/i })
+    );
     expect(onDelete).toHaveBeenCalledTimes(0);
 
-    userEvent.click(getByRole("button", { name: /delete/i }));
+    await user.click(rendered.getByRole("button", { name: /delete/i }));
     expect(onDelete).toHaveBeenCalledTimes(0);
 
-    await waitFor(() => expect(container).toMatchSnapshot());
+    expect(rendered.container).toMatchSnapshot();
 
-    userEvent.click(getByRole("button", { name: /modal-affirmative-action/i }));
+    await user.click(
+      rendered.getByRole("button", { name: /modal-affirmative-action/i })
+    );
     expect(onDelete).toHaveBeenCalledTimes(1);
   });
 
   it("test submit", async () => {
     const onSubmit = jest.fn();
     const thisProps = { ...props, onSubmit };
-    const { getByRole, getAllByRole } = renderComponent(thisProps);
+    const rendered = render(<PromptEditor {...thisProps} />);
+    await waitForLoad(rendered);
 
-    expect(getByRole("button", { name: /save/i })).toBeDisabled();
+    const user = userEvent.setup({ delay: null });
+    expect(rendered.getByRole("button", { name: /save/i })).toBeDisabled();
 
-    userEvent.type(getAllByRole("textbox")[0], "name");
+    await user.type(rendered.getAllByRole("textbox")[0], "name");
 
     await waitFor(() =>
-      expect(getByRole("button", { name: /save/i })).toBeEnabled()
+      expect(rendered.getByRole("button", { name: /save/i })).toBeEnabled()
     );
 
-    userEvent.click(getByRole("button", { name: /save/i }));
+    await user.click(rendered.getByRole("button", { name: /save/i }));
 
     await waitFor(() =>
-      expect(getByRole("button", { name: /save/i })).toBeEnabled()
+      expect(rendered.getByRole("button", { name: /save/i })).toBeEnabled()
     );
 
     expect(onSubmit.mock.calls[0][0]).toEqual({

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
 import Prompts from "../Prompts";
@@ -84,7 +83,6 @@ describe("<Prompts />", () => {
         "prompts.action.new": "prompts.action.new",
       },
     },
-    fallback: "lazy",
   };
 
   it("matches the latest snapshot", async () => {

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

@@ -111,6 +111,14 @@ exports[`<PromptEditor /> matches snapshot for translation resource type 1`] = `
         role="listbox"
         tabindex="-1"
       >
+        <div
+          aria-atomic="true"
+          aria-live="polite"
+          class="divider text"
+          role="alert"
+        >
+          en
+        </div>
         <i
           aria-hidden="true"
           class="dropdown icon"
@@ -119,9 +127,22 @@ exports[`<PromptEditor /> matches snapshot for translation resource type 1`] = `
           class="menu transition"
         >
           <div
-            aria-checked="false"
+            aria-checked="true"
             aria-selected="true"
-            class="selected item"
+            class="active selected item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              en
+            </span>
+          </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
             role="option"
             style="pointer-events: all;"
           >
@@ -350,6 +371,14 @@ exports[`<PromptEditor /> matches snapshot without onDelete 1`] = `
         role="listbox"
         tabindex="0"
       >
+        <div
+          aria-atomic="true"
+          aria-live="polite"
+          class="divider text"
+          role="alert"
+        >
+          en
+        </div>
         <i
           aria-hidden="true"
           class="dropdown icon"
@@ -358,9 +387,22 @@ exports[`<PromptEditor /> matches snapshot without onDelete 1`] = `
           class="menu transition"
         >
           <div
-            aria-checked="false"
+            aria-checked="true"
             aria-selected="true"
-            class="selected item"
+            class="active selected item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              en
+            </span>
+          </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
             role="option"
             style="pointer-events: all;"
           >
@@ -586,6 +628,14 @@ exports[`<PromptEditor /> matches the latest snapshot 1`] = `
         role="listbox"
         tabindex="0"
       >
+        <div
+          aria-atomic="true"
+          aria-live="polite"
+          class="divider text"
+          role="alert"
+        >
+          en
+        </div>
         <i
           aria-hidden="true"
           class="dropdown icon"
@@ -594,9 +644,22 @@ exports[`<PromptEditor /> matches the latest snapshot 1`] = `
           class="menu transition"
         >
           <div
-            aria-checked="false"
+            aria-checked="true"
             aria-selected="true"
-            class="selected item"
+            class="active selected item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              en
+            </span>
+          </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
             role="option"
             style="pointer-events: all;"
           >
@@ -825,6 +888,14 @@ exports[`<PromptEditor /> test cancel button with confirm 1`] = `
         role="listbox"
         tabindex="0"
       >
+        <div
+          aria-atomic="true"
+          aria-live="polite"
+          class="divider text"
+          role="alert"
+        >
+          en
+        </div>
         <i
           aria-hidden="true"
           class="dropdown icon"
@@ -833,9 +904,22 @@ exports[`<PromptEditor /> test cancel button with confirm 1`] = `
           class="menu transition"
         >
           <div
-            aria-checked="false"
+            aria-checked="true"
             aria-selected="true"
-            class="selected item"
+            class="active selected item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              en
+            </span>
+          </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
             role="option"
             style="pointer-events: all;"
           >
@@ -1064,6 +1148,14 @@ exports[`<PromptEditor /> test delete button 1`] = `
         role="listbox"
         tabindex="0"
       >
+        <div
+          aria-atomic="true"
+          aria-live="polite"
+          class="divider text"
+          role="alert"
+        >
+          en
+        </div>
         <i
           aria-hidden="true"
           class="dropdown icon"
@@ -1072,9 +1164,22 @@ exports[`<PromptEditor /> test delete button 1`] = `
           class="menu transition"
         >
           <div
-            aria-checked="false"
+            aria-checked="true"
             aria-selected="true"
-            class="selected item"
+            class="active selected item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              en
+            </span>
+          </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
             role="option"
             style="pointer-events: all;"
           >