@truedat/ai 6.3.0 → 6.3.2

package/src/components/providers/__tests__/__snapshots__/Providers.spec.js.snap

@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Providers /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <h2
+      class="ui header"
+    >
+      <i
+        aria-hidden="true"
+        class="map signs circular icon"
+      />
+      <div
+        class="content"
+      >
+        providers.header
+        <div
+          class="sub header"
+        >
+          providers.subheader
+        </div>
+      </div>
+    </h2>
+    <div
+      class="ui grid"
+    >
+      <div
+        class="four wide column"
+      >
+        <button
+          class="ui fluid button"
+        >
+          providers.action.new
+        </button>
+        <div
+          class="ui divided selection list"
+          role="list"
+        >
+          <div
+            class="item"
+            role="listitem"
+          >
+            <div
+              class="content"
+            >
+              <div
+                class="header"
+              >
+                rm1
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="eleven wide column"
+      >
+        <h2
+          class="ui icon center aligned header"
+        >
+          <i
+            aria-hidden="true"
+            class="hand pointer outline icon"
+          />
+          <div
+            class="sub header"
+          >
+            providers.no_selection
+          </div>
+        </h2>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/providers/providerProperties/AzureOpenai.js

@@ -0,0 +1,125 @@
+import React from "react";
+import { useIntl } from "react-intl";
+import { Controller, useFormContext } from "react-hook-form";
+import { Form } from "semantic-ui-react";
+
+export default function AzureOpenai() {
+  const { formatMessage } = useIntl();
+  const { control } = useFormContext();
+
+  return (
+    <>
+      <Controller
+        control={control}
+        name="properties.resource_name"
+        rules={{
+          required: formatMessage(
+            { id: "form.validation.required" },
+            {
+              prop: formatMessage({
+                id: "providerProperties.form.resourceName",
+              }),
+            }
+          ),
+        }}
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <Form.Input
+            autoComplete="off"
+            placeholder={formatMessage({
+              id: "providerProperties.form.resourceName",
+            })}
+            error={error?.message}
+            label={formatMessage({
+              id: "providerProperties.form.resourceName",
+            })}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            value={value}
+            required
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="properties.deployment"
+        rules={{
+          required: formatMessage(
+            { id: "form.validation.required" },
+            {
+              prop: formatMessage({
+                id: "providerProperties.form.deployment",
+              }),
+            }
+          ),
+        }}
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <Form.Input
+            autoComplete="off"
+            placeholder={formatMessage({
+              id: "providerProperties.form.deployment",
+            })}
+            error={error?.message}
+            label={formatMessage({
+              id: "providerProperties.form.deployment",
+            })}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            value={value}
+            required
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="properties.api_version"
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <Form.Input
+            autoComplete="off"
+            placeholder={formatMessage({
+              id: "providerProperties.form.apiVersion",
+            })}
+            error={error?.message}
+            label={formatMessage({
+              id: "providerProperties.form.apiVersion",
+            })}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            value={value}
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="properties.api_key"
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <Form.Input
+            type="password"
+            autoComplete="off"
+            placeholder={formatMessage({
+              id: "providerProperties.form.apiKey",
+            })}
+            error={error?.message}
+            label={formatMessage({
+              id: "providerProperties.form.apiKey",
+            })}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            value={value}
+          />
+        )}
+      />
+    </>
+  );
+}

package/src/components/providers/providerProperties/BedrockClaude.js

