@truedat/ai 6.2.3 → 6.3.1

package/package.json

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

package/src/api.js

@@ -3,6 +3,9 @@ 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_PROVIDERS = "/api/providers";
+const API_PROVIDER = "/api/providers/:id";
+const API_PROVIDER_CHAT = "/api/providers/:id/chat_completion";
 const API_SUGGESTIONS_AVAILABILITY_CHECK =
   "/api/suggestions/availability_check";
 const API_SUGGESTIONS_REQUEST = "/api/suggestions/request";
@@ -13,6 +16,9 @@ export {
   API_PROMPTS,
   API_PROMPT,
   API_PROMPT_SET_ACTIVE,
+  API_PROVIDERS,
+  API_PROVIDER,
+  API_PROVIDER_CHAT,
   API_SUGGESTIONS_AVAILABILITY_CHECK,
   API_SUGGESTIONS_REQUEST,
 };

package/src/components/AiRoutes.js

@@ -2,9 +2,16 @@ 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 {
+  AI_SANDBOX,
+  RESOURCE_MAPPINGS,
+  PROMPTS,
+  PROVIDERS,
+} from "@truedat/core/routes";
 import ResourceMappings from "./resourceMappings/ResourceMappings";
 import Prompts from "./prompts/Prompts";
+import Providers from "./providers/Providers";
+import AiSandbox from "./aiSandbox/AiSandbox";
 
 export default function AiRoutes() {
   const authorized = useAuthorized("manage_ai");
@@ -19,6 +26,14 @@ export default function AiRoutes() {
         path={PROMPTS}
         render={() => (authorized ? <Prompts /> : <Unauthorized />)}
       />
+      <Route
+        path={PROVIDERS}
+        render={() => (authorized ? <Providers /> : <Unauthorized />)}
+      />
+      <Route
+        path={AI_SANDBOX}
+        render={() => (authorized ? <AiSandbox /> : <Unauthorized />)}
+      />
     </Switch>
   );
 }

package/src/components/aiSandbox/AiSandbox.js

@@ -0,0 +1,106 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import { useIntl, FormattedMessage } from "react-intl";
+import {
+  Header,
+  Icon,
+  Segment,
+  Form,
+  Dropdown,
+  Message,
+  MessageHeader,
+  Comment,
+  CommentContent,
+  CommentAuthor,
+  CommentMetadata,
+  CommentText,
+  CommentGroup,
+} from "semantic-ui-react";
+
+import { useProviders } from "@truedat/ai/hooks/useProviders";
+
+import RequestForm from "./RequestForm";
+
+export default function AiSandbox() {
+  const { formatMessage } = useIntl();
+  const { data, loading } = useProviders();
+  const [selectedProvider, setSelectedProvider] = useState();
+  const [messages, setMessages] = useState([]);
+
+  const selectProvider = (provider) => {
+    setMessages([]);
+    setSelectedProvider(provider);
+  };
+
+  const providerOptions = _.flow(
+    _.propOr([], "data"),
+    _.orderBy(["id"], ["asc"]),
+    _.map(({ id, name, type }) => ({
+      key: id,
+      text: `${name} - ${type}`,
+      value: id,
+    }))
+  )(data);
+
+  return (
+    <Segment loading={loading}>
+      <Header as="h2">
+        <Icon circular name="magic" />
+        <Header.Content>
+          <FormattedMessage id="ai_sandbox.header" />
+          <Header.Subheader>
+            <FormattedMessage id="ai_sandbox.subheader" />
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
+      <Form>
+        <Form.Field required>
+          <label>{formatMessage({ id: "ai_sandbox.form.provider" })}</label>
+          <Dropdown
+            selection
+            options={providerOptions}
+            onChange={(_e, { value }) => selectProvider(value)}
+            value={selectedProvider}
+          />
+        </Form.Field>
+      </Form>
+
+      <CommentGroup style={{ marginTop: 20 }}>
+        {messages.map(({ role, content }, key) =>
+          role == "system" ? (
+            <Message key={key} info>
+              <MessageHeader>
+                {formatMessage({ id: "ai_sandbox.role.system" })}
+              </MessageHeader>
+              <p>{content}</p>
+            </Message>
+          ) : role == "error" ? (
+            <Message key={key} error>
+              <MessageHeader>
+                {formatMessage({ id: "ai_sandbox.error" })}
+              </MessageHeader>
+              <p>{content}</p>
+            </Message>
+          ) : (
+            <Comment key={key}>
+              <CommentContent>
+                <CommentAuthor as="a">
+                  {formatMessage({ id: `ai_sandbox.role.${role}` })}
+                </CommentAuthor>
+                <CommentText>{content}</CommentText>
+              </CommentContent>
+            </Comment>
+          )
+        )}
+      </CommentGroup>
+
+      {selectedProvider ? (
+        <RequestForm
+          provider={selectedProvider}
+          messages={messages}
+          setMessages={setMessages}
+        />
+      ) : null}
+    </Segment>
+  );
+}

