node.html

<script type="text/javascript">
  RED.nodes.registerType("OpenAI API", {
    category: "AI",
    color: "#B8B1FB",
    defaults: {
      name: { value: "" },
      property: { value: "payload", required: true },
      propertyType: { value: "msg" },
      service: { value: "", type: "Service Host", required: true },
      method: { value: "", required: true },
    },
    inputs: 1,
    outputs: 1,
    icon: "icon.png",
    label: function () {
      return this.name || this.method || "OpenAI API";
    },
    labelStyle: function () {
      return this.name ? "node_label_italic" : "";
    },
    oneditprepare: function () {
      var selectedMethod = $("#node-input-method option:selected");
      if (!selectedMethod.val()) {
        var methods = $("#node-input-method").children();
        var firstMethod = methods.first();
        $("#node-input-method").val(firstMethod.val());
      };

      // set the default property type value to "payload"
      if (this.property === undefined) {
        $("#node-input-property").val("payload");
      }

      $("#node-input-property").typedInput({
        default: "msg",
        value: "payload",
        types: ["msg", "flow", "global"],
        typeField: "#node-input-propertyType"
      })
    }
  });
</script>

<script type="text/html" data-template-name="OpenAI API">
  <div class="form-row">
    <label for="node-input-name"
      ><i class="fa fa-tag"></i>
      <span data-i18n="node-red:common.label.name"></span
    ></label>
    <input
      type="text"
      id="node-input-name"
      data-i18n="[placeholder]node-red:common.label.name"
    />
  </div>
  <hr />

  <div class="form-row">
    <label for="node-input-service"
      ><i class="fa fa-cloud"></i>
      <span data-i18n="OpenaiApi.label.serviceHost"></span
    ></label>
    <input type="text" id="node-input-service" />
  </div>

  <div class="form-row">
    <label for="node-input-property"
      ><i class="fa fa-ellipsis-h"></i>
      <span data-i18n="OpenaiApi.label.property"></span
    ></label>
    <input type="text" id="node-input-property">
    <input type="hidden" id="node-input-propertyType">
  </div>

  <div class="form-row">
    <label for="node-input-method"
      ><i class="fa fa-tasks"></i>
      <span data-i18n="OpenaiApi.label.method"></span
    ></label>
    <select id="node-input-method">
      @@include('./admin/template.html')
        @@include('./assistants/template.html')
        @@include('./audio/template.html')
        @@include('./batch/template.html')
        @@include('./chat/template.html')
        @@include('./chatkit/template.html')
        @@include('./container-files/template.html')
        @@include('./containers/template.html')
        @@include('./conversations/template.html')
        @@include('./embeddings/template.html')
        @@include('./evals/template.html')
        @@include('./files/template.html')
        @@include('./fine-tuning/template.html')
        @@include('./images/template.html')
        @@include('./messages/template.html')
        @@include('./models/template.html')
        @@include('./moderations/template.html')
        @@include('./realtime/template.html')
        @@include('./responses/template.html')
        @@include('./runs/template.html')
        @@include('./skills/template.html')
        @@include('./threads/template.html')
        @@include('./uploads/template.html')
        @@include('./videos/template.html')
        @@include('./webhooks/template.html')
        @@include('./vector-stores/template.html')
        @@include('./vector-store-files/template.html')
        @@include('./vector-store-file-batches/template.html')
    </select>
  </div>
</script>

<script type="text/html" data-help-name="OpenAI API">
  <p>
    OpenAI Platform Services API. Please see the
    <a href="https://developers.openai.com/api/reference" target="_blank"
      >OpenAI API Reference</a
    >
    for more details.
  </p>
  <p><b>Reference</b></p>

  @@include('./admin/help.html')
  @@include('./assistants/help.html')
  @@include('./audio/help.html')
  @@include('./batch/help.html')
  @@include('./chat/help.html')
  @@include('./chatkit/help.html')
  @@include('./container-files/help.html')
  @@include('./containers/help.html')
  @@include('./conversations/help.html')
  @@include('./embeddings/help.html')
  @@include('./evals/help.html')
  @@include('./files/help.html')
  @@include('./fine-tuning/help.html')
  @@include('./images/help.html')
  @@include('./messages/help.html')
  @@include('./models/help.html')
  @@include('./moderations/help.html')
  @@include('./realtime/help.html')
  @@include('./responses/help.html')
  @@include('./runs/help.html')
  @@include('./skills/help.html')
  @@include('./threads/help.html')
  @@include('./uploads/help.html')
  @@include('./videos/help.html')
  @@include('./webhooks/help.html')
  @@include('./vector-stores/help.html')
  @@include('./vector-store-files/help.html')
  @@include('./vector-store-file-batches/help.html')