@@ -0,0 +1,170 @@
+import React from "react";
+import { useIntl } from "react-intl";
+import { Controller, useFormContext } from "react-hook-form";
+import { Form } from "semantic-ui-react";
+
+export default function BedrockClaude() {
+  const { formatMessage } = useIntl();
+  const { control } = useFormContext();
+
+  return (
+    <>
+      <Controller
+        control={control}
+        name="properties.model"
+        rules={{
+          required: formatMessage(
+            { id: "form.validation.required" },
+            {
+              prop: formatMessage({
+                id: "providerProperties.form.model",
+              }),
+            }
+          ),
+        }}
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <Form.Input
+            autoComplete="off"
+            placeholder={formatMessage({
+              id: "providerProperties.form.model",
+            })}
+            error={error?.message}
+            label={formatMessage({
+              id: "providerProperties.form.model",
+            })}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            value={value}
+            required
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="properties.temperature"
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <Form.Input
+            autoComplete="off"
+            placeholder={formatMessage({
+              id: "providerProperties.form.temperature",
+            })}
+            error={error?.message}
+            label={formatMessage({
+              id: "providerProperties.form.temperature",
+            })}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            value={value}
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="properties.top_p"
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <Form.Input
+            autoComplete="off"
+            placeholder={formatMessage({
+              id: "providerProperties.form.topP",
+            })}
+            error={error?.message}
+            label={formatMessage({
+              id: "providerProperties.form.topP",
+            })}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            value={value}
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="properties.access_key_id"
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <Form.Input
+            type="password"
+            autoComplete="off"
+            placeholder={formatMessage({
+              id: "providerProperties.form.accessKeyId",
+            })}
+            error={error?.message}
+            label={formatMessage({
+              id: "providerProperties.form.accessKeyId",
+            })}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            value={value}
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="properties.secret_access_key"
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <Form.Input
+            type="password"
+            autoComplete="off"
+            placeholder={formatMessage({
+              id: "providerProperties.form.secretAccessKey",
+            })}
+            error={error?.message}
+            label={formatMessage({
+              id: "providerProperties.form.secretAccessKey",
+            })}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            value={value}
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="properties.aws_region"
+        rules={{
+          required: formatMessage(
+            { id: "form.validation.required" },
+            {
+              prop: formatMessage({
+                id: "providerProperties.form.organizationKey",
+              }),
+            }
+          ),
+        }}
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <Form.Input
+            autoComplete="off"
+            placeholder={formatMessage({
+              id: "providerProperties.form.awsRegion",
+            })}
+            error={error?.message}
+            label={formatMessage({
+              id: "providerProperties.form.awsRegion",
+            })}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            value={value}
+            required
+          />
+        )}
+      />
+    </>
+  );
+}

package/src/components/providers/providerProperties/Openai.js

@@ -0,0 +1,103 @@
+import React from "react";
+import { useIntl } from "react-intl";
+import { Controller, useFormContext } from "react-hook-form";
+import { Form } from "semantic-ui-react";
+
+export default function Openai() {
+  const { formatMessage } = useIntl();
+  const { control } = useFormContext();
+
+  return (
+    <>
+      <Controller
+        control={control}
+        name="properties.model"
+        rules={{
+          required: formatMessage(
+            { id: "form.validation.required" },
+            {
+              prop: formatMessage({
+                id: "providerProperties.form.model",
+              }),
+            }
+          ),
+        }}
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <Form.Input
+            autoComplete="off"
+            placeholder={formatMessage({
+              id: "providerProperties.form.model",
+            })}
+            error={error?.message}
+            label={formatMessage({
+              id: "providerProperties.form.model",
+            })}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            value={value}
+            required
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="properties.organization_key"
+        rules={{
+          required: formatMessage(
+            { id: "form.validation.required" },
+            {
+              prop: formatMessage({
+                id: "providerProperties.form.organizationKey",
+              }),
+            }
+          ),
+        }}
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <Form.Input
+            autoComplete="off"
+            placeholder={formatMessage({
+              id: "providerProperties.form.organizationKey",
+            })}
+            error={error?.message}
+            label={formatMessage({
+              id: "providerProperties.form.organizationKey",
+            })}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            value={value}
+            required
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="properties.api_key"
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <Form.Input
+            type="password"
+            autoComplete="off"
+            placeholder={formatMessage({
+              id: "providerProperties.form.apiKey",
+            })}
+            error={error?.message}
+            label={formatMessage({
+              id: "providerProperties.form.apiKey",
+            })}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            value={value}
+          />
+        )}
+      />
+    </>
+  );
+}

package/src/components/providers/providerProperties/index.js

@@ -0,0 +1,5 @@
+import Openai from "./Openai";
+import AzureOpenai from "./AzureOpenai";
+import BedrockClaude from "./BedrockClaude";
+
+export { Openai, AzureOpenai, BedrockClaude };

package/src/hooks/__tests__/useProviders.js

