@truedat/ai 8.13.2 → 8.13.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/ai",
-  "version": "8.13.2",
+  "version": "8.13.4",
   "description": "Truedat Web Artificial Intelligence package",
   "sideEffects": false,
   "module": "src/index.js",
@@ -53,7 +53,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.13.2",
+    "@truedat/test": "8.13.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -83,5 +83,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "dbd1a5a5b43e1ce897fc3ac6dcb59047cac1110f"
+  "gitHead": "4ec142f1c856aa669b232b12250c800a19ab9ace"
 }

package/src/components/constants.js

@@ -9,6 +9,7 @@ export const providerTypes = [
   "bedrock_claude",
   "gemini",
   "anthropic",
+  "llm_gateway",
 ];
 
 export const agentTypes = ["fast", "high", "thinking"];

package/src/components/providers/ProviderEditor.js

@@ -19,6 +19,7 @@ import {
   BedrockClaude,
   Gemini,
   Anthropic,
+  LlmGateway,
 } from "./providerProperties";
 
 const providerPropertiesComponents = {
@@ -27,6 +28,7 @@ const providerPropertiesComponents = {
   bedrock_claude: <BedrockClaude />,
   gemini: <Gemini />,
   anthropic: <Anthropic />,
+  llm_gateway: <LlmGateway />,
 };
 
 export default function ProviderEditor({

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

@@ -170,3 +170,195 @@ describe("<ProviderEditor />", () => {
     });
   });
 });
+
+describe("<ProviderEditor /> LLM gateway", () => {
+  const gatewayRenderOpts = {
+    ...renderOpts,
+    messages: {
+      en: {
+        "providers.type.llm_gateway": "Company LLM gateway",
+        "form.validation.required": "{prop} is required",
+      },
+    },
+  };
+  const gatewayProvider = {
+    id: 2,
+    name: "Company models",
+    type: "llm_gateway",
+    properties: {
+      base_url: "https://llm.example.com/v1",
+      model: "meta-llama/llama-3-3-70b-instruct",
+      temperature: "0.2",
+      top_p: "0.9",
+    },
+  };
+  const propertyLabels = ["baseUrl", "model", "temperature", "topP", "apiKey"];
+  const getProperty = (rendered, label) =>
+    rendered.getByPlaceholderText(`providerProperties.form.${label}`);
+  const renderGateway = async (selectedProvider = gatewayProvider) => {
+    const onSubmit = jest.fn();
+    const rendered = render(
+      <ProviderEditor {...props} {...{ selectedProvider, onSubmit }} />,
+      gatewayRenderOpts,
+    );
+    await waitForLoad(rendered);
+    return { ...rendered, onSubmit };
+  };
+
+  beforeEach(() => jest.useRealTimers());
+
+  it("renders the saved LLM gateway properties in order with a password input", async () => {
+    const rendered = await renderGateway();
+    const inputs = rendered.container.querySelectorAll(
+      'input[placeholder^="providerProperties.form."]',
+    );
+
+    expect(Array.from(inputs, (input) => input.placeholder)).toEqual(
+      propertyLabels.map((label) => `providerProperties.form.${label}`),
+    );
+    expect(
+      Array.from(
+        inputs,
+        (input) => input.closest(".field").querySelector("label").textContent,
+      ),
+    ).toEqual(
+      propertyLabels.map((label) => `providerProperties.form.${label}`),
+    );
+    expect(getProperty(rendered, "baseUrl")).toHaveValue(
+      gatewayProvider.properties.base_url,
+    );
+    expect(getProperty(rendered, "model")).toHaveValue(
+      gatewayProvider.properties.model,
+    );
+    expect(getProperty(rendered, "temperature")).toHaveValue("0.2");
+    expect(getProperty(rendered, "topP")).toHaveValue("0.9");
+    expect(getProperty(rendered, "apiKey")).toHaveAttribute("type", "password");
+    expect(getProperty(rendered, "apiKey")).toHaveValue("");
+    expect(rendered.container).toMatchSnapshot();
+    expect(getProperty(rendered, "baseUrl").closest(".field")).toHaveClass(
+      "required",
+    );
+    expect(getProperty(rendered, "model").closest(".field")).toHaveClass(
+      "required",
+    );
+    for (const label of ["temperature", "topP", "apiKey"]) {
+      expect(getProperty(rendered, label).closest(".field")).not.toHaveClass(
+        "required",
+      );
+    }
+  });
+
+  it("offers the translated LLM gateway option and submits a complete new provider", async () => {
+    const rendered = await renderGateway({
+      name: "",
+      type: "",
+      properties: {},
+    });
+    const user = userEvent.setup({ delay: null });
+
+    await user.type(
+      rendered.getByPlaceholderText("providers.form.name"),
+      "Company models",
+    );
+    await user.click(rendered.getAllByRole("listbox")[0]);
+    await user.click(
+      rendered.getByRole("option", { name: "Company LLM gateway" }),
+    );
+
+    expect(rendered.container).toMatchSnapshot(
+      "new provider after selecting LLM gateway",
+    );
+
+    const values = [
+      "https://llm.example.com/v1",
+      "meta-llama/llama-3-3-70b-instruct",
+      "0.2",
+      "0.9",
+      "test-token",
+    ];
+    for (const [index, label] of propertyLabels.entries()) {
+      await user.type(getProperty(rendered, label), values[index]);
+    }
+    await user.tab();
+    const save = rendered.getByRole("button", { name: /save/i });
+    await waitFor(() => expect(save).toBeEnabled());
+    await user.click(save);
+
+    await waitFor(() => expect(rendered.onSubmit).toHaveBeenCalledTimes(1));
+    expect(rendered.onSubmit.mock.calls[0][0]).toEqual({
+      name: "Company models",
+      type: "llm_gateway",
+      agents: undefined,
+      properties: {
+        base_url: values[0],
+        model: values[1],
+        temperature: values[2],
+        top_p: values[3],
+        api_key: values[4],
+      },
+    });
+  });
+
+  it.each(["baseUrl", "model"])(
+    "shows the required message and prevents submission without %s",
+    async (label) => {
+      const rendered = await renderGateway();
+      const user = userEvent.setup({ delay: null });
+      const input = getProperty(rendered, label);
+
+      await user.clear(input);
+      await user.tab();
+
+      expect(
+        await rendered.findByText(
+          `providerProperties.form.${label} is required`,
+        ),
+      ).toBeVisible();
+      const save = rendered.getByRole("button", { name: /save/i });
+      expect(save).toBeDisabled();
+      await user.click(save);
+      expect(rendered.onSubmit).not.toHaveBeenCalled();
+
+      await user.type(
+        input,
+        label === "baseUrl" ? "https://llm.example.com" : "gpt-5.1",
+      );
+      await user.tab();
+      await waitFor(() => expect(save).toBeEnabled());
+      expect(
+        rendered.queryByText(`providerProperties.form.${label} is required`),
+      ).not.toBeInTheDocument();
+    },
+  );
+
+  it("allows saving with only the required properties and keeps the URL and model unchanged", async () => {
+    const rendered = await renderGateway({
+      ...gatewayProvider,
+      properties: {
+        base_url: "https://llm.example.com",
+        model: "gpt-5.1",
+      },
+    });
+    const user = userEvent.setup({ delay: null });
+
+    expect(getProperty(rendered, "temperature")).toHaveValue("");
+    expect(getProperty(rendered, "topP")).toHaveValue("");
+    expect(getProperty(rendered, "apiKey")).toHaveValue("");
+    await user.type(
+      rendered.getByPlaceholderText("providers.form.name"),
+      " updated",
+    );
+    const save = rendered.getByRole("button", { name: /save/i });
+    await waitFor(() => expect(save).toBeEnabled());
+    await user.click(save);
+
+    await waitFor(() => expect(rendered.onSubmit).toHaveBeenCalledTimes(1));
+    expect(rendered.onSubmit.mock.calls[0][0].properties).toEqual({
+      base_url: "https://llm.example.com",
+      model: "gpt-5.1",
+      temperature: undefined,
+      top_p: undefined,
+      api_key: undefined,
+    });
+  });
+});

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

