@truedat/ai 8.4.8 → 8.5.0

package/src/components/providers/ProviderEditor.js

@@ -12,12 +12,13 @@ import {
 } from "semantic-ui-react";
 import { FormProvider, useForm, Controller } from "react-hook-form";
 import { ConfirmModal } from "@truedat/core/components";
-import { useProviderTypeOptions } from "../constants";
+import { useAgentTypeOptions, useProviderTypeOptions } from "../constants";
 import {
   Openai,
   AzureOpenai,
   BedrockClaude,
   Gemini,
+  Anthropic,
 } from "./providerProperties";
 
 const providerPropertiesComponents = {
@@ -25,10 +26,12 @@ const providerPropertiesComponents = {
   azure_openai: <AzureOpenai />,
   bedrock_claude: <BedrockClaude />,
   gemini: <Gemini />,
+  anthropic: <Anthropic />,
 };
 
 export default function ProviderEditor({
   selectedProvider,
+  providers,
   onSubmit,
   onCancel,
   onDelete,
@@ -37,6 +40,17 @@ export default function ProviderEditor({
 }) {
   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",
@@ -129,6 +143,31 @@ 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",
+                  })}
+                />
+              </Form.Field>
+            )}
+          />
           {providerPropertiesComponents[type]}
           <Divider hidden />
           <Container textAlign="right">