@@ -0,0 +1,101 @@
+import _ from "lodash/fp";
+import { compile } from "path-to-regexp";
+import useSWR from "swr";
+import useSWRMutations from "swr/mutation";
+import { renderHook } from "@testing-library/react-hooks";
+import {
+  apiJson,
+  apiJsonPost,
+  apiJsonPatch,
+  apiJsonDelete,
+} from "@truedat/core/services/api";
+import { API_PROVIDERS, API_PROVIDER } from "../../api";
+import {
+  useProviders,
+  useProviderCreate,
+  useProviderUpdate,
+  useProviderDelete,
+} from "../useProviders";
+
+jest.mock("swr", () => ({
+  __esModule: true,
+  ...jest.requireActual("swr"),
+  default: jest.fn(() => ({
+    data: { data: "data" },
+    error: null,
+    mutate: jest.fn(),
+  })),
+}));
+
+jest.mock("swr/mutation", () => ({
+  __esModule: true,
+  ...jest.requireActual("swr/mutation"),
+  default: jest.fn(),
+}));
+
+jest.mock("@truedat/core/services/api", () => ({
+  __esModule: true,
+  ...jest.requireActual("@truedat/core/services/api"),
+  apiJsonPost: jest.fn(),
+  apiJsonPatch: jest.fn(),
+  apiJsonDelete: jest.fn(),
+}));
+
+describe("useProviders", () => {
+  it("useProviders calls useSWR with correct api route", () => {
+    const { result } = renderHook(() => useProviders());
+
+    expect(result.current).toMatchObject({
+      data: "data",
+      error: null,
+      loading: false,
+    });
+
+    expect(useSWR).toHaveBeenCalledWith(API_PROVIDERS, apiJson);
+  });
+  it("useProviderCreate calls useSWRMutations with correct api route", () => {
+    renderHook(() => useProviderCreate());
+    const [url, func] = _.last(useSWRMutations.mock.calls);
+    const arg = { some: "arg" };
+    expect(url).toBe(API_PROVIDERS);
+    func(url, { arg });
+
+    expect(apiJsonPost).toHaveBeenCalledWith(url, arg);
+  });
+  it("useProviderUpdate calls useSWRMutations with correct api route", () => {
+    const id = 8;
+    renderHook(() => useProviderUpdate({ id }));
+    const [url, func] = _.last(useSWRMutations.mock.calls);
+    const arg = { some: "arg" };
+    expect(url).toBe(compile(API_PROVIDER)({ id }));
+    func(url, { arg });
+
+    expect(apiJsonPatch).toHaveBeenCalledWith(url, arg);
+  });
+  it("useProviderUpdate without args will render id 0", () => {
+    renderHook(() => useProviderUpdate());
+    const [url, func] = _.last(useSWRMutations.mock.calls);
+    const arg = { some: "arg" };
+    expect(url).toBe(compile(API_PROVIDER)({ id: 0 }));
+    func(url, { arg });
+    expect(apiJsonPatch).toHaveBeenCalledWith(url, arg);
+  });
+  it("useProviderDelete calls useSWRMutations with correct api route", () => {
+    const id = 8;
+    renderHook(() => useProviderDelete({ id }));
+    const [url, func] = _.last(useSWRMutations.mock.calls);
+    const arg = { some: "arg" };
+    expect(url).toBe(compile(API_PROVIDER)({ id }));
+    func(url, { arg });
+
+    expect(apiJsonDelete).toHaveBeenCalledWith(url, arg);
+  });
+  it("useProviderDelete without args will render id 0", () => {
+    renderHook(() => useProviderDelete());
+    const [url, func] = _.last(useSWRMutations.mock.calls);
+    const arg = { some: "arg" };
+    expect(url).toBe(compile(API_PROVIDER)({ id: 0 }));
+    func(url, { arg });
+    expect(apiJsonDelete).toHaveBeenCalledWith(url, arg);
+  });
+});

package/src/hooks/useProviders.js

@@ -0,0 +1,38 @@
+import { compile } from "path-to-regexp";
+import useSWR from "swr";
+import useSWRMutations from "swr/mutation";
+import {
+  apiJson,
+  apiJsonPost,
+  apiJsonPatch,
+  apiJsonDelete,
+} from "@truedat/core/services/api";
+import { API_PROVIDERS, API_PROVIDER, API_PROVIDER_CHAT } from "../api";
+
+export const useProviders = () => {
+  const { data, error, mutate } = useSWR(API_PROVIDERS, apiJson);
+  return { data: data?.data, error, loading: !error && !data, mutate };
+};
+
+export const useProviderCreate = () => {
+  return useSWRMutations(API_PROVIDERS, (url, { arg }) =>
+    apiJsonPost(url, arg)
+  );
+};
+
+export const useProviderUpdate = (payload) => {
+  const id = payload?.id || 0;
+  const url = compile(API_PROVIDER)({ id });
+  return useSWRMutations(url, (url, { arg }) => apiJsonPatch(url, arg));
+};
+
+export const useProviderChatCompletion = (id) => {
+  const url = compile(API_PROVIDER_CHAT)({ id });
+  return useSWRMutations(url, (url, { arg }) => apiJsonPost(url, arg));
+};
+
+export const useProviderDelete = (payload) => {
+  const id = payload?.id || 0;
+  const url = compile(API_PROVIDER)({ id });
+  return useSWRMutations(url, (url, { arg }) => apiJsonDelete(url, arg));
+};