@@ -1,5 +1,647 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<ProviderEditor /> LLM gateway offers the translated LLM gateway option and submits a complete new provider: new provider after selecting LLM gateway 1`] = `
+<div>
+  <form
+    class="ui form"
+  >
+    <h3
+      class="ui dividing header"
+    >
+      Company models
+    </h3>
+    <div
+      class="required field"
+    >
+      <label>
+        providers.form.name
+      </label>
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="providers.form.name"
+          required=""
+          type="text"
+          value="Company models"
+        />
+      </div>
+    </div>
+    <div
+      class="required field"
+    >
+      <label>
+        providers.form.type
+      </label>
+      <div
+        aria-expanded="false"
+        class="ui selection dropdown"
+        role="listbox"
+        tabindex="0"
+      >
+        <div
+          aria-atomic="true"
+          aria-live="polite"
+          class="divider text"
+          role="alert"
+        >
+          Company LLM gateway
+        </div>
+        <i
+          aria-hidden="true"
+          class="dropdown icon"
+        />
+        <div
+          class="menu transition"
+        >
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.type.openai
+            </span>
+          </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.type.azure_openai
+            </span>
+          </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.type.bedrock_claude
+            </span>
+          </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              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
+            aria-checked="true"
+            aria-selected="true"
+            class="active selected item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              Company LLM gateway
+            </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>
+    <div
+      class="required field"
+    >
+      <label>
+        providerProperties.form.baseUrl
+      </label>
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="providerProperties.form.baseUrl"
+          required=""
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+    <div
+      class="required field"
+    >
+      <label>
+        providerProperties.form.model
+      </label>
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="providerProperties.form.model"
+          required=""
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <label>
+        providerProperties.form.temperature
+      </label>
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="providerProperties.form.temperature"
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <label>
+        providerProperties.form.topP
+      </label>
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="providerProperties.form.topP"
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <label>
+        providerProperties.form.apiKey
+      </label>
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="providerProperties.form.apiKey"
+          type="password"
+          value=""
+        />
+      </div>
+    </div>
+    <div
+      class="ui hidden divider"
+    />
+    <div
+      class="ui right aligned container"
+    >
+      <button
+        class="ui primary disabled button"
+        disabled=""
+        tabindex="-1"
+      >
+        actions.save
+      </button>
+      <button
+        class="ui button"
+      >
+        actions.cancel
+      </button>
+      <button
+        class="ui red button"
+      >
+        actions.delete
+      </button>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`<ProviderEditor /> LLM gateway renders the saved LLM gateway properties in order with a password input 1`] = `
+<div>
+  <form
+    class="ui form"
+  >
+    <h3
+      class="ui dividing header"
+    >
+      Company models
+    </h3>
+    <div
+      class="required field"
+    >
+      <label>
+        providers.form.name
+      </label>
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="providers.form.name"
+          required=""
+          type="text"
+          value="Company models"
+        />
+      </div>
+    </div>
+    <div
+      class="required field"
+    >
+      <label>
+        providers.form.type
+      </label>
+      <div
+        aria-expanded="false"
+        class="ui selection dropdown"
+        role="listbox"
+        tabindex="0"
+      >
+        <div
+          aria-atomic="true"
+          aria-live="polite"
+          class="divider text"
+          role="alert"
+        >
+          Company LLM gateway
+        </div>
+        <i
+          aria-hidden="true"
+          class="dropdown icon"
+        />
+        <div
+          class="menu transition"
+        >
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.type.openai
+            </span>
+          </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.type.azure_openai
+            </span>
+          </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.type.bedrock_claude
+            </span>
+          </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              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
+            aria-checked="true"
+            aria-selected="true"
+            class="active selected item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              Company LLM gateway
+            </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>
+    <div
+      class="required field"
+    >
+      <label>
+        providerProperties.form.baseUrl
+      </label>
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="providerProperties.form.baseUrl"
+          required=""
+          type="text"
+          value="https://llm.example.com/v1"
+        />
+      </div>
+    </div>
+    <div
+      class="required field"
+    >
+      <label>
+        providerProperties.form.model
+      </label>
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="providerProperties.form.model"
+          required=""
+          type="text"
+          value="meta-llama/llama-3-3-70b-instruct"
+        />
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <label>
+        providerProperties.form.temperature
+      </label>
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="providerProperties.form.temperature"
+          type="text"
+          value="0.2"
+        />
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <label>
+        providerProperties.form.topP
+      </label>
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="providerProperties.form.topP"
+          type="text"
+          value="0.9"
+        />
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <label>
+        providerProperties.form.apiKey
+      </label>
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="providerProperties.form.apiKey"
+          type="password"
+          value=""
+        />
+      </div>
+    </div>
+    <div
+      class="ui hidden divider"
+    />
+    <div
+      class="ui right aligned container"
+    >
+      <button
+        class="ui primary disabled button"
+        disabled=""
+        tabindex="-1"
+      >
+        actions.save
+      </button>
+      <button
+        class="ui button"
+      >
+        actions.cancel
+      </button>
+      <button
+        class="ui red button"
+      >
+        actions.delete
+      </button>
+    </div>
+  </form>
+</div>
+`;
+
 exports[`<ProviderEditor /> matches snapshot without onDelete 1`] = `
 <div>
   <form
@@ -120,6 +762,19 @@ exports[`<ProviderEditor /> matches snapshot without onDelete 1`] = `
               providers.type.anthropic
             </span>
           </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.type.llm_gateway
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -390,6 +1045,19 @@ exports[`<ProviderEditor /> matches the latest snapshot 1`] = `
               providers.type.anthropic
             </span>
           </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.type.llm_gateway
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -663,6 +1331,19 @@ exports[`<ProviderEditor /> test cancel button with confirm 1`] = `
               providers.type.anthropic
             </span>
           </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.type.llm_gateway
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -934,6 +1615,19 @@ exports[`<ProviderEditor /> test delete button 1`] = `
               providers.type.anthropic
             </span>
           </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              providers.type.llm_gateway
+            </span>
+          </div>
         </div>
       </div>
     </div>

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

@@ -0,0 +1,146 @@
+import { useIntl } from "react-intl";
+import { Controller, useFormContext } from "react-hook-form";
+import { Form } from "semantic-ui-react";
+
+export default function LlmGateway() {
+  const { formatMessage } = useIntl();
+  const { control } = useFormContext();
+
+  return (
+    <>
+      <Controller
+        control={control}
+        name="properties.base_url"
+        rules={{
+          required: formatMessage(
+            { id: "form.validation.required" },
+            {
+              prop: formatMessage({
+                id: "providerProperties.form.baseUrl",
+              }),
+            },
+          ),
+        }}
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <Form.Input
+            autoComplete="off"
+            placeholder={formatMessage({
+              id: "providerProperties.form.baseUrl",
+            })}
+            error={error?.message}
+            label={formatMessage({
+              id: "providerProperties.form.baseUrl",
+            })}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            value={value ?? ""}
+            required
+          />
+        )}
+      />
+      <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

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