@truedat/ai 6.0.2 → 6.0.3

package/package.json

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

package/src/api.js

@@ -2,5 +2,17 @@ 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";
+const API_PROMPT_SET_ACTIVE = "/api/prompts/:id/set_active";
+const API_SUGGESTIONS_AVAILABILITY_CHECK =
+  "/api/suggestions/availability_check";
+const API_SUGGESTIONS_REQUEST = "/api/suggestions/request";
 
-export { API_RESOURCE_MAPPINGS, API_RESOURCE_MAPPING, API_PROMPTS, API_PROMPT };
+export {
+  API_RESOURCE_MAPPINGS,
+  API_RESOURCE_MAPPING,
+  API_PROMPTS,
+  API_PROMPT,
+  API_PROMPT_SET_ACTIVE,
+  API_SUGGESTIONS_AVAILABILITY_CHECK,
+  API_SUGGESTIONS_REQUEST,
+};

package/src/components/constants.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
 import { useIntl } from "react-intl";
 
-export const resourceTypes = ["data_structure"];
+export const resourceTypes = ["data_structure", "business_concept"];
 
 export const providers = ["openai"];
 

package/src/components/prompts/PromptEditor.js

@@ -18,6 +18,7 @@ import { useResourceTypeOptions, useProvidersOptions } from "../constants";
 export default function PromptEditor({
   selectedPrompt,
   onSubmit,
+  onSetActive,
   onCancel,
   onDelete,
   isSubmitting,
@@ -303,6 +304,15 @@ export default function PromptEditor({
               disabled={!isValid || !isDirty}
               content={formatMessage({ id: "actions.save" })}
             />
+            {selectedPrompt.id ? (
+              <Button
+                onClick={onSetActive}
+                primary
+                loading={isSubmitting}
+                disabled={isDirty || selectedPrompt.active}
+                content={formatMessage({ id: "actions.set_active" })}
+              />
+            ) : null}
             {isDirty ? (
               <ConfirmModal
                 trigger={

package/src/components/prompts/Prompts.js

@@ -9,6 +9,7 @@ import {
   Icon,
   List,
   Segment,
+  Label,
 } from "semantic-ui-react";
 
 import {
@@ -16,6 +17,7 @@ import {
   usePromptCreate,
   usePromptDelete,
   usePromptUpdate,
+  usePromptSetActive,
 } from "@truedat/ai/hooks/usePrompts";
 import PromptEditor from "./PromptEditor";
 
@@ -48,16 +50,27 @@ export default function Prompts() {
   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;
+  const isSubmitting =
+    isCreating || isUpdating || isDeleting || isSettingActive;
   const onPromptCreate = async (prompt) => {
     const mutatePrompt = selectedPrompt?.id ? updatePrompt : createPrompt;
     await mutatePrompt({ prompt });
     clearForm();
     mutate();
   };
+
+  const onSetActive = async () => {
+    await setPromptActive();
+    clearForm();
+    mutate();
+  };
+
   const onPromptDelete = async (prompt) => {
     await deletePrompt({ prompt });
     clearForm();
@@ -90,6 +103,11 @@ export default function Prompts() {
                 >
                   <List.Content>
                     <List.Header>
+                      <Label
+                        circular
+                        color={prompt.active ? "green" : "grey"}
+                        empty
+                      />{" "}
                       {prompt.name ||
                         formatMessage({
                           id: "prompts.form.name.new",
@@ -117,6 +135,7 @@ export default function Prompts() {
               prompts={prompts}
               onCancel={clearForm}
               onSubmit={onPromptCreate}
+              onSetActive={onSetActive}
               onDelete={selectedPrompt?.id ? onPromptDelete : null}
               isSubmitting={isSubmitting}
               setDirty={setDirty}

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

@@ -47,6 +47,9 @@ const renderOpts = {
       "prompts.provider.openai": "prompts.provider.openai",
       "resourceMappings.resourceType.data_structure":
         "resourceMappings.resourceType.data_structure",
+      "actions.set_active": "actions.set_active",
+      "resourceMappings.resourceType.business_concept":
+        "resourceMappings.resourceType.business_concept",
     },
   },
   fallback: "lazy",

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

@@ -68,6 +68,19 @@ exports[`<PromptEditor /> matches snapshot without onDelete 1`] = `
               resourceMappings.resourceType.data_structure
             </span>
           </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              resourceMappings.resourceType.business_concept
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -210,6 +223,11 @@ exports[`<PromptEditor /> matches snapshot without onDelete 1`] = `
       >
         actions.save
       </button>
+      <button
+        class="ui primary button"
+      >
+        actions.set_active
+      </button>
       <button
         class="ui button"
       >
@@ -290,6 +308,19 @@ exports[`<PromptEditor /> matches the latest snapshot 1`] = `
               resourceMappings.resourceType.data_structure
             </span>
           </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              resourceMappings.resourceType.business_concept
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -432,6 +463,11 @@ exports[`<PromptEditor /> matches the latest snapshot 1`] = `
       >
         actions.save
       </button>
+      <button
+        class="ui primary button"
+      >
+        actions.set_active
+      </button>
       <button
         class="ui button"
       >
@@ -515,6 +551,19 @@ exports[`<PromptEditor /> test cancel button with confirm 1`] = `
               resourceMappings.resourceType.data_structure
             </span>
           </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              resourceMappings.resourceType.business_concept
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -655,6 +704,13 @@ exports[`<PromptEditor /> test cancel button with confirm 1`] = `
       >
         actions.save
       </button>
+      <button
+        class="ui primary disabled button"
+        disabled=""
+        tabindex="-1"
+      >
+        actions.set_active
+      </button>
       <button
         class="ui button"
       >
@@ -738,6 +794,19 @@ exports[`<PromptEditor /> test delete button 1`] = `
               resourceMappings.resourceType.data_structure
             </span>
           </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              resourceMappings.resourceType.business_concept
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -880,6 +949,11 @@ exports[`<PromptEditor /> test delete button 1`] = `
       >
         actions.save
       </button>
+      <button
+        class="ui primary button"
+      >
+        actions.set_active
+      </button>
       <button
         class="ui button"
       >

package/src/components/prompts/__tests__/__snapshots__/{Prompt.spec.js.snap → Prompts.spec.js.snap}

@@ -48,6 +48,10 @@ exports[`<Prompts /> matches the latest snapshot 1`] = `
               <div
                 class="header"
               >
+                <div
+                  class="ui grey circular empty label"
+                />
+                 
                 rm1
               </div>
             </div>

package/src/components/resourceMappings/__tests__/ResourceMappingEditor.spec.js

@@ -36,6 +36,7 @@ const renderOpts = {
         "actions.discard.confirmation.header",
       "confirmation.yes": "confirmation.yes",
       "confirmation.no": "confirmation.no",
+      "resourceMappings.resourceType.business_concept": "business concept",
     },
   },
   fallback: "lazy",

package/src/components/resourceMappings/__tests__/ResourceMappings.spec.js

@@ -66,6 +66,7 @@ describe("<ResourceMappings />", () => {
         "actions.discard.confirmation.header": "confirmation_header",
         "actions.discard.confirmation.content": "confirmation_content",
         "resourceMappings.action.new": "resourceMappings.action.new",
+        "resourceMappings.resourceType.business_concept": "business concept",
       },
     },
     fallback: "lazy",

package/src/components/resourceMappings/__tests__/__snapshots__/ResourceMappingEditor.spec.js.snap

@@ -60,6 +60,19 @@ exports[`<ResourceMappingEditor /> matches snapshot without onDelete 1`] = `
               resourceMappings.resourceType.data_structure
             </span>
           </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              business concept
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -245,6 +258,19 @@ exports[`<ResourceMappingEditor /> matches the latest snapshot 1`] = `
               resourceMappings.resourceType.data_structure
             </span>
           </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              business concept
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -433,6 +459,19 @@ exports[`<ResourceMappingEditor /> test cancel button with confirm 1`] = `
               resourceMappings.resourceType.data_structure
             </span>
           </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              business concept
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -619,6 +658,19 @@ exports[`<ResourceMappingEditor /> test delete button 1`] = `
               resourceMappings.resourceType.data_structure
             </span>
           </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              business concept
+            </span>
+          </div>
         </div>
       </div>
     </div>

package/src/components/suggestions/SuggestionsWidget.js

@@ -0,0 +1,192 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import {
+  Button,
+  Checkbox,
+  Container,
+  Divider,
+  Icon,
+  List,
+  Message,
+  Segment,
+} from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import { toEnrichedTextFormat } from "@truedat/core/services/format";
+
+export default function SuggestionsWidget({
+  requestAiSuggestion,
+  applySuggestions,
+  template,
+  isModification,
+}) {
+  const [loadingSuggestion, setLoadingSuggestion] = useState();
+  const [suggestions, setSuggestions] = useState();
+  const [suggestionsError, setSuggestionsError] = useState();
+  const [selectedSuggestions, setSelectedSuggestions] = useState([]);
+
+  const suggestionKeys = _.keys(suggestions);
+  const fieldInSuggestions = ({ name }) => _.includes(name)(suggestionKeys);
+  const templateFields = _.flow(
+    _.prop("content"),
+    _.filter(({ fields }) => _.any(fieldInSuggestions)(fields)),
+    _.map(({ name, fields }) => ({
+      name,
+      fields: _.filter(fieldInSuggestions)(fields),
+    }))
+  )(template);
+  const fieldTypes = _.flow(
+    _.prop("content"),
+    _.flatMap(({ fields }) =>
+      _.flow(
+        _.filter(({ editable = true }) => editable || !isModification),
+        _.map(({ name, type }) => [name, type])
+      )(fields)
+    ),
+    _.fromPairs
+  )(template);
+
+  const validFields = _.keys(fieldTypes);
+
+  const handleRequestSuggestions = () => {
+    setLoadingSuggestion(true);
+    setSuggestionsError(null);
+    setSelectedSuggestions([]);
+    setSuggestions(null);
+
+    requestAiSuggestion(({ data: { data: suggestions } }) => {
+      if (_.prop("[0]")(suggestions) === "error") {
+        setSuggestionsError(
+          _.prop("[1].error.message")(suggestions) || _.prop("[1]")(suggestions)
+        );
+      } else {
+        setSuggestions(suggestions);
+        const selectedFields = _.flow(
+          _.keys,
+          _.filter(
+            (key) =>
+              _.includes(key)(validFields) && !_.isEmpty(suggestions[key])
+          )
+        )(suggestions);
+        setSelectedSuggestions(selectedFields);
+      }
+      setLoadingSuggestion(false);
+    });
+  };
+  const handleApplySuggestions = () => {
+    const parsedSuggestions = _.flow(
+      _.pick(selectedSuggestions),
+      _.toPairs,
+      _.map(([key, value]) => [
+        key,
+        fieldTypes[key] === "enriched_text"
+          ? toEnrichedTextFormat(value)
+          : value,
+      ]),
+      _.fromPairs
+    )(suggestions);
+
+    applySuggestions(parsedSuggestions);
+    setSelectedSuggestions([]);
+    setSuggestions(null);
+  };
+
+  const toggleSelectedSuggestion = (name) => {
+    setSelectedSuggestions(
+      _.includes(name)(selectedSuggestions)
+        ? _.reject((v) => v == name)(selectedSuggestions)
+        : [...selectedSuggestions, name]
+    );
+  };
+
+  return (
+    <Segment loading={loadingSuggestion}>
+      <Container style={{ display: "flex", justifyContent: "space-between" }}>
+        <h4>
+          {suggestions ? (
+            <Icon name="lightbulb outline" />
+          ) : (
+            <Icon name="lightbulb" />
+          )}
+          <FormattedMessage id="structure_note.ai_suggestion.header" />
+        </h4>
+        <Divider hidden />
+        {suggestions ? null : (
+          <Button onClick={handleRequestSuggestions}>
+            <FormattedMessage id="actions.ai_suggestion" />
+          </Button>
+        )}
+      </Container>
+      {suggestionsError ? (
+        <Message negative>
+          <Message.Header>
+            <FormattedMessage id="structure_note.ai_suggestion.error" />
+          </Message.Header>
+          <p>{suggestionsError}</p>
+        </Message>
+      ) : null}
+      {suggestions ? (
+        <>
+          {_.map(({ name: groupName, fields }) => (
+            <Container key={`group-${groupName}`}>
+              <>
+                <h5>{groupName ? groupName : ""}</h5>
+                <List>
+                  {_.map(({ name, label, editable = true }) => (
+                    <List.Item
+                      key={name}
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "12px",
+                      }}
+                    >
+                      <Checkbox
+                        id={name}
+                        disabled={
+                          (isModification && !editable) ||
+                          _.isEmpty(suggestions[name])
+                        }
+                        checked={_.includes(name)(selectedSuggestions)}
+                        onChange={() => toggleSelectedSuggestion(name)}
+                      />
+                      <label
+                        htmlFor={name}
+                        style={{ cursor: "pointer" }}
+                        disabled
+                      >
+                        <List.Header>{label}</List.Header>
+                        <List.Description>
+                          {_.isEmpty(suggestions[name])
+                            ? "-"
+                            : suggestions[name]}
+                        </List.Description>
+                      </label>
+                    </List.Item>
+                  ))(fields)}
+                </List>
+                <Divider hidden />
+              </>
+            </Container>
+          ))(templateFields)}
+          <Container textAlign="right">
+            <Button
+              primary
+              onClick={handleApplySuggestions}
+              disabled={_.isEmpty(selectedSuggestions)}
+            >
+              <FormattedMessage id="actions.apply_ai_suggestion" />
+            </Button>
+          </Container>
+        </>
+      ) : null}
+    </Segment>
+  );
+}
+
+SuggestionsWidget.propTypes = {
+  aiSuggestionsUrl: PropTypes.object,
+  applySuggestions: PropTypes.func,
+  template: PropTypes.object,
+  isModification: PropTypes.bool,
+};

package/src/components/suggestions/__tests__/SuggestionsWidget.spec.js

@@ -0,0 +1,151 @@
+import React, { Suspense } from "react";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import SuggestionsWidget from "../SuggestionsWidget";
+
+const mockSuggestions = {
+  editable_field: "editable_field_value",
+  non_editable_field: "non_editable_field_value",
+  unselect_field: "unselect_field_value",
+};
+
+const messages = {
+  en: {
+    "actions.cancel": "cancel",
+    "actions.save": "save",
+    "structure_note.ai_suggestion.header": "header",
+    "actions.apply_ai_suggestion": "actions.apply_ai_suggestion",
+    "actions.ai_suggestion": "actions.ai_suggestion",
+    "structure_note.ai_suggestion.error": "error",
+  },
+};
+
+const requestAiSuggestion = (mock) => (callback) => {
+  callback({
+    data: {
+      data:
+        mock === "suggestions"
+          ? mockSuggestions
+          : mock === "error_message"
+          ? ["error", { error: { message: "ERROR MESSAGE" } }]
+          : ["error", "ERROR TEXT"],
+    },
+  });
+};
+
+describe("<SuggestionsWidget />", () => {
+  it("matches the latest snapshot", () => {
+    const props = {
+      template: {},
+      requestAiSuggestion: requestAiSuggestion("suggestions"),
+    };
+    const { container } = render(
+      <Suspense fallback={null}>
+        <SuggestionsWidget {...props} />
+      </Suspense>,
+      { messages }
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("component lifecycle", async () => {
+    const applySuggestions = jest.fn();
+    const props = {
+      requestAiSuggestion: requestAiSuggestion("suggestions"),
+      applySuggestions,
+      template: {
+        content: [
+          {
+            fields: [
+              {
+                name: "editable_field",
+                label: "EditableField",
+                editable: true,
+              },
+            ],
+          },
+          {
+            name: "Group2",
+            fields: [
+              {
+                name: "non_editable_field",
+                label: "NonEditableField",
+                editable: false,
+              },
+              {
+                name: "unselect_field",
+                label: "UnselectedField",
+                editable: true,
+              },
+            ],
+          },
+        ],
+      },
+      isModification: true,
+    };
+    const { container, findByText, queryByText } = render(
+      <Suspense fallback={null}>
+        <SuggestionsWidget {...props} />
+      </Suspense>,
+      { messages }
+    );
+
+    userEvent.click(await findByText(/actions.ai_suggestion/i));
+    await waitFor(() =>
+      expect(queryByText(/actions.ai_suggestion/i)).not.toBeInTheDocument()
+    );
+
+    expect(container).toMatchSnapshot();
+
+    userEvent.click(await findByText(/UnselectedField/i));
+    userEvent.click(await findByText(/UnselectedField/i));
+    userEvent.click(await findByText(/UnselectedField/i));
+
+    userEvent.click(await findByText(/actions.apply_ai_suggestion/i));
+    await waitFor(() =>
+      expect(
+        queryByText(/actions.apply_ai_suggestion/i)
+      ).not.toBeInTheDocument()
+    );
+    expect(applySuggestions).toHaveBeenCalledWith(
+      expect.objectContaining({ editable_field: "editable_field_value" })
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("renders error with message", async () => {
+    const props = {
+      requestAiSuggestion: requestAiSuggestion("error_message"),
+    };
+    const { container, findByText, queryByText } = render(
+      <Suspense fallback={null}>
+        <SuggestionsWidget {...props} />
+      </Suspense>,
+      { messages }
+    );
+
+    userEvent.click(await findByText(/actions.ai_suggestion/i));
+    await waitFor(() =>
+      expect(queryByText(/error message/i)).toBeInTheDocument()
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("renders error with text", async () => {
+    const props = {
+      requestAiSuggestion: requestAiSuggestion("error_text"),
+    };
+    const { container, findByText, queryByText } = render(
+      <Suspense fallback={null}>
+        <SuggestionsWidget {...props} />
+      </Suspense>,
+      { messages }
+    );
+
+    userEvent.click(await findByText(/actions.ai_suggestion/i));
+    await waitFor(() => expect(queryByText(/error text/i)).toBeInTheDocument());
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/suggestions/__tests__/__snapshots__/SuggestionsWidget.spec.js.snap

@@ -0,0 +1,316 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SuggestionsWidget /> component lifecycle 1`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <div
+      class="ui container"
+      style="display: flex; justify-content: space-between;"
+    >
+      <h4>
+        <i
+          aria-hidden="true"
+          class="lightbulb outline icon"
+        />
+        header
+      </h4>
+      <div
+        class="ui hidden divider"
+      />
+    </div>
+    <div
+      class="ui container"
+    >
+      <h5 />
+      <div
+        class="ui list"
+        role="list"
+      >
+        <div
+          class="item"
+          role="listitem"
+          style="display: flex; align-items: center; gap: 12px;"
+        >
+          <div
+            class="ui checked fitted checkbox"
+          >
+            <input
+              checked=""
+              class="hidden"
+              id="editable_field"
+              readonly=""
+              tabindex="0"
+              type="checkbox"
+              value=""
+            />
+            <label
+              for="editable_field"
+            />
+          </div>
+          <label
+            disabled=""
+            for="editable_field"
+            style="cursor: pointer;"
+          >
+            <div
+              class="header"
+            >
+              EditableField
+            </div>
+            <div
+              class="description"
+            >
+              editable_field_value
+            </div>
+          </label>
+        </div>
+      </div>
+      <div
+        class="ui hidden divider"
+      />
+    </div>
+    <div
+      class="ui container"
+    >
+      <h5>
+        Group2
+      </h5>
+      <div
+        class="ui list"
+        role="list"
+      >
+        <div
+          class="item"
+          role="listitem"
+          style="display: flex; align-items: center; gap: 12px;"
+        >
+          <div
+            class="ui disabled fitted checkbox"
+          >
+            <input
+              class="hidden"
+              disabled=""
+              id="non_editable_field"
+              readonly=""
+              tabindex="-1"
+              type="checkbox"
+              value=""
+            />
+            <label
+              for="non_editable_field"
+            />
+          </div>
+          <label
+            disabled=""
+            for="non_editable_field"
+            style="cursor: pointer;"
+          >
+            <div
+              class="header"
+            >
+              NonEditableField
+            </div>
+            <div
+              class="description"
+            >
+              non_editable_field_value
+            </div>
+          </label>
+        </div>
+        <div
+          class="item"
+          role="listitem"
+          style="display: flex; align-items: center; gap: 12px;"
+        >
+          <div
+            class="ui checked fitted checkbox"
+          >
+            <input
+              checked=""
+              class="hidden"
+              id="unselect_field"
+              readonly=""
+              tabindex="0"
+              type="checkbox"
+              value=""
+            />
+            <label
+              for="unselect_field"
+            />
+          </div>
+          <label
+            disabled=""
+            for="unselect_field"
+            style="cursor: pointer;"
+          >
+            <div
+              class="header"
+            >
+              UnselectedField
+            </div>
+            <div
+              class="description"
+            >
+              unselect_field_value
+            </div>
+          </label>
+        </div>
+      </div>
+      <div
+        class="ui hidden divider"
+      />
+    </div>
+    <div
+      class="ui right aligned container"
+    >
+      <button
+        class="ui primary button"
+      >
+        actions.apply_ai_suggestion
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<SuggestionsWidget /> component lifecycle 2`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <div
+      class="ui container"
+      style="display: flex; justify-content: space-between;"
+    >
+      <h4>
+        <i
+          aria-hidden="true"
+          class="lightbulb icon"
+        />
+        header
+      </h4>
+      <div
+        class="ui hidden divider"
+      />
+      <button
+        class="ui button"
+      >
+        actions.ai_suggestion
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<SuggestionsWidget /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <div
+      class="ui container"
+      style="display: flex; justify-content: space-between;"
+    >
+      <h4>
+        <i
+          aria-hidden="true"
+          class="lightbulb icon"
+        />
+        header
+      </h4>
+      <div
+        class="ui hidden divider"
+      />
+      <button
+        class="ui button"
+      >
+        actions.ai_suggestion
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<SuggestionsWidget /> renders error with message 1`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <div
+      class="ui container"
+      style="display: flex; justify-content: space-between;"
+    >
+      <h4>
+        <i
+          aria-hidden="true"
+          class="lightbulb icon"
+        />
+        header
+      </h4>
+      <div
+        class="ui hidden divider"
+      />
+      <button
+        class="ui button"
+      >
+        actions.ai_suggestion
+      </button>
+    </div>
+    <div
+      class="ui negative message"
+    >
+      <div
+        class="header"
+      >
+        error
+      </div>
+      <p>
+        ERROR MESSAGE
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<SuggestionsWidget /> renders error with text 1`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <div
+      class="ui container"
+      style="display: flex; justify-content: space-between;"
+    >
+      <h4>
+        <i
+          aria-hidden="true"
+          class="lightbulb icon"
+        />
+        header
+      </h4>
+      <div
+        class="ui hidden divider"
+      />
+      <button
+        class="ui button"
+      >
+        actions.ai_suggestion
+      </button>
+    </div>
+    <div
+      class="ui negative message"
+    >
+      <div
+        class="header"
+      >
+        error
+      </div>
+      <p>
+        ERROR TEXT
+      </p>
+    </div>
+  </div>
+</div>
+`;

package/src/hooks/usePrompts.js

@@ -7,7 +7,7 @@ import {
   apiJsonPatch,
   apiJsonDelete,
 } from "@truedat/core/services/api";
-import { API_PROMPTS, API_PROMPT } from "../api";
+import { API_PROMPTS, API_PROMPT, API_PROMPT_SET_ACTIVE } from "../api";
 
 export const usePrompts = () => {
   const { data, error, mutate } = useSWR(API_PROMPTS, apiJson);
@@ -24,6 +24,12 @@ export const usePromptUpdate = (func) => {
   return useSWRMutations(url, (url, { arg }) => apiJsonPatch(url, arg));
 };
 
+export const usePromptSetActive = (func) => {
+  const id = func?.id || 0;
+  const url = compile(API_PROMPT_SET_ACTIVE)({ id });
+  return useSWRMutations(url, (url) => apiJsonPatch(url));
+};
+
 export const usePromptDelete = (func) => {
   const id = func?.id || 0;
   const url = compile(API_PROMPT)({ id });

package/src/hooks/useSuggestions.js

@@ -0,0 +1,9 @@
+import useSWRMutations from "swr/mutation";
+import { apiJsonPost } from "@truedat/core/services/api";
+import { API_SUGGESTIONS_AVAILABILITY_CHECK } from "../api";
+
+export const useAvailabilityCheck = () => {
+  return useSWRMutations(API_SUGGESTIONS_AVAILABILITY_CHECK, (url, { arg }) =>
+    apiJsonPost(url, arg)
+  );
+};

package/src/index.js

@@ -1,3 +1,4 @@
 import * as components from "./components";
+import * as api from "./api";
 
-export { components };
+export { components, api };