package/src/components/aiSandbox/RequestForm.js

@@ -0,0 +1,70 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import { useIntl } from "react-intl";
+import { Button, Form, Dropdown, Input } from "semantic-ui-react";
+
+import { useProviderChatCompletion } from "@truedat/ai/hooks/useProviders";
+
+export default function AiSandbox({ provider, messages, setMessages }) {
+  const { formatMessage } = useIntl();
+  const [selectedRole, setSelectedRole] = useState("user");
+  const [content, setContent] = useState("");
+
+  const { trigger: chatCompletion, isMutating: isCompleting } =
+    useProviderChatCompletion(provider);
+
+  const roleOptions = _.map((role) => ({
+    key: role,
+    text: formatMessage({ id: `ai_sandbox.role.${role}` }),
+    value: role,
+  }))(["user", "system", "assistant"]);
+
+  const requestCompletion = () => {
+    if (!content) return;
+    const requestMessages = [
+      ..._.reject({ role: "error" })(messages),
+      { role: selectedRole, content },
+    ];
+    if (selectedRole == "user")
+      chatCompletion({ messages: requestMessages })
+        .then(({ data }) =>
+          setMessages([
+            ...requestMessages,
+            { role: "assistant", content: data },
+          ])
+        )
+        .catch((response) => {
+          const content = _.propOr("Error", "response.data.error")(response);
+          setMessages([{ role: "error", content }]);
+        });
+    else setMessages(requestMessages);
+    setContent("");
+  };
+
+  return (
+    <Form
+      loading={isCompleting}
+      onSubmit={requestCompletion}
+      style={{ display: "flex", marginTop: 20 }}
+      autoComplete="off"
+    >
+      <Dropdown
+        selection
+        options={roleOptions}
+        onChange={(_e, { value }) => setSelectedRole(value)}
+        value={selectedRole}
+      />
+      <Input
+        name="content"
+        style={{ flexGrow: 1 }}
+        value={content}
+        onChange={(_e, { value }) => setContent(value)}
+      />
+      <Button
+        size="small"
+        icon={selectedRole == "user" ? "send" : "write"}
+        disabled={isCompleting || !content}
+      />
+    </Form>
+  );
+}

package/src/components/constants.js

@@ -3,12 +3,12 @@ import { useIntl } from "react-intl";
 
 export const resourceTypes = ["data_structure", "business_concept"];
 
-export const providers = ["openai"];
+export const providerTypes = ["openai", "azure_openai", "bedrock_claude"];
 
 export const useResourceTypeOptions = () =>
   useOptions(resourceTypes, "resourceMappings.resourceType");