@@ -193,6 +232,7 @@ export default function ProviderEditor({
 
 ProviderEditor.propTypes = {
   selectedProvider: PropTypes.object,
+  providers: PropTypes.array,
   onSubmit: PropTypes.func,
   onCancel: PropTypes.func,
   onDelete: PropTypes.func,

package/src/components/providers/Providers.js

@@ -7,6 +7,7 @@ import {
   GridColumn,
   Header,
   Icon,
+  Label,
   List,
   Segment,
 } from "semantic-ui-react";
@@ -19,6 +20,12 @@ import {
 } from "@truedat/ai/hooks/useProviders";
 import ProviderEditor from "./ProviderEditor";
 
+const agentColors = {
+  fast: "yellow",
+  high: "blue",
+  thinking: "purple",
+};
+
 const NEW_PROVIDER = {
   name: "",
   type: "openai",
@@ -99,6 +106,14 @@ export default function Providers() {
                         formatMessage({
                           id: "providers.form.name.new",
                         })}
+                      {provider.agents && (
+                        <Label color={agentColors[provider.agents]} size="small" style={{ marginLeft: "0.5em" }}>
+                          {formatMessage({
+                            id: `providers.agent.${provider.agents}`,
+                            defaultMessage: provider.agents,
+                          })}
+                        </Label>
+                      )}
                     </List.Header>
                   </List.Content>
                 </List.Item>

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

@@ -107,6 +107,89 @@ exports[`<ProviderEditor /> matches snapshot without onDelete 1`] = `
               providers.type.gemini
             </span>
           </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.type.anthropic
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <label>
+        providers.form.agents
+      </label>
+      <div
+        aria-disabled="false"
+        aria-expanded="false"
+        class="ui selection dropdown"
+        role="listbox"
+        tabindex="0"
+      >
+        <div
+          aria-atomic="true"
+          aria-live="polite"
+          class="divider default text"
+          role="alert"
+        >
+          providers.form.agents.placeholder
+        </div>
+        <i
+          aria-hidden="true"
+          class="dropdown icon"
+        />
+        <div
+          class="menu transition"
+        >
+          <div
+            aria-checked="false"
+            aria-selected="true"
+            class="selected item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.agent.fast
+            </span>
+          </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.agent.high
+            </span>
+          </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.agent.thinking
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -294,6 +377,89 @@ exports[`<ProviderEditor /> matches the latest snapshot 1`] = `
               providers.type.gemini
             </span>
           </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.type.anthropic
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <label>
+        providers.form.agents
+      </label>
+      <div
+        aria-disabled="false"
+        aria-expanded="false"
+        class="ui selection dropdown"
+        role="listbox"
+        tabindex="0"
+      >
+        <div
+          aria-atomic="true"
+          aria-live="polite"
+          class="divider default text"
+          role="alert"
+        >
+          providers.form.agents.placeholder
+        </div>
+        <i
+          aria-hidden="true"
+          class="dropdown icon"
+        />
+        <div
+          class="menu transition"
+        >
+          <div
+            aria-checked="false"
+            aria-selected="true"
+            class="selected item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.agent.fast
+            </span>
+          </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.agent.high
+            </span>
+          </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.agent.thinking
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -484,6 +650,89 @@ exports[`<ProviderEditor /> test cancel button with confirm 1`] = `
               providers.type.gemini
             </span>
           </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.type.anthropic
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <label>
+        providers.form.agents
+      </label>
+      <div
+        aria-disabled="false"
+        aria-expanded="false"
+        class="ui selection dropdown"
+        role="listbox"
+        tabindex="0"
+      >
+        <div
+          aria-atomic="true"
+          aria-live="polite"
+          class="divider default text"
+          role="alert"
+        >
+          providers.form.agents.placeholder
+        </div>
+        <i
+          aria-hidden="true"
+          class="dropdown icon"
+        />
+        <div
+          class="menu transition"
+        >
+          <div
+            aria-checked="false"
+            aria-selected="true"
+            class="selected item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.agent.fast
+            </span>
+          </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.agent.high
+            </span>
+          </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.agent.thinking
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -672,6 +921,89 @@ exports[`<ProviderEditor /> test delete button 1`] = `
               providers.type.gemini
             </span>
           </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.type.anthropic
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <label>
+        providers.form.agents
+      </label>
+      <div
+        aria-disabled="false"
+        aria-expanded="false"
+        class="ui selection dropdown"
+        role="listbox"
+        tabindex="0"
+      >
+        <div
+          aria-atomic="true"
+          aria-live="polite"
+          class="divider default text"
+          role="alert"
+        >
+          providers.form.agents.placeholder
+        </div>
+        <i
+          aria-hidden="true"
+          class="dropdown icon"
+        />
+        <div
+          class="menu transition"
+        >
+          <div
+            aria-checked="false"
+            aria-selected="true"
+            class="selected item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.agent.fast
+            </span>
+          </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.agent.high
+            </span>
+          </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.agent.thinking
+            </span>
+          </div>
         </div>
       </div>
     </div>

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

@@ -0,0 +1,113 @@
+import { useIntl } from "react-intl";
+import { Controller, useFormContext } from "react-hook-form";
+import { Form } from "semantic-ui-react";
+
+export default function Anthropic() {
+  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.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

@@ -2,5 +2,6 @@ import Openai from "./Openai";
 import AzureOpenai from "./AzureOpenai";
 import BedrockClaude from "./BedrockClaude";
 import Gemini from "./Gemini";
+import Anthropic from "./Anthropic";
 
-export { Openai, AzureOpenai, BedrockClaude, Gemini };
+export { Openai, AzureOpenai, BedrockClaude, Gemini, Anthropic };

package/src/components/structureSuggestionColumns.js

@@ -0,0 +1,44 @@
+import _ from "lodash/fp";
+import { FormattedMessage } from "react-intl";
+import { Popup } from "semantic-ui-react";
+
+const similarityColumnDecorator = (similarity) => {
+  if (similarity == null || Number.isNaN(Number(similarity))) {
+    return <span>—</span>;
+  }
+  const n = Number(similarity);
+  return (
+    <Popup
+      content={<FormattedMessage id="suggestions.similarity.cosine.popup" />}
+      trigger={<span>{n.toFixed(3)}</span>}
+    />
+  );
+};
+
+const reasonColumnDecorator = (reason) => {
+  if (reason == null || reason === "") {
+    return <span>—</span>;
+  }
+  return (
+    <span
+      style={{ whiteSpace: "normal", wordBreak: "break-word" }}
+      title={String(reason)}
+    >
+      {String(reason)}
+    </span>
+  );
+};
+
+export const similarityColumnDefinition = {
+  name: "similarity",
+  fieldSelector: _.prop("similarity"),
+  fieldDecorator: similarityColumnDecorator,
+  width: 1,
+};
+
+export const reasonColumnDefinition = {
+  name: "reason",
+  fieldSelector: _.prop("reason"),
+  fieldDecorator: reasonColumnDecorator,
+  width: 3,
+};

package/src/hooks/useAgentLayerRun.js

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