</script>

<script type="text/javascript">
  RED.nodes.registerType("Service Host", {
    category: "config",
    defaults: {
      apiBase: { value: "https://api.openai.com/v1", required: true },
      apiBaseType: { value: "str" },
      secureApiKeyHeaderOrQueryName: { value: "Authorization" },
      secureApiKeyHeaderOrQueryNameType: { value: "str" },
      organizationId: { value: "" },
      organizationIdType: { value: "str" },
      secureApiKeyIsQuery: { value: false },
      secureApiKeyValueType: { value: "cred" },
      secureApiKeyValueRef: { value: "" },
      secureAdminApiKeyValueType: { value: "cred" },
      secureAdminApiKeyValueRef: { value: "" },
      name: { value: "" },
    },
    credentials: {
      secureApiKeyValue: { type: "password" },
      secureAdminApiKeyValue: { type: "password" },
      temp: { type: "text" },
    },
    label: function () {
      return this.name || this.host;
    },
    labelStyle: function () {
      return this.name ? "node_label_italic" : "";
    },
    oneditprepare: function () {
      $("#node-config-input-secureApiKeyIsQuery-label").hide();
      $("#node-config-input-secureApiKeyIsQuery").hide();
      var selected = $(
        "#node-config-input-secureApiKeyIsQuery option:selected",
      );
      if (!selected.val()) {
        $("#node-config-input-secureApiKeyIsQuery").val(false);
      }

      function initializeCredentialTypedInput(fieldName) {
        const input = $(`#node-config-input-${fieldName}`);
        const typeInput = $(`#node-config-input-${fieldName}Type`);
        const refInput = $(`#node-config-input-${fieldName}Ref`);
        const existingCredValue = input.val();

        input.typedInput({
          default: "cred",
          types: ["cred", "env", "msg", "flow", "global"],
          typeField: `#node-config-input-${fieldName}Type`,
        });

        if (typeInput.val() === "cred" && existingCredValue) {
          input.typedInput("value", existingCredValue);
        }

        let previousType = input.typedInput("type");
        const syncInputValue = function () {
          const selectedType = input.typedInput("type");
          const currentValue = input.typedInput("value");

          if (selectedType !== "cred" && currentValue === "__PWRD__") {
            input.typedInput("value", refInput.val() || "");
          }

          if (selectedType === "cred" && previousType !== "cred") {
            if (currentValue === refInput.val()) {
              input.typedInput("value", "");
            }
          }

          previousType = selectedType;
        };

        if (typeInput.val() === "str") {
          input.typedInput("type", "cred");
          typeInput.val("cred");
        }

        if (typeInput.val() !== "cred" && refInput.val()) {
          input.typedInput("value", refInput.val());
        }

        syncInputValue();
        input.on("change", function () {
          syncInputValue();
        });
      }

      function saveCredentialTypedInput(fieldName) {
        const input = $(`#node-config-input-${fieldName}`);
        const typeInput = $(`#node-config-input-${fieldName}Type`);
        const refInput = $(`#node-config-input-${fieldName}Ref`);
        const selectedType = input.typedInput("type");

        typeInput.val(selectedType);

        if (selectedType !== "cred") {
          const inputValue = input.typedInput("value");
          if (inputValue && inputValue !== "__PWRD__") {
            refInput.val(inputValue);
            input.typedInput("value", "");
          }
        } else {
          refInput.val("");
        }
      }

      initializeCredentialTypedInput("secureApiKeyValue");
      initializeCredentialTypedInput("secureAdminApiKeyValue");

      [
        { input: "#node-config-input-apiBase", type: "#node-config-input-apiBaseType" },
        { input: "#node-config-input-secureApiKeyHeaderOrQueryName", type: "#node-config-input-secureApiKeyHeaderOrQueryNameType" },
        { input: "#node-config-input-organizationId", type: "#node-config-input-organizationIdType" }
      ].forEach(function (field) {
        $(field.input).typedInput({
          default: "str",
          types: ["str", "env", "msg", "flow", "global"],
          typeField: field.type,
        });
      });
    },
    oneditsave: function () {
      function saveCredentialTypedInput(fieldName) {
        const input = $(`#node-config-input-${fieldName}`);
        const typeInput = $(`#node-config-input-${fieldName}Type`);
        const refInput = $(`#node-config-input-${fieldName}Ref`);
        const selectedType = input.typedInput("type");

        typeInput.val(selectedType);

        if (selectedType !== "cred") {
          const inputValue = input.typedInput("value");
          if (inputValue && inputValue !== "__PWRD__") {
            refInput.val(inputValue);
            input.typedInput("value", "");
          }
        } else {
          refInput.val("");
        }
      }

      saveCredentialTypedInput("secureApiKeyValue");
      saveCredentialTypedInput("secureAdminApiKeyValue");
    },
  });
