@wso2/am-core-ui 0.0.18 → 0.0.20

package/dist/llmProviderPayload-BPzWDy7n.js

@@ -0,0 +1,332 @@
+import { jsxs as s, jsx as t, Fragment as me } from "react/jsx-runtime";
+import { useState as k, useMemo as B, useEffect as R, useCallback as L } from "react";
+import { Form as o, Typography as U, Box as S, TextField as T, Skeleton as H, CardContent as ue, Collapse as F, InputAdornment as Y, Tooltip as ee, IconButton as te, Autocomplete as ae, Alert as O, Button as re } from "@wso2/oxygen-ui";
+import { Brain as he, Unlock as ye, Lock as ge, EyeOff as ve, Eye as fe } from "@wso2/oxygen-ui-icons-react";
+import { o as xe, c as Ie, s as I, l as $ } from "./schemas-DFScWdSL.js";
+import { c as be } from "react/compiler-runtime";
+import { y as we, w as Ce } from "./index-ByEInFlf.js";
+import "@tanstack/react-query";
+import { P as Te } from "./PolicyListSection-D6aVSKwP.js";
+const Ee = /^v\d+\.\d+$/, Se = xe({
+  templateId: I().trim().min(1, "Select a provider template"),
+  displayName: I().trim().min(1, "Display name is required").min(2, "Display name must be at least 2 characters").max(120, "Display name must be at most 120 characters"),
+  version: I().trim().min(1, "Version is required").regex(Ee, "Version must match v<major>.<minor> (e.g., v1.0)"),
+  description: I().trim().max(512, "Description cannot exceed 512 characters").optional().or($("")),
+  context: I().trim().refine((i) => !i || i !== "/" && /^\/([a-zA-Z0-9_\-/]*[^/])?$/.test(i), "Context must start with / and have no trailing slash; root path (/) is invalid (e.g., /my-provider)").optional().or($("")),
+  upstreamUrl: I().trim().refine((i) => !i || I().url().safeParse(i).success, "Enter a valid URL"),
+  apiKey: I().trim().optional().or($("")),
+  gatewayIds: Ie(I()).optional()
+});
+function Ae(i) {
+  const a = be(10), {
+    errors: m,
+    validateForm: g,
+    setFieldError: v,
+    validateField: c
+  } = we(i);
+  let b;
+  a[0] === Symbol.for("react.memo_cache_sentinel") ? (b = {}, a[0] = b) : b = a[0];
+  const [w, A] = k(b);
+  let f;
+  a[1] !== m || a[2] !== g ? (f = (r) => g(r) ? (A({}), !0) : (A({
+    ...m
+  }), !1), a[1] = m, a[2] = g, a[3] = f) : f = a[3];
+  const E = f;
+  let p;
+  return a[4] !== m || a[5] !== E || a[6] !== w || a[7] !== v || a[8] !== c ? (p = {
+    errors: m,
+    setFieldError: v,
+    validateField: c,
+    lastSubmittedValidationErrors: w,
+    guardSubmit: E
+  }, a[4] = m, a[5] = E, a[6] = w, a[7] = v, a[8] = c, a[9] = p) : p = a[9], p;
+}
+function Le(i) {
+  const a = i.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  return a ? `/${a}` : "";
+}
+const Ue = {
+  templateId: "",
+  displayName: "",
+  version: "v1.0",
+  description: "",
+  context: "",
+  upstreamUrl: "",
+  apiKey: "",
+  gatewayIds: []
+}, ie = "repeat(auto-fill, minmax(min(100%, 240px), 1fr))", De = ({
+  orgId: i,
+  templates: a,
+  isLoadingTemplates: m,
+  missingParamsMessage: g,
+  errorMessage: v,
+  isSubmitting: c,
+  submitLabel: b = "Add provider",
+  showAdvancedBasicDetails: w = !0,
+  showGuardrails: A = !0,
+  showGatewaySelector: f = !0,
+  onCancel: E,
+  onSubmit: p
+}) => {
+  const [r, u] = k(Ue), {
+    errors: d,
+    setFieldError: h,
+    validateField: P,
+    lastSubmittedValidationErrors: M,
+    guardSubmit: j
+  } = Ae(Se), q = B(() => [...a].sort((e, n) => e.name.localeCompare(n.name)), [a]), N = B(() => a.find((e) => e.id === r.templateId) ?? null, [r.templateId, a]), {
+    data: X,
+    isLoading: W
+  } = Ce({
+    orgName: i
+  }), x = B(() => X?.gateways.filter((e) => e.status === "ACTIVE") ?? [], [X?.gateways]);
+  R(() => {
+    x.length > 0 && r.gatewayIds?.length === 0 && u({
+      ...r,
+      gatewayIds: [x[0].uuid]
+    });
+  }, [x]);
+  const z = !!N?.hasTemplateUrl, Z = !z, G = !!N?.hasTemplateAuthHeader, [V, D] = k([]), [_, J] = k(!1), [K, ne] = k(!1), oe = L((e) => {
+    D((n) => n.some((l) => l.name === e.name && l.version === e.version) ? n : [...n, e]);
+  }, []), le = L((e) => {
+    D((n) => n.map((l) => l.name === e.name && l.version === e.version ? e : l));
+  }, []), de = L((e, n) => {
+    D((l) => l.filter((y) => !(y.name === e && y.version === n)));
+  }, []);
+  R(() => {
+    N && u((e) => ({
+      ...e,
+      upstreamUrl: N.endpointUrl ?? ""
+    }));
+  }, [N]), R(() => {
+    const {
+      displayName: e,
+      context: n
+    } = r;
+    if (e) {
+      const l = Le(e);
+      l && (n === "" || l.startsWith(n ?? "")) && (u((y) => ({
+        ...y,
+        context: l
+      })), h("context", P("context", l, {
+        ...r,
+        context: l
+      })));
+    }
+  }, [r.displayName]);
+  const C = L((e, n) => {
+    u((l) => {
+      const y = {
+        ...l,
+        [e]: n
+      }, pe = P(e, y[e], y);
+      return h(e, pe), y;
+    });
+  }, [h, P]), se = L((e) => {
+    J(!1), u((n) => {
+      const l = {
+        ...n,
+        templateId: e,
+        upstreamUrl: "",
+        apiKey: ""
+      }, y = P("templateId", e, l);
+      return h("templateId", y), h("upstreamUrl", void 0), h("apiKey", void 0), l;
+    });
+  }, [h, P]), ce = L(() => {
+    let e = !1;
+    Z && !r.upstreamUrl.trim() && (h("upstreamUrl", "Upstream endpoint is required"), e = !0), G && !r.apiKey?.trim() && (h("apiKey", "API key / credential is required"), e = !0), !e && j(r) && p({
+      ...r,
+      displayName: r.displayName.trim(),
+      version: r.version.trim(),
+      description: r.description?.trim() ?? "",
+      context: r.context?.trim() ?? "",
+      upstreamUrl: r.upstreamUrl?.trim() ?? "",
+      apiKey: G ? r.apiKey?.trim() ?? "" : "",
+      gatewayIds: r.gatewayIds ?? []
+    }, V);
+  }, [r, j, V, p, G, Z, h]), Q = B(() => {
+    const e = Object.entries(M).filter(([, n]) => n);
+    return e.length > 0 ? e : null;
+  }, [M]);
+  return /* @__PURE__ */ s(o.Stack, { spacing: 3, children: [
+    g && /* @__PURE__ */ t(U, { color: "error", variant: "body2", children: g }),
+    /* @__PURE__ */ s(o.Section, { children: [
+      /* @__PURE__ */ t(o.Subheader, { children: "Basic Details" }),
+      /* @__PURE__ */ s(o.Stack, { spacing: 2, children: [
+        /* @__PURE__ */ s(o.Stack, { direction: {
+          xs: "column",
+          md: "row"
+        }, spacing: 2, useFlexGap: !0, children: [
+          /* @__PURE__ */ t(S, { sx: {
+            flex: 2
+          }, children: /* @__PURE__ */ t(o.ElementWrapper, { label: "Name", name: "displayName", children: /* @__PURE__ */ t(T, { id: "displayName", fullWidth: !0, value: r.displayName, onChange: (e) => C("displayName", e.target.value), placeholder: "Production OpenAI Provider", error: !!d.displayName, helperText: d.displayName }) }) }),
+          w && /* @__PURE__ */ t(S, { sx: {
+            flex: 1
+          }, children: /* @__PURE__ */ t(o.ElementWrapper, { label: "Version", name: "version", children: /* @__PURE__ */ t(T, { id: "version", fullWidth: !0, value: r.version, onChange: (e) => C("version", e.target.value), placeholder: "v1.0", error: !!d.version, helperText: d.version }) }) })
+        ] }),
+        w && /* @__PURE__ */ s(me, { children: [
+          /* @__PURE__ */ t(o.ElementWrapper, { label: "Description (optional)", name: "description", children: /* @__PURE__ */ t(T, { id: "description", fullWidth: !0, multiline: !0, rows: 2, value: r.description ?? "", onChange: (e) => C("description", e.target.value), placeholder: "Primary LLM provider for production", error: !!d.description, helperText: d.description }) }),
+          /* @__PURE__ */ t(o.ElementWrapper, { label: "Context path (optional)", name: "context", children: /* @__PURE__ */ t(T, { id: "context", fullWidth: !0, value: r.context ?? "", onChange: (e) => C("context", e.target.value), placeholder: "/my-provider", error: !!d.context, helperText: d.context ?? "API context path (must start with /, no trailing slash)" }) })
+        ] })
+      ] })
+    ] }),
+    m && /* @__PURE__ */ s(S, { children: [
+      /* @__PURE__ */ t(H, { variant: "text", width: 140, height: 20, sx: {
+        mb: 1.5
+      } }),
+      /* @__PURE__ */ t(S, { sx: {
+        display: "grid",
+        gap: 1.5,
+        gridTemplateColumns: ie
+      }, children: Array.from({
+        length: 8
+      }).map((e, n) => /* @__PURE__ */ t(H, { variant: "rounded", height: 72 }, n)) })
+    ] }),
+    /* @__PURE__ */ s(o.Section, { children: [
+      /* @__PURE__ */ t(o.Subheader, { children: "Provider Template" }),
+      /* @__PURE__ */ s(S, { sx: {
+        mt: 1.5,
+        display: "grid",
+        gap: 1.5,
+        gridTemplateColumns: ie
+      }, children: [
+        q.map((e) => {
+          const n = r.templateId === e.id;
+          return /* @__PURE__ */ t(o.CardButton, { selected: n, onClick: () => se(e.id), children: /* @__PURE__ */ t(ue, { children: /* @__PURE__ */ s(o.Stack, { direction: "row", spacing: 2, pt: 0.5, alignItems: "center", children: [
+            e.image ? /* @__PURE__ */ t(S, { component: "img", src: e.image, alt: e.name, sx: {
+              width: 28,
+              height: 28,
+              objectFit: "contain",
+              backgroundColor: "grey.100",
+              borderRadius: "20%"
+            } }) : /* @__PURE__ */ t(he, { size: 24 }),
+            /* @__PURE__ */ s(o.Stack, { spacing: 0.25, children: [
+              /* @__PURE__ */ t(U, { variant: "subtitle2", noWrap: !0, children: e.name }),
+              e.description && /* @__PURE__ */ t(U, { variant: "caption", color: "text.secondary", noWrap: !0, children: e.description })
+            ] })
+          ] }) }) }, e.id);
+        }),
+        !q.length && !m && /* @__PURE__ */ t(U, { variant: "body2", color: "text.secondary", children: "No provider templates available for this organization." })
+      ] })
+    ] }),
+    /* @__PURE__ */ t(F, { in: !!r.templateId, children: /* @__PURE__ */ s(o.Section, { children: [
+      /* @__PURE__ */ t(o.Subheader, { children: "Runtime Configuration" }),
+      /* @__PURE__ */ s(o.Stack, { spacing: 2, children: [
+        /* @__PURE__ */ t(o.ElementWrapper, { label: "Endpoint URL", name: "upstreamUrl", children: /* @__PURE__ */ t(
+          T,
+          {
+            id: "upstreamUrl",
+            fullWidth: !0,
+            value: r.upstreamUrl ?? "",
+            onChange: (e) => C("upstreamUrl", e.target.value),
+            placeholder: "https://api.openai.com/v1",
+            error: !!d.upstreamUrl,
+            helperText: d.upstreamUrl,
+            slotProps: {
+              input: {
+                readOnly: z && !_,
+                endAdornment: z ? /* @__PURE__ */ t(Y, { position: "end", children: /* @__PURE__ */ t(ee, { title: _ ? "Lock endpoint" : "Unlock to override endpoint", children: /* @__PURE__ */ t(te, { size: "small", onClick: () => J((e) => !e), children: _ ? /* @__PURE__ */ t(ye, { size: 14 }) : /* @__PURE__ */ t(ge, { size: 14 }) }) }) }) : void 0
+              }
+            }
+          }
+        ) }),
+        /* @__PURE__ */ t(o.ElementWrapper, { label: "API key / Credential", name: "apiKey", children: /* @__PURE__ */ t(T, { id: "apiKey", fullWidth: !0, type: K ? "text" : "password", value: r.apiKey, onChange: (e) => C("apiKey", e.target.value), placeholder: "Enter your API key", error: !!d.apiKey, helperText: d.apiKey, slotProps: {
+          input: {
+            endAdornment: /* @__PURE__ */ t(Y, { position: "end", children: /* @__PURE__ */ t(ee, { title: K ? "Hide" : "Show", children: /* @__PURE__ */ t(te, { size: "small", edge: "end", "aria-label": K ? "Hide API key" : "Show API key", onClick: () => ne((e) => !e), children: K ? /* @__PURE__ */ t(ve, { size: 16 }) : /* @__PURE__ */ t(fe, { size: 16 }) }) }) })
+          }
+        } }) })
+      ] })
+    ] }) }),
+    A && /* @__PURE__ */ t(F, { in: !!r.templateId, children: /* @__PURE__ */ t(Te, { title: "Guardrails", description: "Add safety policies to enforce consistent protections.", addButtonLabel: "Add Guardrail", drawerAddTitle: "Add Guardrail", drawerEditTitle: "Edit Guardrail", drawerAddSubtitle: "Choose a guardrail to configure advanced options.", drawerEditSubtitle: "Update the guardrail configuration.", policyNoun: "guardrail", loadingLabel: "Loading guardrails...", searchPlaceholder: "Search guardrails...", catalogErrorLabel: "Failed to load guardrails.", emptySearchTitle: "No guardrails match your search", emptyCatalogTitle: "No guardrails available", emptyCatalogDescription: "No guardrail policies are available in the catalog.", policies: V, onAdd: oe, onEdit: le, onRemove: de }) }),
+    f ? /* @__PURE__ */ t(F, { in: !!r.templateId, children: /* @__PURE__ */ s(o.Section, { children: [
+      /* @__PURE__ */ t(o.Subheader, { children: "Deployment Configuration" }),
+      /* @__PURE__ */ t(o.ElementWrapper, { label: "Gateway", name: "gatewayIds", children: W ? /* @__PURE__ */ t(H, { variant: "rounded", height: 40 }) : /* @__PURE__ */ t(ae, { multiple: !0, options: x, size: "small", value: x.filter((e) => (r.gatewayIds ?? []).includes(e.uuid)), onChange: (e, n) => {
+        C("gatewayIds", n.map((l) => l.uuid));
+      }, getOptionLabel: (e) => e.displayName || e.name || e.uuid, renderInput: (e) => /* @__PURE__ */ t(T, { ...e, placeholder: "Select gateway(s)", error: !!d.gatewayIds, helperText: d.gatewayIds }) }) })
+    ] }) }) : /* @__PURE__ */ s(F, { in: !!r.templateId, children: [
+      !W && x.length === 0 && /* @__PURE__ */ t(O, { severity: "warning", children: "No active gateway is configured for this organization. Ask an admin to configure one before creating an LLM provider." }),
+      !W && x.length > 1 && /* @__PURE__ */ t(o.ElementWrapper, { label: "Gateway", name: "gatewayIds", children: /* @__PURE__ */ t(ae, { options: x, size: "small", value: x.find((e) => (r.gatewayIds ?? []).includes(e.uuid)) ?? null, onChange: (e, n) => {
+        C("gatewayIds", n ? [n.uuid] : []);
+      }, getOptionLabel: (e) => e.displayName || e.name || e.uuid, renderInput: (e) => /* @__PURE__ */ t(T, { ...e, placeholder: "Select gateway", error: !!d.gatewayIds, helperText: d.gatewayIds }) }) })
+    ] }),
+    v && /* @__PURE__ */ t(O, { severity: "error", children: /* @__PURE__ */ t(U, { variant: "body2", children: v }) }),
+    Q && /* @__PURE__ */ t(O, { severity: "error", children: /* @__PURE__ */ s(U, { variant: "body2", component: "span", children: [
+      "Please fix the following:",
+      " ",
+      Q.map(([, e]) => e).join("; ")
+    ] }) }),
+    /* @__PURE__ */ s(S, { sx: {
+      mt: 2,
+      display: "flex",
+      gap: 1
+    }, children: [
+      /* @__PURE__ */ t(re, { variant: "outlined", onClick: E, children: "Cancel" }),
+      /* @__PURE__ */ t(re, { variant: "contained", onClick: ce, disabled: c || !r.gatewayIds || r.gatewayIds?.length === 0, children: c ? "Creating..." : b })
+    ] })
+  ] });
+}, Pe = (i) => i.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+function _e(i) {
+  return i?.map((a) => ({
+    id: a.id,
+    handle: a.id,
+    name: a.name,
+    description: a.description,
+    image: a.metadata?.logoUrl,
+    hasTemplateUrl: !!a.metadata?.endpointUrl,
+    endpointUrl: a.metadata?.endpointUrl,
+    hasTemplateAuthType: !!a.metadata?.auth?.type,
+    hasTemplateAuthHeader: !!a.metadata?.auth?.header,
+    authType: a.metadata?.auth?.type,
+    authHeader: a.metadata?.auth?.header,
+    authValuePrefix: a.metadata?.auth?.valuePrefix
+  })) ?? [];
+}
+function Re(i, a, m) {
+  const g = i.displayName?.trim() || "", v = Pe(g) || "llm-provider", c = m.find((u) => u.id === i.templateId), b = c?.handle || c?.name || i.templateId, w = a.length > 0 ? a.map((u) => ({
+    name: u.name,
+    version: u.version,
+    paths: [{
+      path: "/*",
+      methods: ["*"],
+      params: u.settings ?? {}
+    }]
+  })) : void 0, A = i.context?.trim() || "", f = c?.authType ?? "bearer", E = c?.authHeader ?? "Authorization", p = i.apiKey?.trim() ?? "", r = p ? c?.authValuePrefix ? `${c.authValuePrefix}${p}` : f === "bearer" ? `Bearer ${p}` : p : "";
+  return {
+    id: v,
+    name: g || v,
+    version: i.version.trim(),
+    context: A,
+    template: b,
+    upstream: {
+      main: {
+        url: i.upstreamUrl?.trim(),
+        auth: i.apiKey ? {
+          type: f,
+          header: E,
+          value: r
+        } : void 0
+      }
+    },
+    description: i.description?.trim() || void 0,
+    security: i.apiKey ? {
+      enabled: !0,
+      apiKey: {
+        enabled: !0,
+        key: "X-API-Key",
+        in: "header"
+      }
+    } : void 0,
+    policies: w,
+    gateways: i.gatewayIds && i.gatewayIds.length > 0 ? i.gatewayIds : void 0,
+    accessControl: {
+      exceptions: [],
+      mode: "allow_all"
+    }
+  };
+}
+export {
+  De as A,
+  Re as b,
+  _e as m,
+  Pe as t
+};