@wso2/am-core-ui 0.0.18 → 0.0.20

package/dist/index-BYy7Iaam.js

@@ -0,0 +1,459 @@
+import { jsx as t, jsxs as k, Fragment as ge } from "react/jsx-runtime";
+import { c as se } from "react/compiler-runtime";
+import { useState as $, useMemo as Q, useRef as pe, useEffect as oe, lazy as we, Suspense as be } from "react";
+import { Typography as H, Box as b, CardContent as xe, Stack as ve, Card as Ie, Alert as N, Button as q, TextField as le, CircularProgress as re, Skeleton as J } from "@wso2/oxygen-ui";
+import { MessageCircle as Te, Send as ce, Rocket as Ae, FlaskConical as Se } from "@wso2/oxygen-ui-icons-react";
+import { o as Z, aM as ke, aN as fe, aO as me, O as de, M as Ce, c as Ne, P as he, N as Ee } from "./index-ByEInFlf.js";
+import "@tanstack/react-query";
+import { useParams as ee } from "react-router-dom";
+import { E as ue } from "./EnvironmentSelector-D8S6nO9u.js";
+function Ke(n) {
+  const e = se(47), {
+    role: r,
+    content: s
+  } = n, {
+    orgId: l,
+    projectId: x,
+    agentId: v
+  } = ee();
+  let C;
+  e[0] !== v || e[1] !== l || e[2] !== x ? (C = {
+    orgName: l,
+    projName: x,
+    agentName: v
+  }, e[0] = v, e[1] = l, e[2] = x, e[3] = C) : C = e[3];
+  const {
+    data: a
+  } = Z(C), i = r === "user" ? "flex-end" : "flex-start";
+  let E;
+  e[4] === Symbol.for("react.memo_cache_sentinel") ? (E = {
+    mb: 0.5
+  }, e[4] = E) : E = e[4];
+  const B = r === "user" ? "row-reverse" : "row", P = r !== "user" ? 0 : 16, g = r === "user" ? 0 : 16, p = r === "user" ? "primary.main" : "background.paper";
+  let o;
+  e[5] !== p ? (o = {
+    minWidth: 300,
+    backgroundColor: p
+  }, e[5] = p, e[6] = o) : o = e[6];
+  let f;
+  e[7] !== P || e[8] !== g || e[9] !== o ? (f = {
+    borderBottomLeftRadius: P,
+    borderBottomRightRadius: g,
+    "& .MuiCardContent-root": o
+  }, e[7] = P, e[8] = g, e[9] = o, e[10] = f) : f = e[10];
+  let c;
+  e[11] !== a?.displayName || e[12] !== r ? (c = r !== "user" && /* @__PURE__ */ t(H, { variant: "caption", children: a?.displayName }), e[11] = a?.displayName, e[12] = r, e[13] = c) : c = e[13];
+  let u;
+  e[14] !== r ? (u = r === "user" && /* @__PURE__ */ t(H, { variant: "caption", color: "primary.contrastText", children: "You" }), e[14] = r, e[15] = u) : u = e[15];
+  const D = r === "user" ? "primary.contrastText" : "text.primary";
+  let I;
+  e[16] !== D ? (I = {
+    color: D
+  }, e[16] = D, e[17] = I) : I = e[17];
+  const R = r === "user" ? "primary.contrastText" : "text.secondary";
+  let j;
+  e[18] !== R ? (j = {
+    color: R
+  }, e[18] = R, e[19] = j) : j = e[19];
+  const _ = r === "user" ? "rgba(255, 255, 255, 0.2)" : "action.hover";
+  let d;
+  e[20] !== _ ? (d = {
+    backgroundColor: _
+  }, e[20] = _, e[21] = d) : d = e[21];
+  const T = r === "user" ? "rgba(255, 255, 255, 0.2)" : "action.hover";
+  let w;
+  e[22] !== T ? (w = {
+    backgroundColor: T
+  }, e[22] = T, e[23] = w) : w = e[23];
+  let y;
+  e[24] !== I || e[25] !== j || e[26] !== d || e[27] !== w ? (y = {
+    "& .MuiTypography-root": I,
+    "& p": j,
+    "& code": d,
+    "& pre": w
+  }, e[24] = I, e[25] = j, e[26] = d, e[27] = w, e[28] = y) : y = e[28];
+  let L;
+  e[29] !== s ? (L = /* @__PURE__ */ t(ke, { content: s }), e[29] = s, e[30] = L) : L = e[30];
+  let M;
+  e[31] !== y || e[32] !== L ? (M = /* @__PURE__ */ t(b, { sx: y, children: L }), e[31] = y, e[32] = L, e[33] = M) : M = e[33];
+  let K;
+  e[34] !== c || e[35] !== u || e[36] !== M ? (K = /* @__PURE__ */ t(xe, { children: /* @__PURE__ */ k(ve, { spacing: 1, children: [
+    c,
+    u,
+    M
+  ] }) }), e[34] = c, e[35] = u, e[36] = M, e[37] = K) : K = e[37];
+  let A;
+  e[38] !== K || e[39] !== f ? (A = /* @__PURE__ */ t(Ie, { variant: "outlined", sx: f, children: K }), e[38] = K, e[39] = f, e[40] = A) : A = e[40];
+  let S;
+  e[41] !== A || e[42] !== B ? (S = /* @__PURE__ */ t(b, { display: "flex", gap: 1.5, maxWidth: 500, flexDirection: B, alignItems: "flex-start", children: A }), e[41] = A, e[42] = B, e[43] = S) : S = e[43];
+  let O;
+  return e[44] !== i || e[45] !== S ? (O = /* @__PURE__ */ t(b, { display: "flex", justifyContent: i, width: "100%", sx: E, children: S }), e[44] = i, e[45] = S, e[46] = O) : O = e[46], O;
+}
+const Re = 2e3;
+function je() {
+  const [n, e] = $(""), [r, s] = $(""), l = Q(() => ({
+    session_id: `session-${Math.floor(Math.random() * 1e3)}`,
+    message: "Hi, How can you help me?",
+    context: {}
+  }), []), [x, v] = $([]), [C, a] = $(null), [i, E] = $(!1), [B, P] = $(!1), [g, p] = $(null), [o, f] = $(!1), c = pe(null), {
+    agentId: u,
+    orgId: D,
+    projectId: I,
+    envId: R
+  } = ee(), {
+    data: j,
+    isLoading: _
+  } = fe({
+    projName: I,
+    orgName: D,
+    agentName: u
+  }, {
+    environment: R ?? ""
+  }), {
+    data: d
+  } = Z({
+    orgName: D,
+    projName: I,
+    agentName: u
+  }), T = d?.configurations?.enableApiKeySecurity ?? !0, w = !!(d?.configurations?.enableOAuthSecurity && !d?.configurations?.enableApiKeySecurity), {
+    data: y,
+    isLoading: L,
+    error: M,
+    refetch: K
+  } = me({
+    orgName: D,
+    projName: I,
+    agentName: u,
+    envId: R
+  }, {
+    enabled: T && !w
+  }), A = Q(() => Object.entries(j ?? {}).map(([h, Y]) => ({
+    label: h,
+    value: Y.url
+  })), [j]);
+  oe(() => {
+    A.length > 0 && e(A[0].value + "/chat");
+  }, [A]), oe(() => {
+    c.current?.scrollIntoView({
+      behavior: "smooth"
+    });
+  }, [x]);
+  const S = async () => {
+    if (!r.trim() || i || w) return;
+    if (T && !y?.apiKey) {
+      a("API key security is enabled, but a test API key is not available yet.");
+      return;
+    }
+    const h = {
+      id: Date.now().toString(),
+      role: "user",
+      content: r.trim(),
+      timestamp: /* @__PURE__ */ new Date()
+    };
+    v((Y) => [...Y, h]), s(""), a(null), p(null), E(!0);
+    try {
+      const Y = {
+        ...l,
+        message: h.content
+      }, V = (m) => {
+        const G = {
+          "Content-Type": "application/json"
+        };
+        return T && m && (G["X-API-Key"] = m), fetch(n, {
+          method: "POST",
+          headers: G,
+          body: JSON.stringify(Y),
+          referrerPolicy: ""
+        });
+      }, X = async () => {
+        try {
+          const m = await V(y?.apiKey);
+          return T && m.status === 401 ? null : m;
+        } catch (m) {
+          if (T && m instanceof TypeError)
+            return null;
+          throw m;
+        }
+      };
+      let z = await X();
+      if (z === null) {
+        P(!0);
+        try {
+          await new Promise((m) => setTimeout(m, Re)), z = await X();
+        } finally {
+          P(!1);
+        }
+      }
+      if (z === null) {
+        v((m) => m.filter((G) => G.id !== h.id)), s(h.content), y?.gatewayConnected !== !1 && p("unauthorized");
+        return;
+      }
+      let W;
+      const ie = z.headers.get("content-type");
+      if (ie && ie.includes("application/json") ? W = await z.json() : W = await z.text(), z.ok) {
+        const m = typeof W?.response == "string" ? W.response : JSON.stringify(W?.result, null, 4), G = {
+          id: (Date.now() + 1).toString(),
+          role: "assistant",
+          content: m,
+          timestamp: /* @__PURE__ */ new Date()
+        };
+        v((ne) => [...ne, G]);
+      } else {
+        const m = typeof W == "string" ? W : JSON.stringify(W, null, 2);
+        a(`Request failed with status ${z.status}: ${m}`);
+        const G = {
+          id: (Date.now() + 1).toString(),
+          role: "assistant",
+          content: `Error: ${m}`,
+          timestamp: /* @__PURE__ */ new Date()
+        };
+        v((ne) => [...ne, G]);
+      }
+    } catch (Y) {
+      const V = Y instanceof Error ? Y.message : "An error occurred while making the request";
+      a(V);
+      const X = {
+        id: (Date.now() + 1).toString(),
+        role: "assistant",
+        content: `Error: ${V}`,
+        timestamp: /* @__PURE__ */ new Date()
+      };
+      v((z) => [...z, X]);
+    } finally {
+      E(!1);
+    }
+  }, O = (h) => {
+    h.key === "Enter" && !h.shiftKey && (h.preventDefault(), S());
+  }, F = async () => {
+    f(!0);
+    try {
+      await K(), p("refreshed");
+    } finally {
+      f(!1);
+    }
+  }, U = /* @__PURE__ */ k(ge, { children: [
+    T && y?.gatewayConnected === !1 && /* @__PURE__ */ t(N, { severity: "warning", sx: {
+      borderRadius: 1
+    }, children: "The gateway is not connected to the control plane right now. The test API key has been stored but will only work once the gateway reconnects." }),
+    g === "unauthorized" && /* @__PURE__ */ t(N, { severity: "error", action: /* @__PURE__ */ t(q, { color: "inherit", size: "small", onClick: F, disabled: o, children: o ? "Refreshing..." : "Refresh test key" }), sx: {
+      borderRadius: 1
+    }, children: "The request was not authorized. The test API key may not be active on the gateway yet." }),
+    g === "refreshed" && /* @__PURE__ */ t(N, { severity: "info", onClose: () => p(null), sx: {
+      borderRadius: 1
+    }, children: "Test key refreshed. Send your message again." })
+  ] }), te = w || i || _ || L || T && !y?.apiKey, ae = te || !r.trim();
+  return w ? /* @__PURE__ */ t(N, { severity: "info", children: /* @__PURE__ */ t(H, { variant: "caption", children: "Testing is unavailable while OAuth is enabled. Test this endpoint out-of-band with a valid token." }) }) : x.length === 0 ? /* @__PURE__ */ t(de, { children: /* @__PURE__ */ k(b, { display: "flex", justifyContent: "center", alignItems: "center", width: "100%", flexDirection: "column", minHeight: "calc(100vh - 550px)", gap: 2, children: [
+    /* @__PURE__ */ k(b, { display: "flex", flexDirection: "column", gap: 1, alignItems: "center", children: [
+      /* @__PURE__ */ t(Te, { size: 40 }),
+      /* @__PURE__ */ t(H, { variant: "h5", children: "Start a conversation" }),
+      /* @__PURE__ */ t(H, { variant: "body2", children: "Send a message to begin chatting with the agent" })
+    ] }),
+    /* @__PURE__ */ k(b, { width: "100%", maxWidth: 600, display: "flex", flexDirection: "column", gap: 1, children: [
+      U,
+      /* @__PURE__ */ k(b, { width: "100%", display: "flex", justifyContent: "flex-end", alignItems: "center", gap: 1, children: [
+        /* @__PURE__ */ t(le, { fullWidth: !0, value: r, onChange: (h) => s(h.target.value), onKeyDown: O, placeholder: "Type your message...", variant: "outlined", disabled: te }),
+        /* @__PURE__ */ t(q, { variant: "contained", color: "primary", onClick: S, disabled: ae, startIcon: i || _ ? /* @__PURE__ */ t(re, { size: 16 }) : /* @__PURE__ */ t(ce, { size: 16 }), children: i ? "Sending" : "Send" })
+      ] })
+    ] })
+  ] }) }) : /* @__PURE__ */ t(de, { children: /* @__PURE__ */ k(b, { display: "flex", flexDirection: "column", height: "calc(100vh - 320px)", width: "100%", children: [
+    /* @__PURE__ */ k(b, { flex: 1, display: "flex", flexDirection: "column", justifyContent: "flex-end", gap: 2, p: 2, sx: {
+      flexGrow: 1
+    }, children: [
+      x.map((h) => /* @__PURE__ */ t(Ke, { id: h.id, role: h.role, content: h.content }, h.id)),
+      i && /* @__PURE__ */ t(b, { display: "flex", justifyContent: "flex-start", width: "100%", children: /* @__PURE__ */ k(b, { display: "flex", gap: 1, alignItems: "flex-start", children: [
+        /* @__PURE__ */ t(re, { size: 16 }),
+        /* @__PURE__ */ t(H, { variant: "body2", color: "text.secondary", sx: {
+          fontSize: "0.875rem"
+        }, children: B ? "Waiting for the test API key to become active..." : "Loading..." })
+      ] }) }),
+      /* @__PURE__ */ t("div", { ref: c })
+    ] }),
+    U,
+    C && /* @__PURE__ */ t(N, { severity: "error", onClose: () => a(null), sx: {
+      borderRadius: 1
+    }, children: C }),
+    !!M && /* @__PURE__ */ t(N, { severity: "error", sx: {
+      borderRadius: 1
+    }, children: "Failed to obtain a test API key. Send may fail until this is resolved." }),
+    /* @__PURE__ */ k(b, { display: "flex", justifyContent: "flex-end", alignItems: "center", gap: 1, py: 2, children: [
+      /* @__PURE__ */ t(le, { fullWidth: !0, value: r, onChange: (h) => s(h.target.value), onKeyDown: O, placeholder: "Type your message...", variant: "outlined", size: "small", disabled: te }),
+      /* @__PURE__ */ t(q, { variant: "contained", color: "primary", onClick: S, disabled: ae, startIcon: i || _ ? /* @__PURE__ */ t(re, { size: 16 }) : /* @__PURE__ */ t(ce, { size: 16 }), children: i || _ ? "Sending" : "Send" })
+    ] })
+  ] }) });
+}
+const Pe = we(() => import("./index-Cz7-AZwE.js")), De = 2e3, _e = {
+  statePlugins: {
+    spec: {
+      wrapSelectors: {
+        servers: () => () => [],
+        schemes: () => () => []
+      }
+    }
+  },
+  wrapComponents: {
+    info: () => () => null
+  }
+};
+function Le() {
+  const {
+    orgId: n,
+    projectId: e,
+    agentId: r,
+    envId: s
+  } = ee(), {
+    data: l,
+    isLoading: x,
+    error: v
+  } = fe({
+    agentName: r,
+    orgName: n,
+    projName: e
+  }, {
+    environment: s ?? ""
+  }), {
+    data: C
+  } = Z({
+    orgName: n,
+    projName: e,
+    agentName: r
+  }), a = !!C?.configurations?.enableApiKeySecurity, i = !!(C?.configurations?.enableOAuthSecurity && !C?.configurations?.enableApiKeySecurity), {
+    data: E,
+    isLoading: B,
+    isError: P,
+    error: g,
+    refetch: p
+  } = me({
+    orgName: n,
+    projName: e,
+    agentName: r,
+    envId: s
+  }, {
+    enabled: a && !i
+  }), o = E?.apiKey, [f, c] = $(null), [u, D] = $(!1), I = E?.gatewayConnected === !1, R = Q(() => Object.keys(l ?? {})?.[0] ?? "", [l]), j = Q(() => (d) => {
+    const T = l?.[R]?.url;
+    if (!T)
+      return d;
+    const w = new URL(d.url, window.location.origin), y = new URL(T), L = y.pathname.replace(/\/+$/, ""), M = w.pathname.replace(/^\/+/, ""), K = [L, M].filter(Boolean).join("/");
+    return y.pathname = K.startsWith("/") ? K : `/${K}`, y.search = w.search, y.hash = w.hash, d.url = y.toString(), a && o && (d.headers = d.headers ?? {}, d.headers["X-API-Key"] = o), a && !I && (d.userFetch = async (A, S) => {
+      const O = () => new Promise((F) => setTimeout(F, De));
+      try {
+        const F = await fetch(A, S);
+        if (F.status !== 401)
+          return F;
+        await O();
+        const U = await fetch(A, S);
+        return U.status === 401 && c("unauthorized"), U;
+      } catch (F) {
+        if (!(F instanceof TypeError))
+          throw F;
+        await O();
+        try {
+          return await fetch(A, S);
+        } catch (U) {
+          throw c("unauthorized"), U;
+        }
+      }
+    }), d;
+  }, [l, R, a, o, I]), _ = async () => {
+    D(!0);
+    try {
+      await p(), c("refreshed");
+    } finally {
+      D(!1);
+    }
+  };
+  return x || a && B ? /* @__PURE__ */ t(J, { variant: "rounded", height: 500 }) : v ? /* @__PURE__ */ t(N, { severity: "error", children: Ce(v) }) : a && P ? /* @__PURE__ */ k(N, { severity: "error", children: [
+    "Failed to fetch test API key",
+    g instanceof Error ? `: ${g.message}` : "",
+    "."
+  ] }) : l?.[R]?.schema?.content ? /* @__PURE__ */ k(be, { fallback: /* @__PURE__ */ t(J, { variant: "rounded", height: 500 }), children: [
+    i && /* @__PURE__ */ t(N, { severity: "info", sx: {
+      mb: 2
+    }, children: /* @__PURE__ */ k(H, { variant: "caption", children: [
+      "OAuth is enabled — test this endpoint out-of-band with an",
+      " ",
+      /* @__PURE__ */ t("code", { children: "Authorization: Bearer <token>" }),
+      " header."
+    ] }) }),
+    a && I && /* @__PURE__ */ t(N, { severity: "warning", sx: {
+      mb: 2
+    }, children: "The gateway is not connected to the control plane right now. The test API key has been stored but will only work once the gateway reconnects." }),
+    f === "unauthorized" && /* @__PURE__ */ t(N, { severity: "error", action: /* @__PURE__ */ t(q, { color: "inherit", size: "small", onClick: _, disabled: u, children: u ? "Refreshing..." : "Refresh test key" }), sx: {
+      mb: 2
+    }, children: "The test API key is not authorized on the gateway yet. Execute the request again, or refresh the test key." }),
+    f === "refreshed" && /* @__PURE__ */ t(N, { severity: "info", onClose: () => c(null), sx: {
+      mb: 2
+    }, children: "Test key refreshed. Execute the request again." }),
+    /* @__PURE__ */ t(b, { sx: {
+      "& .swagger-ui .wrapper": {
+        padding: 0
+      }
+    }, children: /* @__PURE__ */ t(Pe, { spec: l?.[R].schema.content, layout: "BaseLayout", plugins: [_e], docExpansion: "list", requestInterceptor: j, supportedSubmitMethods: i ? [] : void 0 }) })
+  ] }) : /* @__PURE__ */ t(N, { severity: "warning", children: "No API schema available for this endpoint." });
+}
+const Me = () => {
+  const n = se(4);
+  let e, r, s;
+  n[0] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ t(J, { variant: "circular", width: 80, height: 80 }), r = /* @__PURE__ */ t(J, { variant: "text", width: 250, height: 32 }), s = /* @__PURE__ */ t(J, { variant: "text", width: 350, height: 20 }), n[0] = e, n[1] = r, n[2] = s) : (e = n[0], r = n[1], s = n[2]);
+  let l;
+  return n[3] === Symbol.for("react.memo_cache_sentinel") ? (l = /* @__PURE__ */ k(b, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 2, height: "60vh", children: [
+    e,
+    r,
+    s,
+    /* @__PURE__ */ t(J, { variant: "rounded", width: 500, height: 48, sx: {
+      mt: 2
+    } })
+  ] }), n[3] = l) : l = n[3], l;
+}, ye = () => {
+  const n = se(18), {
+    orgId: e,
+    projectId: r,
+    agentId: s,
+    envId: l
+  } = ee();
+  let x;
+  n[0] !== s || n[1] !== e || n[2] !== r ? (x = {
+    orgName: e,
+    projName: r,
+    agentName: s
+  }, n[0] = s, n[1] = e, n[2] = r, n[3] = x) : x = n[3];
+  const {
+    data: v,
+    isLoading: C
+  } = Z(x), a = v?.agentType?.subType === "chat-api";
+  let i;
+  n[4] !== s || n[5] !== e || n[6] !== r ? (i = {
+    orgName: e,
+    projName: r,
+    agentName: s
+  }, n[4] = s, n[5] = e, n[6] = r, n[7] = i) : i = n[7];
+  const {
+    data: E,
+    isLoading: B
+  } = Ne(i), P = E?.[l ?? ""], g = B || C;
+  if (!g && P?.status !== "active") {
+    let c;
+    n[8] === Symbol.for("react.memo_cache_sentinel") ? (c = /* @__PURE__ */ t(ue, {}), n[8] = c) : c = n[8];
+    let u;
+    return n[9] === Symbol.for("react.memo_cache_sentinel") ? (u = /* @__PURE__ */ t(he, { title: "Try your agent", disableIcon: !0, actions: c, children: /* @__PURE__ */ t(b, { height: "50vh", display: "flex", justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ t(Ee, { iconElement: Ae, disableBackground: !0, message: "Agent is not deployed", subtitle: "Deploy your agent to try it out. You can deploy your agent by clicking the deploy button in the deploy tab." }) }) }), n[9] = u) : u = n[9], u;
+  }
+  let p;
+  n[10] === Symbol.for("react.memo_cache_sentinel") ? (p = /* @__PURE__ */ t(ue, {}), n[10] = p) : p = n[10];
+  let o;
+  n[11] !== s || n[12] !== a || n[13] !== g ? (o = g ? /* @__PURE__ */ t(Me, {}) : /* @__PURE__ */ t(ge, { children: a ? /* @__PURE__ */ t(je, {}, s) : /* @__PURE__ */ t(Le, {}, s) }), n[11] = s, n[12] = a, n[13] = g, n[14] = o) : o = n[14];
+  let f;
+  return n[15] !== g || n[16] !== o ? (f = /* @__PURE__ */ t(he, { title: "Try your agent", disableIcon: !0, isLoading: g, actions: p, children: o }), n[15] = g, n[16] = o, n[17] = f) : f = n[17], f;
+}, He = {
+  title: "Try It",
+  description: "A page component for Try It",
+  icon: Se,
+  path: "/test",
+  component: ye,
+  levels: {
+    component: ye
+  }
+};
+export {
+  ye as TestComponent,
+  He as metaData
+};