@truedat/ai 8.14.2 → 8.14.3

package/src/components/providers/EmbeddingModels.js

@@ -0,0 +1,336 @@
+import _ from "lodash/fp";
+import PropTypes from "prop-types";
+import { useState } from "react";
+import { useIntl } from "react-intl";
+import {
+  Button,
+  Checkbox,
+  Dropdown,
+  Form,
+  Header,
+  Label,
+  Message,
+  Table,
+} from "semantic-ui-react";
+import ConfirmModal from "@truedat/core/components/ConfirmModal";
+import {
+  useIndices,
+  useIndexCreate,
+  useIndexDisable,
+  useIndexEnable,
+} from "@truedat/ai/hooks/useIndices";
+import { serverErrors } from "../../serverErrors";
+import HelpIcon from "./HelpIcon";
+
+const purposes = ["suggestions", "rag"];
+const messagePrefix = "providers.embeddingModels";
+
+const purposeColors = { suggestions: "teal", rag: "violet" };
+const collectionPattern = /^[a-z][a-z0-9_]*$/;
+const collectionMaxLength = 60;
+const isValidCollection = (name) =>
+  name.length <= collectionMaxLength && collectionPattern.test(name);
+
+const columns = [
+  { key: "embedding", label: `${messagePrefix}.form.embedding` },
+  { key: "collection", label: `${messagePrefix}.form.collection` },
+  { key: "purpose", label: `${messagePrefix}.form.purpose` },
+  { key: "dims", label: `${messagePrefix}.form.dims` },
+  { key: "enabled", label: "providers.form.enabled" },
+];
+
+const firstError = (errors, key) => _.head(errors[key]);
+
+function AddEmbeddingModel({ provider, onCreated, onCancel }) {
+  const { formatMessage } = useIntl();
+  const { trigger: createIndex, isMutating } = useIndexCreate();
+  const [embedding, setEmbedding] = useState("");
+  const [purpose, setPurpose] = useState("suggestions");
+  const [collection, setCollection] = useState("");
+  const [dims, setDims] = useState("");
+  const [errors, setErrors] = useState({});
+  const clearErrors = (...keys) => setErrors(_.omit(keys));
+
+  const purposeOptions = purposes.map((value) => ({
+    key: value,
+    value,
+    text: formatMessage({ id: `${messagePrefix}.purpose.${value}` }),
+  }));
+
+  const dimsNumber = parseInt(dims, 10);
+  const index = {
+    embedding,
+    collection_name: collection,
+    index_type: purpose,
+    provider_id: provider.id,
+    ...(_.isNaN(dimsNumber) ? {} : { index_params: { dims: dimsNumber } }),
+  };
+
+  const onSave = async () => {
+    try {
+      await createIndex({ index });
+      onCreated();
+    } catch (error) {
+      setErrors(serverErrors(error));
+    }
+  };
+
+  const fieldLabel = (key) => (
+    <label>
+      {formatMessage({ id: `${messagePrefix}.form.${key}` })}
+      <HelpIcon
+        id={`${key}`}
+        content={formatMessage({ id: `${messagePrefix}.form.${key}.hint` })}
+      />
+    </label>
+  );
+
+  const handledKeys = ["embedding", "collection_name", "index_params"];
+  const otherErrors = _.flow(_.omit(handledKeys), _.values, _.flatten)(errors);
+
+  return (
+    <Form as="div">
+      <Form.Input
+        required
+        autoComplete="off"
+        label={fieldLabel("embedding")}
+        placeholder={formatMessage({ id: `${messagePrefix}.form.embedding` })}
+        value={embedding}
+        error={firstError(errors, "embedding")}
+        onChange={(_e, { value }) => {
+          setEmbedding(value);
+          // The dimensions check depends on which model it is
+          clearErrors("embedding", "index_params");
+        }}
+      />
+      <Form.Input
+        required
+        autoComplete="off"
+        label={fieldLabel("collection")}
+        placeholder={formatMessage({
+          id: `${messagePrefix}.form.collection.placeholder`,
+        })}
+        value={collection}
+        error={firstError(errors, "collection_name")}
+        onChange={(_e, { value }) => {
+          setCollection(value);
+          clearErrors("collection_name");
+        }}
+      />
+      <Form.Field required>
+        {fieldLabel("purpose")}
+        <Dropdown
+          selection
+          options={purposeOptions}
+          value={purpose}
+          onChange={(_e, { value }) => {
+            setPurpose(value);
+            clearErrors("index_type");
+          }}
+        />
+      </Form.Field>
+      <Form.Input
+        type="number"
+        min={1}
+        autoComplete="off"
+        label={fieldLabel("dims")}
+        placeholder={formatMessage({ id: `${messagePrefix}.form.dims` })}
+        value={dims}
+        error={firstError(errors, "index_params")}
+        onChange={(_e, { value }) => {
+          setDims(value);
+          clearErrors("index_params");
+        }}
+      />
+      {_.isEmpty(otherErrors) ? null : (
+        <Message
+          negative
+          list={otherErrors}
+          onDismiss={() => setErrors(_.pick(handledKeys))}
+        />
+      )}
+      <Button
+        primary
+        loading={isMutating}
+        disabled={
+          _.isEmpty(embedding) || !isValidCollection(collection) || isMutating
+        }
+        onClick={onSave}
+        content={formatMessage({ id: "actions.save" })}
+      />
+      <Button
+        onClick={onCancel}
+        content={formatMessage({ id: "actions.cancel" })}
+      />
+    </Form>
+  );
+}
+
+AddEmbeddingModel.propTypes = {
+  provider: PropTypes.object.isRequired,
+  onCreated: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+};
+
+export default function EmbeddingModels({ provider }) {
+  const { formatMessage } = useIntl();
+  const { data, mutate } = useIndices();
+  const { trigger: enableIndex } = useIndexEnable();
+  const { trigger: disableIndex } = useIndexDisable();
+  const [adding, setAdding] = useState(false);
+  const [notices, setNotices] = useState([]);
+  const [disabling, setDisabling] = useState(null);
+  const [toggleErrors, setToggleErrors] = useState([]);
+
+  const unsupported = provider?.type === "anthropic";
+  const models = _.filter((i) => i.provider === provider?.id)(data);
+
+  const onEnable = async (model) => {
+    setToggleErrors([]);
+    try {
+      await enableIndex({ id: model.id });
+      setNotices((current) => [
+        ..._.reject({ id: model.id })(current),
+        { id: model.id, purpose: model.index_type },
+      ]);
+    } catch (error) {
+      setToggleErrors(_.flatten(_.values(serverErrors(error))));
+    }
+    mutate();
+  };
+  const onDisable = async (model) => {
+    setToggleErrors([]);
+    try {
+      await disableIndex({ id: model.id });
+      setNotices(_.reject({ id: model.id }));
+    } catch (error) {
+      setToggleErrors(_.flatten(_.values(serverErrors(error))));
+    }
+    mutate();
+  };
+  return (
+    <>
+      <Header as="h4" dividing>
+        {formatMessage({ id: `${messagePrefix}.title` })}
+        <HelpIcon
+          id="locked"
+          content={formatMessage({ id: `${messagePrefix}.locked` })}
+        />
+      </Header>
+      {unsupported ? (
+        <Message info>
+          {formatMessage({ id: `${messagePrefix}.unsupported` })}
+        </Message>
+      ) : (
+        <>
+          {notices.map(({ id, purpose }) => (
+            <Message
+              key={id}
+              warning
+              onDismiss={() => setNotices(_.reject({ id }))}
+              content={formatMessage({
+                id: `${messagePrefix}.backfill.${purpose}`,
+              })}
+            />
+          ))}
+          {_.isEmpty(toggleErrors) ? null : (
+            <Message
+              negative
+              list={toggleErrors}
+              onDismiss={() => setToggleErrors([])}
+            />
+          )}
+          {_.isEmpty(models) ? (
+            <p>{formatMessage({ id: `${messagePrefix}.empty` })}</p>
+          ) : (
+            <>
+              <Table basic="very" compact>
+                <Table.Header>
+                  <Table.Row>
+                    {columns.map(({ key, label }) => (
+                      <Table.HeaderCell
+                        key={key}
+                        textAlign={key === "enabled" ? "right" : undefined}
+                      >
+                        {formatMessage({ id: label })}
+                      </Table.HeaderCell>
+                    ))}
+                  </Table.Row>
+                </Table.Header>
+                <Table.Body>
+                  {models.map((model) => (
+                    <Table.Row key={model.id}>
+                      <Table.Cell>{model.embedding}</Table.Cell>
+                      <Table.Cell>{model.collection_name}</Table.Cell>
+                      <Table.Cell>
+                        <Label
+                          size="small"
+                          color={purposeColors[model.index_type]}
+                        >
+                          {formatMessage({
+                            id: `${messagePrefix}.purpose.${model.index_type}`,
+                          })}
+                        </Label>
+                      </Table.Cell>
+                      <Table.Cell>{model.index_params?.dims}</Table.Cell>
+                      <Table.Cell textAlign="right">
+                        <Checkbox
+                          toggle
+                          checked={!!model.enabled_at}
+                          aria-label={formatMessage({
+                            id: `${messagePrefix}.${
+                              model.enabled_at ? "disable" : "enable"
+                            }`,
+                          })}
+                          onChange={() =>
+                            model.enabled_at
+                              ? setDisabling(model)
+                              : onEnable(model)
+                          }
+                        />
+                      </Table.Cell>
+                    </Table.Row>
+                  ))}
+                </Table.Body>
+              </Table>
+            </>
+          )}
+          <ConfirmModal
+            open={!!disabling}
+            header={formatMessage({
+              id: `${messagePrefix}.disable.confirm.header`,
+            })}
+            content={formatMessage({
+              id: `${messagePrefix}.disable.confirm.content`,
+            })}
+            onClose={() => setDisabling(null)}
+            onConfirm={() => {
+              const model = disabling;
+              setDisabling(null);
+              onDisable(model);
+            }}
+          />
+          {adding ? (
+            <AddEmbeddingModel
+              provider={provider}
+              onCancel={() => setAdding(false)}
+              onCreated={() => {
+                setAdding(false);
+                mutate();
+              }}
+            />
+          ) : (
+            <Button
+              onClick={() => setAdding(true)}
+              content={formatMessage({ id: `${messagePrefix}.add` })}
+            />
+          )}
+        </>
+      )}
+    </>
+  );
+}
+
+EmbeddingModels.propTypes = {
+  provider: PropTypes.object,
+};