</script>

<script type="text/html" data-template-name="Service Host">
  <div class="form-row">
    <label id="node-config-input-apiBase-label" for="node-config-input-apiBase">
      <i class="fa fa-list"></i>
      <span data-i18n="OpenaiApi.label.apiBase"></span>
    </label>
    <input
      type="text"
      id="node-config-input-apiBase"
      placeholder="https://api.openai.com/v1"
    />
    <input type="hidden" id="node-config-input-apiBaseType" />
  </div>
  <div class="form-row">
    <label id="node-config-input-secureApiKeyHeaderOrQueryName-label" for="node-config-input-secureApiKeyHeaderOrQueryName">
      <i class="fa fa-list"></i>
      <span data-i18n="OpenaiApi.label.header"></span>
    </label>
    <input
      type="text"
      id="node-config-input-secureApiKeyHeaderOrQueryName"
      placeholder="Authorization"
    />
    <input type="hidden" id="node-config-input-secureApiKeyHeaderOrQueryNameType" />
  </div>
  <div class="form-row">
    <label id="node-config-input-secureApiKeyValue-label" for="node-config-input-secureApiKeyValue">
      <i class="fa fa-lock"></i>
      <span data-i18n="OpenaiApi.label.apiKey"></span>
    </label>
    <input type="text" id="node-config-input-secureApiKeyValue" placeholder="" />
    <input type="hidden" id="node-config-input-secureApiKeyValueType" />
    <input type="hidden" id="node-config-input-secureApiKeyValueRef" />
  </div>
  <div class="form-row">
    <label id="node-config-input-secureAdminApiKeyValue-label" for="node-config-input-secureAdminApiKeyValue">
      <i class="fa fa-lock"></i>
      <span data-i18n="OpenaiApi.label.adminApiKey"></span>
    </label>
    <input type="text" id="node-config-input-secureAdminApiKeyValue" placeholder="" />
    <input type="hidden" id="node-config-input-secureAdminApiKeyValueType" />
    <input type="hidden" id="node-config-input-secureAdminApiKeyValueRef" />
  </div>
  <div class="form-row">
    <label id="node-config-input-organizationId-label" for="node-config-input-organizationId">
      <i class="fa fa-list"></i>
      <span data-i18n="OpenaiApi.label.organizationId"></span>
    </label>
    <input type="text" id="node-config-input-organizationId" />
    <input type="hidden" id="node-config-input-organizationIdType" />
  </div>
  <div class="form-row">
    <label
      id="node-config-input-secureApiKeyIsQuery-label"
      for="node-config-input-secureApiKeyIsQuery"
      ><i class="fa fa-dot-circle-o"></i>
      <span data-i18n="OpenaiApi.label.isQuery"></span
    ></label>
    <select id="node-config-input-secureApiKeyIsQuery">
      <option value="true">true</option>
      <option value="false">false</option>
    </select>
  </div>

  <div class="form-row">
    <label for="node-config-input-name"
      ><i class="fa fa-tag"></i>
      <span data-i18n="node-red:common.label.name"></span
    ></label>
    <input
      type="text"
      id="node-config-input-name"
      data-i18n="[placeholder]node-red:common.label.name"
    />
  </div>
</script>

<script type="text/html" data-help-name="Service Host">
  <p><b>Auth Header</b>: Header name used to send the API key. Defaults to <code>Authorization</code>.</p>
  <p><b>isQuery</b>: When true, the API key is sent as a query parameter using the Auth Header value as the parameter name.</p>
  <p><b>API Key</b>: Normal API key value or typed reference. Custom header and query auth settings apply to this key only.</p>
  <p><b>Admin API Key</b>: Admin-only API key value or typed reference used for OpenAI Admin-authenticated routes.</p>
</script>