-export const useProvidersOptions = () =>
-  useOptions(providers, "prompts.provider");
+export const useProviderTypeOptions = () =>
+  useOptions(providerTypes, "providers.type");
 
 const useOptions = (list, formatPrefix) => {
   const { formatMessage } = useIntl();

package/src/components/prompts/PromptEditor.js

@@ -13,7 +13,7 @@ import {
 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";
+import { useResourceTypeOptions } from "../constants";
 
 export default function PromptEditor({
   selectedPrompt,
@@ -23,10 +23,10 @@ export default function PromptEditor({
   onDelete,
   isSubmitting,
   setDirty,
+  providersOptions,
 }) {
   const { formatMessage } = useIntl();
   const resourceTypeOptions = useResourceTypeOptions();
-  const providersOptions = useProvidersOptions();
   const locales = useLocales();
 
   const localeOptions = _.flow(
@@ -58,6 +58,8 @@ export default function PromptEditor({
       id: "prompts.form.name.new",
     });
 
+  const provider = watch("provider");
+
   return (
     <Fragment>
       <FormProvider {...form}>
@@ -232,7 +234,7 @@ export default function PromptEditor({
 
           <Controller
             control={control}
-            name="provider"
+            name="provider_id"
             rules={{
               required: formatMessage(
                 { id: "form.validation.required" },
@@ -261,40 +263,6 @@ export default function PromptEditor({
             )}
           />
 
-          <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
@@ -372,4 +340,5 @@ PromptEditor.propTypes = {
   onDelete: PropTypes.func,
   isSubmitting: PropTypes.bool,
   setDirty: PropTypes.func,
+  providersOptions: PropTypes.array,
 };

package/src/components/prompts/Prompts.js

@@ -19,6 +19,7 @@ import {
   usePromptUpdate,
   usePromptSetActive,
 } from "@truedat/ai/hooks/usePrompts";
+import { useProviders } from "@truedat/ai/hooks/useProviders";
 import PromptEditor from "./PromptEditor";
 
 const NEW_PROMPT = {
@@ -33,12 +34,20 @@ const NEW_PROMPT = {
 
 export default function Prompts() {
   const { formatMessage } = useIntl();
-  const { data, loading, mutate } = usePrompts();
+  const { data, loading: loadingPrompts, mutate } = usePrompts();
+  const { data: providers, loading: loadingProviders } = useProviders();
   const [selectedPrompt, setSelectedPrompt] = useState();
   const [isDirty, setDirty] = useState(false);
 
+  const loading = loadingPrompts || loadingProviders;
+
   const prompts = data?.data;
 
+  const providersOptions = _.flow(
+    _.prop("data"),
+    _.map(({ id, name }) => ({ key: id, value: id, text: name }))
+  )(providers);
+
   const setStateNewPrompt = () => setSelectedPrompt(NEW_PROMPT);
   const clearForm = () => {
     setSelectedPrompt(null);
@@ -139,6 +148,7 @@ export default function Prompts() {
               onDelete={selectedPrompt?.id ? onPromptDelete : null}
               isSubmitting={isSubmitting}
               setDirty={setDirty}
+              providersOptions={providersOptions}
             />
           ) : (
             <Header as="h2" icon textAlign="center">

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

@@ -56,6 +56,7 @@ const renderOpts = {
 };
 
 const props = {
+  providersOptions: [{ key: 1, value: 1, text: "Provider1" }],
   selectedPrompt: {
     id: 1,
     name: "prompt1",
@@ -63,8 +64,7 @@ const props = {
     language: "en",
     system_prompt: "system_prompt",
     user_prompt_template: "user_prompt",
-    provider: "openai",
-    model: "model1",
+    provider_id: 1,
   },
   prompts: [
     {
@@ -74,8 +74,7 @@ const props = {
       language: "en",
       system_prompt: "system_prompt",
       user_prompt_template: "user_prompt",
-      provider: "openai",
-      model: "model1",
+      provider_id: 1,
     },
   ],
   onSubmit: jest.fn(),
@@ -200,9 +199,8 @@ describe("<PromptEditor />", () => {
     expect(onSubmit.mock.calls[0][0]).toEqual({
       id: 1,
       language: "en",
-      model: "model1",
       name: "prompt1name",
-      provider: "openai",
+      provider_id: 1,
       resource_type: "data_structure",
       system_prompt: "system_prompt",
       user_prompt_template: "user_prompt",

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

@@ -37,6 +37,24 @@ jest.mock("@truedat/ai/hooks/usePrompts", () => {
   };
 });
 
+jest.mock("@truedat/ai/hooks/useProviders", () => {
+  const originalModule = jest.requireActual("@truedat/ai/hooks/useProviders");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useProviders: jest.fn(() => ({
+      data: {
+        data: [
+          {
+            name: "provider1",
+          },
+        ],
+      },
+      loading: false,
+    })),
+  };
+});
 describe("<Prompts />", () => {
   const renderOpts = {
     messages: {

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

@@ -167,7 +167,7 @@ exports[`<PromptEditor /> matches snapshot without onDelete 1`] = `
           class="divider text"
           role="alert"
         >
-          prompts.provider.openai
+          Provider1
         </div>
         <i
           aria-hidden="true"
@@ -186,30 +186,12 @@ exports[`<PromptEditor /> matches snapshot without onDelete 1`] = `
             <span
               class="text"
             >
-              prompts.provider.openai
+              Provider1
             </span>
           </div>
         </div>
       </div>
     </div>
-    <div
-      class="required field"
-    >
-      <label>
-        prompts.form.model
-      </label>
-      <div
-        class="ui input"
-      >
-        <input
-          autocomplete="off"
-          placeholder="prompts.form.model"
-          required=""
-          type="text"
-          value="model1"
-        />
-      </div>
-    </div>
     <div
       class="ui hidden divider"
     />
@@ -407,7 +389,7 @@ exports[`<PromptEditor /> matches the latest snapshot 1`] = `
           class="divider text"
           role="alert"
         >
-          prompts.provider.openai
+          Provider1
         </div>
         <i
           aria-hidden="true"
@@ -426,30 +408,12 @@ exports[`<PromptEditor /> matches the latest snapshot 1`] = `
             <span
               class="text"
             >
-              prompts.provider.openai
+              Provider1
             </span>
           </div>
         </div>
       </div>
     </div>
-    <div
-      class="required field"
-    >
-      <label>
-        prompts.form.model
-      </label>
-      <div
-        class="ui input"
-      >
-        <input
-          autocomplete="off"
-          placeholder="prompts.form.model"
-          required=""
-          type="text"
-          value="model1"
-        />
-      </div>
-    </div>
     <div
       class="ui hidden divider"
     />
@@ -650,7 +614,7 @@ exports[`<PromptEditor /> test cancel button with confirm 1`] = `
           class="divider text"
           role="alert"
         >
-          prompts.provider.openai
+          Provider1
         </div>
         <i
           aria-hidden="true"
@@ -669,30 +633,12 @@ exports[`<PromptEditor /> test cancel button with confirm 1`] = `
             <span
               class="text"
             >
-              prompts.provider.openai
+              Provider1
             </span>
           </div>
         </div>
       </div>
     </div>
-    <div
-      class="required field"
-    >
-      <label>
-        prompts.form.model
-      </label>
-      <div
-        class="ui input"
-      >
-        <input
-          autocomplete="off"
-          placeholder="prompts.form.model"
-          required=""
-          type="text"
-          value="model1"
-        />
-      </div>
-    </div>
     <div
       class="ui hidden divider"
     />
@@ -893,7 +839,7 @@ exports[`<PromptEditor /> test delete button 1`] = `
           class="divider text"
           role="alert"
         >
-          prompts.provider.openai
+          Provider1
         </div>
         <i
           aria-hidden="true"
@@ -912,30 +858,12 @@ exports[`<PromptEditor /> test delete button 1`] = `
             <span
               class="text"
             >
-              prompts.provider.openai
+              Provider1
             </span>
           </div>
         </div>
       </div>
     </div>
-    <div
-      class="required field"
-    >
-      <label>
-        prompts.form.model
-      </label>
-      <div
-        class="ui input"
-      >
-        <input
-          autocomplete="off"
-          placeholder="prompts.form.model"
-          required=""
-          type="text"
-          value="model1"
-        />
-      </div>
-    </div>
     <div
       class="ui hidden divider"
     />