package/src/components/providers/HelpIcon.js

@@ -0,0 +1,38 @@
+import PropTypes from "prop-types";
+import { Icon, Popup } from "semantic-ui-react";
+
+const triggerStyle = {
+  display: "inline-block",
+  marginLeft: "0.4em",
+  fontSize: "0.85rem",
+  fontWeight: "normal",
+  lineHeight: 1,
+  verticalAlign: "middle",
+  cursor: "help",
+};
+
+export default function HelpIcon({ id, content }) {
+  return (
+    <Popup
+      trigger={
+        <span style={triggerStyle}>
+          <Icon
+            className="field-label-popup"
+            name="question circle outline"
+            color="grey"
+            fitted
+            data-testid={`help-${id}`}
+          />
+        </span>
+      }
+      content={content}
+      on="hover"
+      hideOnScroll
+    />
+  );
+}
+
+HelpIcon.propTypes = {
+  id: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
+};

package/src/components/providers/ProviderEditor.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import { Fragment, useEffect } from "react";
+import { Fragment, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import {
@@ -9,10 +9,18 @@ import {
   Header,
   Form,
   Dropdown,
+  Message,
 } from "semantic-ui-react";
 import { FormProvider, useForm, Controller } from "react-hook-form";
 import ConfirmModal from "@truedat/core/components/ConfirmModal";
-import { useAgentTypeOptions, useProviderTypeOptions } from "../constants";
+import {
+  useProviderEnable,
+  useProviderDisable,
+} from "@truedat/ai/hooks/useProviders";
+import { serverErrors } from "../../serverErrors";
+import { useProviderTypeOptions } from "../constants";
+import EmbeddingModels from "./EmbeddingModels";
+import HelpIcon from "./HelpIcon";
 import {
   Openai,
   AzureOpenai,
@@ -38,21 +46,13 @@ export default function ProviderEditor({
   onCancel,
   onDelete,
   isSubmitting,
+  deleteError,
+  onDismissDeleteError,
   setDirty,
+  onRefresh,
 }) {
   const { formatMessage } = useIntl();
   const typeOptions = useProviderTypeOptions();
-  const allAgentOptions = useAgentTypeOptions();
-
-  const usedAgents = _.flow(
-    _.filter((p) => p.id !== selectedProvider?.id),
-    _.map(_.prop("agents")),
-    _.filter(Boolean),
-  )(providers);
-
-  const availableAgentOptions = _.filter(
-    (o) => !_.includes(o.value)(usedAgents),
-  )(allAgentOptions);
 
   const form = useForm({
     mode: "onTouched",
@@ -60,6 +60,38 @@ export default function ProviderEditor({
   });
   const { control, handleSubmit, watch, formState } = form;
   const { isDirty, isValid } = formState;
+  const [enableOnCreate, setEnableOnCreate] = useState(_.isEmpty(providers));
+  const submit = (values) =>
+    onSubmit(
+      _.omit(["is_default", "agents", "enabled", "enabled_at"], values),
+      { enable: enableOnCreate },
+    );
+
+  const { trigger: enableProvider, isMutating: isEnabling } =
+    useProviderEnable();
+  const { trigger: disableProvider, isMutating: isDisabling } =
+    useProviderDisable();
+  const [confirmingDisable, setConfirmingDisable] = useState(false);
+  const [enabledErrors, setEnabledErrors] = useState([]);
+  const [isRefreshing, setRefreshing] = useState(false);
+
+  const savedProvider = _.find({ id: selectedProvider?.id })(providers);
+  const isEnabled = !!savedProvider?.enabled_at;
+
+  const changeEnabled = async (trigger) => {
+    setEnabledErrors([]);
+    setRefreshing(true);
+    try {
+      await trigger({ id: selectedProvider.id });
+    } catch (error) {
+      setEnabledErrors(_.flatten(_.values(serverErrors(error))));
+    }
+    try {
+      await onRefresh?.();
+    } finally {
+      setRefreshing(false);
+    }
+  };
 
   useEffect(() => {
     setDirty(isDirty);
@@ -75,6 +107,16 @@ export default function ProviderEditor({
 
   const type = watch("type");
 
+  const enabledLabel = (
+    <label>
+      {formatMessage({ id: "providers.form.enabled" })}
+      <HelpIcon
+        id="provider-enabled"
+        content={formatMessage({ id: "providers.form.enabled.hint" })}
+      />
+    </label>
+  );
+
   return (
     <Fragment>
       <FormProvider {...form}>
@@ -145,32 +187,67 @@ export default function ProviderEditor({
               </Form.Field>
             )}
           />
-          <Controller
-            control={control}
-            name="agents"
-            render={({ field: { onBlur, onChange, value } }) => (
-              <Form.Field>
-                <label>{formatMessage({ id: "providers.form.agents" })}</label>
-                <Dropdown
-                  clearable
-                  selection
-                  disabled={availableAgentOptions.length === 0 && !value}
-                  onBlur={onBlur}
-                  options={availableAgentOptions}
-                  onChange={(_e, { value: v }) => onChange(v === "" ? null : v)}
-                  value={value ?? ""}
-                  placeholder={formatMessage({
-                    id: "providers.form.agents.placeholder",
-                  })}
+          {selectedProvider.id ? null : (
+            <Form.Field>
+              <Form.Checkbox
+                toggle
+                label={enabledLabel}
+                checked={enableOnCreate}
+                onChange={() => setEnableOnCreate(!enableOnCreate)}
+              />
+            </Form.Field>
+          )}
+          {selectedProvider.id ? (
+            <Form.Field>
+              <Form.Checkbox
+                toggle
+                label={enabledLabel}
+                checked={isEnabled}
+                disabled={isEnabling || isDisabling || isRefreshing}
+                onChange={() =>
+                  isEnabled
+                    ? setConfirmingDisable(true)
+                    : changeEnabled(enableProvider)
+                }
+              />
+              {_.isEmpty(enabledErrors) ? null : (
+                <Message
+                  negative
+                  list={enabledErrors}
+                  onDismiss={() => setEnabledErrors([])}
                 />
-              </Form.Field>
-            )}
-          />
+              )}
+              <ConfirmModal
+                open={confirmingDisable}
+                header={formatMessage({
+                  id: "providers.enabled.disable.confirm.header",
+                })}
+                content={formatMessage({
+                  id: "providers.enabled.disable.confirm.content",
+                })}
+                onClose={() => setConfirmingDisable(false)}
+                onConfirm={() => {
+                  setConfirmingDisable(false);
+                  changeEnabled(disableProvider);
+                }}
+              />
+            </Form.Field>
+          ) : null}
           {providerPropertiesComponents[type]}
+          {selectedProvider.id ? (
+            <EmbeddingModels provider={selectedProvider} />
+          ) : null}
           <Divider hidden />
+          {deleteError ? (
+            <Message
+              negative
+              list={deleteError}
+              onDismiss={onDismissDeleteError}
+            />
+          ) : null}
           <Container textAlign="right">
             <Button
-              onClick={handleSubmit(onSubmit)}
+              onClick={handleSubmit(submit)}
               primary
               loading={isSubmitting}
               disabled={!isValid || !isDirty}
@@ -235,5 +312,8 @@ ProviderEditor.propTypes = {
   onCancel: PropTypes.func,
   onDelete: PropTypes.func,
   isSubmitting: PropTypes.bool,
+  deleteError: PropTypes.array,
+  onDismissDeleteError: PropTypes.func,
   setDirty: PropTypes.func,
+  onRefresh: PropTypes.func,
 };